@kouji-ui/core 0.1.1 → 0.1.3

package/src/form/form.ts

@@ -1,326 +0,0 @@
-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';
-
-/**
- * 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
- * <form kjForm [formGroup]="form" (kjSubmit)="onSubmit($event)">
- *   <input formControlName="email" kjInput />
- *   <button type="submit">Sign in</button>
- * </form>
- * ```
- * @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: '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 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([]);
-    }
-  }
-}
-
-// ─── Helpers ──────────────────────────────────────────────────────────
-
-/** 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,11 +0,0 @@
-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

@@ -1,14 +0,0 @@
-# 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.directive.spec.ts

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

package/src/icon/icon.directive.ts

@@ -1,113 +0,0 @@
-import { Directive, computed, input } from '@angular/core';
-import { getIconMode } from './icon.mode';
-import { injectKjIconResolver } from './icon.resolver';
-import type { KjIconColor, KjIconSize } from './icon.types';
-
-/**
- * Renders an icon on its host element via CSS custom properties. Owns icon
- * accessibility (decorative by default; meaningful when `kjIconLabel` is set).
- *
- * @example
- * ```html
- * <span [kjIcon]="'settings'"></span>
- * <span [kjIcon]="'alert-triangle'" [kjIconLabel]="'Warning'"></span>
- * <span [kjIcon]="'check'" [kjIconColor]="'success'" [kjIconSize]="'lg'"></span>
- * ```
- *
- * @doc-example Gallery
- *   Browseable Lucide icon grid with a substring filter. Click any tile to
- *   copy its `<i kjIcon="…">` snippet.
- *   @doc-file ../../../components/src/icon/icon.gallery.example.ts
- * @doc-example Usage
- *   Common icon shapes — decorative inline, meaningful with a label, sized
- *   variants, and semantic color tokens.
- *   @doc-file ../../../components/src/icon/icon.usage.example.ts
- *
- * @doc-keyboard
- *   None — the icon directive is non-interactive. Place inside a focusable parent (button/link) for activation semantics.
- *
- * @doc-aria
- *   aria-hidden          — Set to "true" by default (decorative). Removed when [kjIconLabel] is provided
- *   role="img"           — Set when [kjIconLabel] is provided (meaningful icon)
- *   aria-label           — Bound to [kjIconLabel] when provided
- *   data-kj-icon-mode    — Mirrors the resolved mode ("svg" | "font") for theme CSS
- *
- * @doc-css-var
- *   --kj-icon            — CSS-ready resolved icon value (a url() for svg mode or a quoted glyph for font mode). Set by the directive.
- *   --kj-icon-font       — Font family used in font mode. Consumers set this on a parent when shipping icon fonts.
- *   --kj-color-icon-*    — Foreground color tokens for [kjIconColor] (muted/primary/success/warning/danger/info).
- *   --kj-icon-size-*     — Em-relative size tokens for [kjIconSize] (xs/sm/md/lg/xl).
- *
- * @doc-touch
- *   The icon is layout-only and does not require a 44×44 target on its own.
- *   When the icon is the sole label of an interactive control, the parent
- *   (`kj-button kjSize="icon"`, `<a>`, etc.) must meet WCAG 2.5.5.
- *
- * @doc-a11y
- *   Decorative by default — `aria-hidden="true"` keeps the icon silent for
- *   AT. Pass `[kjIconLabel]` only when the icon conveys meaning that is not
- *   duplicated in adjacent text; this swaps in `role="img"` and the label.
- *   Color tokens map to `--kj-color-icon-{token}` so theme palettes can
- *   retarget per-mode without API churn.
- *
- * @doc-related button,link,badge
- *
- * @doc-category Core/Icon
- * @doc
- * @doc-name icon
- * @doc-description Renders an accessible icon on its host element by name with color and size tokens.
- * @doc-is-main
- */
-@Directive({
-  selector: 'span[kjIcon], i[kjIcon]',
-  standalone: true,
-  host: {
-    class: 'kj-icon',
-    '[style.--kj-icon]': 'iconValue()',
-    '[style.color]': 'colorVar()',
-    '[style.font-size]': 'sizeVar()',
-    '[attr.data-kj-icon-mode]': 'mode()',
-    '[attr.aria-hidden]': 'ariaHidden()',
-    '[attr.role]': 'roleAttr()',
-    '[attr.aria-label]': 'ariaLabelAttr()',
-  },
-})
-export class KjIconDirective {
-  private readonly resolve = injectKjIconResolver();
-
-  /** Icon name. Names starting with `@font.` use font mode. */
-  readonly kjIcon = input.required<string>();
-
-  /**
-   * Accessible name. When set, the icon is treated as meaningful:
-   * `role="img"`, `aria-label` set, `aria-hidden` removed. When unset
-   * (the default), the icon is decorative and `aria-hidden="true"`.
-   */
-  readonly kjIconLabel = input<string | null>(null);
-
-  /** Semantic color token. Default `null` means inherit (CSS `currentColor`). */
-  readonly kjIconColor = input<KjIconColor | null>(null);
-
-  /** Size token. Default `null` means inherit from surrounding text. */
-  readonly kjIconSize = input<KjIconSize | null>(null);
-
-  protected readonly mode = computed(() => getIconMode(this.kjIcon()));
-  protected readonly iconValue = computed(() => this.resolve(this.kjIcon()));
-
-  protected readonly ariaHidden = computed(() =>
-    this.kjIconLabel() ? null : 'true',
-  );
-  protected readonly roleAttr = computed(() =>
-    this.kjIconLabel() ? 'img' : null,
-  );
-  protected readonly ariaLabelAttr = computed(() => this.kjIconLabel());
-
-  protected readonly colorVar = computed(() => {
-    const c = this.kjIconColor();
-    return c && c !== 'inherit' ? `var(--kj-color-icon-${c})` : null;
-  });
-  protected readonly sizeVar = computed(() => {
-    const s = this.kjIconSize();
-    return s ? `var(--kj-icon-size-${s})` : null;
-  });
-}