@kouji-ui/core 0.0.3 → 0.1.1

package/src/divider/divider.spec.ts

@@ -0,0 +1,223 @@
+import { render } from '@testing-library/angular';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { describe, expect, it } from 'vitest';
+import { KjDivider } from './divider';
+
+expect.extend(toHaveNoViolations);
+
+/**
+ * Flush microtasks + the rAF that backs afterNextRender so the directive has
+ * a chance to inspect host child nodes and update its with-content / isHr
+ * signals.
+ */
+async function flushAfterNextRender(): Promise<void> {
+  await new Promise<void>((resolve) => setTimeout(resolve, 0));
+  await Promise.resolve();
+  await Promise.resolve();
+}
+
+describe('KjDivider', () => {
+  describe('decorative (default)', () => {
+    it('on <hr> host: aria-hidden="true" and no role', async () => {
+      const { container } = await render(`<hr kjDivider />`, { imports: [KjDivider] });
+      await flushAfterNextRender();
+      const host = container.querySelector('hr')!;
+      expect(host).toHaveAttribute('aria-hidden', 'true');
+      expect(host).not.toHaveAttribute('role');
+    });
+
+    it('on <div> host: aria-hidden="true" and no role', async () => {
+      const { container } = await render(`<div kjDivider></div>`, { imports: [KjDivider] });
+      await flushAfterNextRender();
+      const host = container.querySelector('div')!;
+      expect(host).toHaveAttribute('aria-hidden', 'true');
+      expect(host).not.toHaveAttribute('role');
+    });
+
+    it('omits aria-orientation in decorative mode (even when vertical)', async () => {
+      const { container } = await render(
+        `<hr kjDivider [kjOrientation]="'vertical'" />`,
+        { imports: [KjDivider] },
+      );
+      await flushAfterNextRender();
+      const host = container.querySelector('hr')!;
+      expect(host).not.toHaveAttribute('aria-orientation');
+    });
+  });
+
+  describe('structural mode', () => {
+    it('on <div> host: role="separator" and no aria-hidden', async () => {
+      const { container } = await render(
+        `<div kjDivider [kjStructural]="true"></div>`,
+        { imports: [KjDivider] },
+      );
+      await flushAfterNextRender();
+      const host = container.querySelector('div')!;
+      expect(host).toHaveAttribute('role', 'separator');
+      expect(host).not.toHaveAttribute('aria-hidden');
+    });
+
+    it('on <hr> host: relies on implicit role (no explicit role attr) and no aria-hidden', async () => {
+      const { container } = await render(
+        `<hr kjDivider [kjStructural]="true" />`,
+        { imports: [KjDivider] },
+      );
+      await flushAfterNextRender();
+      const host = container.querySelector('hr')!;
+      // <hr> has implicit role="separator" per HTML AAM; the directive must
+      // NOT set role explicitly (would be redundant noise).
+      expect(host).not.toHaveAttribute('role');
+      expect(host).not.toHaveAttribute('aria-hidden');
+    });
+
+    it('vertical + structural: aria-orientation="vertical"', async () => {
+      const { container } = await render(
+        `<div kjDivider [kjStructural]="true" [kjOrientation]="'vertical'"></div>`,
+        { imports: [KjDivider] },
+      );
+      await flushAfterNextRender();
+      const host = container.querySelector('div')!;
+      expect(host).toHaveAttribute('aria-orientation', 'vertical');
+      expect(host).toHaveAttribute('role', 'separator');
+    });
+
+    it('horizontal + structural: omits aria-orientation (spec default)', async () => {
+      const { container } = await render(
+        `<div kjDivider [kjStructural]="true" [kjOrientation]="'horizontal'"></div>`,
+        { imports: [KjDivider] },
+      );
+      await flushAfterNextRender();
+      const host = container.querySelector('div')!;
+      expect(host).not.toHaveAttribute('aria-orientation');
+    });
+  });
+
+  describe('orientation reflection', () => {
+    it('reflects data-orientation="horizontal" by default', async () => {
+      const { container } = await render(`<hr kjDivider />`, { imports: [KjDivider] });
+      await flushAfterNextRender();
+      expect(container.querySelector('hr')).toHaveAttribute('data-orientation', 'horizontal');
+    });
+
+    it('reflects data-orientation="vertical" when kjOrientation="vertical"', async () => {
+      const { container } = await render(
+        `<hr kjDivider [kjOrientation]="'vertical'" />`,
+        { imports: [KjDivider] },
+      );
+      await flushAfterNextRender();
+      expect(container.querySelector('hr')).toHaveAttribute('data-orientation', 'vertical');
+    });
+  });
+
+  describe('with-content auto-detection', () => {
+    it('rule-only on <hr>: data-with-content="false"', async () => {
+      const { container } = await render(`<hr kjDivider />`, { imports: [KjDivider] });
+      await flushAfterNextRender();
+      expect(container.querySelector('hr')).toHaveAttribute('data-with-content', 'false');
+    });
+
+    it('empty <div>: data-with-content="false"', async () => {
+      const { container } = await render(`<div kjDivider></div>`, { imports: [KjDivider] });
+      await flushAfterNextRender();
+      expect(container.querySelector('div')).toHaveAttribute('data-with-content', 'false');
+    });
+
+    it('<div> with text content: data-with-content="true"', async () => {
+      const { container } = await render(
+        `<div kjDivider>OR</div>`,
+        { imports: [KjDivider] },
+      );
+      await flushAfterNextRender();
+      expect(container.querySelector('div')).toHaveAttribute('data-with-content', 'true');
+    });
+
+    it('<div> with element content: data-with-content="true"', async () => {
+      const { container } = await render(
+        `<div kjDivider><span>OR</span></div>`,
+        { imports: [KjDivider] },
+      );
+      await flushAfterNextRender();
+      expect(container.querySelector('div[kjDivider]')).toHaveAttribute(
+        'data-with-content',
+        'true',
+      );
+    });
+
+    it('<div> with whitespace-only content: data-with-content="false"', async () => {
+      const { container } = await render(
+        `<div kjDivider>   </div>`,
+        { imports: [KjDivider] },
+      );
+      await flushAfterNextRender();
+      expect(container.querySelector('div')).toHaveAttribute('data-with-content', 'false');
+    });
+  });
+
+  describe('align reflection', () => {
+    it('defaults to data-align="center"', async () => {
+      const { container } = await render(`<hr kjDivider />`, { imports: [KjDivider] });
+      await flushAfterNextRender();
+      expect(container.querySelector('hr')).toHaveAttribute('data-align', 'center');
+    });
+
+    it('reflects kjAlign to data-align', async () => {
+      const { container } = await render(
+        `<div kjDivider [kjAlign]="'start'">Today</div>`,
+        { imports: [KjDivider] },
+      );
+      await flushAfterNextRender();
+      expect(container.querySelector('div')).toHaveAttribute('data-align', 'start');
+    });
+  });
+
+  describe('variant + size composition', () => {
+    it('reflects default data-variant from KjVariant preset', async () => {
+      const { container } = await render(`<hr kjDivider />`, { imports: [KjDivider] });
+      await flushAfterNextRender();
+      // KjVariant default factory: { default: 'default' }
+      expect(container.querySelector('hr')).toHaveAttribute('data-variant', 'default');
+    });
+
+    it('reflects default data-size from KjSize preset', async () => {
+      const { container } = await render(`<hr kjDivider />`, { imports: [KjDivider] });
+      await flushAfterNextRender();
+      // KjSize default factory: { default: 'md' }
+      expect(container.querySelector('hr')).toHaveAttribute('data-size', 'md');
+    });
+
+    it('forwards kjVariant input (composed via hostDirectives)', async () => {
+      const { container } = await render(
+        `<hr kjDivider [kjVariant]="'dashed'" />`,
+        { imports: [KjDivider] },
+      );
+      await flushAfterNextRender();
+      expect(container.querySelector('hr')).toHaveAttribute('data-variant', 'dashed');
+    });
+
+    it('forwards kjSize input (composed via hostDirectives)', async () => {
+      const { container } = await render(
+        `<hr kjDivider [kjSize]="'lg'" />`,
+        { imports: [KjDivider] },
+      );
+      await flushAfterNextRender();
+      expect(container.querySelector('hr')).toHaveAttribute('data-size', 'lg');
+    });
+  });
+
+  describe('a11y audits', () => {
+    it('decorative <hr> divider passes axe', async () => {
+      const { container } = await render(`<hr kjDivider />`, { imports: [KjDivider] });
+      await flushAfterNextRender();
+      expect(await axe(container)).toHaveNoViolations();
+    });
+
+    it('structural with-content <div> divider passes axe', async () => {
+      const { container } = await render(
+        `<div kjDivider [kjStructural]="true">OR</div>`,
+        { imports: [KjDivider] },
+      );
+      await flushAfterNextRender();
+      expect(await axe(container)).toHaveNoViolations();
+    });
+  });
+});

package/src/divider/divider.ts

@@ -0,0 +1,137 @@
+import {
+  Directive,
+  ElementRef,
+  afterNextRender,
+  computed,
+  inject,
+  input,
+  signal,
+} from '@angular/core';
+import { KjSize, KjVariant } from '../presets';
+
+/**
+ * Orientation of the divider rule.
+ */
+export type KjDividerOrientation = 'horizontal' | 'vertical';
+
+/**
+ * Alignment of the projected content within a with-content divider.
+ */
+export type KjDividerAlign = 'start' | 'center' | 'end';
+
+/**
+ * Marks an element as a kouji divider / separator. Owns the small a11y opinion
+ * (decorative-by-default vs. structural) and reflects data attributes that
+ * theme CSS reads to render the rule (rule-only vs. with-content layout,
+ * orientation, alignment, variant, size).
+ *
+ * The host element is consumer-supplied — `<hr kjDivider>` for the rule-only
+ * case (recommended; native semantic, implicit `role="separator"`) or
+ * `<div kjDivider>Title</div>` for the with-content case (label projected in
+ * the middle of the rule).
+ *
+ * **Decorative by default.** Most dividers in real templates are visual
+ * punctuation between regions already demarcated by surrounding headings or
+ * landmarks, so AT should not announce them. Set `kjStructural=true` when the
+ * divider is the only thing demarcating two regions (e.g. an "OR" sign-in
+ * divider with no surrounding heading).
+ *
+ * @example
+ * ```html
+ * <hr kjDivider />
+ * <hr kjDivider [kjStructural]="true" kjOrientation="vertical" />
+ * <div kjDivider [kjStructural]="true">OR</div>
+ * ```
+ * @doc-category Core/Layout/Divider
+ * @doc
+ * @doc-name divider
+ * @doc-description Unstyled divider for separating content with horizontal, vertical, and label-in-rule layouts.
+ * @doc-is-main
+ */
+@Directive({
+  selector: '[kjDivider]',
+  standalone: true,
+  hostDirectives: [
+    { directive: KjVariant, inputs: ['kjVariant'] },
+    { directive: KjSize, inputs: ['kjSize'] },
+  ],
+  host: {
+    '[attr.data-orientation]': 'kjOrientation()',
+    '[attr.data-align]': 'kjAlign()',
+    '[attr.data-with-content]': 'withContent() ? "true" : "false"',
+    '[attr.role]': 'roleAttr()',
+    '[attr.aria-orientation]': 'ariaOrientationAttr()',
+    '[attr.aria-hidden]': 'ariaHiddenAttr()',
+  },
+})
+export class KjDivider {
+  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef);
+
+  /**
+   * Visual orientation of the rule. Reflects to `data-orientation`. When
+   * `kjStructural=true` and orientation is `vertical`, also reflects
+   * `aria-orientation="vertical"`. The horizontal case omits `aria-orientation`
+   * (the spec default; setting it explicitly is redundant noise).
+   */
+  readonly kjOrientation = input<KjDividerOrientation>('horizontal');
+
+  /**
+   * Whether the divider carries semantic weight (separates two regions that
+   * are not already demarcated by surrounding heading or landmark structure).
+   *
+   * - `false` (default): host gets `aria-hidden="true"`; AT skips the divider.
+   * - `true`: host gets `role="separator"` (suppressed if host is `<hr>`,
+   *   which has implicit role); when `kjOrientation='vertical'`, also gets
+   *   `aria-orientation="vertical"`.
+   */
+  readonly kjStructural = input<boolean>(false);
+
+  /**
+   * Alignment of the projected content within a with-content divider.
+   * Affects the with-content layout only; ignored when no content is present.
+   * Reflects to `data-align`.
+   */
+  readonly kjAlign = input<KjDividerAlign>('center');
+
+  /** Auto-detected from host child nodes (any text or element child). */
+  protected readonly withContent = signal<boolean>(false);
+
+  /** True when the host element is an `<hr>` (case-insensitive). */
+  protected readonly isHr = signal<boolean>(false);
+
+  protected readonly roleAttr = computed(() =>
+    this.kjStructural() && !this.isHr() ? 'separator' : null,
+  );
+
+  protected readonly ariaOrientationAttr = computed(() =>
+    this.kjStructural() && this.kjOrientation() === 'vertical' ? 'vertical' : null,
+  );
+
+  protected readonly ariaHiddenAttr = computed(() =>
+    this.kjStructural() ? null : 'true',
+  );
+
+  constructor() {
+    afterNextRender(() => {
+      const host = this.el.nativeElement;
+      this.isHr.set(host.tagName?.toLowerCase() === 'hr');
+      // Detect with-content from any non-empty child nodes (text or elements).
+      // Treat whitespace-only text nodes as no content so a multi-line template
+      // with a self-closing-style divider doesn't accidentally light up.
+      this.withContent.set(hasMeaningfulChildNodes(host));
+    });
+  }
+}
+
+function hasMeaningfulChildNodes(host: HTMLElement): boolean {
+  const nodes = host.childNodes;
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    if (node.nodeType === Node.ELEMENT_NODE) return true;
+    if (node.nodeType === Node.TEXT_NODE) {
+      const text = node.nodeValue ?? '';
+      if (text.trim().length > 0) return true;
+    }
+  }
+  return false;
+}

package/src/divider/index.ts

@@ -0,0 +1,5 @@
+export {
+  KjDivider,
+  type KjDividerAlign,
+  type KjDividerOrientation,
+} from './divider';

package/src/drawer/drawer.ref.ts

@@ -0,0 +1,63 @@
+import { Subject, type Observable } from 'rxjs';
+import type { Signal } from '@angular/core';
+import type { KjOverlayController } from '../primitives/overlay/controller';
+
+/**
+ * Reference returned by `KjDrawer.open()`. Mirrors {@link import('../dialog/dialog.ref').KjDialogRef}.
+ *
+ * Use `close(result?)` to dismiss the drawer programmatically. Subscribe to
+ * `afterClosed$` for the close result, or await the `result` promise.
+ *
+ * @doc-category Core/Overlay
+ */
+export class KjDrawerRef<T, R = unknown> {
+  private _instance: T | null = null;
+  private _result: R | undefined;
+  private resolveResult!: (r: R | undefined) => void;
+  /** Promise resolving with the close result. */
+  readonly result: Promise<R | undefined>;
+
+  private readonly _afterOpened = new Subject<void>();
+  private readonly _afterClosed = new Subject<R | undefined>();
+  /** Emits once after the drawer has finished opening. */
+  readonly afterOpened$: Observable<void> = this._afterOpened.asObservable();
+  /** Emits the close result once the drawer has finished closing. */
+  readonly afterClosed$: Observable<R | undefined> = this._afterClosed.asObservable();
+
+  /** Reactive lifecycle state mirrored from the underlying controller. */
+  readonly state: Signal<'closed' | 'opening' | 'open' | 'closing'>;
+  /** Convenience for `state() === 'open' || 'opening'`. */
+  readonly isOpen: Signal<boolean>;
+
+  constructor(public readonly controller: KjOverlayController) {
+    this.state = controller.state;
+    this.isOpen = controller.isOpen;
+    this.result = new Promise<R | undefined>((res) => {
+      this.resolveResult = res;
+    });
+  }
+
+  /** @internal Bind the rendered component instance for `instance`. */
+  bindInstance(instance: T): void {
+    this._instance = instance;
+  }
+
+  /** The rendered drawer component instance. */
+  get instance(): T {
+    if (!this._instance) {
+      throw new Error('KjDrawerRef: instance not bound');
+    }
+    return this._instance;
+  }
+
+  /** Close the drawer with an optional result payload. */
+  close(result?: R): void {
+    this._result = result;
+    this.controller.close('programmatic');
+    queueMicrotask(() => {
+      this._afterClosed.next(this._result);
+      this._afterClosed.complete();
+      this.resolveResult(this._result);
+    });
+  }
+}

package/src/drawer/drawer.service.ts

@@ -0,0 +1,106 @@
+import {
+  EnvironmentInjector,
+  Injectable,
+  InjectionToken,
+  Type,
+  effect,
+  inject,
+  runInInjectionContext,
+} from '@angular/core';
+import { KjOverlayBuilder } from '../primitives/overlay/builder';
+import { inPlace } from '../primitives/overlay/strategies/mount/in-place';
+import { edgeSheet } from '../primitives/overlay/strategies/position/edge-sheet';
+import { solidBackdrop } from '../primitives/overlay/strategies/backdrop/solid';
+import { tabCycle } from '../primitives/overlay/strategies/focus-trap/tab-cycle';
+import { htmlOverflow } from '../primitives/overlay/strategies/scroll-lock/html-overflow';
+import { silent } from '../primitives/overlay/strategies/live-announcer/silent';
+import { programmatic } from '../primitives/overlay/strategies/trigger-event/programmatic';
+import { KjDrawerRef } from './drawer.ref';
+
+/** Side of the viewport the drawer slides in from. */
+export type KjDrawerSide = 'left' | 'right' | 'top' | 'bottom';
+
+/** Configuration options for {@link KjDrawer.open}. */
+export interface KjDrawerOpenOptions<D = unknown> {
+  /** Side of the viewport the drawer slides in from. Defaults to `'right'`. */
+  side?: KjDrawerSide;
+  /** Enables drag-to-dismiss when the body component implements it. */
+  drag?: boolean;
+  /** Data injected into the rendered component via `DRAWER_DATA` (when wired). */
+  data?: D;
+  /** Whether clicking the backdrop closes the drawer. Defaults to `true`. */
+  closeOnOutside?: boolean;
+}
+
+/**
+ * Programmatic service for opening drawers. Mirrors `KjDialog`. Builds an
+ * overlay handle wired to the overlay primitives and renders a component
+ * inside the singleton overlay container, positioned via `edgeSheet({side})`.
+ *
+ * @doc-category Core/Overlay
+ */
+@Injectable({ providedIn: 'root' })
+export class KjDrawerService {
+  private readonly builder = inject(KjOverlayBuilder);
+  private readonly env = inject(EnvironmentInjector);
+
+  /**
+   * Open a component as a modal drawer.
+   *
+   * @param component - The component class to render inside the drawer.
+   * @param opts - Side, drag, data, and close-on-outside controls.
+   * @returns A {@link KjDrawerRef} for closing and observing the drawer.
+   */
+  open<T, R = unknown, D = unknown>(
+    component: Type<T>,
+    opts: KjDrawerOpenOptions<D> = {},
+  ): KjDrawerRef<T, R> {
+    const side: KjDrawerSide = opts.side ?? 'right';
+
+    const handle = this.builder.create({
+      mount: inPlace(),
+      position: edgeSheet({ side }),
+      backdrop: solidBackdrop({
+        inert: true,
+        closeOnClick: opts.closeOnOutside ?? true,
+      }),
+      focusTrap: tabCycle({ returnFocus: true }),
+      scrollLock: htmlOverflow(),
+      liveAnnouncer: silent(),
+      trigger: programmatic(),
+      panelRole: 'dialog',
+    });
+
+    const ref = new KjDrawerRef<T, R>(handle.controller);
+    const cmpRef = this.builder.attachComponent(handle, component, {
+      providers: [
+        { provide: KjDrawerRef, useValue: ref },
+        { provide: DRAWER_DATA, useValue: opts.data },
+        { provide: DRAWER_SIDE, useValue: side },
+        { provide: DRAWER_DRAG, useValue: !!opts.drag },
+      ],
+    });
+    ref.bindInstance(cmpRef.instance);
+
+    runInInjectionContext(this.env, () => {
+      let wasOpen = false;
+      const eff = effect(() => {
+        const s = handle.controller.state();
+        if (s === 'open' || s === 'opening') wasOpen = true;
+        if (s === 'closed' && wasOpen) {
+          eff.destroy();
+          queueMicrotask(() => handle.destroy());
+        }
+      });
+    });
+    handle.controller.open();
+    return ref;
+  }
+}
+
+/** Token for passing data to a programmatically opened drawer component. */
+export const DRAWER_DATA = new InjectionToken<unknown>('KjDrawerData');
+/** Token exposing the resolved drawer side to the rendered component. */
+export const DRAWER_SIDE = new InjectionToken<KjDrawerSide>('KjDrawerSide');
+/** Token exposing whether drag-to-dismiss is enabled to the rendered component. */
+export const DRAWER_DRAG = new InjectionToken<boolean>('KjDrawerDrag');

package/src/drawer/drawer.spec.ts

@@ -0,0 +1,117 @@
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import { KjDrawer } from './drawer';
+import { KjDrawerService, DRAWER_DATA } from './drawer.service';
+import { KjDrawerRef } from './drawer.ref';
+
+@Component({
+  selector: 'kj-simple-drawer',
+  standalone: true,
+  imports: [KjDrawer],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `<kj-drawer><button id="ok" (click)="ref.close('ok')">OK</button></kj-drawer>`,
+})
+class SimpleDrawer {
+  readonly ref = inject<KjDrawerRef<SimpleDrawer, string>>(KjDrawerRef);
+}
+
+@Component({
+  selector: 'kj-data-drawer',
+  standalone: true,
+  imports: [KjDrawer],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `<kj-drawer>{{ data }}</kj-drawer>`,
+})
+class DataDrawer {
+  readonly data = inject<string>(DRAWER_DATA);
+}
+
+function findPanel(): HTMLElement | null {
+  return document.body.querySelector<HTMLElement>('kj-drawer');
+}
+
+function cleanupOverlays(): void {
+  document.body.querySelectorAll('kj-drawer').forEach((el) => el.remove());
+  document.documentElement.style.overflow = '';
+  document.documentElement.style.paddingRight = '';
+}
+
+describe('KjDrawerService', () => {
+  beforeEach(() => {
+    TestBed.resetTestingModule();
+    TestBed.configureTestingModule({});
+  });
+
+  afterEach(() => {
+    cleanupOverlays();
+  });
+
+  it('open returns a ref with a controller', () => {
+    const svc = TestBed.inject(KjDrawerService);
+    const ref = svc.open(SimpleDrawer);
+    expect(ref).toBeTruthy();
+    expect(typeof ref.close).toBe('function');
+    expect(ref.controller).toBeTruthy();
+  });
+
+  it('rendered panel uses role="dialog"', () => {
+    const svc = TestBed.inject(KjDrawerService);
+    svc.open(SimpleDrawer);
+    const panel = findPanel();
+    expect(panel).toBeTruthy();
+    expect(panel!.getAttribute('role')).toBe('dialog');
+  });
+
+  it('side option is reflected on the host as data-kj-side', () => {
+    const svc = TestBed.inject(KjDrawerService);
+    svc.open(SimpleDrawer, { side: 'left' });
+    expect(findPanel()!.getAttribute('data-kj-side')).toBe('left');
+  });
+
+  it('defaults side to "right"', () => {
+    const svc = TestBed.inject(KjDrawerService);
+    svc.open(SimpleDrawer);
+    expect(findPanel()!.getAttribute('data-kj-side')).toBe('right');
+  });
+
+  it('close resolves the result promise', async () => {
+    const svc = TestBed.inject(KjDrawerService);
+    const ref = svc.open<SimpleDrawer, string>(SimpleDrawer);
+    ref.close('hello');
+    await expect(ref.result).resolves.toBe('hello');
+  });
+
+  it('passes data through DRAWER_DATA', () => {
+    const svc = TestBed.inject(KjDrawerService);
+    svc.open(DataDrawer, { data: 'greetings' });
+    expect(findPanel()!.textContent).toContain('greetings');
+  });
+
+  it('drag option is exposed to the body component', () => {
+    const svc = TestBed.inject(KjDrawerService);
+    const ref = svc.open(SimpleDrawer, { side: 'bottom', drag: true });
+    expect(ref.instance).toBeInstanceOf(SimpleDrawer);
+  });
+
+  it('Escape closes the drawer via the overlay-stack coordinator', async () => {
+    const svc = TestBed.inject(KjDrawerService);
+    const ref = svc.open<SimpleDrawer, unknown>(SimpleDrawer);
+    expect(findPanel()).toBeTruthy();
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    // The stack coordinator runs synchronously on Esc.
+    await ref.result;
+    // After close, the controller state should have transitioned away from open.
+    expect(ref.state()).not.toBe('open');
+  });
+});
+
+describe('KjDrawer (body component)', () => {
+  it('exposes the resolved side through `side`', () => {
+    const svc = TestBed.inject(KjDrawerService);
+    const ref = svc.open(SimpleDrawer, { side: 'top' });
+    expect(ref.instance as unknown as { ref: KjDrawerRef<unknown> }).toBeTruthy();
+    cleanupOverlays();
+  });
+});