@kouji-ui/core 0.1.1 → 0.1.2

package/src/a11y/live-region.spec.ts

@@ -1,58 +0,0 @@
-import { render } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { vi } from 'vitest';
-import { KjLiveRegion } from './live-region';
-
-expect.extend(toHaveNoViolations);
-
-describe('KjLiveRegion', () => {
-  it('sets aria-live to polite by default', async () => {
-    const { container } = await render(
-      `<div kjLiveRegion></div>`,
-      { imports: [KjLiveRegion] },
-    );
-    expect(container.querySelector('div')).toHaveAttribute('aria-live', 'polite');
-  });
-
-  it('sets aria-live to assertive when specified', async () => {
-    const { container } = await render(
-      `<div kjLiveRegion [kjPoliteness]="'assertive'"></div>`,
-      { imports: [KjLiveRegion] },
-    );
-    expect(container.querySelector('div')).toHaveAttribute('aria-live', 'assertive');
-  });
-
-  it('sets aria-atomic to true', async () => {
-    const { container } = await render(
-      `<div kjLiveRegion></div>`,
-      { imports: [KjLiveRegion] },
-    );
-    expect(container.querySelector('div')).toHaveAttribute('aria-atomic', 'true');
-  });
-
-  it('announces a message via DOM text content after a brief timeout', async () => {
-    vi.useFakeTimers();
-    const { container } = await render(
-      `<div kjLiveRegion></div>`,
-      { imports: [KjLiveRegion] },
-    );
-    const div = container.querySelector('div')!;
-
-    // Simulate the announce mechanism: clear, then set after 50ms.
-    div.textContent = '';
-    setTimeout(() => { div.textContent = 'Item saved'; }, 50);
-
-    vi.advanceTimersByTime(50);
-    expect(div.textContent).toBe('Item saved');
-
-    vi.useRealTimers();
-  });
-
-  it('passes axe accessibility audit', async () => {
-    const { container } = await render(
-      `<div kjLiveRegion></div>`,
-      { imports: [KjLiveRegion] },
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/a11y/live-region.ts

@@ -1,50 +0,0 @@
-import { Directive, ElementRef, inject, input } from '@angular/core';
-
-/** Politeness setting for ARIA live regions. */
-export type KjLivePoliteness = 'off' | 'polite' | 'assertive';
-
-/**
- * Marks an element as an ARIA live region and exposes an `announce` method
- * for programmatically pushing announcements to screen readers via DOM text content.
- *
- * @example
- * ```html
- * <div kjLiveRegion [kjPoliteness]="'polite'" #region="kjLiveRegion"></div>
- * <button (click)="region.announce('Item saved')">Save</button>
- * ```
- * @doc-category Core/Accessibility
- * @doc
- * @doc-name a11y
- */
-@Directive({
-  selector: '[kjLiveRegion]',
-  standalone: true,
-  exportAs: 'kjLiveRegion',
-  host: {
-    '[attr.aria-live]': 'kjPoliteness()',
-    '[attr.aria-atomic]': '"true"',
-  },
-})
-export class KjLiveRegion {
-  private readonly el = inject(ElementRef<HTMLElement>);
-
-  /** The ARIA live politeness setting. Defaults to `'polite'`. */
-  kjPoliteness = input<KjLivePoliteness>('polite');
-
-  /**
-   * Announces a message to screen readers by briefly clearing and re-setting text.
-   * @param message - The message to announce.
-   * @param durationMs - Optional duration in ms before clearing the announcement.
-   */
-  announce(message: string, durationMs?: number): void {
-    const el = this.el.nativeElement;
-    el.textContent = '';
-    // Brief timeout lets screen readers detect the content change.
-    setTimeout(() => {
-      el.textContent = message;
-      if (durationMs != null) {
-        setTimeout(() => { el.textContent = ''; }, durationMs);
-      }
-    }, 50);
-  }
-}

package/src/a11y/roving-tabindex.spec.ts

@@ -1,201 +0,0 @@
-import { render, fireEvent } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import {
-  KjRovingTabindex,
-  KjRovingTabindexItemDirective,
-} from './roving-tabindex';
-
-expect.extend(toHaveNoViolations);
-
-const template = `
-  <div kjRovingTabindex role="toolbar" aria-label="Formatting">
-    <button kjRovingTabindexItem>Bold</button>
-    <button kjRovingTabindexItem>Italic</button>
-    <button kjRovingTabindexItem>Underline</button>
-  </div>`;
-const imports = [KjRovingTabindex, KjRovingTabindexItemDirective];
-
-describe('KjRovingTabindex', () => {
-  it('renders all items', async () => {
-    const { getAllByRole } = await render(template, { imports });
-    expect(getAllByRole('button')).toHaveLength(3);
-  });
-
-  it('first item has tabindex 0, others -1', async () => {
-    const { getAllByRole } = await render(template, { imports });
-    const [first, second, third] = getAllByRole('button');
-    expect(first).toHaveAttribute('tabindex', '0');
-    expect(second).toHaveAttribute('tabindex', '-1');
-    expect(third).toHaveAttribute('tabindex', '-1');
-  });
-
-  it('moves focus right on ArrowRight', async () => {
-    const { getAllByRole, container } = await render(template, { imports });
-    const [first, second] = getAllByRole('button');
-    first.focus();
-    fireEvent.keyDown(container.querySelector('[kjRovingTabindex]')!, { key: 'ArrowRight' });
-    expect(second).toHaveAttribute('tabindex', '0');
-    expect(first).toHaveAttribute('tabindex', '-1');
-  });
-
-  it('moves focus left on ArrowLeft', async () => {
-    const { getAllByRole, container } = await render(template, { imports });
-    const [first, second] = getAllByRole('button');
-    second.focus();
-    fireEvent.keyDown(container.querySelector('[kjRovingTabindex]')!, { key: 'ArrowLeft' });
-    expect(first).toHaveAttribute('tabindex', '0');
-    expect(second).toHaveAttribute('tabindex', '-1');
-  });
-
-  it('wraps to last item on ArrowLeft from first', async () => {
-    const { getAllByRole, container } = await render(template, { imports });
-    const buttons = getAllByRole('button');
-    buttons[0].focus();
-    fireEvent.keyDown(container.querySelector('[kjRovingTabindex]')!, { key: 'ArrowLeft' });
-    expect(buttons[2]).toHaveAttribute('tabindex', '0');
-  });
-
-  it('passes axe accessibility audit', async () => {
-    const { container } = await render(template, { imports });
-    expect(await axe(container)).toHaveNoViolations();
-  });
-
-  describe('kjRovingOrientation', () => {
-    const horizontalTemplate = `
-      <div kjRovingTabindex="" kjRovingOrientation="horizontal" role="toolbar" aria-label="Formatting">
-        <button kjRovingTabindexItem>Bold</button>
-        <button kjRovingTabindexItem>Italic</button>
-        <button kjRovingTabindexItem>Underline</button>
-      </div>`;
-
-    const verticalTemplate = `
-      <div kjRovingTabindex="" kjRovingOrientation="vertical" role="toolbar" aria-label="Formatting" aria-orientation="vertical">
-        <button kjRovingTabindexItem>Bold</button>
-        <button kjRovingTabindexItem>Italic</button>
-        <button kjRovingTabindexItem>Underline</button>
-      </div>`;
-
-    const bothTemplate = `
-      <div kjRovingTabindex="" kjRovingOrientation="both" role="toolbar" aria-label="Formatting">
-        <button kjRovingTabindexItem>Bold</button>
-        <button kjRovingTabindexItem>Italic</button>
-        <button kjRovingTabindexItem>Underline</button>
-      </div>`;
-
-    it('default orientation behaves like "both" (ArrowDown moves focus)', async () => {
-      const { getAllByRole, container } = await render(template, { imports });
-      const [first, second] = getAllByRole('button');
-      first.focus();
-      fireEvent.keyDown(container.querySelector('[kjRovingTabindex]')!, { key: 'ArrowDown' });
-      expect(second).toHaveAttribute('tabindex', '0');
-      expect(first).toHaveAttribute('tabindex', '-1');
-    });
-
-    it('horizontal: ArrowRight/ArrowLeft move focus', async () => {
-      const { getAllByRole, container } = await render(horizontalTemplate, { imports });
-      const [first, second, third] = getAllByRole('button');
-      first.focus();
-      const host = container.querySelector('[kjRovingTabindex]')!;
-
-      fireEvent.keyDown(host, { key: 'ArrowRight' });
-      expect(second).toHaveAttribute('tabindex', '0');
-
-      fireEvent.keyDown(host, { key: 'ArrowRight' });
-      expect(third).toHaveAttribute('tabindex', '0');
-
-      fireEvent.keyDown(host, { key: 'ArrowLeft' });
-      expect(second).toHaveAttribute('tabindex', '0');
-    });
-
-    it('horizontal: ArrowUp / ArrowDown are ignored', async () => {
-      const { getAllByRole, container } = await render(horizontalTemplate, { imports });
-      const [first, second, third] = getAllByRole('button');
-      first.focus();
-      const host = container.querySelector('[kjRovingTabindex]')!;
-
-      fireEvent.keyDown(host, { key: 'ArrowDown' });
-      expect(first).toHaveAttribute('tabindex', '0');
-      expect(second).toHaveAttribute('tabindex', '-1');
-      expect(third).toHaveAttribute('tabindex', '-1');
-
-      fireEvent.keyDown(host, { key: 'ArrowUp' });
-      expect(first).toHaveAttribute('tabindex', '0');
-    });
-
-    it('vertical: ArrowDown / ArrowUp move focus', async () => {
-      const { getAllByRole, container } = await render(verticalTemplate, { imports });
-      const [first, second, third] = getAllByRole('button');
-      first.focus();
-      const host = container.querySelector('[kjRovingTabindex]')!;
-
-      fireEvent.keyDown(host, { key: 'ArrowDown' });
-      expect(second).toHaveAttribute('tabindex', '0');
-
-      fireEvent.keyDown(host, { key: 'ArrowDown' });
-      expect(third).toHaveAttribute('tabindex', '0');
-
-      fireEvent.keyDown(host, { key: 'ArrowUp' });
-      expect(second).toHaveAttribute('tabindex', '0');
-    });
-
-    it('vertical: ArrowLeft / ArrowRight are ignored', async () => {
-      const { getAllByRole, container } = await render(verticalTemplate, { imports });
-      const [first, second, third] = getAllByRole('button');
-      first.focus();
-      const host = container.querySelector('[kjRovingTabindex]')!;
-
-      fireEvent.keyDown(host, { key: 'ArrowRight' });
-      expect(first).toHaveAttribute('tabindex', '0');
-      expect(second).toHaveAttribute('tabindex', '-1');
-      expect(third).toHaveAttribute('tabindex', '-1');
-
-      fireEvent.keyDown(host, { key: 'ArrowLeft' });
-      expect(first).toHaveAttribute('tabindex', '0');
-    });
-
-    it('both: all four arrow keys move focus', async () => {
-      const { getAllByRole, container } = await render(bothTemplate, { imports });
-      const [first, second, third] = getAllByRole('button');
-      first.focus();
-      const host = container.querySelector('[kjRovingTabindex]')!;
-
-      fireEvent.keyDown(host, { key: 'ArrowRight' });
-      expect(second).toHaveAttribute('tabindex', '0');
-
-      fireEvent.keyDown(host, { key: 'ArrowDown' });
-      expect(third).toHaveAttribute('tabindex', '0');
-
-      fireEvent.keyDown(host, { key: 'ArrowLeft' });
-      expect(second).toHaveAttribute('tabindex', '0');
-
-      fireEvent.keyDown(host, { key: 'ArrowUp' });
-      expect(first).toHaveAttribute('tabindex', '0');
-    });
-
-    it('horizontal under dir="rtl": ArrowLeft moves forward, ArrowRight moves backward', async () => {
-      const rtlTemplate = `
-        <div dir="rtl">
-          <div kjRovingTabindex="" kjRovingOrientation="horizontal" role="toolbar" aria-label="Formatting">
-            <button kjRovingTabindexItem>Bold</button>
-            <button kjRovingTabindexItem>Italic</button>
-            <button kjRovingTabindexItem>Underline</button>
-          </div>
-        </div>`;
-
-      const { getAllByRole, container } = await render(rtlTemplate, { imports });
-      const [first, second, third] = getAllByRole('button');
-      first.focus();
-      const host = container.querySelector('[kjRovingTabindex]')!;
-
-      fireEvent.keyDown(host, { key: 'ArrowLeft' });
-      expect(second).toHaveAttribute('tabindex', '0');
-      expect(first).toHaveAttribute('tabindex', '-1');
-
-      fireEvent.keyDown(host, { key: 'ArrowLeft' });
-      expect(third).toHaveAttribute('tabindex', '0');
-
-      fireEvent.keyDown(host, { key: 'ArrowRight' });
-      expect(second).toHaveAttribute('tabindex', '0');
-    });
-  });
-});

package/src/a11y/roving-tabindex.ts

@@ -1,153 +0,0 @@
-import {
-  Directive,
-  ElementRef,
-  InjectionToken,
-  contentChildren,
-  effect,
-  forwardRef,
-  inject,
-  input,
-  signal,
-} from '@angular/core';
-
-/** Context token for roving tabindex coordination. */
-export const KJ_ROVING_TABINDEX = new InjectionToken<KjRovingTabindex>(
-  'KjRovingTabindex',
-);
-
-/**
- * Marks an individual item within a `[kjRovingTabindex]` container.
- * Its `tabindex` is managed automatically by the parent directive.
- *
- * @example
- * ```html
- * <button kjRovingTabindexItem>Item</button>
- * ```
- * @doc-category Core/Accessibility
- * @doc
- * @doc-name a11y
- */
-@Directive({
-  selector: '[kjRovingTabindexItem]',
-  standalone: true,
-  host: {
-    '[attr.tabindex]': 'active() ? "0" : "-1"',
-  },
-})
-export class KjRovingTabindexItemDirective {
-  /** @internal */
-  readonly el = inject(ElementRef<HTMLElement>);
-  /** @internal */
-  readonly active = signal(false);
-}
-
-/**
- * Implements the roving tabindex pattern for composite widgets such as toolbars and tab lists.
- * Only one item has `tabindex="0"` at a time; arrow keys move focus between items.
- *
- * @example
- * ```html
- * <div kjRovingTabindex role="toolbar" aria-label="Formatting">
- *   <button kjRovingTabindexItem>Bold</button>
- *   <button kjRovingTabindexItem>Italic</button>
- * </div>
- * ```
- * @doc-category Core/Accessibility
- * @doc
- * @doc-name a11y
- */
-@Directive({
-  selector: '[kjRovingTabindex]',
-  standalone: true,
-  providers: [{ provide: KJ_ROVING_TABINDEX, useExisting: forwardRef(() => KjRovingTabindex) }],
-  host: {
-    '(keydown)': 'onKeydown($event)',
-    '(focusin)': 'onFocusIn($event)',
-  },
-})
-export class KjRovingTabindex {
-  private readonly host = inject(ElementRef<HTMLElement>);
-  private readonly items = contentChildren(KjRovingTabindexItemDirective, {
-    descendants: true,
-  });
-  private readonly activeIndex = signal(0);
-
-  /**
-   * Restricts arrow-key navigation to a single axis.
-   * - `'horizontal'`: only ArrowLeft / ArrowRight move focus.
-   * - `'vertical'`: only ArrowUp / ArrowDown move focus.
-   * - `'both'`: all four arrow keys move focus (default — preserves prior behaviour).
-   *
-   * Under `'horizontal'`, ArrowLeft / ArrowRight are swapped when the host
-   * element resolves to `dir="rtl"`.
-   */
-  readonly kjRovingOrientation = input<'horizontal' | 'vertical' | 'both'>('both');
-
-  constructor() {
-    effect(() => {
-      const all = this.items();
-      all.forEach((item, i) => item.active.set(i === this.activeIndex()));
-    });
-  }
-
-  private resolveRtl(): boolean {
-    const el = this.host.nativeElement;
-    if (typeof getComputedStyle === 'function') {
-      const direction = getComputedStyle(el).direction;
-      if (direction === 'rtl') return true;
-      if (direction === 'ltr') {
-        // Some test environments (jsdom) return the default 'ltr' even when an
-        // ancestor sets `dir="rtl"`. Fall through to attribute lookup.
-      }
-    }
-    const dirHost = el.closest('[dir]') as HTMLElement | null;
-    return dirHost?.dir.toLowerCase() === 'rtl';
-  }
-
-  /** @internal — syncs activeIndex when focus moves into an item programmatically */
-  onFocusIn(event: FocusEvent): void {
-    const all = this.items();
-    const idx = all.findIndex((item) => item.el.nativeElement === event.target);
-    if (idx !== -1) {
-      this.activeIndex.set(idx);
-    }
-  }
-
-  /** @internal */
-  onKeydown(event: KeyboardEvent): void {
-    const all = this.items();
-    if (!all.length) return;
-    let next = this.activeIndex();
-
-    const orientation = this.kjRovingOrientation();
-    const horizontalActive = orientation === 'horizontal' || orientation === 'both';
-    const verticalActive = orientation === 'vertical' || orientation === 'both';
-
-    // Resolve directionality lazily; only matters when horizontal arrows are active.
-    // Prefer computed style; fall back to the nearest `dir` attribute (jsdom does
-    // not propagate ancestor `dir` to computed style in all cases).
-    const isRtl = horizontalActive && this.resolveRtl();
-    const forwardKey = isRtl ? 'ArrowLeft' : 'ArrowRight';
-    const backwardKey = isRtl ? 'ArrowRight' : 'ArrowLeft';
-
-    if (horizontalActive && event.key === forwardKey) {
-      next = (next + 1) % all.length;
-    } else if (horizontalActive && event.key === backwardKey) {
-      next = (next - 1 + all.length) % all.length;
-    } else if (verticalActive && event.key === 'ArrowDown') {
-      next = (next + 1) % all.length;
-    } else if (verticalActive && event.key === 'ArrowUp') {
-      next = (next - 1 + all.length) % all.length;
-    } else if (event.key === 'Home') {
-      next = 0;
-    } else if (event.key === 'End') {
-      next = all.length - 1;
-    } else {
-      return;
-    }
-
-    event.preventDefault();
-    this.activeIndex.set(next);
-    all[next].el.nativeElement.focus();
-  }
-}

package/src/a11y/visually-hidden.spec.ts

@@ -1,34 +0,0 @@
-import { render } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { KjVisuallyHidden } from './visually-hidden';
-
-expect.extend(toHaveNoViolations);
-
-describe('KjVisuallyHidden', () => {
-  it('applies visually-hidden inline styles', async () => {
-    const { container } = await render(
-      `<span kjVisuallyHidden>Screen reader only</span>`,
-      { imports: [KjVisuallyHidden] },
-    );
-    const el = container.querySelector('span')!;
-    const style = el.getAttribute('style') ?? '';
-    expect(style).toContain('position');
-    expect(style).toContain('absolute');
-  });
-
-  it('content remains in the DOM for screen readers', async () => {
-    const { getByText } = await render(
-      `<span kjVisuallyHidden>Screen reader only</span>`,
-      { imports: [KjVisuallyHidden] },
-    );
-    expect(getByText('Screen reader only')).toBeInTheDocument();
-  });
-
-  it('passes axe accessibility audit', async () => {
-    const { container } = await render(
-      `<button><span kjVisuallyHidden>Close dialog</span></button>`,
-      { imports: [KjVisuallyHidden] },
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/a11y/visually-hidden.ts

@@ -1,26 +0,0 @@
-import { Directive } from '@angular/core';
-
-/**
- * Visually hides an element while keeping it accessible to screen readers.
- * Uses the standard visually-hidden CSS technique via inline styles.
- *
- * @example
- * ```html
- * <button>
- *   <kj-icon name="close" />
- *   <span kjVisuallyHidden>Close dialog</span>
- * </button>
- * ```
- * @doc-category Core/Accessibility
- * @doc
- * @doc-name a11y
- */
-@Directive({
-  selector: '[kjVisuallyHidden]',
-  standalone: true,
-  host: {
-    style:
-      'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0',
-  },
-})
-export class KjVisuallyHidden {}

package/src/accordion/accordion.context.ts

@@ -1,44 +0,0 @@
-import { InjectionToken, Signal } from '@angular/core';
-
-/** Accordion mode: `'single'` (one item open at a time) or `'multiple'` (any number open). */
-export type KjAccordionType = 'single' | 'multiple';
-
-/** Context interface for the root accordion directive. */
-export interface KjAccordionContext {
-  /** Set of currently open item values. */
-  readonly openIds: Signal<ReadonlySet<string>>;
-  /** Current mode: single or multiple. */
-  readonly type: Signal<KjAccordionType>;
-  /** Whether opt-in arrow-key roving navigation is enabled. */
-  readonly arrowNavigation: Signal<boolean>;
-  /** Toggle an item by its string value. In single mode, closes others first. */
-  toggle(id: string): void;
-  /** Whether the given item value is currently open. */
-  isOpen(id: string): boolean;
-}
-
-/** Context interface for an individual accordion item directive. */
-export interface KjAccordionItemContext {
-  /** Stable string value identifying the item within the parent accordion. */
-  readonly value: Signal<string>;
-  /** Whether this item is currently expanded. */
-  readonly expanded: Signal<boolean>;
-  /** Whether this item is disabled (toggle is a no-op, trigger announces aria-disabled). */
-  readonly disabled: Signal<boolean>;
-  /** Stable id for the trigger element — `aria-labelledby` target on the content region. */
-  readonly headerId: Signal<string>;
-  /** Stable id for the content region — `aria-controls` target on the trigger. */
-  readonly contentId: Signal<string>;
-  /** Toggle this item's expanded state. No-op when disabled. */
-  toggle(): void;
-  /** Open this item. No-op when disabled. */
-  open(): void;
-  /** Close this item. No-op when disabled. */
-  close(): void;
-}
-
-/** Injection token for the root accordion directive. */
-export const KJ_ACCORDION = new InjectionToken<KjAccordionContext>('KjAccordion');
-
-/** Injection token for an individual accordion item directive. */
-export const KJ_ACCORDION_ITEM = new InjectionToken<KjAccordionItemContext>('KjAccordionItem');