@kouji-ui/core 0.0.2

package/src/checkbox/checkbox.spec.ts

@@ -0,0 +1,35 @@
+import { render, fireEvent } from '@testing-library/angular';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { KjCheckbox } from './checkbox';
+
+expect.extend(toHaveNoViolations);
+
+describe('KjCheckbox', () => {
+  it('sets role=checkbox', async () => {
+    const { getByRole } = await render(`<div kjCheckbox tabindex="0">Check</div>`, { imports: [KjCheckbox] });
+    expect(getByRole('checkbox')).toBeInTheDocument();
+  });
+
+  it('has aria-checked=false by default', async () => {
+    const { getByRole } = await render(`<div kjCheckbox tabindex="0">Check</div>`, { imports: [KjCheckbox] });
+    expect(getByRole('checkbox')).toHaveAttribute('aria-checked', 'false');
+  });
+
+  it('toggles checked on click', async () => {
+    const { getByRole } = await render(`<div kjCheckbox tabindex="0">Check</div>`, { imports: [KjCheckbox] });
+    fireEvent.click(getByRole('checkbox'));
+    expect(getByRole('checkbox')).toHaveAttribute('aria-checked', 'true');
+    expect(getByRole('checkbox')).toHaveAttribute('data-checked', '');
+  });
+
+  it('toggles on Space key', async () => {
+    const { getByRole } = await render(`<div kjCheckbox tabindex="0">Check</div>`, { imports: [KjCheckbox] });
+    fireEvent.keyDown(getByRole('checkbox'), { key: ' ' });
+    expect(getByRole('checkbox')).toHaveAttribute('aria-checked', 'true');
+  });
+
+  it('passes axe audit', async () => {
+    const { container } = await render(`<div kjCheckbox tabindex="0" aria-label="Accept terms">Accept</div>`, { imports: [KjCheckbox] });
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});

package/src/checkbox/checkbox.ts

@@ -0,0 +1,82 @@
+import { Directive, inject, model } from '@angular/core';
+import { KjDisabled, KjFocusRing, KjFormControl } from '../primitives';
+
+/**
+ * Adds checkbox semantics with Angular forms integration.
+ * Supports `formControl`, `formControlName`, and `ngModel` bindings.
+ *
+ * @example
+ * ```html
+ * <div kjCheckbox tabindex="0" [(kjChecked)]="accepted" aria-label="Accept terms">Accept</div>
+ * ```
+ * @doc
+ *  @doc-file checkbox.example.ts
+ *    ```typescript
+ *       import { Component, signal } from '@angular/core';
+ *       import { KjCheckbox } from '@kouji-ui/core';
+ *
+ *       @Component({
+ *         standalone: true,
+ *         imports: [KjCheckbox],
+ *         styles: [`
+ *           .row { display: flex; flex-direction: column; gap: 1rem; padding: 2rem; background: #0c0c0c; }
+ *           .item { display: flex; align-items: center; gap: 0.75rem; }
+ *           [kjCheckbox] { width: 18px; height: 18px; border: 2px solid #333; background: #111; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+ *           [data-checked] { background: #b8f500; border-color: #b8f500; }
+ *           [data-checked]::after { content: '✓'; color: #0c0c0c; font-size: 0.75rem; font-weight: bold; }
+ *           span { color: #888; font-family: 'JetBrains Mono', monospace; font-size: 0.875rem; }
+ *         `],
+ *         template: `
+ *           <div class="row">
+ *             <div class="item">
+ *               <div kjCheckbox tabindex="0" [(kjChecked)]="terms" aria-label="Accept terms"></div>
+ *               <span>Accept terms — {{ terms() ? 'checked' : 'unchecked' }}</span>
+ *             </div>
+ *             <div class="item">
+ *               <div kjCheckbox tabindex="0" [(kjChecked)]="newsletter" aria-label="Newsletter"></div>
+ *               <span>Subscribe to newsletter</span>
+ *             </div>
+ *           </div>
+ *         `,
+ *       })
+ *       export class CheckboxExampleComponent {
+ *         terms = signal(false);
+ *         newsletter = signal(true);
+ *       }
+ *    ```
+ * @category Core/Inputs
+ */
+@Directive({
+  selector: '[kjCheckbox]',
+  standalone: true,
+  hostDirectives: [
+    { directive: KjDisabled, inputs: ['kjDisabled'] },
+    KjFocusRing,
+    KjFormControl,
+  ],
+  host: {
+    role: 'checkbox',
+    '[attr.aria-checked]': 'kjChecked().toString()',
+    '[attr.data-checked]': 'kjChecked() ? "" : null',
+    '[attr.disabled]': 'formCtrl.disabled() ? "" : null',
+    '(click)': 'toggle()',
+    '(keydown.space)': 'onSpace($event)',
+    '(blur)': 'formCtrl.notifyTouched()',
+  },
+})
+export class KjCheckbox {
+  readonly formCtrl = inject(KjFormControl);
+
+  /** Whether the checkbox is checked. Supports two-way binding. */
+  kjChecked = model<boolean>(false);
+
+  /** @internal */
+  toggle(): void {
+    const next = !this.kjChecked();
+    this.kjChecked.set(next);
+    this.formCtrl.notifyChange(next);
+  }
+
+  /** @internal */
+  onSpace(e: Event): void { e.preventDefault(); this.toggle(); }
+}

package/src/checkbox/index.ts

@@ -0,0 +1 @@
+export { KjCheckbox } from './checkbox';

package/src/dialog/dialog.confirm.example.ts

@@ -0,0 +1,57 @@
+import { Component, signal } from '@angular/core';
+import { KjDialogTrigger, KjDialog, KjDialogOverlay, KjDialogTitle } from './dialog';
+import { KjButton } from '../button/button';
+
+@Component({
+  selector: 'kj-example-dialog-confirm',
+  standalone: true,
+  imports: [KjDialogTrigger, KjDialog, KjDialogOverlay, KjDialogTitle, KjButton],
+  styleUrls: ['../styles/docs-themes.css'],
+  styles: [`
+    :host { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 3rem 2rem; background: var(--kj-bg); font-family: var(--kj-font); min-height: 160px; flex-direction: column; color: var(--kj-text); }
+    .status { font-size: 0.8125rem; color: var(--kj-text-muted); min-height: 1.25rem; }
+    .status.confirmed { color: var(--kj-accent); }
+    .status.cancelled { color: var(--kj-destructive); }
+    button[kjButton] { padding: 0.5rem 1.5rem; border: var(--kj-btn-border); cursor: pointer; font-family: var(--kj-font); font-size: 0.875rem; }
+    [data-variant="destructive"] { background: var(--kj-destructive); color: #fff; }
+    [data-variant="outline"] { background: transparent; color: var(--kj-text); border: 1px solid var(--kj-border); }
+    ::ng-deep .kj-dialog-backdrop { background: var(--kj-backdrop); }
+    ::ng-deep .kj-dialog-panel { background: transparent; box-shadow: none; }
+    ::ng-deep [kjDialogOverlay] { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; }
+    ::ng-deep [kjDialog] { background: var(--kj-surface); border: 1px solid var(--kj-border); border-radius: var(--kj-radius-lg); padding: 1.5rem; min-width: 22rem; color: var(--kj-text); font-family: var(--kj-font); box-shadow: var(--kj-shadow-hard); }
+    ::ng-deep [kjDialogTitle] { margin: 0 0 0.5rem; font-size: 1.125rem; color: var(--kj-text); }
+    ::ng-deep .dialog-body { margin: 0 0 1.5rem; font-size: 0.875rem; color: var(--kj-text-muted); line-height: 1.6; }
+    ::ng-deep .dialog-actions { display: flex; gap: 0.75rem; justify-content: flex-end; }
+    ::ng-deep .dialog-actions button[kjButton] { padding: 0.4rem 1rem; font-size: 0.8125rem; }
+  `],
+  template: `
+    <button kjButton [kjVariant]="'destructive'"
+            [kjDialogTrigger]="confirmDialog"
+            (kjDialogClosed)="onResult($event)">
+      Delete Account
+    </button>
+    <ng-template #confirmDialog>
+      <div kjDialogOverlay>
+        <div kjDialog #dlg="kjDialog">
+          <h2 kjDialogTitle>Are you absolutely sure?</h2>
+          <p class="dialog-body">This action cannot be undone. All your data will be permanently removed.</p>
+          <div class="dialog-actions">
+            <button kjButton [kjVariant]="'outline'" (click)="dlg.close('cancelled')">Cancel</button>
+            <button kjButton [kjVariant]="'destructive'" (click)="dlg.close('confirmed')">Yes, delete</button>
+          </div>
+        </div>
+      </div>
+    </ng-template>
+    <span class="status"
+          [class.confirmed]="result() === 'confirmed'"
+          [class.cancelled]="result() === 'cancelled'">
+      {{ result() === 'confirmed' ? '✓ Account deleted' : result() === 'cancelled' ? '✕ Cancelled' : '' }}
+    </span>
+  `,
+})
+export class DialogConfirmExample {
+  readonly result = signal<'confirmed' | 'cancelled' | null>(null);
+  onResult(value: unknown): void {
+    if (value === 'confirmed' || value === 'cancelled') this.result.set(value);
+  }
+}

package/src/dialog/dialog.context.ts

@@ -0,0 +1,11 @@
+import { InjectionToken, Signal } from '@angular/core';
+
+export interface KjDialogContext {
+  readonly open: Signal<boolean>;
+  readonly dialogId: string;
+  readonly closeOnEscape: Signal<boolean>;
+  readonly closeOnBackdrop: Signal<boolean>;
+  close(result?: unknown): void;
+}
+
+export const KJ_DIALOG = new InjectionToken<KjDialogContext>('KjDialog');

package/src/dialog/dialog.example.ts

@@ -0,0 +1,40 @@
+import { Component } from '@angular/core';
+import { KjDialogTrigger, KjDialog, KjDialogOverlay, KjDialogTitle, KjDialogClose } from './dialog';
+import { KjButton } from '../button/button';
+
+@Component({
+  selector: 'kj-example-dialog-basic',
+  standalone: true,
+  imports: [KjDialogTrigger, KjDialog, KjDialogOverlay, KjDialogTitle, KjDialogClose, KjButton],
+  styleUrls: ['../styles/docs-themes.css'],
+  styles: [`
+    :host { display: flex; align-items: center; justify-content: center; padding: 3rem 2rem; background: var(--kj-bg); font-family: var(--kj-font); min-height: 160px; }
+    button[kjButton] { padding: 0.5rem 1.5rem; border: var(--kj-btn-border); cursor: pointer; font-family: var(--kj-font); font-size: 0.875rem; transition: var(--kj-transition); }
+    [data-variant="default"] { background: var(--kj-accent); color: var(--kj-accent-on); }
+    [data-variant="outline"] { background: transparent; color: var(--kj-text); border: 1px solid var(--kj-border); }
+    ::ng-deep .kj-dialog-backdrop { background: var(--kj-backdrop); }
+    ::ng-deep .kj-dialog-panel { background: transparent; box-shadow: none; }
+    ::ng-deep [kjDialogOverlay] { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; }
+    ::ng-deep [kjDialog] { background: var(--kj-surface); border: 1px solid var(--kj-border); border-radius: var(--kj-radius-lg); padding: 1.5rem; min-width: 20rem; color: var(--kj-text); font-family: var(--kj-font); box-shadow: var(--kj-shadow-hard); }
+    ::ng-deep [kjDialogTitle] { margin: 0 0 0.5rem; font-size: 1.125rem; color: var(--kj-text); }
+    ::ng-deep .dialog-body { margin: 0 0 1.5rem; font-size: 0.875rem; color: var(--kj-text-muted); line-height: 1.6; }
+    ::ng-deep .dialog-actions { display: flex; gap: 0.75rem; justify-content: flex-end; }
+    ::ng-deep .dialog-actions button[kjButton] { padding: 0.4rem 1rem; font-size: 0.8125rem; }
+  `],
+  template: `
+    <button kjButton [kjVariant]="'default'" [kjDialogTrigger]="myDialog">Open Dialog</button>
+    <ng-template #myDialog>
+      <div kjDialogOverlay>
+        <div kjDialog>
+          <h2 kjDialogTitle>Edit Profile</h2>
+          <p class="dialog-body">Make changes to your profile settings here.</p>
+          <div class="dialog-actions">
+            <button kjButton [kjVariant]="'outline'" kjDialogClose>Cancel</button>
+            <button kjButton [kjVariant]="'default'" kjDialogClose>Save Changes</button>
+          </div>
+        </div>
+      </div>
+    </ng-template>
+  `,
+})
+export class DialogBasicExample {}

package/src/dialog/dialog.finance.example.ts

@@ -0,0 +1,47 @@
+import { Component } from '@angular/core';
+import { KjDialogTrigger, KjDialog, KjDialogOverlay, KjDialogTitle, KjDialogClose } from './dialog';
+
+@Component({
+  selector: 'kj-example-dialog-finance',
+  standalone: true,
+  imports: [KjDialogTrigger, KjDialog, KjDialogOverlay, KjDialogTitle, KjDialogClose],
+  styleUrls: ['../styles/docs-themes.css'],
+  styles: [`
+    :host { display: flex; align-items: center; justify-content: center; padding: 3rem 2rem; background: var(--kj-bg); font-family: var(--kj-font); min-height: 160px; }
+    button {
+      padding: 0.45rem 1.125rem; background: var(--kj-accent); color: var(--kj-accent-on);
+      border: var(--kj-btn-border); border-color: var(--kj-accent);
+      border-radius: var(--kj-radius-md); cursor: pointer; font-family: var(--kj-font); font-size: 0.875rem; font-weight: 500;
+    }
+    button:hover { background: #2563eb; }
+    ::ng-deep .kj-dialog-backdrop { background: var(--kj-backdrop); }
+    ::ng-deep .kj-dialog-panel { background: transparent; box-shadow: none; }
+    ::ng-deep [kjDialogOverlay] { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; }
+    ::ng-deep [kjDialog] { background: var(--kj-surface); border: 1px solid var(--kj-border); border-radius: var(--kj-radius-lg); padding: 1.5rem; min-width: 22rem; box-shadow: var(--kj-shadow-hard); font-family: var(--kj-font); color: var(--kj-text); }
+    ::ng-deep [kjDialogTitle] { margin: 0 0 0.375rem; font-size: 1.0625rem; font-weight: 600; color: var(--kj-text); }
+    ::ng-deep .dialog-body { margin: 0 0 1.5rem; font-size: 0.875rem; color: var(--kj-text-muted); line-height: 1.6; }
+    ::ng-deep .dialog-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
+    ::ng-deep [kjDialogOverlay] button { padding: 0.4rem 1rem; font-size: 0.8125rem; font-weight: 500; border-radius: var(--kj-radius-md); }
+    ::ng-deep .btn-cancel { background: var(--kj-surface); color: var(--kj-text); border: 1px solid var(--kj-border); }
+    ::ng-deep .btn-cancel:hover { background: var(--kj-bg); }
+    ::ng-deep .btn-primary { background: var(--kj-accent); color: var(--kj-accent-on); border-color: var(--kj-accent); }
+    ::ng-deep .btn-primary:hover { background: #2563eb; }
+  `],
+  host: { class: 'kj-theme-finance' },
+  template: `
+    <button [kjDialogTrigger]="myDialog">Open Dialog</button>
+    <ng-template #myDialog>
+      <div kjDialogOverlay>
+        <div kjDialog>
+          <h2 kjDialogTitle>Edit Profile</h2>
+          <p class="dialog-body">Make changes to your profile settings here.</p>
+          <div class="dialog-actions">
+            <button class="btn-cancel" kjDialogClose>Cancel</button>
+            <button class="btn-primary" kjDialogClose>Save Changes</button>
+          </div>
+        </div>
+      </div>
+    </ng-template>
+  `,
+})
+export class DialogFinanceExample {}

package/src/dialog/dialog.retro.example.ts

@@ -0,0 +1,46 @@
+import { Component } from '@angular/core';
+import { KjDialogTrigger, KjDialog, KjDialogOverlay, KjDialogTitle, KjDialogClose } from './dialog';
+
+@Component({
+  selector: 'kj-example-dialog-retro',
+  standalone: true,
+  imports: [KjDialogTrigger, KjDialog, KjDialogOverlay, KjDialogTitle, KjDialogClose],
+  styleUrls: ['../styles/docs-themes.css'],
+  styles: [`
+    :host { display: flex; align-items: center; justify-content: center; padding: 3rem 2rem; background: var(--kj-bg); font-family: var(--kj-font); min-height: 160px; color: var(--kj-text); }
+    button {
+      padding: 0.4rem 1rem; font-family: var(--kj-font); font-size: 0.8rem; font-weight: 700;
+      letter-spacing: 0.06em; text-transform: uppercase; background: var(--kj-surface); color: var(--kj-text);
+      border: var(--kj-btn-border); cursor: pointer;
+      box-shadow: var(--kj-shadow-sm); transition: var(--kj-transition);
+    }
+    button:hover { transform: translate(-1px, -1px); box-shadow: var(--kj-shadow-md); }
+    ::ng-deep .kj-dialog-backdrop { background: var(--kj-backdrop); }
+    ::ng-deep .kj-dialog-panel { background: transparent; box-shadow: none; }
+    ::ng-deep [kjDialogOverlay] { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; }
+    ::ng-deep [kjDialog] { background: var(--kj-surface); border: var(--kj-btn-border); padding: 1.5rem; min-width: 20rem; box-shadow: var(--kj-shadow-hard); font-family: var(--kj-font); color: var(--kj-text); }
+    ::ng-deep [kjDialogTitle] { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 2px solid var(--kj-border); padding-bottom: 0.5rem; color: var(--kj-text); }
+    ::ng-deep .dialog-body { margin: 0.75rem 0 1.5rem; font-size: 0.8rem; color: var(--kj-text-muted); line-height: 1.6; }
+    ::ng-deep .dialog-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
+    ::ng-deep [kjDialogOverlay] button { font-size: 0.75rem; padding: 0.3rem 0.875rem; box-shadow: var(--kj-shadow-sm); }
+    ::ng-deep [kjDialogOverlay] button:hover { box-shadow: var(--kj-shadow-md); }
+    ::ng-deep .btn-primary { background: var(--kj-accent); color: var(--kj-accent-on); }
+  `],
+  host: { class: 'kj-theme-retro' },
+  template: `
+    <button [kjDialogTrigger]="myDialog">Open Dialog</button>
+    <ng-template #myDialog>
+      <div kjDialogOverlay>
+        <div kjDialog>
+          <h2 kjDialogTitle>Edit Profile</h2>
+          <p class="dialog-body">Make changes to your profile settings here.</p>
+          <div class="dialog-actions">
+            <button kjDialogClose>Cancel</button>
+            <button class="btn-primary" kjDialogClose>Save Changes</button>
+          </div>
+        </div>
+      </div>
+    </ng-template>
+  `,
+})
+export class DialogRetroExample {}

package/src/dialog/dialog.service.ts

@@ -0,0 +1,176 @@
+import {
+  ApplicationRef, ComponentRef, EmbeddedViewRef,
+  Injectable, InjectionToken, Injector,
+  TemplateRef, Type, ViewContainerRef,
+  createComponent, inject, signal,
+} from '@angular/core';
+
+/** Token for passing data to a programmatically opened dialog component. */
+export const DIALOG_DATA = new InjectionToken<unknown>('KjDialogData');
+
+/** Configuration for programmatically opened dialogs. */
+export interface KjDialogOpenConfig<D = unknown> {
+  /** Data to inject into the dialog component via `DIALOG_DATA`. */
+  data?: D;
+  /** Additional CSS classes for the dialog panel element. */
+  panelClass?: string | string[];
+  /** Where to focus when the dialog opens. Defaults to the first focusable element. */
+  autoFocus?: boolean | string;
+  /** Whether to restore focus to the trigger after the dialog closes. Defaults to `true`. */
+  restoreFocus?: boolean | string;
+  /** Panel width. */
+  width?: string;
+  /** Maximum panel width. */
+  maxWidth?: string;
+  /** Panel height. */
+  height?: string;
+  /** When `true`, clicking the backdrop or pressing Escape won't close the dialog. */
+  disableClose?: boolean;
+}
+
+/**
+ * Reference returned by `KjDialogService.open()`.
+ * Use `close(result?)` to dismiss the dialog and emit the result.
+ */
+export class KjDialogRef<R = unknown> {
+  private readonly _closed = signal<R | undefined>(undefined);
+  private _closedCallbacks: Array<(result: R | undefined) => void> = [];
+
+  /** @internal */
+  constructor(
+    private readonly container: HTMLElement,
+    private readonly viewRef: EmbeddedViewRef<unknown> | ComponentRef<unknown>,
+    private readonly appRef: ApplicationRef,
+    private readonly previouslyFocused: Element | null,
+    private readonly restoreFocus: boolean,
+  ) {}
+
+  /** Closes the dialog and emits `result` to subscribers. */
+  close(result?: R): void {
+    this.appRef.detachView(
+      this.viewRef instanceof ComponentRef
+        ? this.viewRef.hostView as EmbeddedViewRef<unknown>
+        : this.viewRef,
+    );
+    this.viewRef.destroy();
+    this.container.remove();
+
+    if (this.restoreFocus && this.previouslyFocused instanceof HTMLElement) {
+      this.previouslyFocused.focus();
+    }
+
+    this._closedCallbacks.forEach(cb => cb(result));
+    this._closedCallbacks = [];
+  }
+
+  /**
+   * Registers a callback invoked when the dialog closes.
+   * @param cb - Callback receiving the close result.
+   */
+  afterClosed(cb: (result: R | undefined) => void): this {
+    this._closedCallbacks.push(cb);
+    return this;
+  }
+}
+
+/**
+ * Programmatic service for opening dialogs with components or templates.
+ * The opened component can inject `DIALOG_DATA` for typed data and `KjDialogRef` to close itself.
+ *
+ * @example
+ * ```ts
+ * // Open a component as a dialog
+ * private readonly dialog = inject(KjDialogService);
+ *
+ * openConfirm() {
+ *   const ref = this.dialog.open(ConfirmDialogComponent, {
+ *     data: { message: 'Delete this item?' },
+ *   });
+ *   ref.afterClosed(result => {
+ *     if (result) this.doDelete();
+ *   });
+ * }
+ * ```
+ *
+ * ```ts
+ * // Inside ConfirmDialogComponent
+ * readonly data = inject<{ message: string }>(DIALOG_DATA);
+ * readonly ref = inject(KjDialogRef);
+ * confirm() { this.ref.close(true); }
+ * cancel() { this.ref.close(false); }
+ * ```
+ * @category Core/Overlays
+ */
+@Injectable({ providedIn: 'root' })
+export class KjDialogService {
+  private readonly appRef = inject(ApplicationRef);
+  private readonly injector = inject(Injector);
+
+  /**
+   * Opens a component as a modal dialog.
+   * @param content - Angular component type to render inside the dialog.
+   * @param config - Optional configuration: data, panelClass, width, autoFocus, etc.
+   * @returns A `KjDialogRef` whose `afterClosed()` fires when the dialog closes.
+   */
+  open<R = unknown, D = unknown, C = unknown>(
+    content: Type<C> | TemplateRef<C>,
+    config?: KjDialogOpenConfig<D>,
+  ): KjDialogRef<R> {
+    const container = document.createElement('div');
+    container.setAttribute('data-kj-dialog-container', '');
+
+    const previouslyFocused = document.activeElement;
+    const restoreFocus = config?.restoreFocus !== false;
+
+    const dialogRef = new KjDialogRef<R>(
+      container,
+      null as never, // filled below
+      this.appRef,
+      previouslyFocused,
+      restoreFocus,
+    );
+
+    const childInjector = Injector.create({
+      parent: this.injector,
+      providers: [
+        { provide: DIALOG_DATA, useValue: config?.data },
+        { provide: KjDialogRef, useValue: dialogRef },
+      ],
+    });
+
+    let viewRef: EmbeddedViewRef<unknown> | ComponentRef<unknown>;
+
+    if (content instanceof TemplateRef) {
+      const vcr = this.appRef.components[0]?.injector.get(ViewContainerRef, null);
+      if (!vcr) throw new Error('KjDialogService: no root ViewContainerRef available');
+      viewRef = vcr.createEmbeddedView(content as TemplateRef<unknown>, {}, { injector: childInjector });
+      this.appRef.attachView(viewRef as EmbeddedViewRef<unknown>);
+      (viewRef as EmbeddedViewRef<unknown>).rootNodes.forEach(n => container.appendChild(n));
+    } else {
+      const compRef = createComponent(content as Type<unknown>, {
+        environmentInjector: this.appRef.injector,
+        elementInjector: childInjector,
+      });
+      this.appRef.attachView(compRef.hostView);
+      container.appendChild((compRef.hostView as EmbeddedViewRef<unknown>).rootNodes[0]);
+      viewRef = compRef;
+    }
+
+    // Patch the viewRef into the dialogRef (bypass readonly via cast)
+    (dialogRef as unknown as { viewRef: typeof viewRef }).viewRef = viewRef;
+
+    document.body.appendChild(container);
+
+    // Auto-focus first tabbable element
+    if (config?.autoFocus !== false) {
+      const target = typeof config?.autoFocus === 'string'
+        ? container.querySelector<HTMLElement>(config.autoFocus)
+        : container.querySelector<HTMLElement>(
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+          );
+      target?.focus();
+    }
+
+    return dialogRef;
+  }
+}

package/src/dialog/dialog.spec.ts

@@ -0,0 +1,122 @@
+import { fireEvent } from '@testing-library/angular';
+import { render } from '@testing-library/angular';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import {
+  KjDialogTrigger, KjDialog, KjDialogOverlay,
+  KjDialogTitle, KjDialogClose,
+} from './dialog';
+
+expect.extend(toHaveNoViolations);
+
+const imports = [
+  KjDialogTrigger, KjDialog, KjDialogOverlay,
+  KjDialogTitle, KjDialogClose,
+];
+
+describe('KjDialogTrigger', () => {
+  it('renders trigger button', async () => {
+    const { getByRole } = await render(
+      `<button [kjDialogTrigger]="dlg">Open</button>
+       <ng-template #dlg>
+         <div kjDialogOverlay><div kjDialog><h2 kjDialogTitle>T</h2></div></div>
+       </ng-template>`,
+      { imports },
+    );
+    expect(getByRole('button', { name: 'Open' })).toBeInTheDocument();
+  });
+
+  it('trigger has aria-haspopup=dialog', async () => {
+    const { getByRole } = await render(
+      `<button [kjDialogTrigger]="dlg">Open</button>
+       <ng-template #dlg>
+         <div kjDialogOverlay><div kjDialog><h2 kjDialogTitle>T</h2></div></div>
+       </ng-template>`,
+      { imports },
+    );
+    expect(getByRole('button', { name: 'Open' })).toHaveAttribute('aria-haspopup', 'dialog');
+  });
+
+  it('trigger has aria-expanded=false initially', async () => {
+    const { getByRole } = await render(
+      `<button [kjDialogTrigger]="dlg">Open</button>
+       <ng-template #dlg>
+         <div kjDialogOverlay><div kjDialog><h2 kjDialogTitle>T</h2></div></div>
+       </ng-template>`,
+      { imports },
+    );
+    expect(getByRole('button', { name: 'Open' })).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('opens dialog and sets aria-expanded=true on click', async () => {
+    const { getByRole } = await render(
+      `<button [kjDialogTrigger]="dlg">Open</button>
+       <ng-template #dlg>
+         <div kjDialogOverlay><div kjDialog><h2 kjDialogTitle>Settings</h2></div></div>
+       </ng-template>`,
+      { imports },
+    );
+    const trigger = getByRole('button', { name: 'Open' });
+    fireEvent.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('mounts dialog content in document.body on open', async () => {
+    const { getByRole } = await render(
+      `<button [kjDialogTrigger]="dlg">Open</button>
+       <ng-template #dlg>
+         <div kjDialogOverlay>
+           <div kjDialog><h2 kjDialogTitle>My Dialog</h2></div>
+         </div>
+       </ng-template>`,
+      { imports },
+    );
+    fireEvent.click(getByRole('button', { name: 'Open' }));
+    expect(document.body.querySelector('[data-kj-dialog-container]')).toBeTruthy();
+  });
+
+  it('closes dialog on overlay click (close on backdrop enabled by default)', async () => {
+    const { getByRole, getByText } = await render(
+      `<button [kjDialogTrigger]="dlg">Open</button>
+       <ng-template #dlg>
+         <div kjDialogOverlay>
+           <div kjDialog><h2 kjDialogTitle>T</h2></div>
+         </div>
+       </ng-template>`,
+      { imports },
+    );
+    const trigger = getByRole('button', { name: 'Open' });
+    fireEvent.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+
+    const overlay = document.querySelector('[kjDialogOverlay]') ?? document.body.querySelector('div[data-kj-dialog-container] > div');
+    if (overlay) fireEvent.click(overlay);
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('closes dialog on Escape key when closeOnEscape is true', async () => {
+    const { getByRole } = await render(
+      `<button [kjDialogTrigger]="dlg">Open</button>
+       <ng-template #dlg>
+         <div kjDialogOverlay><div kjDialog><h2 kjDialogTitle>T</h2></div></div>
+       </ng-template>`,
+      { imports },
+    );
+    const trigger = getByRole('button', { name: 'Open' });
+    fireEvent.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+
+    fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' });
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('passes axe audit on trigger', async () => {
+    const { container } = await render(
+      `<button [kjDialogTrigger]="dlg">Open dialog</button>
+       <ng-template #dlg>
+         <div kjDialogOverlay><div kjDialog><h2 kjDialogTitle>Settings</h2></div></div>
+       </ng-template>`,
+      { imports },
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});