@kouji-ui/core 0.1.1 → 0.1.2

package/src/dropdown-menu/dropdown-menu.spec.ts

@@ -1,265 +0,0 @@
-import { Component } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { describe, it, expect, beforeEach } from 'vitest';
-
-import { KjDropdownMenu } from './dropdown-menu';
-import { KjDropdownMenuTrigger } from './dropdown-menu-trigger';
-import { KjDropdownMenuContent } from './dropdown-menu-content';
-import { KjDropdownMenuItem } from './dropdown-menu-item';
-import { KjDropdownMenuGroup } from './dropdown-menu-group';
-import { KjDropdownMenuLabel } from './dropdown-menu-label';
-import { KjDropdownMenuSeparator } from './dropdown-menu-separator';
-
-function mkHost(triggerKind: 'click' | 'contextmenu', mount: 'portal' | 'point' | 'inline') {
-  @Component({
-    selector: 'kj-host-cmp',
-    standalone: true,
-    imports: [KjDropdownMenuTrigger, KjDropdownMenuContent, KjDropdownMenuItem],
-    template: `
-      <button
-        kjDropdownMenuTrigger
-        #t="kjDropdownMenuTrigger"
-        [kjTrigger]="kind"
-        [kjMount]="mount">Open</button>
-      <kj-dropdown-menu-content [kjFor]="t" [kjMount]="mount">
-        <button kjDropdownMenuItem>One</button>
-      </kj-dropdown-menu-content>
-    `,
-  })
-  class Host {
-    readonly kind = triggerKind;
-    readonly mount = mount;
-  }
-  return Host;
-}
-
-describe('KjDropdownMenu (overlay primitives)', () => {
-  beforeEach(() => {
-    TestBed.resetTestingModule();
-    TestBed.configureTestingModule({});
-  });
-
-  // TODO(overlay-trigger): `KjOverlayTrigger` reads `ariaHasPopup` from the
-  // resolved trigger-event strategy (`onClick`, `onContextMenu`), and both
-  // strategies hard-code `ariaHasPopup: null`. The dropdown-menu trigger
-  // already provides `KJ_OVERLAY_PANEL_ROLE = 'menu'` but the role is never
-  // forwarded into `aria-haspopup`. Restoring this assertion requires a
-  // primitive-side fix (read the panel role into the host binding when
-  // strategy doesn't override) — out of scope for the listbox migration.
-  it.skip('click trigger + portal mount: aria-haspopup=menu, aria-expanded=false', () => {
-    const fixture = TestBed.createComponent(mkHost('click', 'portal'));
-    fixture.detectChanges();
-    const btn = fixture.nativeElement.querySelector('button[kjDropdownMenuTrigger]') as HTMLElement;
-    expect(btn.getAttribute('aria-haspopup')).toBe('menu');
-    expect(btn.getAttribute('aria-expanded')).toBe('false');
-  });
-
-  // TODO(overlay-trigger): same root cause as the click-trigger case above —
-  // `onContextMenu` strategy returns `ariaHasPopup: null`. Re-enable once the
-  // primitive forwards `KJ_OVERLAY_PANEL_ROLE` as the default haspopup value.
-  it.skip('contextmenu trigger: aria-haspopup=menu, aria-expanded=false', () => {
-    const fixture = TestBed.createComponent(mkHost('contextmenu', 'point'));
-    fixture.detectChanges();
-    const btn = fixture.nativeElement.querySelector('button[kjDropdownMenuTrigger]') as HTMLElement;
-    expect(btn.getAttribute('aria-haspopup')).toBe('menu');
-    expect(btn.getAttribute('aria-expanded')).toBe('false');
-  });
-
-  it('panel: role="menu" + hidden while closed (portal mount)', () => {
-    const fixture = TestBed.createComponent(mkHost('click', 'portal'));
-    fixture.detectChanges();
-    const panel = fixture.nativeElement.querySelector('kj-dropdown-menu-content') as HTMLElement;
-    expect(panel.getAttribute('role')).toBe('menu');
-    expect(panel.hasAttribute('hidden')).toBe(true);
-  });
-
-  it('panel: role="menu" + hidden (point mount)', () => {
-    const fixture = TestBed.createComponent(mkHost('contextmenu', 'point'));
-    fixture.detectChanges();
-    const panel = fixture.nativeElement.querySelector('kj-dropdown-menu-content') as HTMLElement;
-    expect(panel.getAttribute('role')).toBe('menu');
-    expect(panel.hasAttribute('hidden')).toBe(true);
-  });
-
-  it('panel: role="menu" + hidden (inline mount)', () => {
-    const fixture = TestBed.createComponent(mkHost('click', 'inline'));
-    fixture.detectChanges();
-    const panel = fixture.nativeElement.querySelector('kj-dropdown-menu-content') as HTMLElement;
-    expect(panel.getAttribute('role')).toBe('menu');
-    expect(panel.hasAttribute('hidden')).toBe(true);
-  });
-
-  it('item composes KjListItem — role="menuitem" + a stable id', () => {
-    @Component({
-      standalone: true,
-      imports: [KjDropdownMenuTrigger, KjDropdownMenuContent, KjDropdownMenuItem],
-      template: `
-        <button kjDropdownMenuTrigger #t="kjDropdownMenuTrigger">Open</button>
-        <kj-dropdown-menu-content [kjFor]="t" [kjMount]="'inline'">
-          <button kjDropdownMenuItem>One</button>
-          <button kjDropdownMenuItem>Two</button>
-        </kj-dropdown-menu-content>
-      `,
-    })
-    class Host {}
-    const fixture = TestBed.createComponent(Host);
-    fixture.detectChanges();
-    const items = Array.from(
-      fixture.nativeElement.querySelectorAll<HTMLElement>('button[kjDropdownMenuItem]'),
-    );
-    expect(items).toHaveLength(2);
-    for (const i of items) {
-      expect(i.getAttribute('role')).toBe('menuitem');
-      expect(i.id).toMatch(/^kj-list-item-\d+$/);
-    }
-  });
-
-  it('disabled item gets aria-disabled="true" via composed KjListItem', () => {
-    @Component({
-      standalone: true,
-      imports: [KjDropdownMenuTrigger, KjDropdownMenuContent, KjDropdownMenuItem],
-      template: `
-        <button kjDropdownMenuTrigger #t="kjDropdownMenuTrigger">Open</button>
-        <kj-dropdown-menu-content [kjFor]="t" [kjMount]="'inline'">
-          <button kjDropdownMenuItem kjDisabled>Disabled</button>
-        </kj-dropdown-menu-content>
-      `,
-    })
-    class Host {}
-    const fixture = TestBed.createComponent(Host);
-    fixture.detectChanges();
-    const item = fixture.nativeElement.querySelector('button[kjDropdownMenuItem]') as HTMLElement;
-    expect(item.getAttribute('aria-disabled')).toBe('true');
-  });
-
-  it('click on item emits (kjSelect) and routes through KjListItem.activate', () => {
-    @Component({
-      standalone: true,
-      imports: [KjDropdownMenuTrigger, KjDropdownMenuContent, KjDropdownMenuItem],
-      template: `
-        <button kjDropdownMenuTrigger #t="kjDropdownMenuTrigger">Open</button>
-        <kj-dropdown-menu-content [kjFor]="t" [kjMount]="'inline'">
-          <button kjDropdownMenuItem (kjSelect)="hit = hit + 1">One</button>
-        </kj-dropdown-menu-content>
-      `,
-    })
-    class Host { hit = 0; }
-    const fixture = TestBed.createComponent(Host);
-    fixture.detectChanges();
-    const item = fixture.nativeElement.querySelector('button[kjDropdownMenuItem]') as HTMLElement;
-    item.click();
-    fixture.detectChanges();
-    expect(fixture.componentInstance.hit).toBe(1);
-  });
-
-  it('click on a disabled item does not emit (kjSelect)', () => {
-    @Component({
-      standalone: true,
-      imports: [KjDropdownMenuTrigger, KjDropdownMenuContent, KjDropdownMenuItem],
-      template: `
-        <button kjDropdownMenuTrigger #t="kjDropdownMenuTrigger">Open</button>
-        <kj-dropdown-menu-content [kjFor]="t" [kjMount]="'inline'">
-          <button kjDropdownMenuItem kjDisabled (kjSelect)="hit = hit + 1">Disabled</button>
-        </kj-dropdown-menu-content>
-      `,
-    })
-    class Host { hit = 0; }
-    const fixture = TestBed.createComponent(Host);
-    fixture.detectChanges();
-    const item = fixture.nativeElement.querySelector('button[kjDropdownMenuItem]') as HTMLElement;
-    item.click();
-    fixture.detectChanges();
-    expect(fixture.componentInstance.hit).toBe(0);
-  });
-
-  it('content has KjListNavigator in roving mode: items get tabindex bindings', () => {
-    @Component({
-      standalone: true,
-      imports: [KjDropdownMenuTrigger, KjDropdownMenuContent, KjDropdownMenuItem],
-      template: `
-        <button kjDropdownMenuTrigger #t="kjDropdownMenuTrigger">Open</button>
-        <kj-dropdown-menu-content [kjFor]="t" [kjMount]="'inline'">
-          <button kjDropdownMenuItem>One</button>
-          <button kjDropdownMenuItem>Two</button>
-        </kj-dropdown-menu-content>
-      `,
-    })
-    class Host {}
-    const fixture = TestBed.createComponent(Host);
-    fixture.detectChanges();
-    const items = Array.from(
-      fixture.nativeElement.querySelectorAll<HTMLElement>('button[kjDropdownMenuItem]'),
-    );
-    // Roving seed: the first navigable is tabbable (0), others get -1.
-    expect(items[0].getAttribute('tabindex')).toBe('0');
-    expect(items[1].getAttribute('tabindex')).toBe('-1');
-  });
-
-  it('group composes KjListGroup: role="group" + aria-labelledby wired to label', () => {
-    @Component({
-      standalone: true,
-      imports: [
-        KjDropdownMenuTrigger,
-        KjDropdownMenuContent,
-        KjDropdownMenuItem,
-        KjDropdownMenuGroup,
-        KjDropdownMenuLabel,
-      ],
-      template: `
-        <button kjDropdownMenuTrigger #t="kjDropdownMenuTrigger">Open</button>
-        <kj-dropdown-menu-content [kjFor]="t" [kjMount]="'inline'">
-          <div kjDropdownMenuGroup>
-            <span kjDropdownMenuLabel>Account</span>
-            <button kjDropdownMenuItem>Profile</button>
-          </div>
-        </kj-dropdown-menu-content>
-      `,
-    })
-    class Host {}
-    const fixture = TestBed.createComponent(Host);
-    fixture.detectChanges();
-    const group = fixture.nativeElement.querySelector('[kjDropdownMenuGroup]') as HTMLElement;
-    const label = fixture.nativeElement.querySelector('[kjDropdownMenuLabel]') as HTMLElement;
-    expect(group.getAttribute('role')).toBe('group');
-    expect(group.getAttribute('aria-labelledby')).toBe(label.id);
-    expect(label.id).toMatch(/^kj-list-group-label-\d+$/);
-  });
-
-  it('separator composes KjListSeparator: role="separator" + aria-orientation', () => {
-    @Component({
-      standalone: true,
-      imports: [KjDropdownMenuTrigger, KjDropdownMenuContent, KjDropdownMenuSeparator],
-      template: `
-        <button kjDropdownMenuTrigger #t="kjDropdownMenuTrigger">Open</button>
-        <kj-dropdown-menu-content [kjFor]="t" [kjMount]="'inline'">
-          <div kjDropdownMenuSeparator></div>
-        </kj-dropdown-menu-content>
-      `,
-    })
-    class Host {}
-    const fixture = TestBed.createComponent(Host);
-    fixture.detectChanges();
-    const sep = fixture.nativeElement.querySelector('[kjDropdownMenuSeparator]') as HTMLElement;
-    expect(sep.getAttribute('role')).toBe('separator');
-    expect(sep.getAttribute('aria-orientation')).toBe('horizontal');
-    expect(sep.getAttribute('tabindex')).toBe('-1');
-  });
-
-  it('KjDropdownMenu root directive provides KJ_LIST_NAVIGATOR_CONFIG with items', () => {
-    @Component({
-      standalone: true,
-      imports: [KjDropdownMenu, KjDropdownMenuItem],
-      template: `
-        <div kjDropdownMenu>
-          <button kjDropdownMenuItem>A</button>
-          <button kjDropdownMenuItem>B</button>
-        </div>
-      `,
-    })
-    class Host {}
-    const fixture = TestBed.createComponent(Host);
-    fixture.detectChanges();
-    const items = fixture.nativeElement.querySelectorAll('button[kjDropdownMenuItem]');
-    expect(items.length).toBe(2);
-  });
-});

package/src/dropdown-menu/dropdown-menu.ts

@@ -1,60 +0,0 @@
-import {
-  Directive,
-  contentChildren,
-  forwardRef,
-  inject,
-  signal,
-} from '@angular/core';
-import {
-  KJ_LIST_NAVIGATOR_CONFIG,
-  KjListItem,
-  type KjCompareFn,
-  type KjListNavigatorConfig,
-} from '../primitives/list';
-import {
-  KJ_DROPDOWN_MENU,
-  type KjDropdownMenuContext,
-} from './dropdown-menu-trigger';
-
-/**
- * Root container for a dropdown menu's projected items. Used by consumers
- * that render the panel content inline (e.g. inside a `<ng-template>` passed
- * to `[kjDropdownMenuTriggerFor]` from `KjMenubar`) instead of through the
- * `<kj-dropdown-menu-content>` component.
- *
- * Implements {@link KjListNavigatorConfig} so that any `KjListNavigator`
- * mounted on a wrapping panel can discover the projected `KjListItem`s and
- * drive WAI-ARIA APG menu keyboard navigation (Up/Down/Home/End/type-ahead)
- * + roving DOM focus. A menu has no selection model — items are actions —
- * so `value` / `mode` are omitted from the config. The `afterSelect` hook
- * closes the surrounding overlay (universal menu UX).
- *
- * @doc-category Core/Overlay
- */
-@Directive({
-  selector: '[kjDropdownMenu]',
-  standalone: true,
-  exportAs: 'kjDropdownMenu',
-  providers: [
-    { provide: KJ_LIST_NAVIGATOR_CONFIG, useExisting: forwardRef(() => KjDropdownMenu) },
-  ],
-})
-export class KjDropdownMenu implements KjListNavigatorConfig {
-  /** All `KjListItem`s under this root. Source of truth for nav + type-ahead. */
-  readonly items = contentChildren(KjListItem, { descendants: true });
-
-  /** Menu items are actions — no selection model. Kept as `Object.is`. */
-  readonly compareBy = signal<KjCompareFn<unknown>>(Object.is as KjCompareFn<unknown>);
-
-  /** Parent menu context (trigger or content), if any. Drives close-on-activate. */
-  private readonly ctx = inject<KjDropdownMenuContext>(KJ_DROPDOWN_MENU, { optional: true });
-
-  /**
-   * Universal menu UX: any item activation closes the menu. `KjListItem`
-   * calls this with `closeRequested=false` since no `KjSelectionModel` is
-   * provided — we override the flag and always close.
-   */
-  afterSelect(_value: unknown, _closeRequested: boolean): void {
-    this.ctx?.hide('item');
-  }
-}

package/src/dropdown-menu/index.ts

@@ -1,15 +0,0 @@
-export { KjDropdownMenu } from './dropdown-menu';
-export { KjDropdownMenuTrigger } from './dropdown-menu-trigger';
-export { KjDropdownMenuContent } from './dropdown-menu-content';
-export { KjDropdownMenuItem } from './dropdown-menu-item';
-export { KjDropdownMenuSeparator } from './dropdown-menu-separator';
-export { KjDropdownMenuLabel } from './dropdown-menu-label';
-export { KjDropdownMenuGroup } from './dropdown-menu-group';
-export {
-  KJ_DROPDOWN_MENU,
-  type KjDropdownMenuContext,
-  type KjDropdownMenuTriggerKind,
-  type KjDropdownMenuMount,
-  type KjDropdownMenuCloseReason,
-  nextDropdownMenuLabelId,
-} from './dropdown-menu-trigger';

package/src/example-components.ts

@@ -1,42 +0,0 @@
-// AUTO-GENERATED by scripts/migrate-examples.mjs
-// Map of folder → lazy loader for that folder's example components,
-// plus a static exportName → folder owner index.
-//
-// Consumers (apps/docs ExampleRegistryService) look up an export name in
-// EXAMPLE_OWNER to find its folder chunk, then call EXAMPLE_LOADERS[folder]()
-// to import the (code-split) module containing it.
-//
-// Each entry below produces its own chunk in the build output — opening
-// the docs page for component X only pulls component X's examples, not the
-// entire library.
-
-import type { Type } from '@angular/core';
-
-export const EXAMPLE_LOADERS: Record<string, () => Promise<Record<string, Type<unknown>>>> = {
-  'button': () => import('./button/_examples') as Promise<Record<string, Type<unknown>>>,
-  'dialog': () => import('./dialog/_examples') as Promise<Record<string, Type<unknown>>>,
-  'popover': () => import('./popover/_examples') as Promise<Record<string, Type<unknown>>>,
-  'toast': () => import('./toast/_examples') as Promise<Record<string, Type<unknown>>>,
-  'tooltip': () => import('./tooltip/_examples') as Promise<Record<string, Type<unknown>>>,
-};
-
-export const EXAMPLE_OWNER: Record<string, string> = {
-  ButtonExample: 'button',
-  ButtonFinanceExample: 'button',
-  ButtonRetroExample: 'button',
-  ButtonSizesExample: 'button',
-  DialogBasicExample: 'dialog',
-  DialogConfirmExample: 'dialog',
-  DialogFinanceExample: 'dialog',
-  DialogRetroExample: 'dialog',
-  PopoverBasicExample: 'popover',
-  PopoverFinanceExample: 'popover',
-  PopoverRetroExample: 'popover',
-  ToastBasicExample: 'toast',
-  ToastFinanceExample: 'toast',
-  ToastRetroExample: 'toast',
-  TooltipBasicExample: 'tooltip',
-  TooltipFinanceExample: 'tooltip',
-  TooltipPlacementsExample: 'tooltip',
-  TooltipRetroExample: 'tooltip',
-};

package/src/field/field-error.ts

@@ -1,49 +0,0 @@
-import { DestroyRef, Directive, inject, input } from '@angular/core';
-import { KJ_FIELD } from './field.context';
-
-let kjFieldErrorIdCounter = 0;
-
-/**
- * Error text inside a `[kjField]`. The host id is auto-minted on
- * construction and registered with the field so it participates in the
- * inner control's `aria-describedby` chain (only while visible).
- *
- * Carries `role="alert"` + `aria-live="polite"` so newly-shown errors
- * are announced. Hidden via `[hidden]` when the field is not in error
- * state.
- *
- * @example
- * ```html
- * <span kjFieldError>Please enter a valid email.</span>
- * ```
- * @doc-category Core/Inputs
- * @doc
- * @doc-name field
- */
-@Directive({
-  selector: '[kjFieldError]',
-  standalone: true,
-  host: {
-    role: 'alert',
-    'aria-live': 'polite',
-    '[attr.id]': 'id()',
-    '[attr.hidden]': '!ctx.invalid() ? "" : null',
-  },
-})
-export class KjFieldError {
-  /** @internal */ readonly ctx = inject(KJ_FIELD);
-
-  /** Override the auto-minted host id. */
-  readonly kjFieldErrorId = input<string | undefined>(undefined);
-
-  /** @internal */ readonly id = (() => {
-    const seq = ++kjFieldErrorIdCounter;
-    return () => this.kjFieldErrorId() ?? `kj-field-error-${seq}`;
-  })();
-
-  constructor() {
-    const destroyRef = inject(DestroyRef);
-    const deregister = this.ctx.registerDescribedBy(this.id(), 'error');
-    destroyRef.onDestroy(deregister);
-  }
-}

package/src/field/field-group.ts

@@ -1,39 +0,0 @@
-import { Directive, inject } from '@angular/core';
-import { KJ_FIELD } from './field.context';
-
-/**
- * Compound input layout inside a `[kjField]`. Wraps an input together
- * with leading / trailing prefix or suffix addons (icons, units,
- * action buttons) and presents them as a single visual control.
- *
- * The directive itself is a presentational marker — it adds no ARIA
- * semantics beyond mirroring the field's invalid / disabled state via
- * `data-*` so theme CSS can paint the addons consistently with the
- * rest of the field.
- *
- * @example
- * ```html
- * <div kjField>
- *   <label kjFieldLabel>Amount</label>
- *   <div kjFieldGroup>
- *     <span class="kj-field-group__prefix">$</span>
- *     <input kjInput type="number" />
- *     <span class="kj-field-group__suffix">USD</span>
- *   </div>
- * </div>
- * ```
- * @doc-category Core/Inputs
- * @doc
- * @doc-name field
- */
-@Directive({
-  selector: '[kjFieldGroup]',
-  standalone: true,
-  host: {
-    '[attr.data-disabled]': 'ctx.disabled() ? "" : null',
-    '[attr.data-invalid]': 'ctx.invalid() ? "" : null',
-  },
-})
-export class KjFieldGroup {
-  /** @internal */ readonly ctx = inject(KJ_FIELD);
-}

package/src/field/field-help.ts

@@ -1,47 +0,0 @@
-import { DestroyRef, Directive, inject, input } from '@angular/core';
-import { KJ_FIELD } from './field.context';
-
-let kjFieldHelpIdCounter = 0;
-
-/**
- * Helper / description text inside a `[kjField]`. The host id is
- * auto-minted on construction and registered with the field so it
- * participates in the inner control's `aria-describedby` chain.
- *
- * Hidden when the field is in error state — the error message takes
- * precedence to avoid double-announcement.
- *
- * @example
- * ```html
- * <span kjFieldHelp>Format: name@example.com</span>
- * ```
- * @doc-category Core/Inputs
- * @doc
- * @doc-name field
- */
-@Directive({
-  selector: '[kjFieldHelp]',
-  standalone: true,
-  host: {
-    '[attr.id]': 'id()',
-    '[attr.data-disabled]': 'ctx.disabled() ? "" : null',
-    '[attr.hidden]': 'ctx.invalid() ? "" : null',
-  },
-})
-export class KjFieldHelp {
-  /** @internal */ readonly ctx = inject(KJ_FIELD);
-
-  /** Override the auto-minted host id. */
-  readonly kjFieldHelpId = input<string | undefined>(undefined);
-
-  /** @internal */ readonly id = (() => {
-    const seq = ++kjFieldHelpIdCounter;
-    return () => this.kjFieldHelpId() ?? `kj-field-help-${seq}`;
-  })();
-
-  constructor() {
-    const destroyRef = inject(DestroyRef);
-    const deregister = this.ctx.registerDescribedBy(this.id(), 'help');
-    destroyRef.onDestroy(deregister);
-  }
-}

package/src/field/field-label.ts

@@ -1,30 +0,0 @@
-import { Directive, inject } from '@angular/core';
-import { KJ_FIELD } from './field.context';
-
-/**
- * Label inside a `[kjField]`. Reflects the field's `controlId` as `for=`
- * and mirrors the field's required / disabled / invalid state via
- * `data-*` attributes (theme CSS draws the visual `*` for required).
- *
- * @example
- * ```html
- * <label kjFieldLabel>Email</label>
- * ```
- * @doc-category Core/Inputs
- * @doc
- * @doc-name field
- */
-@Directive({
-  selector: '[kjFieldLabel]',
-  standalone: true,
-  host: {
-    '[attr.id]': 'ctx.labelId()',
-    '[attr.for]': 'ctx.controlId()',
-    '[attr.data-required]': 'ctx.required() ? "" : null',
-    '[attr.data-disabled]': 'ctx.disabled() ? "" : null',
-    '[attr.data-invalid]': 'ctx.invalid() ? "" : null',
-  },
-})
-export class KjFieldLabel {
-  /** @internal */ readonly ctx = inject(KJ_FIELD);
-}

package/src/field/field.context.ts

@@ -1,28 +0,0 @@
-import { InjectionToken, Signal } from '@angular/core';
-
-/**
- * Shared context exposed by `KjField` to its label, help, error, and
- * registered control children. Children inject this via `KJ_FIELD` and react
- * to its signals; they never reach into the root directive directly.
- */
-export interface KjFieldContext {
-  /** The id of the labelled control. Auto-minted when missing. */
-  readonly controlId: Signal<string>;
-  /** The id of the field's `<label>` element. */
-  readonly labelId: Signal<string>;
-  /** Whether the registered control is required (mirrored from validators / `kjRequired`). */
-  readonly required: Signal<boolean>;
-  /** Whether the field is disabled (forwarded to the inner control). */
-  readonly disabled: Signal<boolean>;
-  /** Whether the registered control is currently in error state. */
-  readonly invalid: Signal<boolean>;
-  /** Ordered, deduplicated ids of all visible help + error elements. */
-  readonly describedByIds: Signal<readonly string[]>;
-
-  /** Register a help / error element so its id participates in the
-   * `aria-describedby` chain. Returns a deregister callback. */
-  registerDescribedBy(id: string, kind: 'help' | 'error'): () => void;
-}
-
-/** Injection token for {@link KjFieldContext}. */
-export const KJ_FIELD = new InjectionToken<KjFieldContext>('KjField');