@kouji-ui/components 0.1.1 → 0.1.2

package/src/alert/alert.usage.example.ts

@@ -1,58 +0,0 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { KjButtonComponent } from '../button/button';
-import {
-  KjAlertActionsComponent,
-  KjAlertComponent,
-  KjAlertDescriptionComponent,
-  KjAlertDismissComponent,
-  KjAlertIconComponent,
-  KjAlertTitleComponent,
-} from './alert';
-
-/**
- * Common alert shapes — info, success, error with retry action, and a
- * dismissible warning. Use this as the copy-paste starting point.
- */
-@Component({
-  selector: 'kj-alert-usage-example',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    KjAlertComponent,
-    KjAlertIconComponent,
-    KjAlertTitleComponent,
-    KjAlertDescriptionComponent,
-    KjAlertActionsComponent,
-    KjAlertDismissComponent,
-    KjButtonComponent,
-  ],
-  styles: [`:host { display: flex; flex-direction: column; gap: var(--kj-space-md); }`],
-  template: `
-    <kj-alert kjVariant="info">
-      <kj-alert-icon>i</kj-alert-icon>
-      <kj-alert-title>New theme tokens</kj-alert-title>
-      <kj-alert-description>Try the brutalist preset in your settings.</kj-alert-description>
-    </kj-alert>
-
-    <kj-alert kjVariant="error">
-      <kj-alert-icon>!</kj-alert-icon>
-      <kj-alert-title>Could not save draft</kj-alert-title>
-      <kj-alert-description>Network request timed out.</kj-alert-description>
-      <kj-alert-actions>
-        <kj-button kjSize="sm" (click)="retry()">Retry</kj-button>
-      </kj-alert-actions>
-    </kj-alert>
-
-    @if (show()) {
-      <kj-alert kjVariant="warning" (kjAlertDismissed)="show.set(false)">
-        <kj-alert-icon>!</kj-alert-icon>
-        <kj-alert-description>Storage is 92% full.</kj-alert-description>
-        <kj-alert-dismiss />
-      </kj-alert>
-    }
-  `,
-})
-export class KjAlertUsageExample {
-  readonly show = signal(true);
-  retry(): void { /* re-fetch */ }
-}

package/src/alert/index.ts

@@ -1,8 +0,0 @@
-export {
-  KjAlertComponent,
-  KjAlertIconComponent,
-  KjAlertTitleComponent,
-  KjAlertDescriptionComponent,
-  KjAlertActionsComponent,
-  KjAlertDismissComponent,
-} from './alert';

package/src/avatar/_examples/avatar-group.example.ts

@@ -1,31 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjAvatarGroupComponent } from '../avatar-group';
-import { KjAvatarComponent } from '../avatar';
-
-/**
- * Default usage example for KjAvatarGroupComponent.
- * Stacks four `<kj-avatar>` children with the group's defaults
- * (`kjMax=4`, `kjShape='circle'`, `role="group"`).
- */
-@Component({
-  selector: 'kj-avatar-group-example',
-  standalone: true,
-  imports: [KjAvatarGroupComponent, KjAvatarComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-avatar-group kjAriaLabel="collaborators">
-      <kj-avatar content="AL" alt="Ada Lovelace" />
-      <kj-avatar content="GH" alt="Grace Hopper" />
-      <kj-avatar content="AT" alt="Alan Turing" />
-      <kj-avatar content="KJ" alt="Katherine Johnson" />
-    </kj-avatar-group>
-  `,
-})
-export class KjAvatarGroupExample {}

package/src/avatar/_examples/avatar-group.list.example.ts

@@ -1,45 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjAvatarGroupComponent } from '../avatar-group';
-import { KjAvatarComponent } from '../avatar';
-
-/**
- * Semantic `role="list"` variant: when the group's children are interactive
- * (e.g. links to teammate profiles), set `kjRole="list"` so AT announces a
- * list of items rather than a generic group. Each child anchor carries
- * `role="listitem"` so the listitem semantics survive the wrapping `<a>`.
- */
-@Component({
-  selector: 'kj-avatar-group-list-example',
-  standalone: true,
-  imports: [KjAvatarGroupComponent, KjAvatarComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-      a {
-        display: inline-flex;
-        text-decoration: none;
-        color: inherit;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-avatar-group kjRole="list" kjAriaLabel="teammates">
-      <a role="listitem" href="#ada" aria-label="Ada Lovelace">
-        <kj-avatar content="AL" alt="Ada Lovelace" />
-      </a>
-      <a role="listitem" href="#grace" aria-label="Grace Hopper">
-        <kj-avatar content="GH" alt="Grace Hopper" />
-      </a>
-      <a role="listitem" href="#alan" aria-label="Alan Turing">
-        <kj-avatar content="AT" alt="Alan Turing" />
-      </a>
-      <a role="listitem" href="#katherine" aria-label="Katherine Johnson">
-        <kj-avatar content="KJ" alt="Katherine Johnson" />
-      </a>
-    </kj-avatar-group>
-  `,
-})
-export class KjAvatarGroupListExample {}

package/src/avatar/_examples/avatar-group.overflow.example.ts

@@ -1,33 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjAvatarGroupComponent } from '../avatar-group';
-import { KjAvatarComponent } from '../avatar';
-
-/**
- * Overflow example: seven projected avatars with `kjMax=3` cap show three
- * faces plus a `+4` chip. The count-aware label reads `3 of 7 collaborators`.
- */
-@Component({
-  selector: 'kj-avatar-group-overflow-example',
-  standalone: true,
-  imports: [KjAvatarGroupComponent, KjAvatarComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-avatar-group [kjMax]="3" kjAriaLabel="collaborators">
-      <kj-avatar content="AL" alt="Ada Lovelace" />
-      <kj-avatar content="GH" alt="Grace Hopper" />
-      <kj-avatar content="AT" alt="Alan Turing" />
-      <kj-avatar content="KJ" alt="Katherine Johnson" />
-      <kj-avatar content="MH" alt="Margaret Hamilton" />
-      <kj-avatar content="DK" alt="Donald Knuth" />
-      <kj-avatar content="BL" alt="Barbara Liskov" />
-    </kj-avatar-group>
-  `,
-})
-export class KjAvatarGroupOverflowExample {}

package/src/avatar/_examples/avatar-group.shapes.example.ts

@@ -1,39 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjAvatarGroupComponent } from '../avatar-group';
-import { KjAvatarComponent } from '../avatar';
-
-/**
- * Shape propagation: `kjShape` on the group cascades to children — and to
- * the overflow chip — via the `KJ_AVATAR_GROUP` context. Two groups
- * demonstrate the `'circle'` (default) and `'rounded'` variants without
- * setting `shape` on individual avatars.
- */
-@Component({
-  selector: 'kj-avatar-group-shapes-example',
-  standalone: true,
-  imports: [KjAvatarGroupComponent, KjAvatarComponent],
-  styles: [
-    `
-      :host {
-        display: flex;
-        flex-direction: column;
-        gap: var(--kj-space-md);
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-avatar-group kjShape="circle" kjAriaLabel="circle collaborators">
-      <kj-avatar content="AL" alt="Ada Lovelace" />
-      <kj-avatar content="GH" alt="Grace Hopper" />
-      <kj-avatar content="AT" alt="Alan Turing" />
-    </kj-avatar-group>
-
-    <kj-avatar-group kjShape="rounded" kjAriaLabel="rounded collaborators">
-      <kj-avatar content="AL" alt="Ada Lovelace" />
-      <kj-avatar content="GH" alt="Grace Hopper" />
-      <kj-avatar content="AT" alt="Alan Turing" />
-    </kj-avatar-group>
-  `,
-})
-export class KjAvatarGroupShapesExample {}

package/src/avatar/_examples/avatar-group.sizes.example.ts

@@ -1,44 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjAvatarGroupComponent } from '../avatar-group';
-import { KjAvatarComponent } from '../avatar';
-
-/**
- * Size propagation: `kjSize` on the group cascades to children via the
- * `KJ_AVATAR_GROUP` context. Three groups render at small, medium, and
- * large without setting `size` on each child.
- */
-@Component({
-  selector: 'kj-avatar-group-sizes-example',
-  standalone: true,
-  imports: [KjAvatarGroupComponent, KjAvatarComponent],
-  styles: [
-    `
-      :host {
-        display: flex;
-        flex-direction: column;
-        gap: var(--kj-space-md);
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-avatar-group kjSize="sm" kjAriaLabel="small collaborators">
-      <kj-avatar content="AL" alt="Ada Lovelace" />
-      <kj-avatar content="GH" alt="Grace Hopper" />
-      <kj-avatar content="AT" alt="Alan Turing" />
-    </kj-avatar-group>
-
-    <kj-avatar-group kjSize="md" kjAriaLabel="medium collaborators">
-      <kj-avatar content="AL" alt="Ada Lovelace" />
-      <kj-avatar content="GH" alt="Grace Hopper" />
-      <kj-avatar content="AT" alt="Alan Turing" />
-    </kj-avatar-group>
-
-    <kj-avatar-group kjSize="lg" kjAriaLabel="large collaborators">
-      <kj-avatar content="AL" alt="Ada Lovelace" />
-      <kj-avatar content="GH" alt="Grace Hopper" />
-      <kj-avatar content="AT" alt="Alan Turing" />
-    </kj-avatar-group>
-  `,
-})
-export class KjAvatarGroupSizesExample {}

package/src/avatar/_examples/avatar.default.example.ts

@@ -1,18 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjAvatarComponent } from '../avatar';
-
-@Component({
-  selector: 'kj-avatar-default-example',
-  standalone: true,
-  imports: [KjAvatarComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: ` <kj-avatar content="JD" /> `,
-})
-export class KjAvatarDefaultExample {}

package/src/avatar/_examples/avatar.initials.example.ts

@@ -1,20 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjAvatarComponent } from '../avatar';
-
-@Component({
-  selector: 'kj-avatar-initials-example',
-  standalone: true,
-  imports: [KjAvatarComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-avatar size="lg" src="https://example.invalid/missing.png" alt="Missing" content="NA" />
-  `,
-})
-export class KjAvatarInitialsExample {}

package/src/avatar/_examples/avatar.shapes.example.ts

@@ -1,22 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjAvatarComponent } from '../avatar';
-
-@Component({
-  selector: 'kj-avatar-shapes-example',
-  standalone: true,
-  imports: [KjAvatarComponent],
-  styles: [
-    `
-      :host {
-        display: flex;
-        gap: 0.75rem;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-avatar shape="circle" content="C" />
-    <kj-avatar shape="rounded" content="R" />
-  `,
-})
-export class KjAvatarShapesExample {}

package/src/avatar/_examples/avatar.sizes.example.ts

@@ -1,26 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjAvatarComponent } from '../avatar';
-
-@Component({
-  selector: 'kj-avatar-sizes-example',
-  standalone: true,
-  imports: [KjAvatarComponent],
-  styles: [
-    `
-      :host {
-        display: flex;
-        gap: 0.75rem;
-        align-items: center;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-avatar size="xs" content="XS" />
-    <kj-avatar size="sm" content="SM" />
-    <kj-avatar size="md" content="MD" />
-    <kj-avatar size="lg" content="LG" />
-    <kj-avatar size="xl" content="XL" />
-  `,
-})
-export class KjAvatarSizesExample {}

package/src/avatar/_examples/avatar.with-image.example.ts

@@ -1,20 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjAvatarComponent } from '../avatar';
-
-@Component({
-  selector: 'kj-avatar-with-image-example',
-  standalone: true,
-  imports: [KjAvatarComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-avatar size="lg" src="https://i.pravatar.cc/96?img=12" alt="Jane Doe" content="JD" />
-  `,
-})
-export class KjAvatarWithImageExample {}

package/src/avatar/_examples/index.ts

@@ -1,12 +0,0 @@
-// AUTO-GENERATED by scripts/migrate-examples.mjs
-// One barrel per component folder — used by the docs app as a lazy chunk.
-export { KjAvatarDefaultExample } from './avatar.default.example';
-export { KjAvatarGroupExample } from './avatar-group.example';
-export { KjAvatarGroupListExample } from './avatar-group.list.example';
-export { KjAvatarGroupOverflowExample } from './avatar-group.overflow.example';
-export { KjAvatarGroupShapesExample } from './avatar-group.shapes.example';
-export { KjAvatarGroupSizesExample } from './avatar-group.sizes.example';
-export { KjAvatarInitialsExample } from './avatar.initials.example';
-export { KjAvatarShapesExample } from './avatar.shapes.example';
-export { KjAvatarSizesExample } from './avatar.sizes.example';
-export { KjAvatarWithImageExample } from './avatar.with-image.example';

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

@@ -1,138 +0,0 @@
-import { Component } from '@angular/core';
-import { render } from '@testing-library/angular';
-
-import { KjAvatarComponent } from './avatar';
-import { KjAvatarGroupComponent } from './avatar-group';
-
-const imports = [KjAvatarComponent, KjAvatarGroupComponent];
-
-/**
- * Allow Angular's signal-driven `effect()`s and `contentChildren` queries to
- * settle before the assertions read host attributes. Mirrors the helper used
- * by the core `KjAvatarGroup` spec.
- */
-async function flush(): Promise<void> {
-  await new Promise<void>((resolve) => setTimeout(resolve, 0));
-  await Promise.resolve();
-  await Promise.resolve();
-}
-
-describe('KjAvatarGroupComponent', () => {
-  it('renders projected <kj-avatar> children', async () => {
-    @Component({
-      standalone: true,
-      imports,
-      template: `
-        <kj-avatar-group>
-          <kj-avatar content="A" />
-          <kj-avatar content="B" />
-          <kj-avatar content="C" />
-        </kj-avatar-group>`,
-    })
-    class Host {}
-
-    const { container } = await render(Host);
-    await flush();
-
-    const groupEl = container.querySelector('kj-avatar-group') as HTMLElement;
-    expect(groupEl).toBeTruthy();
-    // The class binding mirrors the wrapper's host class.
-    expect(groupEl.classList.contains('kj-avatar-group')).toBe(true);
-
-    // Three projected avatars + (potentially) the chip. With default kjMax=4
-    // and three children, the chip should NOT render.
-    expect(groupEl.querySelectorAll('kj-avatar')).toHaveLength(3);
-    expect(groupEl.querySelector('.kj-avatar-group-overflow')).toBeNull();
-  });
-
-  it('renders the overflow chip with "+N" when children exceed kjMax', async () => {
-    @Component({
-      standalone: true,
-      imports,
-      template: `
-        <kj-avatar-group [kjMax]="2">
-          <kj-avatar content="A" />
-          <kj-avatar content="B" />
-          <kj-avatar content="C" />
-          <kj-avatar content="D" />
-          <kj-avatar content="E" />
-        </kj-avatar-group>`,
-    })
-    class Host {}
-
-    const { container } = await render(Host);
-    await flush();
-
-    const chip = container.querySelector('.kj-avatar-group-overflow') as HTMLElement;
-    expect(chip).toBeTruthy();
-    // 5 projected children, kjMax=2 → overflow = 3.
-    expect(chip.textContent?.trim()).toBe('+3');
-  });
-
-  it('overflow chip is aria-hidden so it does not duplicate the count-aware label', async () => {
-    @Component({
-      standalone: true,
-      imports,
-      template: `
-        <kj-avatar-group [kjMax]="1">
-          <kj-avatar content="A" />
-          <kj-avatar content="B" />
-          <kj-avatar content="C" />
-        </kj-avatar-group>`,
-    })
-    class Host {}
-
-    const { container } = await render(Host);
-    await flush();
-
-    const chip = container.querySelector('.kj-avatar-group-overflow') as HTMLElement;
-    expect(chip).toBeTruthy();
-    expect(chip.getAttribute('aria-hidden')).toBe('true');
-  });
-
-  it('forwards aliased inputs (kjMax, kjAriaLabel, kjTotal) to the underlying directive', async () => {
-    @Component({
-      standalone: true,
-      imports,
-      template: `
-        <kj-avatar-group [kjMax]="3" kjAriaLabel="collaborators" [kjTotal]="42">
-          <kj-avatar content="A" />
-          <kj-avatar content="B" />
-          <kj-avatar content="C" />
-        </kj-avatar-group>`,
-    })
-    class Host {}
-
-    const { container } = await render(Host);
-    await flush();
-
-    const groupEl = container.querySelector('kj-avatar-group') as HTMLElement;
-    // Count-aware label proves kjAriaLabel + kjTotal reached the directive.
-    expect(groupEl.getAttribute('aria-label')).toBe('3 of 42 collaborators');
-    expect(groupEl.getAttribute('role')).toBe('group');
-
-    // Chip with kjMax=3 and 3 projected (and kjTotal=42) → overflow = 39.
-    const chip = container.querySelector('.kj-avatar-group-overflow') as HTMLElement;
-    expect(chip).toBeTruthy();
-    expect(chip.textContent?.trim()).toBe('+39');
-  });
-
-  it('renders nothing problematic when the group is empty', async () => {
-    @Component({
-      standalone: true,
-      imports,
-      template: `<kj-avatar-group [kjMax]="3"></kj-avatar-group>`,
-    })
-    class Host {}
-
-    const { container } = await render(Host);
-    await flush();
-
-    const groupEl = container.querySelector('kj-avatar-group') as HTMLElement;
-    expect(groupEl).toBeTruthy();
-    // No chip when there is nothing to overflow.
-    expect(container.querySelector('.kj-avatar-group-overflow')).toBeNull();
-    // Empty group omits aria-label entirely (count-aware label suppressed at total === 0).
-    expect(groupEl.hasAttribute('aria-label')).toBe(false);
-  });
-});

package/src/avatar/avatar-group.ts

@@ -1,127 +0,0 @@
-import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, inject } from '@angular/core';
-import { KjAvatarGroup, KJ_AVATAR_GROUP, type KjAvatarGroupAriaLabelFormat, type KjAvatarShape } from '@kouji-ui/core';
-import { KjAvatarComponent } from './avatar';
-
-/**
- * Avatar group wrapper. Stacks projected `<kj-avatar>` children with a
- * count-aware `aria-label`, an overflow chip when `kjMax` is exceeded, and
- * RTL-aware z-index ordering — all handled by the composed `KjAvatarGroup`
- * core directive. The wrapper supplies the chip element and the host
- * `<ng-content/>` slot.
- *
- * The overflow chip is a regular `<kj-avatar>` rendering `'+N'` text; it is
- * `aria-hidden` because the group's count-aware label already conveys
- * totality (e.g. `"3 of 8 collaborators"`), so exposing the chip again would
- * duplicate the announcement.
- *
- * @doc-example Default
- *   The default playground — five stacked avatars with the group's defaults.
- *   @doc-file avatar-group.example.ts
- * @doc-example Usage
- *   The common shape: a small face-pile with an overflow chip, accessible label,
- *   and a list-mode variant for documents-shared screens.
- *   @doc-file avatar-group.usage.example.ts
- * @doc-example Overflow
- *   `kjMax` caps visible avatars; the remainder collapses into a "+N" chip.
- *   @doc-file avatar-group.overflow.example.ts
- * @doc-example Sizes
- *   Group `kjSize` cascades onto every projected `<kj-avatar>` for a uniform pile.
- *   @doc-file avatar-group.sizes.example.ts
- * @doc-example Shapes
- *   Group `kjShape` cascades to children; the +N chip mirrors it for a consistent silhouette.
- *   @doc-file avatar-group.shapes.example.ts
- * @doc-example List
- *   `kjRole="list"` switches to a list landmark — use for "shared by" rows in docs UIs.
- *   @doc-file avatar-group.list.example.ts
- *
- * @doc-aria
- *   aria-label       — Count-aware label like "3 of 8 collaborators"; override via `kjAriaLabelOverride`
- *   role             — Defaults to `img` (face-pile); set `kjRole="list"` for a true list landmark
- *   aria-hidden      — Forced on the +N chip so the count isn't re-announced
- *
- * @doc-touch
- *   Stacked avatars are decorative — they aren't tab stops. Pair the group
- *   with an interactive trigger (button/link) sized ≥ 44×44 when clicking is
- *   meaningful (e.g. opens a collaborator dialog).
- *
- * @doc-a11y
- *   The face-pile is an `img` landmark with a count-aware accessible name so
- *   AT users hear "3 of 8 collaborators" rather than every initial. Switch to
- *   `role="list"` whenever the order/identity of each face matters
- *   semantically. The overflow chip is always `aria-hidden` because the
- *   group's name already conveys totality.
- *
- * @doc-related avatar,badge,tag
- *
- * @doc-css-var
- *   --kj-avatar-size    — Avatar diameter. Sizes (xs/sm/md/lg/xl) override.
- *   --kj-avatar-bg      — Avatar background. Defaults to --kj-bg-field; the +N chip inherits this too.
- *   --kj-avatar-fg      — Avatar foreground (initials, fallback glyph). Defaults to --kj-fg-default.
- *   --kj-avatar-radius  — Corner radius. `circle` shape pins it to 9999px; `rounded` swaps to --kj-radius-box.
- *
- * @doc-category Library/Data display
- * @doc
- * @doc-name avatar
- * @doc-description Themed avatar facepile that stacks avatars with an overflow chip and an accessible count label.
- * @doc-is-main
- */
-@Component({
-  selector: 'kj-avatar-group',
-  standalone: true,
-  hostDirectives: [
-    {
-      directive: KjAvatarGroup,
-      inputs: [
-        'kjMax',
-        'kjTotal',
-        'kjSize',
-        'kjShape',
-        'kjAriaLabel',
-        'kjAriaLabelFormat',
-        'kjRole',
-        'kjAriaLabelOverride',
-      ],
-    },
-  ],
-  imports: [KjAvatarComponent],
-  template: `
-    <ng-content />
-    @if (overflowCount() > 0) {
-      <kj-avatar
-        class="kj-avatar-group-overflow"
-        aria-hidden="true"
-        [content]="overflowLabel()"
-        [shape]="chipShape()"
-      />
-    }
-  `,
-  encapsulation: ViewEncapsulation.None,
-  host: {
-    'class': 'kj-avatar-group',
-  },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjAvatarGroupComponent {
-  /**
-   * Read-only handle to the composed `KjAvatarGroup` directive. The directive
-   * `provide`s itself under `KJ_AVATAR_GROUP`, so injecting the token returns
-   * the same instance and gives us access to `overflowCount`, `shape`, etc.
-   */
-  private readonly group = inject(KJ_AVATAR_GROUP);
-
-  protected readonly overflowCount = this.group.overflowCount;
-
-  protected readonly overflowLabel = computed(() => `+${this.overflowCount()}`);
-
-  /**
-   * Chip shape mirrors the group's default shape so the chip visually
-   * matches the avatars. `<kj-avatar>`'s own `shape` default is `'circle'`,
-   * which is also the group's default — so a missing group shape cleanly
-   * collapses to `'circle'`.
-   */
-  protected readonly chipShape = computed<'circle' | 'rounded'>(
-    () => (this.group.shape() as KjAvatarShape | undefined) ?? 'circle',
-  );
-}
-
-export type { KjAvatarGroupAriaLabelFormat };