@kouji-ui/components 0.1.1

package/src/field/field.usage.example.ts

@@ -0,0 +1,63 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { KjAriaDescribedBy } from '@kouji-ui/core';
+import { KjInputComponent } from '../input/input';
+import {
+  KjFieldComponent,
+  KjFieldErrorComponent,
+  KjFieldGroupComponent,
+  KjFieldHelpComponent,
+  KjFieldLabelComponent,
+} from './field';
+
+/**
+ * Common field shapes assembled into one screen — required, with help, with
+ * error, and a prefix/suffix group. Use as the copy-paste starting point for
+ * new forms.
+ */
+@Component({
+  selector: 'kj-field-usage-example',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    KjFieldComponent,
+    KjFieldLabelComponent,
+    KjFieldHelpComponent,
+    KjFieldErrorComponent,
+    KjFieldGroupComponent,
+    KjInputComponent,
+    KjAriaDescribedBy,
+    FormsModule,
+  ],
+  styles: [`
+    :host { display: flex; flex-direction: column; gap: var(--kj-space-lg); max-width: 420px; }
+  `],
+  template: `
+    <kj-field [kjRequired]="true" #email="kjField">
+      <kj-field-label>Email</kj-field-label>
+      <kj-input
+        type="email"
+        kjAriaDescribedBy
+        [id]="email.controlId()"
+        [kjDescribedBy]="$any(email.describedByIds())"
+      />
+      <kj-field-help>We'll never share your email.</kj-field-help>
+    </kj-field>
+
+    <kj-field [kjInvalid]="true">
+      <kj-field-label>Username</kj-field-label>
+      <kj-input type="text" value="invalid name" [invalid]="true" />
+      <kj-field-error>Username can only contain letters and numbers.</kj-field-error>
+    </kj-field>
+
+    <kj-field>
+      <kj-field-label>Price</kj-field-label>
+      <kj-field-group>
+        <span prefix>$</span>
+        <kj-input type="text" placeholder="0.00" />
+        <span suffix>USD</span>
+      </kj-field-group>
+    </kj-field>
+  `,
+})
+export class KjFieldUsageExample {}

package/src/field/index.ts

@@ -0,0 +1,7 @@
+export {
+  KjFieldComponent,
+  KjFieldLabelComponent,
+  KjFieldHelpComponent,
+  KjFieldErrorComponent,
+  KjFieldGroupComponent,
+} from './field';

package/src/file-upload/_examples/file-upload.dropzone.example.ts

@@ -0,0 +1,32 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjFileUploadComponent } from '../file-upload';
+
+/**
+ * Drop-zone-focused configuration. Larger drop area, custom label and hint
+ * to highlight drag-and-drop as the primary path. Click-to-browse remains
+ * available for keyboard / single-pointer users (WCAG 2.5.7).
+ */
+@Component({
+  selector: 'kj-file-upload-dropzone-example',
+  standalone: true,
+  imports: [KjFileUploadComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+      .kj-file-upload__dropzone {
+        min-height: 14rem;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-file-upload
+      kjAccept=".pdf,.txt,.md"
+      kjDropzoneLabel="Drop documents here"
+      kjDropzoneHint="PDF, TXT, or Markdown — drag from your file manager or use the button below"
+    />
+  `,
+})
+export class KjFileUploadDropzoneExample {}

package/src/file-upload/_examples/file-upload.example.ts

@@ -0,0 +1,29 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjFileUploadComponent } from '../file-upload';
+
+/**
+ * Default usage example for KjFileUploadComponent.
+ * A single-file picker with a styled drop-zone and a toolbar trigger.
+ */
+@Component({
+  selector: 'kj-file-upload-example',
+  standalone: true,
+  imports: [KjFileUploadComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-file-upload
+      [kjMultiple]="false"
+      kjDropzoneLabel="Drop a file here, or click to browse"
+      kjDropzoneHint="One file at a time"
+      kjTriggerLabel="Choose a file"
+    />
+  `,
+})
+export class KjFileUploadExample {}

package/src/file-upload/_examples/file-upload.image-preview.example.ts

@@ -0,0 +1,31 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjFileUploadComponent } from '../file-upload';
+
+/**
+ * Image-only picker with thumbnail previews. `kjShowPreview` enables the
+ * inline `<img>` in each image row; the wrapper handles
+ * `URL.createObjectURL` lifecycle (revoking on destroy).
+ */
+@Component({
+  selector: 'kj-file-upload-image-preview-example',
+  standalone: true,
+  imports: [KjFileUploadComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-file-upload
+      kjAccept="image/*"
+      [kjMaxFiles]="6"
+      [kjShowPreview]="true"
+      kjDropzoneLabel="Drop images here"
+      kjDropzoneHint="PNG, JPG, GIF, WebP — up to 6 images"
+    />
+  `,
+})
+export class KjFileUploadImagePreviewExample {}

package/src/file-upload/_examples/file-upload.multiple.example.ts

@@ -0,0 +1,23 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjFileUploadComponent } from '../file-upload';
+
+/**
+ * Multiple-file picker. The default flavour (matches `KjFileUpload`'s
+ * `kjMultiple` default) — drop / browse to add files; the row list grows
+ * with each interaction.
+ */
+@Component({
+  selector: 'kj-file-upload-multiple-example',
+  standalone: true,
+  imports: [KjFileUploadComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: ` <kj-file-upload [kjMaxFiles]="5" kjDropzoneHint="Up to 5 files" /> `,
+})
+export class KjFileUploadMultipleExample {}

package/src/file-upload/_examples/file-upload.with-progress.example.ts

@@ -0,0 +1,59 @@
+import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core';
+import { KjFileUploadComponent } from '../file-upload';
+
+/**
+ * Simulated upload demo. A consumer-side `runFakeUpload` uses
+ * `setInterval` to drive each new row from `pending → uploading → done`,
+ * pushing progress through `KjFileUpload.setFileStatus`. The
+ * `KjProgressBar` inside each row reads `progress` from the per-row context
+ * and renders the determinate fill.
+ *
+ * In a real app, swap `runFakeUpload` for an `HttpClient.request(...)`
+ * pipeline that maps `HttpEventType.UploadProgress / Response / Error`
+ * onto the same `setFileStatus` calls.
+ */
+@Component({
+  selector: 'kj-file-upload-with-progress-example',
+  standalone: true,
+  imports: [KjFileUploadComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-file-upload
+      #picker
+      [kjMaxSize]="10_000_000"
+      kjDropzoneHint="Up to 10 MB per file — uploads start automatically"
+      (kjSelect)="onSelect()"
+    />
+  `,
+})
+export class KjFileUploadWithProgressExample {
+  @ViewChild('picker', { static: true }) picker!: KjFileUploadComponent;
+
+  onSelect(): void {
+    // Drive any pending row(s) through a simulated upload.
+    for (const f of this.picker.upload.files()) {
+      if (f.status === 'pending') this.runFakeUpload(f.id);
+    }
+  }
+
+  private runFakeUpload(id: string): void {
+    let progress = 0;
+    this.picker.upload.setFileStatus(id, 'uploading', 0);
+    const tick = setInterval(() => {
+      progress += 12;
+      if (progress >= 100) {
+        this.picker.upload.setFileStatus(id, 'done', 100);
+        clearInterval(tick);
+      } else {
+        this.picker.upload.setFileStatus(id, 'uploading', progress);
+      }
+    }, 220);
+  }
+}

package/src/file-upload/_examples/index.ts

@@ -0,0 +1,7 @@
+// AUTO-GENERATED by scripts/migrate-examples.mjs
+// One barrel per component folder — used by the docs app as a lazy chunk.
+export { KjFileUploadDropzoneExample } from './file-upload.dropzone.example';
+export { KjFileUploadExample } from './file-upload.example';
+export { KjFileUploadImagePreviewExample } from './file-upload.image-preview.example';
+export { KjFileUploadMultipleExample } from './file-upload.multiple.example';
+export { KjFileUploadWithProgressExample } from './file-upload.with-progress.example';

package/src/file-upload/file-upload.css

@@ -0,0 +1,207 @@
+/* ─────────────────────────────────────────────────────────────
+   .kj-file-upload — themed wrapper for the headless KjFileUpload
+   directive family. The directives own state + ARIA; CSS only
+   handles drop-zone / list / row visuals, drag-active highlight,
+   and per-row status icons.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  .kj-file-upload {
+    --kj-file-upload-gap:           var(--kj-space-md, 0.75rem);
+    --kj-file-upload-radius:        var(--kj-radius-md, 0.5rem);
+    --kj-file-upload-border:        1px dashed var(--kj-border-default, #d4d4d8);
+    --kj-file-upload-border-active: 2px dashed var(--kj-bg-primary, #2563eb);
+    --kj-file-upload-bg:            var(--kj-bg-field, transparent);
+    --kj-file-upload-bg-active:     color-mix(in oklch, var(--kj-bg-primary) 8%, transparent);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--kj-file-upload-gap);
+    width: 100%;
+  }
+
+  .kj-file-upload[data-disabled] {
+    opacity: 0.55;
+    pointer-events: none;
+  }
+
+  /* ── Drop-zone ───────────────────────────────────────────── */
+  .kj-file-upload__dropzone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--kj-space-sm, 0.5rem);
+    padding: var(--kj-space-xl, 2rem) var(--kj-space-md, 1rem);
+    border: var(--kj-file-upload-border);
+    border-radius: var(--kj-file-upload-radius);
+    background: var(--kj-file-upload-bg);
+    color: var(--kj-fg-default, currentColor);
+    text-align: center;
+    cursor: pointer;
+    transition: background-color 150ms ease-out, border-color 150ms ease-out;
+    min-height: 8rem; /* roomy enough for a thumbnail grid in the gallery example */
+  }
+
+  .kj-file-upload__dropzone:focus-visible {
+    outline: 2px solid var(--kj-bg-primary, #2563eb);
+    outline-offset: 2px;
+  }
+
+  .kj-file-upload__dropzone[data-drag-active] {
+    border: var(--kj-file-upload-border-active);
+    background: var(--kj-file-upload-bg-active);
+  }
+
+  .kj-file-upload__dropzone[data-disabled] {
+    cursor: not-allowed;
+  }
+
+  .kj-file-upload__dropzone-hint {
+    font-size: 0.875rem;
+    color: var(--kj-fg-muted, #71717a);
+  }
+
+  /* ── Toolbar (trigger button) ───────────────────────────── */
+  .kj-file-upload__toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--kj-space-sm, 0.5rem);
+    align-items: center;
+  }
+
+  /* ── List + rows ────────────────────────────────────────── */
+  .kj-file-upload__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--kj-space-xs, 0.25rem);
+  }
+
+  .kj-file-upload__list:empty {
+    display: none;
+  }
+
+  .kj-file-upload__row {
+    display: flex;
+    align-items: center;
+    gap: var(--kj-space-sm, 0.5rem);
+    padding: var(--kj-space-sm, 0.5rem) var(--kj-space-md, 0.75rem);
+    border: 1px solid var(--kj-border-muted, #e4e4e7);
+    border-radius: var(--kj-file-upload-radius);
+    background: var(--kj-bg-surface, transparent);
+  }
+
+  .kj-file-upload__row[data-status="error"] {
+    border-color: var(--kj-fg-danger, #ef4444);
+    background: color-mix(in oklch, var(--kj-bg-danger, #ef4444) 8%, transparent);
+  }
+
+  .kj-file-upload__row[data-status="done"] {
+    border-color: var(--kj-fg-success, #10b981);
+  }
+
+  .kj-file-upload__row[data-status="cancelled"] {
+    opacity: 0.6;
+  }
+
+  .kj-file-upload__thumb {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: var(--kj-radius-sm, 0.25rem);
+    object-fit: cover;
+    background: var(--kj-bg-surface, #e4e4e7);
+    flex: none;
+  }
+
+  .kj-file-upload__row-body {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .kj-file-upload__row-meta {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--kj-space-sm, 0.5rem);
+    font-size: 0.875rem;
+  }
+
+  .kj-file-upload__row-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .kj-file-upload__row-size {
+    color: var(--kj-fg-muted, #71717a);
+    font-variant-numeric: tabular-nums;
+    flex: none;
+  }
+
+  .kj-file-upload__row-status {
+    font-size: 0.75rem;
+    color: var(--kj-fg-muted, #71717a);
+  }
+
+  .kj-file-upload__row[data-status="error"] .kj-file-upload__row-status {
+    color: var(--kj-fg-danger, #ef4444);
+  }
+
+  .kj-file-upload__row[data-status="done"] .kj-file-upload__row-status {
+    color: var(--kj-fg-success, #10b981);
+  }
+
+  .kj-file-upload__row-actions {
+    display: flex;
+    gap: var(--kj-space-xs, 0.25rem);
+    align-items: center;
+    flex: none;
+  }
+
+  /* Status icons — pure CSS, ::before content covers ✓ ✕ … */
+  .kj-file-upload__row-icon {
+    width: 1rem;
+    height: 1rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.875rem;
+    line-height: 1;
+  }
+  .kj-file-upload__row-icon[data-status="done"] { color: var(--kj-fg-success, #10b981); }
+  .kj-file-upload__row-icon[data-status="done"]::before { content: "✓"; }
+  .kj-file-upload__row-icon[data-status="error"] { color: var(--kj-fg-danger, #ef4444); }
+  .kj-file-upload__row-icon[data-status="error"]::before { content: "✕"; }
+  .kj-file-upload__row-icon[data-status="uploading"]::before { content: "…"; }
+
+  .kj-file-upload__remove {
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+    color: inherit;
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--kj-radius-sm, 0.25rem);
+    font-size: 0.875rem;
+    min-width: 44px;
+    min-height: 44px; /* WCAG 2.5.5 touch target floor */
+  }
+  .kj-file-upload__remove:focus-visible {
+    outline: 2px solid var(--kj-bg-primary, #2563eb);
+    outline-offset: 2px;
+  }
+  .kj-file-upload__remove:hover {
+    background: var(--kj-bg-surface, #e4e4e7);
+  }
+
+  /* Reduced motion: collapse drop-zone hover transitions */
+  @media (prefers-reduced-motion: reduce) {
+    .kj-file-upload__dropzone {
+      transition: none;
+    }
+  }
+}

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

@@ -0,0 +1,84 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { KjFileUploadComponent } from './file-upload';
+import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
+
+/**
+ * Playground state — module-scope signals. Drives the dropzone visibility,
+ * its label text, the multi-file toggle, and a max-files cap. The
+ * `kjShowPreview` toggle covers the image-thumbnail variant.
+ */
+const showDropzone = signal(true);
+const dropzoneLabel = signal('Drop files here');
+const multiple = signal(true);
+const maxFiles = signal<1 | 3 | 5 | 10>(5);
+const showPreview = signal(false);
+const disabled = signal(false);
+
+@Component({
+  selector: 'kj-file-upload-playground',
+  standalone: true,
+  imports: [KjFileUploadComponent],
+  styles: [`
+    :host { display: block; max-width: 480px; }
+    .kj-file-upload__dropzone { min-height: 10rem; }
+  `],
+  template: `
+    <kj-file-upload
+      kjAccept="image/*,.pdf"
+      [kjShowDropzone]="showDropzone()"
+      [kjDropzoneLabel]="dropzoneLabel()"
+      kjDropzoneHint="Images or PDFs — drag from your file manager or use the button below"
+      [kjMultiple]="multiple()"
+      [kjMaxFiles]="maxFiles()"
+      [kjShowPreview]="showPreview()"
+      [kjDisabled]="disabled()"
+    />
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjFileUploadPlaygroundDemo {
+  protected readonly showDropzone = showDropzone;
+  protected readonly dropzoneLabel = dropzoneLabel;
+  protected readonly multiple = multiple;
+  protected readonly maxFiles = maxFiles;
+  protected readonly showPreview = showPreview;
+  protected readonly disabled = disabled;
+}
+
+export const PLAYGROUND: PlaygroundFile = {
+  component: KjFileUploadPlaygroundDemo,
+  state: {
+    showDropzone: showDropzone as unknown as ReturnType<typeof signal>,
+    dropzoneLabel: dropzoneLabel as unknown as ReturnType<typeof signal>,
+    multiple: multiple as unknown as ReturnType<typeof signal>,
+    maxFiles: maxFiles as unknown as ReturnType<typeof signal>,
+    showPreview: showPreview as unknown as ReturnType<typeof signal>,
+    disabled: disabled as unknown as ReturnType<typeof signal>,
+  },
+  controls: [
+    { kind: 'toggle', name: 'showDropzone', label: 'show dropzone' },
+    { kind: 'text', name: 'dropzoneLabel', label: 'dropzone label' },
+    { kind: 'toggle', name: 'multiple', label: 'multiple' },
+    { kind: 'chips', name: 'maxFiles', label: 'max files', options: [1, 3, 5, 10] },
+    { kind: 'toggle', name: 'showPreview', label: 'image preview' },
+    { kind: 'toggle', name: 'disabled', label: 'disabled' },
+  ],
+  snippet: (values) => {
+    const s = values as {
+      showDropzone: boolean;
+      dropzoneLabel: string;
+      multiple: boolean;
+      maxFiles: number;
+      showPreview: boolean;
+      disabled: boolean;
+    };
+    const attrs: string[] = ['kjAccept="image/*,.pdf"'];
+    if (!s.showDropzone) attrs.push('[kjShowDropzone]="false"');
+    if (s.dropzoneLabel) attrs.push(`kjDropzoneLabel="${s.dropzoneLabel}"`);
+    if (!s.multiple) attrs.push('[kjMultiple]="false"');
+    attrs.push(`[kjMaxFiles]="${s.maxFiles}"`);
+    if (s.showPreview) attrs.push('[kjShowPreview]="true"');
+    if (s.disabled) attrs.push('[kjDisabled]="true"');
+    return `<kj-file-upload\n  ${attrs.join('\n  ')}\n/>`;
+  },
+};

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

@@ -0,0 +1,94 @@
+import { Component } from '@angular/core';
+import { render, fireEvent } from '@testing-library/angular';
+import { describe, expect, it } from 'vitest';
+import { KjFileUploadComponent } from './file-upload';
+
+const imports = [KjFileUploadComponent];
+
+function makeFile(name: string, size = 100, type = 'text/plain'): File {
+  const blob = new Blob(['x'.repeat(size)], { type });
+  return new File([blob], name, { type });
+}
+
+describe('KjFileUploadComponent', () => {
+  it('renders the wrapper, drop-zone, trigger, and empty list', async () => {
+    @Component({ standalone: true, imports, template: `<kj-file-upload />` })
+    class Host {}
+    const { container } = await render(Host);
+    expect(container.querySelector('.kj-file-upload')).toBeTruthy();
+    expect(container.querySelector('.kj-file-upload__dropzone')).toBeTruthy();
+    expect(container.querySelector('.kj-file-upload__trigger')).toBeTruthy();
+    const list = container.querySelector('.kj-file-upload__list') as HTMLElement;
+    expect(list).toBeTruthy();
+    // No rows yet
+    expect(list.querySelectorAll('.kj-file-upload__row').length).toBe(0);
+  });
+
+  it('hides the drop-zone when kjShowDropzone="false"', async () => {
+    @Component({
+      standalone: true,
+      imports,
+      template: `<kj-file-upload [kjShowDropzone]="false" />`,
+    })
+    class Host {}
+    const { container } = await render(Host);
+    expect(container.querySelector('.kj-file-upload__dropzone')).toBeFalsy();
+  });
+
+  it('renders rows with name + size after a file is selected', async () => {
+    @Component({ standalone: true, imports, template: `<kj-file-upload />` })
+    class Host {}
+    const { container, fixture } = await render(Host);
+    const hidden = container.querySelector('input[type=file]') as HTMLInputElement;
+    Object.defineProperty(hidden, 'files', { value: [makeFile('hello.txt', 1500)] });
+    fireEvent.change(hidden);
+    fixture.detectChanges();
+    const row = container.querySelector('.kj-file-upload__row') as HTMLElement;
+    expect(row).toBeTruthy();
+    expect(row.querySelector('.kj-file-upload__row-name')?.textContent).toContain('hello.txt');
+    expect(row.querySelector('.kj-file-upload__row-size')?.textContent).toContain('1.5 KB');
+  });
+
+  it('Remove button removes a row', async () => {
+    @Component({ standalone: true, imports, template: `<kj-file-upload />` })
+    class Host {}
+    const { container, fixture } = await render(Host);
+    const hidden = container.querySelector('input[type=file]') as HTMLInputElement;
+    Object.defineProperty(hidden, 'files', { value: [makeFile('a'), makeFile('b')] });
+    fireEvent.change(hidden);
+    fixture.detectChanges();
+    expect(container.querySelectorAll('.kj-file-upload__row').length).toBe(2);
+    const remove = container.querySelector('.kj-file-upload__remove') as HTMLElement;
+    fireEvent.click(remove);
+    fixture.detectChanges();
+    expect(container.querySelectorAll('.kj-file-upload__row').length).toBe(1);
+  });
+
+  it('drop-zone has aria-label and role=button', async () => {
+    @Component({
+      standalone: true,
+      imports,
+      template: `<kj-file-upload kjDropzoneLabel="Drop here" />`,
+    })
+    class Host {}
+    const { container } = await render(Host);
+    const dz = container.querySelector('.kj-file-upload__dropzone') as HTMLElement;
+    expect(dz.getAttribute('role')).toBe('button');
+    expect(dz.getAttribute('aria-label')).toBe('Drop here');
+  });
+
+  it('respects kjMaxFiles', async () => {
+    @Component({
+      standalone: true,
+      imports,
+      template: `<kj-file-upload [kjMaxFiles]="1" />`,
+    })
+    class Host {}
+    const { container, fixture } = await render(Host);
+    const hidden = container.querySelector('input[type=file]') as HTMLInputElement;
+    Object.defineProperty(hidden, 'files', { value: [makeFile('a'), makeFile('b')] });
+    fireEvent.change(hidden);
+    fixture.detectChanges();
+    expect(container.querySelectorAll('.kj-file-upload__row').length).toBe(1);
+  });
+});