@kouji-ui/core 0.1.1 → 0.1.2

package/src/primitives/list/filterable-list.spec.ts

@@ -1,114 +0,0 @@
-// packages/core/src/primitives/list/filterable-list.spec.ts
-import { TestBed } from '@angular/core/testing';
-import { signal, type WritableSignal } from '@angular/core';
-import { describe, it, expect, beforeEach } from 'vitest';
-import { KjFilterableList } from './filterable-list';
-import type { KjFilterFn } from './tokens';
-import type { KjListItem } from './item';
-
-function fakeItem(id: string, label: string, keywords: readonly string[] = []): KjListItem<unknown> {
-  const _visible = signal(true);
-  const _posInSet = signal<number | null>(null);
-  const _setSize = signal<number | null>(null);
-  return {
-    id,
-    label: () => label,
-    haystacks: () => [label, ...keywords],
-    disabled: () => false,
-    visible: _visible,
-    setVisible: (v: boolean) => _visible.set(v),
-    posInSet: _posInSet,
-    setSize: _setSize,
-  } as unknown as KjListItem<unknown>;
-}
-
-describe('KjFilterableList', () => {
-  let items: WritableSignal<readonly KjListItem<unknown>[]>;
-  let svc: KjFilterableList;
-  let query: WritableSignal<string>;
-  let filterFn: WritableSignal<KjFilterFn>;
-  let shouldFilter: WritableSignal<boolean>;
-  let autoActivateFirst: WritableSignal<boolean>;
-
-  beforeEach(() => {
-    items = signal<readonly KjListItem<unknown>[]>([
-      fakeItem('1', 'Apple'),
-      fakeItem('2', 'Banana'),
-      fakeItem('3', 'Apricot'),
-    ]);
-    query = signal('');
-    filterFn = signal<KjFilterFn>((q, hs) => {
-      if (!q) return 1;
-      const needle = q.toLowerCase();
-      return hs.some(h => h.toLowerCase().includes(needle)) ? 1 : 0;
-    });
-    shouldFilter = signal(true);
-    autoActivateFirst = signal(true);
-
-    TestBed.configureTestingModule({
-      providers: [KjFilterableList],
-    });
-    svc = TestBed.inject(KjFilterableList);
-    svc.bind({ items, query, filterFn, shouldFilter, autoActivateFirst });
-    TestBed.flushEffects();
-  });
-
-  it('default substring filter — empty query returns all items', () => {
-    expect(svc.visibleItems().length).toBe(3);
-  });
-
-  it('substring filter narrows results when query changes', () => {
-    query.set('ap');
-    TestBed.flushEffects();
-    expect(svc.visibleItems().map(i => i.id)).toEqual(['1', '3']);
-  });
-
-  it('marks filtered-out items as not visible via setVisible(false)', () => {
-    query.set('ap');
-    TestBed.flushEffects();
-    const all = items();
-    expect(all[0].visible()).toBe(true);   // Apple
-    expect(all[1].visible()).toBe(false);  // Banana
-    expect(all[2].visible()).toBe(true);   // Apricot
-  });
-
-  it('isEmpty signal flips on no-result query', () => {
-    expect(svc.isEmpty()).toBe(false);
-    query.set('zzz');
-    TestBed.flushEffects();
-    expect(svc.isEmpty()).toBe(true);
-  });
-
-  it('shouldFilter=false bypasses filter and shows all', () => {
-    query.set('zzz');
-    shouldFilter.set(false);
-    TestBed.flushEffects();
-    expect(svc.visibleItems().length).toBe(3);
-  });
-
-  it('custom filter fn applied when the bound signal updates', () => {
-    filterFn.set((q, hs) => hs.some(h => h.endsWith(q)) ? 1 : 0);
-    query.set('cot');
-    TestBed.flushEffects();
-    expect(svc.visibleItems().map(i => i.id)).toEqual(['3']);
-  });
-
-  it('stamps posInSet/setSize on visible items, clears them on hidden items', () => {
-    query.set('ap');
-    TestBed.flushEffects();
-    const all = items();
-    expect(all[0].posInSet()).toBe(1);
-    expect(all[0].setSize()).toBe(2);
-    expect(all[1].posInSet()).toBeNull();
-    expect(all[2].posInSet()).toBe(2);
-  });
-
-  it('announcement signal returns "N results" / "No results"', () => {
-    query.set('ap');
-    TestBed.flushEffects();
-    expect(svc.announcement()).toBe('2 results');
-    query.set('zzz');
-    TestBed.flushEffects();
-    expect(svc.announcement()).toBe('No results');
-  });
-});

package/src/primitives/list/filterable-list.ts

@@ -1,126 +0,0 @@
-// packages/core/src/primitives/list/filterable-list.ts
-import { Injectable, type Signal, computed, effect, signal } from '@angular/core';
-import type { KjFilterFn } from './tokens';
-import type { KjListItem } from './item';
-
-const defaultSubstring: KjFilterFn = (q, hs) => {
-  if (!q) return 1;
-  const needle = q.toLowerCase();
-  return hs.some(h => h.toLowerCase().includes(needle)) ? 1 : 0;
-};
-
-const EMPTY_ITEMS = signal<readonly KjListItem<unknown>[]>([]);
-
-/**
- * Filter / search state for a list-style consumer (KjCombobox,
- * KjCommandPalette). Reads its items source + filter inputs through
- * {@link bind}, so no DI lookup is needed at construction (which sidesteps
- * the cyclic dep that arises when the root provides itself under
- * `KJ_LIST_NAVIGATOR_CONFIG` and `KjFilterableList` together).
- *
- * Side effects (via `effect`):
- * - Calls `item.setVisible(bool)` on every item to reflect filter state.
- * - Stamps `item.posInSet` / `item.setSize` for visible items; clears
- *   them to `null` for hidden items.
- *
- * Exposes `visibleItems`, `visibleCount`, `isEmpty`, plus a human
- * `announcement()` signal consumers wire into a `kjLiveRegion` so
- * WCAG 4.1.3 (Status Messages) is honored.
- *
- * @doc-category Core/Primitives
- */
-@Injectable()
-export class KjFilterableList<T = unknown> {
-  /**
-   * Source signals. Replaced wholesale by {@link bind} so the consumer's
-   * reactive inputs become the canonical state. `bind` MUST be called
-   * from the consumer's constructor, before any downstream consumer
-   * (e.g. KjListNavigator) subscribes to `visibleItems`.
-   */
-  private _items: Signal<readonly KjListItem<T>[]> = EMPTY_ITEMS as Signal<readonly KjListItem<T>[]>;
-  private _query: Signal<string>              = signal('');
-  private _filterFn: Signal<KjFilterFn>       = signal(defaultSubstring);
-  private _shouldFilter: Signal<boolean>      = signal(true);
-  private _autoActivateFirst: Signal<boolean> = signal(true);
-
-  /** Current query string. */
-  readonly query = () => this._query();
-
-  /** Items passing the current filter. */
-  readonly visibleItems = computed<readonly KjListItem<T>[]>(() => {
-    const all = this._items();
-    if (!this._shouldFilter()) return all;
-    const q = this._query();
-    const fn = this._filterFn();
-    return all.filter(i => fn(q, i.haystacks()) > 0);
-  });
-
-  /** Count of visible items. */
-  readonly visibleCount = computed(() => this.visibleItems().length);
-
-  /** True when no items match the current filter. */
-  readonly isEmpty = computed(() => this.visibleCount() === 0);
-
-  /**
-   * Human-readable status string for `aria-live` regions.
-   * Returns `'N results'` or `'No results'`. Wire to `kjLiveRegion`
-   * to satisfy WCAG 4.1.3 Status Messages.
-   */
-  readonly announcement = computed(() =>
-    this.isEmpty() ? 'No results' : `${this.visibleCount()} results`,
-  );
-
-  /**
-   * Read-only view of the auto-activate-first toggle. When `true`,
-   * consumers should activate the first visible item on each query change.
-   * This service does NOT activate items itself; the consumer reads it.
-   */
-  readonly autoActivateFirst = () => this._autoActivateFirst();
-
-  /**
-   * Bind consumer-owned source signals. Each is optional; unbound keys
-   * keep their previous source (defaulting to constants on first construct).
-   *
-   * Replaces the imperative setter-in-effect pattern when the consumer
-   * holds the canonical reactive state (typically a `model()` /
-   * `input()` / `contentChildren()`). Call once in the consumer's
-   * constructor before any downstream `computed` / `effect` subscribes
-   * to `visibleItems`.
-   */
-  bind(sources: {
-    readonly items?:             Signal<readonly KjListItem<T>[]>;
-    readonly query?:             Signal<string>;
-    readonly filterFn?:          Signal<KjFilterFn>;
-    readonly shouldFilter?:      Signal<boolean>;
-    readonly autoActivateFirst?: Signal<boolean>;
-  }): void {
-    if (sources.items)             this._items = sources.items;
-    if (sources.query)             this._query = sources.query;
-    if (sources.filterFn)          this._filterFn = sources.filterFn;
-    if (sources.shouldFilter)      this._shouldFilter = sources.shouldFilter;
-    if (sources.autoActivateFirst) this._autoActivateFirst = sources.autoActivateFirst;
-  }
-
-  constructor() {
-    // Toggle visibility + stamp posInSet/setSize on each item whenever
-    // the filtered visible set changes.
-    effect(() => {
-      const all = this._items();
-      const visible = this.visibleItems() as readonly KjListItem<unknown>[];
-      const visibleSet = new Set(visible.map(v => v.id));
-      const total = visible.length;
-      let i = 0;
-      for (const item of all) {
-        const isVisible = visibleSet.has(item.id);
-        item.setVisible(isVisible);
-        if (isVisible) {
-          item.posInSet.set(++i);
-          item.setSize.set(total);
-        } else {
-          item.posInSet.set(null);
-          item.setSize.set(null);
-        }
-      }
-    });
-  }
-}

package/src/primitives/list/group.spec.ts

@@ -1,99 +0,0 @@
-// packages/core/src/primitives/list/group.spec.ts
-import { By } from '@angular/platform-browser';
-import { render } from '@testing-library/angular';
-import { describe, it, expect } from 'vitest';
-import { KjListGroup, KjListGroupLabel, KjListSeparator } from './group';
-import { KjListItem } from './item';
-
-describe('KjListGroup', () => {
-  it('sets role=group and a stable id on the host', async () => {
-    const { container } = await render(
-      `<div kjListGroup></div>`,
-      { imports: [KjListGroup] },
-    );
-    const el = container.querySelector('[kjListGroup]')!;
-    expect(el.getAttribute('role')).toBe('group');
-    expect(el.id).toMatch(/^kj-list-group-\d+$/);
-  });
-
-  it('renders without aria-labelledby when no label is projected', async () => {
-    const { container } = await render(
-      `<div kjListGroup>
-         <div kjListItem [kjItemValue]="'a'">A</div>
-       </div>`,
-      { imports: [KjListGroup, KjListItem] },
-    );
-    const el = container.querySelector('[kjListGroup]')!;
-    expect(el.hasAttribute('aria-labelledby')).toBe(false);
-  });
-
-  it('wires aria-labelledby when a [kjListGroupLabel] child is present', async () => {
-    const { container } = await render(
-      `<div kjListGroup>
-         <div kjListGroupLabel>Fruits</div>
-         <div kjListItem [kjItemValue]="'a'">Apple</div>
-       </div>`,
-      { imports: [KjListGroup, KjListGroupLabel, KjListItem] },
-    );
-    const group = container.querySelector('[kjListGroup]')!;
-    const label = container.querySelector('[kjListGroupLabel]')!;
-    expect(label.id).toMatch(/^kj-list-group-label-\d+$/);
-    expect(group.getAttribute('aria-labelledby')).toBe(label.id);
-  });
-
-  it('is visible when items are visible', async () => {
-    const { container } = await render(
-      `<div kjListGroup>
-         <div kjListItem [kjItemValue]="'a'">A</div>
-         <div kjListItem [kjItemValue]="'b'">B</div>
-       </div>`,
-      { imports: [KjListGroup, KjListItem] },
-    );
-    expect(container.querySelector('[kjListGroup]')!.hasAttribute('hidden')).toBe(false);
-  });
-
-  it('auto-hides when every projected item is filter-hidden', async () => {
-    const { container, fixture } = await render(
-      `<div kjListGroup>
-         <div kjListItem [kjItemValue]="'a'">A</div>
-         <div kjListItem [kjItemValue]="'b'">B</div>
-       </div>`,
-      { imports: [KjListGroup, KjListItem] },
-    );
-    const items = fixture.debugElement
-      .queryAll(By.directive(KjListItem))
-      .map(d => d.injector.get(KjListItem));
-    expect(items.length).toBe(2);
-    items.forEach(i => i.setVisible(false));
-    fixture.detectChanges();
-    expect(container.querySelector('[kjListGroup]')!.hasAttribute('hidden')).toBe(true);
-  });
-
-  it('stays visible when at least one item is still visible', async () => {
-    const { container, fixture } = await render(
-      `<div kjListGroup>
-         <div kjListItem [kjItemValue]="'a'">A</div>
-         <div kjListItem [kjItemValue]="'b'">B</div>
-       </div>`,
-      { imports: [KjListGroup, KjListItem] },
-    );
-    const items = fixture.debugElement
-      .queryAll(By.directive(KjListItem))
-      .map(d => d.injector.get(KjListItem));
-    items[0].setVisible(false);
-    fixture.detectChanges();
-    expect(container.querySelector('[kjListGroup]')!.hasAttribute('hidden')).toBe(false);
-  });
-});
-
-describe('KjListSeparator', () => {
-  it('renders with role=separator and aria-orientation=horizontal', async () => {
-    const { container } = await render(
-      `<hr kjListSeparator />`,
-      { imports: [KjListSeparator] },
-    );
-    const el = container.querySelector('[kjListSeparator]')!;
-    expect(el.getAttribute('role')).toBe('separator');
-    expect(el.getAttribute('aria-orientation')).toBe('horizontal');
-  });
-});

package/src/primitives/list/group.ts

@@ -1,139 +0,0 @@
-// packages/core/src/primitives/list/group.ts
-import {
-  Directive,
-  computed,
-  contentChildren,
-  effect,
-  inject,
-  input,
-  signal,
-} from '@angular/core';
-import { KjListItem } from './item';
-
-let _groupId = 0;
-let _labelId = 0;
-
-/**
- * Wraps a subset of `KjListItem`s inside a list-style container
- * (listbox / menu / tree). Sets `role="group"` and auto-hides itself
- * when every child item is filter-hidden — so the section header (and
- * any visual chrome it provides) disappears with its options instead
- * of leaving an empty gap.
- *
- * Pair with `[kjListGroupLabel]` on a heading element inside the group
- * to wire `aria-labelledby` for screen readers.
- *
- * Items inside groups remain visible to the parent root's
- * `contentChildren(KjListItem, { descendants: true })` query, so the
- * navigator and filter primitives see them unchanged.
- *
- * @example
- * ```html
- * <kj-select-content>
- *   <div kjListGroup>
- *     <div kjListGroupLabel>Fruits</div>
- *     <div kjOption [kjOptionValue]="'apple'">Apple</div>
- *     <div kjOption [kjOptionValue]="'banana'">Banana</div>
- *   </div>
- *   <hr kjListSeparator />
- *   <div kjListGroup>
- *     <div kjListGroupLabel>Vegetables</div>
- *     <div kjOption [kjOptionValue]="'carrot'">Carrot</div>
- *   </div>
- * </kj-select-content>
- * ```
- *
- * @doc-category Core/Primitives
- */
-@Directive({
-  selector: '[kjListGroup]',
-  exportAs: 'kjListGroup',
-  standalone: true,
-  host: {
-    'role': 'group',
-    '[attr.id]': 'id()',
-    '[attr.aria-labelledby]': 'labelId()',
-    '[hidden]': 'isHidden()',
-  },
-})
-export class KjListGroup {
-  /** Optional override id. Falls back to a generated `kj-list-group-N`. */
-  readonly kjId = input<string>('');
-
-  private readonly _fallbackId = `kj-list-group-${++_groupId}`;
-
-  /**
-   * Resolved id used by the host `id` attribute and as the target of any
-   * child label's `aria-labelledby`. Reactively follows `kjId` when set.
-   */
-  readonly id = computed(() => this.kjId() || this._fallbackId);
-
-  /** Items directly under this group. Source of truth for auto-hide. */
-  readonly items = contentChildren(KjListItem, { descendants: true });
-
-  private readonly _labelId = signal<string | null>(null);
-  /** id of the `[kjListGroupLabel]` child (if any), bound to `aria-labelledby`. */
-  readonly labelId = this._labelId.asReadonly();
-
-  /** @internal — registered by a `[kjListGroupLabel]` child. */
-  setLabelId(id: string | null): void { this._labelId.set(id); }
-
-  /**
-   * Hidden when the group has items AND every item is filter-hidden.
-   * An empty group (no projected items) is treated as visible — the
-   * consumer may be loading content async.
-   */
-  readonly isHidden = computed(() => {
-    const items = this.items();
-    if (items.length === 0) return false;
-    return items.every(i => !i.visible());
-  });
-}
-
-/**
- * Heading inside a `[kjListGroup]`. Mints a stable id and registers it
- * with the surrounding group so the wrapper picks it up via
- * `aria-labelledby`. The host `id` attribute is bound from the resolved
- * id — write `id="my-id"` on the element to override.
- *
- * @doc-category Core/Primitives
- */
-@Directive({
-  selector: '[kjListGroupLabel]',
-  exportAs: 'kjListGroupLabel',
-  standalone: true,
-  host: {
-    '[attr.id]': 'id()',
-  },
-})
-export class KjListGroupLabel {
-  /** Optional override id. Falls back to a generated `kj-list-group-label-N`. */
-  readonly kjId = input<string>('');
-
-  private readonly _fallbackId = `kj-list-group-label-${++_labelId}`;
-
-  /** Resolved id used by the host `id` attribute and by the parent group. */
-  readonly id = computed(() => this.kjId() || this._fallbackId);
-
-  private readonly group = inject(KjListGroup);
-
-  constructor() {
-    effect(() => this.group.setLabelId(this.id()));
-  }
-}
-
-/**
- * Visual divider between groups (or arbitrary items). Non-interactive.
- * Sets `role="separator"` + `aria-orientation="horizontal"` per ARIA.
- *
- * @doc-category Core/Primitives
- */
-@Directive({
-  selector: '[kjListSeparator]',
-  standalone: true,
-  host: {
-    'role': 'separator',
-    'aria-orientation': 'horizontal',
-  },
-})
-export class KjListSeparator {}

package/src/primitives/list/index.ts

@@ -1,8 +0,0 @@
-export * from './tokens';
-export { KjListItem } from './item';
-export { KjListNavigator } from './navigator';
-export { KjSelectionModel } from './selection';
-export { KjFilterableList } from './filterable-list';
-export { KjTypeAhead } from './type-ahead';
-export { KjListGroup, KjListGroupLabel, KjListSeparator } from './group';
-export { injectListItem, injectSelectionModel, injectFilterableList } from './inject-helpers';

package/src/primitives/list/inject-helpers.ts

@@ -1,8 +0,0 @@
-import { inject } from '@angular/core';
-import { KjListItem } from './item';
-import { KjSelectionModel } from './selection';
-import { KjFilterableList } from './filterable-list';
-
-export const injectListItem = <T>() => inject(KjListItem) as KjListItem<T>;
-export const injectSelectionModel = <T>() => inject(KjSelectionModel) as KjSelectionModel<T>;
-export const injectFilterableList = <T>() => inject(KjFilterableList) as KjFilterableList<T>;

package/src/primitives/list/item.spec.ts

@@ -1,173 +0,0 @@
-import { Component } from '@angular/core';
-import { By } from '@angular/platform-browser';
-import { render } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { describe, it, expect } from 'vitest';
-import { KjListItem } from './item';
-
-expect.extend(toHaveNoViolations);
-
-describe('KjListItem', () => {
-  it('mints a stable id at construction (no afterNextRender race)', async () => {
-    const { container } = await render(
-      `<div role="option" aria-selected="false" kjListItem [kjItemValue]="'a'">A</div>`,
-      { imports: [KjListItem] },
-    );
-    const el = container.querySelector('[kjListItem]')!;
-    expect(el.id).toMatch(/^kj-list-item-\d+$/);
-  });
-
-  it('respects existing host id attribute over the auto-generated id', async () => {
-    const { container } = await render(
-      `<div role="option" id="markup-id" kjListItem [kjItemValue]="'a'">A</div>`,
-      { imports: [KjListItem] },
-    );
-    expect(container.querySelector('[kjListItem]')!.id).toBe('markup-id');
-  });
-
-  it('reflects aria-disabled from composed KjDisabled', async () => {
-    const { container } = await render(
-      `<div role="option" aria-selected="false" kjListItem [kjDisabled]="true" [kjItemValue]="'a'">A</div>`,
-      { imports: [KjListItem] },
-    );
-    expect(container.querySelector('[kjListItem]')!.getAttribute('aria-disabled')).toBe('true');
-  });
-
-  it('omits aria-selected when no KjSelectionModel is provided', async () => {
-    const { container } = await render(
-      `<div role="option" aria-selected="false" kjListItem [kjItemValue]="'a'">A</div>`,
-      { imports: [KjListItem] },
-    );
-    expect(container.querySelector('[kjListItem]')!.hasAttribute('aria-selected')).toBe(false);
-  });
-
-  it('binds aria-checked from KjSelectionModel.cascadeState when mode is cascade', async () => {
-    const { KjSelectionModel } = await import('./selection');
-    const { KJ_LIST_NAVIGATOR_CONFIG } = await import('./tokens');
-    const { signal } = await import('@angular/core');
-    const value = signal<unknown | readonly unknown[] | null>(null);
-    const { container, fixture } = await render(
-      `<div role="treeitem" kjListItem [kjItemValue]="'A1'">A1</div>`,
-      {
-        imports: [KjListItem],
-        providers: [
-          KjSelectionModel,
-          { provide: KJ_LIST_NAVIGATOR_CONFIG, useValue: { items: signal([]), value } },
-        ],
-      },
-    );
-    const m = fixture.debugElement.injector.get(KjSelectionModel);
-    m.setMode('cascade');
-    m.setTreeShape({
-      getParent: () => null,
-      getChildren: () => [],
-      isLeaf: () => true,
-    });
-    fixture.detectChanges();
-    const el = container.querySelector('[kjListItem]')!;
-    expect(el.getAttribute('aria-checked')).toBe('false');
-    expect(el.hasAttribute('aria-selected')).toBe(false);
-    m.toggle('A1' as unknown as never);
-    fixture.detectChanges();
-    expect(el.getAttribute('aria-checked')).toBe('true');
-  });
-
-  it('emits activate on click with the value', async () => {
-    @Component({
-      standalone: true,
-      imports: [KjListItem],
-      template: `<div role="option" aria-selected="false" kjListItem [kjItemValue]="'apple'" (activate)="last = $event">A</div>`,
-    })
-    class Host { last: unknown = null; }
-    const { container, fixture } = await render(Host);
-    (container.querySelector('[kjListItem]') as HTMLElement).click();
-    expect(fixture.componentInstance.last).toBe('apple');
-  });
-
-  it('does NOT emit activate when disabled', async () => {
-    @Component({
-      standalone: true,
-      imports: [KjListItem],
-      template: `<div role="option" aria-selected="false" kjListItem [kjDisabled]="true" [kjItemValue]="'apple'" (activate)="fired = true">A</div>`,
-    })
-    class Host { fired = false; }
-    const { container, fixture } = await render(Host);
-    (container.querySelector('[kjListItem]') as HTMLElement).click();
-    expect(fixture.componentInstance.fired).toBe(false);
-  });
-
-  it('responds to Enter and Space', async () => {
-    @Component({
-      standalone: true,
-      imports: [KjListItem],
-      template: `<div role="option" aria-selected="false" kjListItem [kjItemValue]="'a'" (activate)="count = count + 1">A</div>`,
-    })
-    class Host { count = 0; }
-    const { container, fixture } = await render(Host);
-    const el = container.querySelector('[kjListItem]') as HTMLElement;
-    el.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
-    el.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }));
-    expect(fixture.componentInstance.count).toBe(2);
-  });
-
-  it('exposes label fallback from text content when kjItemLabel is empty', async () => {
-    @Component({
-      standalone: true,
-      imports: [KjListItem],
-      template: `<div role="option" aria-selected="false" kjListItem #i="kjListItem" [kjItemValue]="'a'">  Apple </div>
-                 <span data-test>{{ i.label() }}</span>`,
-    })
-    class Host {}
-    const { container } = await render(Host);
-    expect(container.querySelector('[data-test]')!.textContent).toBe('Apple');
-  });
-
-  it('hides element via [hidden] when setVisible(false)', async () => {
-    @Component({
-      standalone: true,
-      imports: [KjListItem],
-      template: `<div role="option" aria-selected="false" kjListItem [kjItemValue]="'a'">A</div>`,
-    })
-    class Host {}
-    const { container, fixture } = await render(Host);
-    const item = fixture.debugElement.query(By.directive(KjListItem)).injector.get(KjListItem);
-    item.setVisible(false);
-    fixture.detectChanges();
-    expect(container.querySelector('[kjListItem]')!.hasAttribute('hidden')).toBe(true);
-  });
-
-  it('binds aria-keyshortcuts when kjShortcut is set', async () => {
-    const { container } = await render(
-      `<div role="option" aria-selected="false" kjListItem [kjItemValue]="'a'" [kjShortcut]="'Mod+P'">A</div>`,
-      { imports: [KjListItem] },
-    );
-    expect(container.querySelector('[kjListItem]')!.getAttribute('aria-keyshortcuts')).toBe('Mod+P');
-  });
-
-  it('binds aria-posinset and aria-setsize from posInSet/setSize signals', async () => {
-    @Component({
-      standalone: true,
-      imports: [KjListItem],
-      template: `<div role="option" aria-selected="false" kjListItem #i="kjListItem" [kjItemValue]="'a'">A</div>`,
-    })
-    class Host {}
-    const { container, fixture } = await render(Host);
-    const item = fixture.debugElement.query(By.directive(KjListItem)).injector.get(KjListItem);
-    item.posInSet.set(2);
-    item.setSize.set(5);
-    fixture.detectChanges();
-    const el = container.querySelector('[kjListItem]')!;
-    expect(el.getAttribute('aria-posinset')).toBe('2');
-    expect(el.getAttribute('aria-setsize')).toBe('5');
-  });
-
-  it('passes axe accessibility audit', async () => {
-    const { container } = await render(
-      `<ul role="listbox" aria-label="Options">
-         <li role="option" aria-selected="false" kjListItem [kjItemValue]="'a'">A</li>
-       </ul>`,
-      { imports: [KjListItem] },
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});