@kouji-ui/core 0.0.2

package/src/menu/menu.spec.ts

@@ -0,0 +1,168 @@
+import { render, fireEvent } from '@testing-library/angular';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { KjMenu, KjMenuTrigger, KjMenuContent, KjMenuItem, KjMenuClose } from './menu';
+
+expect.extend(toHaveNoViolations);
+
+const imports = [KjMenu, KjMenuTrigger, KjMenuContent, KjMenuItem, KjMenuClose];
+
+const template = `
+  <div kjMenu>
+    <button kjMenuTrigger>Actions</button>
+    <div kjMenuContent>
+      <button kjMenuItem>Edit</button>
+      <button kjMenuItem>Delete</button>
+    </div>
+  </div>`;
+
+describe('KjMenu', () => {
+  it('renders trigger button', async () => {
+    const { getByRole } = await render(template, { imports });
+    expect(getByRole('button', { name: 'Actions' })).toBeInTheDocument();
+  });
+
+  it('trigger has aria-haspopup="menu"', async () => {
+    const { getByRole } = await render(template, { imports });
+    expect(getByRole('button', { name: 'Actions' })).toHaveAttribute('aria-haspopup', 'menu');
+  });
+
+  it('trigger has aria-expanded="false" initially', async () => {
+    const { getByRole } = await render(template, { imports });
+    expect(getByRole('button', { name: 'Actions' })).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('menu content is hidden initially', async () => {
+    const { getByRole } = await render(template, { imports });
+    const menu = getByRole('menu', { hidden: true });
+    expect(menu).toHaveAttribute('hidden');
+  });
+
+  it('opens on trigger click', async () => {
+    const { getByRole } = await render(template, { imports });
+    fireEvent.click(getByRole('button', { name: 'Actions' }));
+    const menu = getByRole('menu');
+    expect(menu).not.toHaveAttribute('hidden');
+  });
+
+  it('sets aria-expanded="true" when open', async () => {
+    const { getByRole } = await render(template, { imports });
+    fireEvent.click(getByRole('button', { name: 'Actions' }));
+    expect(getByRole('button', { name: 'Actions' })).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('closes on second trigger click (toggle)', async () => {
+    const { getByRole } = await render(template, { imports });
+    const trigger = getByRole('button', { name: 'Actions' });
+    fireEvent.click(trigger);
+    fireEvent.click(trigger);
+    const menu = getByRole('menu', { hidden: true });
+    expect(menu).toHaveAttribute('hidden');
+  });
+
+  it('closes on Escape key', async () => {
+    const { getByRole } = await render(template, { imports });
+    fireEvent.click(getByRole('button', { name: 'Actions' }));
+    fireEvent.keyDown(document, { key: 'Escape' });
+    const menu = getByRole('menu', { hidden: true });
+    expect(menu).toHaveAttribute('hidden');
+  });
+
+  it('closes on click outside', async () => {
+    const { getByRole } = await render(template, { imports });
+    fireEvent.click(getByRole('button', { name: 'Actions' }));
+    fireEvent.click(document.body);
+    const menu = getByRole('menu', { hidden: true });
+    expect(menu).toHaveAttribute('hidden');
+  });
+
+  it('closes when a menu item is clicked', async () => {
+    const { getByRole } = await render(template, { imports });
+    fireEvent.click(getByRole('button', { name: 'Actions' }));
+    fireEvent.click(getByRole('menuitem', { name: 'Edit' }));
+    const menu = getByRole('menu', { hidden: true });
+    expect(menu).toHaveAttribute('hidden');
+  });
+
+  it('menu items have role="menuitem"', async () => {
+    const { getAllByRole } = await render(template, { imports });
+    fireEvent.click(getAllByRole('button')[0]);
+    const items = getAllByRole('menuitem');
+    expect(items).toHaveLength(2);
+  });
+
+  it('navigates down with ArrowDown', async () => {
+    const { getByRole, getAllByRole } = await render(template, { imports });
+    fireEvent.click(getByRole('button', { name: 'Actions' }));
+    const menu = getByRole('menu');
+    const items = getAllByRole('menuitem');
+    items[0].focus();
+    fireEvent.keyDown(menu, { key: 'ArrowDown' });
+    expect(document.activeElement).toBe(items[1]);
+  });
+
+  it('navigates up with ArrowUp', async () => {
+    const { getByRole, getAllByRole } = await render(template, { imports });
+    fireEvent.click(getByRole('button', { name: 'Actions' }));
+    const menu = getByRole('menu');
+    const items = getAllByRole('menuitem');
+    items[1].focus();
+    fireEvent.keyDown(menu, { key: 'ArrowUp' });
+    expect(document.activeElement).toBe(items[0]);
+  });
+
+  it('wraps around from last to first on ArrowDown', async () => {
+    const { getByRole, getAllByRole } = await render(template, { imports });
+    fireEvent.click(getByRole('button', { name: 'Actions' }));
+    const menu = getByRole('menu');
+    const items = getAllByRole('menuitem');
+    items[items.length - 1].focus();
+    fireEvent.keyDown(menu, { key: 'ArrowDown' });
+    expect(document.activeElement).toBe(items[0]);
+  });
+
+  it('focuses first item on Home key', async () => {
+    const { getByRole, getAllByRole } = await render(template, { imports });
+    fireEvent.click(getByRole('button', { name: 'Actions' }));
+    const menu = getByRole('menu');
+    const items = getAllByRole('menuitem');
+    items[1].focus();
+    fireEvent.keyDown(menu, { key: 'Home' });
+    expect(document.activeElement).toBe(items[0]);
+  });
+
+  it('focuses last item on End key', async () => {
+    const { getByRole, getAllByRole } = await render(template, { imports });
+    fireEvent.click(getByRole('button', { name: 'Actions' }));
+    const menu = getByRole('menu');
+    const items = getAllByRole('menuitem');
+    items[0].focus();
+    fireEvent.keyDown(menu, { key: 'End' });
+    expect(document.activeElement).toBe(items[items.length - 1]);
+  });
+
+  it('kjMenuClose closes the menu on click', async () => {
+    const closeTemplate = `
+      <div kjMenu>
+        <button kjMenuTrigger>Open</button>
+        <div kjMenuContent>
+          <button kjMenuClose>Cancel</button>
+        </div>
+      </div>`;
+    const { getByRole } = await render(closeTemplate, { imports });
+    fireEvent.click(getByRole('button', { name: 'Open' }));
+    fireEvent.click(getByRole('button', { name: 'Cancel' }));
+    const menu = getByRole('menu', { hidden: true });
+    expect(menu).toHaveAttribute('hidden');
+  });
+
+  it('passes axe audit when closed', async () => {
+    const { container } = await render(template, { imports });
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it('passes axe audit when open', async () => {
+    const { container, getByRole } = await render(template, { imports });
+    fireEvent.click(getByRole('button', { name: 'Actions' }));
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});

package/src/menu/menu.ts

@@ -0,0 +1,176 @@
+import { Directive, ElementRef, inject, signal } from '@angular/core';
+import { KJ_MENU, KjMenuContext } from './menu.context';
+
+/**
+ * Root menu container. Manages open/close state and provides context to child directives.
+ * Pairs with `[kjMenuTrigger]`, `[kjMenuContent]`, and `[kjMenuItem]`.
+ *
+ * Click outside or Escape closes the menu. Clicking the trigger toggles it.
+ * Arrow-key navigation, Home/End, and typeahead are handled by `[kjMenuContent]`.
+ *
+ * @example
+ * ```html
+ * <div kjMenu>
+ *   <button kjMenuTrigger>Actions</button>
+ *   <div kjMenuContent>
+ *     <button kjMenuItem>Edit</button>
+ *     <button kjMenuItem>Delete</button>
+ *   </div>
+ * </div>
+ * ```
+ * @doc
+ *  @doc-example Basic
+ *    @doc-theme default
+ *      @doc-file menu.example.ts
+ * @category Core/Navigation
+ */
+@Directive({
+  selector: '[kjMenu]',
+  standalone: true,
+  providers: [{ provide: KJ_MENU, useExisting: KjMenu }],
+  exportAs: 'kjMenu',
+})
+export class KjMenu implements KjMenuContext {
+  private readonly _open = signal(false);
+  readonly open = this._open.asReadonly();
+
+  toggle(): void { this._open.update(v => !v); }
+  close(): void { this._open.set(false); }
+}
+
+/**
+ * Trigger element that toggles the parent menu.
+ * Automatically sets `aria-haspopup` and `aria-expanded` on the host element.
+ *
+ * @category Core/Navigation
+ */
+@Directive({
+  selector: '[kjMenuTrigger]',
+  standalone: true,
+  host: {
+    '[attr.aria-haspopup]': '"menu"',
+    '[attr.aria-expanded]': 'ctx.open().toString()',
+    // stopPropagation prevents the document:click on kjMenuContent from immediately closing
+    '(click)': '$event.stopPropagation(); ctx.toggle()',
+  },
+})
+export class KjMenuTrigger {
+  readonly ctx = inject(KJ_MENU);
+}
+
+/**
+ * Menu content panel. Hidden when closed via the `hidden` attribute.
+ * Provides keyboard navigation: Arrow keys, Home/End, Escape, and typeahead.
+ * Click-outside dismissal is handled via a document-level click listener.
+ *
+ * @category Core/Navigation
+ */
+@Directive({
+  selector: '[kjMenuContent]',
+  standalone: true,
+  host: {
+    'role': 'menu',
+    '[attr.hidden]': '!ctx.open() ? "" : null',
+    // Prevent clicks inside from propagating to document click handler
+    '(click)': '$event.stopPropagation()',
+    // Keyboard navigation within the menu
+    '(keydown)': 'onKeydown($event)',
+    // Close on Escape key
+    '(document:keydown.escape)': 'ctx.open() && ctx.close()',
+    // Close on any click outside (trigger stopPropagation prevents self-close)
+    '(document:click)': 'ctx.open() && ctx.close()',
+  },
+})
+export class KjMenuContent {
+  private readonly el = inject(ElementRef<HTMLElement>);
+  readonly ctx = inject(KJ_MENU);
+
+  onKeydown(e: KeyboardEvent): void {
+    const items = this.getFocusableItems();
+    if (!items.length) return;
+    const current = items.indexOf(document.activeElement as HTMLElement);
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        items[(current + 1) % items.length].focus();
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        items[(current - 1 + items.length) % items.length].focus();
+        break;
+      case 'Home':
+        e.preventDefault();
+        items[0].focus();
+        break;
+      case 'End':
+        e.preventDefault();
+        items[items.length - 1].focus();
+        break;
+      default: {
+        // Type-ahead: jump to next item starting with pressed character
+        const char = e.key.length === 1 ? e.key.toLowerCase() : null;
+        if (char) {
+          const match =
+            items.find((item, i) =>
+              i > current && item.textContent?.trim().toLowerCase().startsWith(char)
+            ) ??
+            items.find(item =>
+              item.textContent?.trim().toLowerCase().startsWith(char)
+            );
+          match?.focus();
+        }
+      }
+    }
+  }
+
+  private getFocusableItems(): HTMLElement[] {
+    const nodes = this.el.nativeElement.querySelectorAll('[kjMenuItem]');
+    return (Array.from(nodes) as HTMLElement[]).filter(el => !el.hasAttribute('disabled'));
+  }
+}
+
+/**
+ * Individual menu item. Closes the menu on click or keyboard activation (Enter/Space).
+ *
+ * @example
+ * ```html
+ * <button kjMenuItem>Delete</button>
+ * ```
+ * @category Core/Navigation
+ */
+@Directive({
+  selector: '[kjMenuItem]',
+  standalone: true,
+  host: {
+    'role': 'menuitem',
+    '[attr.tabindex]': '"0"',
+    '(click)': 'ctx.close()',
+    '(keydown.enter)': '$event.preventDefault(); ctx.close()',
+    '(keydown.space)': '$event.preventDefault(); ctx.close()',
+  },
+})
+export class KjMenuItem {
+  readonly ctx = inject(KJ_MENU);
+}
+
+/**
+ * Closes the parent menu when clicked. Convenience directive for non-item close buttons.
+ * Place anywhere inside `[kjMenu]`.
+ *
+ * @example
+ * ```html
+ * <button kjMenuClose>Cancel</button>
+ * ```
+ * @category Core/Navigation
+ */
+@Directive({
+  selector: '[kjMenuClose]',
+  standalone: true,
+  host: {
+    '(click)': 'ctx.close()',
+  },
+})
+export class KjMenuClose {
+  readonly ctx = inject(KJ_MENU);
+}

package/src/popover/index.ts

@@ -0,0 +1,12 @@
+export {
+  KjPopover,
+  KjPopoverTrigger,
+  KjPopoverContent,
+  KjPopoverClose,
+} from './popover';
+export {
+  KJ_POPOVER,
+  type KjPopoverContext,
+  type KjPopoverSide,
+  type KjPopoverAlign,
+} from './popover.context';

package/src/popover/popover.context.ts

@@ -0,0 +1,18 @@
+import { InjectionToken, Signal, InputSignal } from '@angular/core';
+
+/** Preferred side for the popover relative to its trigger. */
+export type KjPopoverSide = 'top' | 'bottom' | 'left' | 'right';
+/** Alignment of the popover along the cross-axis. */
+export type KjPopoverAlign = 'start' | 'center' | 'end';
+
+/** Context shared between popover directives. */
+export interface KjPopoverContext {
+  readonly open: Signal<boolean>;
+  readonly popoverId: string;
+  kjPopoverSide: Signal<KjPopoverSide> | InputSignal<KjPopoverSide>;
+  kjPopoverAlign: Signal<KjPopoverAlign> | InputSignal<KjPopoverAlign>;
+  toggle: () => void;
+  hide: () => void;
+}
+
+export const KJ_POPOVER = new InjectionToken<KjPopoverContext>('KjPopover');

package/src/popover/popover.example.ts

@@ -0,0 +1,50 @@
+import { Component } from '@angular/core';
+import {
+  KjPopover, KjPopoverTrigger,
+  KjPopoverContent, KjPopoverClose,
+} from './popover';
+import { KjButton } from '../button/button';
+
+@Component({
+  selector: 'kj-example-popover-basic',
+  standalone: true,
+  imports: [
+    KjPopover, KjPopoverTrigger,
+    KjPopoverContent, KjPopoverClose,
+    KjButton,
+  ],
+  styleUrls: ['../styles/docs-themes.css'],
+  styles: [`
+    :host { display: flex; align-items: flex-start; justify-content: center; padding: 3rem 2rem 10rem; background: var(--kj-bg); font-family: var(--kj-font); min-height: 220px; }
+    .anchor { position: relative; display: inline-block; }
+    button[kjButton] { padding: 0.5rem 1.25rem; border: 1px solid var(--kj-border); background: transparent; color: var(--kj-text); cursor: pointer; font-family: inherit; font-size: 0.875rem; }
+    button[kjButton]:hover { border-color: var(--kj-accent); color: var(--kj-accent); }
+    [kjPopoverContent] {
+      position: absolute; top: calc(100% + 8px); left: 0; z-index: 20;
+      background: var(--kj-surface); border: 1px solid var(--kj-border); padding: 1rem; min-width: 14rem;
+      color: var(--kj-text);
+    }
+    [kjPopoverContent][hidden] { display: none; }
+    [kjPopoverContent][data-align="end"] { left: auto; right: 0; }
+    .popover-title { font-size: 0.875rem; font-weight: 600; margin: 0 0 0.5rem; color: var(--kj-accent); }
+    .popover-body { font-size: 0.8125rem; color: var(--kj-text-muted); margin: 0 0 1rem; line-height: 1.5; }
+    .popover-footer { display: flex; justify-content: flex-end; gap: 0.5rem; }
+    .popover-footer button[kjButton] { padding: 0.35rem 0.875rem; font-size: 0.8125rem; }
+    [data-variant="default"] { border-color: var(--kj-accent); color: var(--kj-accent-on); background: var(--kj-accent); }
+    [data-variant="ghost"] { border-color: transparent; background: transparent; color: var(--kj-text-muted); }
+  `],
+  template: `
+    <div class="anchor" kjPopover>
+      <button kjButton kjPopoverTrigger>Open Popover</button>
+      <div kjPopoverContent>
+        <p class="popover-title">Notification Settings</p>
+        <p class="popover-body">Control how and when you receive notifications from this app.</p>
+        <div class="popover-footer">
+          <button kjButton kjPopoverClose [kjVariant]="'ghost'">Cancel</button>
+          <button kjButton kjPopoverClose [kjVariant]="'default'">Save</button>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class PopoverBasicExample {}

package/src/popover/popover.finance.example.ts

@@ -0,0 +1,52 @@
+import { Component } from '@angular/core';
+import {
+  KjPopover, KjPopoverTrigger,
+  KjPopoverContent, KjPopoverClose,
+} from './popover';
+
+@Component({
+  selector: 'kj-example-popover-finance',
+  standalone: true,
+  imports: [
+    KjPopover, KjPopoverTrigger,
+    KjPopoverContent, KjPopoverClose,
+  ],
+  styleUrls: ['../styles/docs-themes.css'],
+  host: { class: 'kj-theme-finance' },
+  styles: [`
+    :host { display: flex; align-items: flex-start; justify-content: center; padding: 3rem 2rem 10rem; background: var(--kj-bg); font-family: var(--kj-font); min-height: 220px; }
+    .anchor { position: relative; display: inline-block; }
+    button {
+      padding: 0.4rem 1rem; background: var(--kj-accent); color: var(--kj-accent-on); border: 1px solid var(--kj-accent);
+      border-radius: var(--kj-radius-md); cursor: pointer; font-family: inherit; font-size: 0.875rem; font-weight: 500;
+    }
+    button:hover { background: #2563eb; }
+    [kjPopoverContent] {
+      position: absolute; top: calc(100% + 8px); left: 0; z-index: 20;
+      background: var(--kj-surface); border: 1px solid var(--kj-border); border-radius: var(--kj-radius-lg);
+      box-shadow: var(--kj-shadow-md); padding: 1rem; min-width: 14rem;
+    }
+    [kjPopoverContent][hidden] { display: none; }
+    .popover-title { font-size: 0.875rem; font-weight: 600; color: var(--kj-text); margin: 0 0 0.375rem; }
+    .popover-body { font-size: 0.8125rem; color: var(--kj-text-muted); margin: 0 0 1rem; line-height: 1.5; }
+    .popover-footer { display: flex; justify-content: flex-end; gap: 0.5rem; }
+    .btn-cancel { padding: 0.35rem 0.875rem; background: var(--kj-surface); color: #374151; border: 1px solid var(--kj-border); border-radius: var(--kj-radius-sm); cursor: pointer; font-size: 0.8125rem; font-weight: 500; }
+    .btn-cancel:hover { background: #f3f4f6; }
+    .btn-primary { padding: 0.35rem 0.875rem; background: var(--kj-accent); color: var(--kj-accent-on); border: 1px solid var(--kj-accent); border-radius: var(--kj-radius-sm); cursor: pointer; font-size: 0.8125rem; font-weight: 500; }
+    .btn-primary:hover { background: #2563eb; }
+  `],
+  template: `
+    <div class="anchor" kjPopover>
+      <button kjPopoverTrigger>Preferences</button>
+      <div kjPopoverContent>
+        <p class="popover-title">Notification Preferences</p>
+        <p class="popover-body">Choose how you receive alerts and account notifications.</p>
+        <div class="popover-footer">
+          <button class="btn-cancel" kjPopoverClose>Cancel</button>
+          <button class="btn-primary" kjPopoverClose>Apply</button>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class PopoverFinanceExample {}

package/src/popover/popover.retro.example.ts

@@ -0,0 +1,53 @@
+import { Component } from '@angular/core';
+import {
+  KjPopover, KjPopoverTrigger,
+  KjPopoverContent, KjPopoverClose,
+} from './popover';
+
+@Component({
+  selector: 'kj-example-popover-retro',
+  standalone: true,
+  imports: [
+    KjPopover, KjPopoverTrigger,
+    KjPopoverContent, KjPopoverClose,
+  ],
+  styleUrls: ['../styles/docs-themes.css'],
+  host: { class: 'kj-theme-retro' },
+  styles: [`
+    :host { display: flex; align-items: flex-start; justify-content: center; padding: 3rem 2rem 10rem; background: var(--kj-bg); font-family: var(--kj-font); min-height: 220px; color: var(--kj-text); }
+    .anchor { position: relative; display: inline-block; }
+    button {
+      padding: 0.4rem 1rem; font-family: var(--kj-font); font-size: 0.8rem; font-weight: 700;
+      letter-spacing: 0.06em; text-transform: uppercase; background: var(--kj-surface); color: var(--kj-text);
+      border: var(--kj-btn-border); border-radius: 0; cursor: pointer;
+      box-shadow: var(--kj-shadow-sm); transition: var(--kj-transition);
+    }
+    button:hover { transform: translate(-1px, -1px); box-shadow: var(--kj-shadow-md); }
+    [kjPopoverContent] {
+      position: absolute; top: calc(100% + 8px); left: 0; z-index: 20;
+      background: var(--kj-bg); border: var(--kj-btn-border); box-shadow: var(--kj-shadow-hard);
+      padding: 1rem; min-width: 14rem; font-family: var(--kj-font);
+    }
+    [kjPopoverContent][hidden] { display: none; }
+    .popover-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.5rem; border-bottom: var(--kj-btn-border); padding-bottom: 0.375rem; color: var(--kj-text); }
+    .popover-body { font-size: 0.75rem; color: var(--kj-text-muted); margin: 0.5rem 0 1rem; line-height: 1.6; }
+    .popover-footer { display: flex; justify-content: flex-end; gap: 0.5rem; }
+    .popover-footer button { padding: 0.3rem 0.75rem; font-size: 0.7rem; box-shadow: var(--kj-shadow-sm); }
+    .popover-footer button:hover { box-shadow: var(--kj-shadow-md); }
+    .btn-primary { background: var(--kj-accent); color: var(--kj-accent-on); border-color: var(--kj-border); }
+  `],
+  template: `
+    <div class="anchor" kjPopover>
+      <button kjPopoverTrigger>Settings</button>
+      <div kjPopoverContent>
+        <p class="popover-title">Notifications</p>
+        <p class="popover-body">Configure notification frequency and delivery preferences.</p>
+        <div class="popover-footer">
+          <button kjPopoverClose>Cancel</button>
+          <button kjPopoverClose class="btn-primary">Save</button>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class PopoverRetroExample {}

package/src/popover/popover.spec.ts

@@ -0,0 +1,52 @@
+import { render, fireEvent } from '@testing-library/angular';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import {
+  KjPopover, KjPopoverTrigger,
+  KjPopoverContent, KjPopoverClose,
+} from './popover';
+
+expect.extend(toHaveNoViolations);
+const imports = [KjPopover, KjPopoverTrigger, KjPopoverContent, KjPopoverClose];
+const template = `<div kjPopover><button kjPopoverTrigger>Open</button><div kjPopoverContent role="dialog" aria-label="Options">Content</div></div>`;
+
+describe('KjPopover', () => {
+  it('content hidden by default', async () => {
+    const { container } = await render(template, { imports });
+    expect(container.querySelector('[kjPopoverContent]')).toHaveAttribute('hidden', '');
+  });
+
+  it('trigger toggles content', async () => {
+    const { container } = await render(template, { imports });
+    fireEvent.click(container.querySelector('[kjPopoverTrigger]')!);
+    expect(container.querySelector('[kjPopoverContent]')).not.toHaveAttribute('hidden');
+  });
+
+  it('trigger sets aria-expanded', async () => {
+    const { container } = await render(template, { imports });
+    const t = container.querySelector('[kjPopoverTrigger]')!;
+    expect(t).toHaveAttribute('aria-expanded', 'false');
+    fireEvent.click(t);
+    expect(t).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('trigger sets aria-controls pointing to content id', async () => {
+    const { container } = await render(template, { imports });
+    const t = container.querySelector('[kjPopoverTrigger]')!;
+    const c = container.querySelector('[kjPopoverContent]')!;
+    expect(t.getAttribute('aria-controls')).toBe(c.id);
+  });
+
+  it('kjPopoverClose closes the popover', async () => {
+    const closeTemplate = `<div kjPopover><button kjPopoverTrigger>Open</button><div kjPopoverContent role="dialog" aria-label="Options"><button kjPopoverClose>Close</button></div></div>`;
+    const { container } = await render(closeTemplate, { imports });
+    fireEvent.click(container.querySelector('[kjPopoverTrigger]')!);
+    expect(container.querySelector('[kjPopoverContent]')).not.toHaveAttribute('hidden');
+    fireEvent.click(container.querySelector('[kjPopoverClose]')!);
+    expect(container.querySelector('[kjPopoverContent]')).toHaveAttribute('hidden', '');
+  });
+
+  it('passes axe audit', async () => {
+    const { container } = await render(template, { imports });
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});