@kouji-ui/core 0.1.1 → 0.1.2

package/src/divider/divider.spec.ts

@@ -1,223 +0,0 @@
-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

@@ -1,137 +0,0 @@
-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

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

package/src/drawer/drawer.ref.ts

@@ -1,63 +0,0 @@
-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

@@ -1,106 +0,0 @@
-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

@@ -1,117 +0,0 @@
-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();
-  });
-});