@kouji-ui/core 0.0.3 → 0.1.1

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

@@ -0,0 +1,114 @@
+// 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

@@ -0,0 +1,126 @@
+// 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

@@ -0,0 +1,99 @@
+// 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

@@ -0,0 +1,139 @@
+// 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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,8 @@
+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

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