@kouji-ui/core 0.1.1 → 0.1.2

package/src/avatar/avatar-group.context.ts

@@ -1,45 +0,0 @@
-import { InjectionToken, Signal } from '@angular/core';
-
-/** Logical text direction surfaced by the group to its CSS / wrapper. */
-export type KjAvatarGroupDirection = 'ltr' | 'rtl';
-
-/**
- * Shape forwarded from the group to its child avatars as a default.
- * Per-child overrides win.
- */
-export type KjAvatarShape = 'circle' | 'rounded';
-
-/**
- * Shared state surfaced by `KjAvatarGroup` for child avatars (in the wrapper
- * package) and the wrapper template to read.
- *
- * - `size` / `shape` are *defaults* — children may override per-instance.
- * - `direction` mirrors the group's resolved logical direction.
- * - `visibleCount`, `overflowCount`, `total` drive the count-aware
- *   `aria-label` and the wrapper's overflow chip.
- */
-export interface KjAvatarGroupContext {
-  /** Size token forwarded from the group as a default for children. */
-  readonly size: Signal<string | undefined>;
-  /** Shape forwarded from the group as a default for children. */
-  readonly shape: Signal<KjAvatarShape | undefined>;
-  /** Logical text direction observed by the group. */
-  readonly direction: Signal<KjAvatarGroupDirection>;
-  /**
-   * Number of avatars rendered visibly, including the overflow chip when
-   * present.
-   */
-  readonly visibleCount: Signal<number>;
-  /** Number of avatars hidden behind the chip. `0` when no overflow. */
-  readonly overflowCount: Signal<number>;
-  /**
-   * Effective total: `kjTotal` if provided (and not less than the projected
-   * count), otherwise the projected child count.
-   */
-  readonly total: Signal<number>;
-}
-
-/** Injection token for `KjAvatarGroupContext`. */
-export const KJ_AVATAR_GROUP = new InjectionToken<KjAvatarGroupContext>(
-  'KjAvatarGroup',
-);

package/src/avatar/avatar-group.spec.ts

@@ -1,358 +0,0 @@
-import { Component, PLATFORM_ID, inject } from '@angular/core';
-import { render } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-
-import { KjAvatar, KjAvatarFallback } from './avatar';
-import { KjAvatarGroup } from './avatar-group';
-import { KJ_AVATAR_GROUP } from './avatar-group.context';
-
-expect.extend(toHaveNoViolations);
-
-const imports = [KjAvatar, KjAvatarFallback, KjAvatarGroup];
-
-/**
- * Allow Angular's signal-driven `effect()` to run after a query update —
- * tests need a microtask + a macrotask for content-children + writes to
- * settle before asserting on host attributes.
- */
-async function flush(): Promise<void> {
-  await new Promise<void>((resolve) => setTimeout(resolve, 0));
-  await Promise.resolve();
-  await Promise.resolve();
-}
-
-function setHtmlDir(value: 'ltr' | 'rtl' | null): void {
-  if (value === null) {
-    document.documentElement.removeAttribute('dir');
-  } else {
-    document.documentElement.setAttribute('dir', value);
-  }
-}
-
-describe('KjAvatarGroup', () => {
-  afterEach(() => setHtmlDir(null));
-
-  it('enumerates projected children', async () => {
-    const { container } = await render(
-      `<span kjAvatarGroup>
-         <span kjAvatar>A</span>
-         <span kjAvatar>B</span>
-         <span kjAvatar>C</span>
-       </span>`,
-      { imports },
-    );
-    await flush();
-
-    expect(container.querySelectorAll('[kjAvatar]')).toHaveLength(3);
-  });
-
-  it('hides children past kjMax via [hidden] and data-overflow', async () => {
-    const { container } = await render(
-      `<span kjAvatarGroup [kjMax]="2">
-         <span kjAvatar id="a">A</span>
-         <span kjAvatar id="b">B</span>
-         <span kjAvatar id="c">C</span>
-         <span kjAvatar id="d">D</span>
-       </span>`,
-      { imports },
-    );
-    await flush();
-
-    const a = container.querySelector('#a') as HTMLElement;
-    const b = container.querySelector('#b') as HTMLElement;
-    const c = container.querySelector('#c') as HTMLElement;
-    const d = container.querySelector('#d') as HTMLElement;
-
-    expect(a.hasAttribute('hidden')).toBe(false);
-    expect(b.hasAttribute('hidden')).toBe(false);
-    expect(c.hasAttribute('hidden')).toBe(true);
-    expect(c.getAttribute('data-overflow')).toBe('true');
-    expect(d.hasAttribute('hidden')).toBe(true);
-    expect(d.getAttribute('data-overflow')).toBe('true');
-  });
-
-  it('exposes visible / overflow / total signals correctly', async () => {
-    @Component({
-      standalone: true,
-      imports,
-      template: `
-        <span kjAvatarGroup [kjMax]="2">
-          @for (i of items; track i) {
-            <span kjAvatar></span>
-          }
-        </span>`,
-    })
-    class Host {
-      items = [1, 2, 3, 4, 5];
-    }
-
-    const { fixture } = await render(Host);
-    await flush();
-
-    const el = fixture.nativeElement.querySelector(
-      '[kjAvatarGroup]',
-    ) as HTMLElement;
-    expect(el).toBeTruthy();
-
-    // Visible count = min(5, 2) = 2; overflow = 5 - 2 = 3; total = 5.
-    // Verify via the count-aware aria-label and CSS variable as public surfaces.
-    expect(el.getAttribute('aria-label')).toBe('2 of 5 avatars');
-    expect(el.getAttribute('role')).toBe('group');
-    expect(el.style.getPropertyValue('--kj-avatar-group-count')).toBe('2');
-  });
-
-  it('default count-aware aria-label uses "avatars"', async () => {
-    const { container } = await render(
-      `<span kjAvatarGroup [kjMax]="3">
-         <span kjAvatar></span>
-         <span kjAvatar></span>
-         <span kjAvatar></span>
-         <span kjAvatar></span>
-         <span kjAvatar></span>
-       </span>`,
-      { imports },
-    );
-    await flush();
-
-    const el = container.querySelector('[kjAvatarGroup]') as HTMLElement;
-    expect(el.getAttribute('aria-label')).toBe('3 of 5 avatars');
-  });
-
-  it('aria-label uses kjAriaLabel noun and kjTotal override', async () => {
-    const { container } = await render(
-      `<span kjAvatarGroup [kjMax]="3" kjAriaLabel="collaborators" [kjTotal]="42">
-         <span kjAvatar></span>
-         <span kjAvatar></span>
-         <span kjAvatar></span>
-       </span>`,
-      { imports },
-    );
-    await flush();
-
-    const el = container.querySelector('[kjAvatarGroup]') as HTMLElement;
-    expect(el.getAttribute('aria-label')).toBe('3 of 42 collaborators');
-  });
-
-  it('clamps kjTotal upward when smaller than projected child count', async () => {
-    const { container } = await render(
-      `<span kjAvatarGroup [kjMax]="2" [kjTotal]="1">
-         <span kjAvatar></span>
-         <span kjAvatar></span>
-         <span kjAvatar></span>
-       </span>`,
-      { imports },
-    );
-    await flush();
-
-    const el = container.querySelector('[kjAvatarGroup]') as HTMLElement;
-    // Clamped to 3 (the projected count); never reads "2 of 1".
-    expect(el.getAttribute('aria-label')).toBe('2 of 3 avatars');
-  });
-
-  it('omits aria-label entirely when total === 0', async () => {
-    const { container } = await render(
-      `<span kjAvatarGroup [kjMax]="3"></span>`,
-      { imports },
-    );
-    await flush();
-
-    const el = container.querySelector('[kjAvatarGroup]') as HTMLElement;
-    expect(el.hasAttribute('aria-label')).toBe(false);
-  });
-
-  it('aria-label override (kjAriaLabelOverride) wins over count-aware default', async () => {
-    const { container } = await render(
-      `<span kjAvatarGroup [kjMax]="2" kjAriaLabelOverride="Project team">
-         <span kjAvatar></span>
-         <span kjAvatar></span>
-         <span kjAvatar></span>
-       </span>`,
-      { imports },
-    );
-    await flush();
-
-    const el = container.querySelector('[kjAvatarGroup]') as HTMLElement;
-    expect(el.getAttribute('aria-label')).toBe('Project team');
-  });
-
-  it('honours custom kjAriaLabelFormat for i18n', async () => {
-    @Component({
-      standalone: true,
-      imports,
-      template: `
-        <span kjAvatarGroup [kjMax]="2" [kjAriaLabelFormat]="format">
-          <span kjAvatar></span>
-          <span kjAvatar></span>
-          <span kjAvatar></span>
-          <span kjAvatar></span>
-        </span>`,
-    })
-    class Host {
-      format = (v: number, t: number, l: string) =>
-        `${v}/${t} ${l} (FR)`;
-    }
-
-    const { fixture } = await render(Host);
-    await flush();
-
-    const el = fixture.nativeElement.querySelector(
-      '[kjAvatarGroup]',
-    ) as HTMLElement;
-    expect(el.getAttribute('aria-label')).toBe('2/4 avatars (FR)');
-  });
-
-  it('size and shape propagate via KJ_AVATAR_GROUP context', async () => {
-    @Component({
-      selector: 'kj-test-child',
-      standalone: true,
-      template: `<span data-test-child [attr.data-size]="ctx?.size()" [attr.data-shape]="ctx?.shape()"></span>`,
-    })
-    class Child {
-      readonly ctx = inject(KJ_AVATAR_GROUP, { optional: true });
-    }
-
-    @Component({
-      standalone: true,
-      imports: [...imports, Child],
-      template: `
-        <span kjAvatarGroup kjSize="lg" kjShape="rounded">
-          <span kjAvatar><kj-test-child /></span>
-          <span kjAvatar><kj-test-child /></span>
-        </span>`,
-    })
-    class Host {}
-
-    const { container } = await render(Host);
-    await flush();
-
-    const probes = container.querySelectorAll('[data-test-child]');
-    expect(probes.length).toBe(2);
-    probes.forEach((p) => {
-      expect(p.getAttribute('data-size')).toBe('lg');
-      expect(p.getAttribute('data-shape')).toBe('rounded');
-    });
-  });
-
-  it('kjRole controls host role (group / list)', async () => {
-    const { container } = await render(
-      `<span kjAvatarGroup kjRole="list">
-         <span kjAvatar></span>
-         <span kjAvatar></span>
-       </span>`,
-      { imports },
-    );
-    await flush();
-
-    const el = container.querySelector('[kjAvatarGroup]') as HTMLElement;
-    expect(el.getAttribute('role')).toBe('list');
-  });
-
-  it('kjRole=null opts out of the host role attribute', async () => {
-    @Component({
-      standalone: true,
-      imports,
-      template: `
-        <span kjAvatarGroup [kjRole]="null">
-          <span kjAvatar></span>
-        </span>`,
-    })
-    class Host {}
-
-    const { container } = await render(Host);
-    await flush();
-
-    const el = container.querySelector('[kjAvatarGroup]') as HTMLElement;
-    expect(el.hasAttribute('role')).toBe(false);
-  });
-
-  it('LTR stacking writes per-child --kj-avatar-group-stack-order with first child on top', async () => {
-    setHtmlDir('ltr');
-
-    const { container } = await render(
-      `<span kjAvatarGroup [kjMax]="0">
-         <span kjAvatar id="a"></span>
-         <span kjAvatar id="b"></span>
-         <span kjAvatar id="c"></span>
-       </span>`,
-      { imports },
-    );
-    await flush();
-
-    const a = container.querySelector('#a') as HTMLElement;
-    const b = container.querySelector('#b') as HTMLElement;
-    const c = container.querySelector('#c') as HTMLElement;
-
-    // First child highest stack-order in LTR.
-    expect(a.style.getPropertyValue('--kj-avatar-group-stack-order')).toBe('2');
-    expect(b.style.getPropertyValue('--kj-avatar-group-stack-order')).toBe('1');
-    expect(c.style.getPropertyValue('--kj-avatar-group-stack-order')).toBe('0');
-
-    const groupEl = container.querySelector('[kjAvatarGroup]') as HTMLElement;
-    expect(groupEl.getAttribute('data-direction')).toBe('ltr');
-  });
-
-  it('RTL stacking flips so the last DOM child paints on top', async () => {
-    setHtmlDir('rtl');
-
-    const { container } = await render(
-      `<span kjAvatarGroup [kjMax]="0">
-         <span kjAvatar id="a"></span>
-         <span kjAvatar id="b"></span>
-         <span kjAvatar id="c"></span>
-       </span>`,
-      { imports },
-    );
-    await flush();
-    // Direction signal updates after afterNextRender; allow another tick.
-    await flush();
-
-    const a = container.querySelector('#a') as HTMLElement;
-    const c = container.querySelector('#c') as HTMLElement;
-
-    const groupEl = container.querySelector('[kjAvatarGroup]') as HTMLElement;
-    expect(groupEl.getAttribute('data-direction')).toBe('rtl');
-
-    // In RTL the visually-leading face (last DOM child) should paint on
-    // top — so its stack-order is the highest, while the first DOM child
-    // is now visually trailing and paints behind.
-    expect(c.style.getPropertyValue('--kj-avatar-group-stack-order')).toBe('2');
-    expect(a.style.getPropertyValue('--kj-avatar-group-stack-order')).toBe('0');
-  });
-
-  it('SSR safe — no DOM mutations when PLATFORM_ID is "server"', async () => {
-    const { container } = await render(
-      `<span kjAvatarGroup [kjMax]="1">
-         <span kjAvatar id="a"></span>
-         <span kjAvatar id="b"></span>
-         <span kjAvatar id="c"></span>
-       </span>`,
-      {
-        imports,
-        providers: [{ provide: PLATFORM_ID, useValue: 'server' }],
-      },
-    );
-    await flush();
-
-    // On the server we must not write [hidden] or stack-order CSS variables;
-    // those belong to the hydration step.
-    const b = container.querySelector('#b') as HTMLElement;
-    const c = container.querySelector('#c') as HTMLElement;
-    expect(b.hasAttribute('hidden')).toBe(false);
-    expect(c.hasAttribute('hidden')).toBe(false);
-    expect(b.style.getPropertyValue('--kj-avatar-group-stack-order')).toBe('');
-  });
-
-  it('passes axe accessibility audit (default group)', async () => {
-    const { container } = await render(
-      `<span kjAvatarGroup kjAriaLabel="collaborators" [kjMax]="2">
-         <span kjAvatar><span kjAvatarFallback aria-hidden="true">JD</span></span>
-         <span kjAvatar><span kjAvatarFallback aria-hidden="true">AB</span></span>
-         <span kjAvatar><span kjAvatarFallback aria-hidden="true">CD</span></span>
-       </span>`,
-      { imports },
-    );
-    await flush();
-
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/avatar/avatar-group.ts

@@ -1,259 +0,0 @@
-import {
-  Directive,
-  ElementRef,
-  PLATFORM_ID,
-  Signal,
-  computed,
-  contentChildren,
-  effect,
-  inject,
-  input,
-} from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
-
-import { KjDirectionality } from '../primitives/directionality/directionality';
-import { KjAvatar } from './avatar';
-import {
-  KJ_AVATAR_GROUP,
-  KjAvatarGroupContext,
-  KjAvatarGroupDirection,
-  KjAvatarShape,
-} from './avatar-group.context';
-
-/** Format used to compose the count-aware `aria-label`. */
-export type KjAvatarGroupAriaLabelFormat = (
-  visible: number,
-  total: number,
-  label: string,
-) => string;
-
-const DEFAULT_ARIA_LABEL_FORMAT: KjAvatarGroupAriaLabelFormat = (v, t, l) =>
-  `${v} of ${t} ${l}`;
-
-/**
- * Coordinates a horizontally stacked cluster of `KjAvatar` children.
- *
- * Owns:
- * - **Counting** — enumerates the projected `KjAvatar` directives via
- *   `contentChildren` and exposes `visibleCount`, `overflowCount`, and `total`
- *   signals for the wrapper template.
- * - **Overflow hiding (Plan C)** — writes `[hidden]` (and a
- *   `data-overflow="true"` data attribute) on each child past `kjMax`.
- *   Cleared automatically when the child re-enters the visible range.
- * - **ARIA** — applies `role="group"` (or `"list"` / none) and a count-aware
- *   `aria-label` such as `"3 of 8 collaborators"`. Consumers may override the
- *   noun (`kjAriaLabel`) and the entire format function (`kjAriaLabelFormat`),
- *   or pass a static label via the standard `aria-label` attribute on the
- *   host (the host binding only writes when the consumer hasn't).
- * - **RTL-aware stacking** — composes `KjDirectionality` and writes a
- *   per-child `--kj-avatar-group-stack-order` CSS custom property (and the
- *   group-wide `--kj-avatar-group-count` and `--kj-avatar-group-direction`)
- *   so theme CSS can paint first-on-top in either direction without walking
- *   ancestors.
- *
- * The directive renders nothing of its own (no template, no DOM mutations
- * beyond child host attributes / inline custom properties). The wrapper
- * component owns the chip element and the layout CSS.
- *
- * @example
- * ```html
- * <span kjAvatarGroup [kjMax]="3" kjAriaLabel="collaborators">
- *   <span kjAvatar>...</span>
- *   <span kjAvatar>...</span>
- *   <span kjAvatar>...</span>
- *   <span kjAvatar>...</span>
- *   <span kjAvatar>...</span>
- * </span>
- * ```
- * @doc-category Core/Data display
- * @doc
- * @doc-name avatar
- */
-@Directive({
-  selector: '[kjAvatarGroup]',
-  standalone: true,
-  exportAs: 'kjAvatarGroup',
-  providers: [{ provide: KJ_AVATAR_GROUP, useExisting: KjAvatarGroup }],
-  host: {
-    '[attr.role]': 'kjRole()',
-    '[attr.aria-label]': 'resolvedAriaLabel()',
-    '[attr.data-direction]': 'direction()',
-    '[style.--kj-avatar-group-count]': 'visibleCount()',
-    '[style.--kj-avatar-group-direction]': 'direction()',
-  },
-})
-export class KjAvatarGroup implements KjAvatarGroupContext {
-  private readonly platformId = inject(PLATFORM_ID);
-  private readonly directionality = inject(KjDirectionality);
-
-  /**
-   * Maximum number of avatars to show before the overflow chip. Children past
-   * this index are hidden via `[hidden]` and counted toward
-   * `overflowCount`. `0` disables the cap (always show all, no chip).
-   * @default 4
-   */
-  readonly kjMax = input<number>(4);
-
-  /**
-   * Override of the effective total. When provided (and not less than the
-   * projected child count) drives the count-aware `aria-label` and the
-   * overflow count, so consumers can show a *page* of a larger collection
-   * (e.g. server-side pagination).
-   *
-   * If the consumer passes a value smaller than the projected count, the
-   * directive clamps to the projected count to avoid nonsense like `"5 of 3"`.
-   */
-  readonly kjTotal = input<number | undefined>(undefined);
-
-  /**
-   * Default size token forwarded to children via `KJ_AVATAR_GROUP`. Per-child
-   * overrides win.
-   */
-  readonly kjSize = input<string | undefined>(undefined);
-
-  /**
-   * Default shape forwarded to children via `KJ_AVATAR_GROUP`. Per-child
-   * overrides win.
-   * @default 'circle'
-   */
-  readonly kjShape = input<KjAvatarShape | undefined>('circle');
-
-  /** Noun used in the count-aware `aria-label`. */
-  readonly kjAriaLabel = input<string>('avatars');
-
-  /** Formatter for the count-aware `aria-label`. */
-  readonly kjAriaLabelFormat = input<KjAvatarGroupAriaLabelFormat>(
-    DEFAULT_ARIA_LABEL_FORMAT,
-  );
-
-  /**
-   * Host role. `'group'` for a decorative cluster, `'list'` when each child
-   * is wrapped in a `listitem` (e.g. interactive avatars as links), `null`
-   * to opt out entirely.
-   * @default 'group'
-   */
-  readonly kjRole = input<'group' | 'list' | null>('group');
-
-  /**
-   * Per-consumer override for the host `aria-label`. When set, takes
-   * precedence over the count-aware label. `null` opts out of `aria-label`.
-   */
-  readonly kjAriaLabelOverride = input<string | null | undefined>(undefined);
-
-  /**
-   * All `KjAvatar` directives projected into the group, including those
-   * composed via `hostDirectives` on a wrapper component.
-   *
-   * `descendants: true` so wrapping a `<kj-avatar>` in `<a>` (the "stack of
-   * links" use case) still finds the child.
-   */
-  private readonly avatars = contentChildren(KjAvatar, { descendants: true });
-
-  /**
-   * Host elements for each projected `KjAvatar`, queried in parallel with
-   * the directive query so we can write `[hidden]` and CSS variables onto
-   * the right host node without having to expose `ElementRef` on `KjAvatar`.
-   */
-  private readonly avatarHosts = contentChildren(KjAvatar, {
-    descendants: true,
-    read: ElementRef,
-  });
-
-  /** Effective total: `kjTotal` (clamped) or the projected child count. */
-  readonly total: Signal<number> = computed(() => {
-    const childCount = this.avatars().length;
-    const override = this.kjTotal();
-    if (override === undefined) return childCount;
-    return Math.max(override, childCount);
-  });
-
-  /** Number of children rendered visibly (the rest are `[hidden]`). */
-  readonly visibleCount: Signal<number> = computed(() => {
-    const max = this.kjMax();
-    const childCount = this.avatars().length;
-    if (max <= 0) return childCount;
-    return Math.min(childCount, max);
-  });
-
-  /** Number of avatars hidden by the cap. `0` when nothing overflows. */
-  readonly overflowCount: Signal<number> = computed(() => {
-    const max = this.kjMax();
-    if (max <= 0) return 0;
-    return Math.max(0, this.total() - max);
-  });
-
-  /** Logical text direction observed at the document level. */
-  readonly direction: Signal<KjAvatarGroupDirection> = computed(
-    () => this.directionality.current() as KjAvatarGroupDirection,
-  );
-
-  /** Default `aria-label`, omitted when the group is empty. */
-  private readonly countAwareAriaLabel = computed<string | null>(() => {
-    const total = this.total();
-    if (total === 0) return null;
-    return this.kjAriaLabelFormat()(this.visibleCount(), total, this.kjAriaLabel());
-  });
-
-  /**
-   * `aria-label` actually written to the host. Consumer override wins; `null`
-   * opts out of the attribute entirely.
-   */
-  protected readonly resolvedAriaLabel = computed<string | null>(() => {
-    const override = this.kjAriaLabelOverride();
-    if (override !== undefined) return override ?? null;
-    return this.countAwareAriaLabel();
-  });
-
-  /** Read-only signal — exposed for the wrapper / spec ergonomics. */
-  get size(): Signal<string | undefined> {
-    return this.kjSize;
-  }
-
-  /** Read-only signal — exposed for the wrapper / spec ergonomics. */
-  get shape(): Signal<KjAvatarShape | undefined> {
-    return this.kjShape;
-  }
-
-  constructor() {
-    // Plan C from `avatar-group.md`: write `[hidden]` and a per-child stack
-    // order onto each projected avatar's host element. Crosses the directive
-    // boundary by design — the group owns visibility of its overflow items.
-    effect(() => {
-      const hosts = this.avatarHosts();
-      const max = this.kjMax();
-      const dir = this.direction();
-      const visibleCount = this.visibleCount();
-      const isBrowser = isPlatformBrowser(this.platformId);
-      if (!isBrowser) return;
-
-      const total = hosts.length;
-      const cap = max <= 0 ? total : Math.min(max, total);
-
-      hosts.forEach((ref, index) => {
-        const el = ref.nativeElement as HTMLElement | null;
-        if (!el) return;
-
-        const overflow = max > 0 && index >= cap;
-        if (overflow) {
-          el.setAttribute('hidden', '');
-          el.setAttribute('data-overflow', 'true');
-        } else {
-          el.removeAttribute('hidden');
-          el.removeAttribute('data-overflow');
-        }
-
-        // First-on-top in LTR (highest z-index goes to index 0); flipped in
-        // RTL so the visually-leading face — which is now on the right —
-        // still paints on top.
-        const visualIndex =
-          dir === 'rtl' ? Math.max(0, visibleCount - 1 - index) : index;
-        const stackOrder = Math.max(0, visibleCount - 1 - visualIndex);
-        el.style.setProperty(
-          '--kj-avatar-group-stack-order',
-          String(stackOrder),
-        );
-        el.style.setProperty('--kj-avatar-group-index', String(index));
-      });
-    });
-  }
-}

package/src/avatar/avatar.spec.ts

@@ -1,18 +0,0 @@
-import { render } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { KjAvatar, KjAvatarImage, KjAvatarFallback } from './avatar';
-
-expect.extend(toHaveNoViolations);
-
-const imports = [KjAvatar, KjAvatarImage, KjAvatarFallback];
-
-describe('KjAvatar', () => {
-  it('renders container', async () => {
-    const { container } = await render(`<span kjAvatar><img kjAvatarImage src="" alt="JD" /><span kjAvatarFallback>JD</span></span>`, { imports });
-    expect(container.querySelector('[kjAvatar]')).toBeInTheDocument();
-  });
-  it('passes axe audit', async () => {
-    const { container } = await render(`<span kjAvatar><img kjAvatarImage src="/p.jpg" alt="Jane Doe" /><span kjAvatarFallback aria-hidden="true">JD</span></span>`, { imports });
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});