@kouji-ui/core 0.0.4 → 0.1.1

package/src/field/field.spec.ts

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

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

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

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

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