@kouji-ui/core 0.1.1 → 0.1.2

package/src/menubar/menubar-item.ts

@@ -1,204 +0,0 @@
-import {
-  DestroyRef,
-  Directive,
-  ElementRef,
-  EmbeddedViewRef,
-  Injector,
-  PLATFORM_ID,
-  TemplateRef,
-  ViewContainerRef,
-  booleanAttribute,
-  computed,
-  effect,
-  inject,
-  input,
-  output,
-  signal,
-} from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
-import { KjListItem, injectListItem } from '../primitives/list';
-import { KjOverlayController } from '../primitives/overlay/controller';
-import { bodyPortal } from '../primitives/overlay/strategies/mount/body-portal';
-import { anchoredTo } from '../primitives/overlay/strategies/position/anchored-to';
-import { KJ_MENUBAR } from './menubar.context';
-import type { KjMenubarItemContext } from './menubar.context';
-
-let _menubarPanelId = 0;
-
-/**
- * A top-level item in a `[kjMenubar]` — `role="menuitem"` with
- * `aria-haspopup="menu"`. Composes `KjListItem` so id, click + Enter/Space
- * activation, `aria-disabled`, and (via the bar's `KjListNavigator` in
- * roving mode) `tabindex` are owned by the primitive layer.
- *
- * Optionally opens a submenu via `[kjDropdownMenuTriggerFor]` — a
- * `TemplateRef` pointing at a `[kjDropdownMenu]` panel. The bar's
- * `afterSelect` opens this item's submenu on activation.
- *
- * @doc-category Core/Navigation
- * @doc
- * @doc-name menubar
- */
-@Directive({
-  selector: '[kjMenubarItem]',
-  standalone: true,
-  exportAs: 'kjMenubarItem',
-  hostDirectives: [
-    { directive: KjListItem, inputs: ['kjDisabled:kjDisabled'] },
-  ],
-  providers: [KjOverlayController],
-  host: {
-    'role': 'menuitem',
-    'aria-haspopup': 'menu',
-    '[attr.aria-expanded]': 'open() ? "true" : "false"',
-    '[attr.aria-controls]': 'panelId() || null',
-    '[attr.data-state]': 'open() ? "active" : "inactive"',
-  },
-})
-export class KjMenubarItem implements KjMenubarItemContext {
-  private readonly bar = inject(KJ_MENUBAR);
-  private readonly destroyRef = inject(DestroyRef);
-  private readonly elRef = inject<ElementRef<HTMLElement>>(ElementRef);
-  private readonly vcr = inject(ViewContainerRef);
-  private readonly injector = inject(Injector);
-  private readonly platformId = inject(PLATFORM_ID);
-  private readonly controller = inject(KjOverlayController, { self: true });
-
-  /** Disable the item. Reflects `aria-disabled`; popup never opens. */
-  readonly kjDisabled = input(false, { transform: booleanAttribute });
-
-  /**
-   * Template projecting the submenu panel. Activation renders the template
-   * into a body portal anchored to this item's host element.
-   */
-  readonly kjDropdownMenuTriggerFor = input<TemplateRef<unknown> | null>(null);
-
-  /**
-   * Fires when the item is activated (click / Enter / Space), bridged from
-   * the composed `KjListItem.activate` output. `KjListItem._activate` calls
-   * `event.stopPropagation()` before this fires, so a `(click)` listener
-   * placed on a parent element would not see the event — consumers wiring
-   * an activation listener must use `(kjActivate)` instead.
-   */
-  readonly kjActivate = output<void>();
-
-  // ── KjMenubarItemContext ─────────────────────────────────────────
-
-  get el(): HTMLElement { return this.elRef.nativeElement; }
-  readonly disabled = this.kjDisabled;
-  readonly open = computed(() => this.controller.isOpen());
-  readonly panelId = computed(() => this.controller.panelEl()?.id ?? null);
-
-  private _view: EmbeddedViewRef<unknown> | null = null;
-  private _strategiesReady = false;
-
-  openPopup(): void {
-    if (this.kjDisabled() || this.controller.isOpen()) return;
-    if (!isPlatformBrowser(this.platformId)) return;
-    const tpl = this.kjDropdownMenuTriggerFor();
-    if (!tpl) return;
-    this._ensurePanelMounted(tpl);
-    this._ensureStrategiesAttached();
-    this.controller.open();
-  }
-
-  closePopup(): void {
-    if (this.controller.isOpen()) this.controller.close('programmatic');
-  }
-
-  constructor() {
-    this.bar.registerItem(this);
-
-    // Route this item's own activation (click / Enter / Space, surfaced
-    // by the composed `KjListItem`) to its own submenu — the bar's
-    // `afterSelect` only knows the currently-focused item, which doesn't
-    // identify the item that was actually clicked (focus may not have
-    // moved yet, e.g. mouse click before focusin handling).
-    //
-    // When `kjDropdownMenuTriggerFor` is unset the item owns no popup of
-    // its own; skip the toggle entirely so that a sibling
-    // `[kjDropdownMenuTrigger]` directive composed on the same element can
-    // own the overlay state without us racing it. (Both directives provide
-    // `KjOverlayController` and Angular merges them into a single per-
-    // element instance — calling `controller.close()` here would
-    // immediately undo the trigger's `open()` from the same click.)
-    const listItem = injectListItem<unknown>();
-    listItem.activate.subscribe(() => {
-      this.kjActivate.emit();
-      if (!this.kjDropdownMenuTriggerFor()) return;
-      if (this.controller.isOpen()) this.closePopup();
-      else this.openPopup();
-    });
-
-    // Mirror the controller's open/close state into the bar's tracker —
-    // single source of truth for kjOpenChange and single-open invariant.
-    // Tracked across two cycles so a stale 'closed' from before the first
-    // open doesn't fire `notifyItemClosed` and clobber the bar's state.
-    let last: boolean | null = null;
-    effect(() => {
-      const isOpen = this.controller.isOpen();
-      if (last === isOpen) return;
-      last = isOpen;
-      if (isOpen) this.bar.notifyItemOpened(this);
-      else this.bar.notifyItemClosed(this);
-      // Tag the panel's overlay-surface marker only while open. The
-      // body-portal mount strategy returns the panel to its original
-      // parent on close — leaving `data-kj-overlay` on a hidden panel
-      // would let test introspection + ARIA queries find a stale
-      // "open" overlay that is in fact closed.
-      const panel = this._panelRoot();
-      if (panel) {
-        if (isOpen) panel.setAttribute('data-kj-overlay', '');
-        else panel.removeAttribute('data-kj-overlay');
-      }
-    });
-
-    this.destroyRef.onDestroy(() => {
-      this.bar.unregisterItem(this);
-      try { this.controller.dispose(); } catch { /* already disposed */ }
-      this._view?.destroy();
-      this._view = null;
-    });
-  }
-
-  // ── Internal — panel mount + strategy wiring ─────────────────────
-
-  private _ensurePanelMounted(tpl: TemplateRef<unknown>): void {
-    if (this._view) return;
-    this._view = this.vcr.createEmbeddedView(tpl);
-    this._view.detectChanges();
-    const panel = this._panelRoot();
-    if (!panel) return;
-    // The projected `<div kjDropdownMenu>` is just a config provider — it
-    // does not set `role="menu"` (only the service-launched
-    // `<kj-dropdown-menu-content>` does, via `KJ_OVERLAY_PANEL_ROLE`).
-    // The menubar projects raw templates, so stamp the role + an id
-    // here so consumers and `aria-controls` work out of the box.
-    if (!panel.hasAttribute('role')) panel.setAttribute('role', 'menu');
-    if (!panel.id) panel.id = `kj-menubar-panel-${++_menubarPanelId}`;
-    this.controller.bindPanel(panel);
-  }
-
-  private _ensureStrategiesAttached(): void {
-    if (this._strategiesReady) return;
-    const triggerSig = signal<HTMLElement | null>(this.elRef.nativeElement);
-    this.controller.bindTrigger(this.elRef.nativeElement);
-    this.controller.attachStrategies({
-      mount: bodyPortal(),
-      position: anchoredTo({
-        trigger: triggerSig,
-        side: 'bottom',
-        align: 'start',
-      }),
-    });
-    this._strategiesReady = true;
-  }
-
-  private _panelRoot(): HTMLElement | null {
-    if (!this._view) return null;
-    for (const node of this._view.rootNodes) {
-      if (node instanceof HTMLElement) return node;
-    }
-    return null;
-  }
-}

package/src/menubar/menubar.context.ts

@@ -1,43 +0,0 @@
-import { InjectionToken, type Signal } from '@angular/core';
-
-/**
- * Surface a `[kjMenubarItem]` exposes to its parent `[kjMenubar]`.
- *
- * Keyboard navigation, roving tabindex, type-ahead and activation are all
- * owned by the composed list primitives (`KjListNavigator` + `KjListItem`),
- * so the context's surface is intentionally small.
- */
-export interface KjMenubarItemContext {
-  /** The bar item's host element. */
-  readonly el: HTMLElement;
-  /** Whether the item is disabled. */
-  readonly disabled: Signal<boolean>;
-  /** Whether this item's popup is currently open. */
-  readonly open: Signal<boolean>;
-  /** Open this item's submenu (if it has one). */
-  openPopup(): void;
-  /** Close this item's submenu. */
-  closePopup(): void;
-}
-
-/**
- * Context provided by `[kjMenubar]` to all descendant `[kjMenubarItem]`s.
- */
-export interface KjMenubarContext {
-  /** The bar item whose popup is currently open, if any. */
-  readonly openItem: Signal<KjMenubarItemContext | null>;
-  /** Whether ArrowLeft / Right wraps at the bar ends. */
-  readonly loop: Signal<boolean>;
-
-  /** A bar item registers itself on construction. */
-  registerItem(item: KjMenubarItemContext): void;
-  /** A bar item unregisters itself on destruction. */
-  unregisterItem(item: KjMenubarItemContext): void;
-  /** A bar item reports that its popup opened. */
-  notifyItemOpened(item: KjMenubarItemContext): void;
-  /** A bar item reports that its popup closed. */
-  notifyItemClosed(item: KjMenubarItemContext): void;
-}
-
-/** DI token for the menubar shared context. */
-export const KJ_MENUBAR = new InjectionToken<KjMenubarContext>('KjMenubar');

package/src/menubar/menubar.spec.ts

@@ -1,433 +0,0 @@
-import { Component } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-
-import { KjMenubar } from './menubar';
-import { KjMenubarItem } from './menubar-item';
-import { KjDropdownMenu } from '../dropdown-menu/dropdown-menu';
-import { KjDropdownMenuItem } from '../dropdown-menu/dropdown-menu-item';
-
-/** Body-level overlays produced by `KjOverlayService.createFromTemplate`. */
-function findOverlays(): HTMLElement[] {
-  return Array.from(document.querySelectorAll<HTMLElement>('[data-kj-overlay]'));
-}
-
-function findPanels(): HTMLElement[] {
-  const out: HTMLElement[] = [];
-  for (const o of findOverlays()) {
-    if (o.getAttribute('role') === 'menu') out.push(o);
-    const m = o.querySelector<HTMLElement>('[role="menu"]');
-    if (m) out.push(m);
-  }
-  return out;
-}
-
-function findOpenPanel(): HTMLElement | null {
-  return findPanels()[0] ?? null;
-}
-
-function cleanupOverlays(): void {
-  for (const o of findOverlays()) o.remove();
-}
-
-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();
-}
-
-const allDirectives = [
-  KjMenubar,
-  KjMenubarItem,
-  KjDropdownMenu,
-  KjDropdownMenuItem,
-];
-
-describe('KjMenubar', () => {
-  beforeEach(() => {
-    TestBed.resetTestingModule();
-    TestBed.configureTestingModule({});
-    vi.useFakeTimers({
-      toFake: [
-        'setTimeout',
-        'clearTimeout',
-        'requestAnimationFrame',
-        'cancelAnimationFrame',
-        'queueMicrotask',
-        'Date',
-      ],
-    });
-  });
-
-  afterEach(() => {
-    cleanupOverlays();
-    vi.useRealTimers();
-  });
-
-  it('sets role="menubar" and aria-orientation="horizontal" on the host', () => {
-    @Component({
-      standalone: true,
-      imports: allDirectives,
-      template: `
-        <nav kjMenubar kjAriaLabel="Application">
-          <button kjMenubarItem [kjDropdownMenuTriggerFor]="m">File</button>
-        </nav>
-        <ng-template #m><div kjDropdownMenu><button kjDropdownMenuItem>Item</button></div></ng-template>
-      `,
-    })
-    class Host {}
-    const fixture = TestBed.createComponent(Host);
-    fixture.detectChanges();
-    const bar = fixture.nativeElement.querySelector('nav')!;
-    expect(bar.getAttribute('role')).toBe('menubar');
-    expect(bar.getAttribute('aria-orientation')).toBe('horizontal');
-    expect(bar.getAttribute('aria-label')).toBe('Application');
-  });
-
-  it('sets role="menuitem" and aria-haspopup="menu" on each bar item', () => {
-    @Component({
-      standalone: true,
-      imports: allDirectives,
-      template: `
-        <nav kjMenubar>
-          <button kjMenubarItem [kjDropdownMenuTriggerFor]="m1">File</button>
-          <button kjMenubarItem [kjDropdownMenuTriggerFor]="m2">Edit</button>
-        </nav>
-        <ng-template #m1><div kjDropdownMenu><button kjDropdownMenuItem>A</button></div></ng-template>
-        <ng-template #m2><div kjDropdownMenu><button kjDropdownMenuItem>B</button></div></ng-template>
-      `,
-    })
-    class Host {}
-    const fixture = TestBed.createComponent(Host);
-    fixture.detectChanges();
-    const items = fixture.nativeElement.querySelectorAll('button[kjMenubarItem]');
-    expect(items.length).toBe(2);
-    for (const el of Array.from(items as NodeListOf<HTMLElement>)) {
-      expect(el.getAttribute('role')).toBe('menuitem');
-      expect(el.getAttribute('aria-haspopup')).toBe('menu');
-      expect(el.getAttribute('aria-expanded')).toBe('false');
-    }
-  });
-
-  it('only one bar item has tabindex="0" (roving tabindex)', () => {
-    @Component({
-      standalone: true,
-      imports: allDirectives,
-      template: `
-        <nav kjMenubar>
-          <button kjMenubarItem [kjDropdownMenuTriggerFor]="m1">File</button>
-          <button kjMenubarItem [kjDropdownMenuTriggerFor]="m2">Edit</button>
-          <button kjMenubarItem [kjDropdownMenuTriggerFor]="m3">View</button>
-        </nav>
-        <ng-template #m1><div kjDropdownMenu><button kjDropdownMenuItem>A</button></div></ng-template>
-        <ng-template #m2><div kjDropdownMenu><button kjDropdownMenuItem>B</button></div></ng-template>
-        <ng-template #m3><div kjDropdownMenu><button kjDropdownMenuItem>C</button></div></ng-template>
-      `,
-    })
-    class Host {}
-    const fixture = TestBed.createComponent(Host);
-    settle(fixture);
-    const items = Array.from(fixture.nativeElement.querySelectorAll<HTMLElement>('button[kjMenubarItem]'));
-    const zeros = items.filter((el) => el.getAttribute('tabindex') === '0');
-    const negs = items.filter((el) => el.getAttribute('tabindex') === '-1');
-    expect(zeros.length).toBe(1);
-    expect(negs.length).toBe(2);
-  });
-
-  it('clicking a bar item opens its popup with role="menu"', () => {
-    @Component({
-      standalone: true,
-      imports: allDirectives,
-      template: `
-        <nav kjMenubar>
-          <button kjMenubarItem [kjDropdownMenuTriggerFor]="m">File</button>
-        </nav>
-        <ng-template #m>
-          <div kjDropdownMenu>
-            <button kjDropdownMenuItem>New</button>
-          </div>
-        </ng-template>
-      `,
-    })
-    class Host {}
-    const fixture = TestBed.createComponent(Host);
-    settle(fixture);
-    expect(findOpenPanel()).toBeNull();
-    const btn = fixture.nativeElement.querySelector<HTMLButtonElement>('button[kjMenubarItem]')!;
-    btn.click();
-    settle(fixture);
-    const panel = findOpenPanel();
-    expect(panel).not.toBeNull();
-    expect(panel!.getAttribute('role')).toBe('menu');
-    expect(btn.getAttribute('aria-expanded')).toBe('true');
-  });
-
-  it('opening a second bar item closes the first (single-open invariant)', () => {
-    @Component({
-      standalone: true,
-      imports: allDirectives,
-      template: `
-        <nav kjMenubar>
-          <button kjMenubarItem [kjDropdownMenuTriggerFor]="m1">File</button>
-          <button kjMenubarItem [kjDropdownMenuTriggerFor]="m2">Edit</button>
-        </nav>
-        <ng-template #m1><div kjDropdownMenu><button kjDropdownMenuItem>New</button></div></ng-template>
-        <ng-template #m2><div kjDropdownMenu><button kjDropdownMenuItem>Undo</button></div></ng-template>
-      `,
-    })
-    class Host {}
-    const fixture = TestBed.createComponent(Host);
-    settle(fixture);
-    const items = Array.from(
-      fixture.nativeElement.querySelectorAll<HTMLButtonElement>('button[kjMenubarItem]'),
-    );
-    items[0].click();
-    settle(fixture);
-    expect(findPanels().length).toBe(1);
-    items[1].click();
-    settle(fixture);
-    // Only the second is open.
-    expect(findPanels().length).toBe(1);
-    expect(items[0].getAttribute('aria-expanded')).toBe('false');
-    expect(items[1].getAttribute('aria-expanded')).toBe('true');
-  });
-
-  it('disabled bar item exposes aria-disabled and does not open a popup on click', () => {
-    @Component({
-      standalone: true,
-      imports: allDirectives,
-      template: `
-        <nav kjMenubar>
-          <button kjMenubarItem [kjDropdownMenuTriggerFor]="m" kjDisabled>Help</button>
-        </nav>
-        <ng-template #m><div kjDropdownMenu><button kjDropdownMenuItem>Docs</button></div></ng-template>
-      `,
-    })
-    class Host {}
-    const fixture = TestBed.createComponent(Host);
-    settle(fixture);
-    const btn = fixture.nativeElement.querySelector<HTMLButtonElement>('button[kjMenubarItem]')!;
-    expect(btn.getAttribute('aria-disabled')).toBe('true');
-    expect(btn.getAttribute('aria-haspopup')).toBe('menu');
-    btn.click();
-    settle(fixture);
-    expect(findOpenPanel()).toBeNull();
-  });
-
-  it('ArrowRight on a focused bar item moves focus to the next bar item', () => {
-    @Component({
-      standalone: true,
-      imports: allDirectives,
-      template: `
-        <nav kjMenubar>
-          <button kjMenubarItem [kjDropdownMenuTriggerFor]="m1">File</button>
-          <button kjMenubarItem [kjDropdownMenuTriggerFor]="m2">Edit</button>
-          <button kjMenubarItem [kjDropdownMenuTriggerFor]="m3">View</button>
-        </nav>
-        <ng-template #m1><div kjDropdownMenu><button kjDropdownMenuItem>A</button></div></ng-template>
-        <ng-template #m2><div kjDropdownMenu><button kjDropdownMenuItem>B</button></div></ng-template>
-        <ng-template #m3><div kjDropdownMenu><button kjDropdownMenuItem>C</button></div></ng-template>
-      `,
-    })
-    class Host {}
-    const fixture = TestBed.createComponent(Host);
-    settle(fixture);
-    const items = Array.from(
-      fixture.nativeElement.querySelectorAll<HTMLButtonElement>('button[kjMenubarItem]'),
-    );
-    items[0].focus();
-    items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
-    settle(fixture);
-    expect(document.activeElement).toBe(items[1]);
-  });
-
-  it('ArrowLeft on a focused bar item moves focus to the previous bar item', () => {
-    @Component({
-      standalone: true,
-      imports: allDirectives,
-      template: `
-        <nav kjMenubar>
-          <button kjMenubarItem [kjDropdownMenuTriggerFor]="m1">File</button>
-          <button kjMenubarItem [kjDropdownMenuTriggerFor]="m2">Edit</button>
-        </nav>
-        <ng-template #m1><div kjDropdownMenu><button kjDropdownMenuItem>A</button></div></ng-template>
-        <ng-template #m2><div kjDropdownMenu><button kjDropdownMenuItem>B</button></div></ng-template>
-      `,
-    })
-    class Host {}
-    const fixture = TestBed.createComponent(Host);
-    settle(fixture);
-    const items = Array.from(
-      fixture.nativeElement.querySelectorAll<HTMLButtonElement>('button[kjMenubarItem]'),
-    );
-    items[1].focus();
-    items[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
-    settle(fixture);
-    expect(document.activeElement).toBe(items[0]);
-  });
-
-  it('ArrowRight skips a disabled bar item', () => {
-    @Component({
-      standalone: true,
-      imports: allDirectives,
-      template: `
-        <nav kjMenubar>
-          <button kjMenubarItem [kjDropdownMenuTriggerFor]="m1">File</button>
-          <button kjMenubarItem [kjDropdownMenuTriggerFor]="m2" kjDisabled>Edit</button>
-          <button kjMenubarItem [kjDropdownMenuTriggerFor]="m3">View</button>
-        </nav>
-        <ng-template #m1><div kjDropdownMenu><button kjDropdownMenuItem>A</button></div></ng-template>
-        <ng-template #m2><div kjDropdownMenu><button kjDropdownMenuItem>B</button></div></ng-template>
-        <ng-template #m3><div kjDropdownMenu><button kjDropdownMenuItem>C</button></div></ng-template>
-      `,
-    })
-    class Host {}
-    const fixture = TestBed.createComponent(Host);
-    settle(fixture);
-    const items = Array.from(
-      fixture.nativeElement.querySelectorAll<HTMLButtonElement>('button[kjMenubarItem]'),
-    );
-    items[0].focus();
-    items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
-    settle(fixture);
-    expect(document.activeElement).toBe(items[2]);
-  });
-
-  it('ArrowRight at the last bar item does not wrap by default', () => {
-    @Component({
-      standalone: true,
-      imports: allDirectives,
-      template: `
-        <nav kjMenubar>
-          <button kjMenubarItem [kjDropdownMenuTriggerFor]="m1">File</button>
-          <button kjMenubarItem [kjDropdownMenuTriggerFor]="m2">Edit</button>
-        </nav>
-        <ng-template #m1><div kjDropdownMenu><button kjDropdownMenuItem>A</button></div></ng-template>
-        <ng-template #m2><div kjDropdownMenu><button kjDropdownMenuItem>B</button></div></ng-template>
-      `,
-    })
-    class Host {}
-    const fixture = TestBed.createComponent(Host);
-    settle(fixture);
-    const items = Array.from(
-      fixture.nativeElement.querySelectorAll<HTMLButtonElement>('button[kjMenubarItem]'),
-    );
-    items[1].focus();
-    items[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
-    settle(fixture);
-    expect(document.activeElement).toBe(items[1]);
-  });
-
-  it('ArrowRight at the last bar item wraps when kjLoop is set', () => {
-    @Component({
-      standalone: true,
-      imports: allDirectives,
-      template: `
-        <nav kjMenubar kjLoop>
-          <button kjMenubarItem [kjDropdownMenuTriggerFor]="m1">File</button>
-          <button kjMenubarItem [kjDropdownMenuTriggerFor]="m2">Edit</button>
-        </nav>
-        <ng-template #m1><div kjDropdownMenu><button kjDropdownMenuItem>A</button></div></ng-template>
-        <ng-template #m2><div kjDropdownMenu><button kjDropdownMenuItem>B</button></div></ng-template>
-      `,
-    })
-    class Host {}
-    const fixture = TestBed.createComponent(Host);
-    settle(fixture);
-    const items = Array.from(
-      fixture.nativeElement.querySelectorAll<HTMLButtonElement>('button[kjMenubarItem]'),
-    );
-    items[1].focus();
-    items[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
-    settle(fixture);
-    expect(document.activeElement).toBe(items[0]);
-  });
-
-  it('Home / End jump to first / last bar item', () => {
-    @Component({
-      standalone: true,
-      imports: allDirectives,
-      template: `
-        <nav kjMenubar>
-          <button kjMenubarItem [kjDropdownMenuTriggerFor]="m1">File</button>
-          <button kjMenubarItem [kjDropdownMenuTriggerFor]="m2">Edit</button>
-          <button kjMenubarItem [kjDropdownMenuTriggerFor]="m3">View</button>
-        </nav>
-        <ng-template #m1><div kjDropdownMenu><button kjDropdownMenuItem>A</button></div></ng-template>
-        <ng-template #m2><div kjDropdownMenu><button kjDropdownMenuItem>B</button></div></ng-template>
-        <ng-template #m3><div kjDropdownMenu><button kjDropdownMenuItem>C</button></div></ng-template>
-      `,
-    })
-    class Host {}
-    const fixture = TestBed.createComponent(Host);
-    settle(fixture);
-    const items = Array.from(
-      fixture.nativeElement.querySelectorAll<HTMLButtonElement>('button[kjMenubarItem]'),
-    );
-    items[1].focus();
-    items[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }));
-    settle(fixture);
-    expect(document.activeElement).toBe(items[2]);
-    items[2].dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }));
-    settle(fixture);
-    expect(document.activeElement).toBe(items[0]);
-  });
-
-  it('emits kjOpenChange with the bar item id on open and null on close', () => {
-    @Component({
-      standalone: true,
-      imports: allDirectives,
-      template: `
-        <nav kjMenubar (kjOpenChange)="last = $event">
-          <button id="file-btn" kjMenubarItem [kjDropdownMenuTriggerFor]="m">File</button>
-        </nav>
-        <ng-template #m><div kjDropdownMenu><button kjDropdownMenuItem>New</button></div></ng-template>
-      `,
-    })
-    class Host {
-      last: string | null | undefined = undefined;
-    }
-    const fixture = TestBed.createComponent(Host);
-    settle(fixture);
-    const btn = fixture.nativeElement.querySelector<HTMLButtonElement>('button[kjMenubarItem]')!;
-    btn.click();
-    settle(fixture);
-    expect(fixture.componentInstance.last).toBe('file-btn');
-    btn.click();
-    settle(fixture);
-    expect(fixture.componentInstance.last).toBeNull();
-  });
-
-  it('Escape closes the open popup and exits auto-disclose mode', () => {
-    @Component({
-      standalone: true,
-      imports: allDirectives,
-      template: `
-        <nav kjMenubar>
-          <button kjMenubarItem [kjDropdownMenuTriggerFor]="m">File</button>
-        </nav>
-        <ng-template #m><div kjDropdownMenu><button kjDropdownMenuItem>New</button></div></ng-template>
-      `,
-    })
-    class Host {}
-    const fixture = TestBed.createComponent(Host);
-    settle(fixture);
-    const btn = fixture.nativeElement.querySelector<HTMLButtonElement>('button[kjMenubarItem]')!;
-    btn.click();
-    settle(fixture);
-    expect(findOpenPanel()).not.toBeNull();
-    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
-    settle(fixture);
-    expect(findOpenPanel()).toBeNull();
-  });
-});