@kouji-ui/core 0.1.1 → 0.1.3

package/src/field/field.spec.ts

@@ -1,179 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { describe, expect, test, beforeEach } from 'vitest';
-import { KjAriaDescribedBy } from '../a11y/aria-describedby';
-import { KjField } from './field';
-import { KjFieldError } from './field-error';
-import { KjFieldGroup } from './field-group';
-import { KjFieldHelp } from './field-help';
-import { KjFieldLabel } from './field-label';
-
-@Component({
-  standalone: true,
-  imports: [KjField, KjFieldLabel, KjFieldHelp, KjFieldError, KjFieldGroup, KjAriaDescribedBy],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <div
-      kjField
-      #f="kjField"
-      [kjRequired]="required()"
-      [kjDisabled]="disabled()"
-      [kjInvalid]="invalid()"
-    >
-      <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -->
-      <label kjFieldLabel>Email</label>
-      <input
-        type="email"
-        kjAriaDescribedBy
-        [id]="f.controlId()"
-        [kjDescribedBy]="f.describedByIds()"
-      />
-      @if (showHelp()) {
-        <span kjFieldHelp>Format: name@example.com</span>
-      }
-      @if (showError()) {
-        <span kjFieldError>Enter a valid email.</span>
-      }
-    </div>
-  `,
-})
-class HostComponent {
-  required = signal(false);
-  disabled = signal(false);
-  invalid = signal(false);
-  showHelp = signal(true);
-  showError = signal(true);
-}
-
-describe('KjField', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({ imports: [HostComponent] });
-  });
-
-  test('mints stable ids and wires label[for] to control id', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    const label = fixture.nativeElement.querySelector('label') as HTMLLabelElement;
-    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
-    expect(label.getAttribute('for')).toBe(input.id);
-    expect(input.id).toMatch(/^kj-field-\d+$/);
-    expect(label.id).toMatch(/^kj-field-label-\d+$/);
-  });
-
-  test('appends help id to aria-describedby when not invalid', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    const help = fixture.nativeElement.querySelector('[kjFieldHelp]') as HTMLElement;
-    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
-    expect(input.getAttribute('aria-describedby')).toBe(help.id);
-  });
-
-  test('appends both help and error ids when invalid', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.componentInstance.invalid.set(true);
-    fixture.detectChanges();
-    const help = fixture.nativeElement.querySelector('[kjFieldHelp]') as HTMLElement;
-    const error = fixture.nativeElement.querySelector('[kjFieldError]') as HTMLElement;
-    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
-    const ids = input.getAttribute('aria-describedby')!.split(' ');
-    expect(ids).toContain(help.id);
-    expect(ids).toContain(error.id);
-    // hints first, errors second
-    expect(ids.indexOf(help.id)).toBeLessThan(ids.indexOf(error.id));
-  });
-
-  test('toggles data-invalid / data-required / data-disabled on the field root', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.componentInstance.invalid.set(true);
-    fixture.componentInstance.required.set(true);
-    fixture.componentInstance.disabled.set(true);
-    fixture.detectChanges();
-    const root = fixture.nativeElement.querySelector('[kjField]') as HTMLElement;
-    expect(root.hasAttribute('data-invalid')).toBe(true);
-    expect(root.hasAttribute('data-required')).toBe(true);
-    expect(root.hasAttribute('data-disabled')).toBe(true);
-  });
-
-  test('error element is hidden when not invalid and visible when invalid', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    const error = fixture.nativeElement.querySelector('[kjFieldError]') as HTMLElement;
-    expect(error.hasAttribute('hidden')).toBe(true);
-    fixture.componentInstance.invalid.set(true);
-    fixture.detectChanges();
-    expect(error.hasAttribute('hidden')).toBe(false);
-  });
-
-  test('help element hides when invalid (error takes precedence)', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    const help = fixture.nativeElement.querySelector('[kjFieldHelp]') as HTMLElement;
-    expect(help.hasAttribute('hidden')).toBe(false);
-    fixture.componentInstance.invalid.set(true);
-    fixture.detectChanges();
-    expect(help.hasAttribute('hidden')).toBe(true);
-  });
-
-  test('error element carries role=alert and aria-live=polite', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    const error = fixture.nativeElement.querySelector('[kjFieldError]') as HTMLElement;
-    expect(error.getAttribute('role')).toBe('alert');
-    expect(error.getAttribute('aria-live')).toBe('polite');
-  });
-
-  test('label mirrors required / disabled / invalid via data-*', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.componentInstance.required.set(true);
-    fixture.componentInstance.disabled.set(true);
-    fixture.componentInstance.invalid.set(true);
-    fixture.detectChanges();
-    const label = fixture.nativeElement.querySelector('label') as HTMLLabelElement;
-    expect(label.hasAttribute('data-required')).toBe(true);
-    expect(label.hasAttribute('data-disabled')).toBe(true);
-    expect(label.hasAttribute('data-invalid')).toBe(true);
-  });
-
-  test('removing a help element deregisters its id from describedby', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
-    expect(input.getAttribute('aria-describedby')).toBeTruthy();
-    fixture.componentInstance.showHelp.set(false);
-    fixture.detectChanges();
-    expect(input.getAttribute('aria-describedby')).toBeNull();
-  });
-
-  test('booleanAttribute coerces string "true"/"" / present', () => {
-    @Component({
-      standalone: true,
-      imports: [KjField],
-      template: `<div kjField kjRequired kjDisabled kjInvalid #f="kjField"></div>`,
-    })
-    class A {}
-    const fixture = TestBed.createComponent(A);
-    fixture.detectChanges();
-    const root = fixture.nativeElement.querySelector('[kjField]') as HTMLElement;
-    expect(root.hasAttribute('data-required')).toBe(true);
-    expect(root.hasAttribute('data-disabled')).toBe(true);
-    expect(root.hasAttribute('data-invalid')).toBe(true);
-  });
-
-  test('field-group mirrors invalid / disabled state', () => {
-    @Component({
-      standalone: true,
-      imports: [KjField, KjFieldGroup],
-      template: `
-        <div kjField [kjInvalid]="true" [kjDisabled]="true">
-          <div kjFieldGroup data-test="group"></div>
-        </div>
-      `,
-    })
-    class A {}
-    const fixture = TestBed.createComponent(A);
-    fixture.detectChanges();
-    const group = fixture.nativeElement.querySelector('[data-test="group"]') as HTMLElement;
-    expect(group.hasAttribute('data-invalid')).toBe(true);
-    expect(group.hasAttribute('data-disabled')).toBe(true);
-  });
-});

package/src/field/field.ts

@@ -1,121 +0,0 @@
-import {
-  Directive,
-  booleanAttribute,
-  computed,
-  input,
-  signal,
-} from '@angular/core';
-import { KJ_FIELD, KjFieldContext } from './field.context';
-
-let kjFieldIdCounter = 0;
-
-/**
- * Root directive for a form field. Owns id minting, the
- * `aria-describedby` chain, and the required / disabled / invalid state
- * propagation that label, help, error, and the inner control all read.
- *
- * Project a single labelled control plus any number of `[kjFieldLabel]`,
- * `[kjFieldHelp]`, and `[kjFieldError]` children. The label auto-wires
- * `for=`; help and error ids are appended to the inner control's
- * `aria-describedby` via {@link KjAriaDescribedBy}; `aria-invalid` is
- * toggled based on `kjInvalid`.
- *
- * @example
- * ```html
- * <div kjField [kjInvalid]="ctrl.touched && ctrl.invalid" [kjRequired]="true">
- *   <label kjFieldLabel>Email</label>
- *   <input kjInput type="email" [formControl]="ctrl"
- *          kjAriaDescribedBy [kjDescribedBy]="describedByIds()" />
- *   <span kjFieldHelp>We'll never share it.</span>
- *   <span kjFieldError>Enter a valid email.</span>
- * </div>
- * ```
- * @doc-category Core/Inputs
- * @doc
- * @doc-name field
- * @doc-description Groups a form control with its label, help, and error messages and keeps their accessibility wiring in sync.
- * @doc-is-main
- */
-@Directive({
-  selector: '[kjField]',
-  standalone: true,
-  exportAs: 'kjField',
-  providers: [{ provide: KJ_FIELD, useExisting: KjField }],
-  host: {
-    '[attr.data-orientation]': 'kjFieldOrientation()',
-    '[attr.data-required]': 'required() ? "" : null',
-    '[attr.data-invalid]': 'invalid() ? "" : null',
-    '[attr.data-disabled]': 'disabled() ? "" : null',
-  },
-})
-export class KjField implements KjFieldContext {
-  private readonly uid = ++kjFieldIdCounter;
-
-  /** Layout orientation. Reflected as `data-orientation`. */
-  readonly kjFieldOrientation = input<'vertical' | 'horizontal'>('vertical');
-
-  /** Whether the inner control is required. Drives the visual `*` and
-   * `aria-required` on the control. */
-  readonly kjRequired = input<boolean, unknown>(false, {
-    transform: booleanAttribute,
-  });
-
-  /** Whether the field (and its inner control) is disabled. Forwarded to
-   * the control via the field context. */
-  readonly kjDisabled = input<boolean, unknown>(false, {
-    transform: booleanAttribute,
-  });
-
-  /** Whether the inner control is currently in error state. Drives
-   * `aria-invalid` on the control and toggles visibility of error
-   * children. */
-  readonly kjInvalid = input<boolean, unknown>(false, {
-    transform: booleanAttribute,
-  });
-
-  /** Override the auto-minted id for the inner control. When unset, the
-   * field generates a stable `kj-field-N` id. */
-  readonly kjFieldId = input<string | undefined>(undefined);
-
-  /** Override the auto-minted id for the field's label element. */
-  readonly kjFieldLabelId = input<string | undefined>(undefined);
-
-  /** @internal */ readonly controlId = computed(
-    () => this.kjFieldId() ?? `kj-field-${this.uid}`,
-  );
-  /** @internal */ readonly labelId = computed(
-    () => this.kjFieldLabelId() ?? `kj-field-label-${this.uid}`,
-  );
-  /** @internal */ readonly required = computed(() => this.kjRequired());
-  /** @internal */ readonly disabled = computed(() => this.kjDisabled());
-  /** @internal */ readonly invalid = computed(() => this.kjInvalid());
-
-  // Two parallel registrations (help + error) keep the order stable: hints
-  // first, errors second. Each registration is an ordered array of ids.
-  private readonly helpIds = signal<readonly string[]>([]);
-  private readonly errorIds = signal<readonly string[]>([]);
-
-  /** @internal */ readonly describedByIds = computed<string[]>(() => {
-    const help = this.helpIds();
-    // Errors only contribute to describedby when the field is invalid —
-    // otherwise SR would announce error text on focus when the user hasn't
-    // yet failed validation.
-    const errors = this.invalid() ? this.errorIds() : [];
-    const seen = new Set<string>();
-    const out: string[] = [];
-    for (const id of [...help, ...errors]) {
-      if (id && !seen.has(id)) {
-        seen.add(id);
-        out.push(id);
-      }
-    }
-    return out;
-  });
-
-  /** @internal */
-  registerDescribedBy(id: string, kind: 'help' | 'error'): () => void {
-    const target = kind === 'help' ? this.helpIds : this.errorIds;
-    target.update((ids) => (ids.includes(id) ? ids : [...ids, id]));
-    return () => target.update((ids) => ids.filter((x) => x !== id));
-  }
-}

package/src/field/index.ts

@@ -1,6 +0,0 @@
-export { KjField } from './field';
-export { KjFieldLabel } from './field-label';
-export { KjFieldHelp } from './field-help';
-export { KjFieldError } from './field-error';
-export { KjFieldGroup } from './field-group';
-export { KJ_FIELD, type KjFieldContext } from './field.context';

package/src/file-upload/file-upload.context.ts

@@ -1,89 +0,0 @@
-import { InjectionToken, Signal } from '@angular/core';
-import { KjFileStatus, KjUploadableFile } from './file-upload.types';
-
-/**
- * Aggregate status across the full file list. Drives `data-status` on the
- * root host so theme CSS can style the wrapper differently while uploads are
- * in flight.
- */
-export type KjFileUploadAggregateStatus =
-  | 'idle'
-  | 'pending'
-  | 'uploading'
-  | 'complete'
-  | 'partial-error';
-
-/**
- * Public context the root `KjFileUpload` exposes via DI. Child directives
- * (`KjFileUploadTrigger`, `KjFileUploadDropzone`, `KjFileUploadList`,
- * `KjFileUploadItem`) inject this token.
- */
-export interface KjFileUploadContext {
-  /** Files currently selected (in selection order). Removed entries are dropped. */
-  readonly files: Signal<readonly KjUploadableFile[]>;
-  /** Whether the root is disabled. Drop-zone, trigger, and per-row controls all gate on this. */
-  readonly disabled: Signal<boolean>;
-  /** True while at least one file is being dragged over the drop-zone host. */
-  readonly dragActive: Signal<boolean>;
-  /** Aggregate status for the whole list. */
-  readonly aggregateStatus: Signal<KjFileUploadAggregateStatus>;
-  /** Whether `kjMultiple` is on. */
-  readonly multiple: Signal<boolean>;
-  /** Configured `accept` MIME / extension list (or `undefined`). */
-  readonly accept: Signal<string | undefined>;
-  /** Maximum bytes per file (or `undefined` for no per-file cap). */
-  readonly maxSize: Signal<number | undefined>;
-  /** Maximum total file count (or `undefined`). */
-  readonly maxFiles: Signal<number | undefined>;
-
-  /** Open the native file picker. No-op when disabled. */
-  openPicker(): void;
-  /**
-   * Add candidate files (from drop, programmatic add, or the trigger's file
-   * input change event). Validates against `accept` / `maxSize` / `maxFiles`,
-   * mints ids for survivors, appends to the list, and announces.
-   */
-  addFiles(files: readonly File[] | FileList): void;
-  /** Remove a file from the list by id. Aborts an in-flight upload. */
-  remove(id: string): void;
-  /** Clear all files. */
-  clear(): void;
-  /** Re-run the upload simulation / handler for a single file. */
-  retry(id: string): void;
-  /** Cancel an in-flight upload (sets status to `'cancelled'`). */
-  cancel(id: string): void;
-  /** Update per-file progress and status (called by simulators / examples). */
-  setFileStatus(id: string, status: KjFileStatus, progress?: number | null, error?: string): void;
-
-  /** @internal Used by `KjFileUploadTrigger` to register its hidden file input. */
-  registerPickerInput(el: HTMLInputElement): void;
-  /** @internal Used by the trigger / drop-zone to forward `change` events. */
-  onPickerChange(event: Event): void;
-  /** @internal Drag-event handlers delegated from the drop-zone host bindings. */
-  onDragEnter(event: Event): void;
-  onDragOver(event: Event): void;
-  onDragLeave(event: Event): void;
-  onDrop(event: Event): void;
-}
-
-/** DI token for the root `KjFileUpload`. */
-export const KJ_FILE_UPLOAD = new InjectionToken<KjFileUploadContext>('KjFileUpload');
-
-/** Per-row context exposed by `KjFileUploadItem`. */
-export interface KjFileUploadItemContext {
-  /** The current `KjUploadableFile` for the row. */
-  readonly file: Signal<KjUploadableFile>;
-  /** `0..100` or `null`. */
-  readonly progress: Signal<number | null>;
-  /** Per-row status. */
-  readonly status: Signal<KjFileStatus>;
-  /** Re-run the upload for this row. */
-  retry(): void;
-  /** Cancel an in-flight upload for this row. */
-  cancel(): void;
-  /** Remove this row from the list. */
-  remove(): void;
-}
-
-/** DI token for an individual file row. */
-export const KJ_FILE_UPLOAD_ITEM = new InjectionToken<KjFileUploadItemContext>('KjFileUploadItem');

package/src/file-upload/file-upload.spec.ts

@@ -1,290 +0,0 @@
-import { Component, ViewChild, signal, ChangeDetectionStrategy } from '@angular/core';
-import { render, fireEvent } from '@testing-library/angular';
-import { describe, expect, it } from 'vitest';
-import {
-  KjFileUpload,
-  KjFileUploadDropzone,
-  KjFileUploadItem,
-  KjFileUploadList,
-  KjFileUploadTrigger,
-  kjFileMatchesAccept,
-} from './file-upload';
-import type { KjFileRejection } from './file-upload.types';
-
-const imports = [
-  KjFileUpload,
-  KjFileUploadTrigger,
-  KjFileUploadDropzone,
-  KjFileUploadList,
-  KjFileUploadItem,
-];
-
-function makeFile(name: string, size = 100, type = 'text/plain'): File {
-  const blob = new Blob(['x'.repeat(size)], { type });
-  return new File([blob], name, { type });
-}
-
-@Component({
-  standalone: true,
-  imports,
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <div
-      kjFileUpload
-      #u="kjFileUpload"
-      [kjAccept]="accept()"
-      [kjMultiple]="multiple()"
-      [kjMaxSize]="maxSize()"
-      [kjMaxFiles]="maxFiles()"
-      [kjDisabled]="disabled()"
-    >
-      <button kjFileUploadTrigger>Choose</button>
-      <div kjFileUploadDropzone>Drop files here</div>
-      <ul kjFileUploadList>
-        @for (f of u.files(); track f.id) {
-          <li kjFileUploadItem [kjFile]="f" #row="kjFileUploadItem">
-            <span class="row-name">{{ f.file.name }}</span>
-            <span class="row-status">{{ row.status() }}</span>
-            <button class="row-remove" (click)="row.remove()">Remove</button>
-          </li>
-        }
-      </ul>
-    </div>
-  `,
-})
-class Host {
-  readonly accept = signal<string | undefined>(undefined);
-  readonly multiple = signal<boolean>(true);
-  readonly maxSize = signal<number | undefined>(undefined);
-  readonly maxFiles = signal<number | undefined>(undefined);
-  readonly disabled = signal<boolean>(false);
-  @ViewChild(KjFileUpload, { static: true }) upload!: KjFileUpload;
-}
-
-describe('KjFileUpload', () => {
-  describe('selection + validation', () => {
-    it('mints ids and exposes files via context', async () => {
-      const { container, fixture } = await render(Host);
-      const root = container.querySelector('[kjFileUpload]')!;
-      fixture.componentInstance.upload.addFiles([makeFile('a.txt')]);
-      fixture.detectChanges();
-      expect(container.querySelectorAll('[kjFileUploadItem]').length).toBe(1);
-      expect(container.querySelector('.row-name')?.textContent).toBe('a.txt');
-      expect(root.getAttribute('data-status')).toBe('pending');
-    });
-
-    it('rejects files over kjMaxSize', async () => {
-      const { container, fixture } = await render(Host);
-      fixture.componentInstance.maxSize.set(50);
-      fixture.detectChanges();
-      const small = makeFile('s.txt', 10);
-      const big = makeFile('b.txt', 200);
-      fixture.componentInstance.upload.addFiles([small, big]);
-      fixture.detectChanges();
-      const rows = container.querySelectorAll('[kjFileUploadItem]');
-      expect(rows.length).toBe(1);
-      expect(container.querySelector('.row-name')?.textContent).toBe('s.txt');
-    });
-
-    it('rejects files outside kjAccept', async () => {
-      const { container, fixture } = await render(Host);
-      fixture.componentInstance.accept.set('image/*');
-      fixture.detectChanges();
-      const png = makeFile('p.png', 10, 'image/png');
-      const txt = makeFile('t.txt', 10, 'text/plain');
-      fixture.componentInstance.upload.addFiles([png, txt]);
-      fixture.detectChanges();
-      const rows = container.querySelectorAll('[kjFileUploadItem]');
-      expect(rows.length).toBe(1);
-      expect(container.querySelector('.row-name')?.textContent).toBe('p.png');
-    });
-
-    it('caps at kjMaxFiles when adding in multiple mode', async () => {
-      const { container, fixture } = await render(Host);
-      fixture.componentInstance.maxFiles.set(2);
-      fixture.detectChanges();
-      fixture.componentInstance.upload.addFiles([makeFile('a'), makeFile('b'), makeFile('c')]);
-      fixture.detectChanges();
-      expect(container.querySelectorAll('[kjFileUploadItem]').length).toBe(2);
-    });
-
-    it('replaces existing file in single mode', async () => {
-      const { container, fixture } = await render(Host);
-      fixture.componentInstance.multiple.set(false);
-      fixture.detectChanges();
-      fixture.componentInstance.upload.addFiles([makeFile('a.txt')]);
-      fixture.detectChanges();
-      fixture.componentInstance.upload.addFiles([makeFile('b.txt')]);
-      fixture.detectChanges();
-      const rows = container.querySelectorAll('[kjFileUploadItem]');
-      expect(rows.length).toBe(1);
-      expect(container.querySelector('.row-name')?.textContent).toBe('b.txt');
-    });
-
-    it('emits kjReject for size violations', async () => {
-      const { fixture } = await render(Host);
-      fixture.componentInstance.maxSize.set(50);
-      fixture.detectChanges();
-      let rejected: KjFileRejection[] | null = null;
-      fixture.componentInstance.upload.kjReject.subscribe((r) => (rejected = r));
-      fixture.componentInstance.upload.addFiles([makeFile('big', 200)]);
-      expect(rejected).toBeTruthy();
-      expect(rejected[0].reason).toBe('size');
-    });
-  });
-
-  describe('drop-zone', () => {
-    it('reflects data-drag-active on dragenter and clears on dragleave', async () => {
-      const { container, fixture } = await render(Host);
-      const dz = container.querySelector('[kjFileUploadDropzone]') as HTMLElement;
-      expect(dz.hasAttribute('data-drag-active')).toBe(false);
-
-      const ev = new Event('dragenter', { bubbles: true, cancelable: true }) as DragEvent;
-      Object.defineProperty(ev, 'dataTransfer', {
-        value: { types: ['Files'], files: [] as unknown as FileList },
-      });
-      dz.dispatchEvent(ev);
-      fixture.detectChanges();
-      expect(dz.hasAttribute('data-drag-active')).toBe(true);
-
-      const leave = new Event('dragleave', { bubbles: true, cancelable: true }) as DragEvent;
-      Object.defineProperty(leave, 'dataTransfer', {
-        value: { types: ['Files'], files: [] as unknown as FileList },
-      });
-      dz.dispatchEvent(leave);
-      fixture.detectChanges();
-      expect(dz.hasAttribute('data-drag-active')).toBe(false);
-    });
-
-    it('drop adds files', async () => {
-      const { container, fixture } = await render(Host);
-      const dz = container.querySelector('[kjFileUploadDropzone]') as HTMLElement;
-      const file = makeFile('drop.txt');
-      const ev = new Event('drop', { bubbles: true, cancelable: true }) as DragEvent;
-      Object.defineProperty(ev, 'dataTransfer', {
-        value: { types: ['Files'], files: [file] as unknown as FileList },
-      });
-      dz.dispatchEvent(ev);
-      fixture.detectChanges();
-      expect(container.querySelectorAll('[kjFileUploadItem]').length).toBe(1);
-    });
-
-    it('Enter / Space on drop-zone opens picker', async () => {
-      const { container } = await render(Host);
-      const dz = container.querySelector('[kjFileUploadDropzone]') as HTMLElement;
-      const hidden = container.querySelector('input[type=file]') as HTMLInputElement;
-      let clicked = 0;
-      hidden.addEventListener('click', (e) => {
-        e.preventDefault();
-        clicked++;
-      });
-      fireEvent.keyDown(dz, { key: 'Enter' });
-      fireEvent.keyDown(dz, { key: ' ' });
-      expect(clicked).toBe(2);
-    });
-
-    it('drop-zone has role=button, tabindex=0, and aria-label', async () => {
-      const { container } = await render(Host);
-      const dz = container.querySelector('[kjFileUploadDropzone]') as HTMLElement;
-      expect(dz.getAttribute('role')).toBe('button');
-      expect(dz.getAttribute('aria-label')).toBe('Drag files here, or click to browse');
-      expect(dz.getAttribute('tabindex')).toBe('0');
-    });
-  });
-
-  describe('disabled', () => {
-    it('disabled prevents addFiles and reflects aria-disabled on drop-zone', async () => {
-      const { container, fixture } = await render(Host);
-      fixture.componentInstance.disabled.set(true);
-      fixture.detectChanges();
-      const dz = container.querySelector('[kjFileUploadDropzone]') as HTMLElement;
-      expect(dz.getAttribute('aria-disabled')).toBe('true');
-      fixture.componentInstance.upload.addFiles([makeFile('x.txt')]);
-      fixture.detectChanges();
-      expect(container.querySelectorAll('[kjFileUploadItem]').length).toBe(0);
-    });
-  });
-
-  describe('per-row controls', () => {
-    it('remove button removes the row', async () => {
-      const { container, fixture } = await render(Host);
-      fixture.componentInstance.upload.addFiles([makeFile('a'), makeFile('b')]);
-      fixture.detectChanges();
-      expect(container.querySelectorAll('[kjFileUploadItem]').length).toBe(2);
-      const removeBtn = container.querySelector('.row-remove') as HTMLElement;
-      fireEvent.click(removeBtn);
-      fixture.detectChanges();
-      expect(container.querySelectorAll('[kjFileUploadItem]').length).toBe(1);
-    });
-
-    it('retry resets a row to pending', async () => {
-      const { fixture } = await render(Host);
-      fixture.componentInstance.upload.addFiles([makeFile('a')]);
-      const id = fixture.componentInstance.upload.files()[0].id;
-      fixture.componentInstance.upload.setFileStatus(id, 'error', null, 'boom');
-      expect(fixture.componentInstance.upload.files()[0].status).toBe('error');
-      fixture.componentInstance.upload.retry(id);
-      expect(fixture.componentInstance.upload.files()[0].status).toBe('pending');
-    });
-  });
-
-  describe('aggregateStatus', () => {
-    it('idle when empty, pending after add, uploading then complete after status updates', async () => {
-      const { container, fixture } = await render(Host);
-      const root = container.querySelector('[kjFileUpload]') as HTMLElement;
-      expect(root.getAttribute('data-status')).toBe('idle');
-      fixture.componentInstance.upload.addFiles([makeFile('a')]);
-      fixture.detectChanges();
-      expect(root.getAttribute('data-status')).toBe('pending');
-      const id = fixture.componentInstance.upload.files()[0].id;
-      fixture.componentInstance.upload.setFileStatus(id, 'uploading', 50);
-      fixture.detectChanges();
-      expect(root.getAttribute('data-status')).toBe('uploading');
-      fixture.componentInstance.upload.setFileStatus(id, 'done', 100);
-      fixture.detectChanges();
-      expect(root.getAttribute('data-status')).toBe('complete');
-    });
-  });
-
-  describe('list semantics', () => {
-    it('list has role=list and items have role=listitem with data-status', async () => {
-      const { container, fixture } = await render(Host);
-      const list = container.querySelector('[kjFileUploadList]') as HTMLElement;
-      expect(list.getAttribute('role')).toBe('list');
-      fixture.componentInstance.upload.addFiles([makeFile('a')]);
-      fixture.detectChanges();
-      const item = container.querySelector('[kjFileUploadItem]') as HTMLElement;
-      expect(item.getAttribute('role')).toBe('listitem');
-      expect(item.getAttribute('data-status')).toBe('pending');
-    });
-  });
-});
-
-describe('kjFileMatchesAccept', () => {
-  const f = (name: string, type = '') => new File([new Blob([])], name, { type });
-
-  it('returns true when accept is empty / undefined', () => {
-    expect(kjFileMatchesAccept(f('a.txt'), undefined)).toBe(true);
-    expect(kjFileMatchesAccept(f('a.txt'), '')).toBe(true);
-  });
-
-  it('matches by exact MIME type', () => {
-    expect(kjFileMatchesAccept(f('a.png', 'image/png'), 'image/png')).toBe(true);
-    expect(kjFileMatchesAccept(f('a.png', 'image/png'), 'image/jpeg')).toBe(false);
-  });
-
-  it('matches by MIME prefix (image/*)', () => {
-    expect(kjFileMatchesAccept(f('a.png', 'image/png'), 'image/*')).toBe(true);
-    expect(kjFileMatchesAccept(f('a.txt', 'text/plain'), 'image/*')).toBe(false);
-  });
-
-  it('falls back to extension matching when file.type is empty', () => {
-    expect(kjFileMatchesAccept(f('a.heic', ''), '.heic')).toBe(true);
-    expect(kjFileMatchesAccept(f('a.heic', ''), 'image/*')).toBe(false);
-  });
-
-  it('matches comma-separated lists', () => {
-    expect(kjFileMatchesAccept(f('a.pdf', 'application/pdf'), 'image/*,.pdf')).toBe(true);
-    expect(kjFileMatchesAccept(f('a.png', 'image/png'), 'image/*,.pdf')).toBe(true);
-  });
-});