@kouji-ui/core 0.0.4 → 0.1.1

package/src/form/form.ts

@@ -1,46 +1,326 @@
-import { Directive, computed, inject, input } from '@angular/core';
-import { KJ_FORM_FIELD, KjFormFieldContext } from './form.context';
+import {
+  Directive,
+  ElementRef,
+  Injector,
+  afterNextRender,
+  booleanAttribute,
+  computed,
+  inject,
+  input,
+  model,
+  output,
+  signal,
+} from '@angular/core';
+import { AbstractControl, FormArray, FormGroup, FormGroupDirective, NgForm } from '@angular/forms';
+import { Observable } from 'rxjs';
+import {
+  InvalidControlInfo,
+  KJ_FORM,
+  KjFormContext,
+  KjFormControlRegistration,
+} from './form.context';
 
 /**
- * Container for a form field. Groups label, input, and error message.
+ * Async submit handler signature accepted by `[kjAsyncSubmit]`. The directive
+ * awaits the returned promise/observable and toggles `submitting` for its
+ * lifetime.
+ */
+export type KjAsyncSubmitHandler<T = unknown> = (
+  value: T,
+) => void | Promise<unknown> | Observable<unknown>;
+
+/**
+ * Coordinator directive applied to a `<form>` element. Owns the submit
+ * pipeline (intercept, validity check, focus-on-first-error, scroll-into-view,
+ * async submitting state, mark-all-as-touched, optional error summary). Defers
+ * to Angular Forms (`FormGroup` / `NgForm`) for validation; this directive is
+ * a coordinator, not a state holder.
+ *
+ * - Emits `(kjSubmit)` only when the form is valid (replaces hand-rolled
+ *   `(ngSubmit)` + `if (form.invalid) return` patterns).
+ * - Emits `(kjInvalidSubmit)` when the user submitted but validity failed,
+ *   useful for analytics.
+ * - When `[kjAsyncSubmit]` is set, awaits its returned `Promise`/`Observable`
+ *   and reflects `aria-busy="true"` / `data-submitting=""` for the lifetime.
+ *
  * @example
  * ```html
- * <div kjFormField [kjFieldInvalid]="ctrl.invalid && ctrl.touched">
- *   <label kjFormLabel for="name">Name</label>
- *   <input id="name" kjInput />
- *   <span kjFormError>Name is required</span>
- * </div>
+ * <form kjForm [formGroup]="form" (kjSubmit)="onSubmit($event)">
+ *   <input formControlName="email" kjInput />
+ *   <button type="submit">Sign in</button>
+ * </form>
  * ```
- * @category Core/Inputs
+ * @doc-category Core/Inputs
+ * @doc
+ * @doc-name form
+ * @doc-description Coordinates form submit with validation, first-error focus, and async submitting state.
+ * @doc-is-main
  */
 @Directive({
-  selector: '[kjFormField]', standalone: true,
-  providers: [{ provide: KJ_FORM_FIELD, useExisting: KjFormField }],
-  host: { '[attr.data-invalid]': 'kjFieldInvalid() ? "" : null' },
+  selector: 'form[kjForm]',
+  standalone: true,
+  exportAs: 'kjForm',
+  providers: [{ provide: KJ_FORM, useExisting: KjForm }],
+  host: {
+    '[attr.aria-busy]': 'submitting() ? "true" : null',
+    '[attr.aria-describedby]': 'errorSummaryId() ?? null',
+    '[attr.data-submitting]': 'submitting() ? "" : null',
+    '[attr.data-invalid]': 'invalid() ? "" : null',
+    '(submit)': 'onNativeSubmit($event)',
+  },
 })
-export class KjFormField implements KjFormFieldContext {
-  /** Whether the field is in an invalid state. */
-  kjFieldInvalid = input<boolean>(false);
-  readonly invalid = computed(() => this.kjFieldInvalid());
+export class KjForm implements KjFormContext {
+  private readonly el = inject<ElementRef<HTMLFormElement>>(ElementRef);
+  private readonly injector = inject(Injector);
+  private readonly ngForm = inject(NgForm, { optional: true, self: true });
+  private readonly formGroupDir = inject(FormGroupDirective, { optional: true, self: true });
+
+  // ── Inputs ───────────────────────────────────────────────────────────
+  /** When `false`, skips moving focus to the first invalid control on invalid submit. */
+  readonly kjFocusOnError = input(true, { transform: booleanAttribute });
+  /** When `false`, does not call `scrollIntoView` on the focused control. */
+  readonly kjScrollOnError = input(true, { transform: booleanAttribute });
+  /** Forwarded to `scrollIntoView({ behavior })`. Auto-downgrades to `'auto'` under `prefers-reduced-motion`. */
+  readonly kjScrollBehavior = input<ScrollBehavior>('smooth');
+  /** Forwarded to `scrollIntoView({ block })`. */
+  readonly kjScrollBlock = input<ScrollLogicalPosition>('center');
+  /** When `true` (default), calls `markAllAsTouched()` before validity check so all errors show together. */
+  readonly kjMarkAllAsTouchedOnSubmit = input(true, { transform: booleanAttribute });
+  /** When `true`, calls `form.reset()` after a successful async submit resolves. */
+  readonly kjResetOnSuccess = input(false, { transform: booleanAttribute });
+  /** Optional async submit handler. When set, the directive awaits its result and toggles `submitting`. */
+  readonly kjAsyncSubmit = input<KjAsyncSubmitHandler | undefined>(undefined);
+
+  // ── Outputs ──────────────────────────────────────────────────────────
+  /** Emits the form value when the user submits and the form is valid. */
+  readonly kjSubmit = output<unknown>();
+  /** Emits the FormGroup when the user submits but validity fails. */
+  readonly kjInvalidSubmit = output<FormGroup>();
+
+  // ── Models / state ───────────────────────────────────────────────────
+  /** Two-way bindable submitting flag. When unbound, the directive owns it internally. */
+  readonly kjSubmitting = model(false);
+
+  private readonly _submitted = signal(false);
+  private readonly _invalid = signal(false);
+  private readonly _invalidControls = signal<readonly InvalidControlInfo[]>([]);
+  private readonly _errorSummaryId = signal<string | null>(null);
+  private readonly registry = new Map<string, KjFormControlRegistration>();
+  private prefersReducedMotion = false;
+
+  // ── Public surface (KjFormContext) ───────────────────────────────────
+  readonly form = computed<FormGroup | null>(() => {
+    if (this.formGroupDir) return this.formGroupDir.form;
+    if (this.ngForm) return this.ngForm.form;
+    return null;
+  });
+  readonly submitting = computed(() => this.kjSubmitting());
+  readonly submitted = this._submitted.asReadonly();
+  readonly invalid = this._invalid.asReadonly();
+  readonly invalidControls = this._invalidControls.asReadonly();
+  readonly errorSummaryId = this._errorSummaryId.asReadonly();
+
+  constructor() {
+    afterNextRender(() => {
+      try {
+        this.prefersReducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
+      } catch {
+        this.prefersReducedMotion = false;
+      }
+    });
+  }
+
+  registerControl(reg: KjFormControlRegistration): () => void {
+    this.registry.set(reg.path, reg);
+    return () => {
+      const cur = this.registry.get(reg.path);
+      if (cur === reg) this.registry.delete(reg.path);
+    };
+  }
+
+  /** Internal: called by `KjFormErrorSummary` to advertise its `id` to the form. */
+  setErrorSummaryId(id: string | null): void {
+    this._errorSummaryId.set(id);
+  }
+
+  /** Imperative submit — equivalent to dispatching a `submit` event on the host. */
+  submit(): void {
+    this.el.nativeElement.requestSubmit();
+  }
+
+  /** @internal — host listener target. */
+  onNativeSubmit(event: Event): void {
+    event.preventDefault();
+    // Drop submit attempts while a previous submission is still in flight.
+    if (this.submitting()) return;
+
+    const form = this.form();
+    this._submitted.set(true);
+
+    if (!form) {
+      // No Angular forms binding — log a dev-mode warning and bail out.
+      if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+        console.warn(
+          '[KjForm] <form kjForm> has no `[formGroup]` or `ngForm` binding. The directive is a coordinator over Angular Forms and needs one to function.',
+        );
+      }
+      return;
+    }
+
+    if (this.kjMarkAllAsTouchedOnSubmit()) {
+      form.markAllAsTouched();
+    }
+
+    if (form.invalid) {
+      this._invalid.set(true);
+      const invalidControls = collectInvalidControls(form);
+      this._invalidControls.set(this.attachLabels(invalidControls));
+      this.kjInvalidSubmit.emit(form);
+      this.handleInvalidSubmit(invalidControls);
+      return;
+    }
+
+    this._invalid.set(false);
+    this._invalidControls.set([]);
+
+    const handler = this.kjAsyncSubmit();
+    if (handler) {
+      this.runAsyncSubmit(handler, form);
+    } else {
+      this.kjSubmit.emit(form.value);
+    }
+  }
+
+  // ── Internals ────────────────────────────────────────────────────────
+
+  private attachLabels(invalid: ReadonlyArray<{ path: string; control: AbstractControl }>): InvalidControlInfo[] {
+    return invalid.map((entry) => {
+      const reg = this.registry.get(entry.path);
+      return { ...entry, label: reg?.label ?? humanizePath(entry.path) };
+    });
+  }
+
+  private handleInvalidSubmit(invalid: ReadonlyArray<{ path: string }>): void {
+    if (!this.kjFocusOnError() || invalid.length === 0) return;
+    const first = invalid[0];
+    const reg = this.registry.get(first.path);
+    const target = reg?.element ?? this.fallbackQuery(first.path);
+    if (!target) return;
+    try {
+      target.focus({ preventScroll: !this.kjScrollOnError() });
+    } catch {
+      // Some hosts (SSR/jsdom) may not implement focus options — ignore.
+      target.focus?.();
+    }
+    if (this.kjScrollOnError()) {
+      const behavior = this.prefersReducedMotion ? 'auto' : this.kjScrollBehavior();
+      target.scrollIntoView?.({ block: this.kjScrollBlock(), behavior });
+    }
+  }
+
+  private fallbackQuery(path: string): HTMLElement | null {
+    const root = this.el.nativeElement;
+    const escaped = cssEscape(path);
+    return (
+      root.querySelector<HTMLElement>(`[formcontrolname="${escaped}"]`) ??
+      root.querySelector<HTMLElement>(`[ng-reflect-name="${escaped}"]`) ??
+      null
+    );
+  }
+
+  private runAsyncSubmit(handler: KjAsyncSubmitHandler, form: FormGroup): void {
+    let result: ReturnType<KjAsyncSubmitHandler>;
+    this.kjSubmitting.set(true);
+    try {
+      result = handler(form.value);
+    } catch (err) {
+      this.kjSubmitting.set(false);
+      throw err;
+    }
+    if (result instanceof Promise) {
+      result.then(
+        () => this.afterAsync(form, true),
+        () => this.afterAsync(form, false),
+      );
+      // Also emit the synchronous (kjSubmit) for consumers that use both shapes.
+      this.kjSubmit.emit(form.value);
+      return;
+    }
+    if (isObservable(result)) {
+      const sub = result.subscribe({
+        complete: () => this.afterAsync(form, true),
+        error: () => this.afterAsync(form, false),
+      });
+      // Defensive: if the observable completes synchronously, the subscribe
+      // call already cleaned us up. Otherwise this no-op preserves cleanup
+      // behaviour (we don't track for unsubscription beyond completion).
+      void sub;
+      this.kjSubmit.emit(form.value);
+      return;
+    }
+    // Sync handler — release the flag immediately and emit.
+    this.kjSubmitting.set(false);
+    this.kjSubmit.emit(form.value);
+  }
+
+  private afterAsync(form: FormGroup, success: boolean): void {
+    this.kjSubmitting.set(false);
+    if (success && this.kjResetOnSuccess()) {
+      form.reset();
+      this._submitted.set(false);
+      this._invalid.set(false);
+      this._invalidControls.set([]);
+    }
+  }
 }
 
-/**
- * Label element within a form field.
- * @category Core/Inputs
- */
-@Directive({
-  selector: '[kjFormLabel]', standalone: true,
-  host: { '[attr.data-invalid]': 'ctx.invalid() ? "" : null' },
-})
-export class KjFormLabel { readonly ctx = inject(KJ_FORM_FIELD); }
+// ─── Helpers ──────────────────────────────────────────────────────────
 
-/**
- * Error message element. Visible only when field is invalid.
- * @example `<span kjFormError>Email is invalid</span>`
- * @category Core/Inputs
- */
-@Directive({
-  selector: '[kjFormError]', standalone: true,
-  host: { role: 'alert', 'aria-live': 'polite', '[attr.hidden]': '!ctx.invalid() ? "" : null' },
-})
-export class KjFormError { readonly ctx = inject(KJ_FORM_FIELD); }
+/** Walks a `FormGroup` / `FormArray` tree depth-first, returning invalid leaves. */
+function collectInvalidControls(
+  root: AbstractControl,
+): ReadonlyArray<{ path: string; control: AbstractControl }> {
+  const out: { path: string; control: AbstractControl }[] = [];
+  const walk = (ctrl: AbstractControl, path: string): void => {
+    if (ctrl instanceof FormGroup) {
+      for (const [name, child] of Object.entries(ctrl.controls)) {
+        walk(child, path ? `${path}.${name}` : name);
+      }
+      return;
+    }
+    if (ctrl instanceof FormArray) {
+      ctrl.controls.forEach((child, i) => walk(child, `${path}.${i}`));
+      return;
+    }
+    if (ctrl.invalid) {
+      out.push({ path, control: ctrl });
+    }
+  };
+  walk(root, '');
+  return out;
+}
+
+/** Converts `'address.street'` → `'Address street'` for fallback labels. */
+function humanizePath(path: string): string {
+  if (!path) return '';
+  const last = path.split('.').pop() ?? path;
+  const words = last.replace(/([A-Z])/g, ' $1').replace(/[_-]+/g, ' ').trim();
+  return words.charAt(0).toUpperCase() + words.slice(1);
+}
+
+/** Type guard for RxJS observable. Avoids a hard dep on `isObservable` in tests. */
+function isObservable(value: unknown): value is Observable<unknown> {
+  return (
+    !!value &&
+    typeof value === 'object' &&
+    typeof (value as { subscribe?: unknown }).subscribe === 'function'
+  );
+}
+
+/** Minimal CSS.escape polyfill for `formcontrolname` attribute selectors. */
+function cssEscape(value: string): string {
+  if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {
+    return CSS.escape(value);
+  }
+  return value.replace(/[^a-zA-Z0-9_-]/g, (ch) => `\\${ch}`);
+}

package/src/form/index.ts

@@ -1,2 +1,11 @@
-export { KjFormField, KjFormLabel, KjFormError } from './form';
-export { KJ_FORM_FIELD, type KjFormFieldContext } from './form.context';
+export { KjFormField, KjFormLabel, KjFormError } from './form-field';
+export { KJ_FORM_FIELD, type KjFormFieldContext } from './form-field.context';
+
+export { KjForm, type KjAsyncSubmitHandler } from './form';
+export { KjFormErrorSummary } from './form-error-summary';
+export {
+  KJ_FORM,
+  type KjFormContext,
+  type KjFormControlRegistration,
+  type InvalidControlInfo,
+} from './form.context';

package/src/icon/E2E.md

@@ -0,0 +1,14 @@
+# Icon — E2E coverage notes
+
+The core icon layer has no consumer-visible UI in this session (no Lucide
+adapter, no example refactor). The directive-level integration tests in
+`icon.directive.spec.ts` cover the end-to-end path through DI:
+
+- Eager registration via `provideIcons` → directive renders the registered value.
+- Async loader path → directive renders nothing while pending, then re-renders on success.
+- Decorative vs meaningful a11y modes → axe-clean.
+- Mode switching (svg vs font) → correct CSS variable wrapping and `data-kj-icon-mode`.
+- Selector restriction → directive only attaches to `span` and `i` hosts; ignores other tags.
+
+Browser-level E2E lands with the Lucide adapter follow-up, when there's a
+visible component to drive.

package/src/icon/icon.css

@@ -0,0 +1,40 @@
+/* packages/core/src/icon/icon.css
+ *
+ * Renders icons set up by `KjIconDirective`. The directive writes:
+ *   --kj-icon            → CSS-ready value (`url("...")` or `"glyph"`)
+ *   data-kj-icon-mode    → "svg" | "font"
+ *
+ * SVG / CSS-mask mode (default): uses `mask-image` + `currentColor`.
+ *   Works for any monochrome SVG including data: URIs.
+ * Font mode: uses pseudo-element `content`. Consumers must load the icon
+ *   font and (optionally) set `--kj-icon-font` on a parent.
+ */
+
+.kj-icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+.kj-icon[data-kj-icon-mode='svg'] {
+  background-color: currentColor;
+  mask-image: var(--kj-icon);
+  -webkit-mask-image: var(--kj-icon);
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+}
+
+.kj-icon[data-kj-icon-mode='font'] {
+  font-family: var(--kj-icon-font, inherit);
+}
+
+.kj-icon[data-kj-icon-mode='font']::before {
+  content: var(--kj-icon);
+}

package/src/icon/icon.directive.spec.ts

@@ -0,0 +1,198 @@
+import { render } from '@testing-library/angular';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { describe, expect, it } from 'vitest';
+import { KjIconDirective } from './icon.directive';
+import { provideIcons, provideIconLoader } from './icon.providers';
+
+expect.extend(toHaveNoViolations);
+
+describe('KjIconDirective — selector', () => {
+  it('attaches to <i> hosts', async () => {
+    const { container } = await render(`<i [kjIcon]="'settings'"></i>`, {
+      imports: [KjIconDirective],
+      providers: [provideIcons({ settings: 'url("a")' })],
+    });
+    const host = container.querySelector('i')!;
+    expect(host.classList.contains('kj-icon')).toBe(true);
+    expect(host.getAttribute('data-kj-icon-mode')).toBe('svg');
+  });
+
+  it('does NOT attach to disallowed hosts (e.g. <div>)', async () => {
+    // Static `kjIcon` attribute (no binding) — Angular only matches the
+    // directive against the host element's tag, not the attribute binding.
+    const { container } = await render(`<div kjIcon="settings"></div>`, {
+      imports: [KjIconDirective],
+      providers: [provideIcons({ settings: 'url("a")' })],
+    });
+    const host = container.querySelector('div')!;
+    expect(host.classList.contains('kj-icon')).toBe(false);
+    expect(host.hasAttribute('data-kj-icon-mode')).toBe(false);
+  });
+});
+
+describe('KjIconDirective — svg mode (decorative default)', () => {
+  it('writes --kj-icon and data-kj-icon-mode="svg"', async () => {
+    const { container } = await render(`<span [kjIcon]="'settings'"></span>`, {
+      imports: [KjIconDirective],
+      providers: [provideIcons({ settings: 'url("a")' })],
+    });
+    const host = container.querySelector('span')!;
+    expect(host.getAttribute('data-kj-icon-mode')).toBe('svg');
+    expect(host.style.getPropertyValue('--kj-icon')).toBe('url("a")');
+  });
+
+  it('applies the .kj-icon class', async () => {
+    const { container } = await render(`<span [kjIcon]="'settings'"></span>`, {
+      imports: [KjIconDirective],
+      providers: [provideIcons({ settings: 'url("a")' })],
+    });
+    expect(container.querySelector('span')!.classList.contains('kj-icon')).toBe(true);
+  });
+
+  it('default = decorative: aria-hidden="true", no role, no aria-label', async () => {
+    const { container } = await render(`<span [kjIcon]="'settings'"></span>`, {
+      imports: [KjIconDirective],
+      providers: [provideIcons({ settings: 'url("a")' })],
+    });
+    const host = container.querySelector('span')!;
+    expect(host.getAttribute('aria-hidden')).toBe('true');
+    expect(host.hasAttribute('role')).toBe(false);
+    expect(host.hasAttribute('aria-label')).toBe(false);
+  });
+});
+
+describe('KjIconDirective — meaningful mode (kjIconLabel)', () => {
+  it('removes aria-hidden, sets role="img" and aria-label', async () => {
+    const { container } = await render(
+      `<span [kjIcon]="'alert'" [kjIconLabel]="'Warning'"></span>`,
+      {
+        imports: [KjIconDirective],
+        providers: [provideIcons({ alert: 'url("a")' })],
+      },
+    );
+    const host = container.querySelector('span')!;
+    expect(host.hasAttribute('aria-hidden')).toBe(false);
+    expect(host.getAttribute('role')).toBe('img');
+    expect(host.getAttribute('aria-label')).toBe('Warning');
+  });
+});
+
+describe('KjIconDirective — color tokens', () => {
+  it('inherits color by default (no inline color style)', async () => {
+    const { container } = await render(`<span [kjIcon]="'x'"></span>`, {
+      imports: [KjIconDirective],
+      providers: [provideIcons({ x: 'url("a")' })],
+    });
+    expect(container.querySelector('span')!.getAttribute('style') ?? '').not.toContain('color:');
+  });
+
+  it('writes color: var(--kj-color-icon-{token}) for non-inherit', async () => {
+    const { container } = await render(
+      `<span [kjIcon]="'x'" [kjIconColor]="'danger'"></span>`,
+      {
+        imports: [KjIconDirective],
+        providers: [provideIcons({ x: 'url("a")' })],
+      },
+    );
+    const styleAttr = container.querySelector('span')!.getAttribute('style') ?? '';
+    expect(styleAttr).toContain('color: var(--kj-color-icon-danger)');
+  });
+
+  it('"inherit" color writes no inline color', async () => {
+    const { container } = await render(
+      `<span [kjIcon]="'x'" [kjIconColor]="'inherit'"></span>`,
+      {
+        imports: [KjIconDirective],
+        providers: [provideIcons({ x: 'url("a")' })],
+      },
+    );
+    expect(container.querySelector('span')!.getAttribute('style') ?? '').not.toContain('color:');
+  });
+});
+
+describe('KjIconDirective — size tokens', () => {
+  it('writes font-size: var(--kj-icon-size-{token})', async () => {
+    const { container } = await render(
+      `<span [kjIcon]="'x'" [kjIconSize]="'lg'"></span>`,
+      {
+        imports: [KjIconDirective],
+        providers: [provideIcons({ x: 'url("a")' })],
+      },
+    );
+    const styleAttr = container.querySelector('span')!.getAttribute('style') ?? '';
+    expect(styleAttr).toContain('font-size: var(--kj-icon-size-lg)');
+  });
+});
+
+describe('KjIconDirective — font mode', () => {
+  it('reflects data-kj-icon-mode="font" for @font.* names', async () => {
+    const { container } = await render(
+      `<span [kjIcon]="'@font.fa-cog'"></span>`,
+      {
+        imports: [KjIconDirective],
+        providers: [provideIcons({ '@font.fa-cog': '"\\f013"' })],
+      },
+    );
+    const host = container.querySelector('span')!;
+    expect(host.getAttribute('data-kj-icon-mode')).toBe('font');
+    expect(host.style.getPropertyValue('--kj-icon')).toBe('"\\f013"');
+  });
+});
+
+describe('KjIconDirective — loader pending', () => {
+  it('renders no --kj-icon value while async load is pending', async () => {
+    const neverResolves = () =>
+      new Promise<string>(() => {/* hangs forever */});
+    const { container } = await render(`<span [kjIcon]="'missing'"></span>`, {
+      imports: [KjIconDirective],
+      providers: [provideIconLoader(neverResolves)],
+    });
+    const host = container.querySelector('span')!;
+    expect(host.style.getPropertyValue('--kj-icon')).toBe('');
+  });
+
+  it('updates --kj-icon once loader resolves', async () => {
+    let resolveLoad!: (v: string) => void;
+    const loader = (_n: string) =>
+      new Promise<string>((res) => {
+        resolveLoad = res;
+      });
+    const { container, fixture } = await render(
+      `<span [kjIcon]="'settings'"></span>`,
+      {
+        imports: [KjIconDirective],
+        providers: [provideIconLoader(loader)],
+      },
+    );
+    const host = container.querySelector('span')!;
+    expect(host.style.getPropertyValue('--kj-icon')).toBe('');
+
+    resolveLoad('url("loaded")');
+    await Promise.resolve();
+    await Promise.resolve();
+    fixture.detectChanges();
+
+    expect(host.style.getPropertyValue('--kj-icon')).toBe('url("loaded")');
+  });
+});
+
+describe('KjIconDirective — a11y audits', () => {
+  it('decorative icon passes axe', async () => {
+    const { container } = await render(`<span [kjIcon]="'settings'"></span>`, {
+      imports: [KjIconDirective],
+      providers: [provideIcons({ settings: 'url("a")' })],
+    });
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it('meaningful icon passes axe', async () => {
+    const { container } = await render(
+      `<span [kjIcon]="'alert'" [kjIconLabel]="'Warning'"></span>`,
+      {
+        imports: [KjIconDirective],
+        providers: [provideIcons({ alert: 'url("a")' })],
+      },
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});