@kouji-ui/core 0.0.3 → 0.1.1

package/src/menubar/menubar-item.ts

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

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

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