@kouji-ui/core 0.0.4 → 0.1.2

package/src/popover/popover.spec.ts

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

package/src/popover/popover.ts

@@ -1,124 +0,0 @@
-import { Directive, inject, input, signal } from '@angular/core';
-import { KJ_POPOVER, KjPopoverContext, type KjPopoverSide, type KjPopoverAlign } from './popover.context';
-
-let _popoverIdCounter = 0;
-
-/**
- * Root popover container. Manages open state, ARIA wiring, and click-outside dismissal.
- * Pairs with `[kjPopoverTrigger]` and `[kjPopoverContent]`.
- *
- * Click outside or Escape closes the popover. Clicking the trigger toggles it.
- * `aria-expanded` and `aria-controls` are automatically set on the trigger.
- *
- * @example
- * ```html
- * <div kjPopover>
- *   <button kjPopoverTrigger>Options</button>
- *   <div kjPopoverContent>
- *     <p>Popover body</p>
- *     <button kjPopoverClose>Done</button>
- *   </div>
- * </div>
- * ```
- * @doc
- *  @doc-example Basic
- *    @doc-theme default
- *      @doc-file popover.example.ts
- *    @doc-theme retro
- *      @doc-file popover.retro.example.ts
- *    @doc-theme finance
- *      @doc-file popover.finance.example.ts
- * @category Core/Overlays
- */
-@Directive({
-  selector: '[kjPopover]',
-  standalone: true,
-  providers: [{ provide: KJ_POPOVER, useExisting: KjPopover }],
-  exportAs: 'kjPopover',
-})
-export class KjPopover implements KjPopoverContext {
-  /** Preferred side for the popover panel. Used via `data-side` for CSS. Defaults to `'bottom'`. */
-  kjPopoverSide = input<KjPopoverSide>('bottom');
-  /** Alignment along the cross-axis. Used via `data-align` for CSS. Defaults to `'start'`. */
-  kjPopoverAlign = input<KjPopoverAlign>('start');
-
-  readonly open = signal(false);
-  readonly popoverId = `kj-popover-${++_popoverIdCounter}`;
-
-  toggle(): void {
-    this.open.update(v => !v);
-  }
-
-  hide(): void {
-    this.open.set(false);
-  }
-}
-
-/**
- * Trigger button that toggles the popover. Automatically sets `aria-expanded`
- * and `aria-controls` on the host element.
- *
- * @category Core/Overlays
- */
-@Directive({
-  selector: '[kjPopoverTrigger]',
-  standalone: true,
-  host: {
-    '[attr.aria-expanded]': 'ctx.open().toString()',
-    '[attr.aria-haspopup]': '"dialog"',
-    '[attr.aria-controls]': 'ctx.popoverId',
-    // stopPropagation prevents the document:click on kjPopoverContent from immediately closing
-    '(click)': '$event.stopPropagation(); ctx.toggle()',
-  },
-})
-export class KjPopoverTrigger {
-  readonly ctx = inject(KJ_POPOVER);
-}
-
-/**
- * Popover content panel. Hidden when closed. Uses `hidden` attribute for
- * accessibility-compliant visibility. Click-outside and Escape both dismiss it.
- *
- * Clicks inside the panel are stopped so they don't bubble to the document listener.
- *
- * @category Core/Overlays
- */
-@Directive({
-  selector: '[kjPopoverContent]',
-  standalone: true,
-  host: {
-    '[attr.id]': 'ctx.popoverId',
-    '[attr.hidden]': '!ctx.open() ? "" : null',
-    '[attr.data-side]': 'ctx.kjPopoverSide()',
-    '[attr.data-align]': 'ctx.kjPopoverAlign()',
-    // Prevent clicks inside from closing the popover
-    '(click)': '$event.stopPropagation()',
-    // Close on Escape
-    '(document:keydown.escape)': 'ctx.open() && ctx.hide()',
-    // Close on any click outside (trigger stopPropagation prevents self-close)
-    '(document:click)': 'ctx.open() && ctx.hide()',
-  },
-})
-export class KjPopoverContent {
-  readonly ctx = inject(KJ_POPOVER);
-}
-
-/**
- * Closes the parent popover when clicked. Place inside `[kjPopoverContent]`.
- *
- * @example
- * ```html
- * <button kjPopoverClose>Done</button>
- * ```
- * @category Core/Overlays
- */
-@Directive({
-  selector: '[kjPopoverClose]',
-  standalone: true,
-  host: {
-    '(click)': 'ctx.hide()',
-  },
-})
-export class KjPopoverClose {
-  readonly ctx = inject(KJ_POPOVER);
-}

package/src/primitives/forms/form-control.spec.ts

@@ -1,59 +0,0 @@
-import { Component } from '@angular/core';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { render } from '@testing-library/angular';
-import { toHaveNoViolations } from 'jest-axe';
-import { KjFormControl } from './form-control';
-
-expect.extend(toHaveNoViolations);
-
-@Component({
-  standalone: true,
-  imports: [KjFormControl, ReactiveFormsModule],
-  template: `<input kjFormControl [formControl]="ctrl" (input)="onInput($event)" (blur)="onBlur()" />`,
-})
-class TestHostComponent {
-  ctrl = new FormControl('');
-  formCtrl!: KjFormControl;
-  onInput(_e: Event): void {
-    // will be wired by the directive consumer pattern
-  }
-  onBlur(): void {}
-}
-
-describe('KjFormControl', () => {
-  it('registers as NG_VALUE_ACCESSOR so formControl binding works', async () => {
-    const { container } = await render(TestHostComponent);
-    expect(container.querySelector('input')).toBeInTheDocument();
-  });
-
-  it('writeValue updates the value signal', async () => {
-    const { fixture } = await render(TestHostComponent);
-    const directive = fixture.debugElement.children[0].injector.get(KjFormControl);
-    directive.writeValue('hello');
-    expect(directive.value()).toBe('hello');
-  });
-
-  it('setDisabledState updates the disabled signal', async () => {
-    const { fixture } = await render(TestHostComponent);
-    const directive = fixture.debugElement.children[0].injector.get(KjFormControl);
-    directive.setDisabledState(true);
-    expect(directive.disabled()).toBe(true);
-  });
-
-  it('notifyChange updates value and calls onChange', async () => {
-    const { fixture } = await render(TestHostComponent);
-    const directive = fixture.debugElement.children[0].injector.get(KjFormControl);
-    let emitted: unknown;
-    directive.registerOnChange((v) => { emitted = v; });
-    directive.notifyChange('test');
-    expect(directive.value()).toBe('test');
-    expect(emitted).toBe('test');
-  });
-
-  it('notifyTouched marks touched', async () => {
-    const { fixture } = await render(TestHostComponent);
-    const directive = fixture.debugElement.children[0].injector.get(KjFormControl);
-    directive.notifyTouched();
-    expect(directive.touched()).toBe(true);
-  });
-});

package/src/primitives/forms/form-control.ts

@@ -1,90 +0,0 @@
-import { Directive, forwardRef, signal } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-/**
- * Shared ControlValueAccessor primitive. Compose via `hostDirectives` on any
- * form input directive (KjInput, KjCheckbox, etc.) to wire
- * Angular reactive forms and template-driven forms automatically.
- *
- * The host directive calls `notifyChange(value)` on user input and
- * `notifyTouched()` on blur. The directive handles all CVA plumbing.
- *
- * @example
- * ```ts
- * @Directive({
- *   selector: '[kjInput]',
- *   hostDirectives: [KjFormControl],
- *   host: {
- *     '(input)': 'formCtrl.notifyChange($event.target.value)',
- *     '(blur)':  'formCtrl.notifyTouched()',
- *   },
- * })
- * export class KjInput {
- *   readonly formCtrl = inject(KjFormControl);
- * }
- * ```
- * @category Core/Primitives
- */
-@Directive({
-  selector: '[kjFormControl]',
-  standalone: true,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => KjFormControl),
-      multi: true,
-    },
-  ],
-})
-export class KjFormControl implements ControlValueAccessor {
-  /** The current form value, kept in sync with the Angular forms model. */
-  readonly value = signal<unknown>(undefined);
-
-  /** Whether the control is disabled by the Angular forms layer. */
-  readonly disabled = signal<boolean>(false);
-
-  /** Whether the control has been touched (blurred at least once). */
-  readonly touched = signal<boolean>(false);
-
-  private _onChange?: (value: unknown) => void;
-  private _onTouched?: () => void;
-
-  /** @internal — called by Angular forms */
-  writeValue(val: unknown): void {
-    this.value.set(val);
-  }
-
-  /** @internal — called by Angular forms */
-  registerOnChange(fn: (value: unknown) => void): void {
-    this._onChange = fn;
-  }
-
-  /** @internal — called by Angular forms */
-  registerOnTouched(fn: () => void): void {
-    this._onTouched = fn;
-  }
-
-  /** @internal — called by Angular forms */
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled.set(isDisabled);
-  }
-
-  /**
-   * Call this when the user changes the control's value.
-   * Updates the value signal and notifies Angular forms.
-   * @param val - The new value.
-   */
-  notifyChange(val: unknown): void {
-    this.value.set(val);
-    this._onChange?.(val);
-  }
-
-  /**
-   * Call this when the user blurs the control.
-   * Marks the control as touched.
-   */
-  notifyTouched(): void {
-    this.touched.set(true);
-    this._onTouched?.();
-  }
-}

package/src/primitives/forms/index.ts

@@ -1 +0,0 @@
-export { KjFormControl } from './form-control';

package/src/primitives/index.ts

@@ -1,3 +0,0 @@
-export * from './interaction/index';
-export * from './forms/index';
-export * from './overlay/index';

package/src/primitives/interaction/disabled.spec.ts

@@ -1,47 +0,0 @@
-import { render } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { KjDisabled } from './disabled';
-
-expect.extend(toHaveNoViolations);
-
-describe('KjDisabled', () => {
-  it('sets aria-disabled="true" when disabled', async () => {
-    const { container } = await render(
-      `<button kjDisabled [kjDisabled]="true">Submit</button>`,
-      { imports: [KjDisabled] },
-    );
-    expect(container.querySelector('button')).toHaveAttribute('aria-disabled', 'true');
-  });
-
-  it('sets data-disabled attribute when disabled', async () => {
-    const { container } = await render(
-      `<button kjDisabled [kjDisabled]="true">Submit</button>`,
-      { imports: [KjDisabled] },
-    );
-    expect(container.querySelector('button')).toHaveAttribute('data-disabled', '');
-  });
-
-  it('removes aria-disabled when not disabled', async () => {
-    const { container } = await render(
-      `<button kjDisabled [kjDisabled]="false">Submit</button>`,
-      { imports: [KjDisabled] },
-    );
-    expect(container.querySelector('button')).not.toHaveAttribute('aria-disabled');
-  });
-
-  it('defaults to not disabled', async () => {
-    const { container } = await render(
-      `<button kjDisabled>Submit</button>`,
-      { imports: [KjDisabled] },
-    );
-    expect(container.querySelector('button')).not.toHaveAttribute('aria-disabled');
-  });
-
-  it('passes axe accessibility audit', async () => {
-    const { container } = await render(
-      `<button kjDisabled [kjDisabled]="true">Submit</button>`,
-      { imports: [KjDisabled] },
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/primitives/interaction/disabled.ts

@@ -1,24 +0,0 @@
-import { Directive, input } from '@angular/core';
-
-/**
- * Applies disabled state to any element via ARIA and data attributes.
- * Compose via `hostDirectives` on other directives to add disabled behavior.
- *
- * @example
- * ```html
- * <button kjButton [kjDisabled]="isLoading()">Submit</button>
- * ```
- * @category Core/Primitives
- */
-@Directive({
-  selector: '[kjDisabled]',
-  standalone: true,
-  host: {
-    '[attr.aria-disabled]': 'disabled() ? "true" : null',
-    '[attr.data-disabled]': 'disabled() ? "" : null',
-  },
-})
-export class KjDisabled {
-  /** Whether the element is disabled. Reflects via `aria-disabled` and `data-disabled`. */
-  readonly disabled = input<boolean>(false, { alias: 'kjDisabled' });
-}

package/src/primitives/interaction/focus-ring.spec.ts

@@ -1,62 +0,0 @@
-import { render, fireEvent } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { KjFocusRing } from './focus-ring';
-
-expect.extend(toHaveNoViolations);
-
-describe('KjFocusRing', () => {
-  it('adds data-focus-visible on focus when last interaction was keyboard', async () => {
-    const { container } = await render(
-      `<button kjFocusRing>Click me</button>`,
-      { imports: [KjFocusRing] },
-    );
-    const btn = container.querySelector('button')!;
-    // No prior pointerdown — _lastWasPointer is false, so focus should be visible.
-    fireEvent.focus(btn);
-    expect(btn).toHaveAttribute('data-focus-visible', '');
-  });
-
-  it('does not add data-focus-visible on focus after pointer interaction', async () => {
-    const { container } = await render(
-      `<button kjFocusRing>Click me</button>`,
-      { imports: [KjFocusRing] },
-    );
-    const btn = container.querySelector('button')!;
-    // Simulate pointer interaction, then focus.
-    fireEvent.pointerDown(document);
-    fireEvent.focus(btn);
-    expect(btn).not.toHaveAttribute('data-focus-visible');
-  });
-
-  it('removes data-focus-visible on blur', async () => {
-    const { container } = await render(
-      `<button kjFocusRing>Click me</button>`,
-      { imports: [KjFocusRing] },
-    );
-    const btn = container.querySelector('button')!;
-    fireEvent.focus(btn);
-    fireEvent.blur(btn);
-    expect(btn).not.toHaveAttribute('data-focus-visible');
-  });
-
-  it('restores data-focus-visible after keydown followed by focus', async () => {
-    const { container } = await render(
-      `<button kjFocusRing>Click me</button>`,
-      { imports: [KjFocusRing] },
-    );
-    const btn = container.querySelector('button')!;
-    // First simulate pointer (marks _lastWasPointer = true), then keyboard (resets it).
-    fireEvent.pointerDown(document);
-    fireEvent.keyDown(document);
-    fireEvent.focus(btn);
-    expect(btn).toHaveAttribute('data-focus-visible', '');
-  });
-
-  it('passes axe accessibility audit', async () => {
-    const { container } = await render(
-      `<button kjFocusRing>Click me</button>`,
-      { imports: [KjFocusRing] },
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/primitives/interaction/focus-ring.ts

@@ -1,57 +0,0 @@
-import { Directive, DestroyRef, ElementRef, afterNextRender, inject, signal } from '@angular/core';
-import { PLATFORM_ID } from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
-
-/**
- * Tracks focus-visible state using native PointerEvents and keyboard interaction.
- * Sets `data-focus-visible` only when the element receives focus via keyboard.
- * Compose via `hostDirectives` to add focus-ring behavior to interactive elements.
- *
- * @example
- * ```html
- * <button kjFocusRing>Focusable button</button>
- * ```
- * @category Core/Primitives
- */
-@Directive({
-  selector: '[kjFocusRing]',
-  standalone: true,
-  host: {
-    '[attr.data-focus-visible]': 'focusVisible() ? "" : null',
-  },
-})
-export class KjFocusRing {
-  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef);
-  private readonly destroyRef = inject(DestroyRef);
-  private readonly platformId = inject(PLATFORM_ID);
-
-  private readonly _focusVisible = signal(false);
-
-  /** Whether the element currently has visible focus (keyboard-initiated). */
-  readonly focusVisible = this._focusVisible.asReadonly();
-
-  private _lastWasPointer = false;
-
-  constructor() {
-    afterNextRender(() => {
-      if (!isPlatformBrowser(this.platformId)) return;
-
-      const onKeydown = () => { this._lastWasPointer = false; };
-      const onPointerdown = () => { this._lastWasPointer = true; };
-      const onFocus = () => { this._focusVisible.set(!this._lastWasPointer); };
-      const onBlur = () => { this._focusVisible.set(false); };
-
-      document.addEventListener('keydown', onKeydown, true);
-      document.addEventListener('pointerdown', onPointerdown, true);
-      this.el.nativeElement.addEventListener('focus', onFocus);
-      this.el.nativeElement.addEventListener('blur', onBlur);
-
-      this.destroyRef.onDestroy(() => {
-        document.removeEventListener('keydown', onKeydown, true);
-        document.removeEventListener('pointerdown', onPointerdown, true);
-        this.el.nativeElement.removeEventListener('focus', onFocus);
-        this.el.nativeElement.removeEventListener('blur', onBlur);
-      });
-    });
-  }
-}

package/src/primitives/interaction/index.ts

@@ -1,2 +0,0 @@
-export { KjDisabled } from './disabled';
-export { KjFocusRing } from './focus-ring';

package/src/primitives/overlay/index.ts

@@ -1 +0,0 @@
-export { KjOverlayService, KjOverlayRef } from './overlay';

package/src/primitives/overlay/overlay.spec.ts

@@ -1,90 +0,0 @@
-import { Component, TemplateRef, ViewChild, ViewContainerRef, inject, OnInit } from '@angular/core';
-import { render } from '@testing-library/angular';
-import { KjOverlayService, KjOverlayRef } from './overlay';
-
-describe('KjOverlayService', () => {
-  it('can be injected', async () => {
-    @Component({ standalone: true, template: '' })
-    class TestComponent {
-      readonly svc = inject(KjOverlayService);
-    }
-    const { fixture } = await render(TestComponent);
-    expect(fixture.componentInstance.svc).toBeTruthy();
-  });
-
-  it('createFromTemplate returns a KjOverlayRef with isOpen=false', async () => {
-    @Component({
-      standalone: true,
-      template: '<ng-template #tpl><div>overlay content</div></ng-template>',
-    })
-    class TestComponent implements OnInit {
-      @ViewChild('tpl', { static: true }) tpl!: TemplateRef<unknown>;
-      readonly svc = inject(KjOverlayService);
-      readonly vcr = inject(ViewContainerRef);
-      ref!: KjOverlayRef;
-      ngOnInit() { this.ref = this.svc.createFromTemplate(this.tpl, this.vcr); }
-    }
-    const { fixture } = await render(TestComponent);
-    expect(fixture.componentInstance.ref.isOpen()).toBe(false);
-    fixture.componentInstance.ref.dispose();
-  });
-
-  it('open() sets isOpen to true', async () => {
-    @Component({
-      standalone: true,
-      template: '<ng-template #tpl><div>overlay</div></ng-template>',
-    })
-    class TestComponent implements OnInit {
-      @ViewChild('tpl', { static: true }) tpl!: TemplateRef<unknown>;
-      readonly svc = inject(KjOverlayService);
-      readonly vcr = inject(ViewContainerRef);
-      ref!: KjOverlayRef;
-      ngOnInit() { this.ref = this.svc.createFromTemplate(this.tpl, this.vcr); }
-    }
-    const { fixture } = await render(TestComponent);
-    const ref = fixture.componentInstance.ref;
-    ref.open();
-    expect(ref.isOpen()).toBe(true);
-    ref.dispose();
-  });
-
-  it('close() sets isOpen to false', async () => {
-    @Component({
-      standalone: true,
-      template: '<ng-template #tpl><div>overlay</div></ng-template>',
-    })
-    class TestComponent implements OnInit {
-      @ViewChild('tpl', { static: true }) tpl!: TemplateRef<unknown>;
-      readonly svc = inject(KjOverlayService);
-      readonly vcr = inject(ViewContainerRef);
-      ref!: KjOverlayRef;
-      ngOnInit() { this.ref = this.svc.createFromTemplate(this.tpl, this.vcr); }
-    }
-    const { fixture } = await render(TestComponent);
-    const ref = fixture.componentInstance.ref;
-    ref.open();
-    ref.close();
-    expect(ref.isOpen()).toBe(false);
-    ref.dispose();
-  });
-
-  it('dispose() removes the overlay container from document.body', async () => {
-    @Component({
-      standalone: true,
-      template: '<ng-template #tpl><div>overlay</div></ng-template>',
-    })
-    class TestComponent implements OnInit {
-      @ViewChild('tpl', { static: true }) tpl!: TemplateRef<unknown>;
-      readonly svc = inject(KjOverlayService);
-      readonly vcr = inject(ViewContainerRef);
-      ref!: KjOverlayRef;
-      ngOnInit() { this.ref = this.svc.createFromTemplate(this.tpl, this.vcr); }
-    }
-    const { fixture } = await render(TestComponent);
-    const ref = fixture.componentInstance.ref;
-    ref.open();
-    expect(document.body.querySelector('[data-kj-overlay]')).toBeTruthy();
-    ref.dispose();
-    expect(document.body.querySelector('[data-kj-overlay]')).toBeNull();
-  });
-});