@kouji-ui/components 0.1.1

package/src/date-picker/date-picker.playground.ts

@@ -0,0 +1,79 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { KjDatePickerComponent } from './date-picker';
+import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
+
+/**
+ * Playground state — module-scope signals. Knobs cover the placeholder, the
+ * first-day-of-week, and the read-only / disabled postures. The seeded value
+ * tracks today's date so the popover anchors against a populated field.
+ */
+const placeholder = signal('Pick a date');
+const firstDayOfWeek = signal<0 | 1 | 6>(0);
+const readonly = signal(false);
+const disabled = signal(false);
+const value = signal<Date | null>(new Date());
+
+@Component({
+  selector: 'kj-date-picker-playground',
+  standalone: true,
+  imports: [KjDatePickerComponent],
+  styles: [`
+    :host { display: flex; flex-direction: column; gap: var(--kj-space-md); min-height: 20rem; }
+    .selected { font-family: var(--kj-font-mono, monospace); color: var(--kj-fg-muted); font-size: 0.875rem; }
+  `],
+  template: `
+    <kj-date-picker
+      [(kjValue)]="value"
+      [kjPlaceholder]="placeholder()"
+      [kjFirstDayOfWeek]="firstDayOfWeek()"
+      [kjReadonly]="readonly()"
+      [kjDisabled]="disabled()"
+    />
+    <p class="selected">Selected: {{ value()?.toDateString() ?? '—' }}</p>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjDatePickerPlaygroundDemo {
+  protected readonly placeholder = placeholder;
+  protected readonly firstDayOfWeek = firstDayOfWeek;
+  protected readonly readonly = readonly;
+  protected readonly disabled = disabled;
+  protected readonly value = value;
+}
+
+export const PLAYGROUND: PlaygroundFile = {
+  component: KjDatePickerPlaygroundDemo,
+  state: {
+    placeholder: placeholder as unknown as ReturnType<typeof signal>,
+    firstDayOfWeek: firstDayOfWeek as unknown as ReturnType<typeof signal>,
+    readonly: readonly as unknown as ReturnType<typeof signal>,
+    disabled: disabled as unknown as ReturnType<typeof signal>,
+  },
+  controls: [
+    { kind: 'text', name: 'placeholder', label: 'placeholder' },
+    {
+      kind: 'chips',
+      name: 'firstDayOfWeek',
+      label: 'week starts',
+      options: [0, 1, 6],
+    },
+    { kind: 'toggle', name: 'readonly', label: 'read-only' },
+    { kind: 'toggle', name: 'disabled', label: 'disabled' },
+  ],
+  snippet: (values) => {
+    const s = values as {
+      placeholder: string;
+      firstDayOfWeek: number;
+      readonly: boolean;
+      disabled: boolean;
+    };
+    const attrs: string[] = [
+      `kjPlaceholder="${s.placeholder}"`,
+      `[kjFirstDayOfWeek]="${s.firstDayOfWeek}"`,
+      '[(kjValue)]="when"',
+    ];
+    if (s.readonly) attrs.push('[kjReadonly]="true"');
+    if (s.disabled) attrs.push('[kjDisabled]="true"');
+    return `<kj-date-picker\n  ${attrs.join('\n  ')}\n/>`;
+  },
+};

package/src/date-picker/date-picker.spec.ts

@@ -0,0 +1,71 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { describe, expect, test, beforeEach } from 'vitest';
+import { KjDatePickerComponent } from './date-picker';
+
+@Component({
+  standalone: true,
+  imports: [KjDatePickerComponent],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `<kj-date-picker [(kjValue)]="value" [(kjOpen)]="open" />`,
+})
+class HostComponent {
+  value = signal<Date | null>(null);
+  open = signal(false);
+}
+
+describe('KjDatePickerComponent', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({ imports: [HostComponent] });
+  });
+
+  test('renders an input + toggle button', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('input.kj-date-picker__input')).not.toBeNull();
+    expect(fixture.nativeElement.querySelector('button.kj-date-picker__toggle')).not.toBeNull();
+  });
+
+  test('toggle button has aria-haspopup="dialog" + aria-controls', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    const toggle = fixture.nativeElement.querySelector('button.kj-date-picker__toggle');
+    expect(toggle.getAttribute('aria-haspopup')).toBe('dialog');
+    expect(toggle.getAttribute('aria-controls')).toMatch(/^kj-date-picker-panel-/);
+  });
+
+  test('toggle click opens the panel', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    const toggle = fixture.nativeElement.querySelector(
+      'button.kj-date-picker__toggle',
+    ) as HTMLButtonElement;
+    toggle.click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.open()).toBe(true);
+    const panel = fixture.nativeElement.querySelector('.kj-date-picker__panel');
+    expect(panel.hasAttribute('hidden')).toBe(false);
+  });
+
+  test('panel is hidden initially', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    const panel = fixture.nativeElement.querySelector('.kj-date-picker__panel');
+    expect(panel.hasAttribute('hidden')).toBe(true);
+  });
+
+  test('clicking a calendar day selects and closes', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.componentInstance.open.set(true);
+    fixture.componentInstance.value.set(new Date(2025, 3, 15));
+    fixture.detectChanges();
+    const cells = fixture.nativeElement.querySelectorAll('button.kj-calendar__day');
+    expect(cells.length).toBe(42);
+    // Click cell 15 (some interior cell that is in-month)
+    const cell = cells[20] as HTMLButtonElement;
+    cell.click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.open()).toBe(false);
+    expect(fixture.componentInstance.value()).not.toBeNull();
+  });
+});

package/src/date-picker/date-picker.ts

@@ -0,0 +1,185 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+  booleanAttribute,
+  input,
+  model,
+} from '@angular/core';
+import {
+  KjDatePicker,
+  KjDatePickerCalendar,
+  KjDatePickerTrigger,
+} from '@kouji-ui/core';
+import { KjCalendarComponent } from '../calendar/calendar';
+
+/**
+ * Styled Date Picker. Pairs a typed `<input>` with a popover calendar for
+ * single-date selection.
+ *
+ * Native `Date` only — locale-aware formatting and parsing via
+ * `Intl.DateTimeFormat`. The input is the focusable form control; the toggle
+ * button to its right opens the calendar; clicking a day cell commits the
+ * value and closes the popover.
+ *
+ * **Accessibility (WCAG 2.1 AAA):**
+ * - input has `role="combobox"` + `aria-haspopup="dialog"` + `aria-expanded`
+ *   + `aria-controls` per APG combobox+dialog pattern.
+ * - panel has `role="dialog"` and `aria-modal="false"` (non-modal popup —
+ *   Esc + outside-click close, focus restored to the input on close).
+ * - keyboard: ArrowDown / Alt+ArrowDown opens; Escape closes; Enter parses
+ *   and commits typed text. Inside the calendar, the full APG day-grid
+ *   keyboard contract applies.
+ *
+ * @doc-example Default
+ *   Typed input plus a popover calendar bound to a `signal<Date>`.
+ *   @doc-file date-picker.example.ts
+ * @doc-example Usage
+ *   A walkthrough of the most common date-picker usages — two-way binding,
+ *   min / max bounds, and a read-only field.
+ *   @doc-file date-picker.usage.example.ts
+ * @doc-example Min / max bounds
+ *   `[kjMin]` / `[kjMax]` block out-of-range days in the calendar.
+ *   @doc-file date-picker.with-min-max.example.ts
+ * @doc-example Disabled dates
+ *   `[kjDisabledDates]` predicate disables individual cells (e.g. weekends).
+ *   @doc-file date-picker.disabled-dates.example.ts
+ * @doc-example Locale
+ *   `kjLocale="fr-FR"` flips formatting, parsing, and first day of week.
+ *   @doc-file date-picker.locale.example.ts
+ * @doc-example Read-only
+ *   `[kjReadonly]="true"` displays the value but blocks typing and selection.
+ *   @doc-file date-picker.readonly.example.ts
+ *
+ * @doc-keyboard
+ *   ArrowDown|Alt+ArrowDown — Opens the calendar popover from the input
+ *   Escape                  — Closes the popover and restores focus to the input
+ *   Enter                   — Parses the typed value and commits it (or selects the focused day in the calendar)
+ *   ArrowLeft|ArrowRight    — In the calendar, moves the focused day by 1
+ *   ArrowUp|ArrowDown       — In the calendar, moves the focused day by 7 (one week)
+ *   PageUp|PageDown         — In the calendar, moves the focused day by 1 month
+ *   Home|End                — In the calendar, jumps to the first / last day of the week
+ *
+ * @doc-aria
+ *   role="combobox"   — On the input
+ *   aria-haspopup     — "dialog" on the input
+ *   aria-expanded     — Reflects open / closed state
+ *   aria-controls     — Links the input to the calendar dialog id
+ *   role="dialog"     — On the panel; `aria-modal="false"` (non-modal popup)
+ *   role="grid"       — On the day grid (inherited from `<kj-calendar>`)
+ *
+ * @doc-css-var
+ *   --kj-date-picker-input-height — Input height. `data-size="sm|lg"` overrides; default 2.25rem.
+ *
+ * @doc-touch
+ *   The default 2.25rem (36px) input relies on the inline-control exception
+ *   inside form rows. Use `kjSize="lg"` on the host (or override
+ *   `--kj-date-picker-input-height`) to reach the full 44px touch target.
+ *
+ * @doc-a11y
+ *   Follows the APG combobox + dialog pattern — the input is the focusable
+ *   form control, the popover is non-modal (Esc / outside-click close), and
+ *   focus is restored to the input on close. Min / max / disabled-dates
+ *   predicates apply to both keyboard navigation and pointer selection.
+ *
+ * @doc-related calendar,time-picker,field
+ *
+ * @doc-category Library/Data input
+ * @doc
+ * @doc-name date-picker
+ * @doc-description Themed single-date picker pairing a typed input with a popover calendar and locale-aware parsing.
+ * @doc-is-main
+ */
+@Component({
+  selector: 'kj-date-picker',
+  standalone: true,
+  imports: [
+    KjDatePicker,
+    KjDatePickerTrigger,
+    KjDatePickerCalendar,
+    KjCalendarComponent,
+  ],
+  template: `
+    <div
+      kjDatePicker
+      class="kj-date-picker"
+      #picker="kjDatePicker"
+      [attr.data-size]="kjSize() === 'md' ? null : kjSize()"
+      [kjValue]="kjValue() ?? null!"
+      (kjValueChange)="kjValue.set($event)"
+      [(kjOpen)]="kjOpen"
+      [kjMin]="kjMin() ?? null!"
+      [kjMax]="kjMax() ?? null!"
+      [kjDisabledDates]="kjDisabledDates() ?? null!"
+      [kjLocale]="kjLocale()"
+      [kjFirstDayOfWeek]="kjFirstDayOfWeek() ?? 0"
+      [kjReadonly]="kjReadonly()"
+      [kjDisabled]="kjDisabled()"
+    >
+      <input
+        kjDatePickerTrigger
+        #trig="kjDatePickerTrigger"
+        class="kj-date-picker__input"
+        [placeholder]="kjPlaceholder()"
+      />
+      <div
+        kjDatePickerCalendar
+        [kjFor]="trig"
+        class="kj-date-picker__panel"
+      >
+        <kj-calendar
+          [(kjValue)]="kjValue"
+          [kjMin]="kjMin()"
+          [kjMax]="kjMax()"
+          [kjDisabledDates]="kjDisabledDates()"
+          [kjLocale]="kjLocale()"
+          [kjFirstDayOfWeek]="kjFirstDayOfWeek() ?? 0"
+          (kjValueChange)="onCalendarSelect($event, picker)"
+        />
+      </div>
+    </div>
+  `,
+  styleUrl: './date-picker.css',
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'kj-date-picker-host', style: 'display: contents;' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjDatePickerComponent {
+  /** Currently selected date. Two-way bindable — `[(kjValue)]`. `null` clears. */
+  readonly kjValue = model<Date | null>(null);
+
+  /** Two-way bindable open state for the popover. */
+  readonly kjOpen = model<boolean>(false);
+
+  /** Earliest selectable date (inclusive). `null` = open. */
+  readonly kjMin = input<Date | null>(null);
+
+  /** Latest selectable date (inclusive). `null` = open. */
+  readonly kjMax = input<Date | null>(null);
+
+  /** Per-date predicate; `false` disables the cell. */
+  readonly kjDisabledDates = input<((d: Date) => boolean) | null>(null);
+
+  /** BCP-47 locale tag. Defaults to Angular's `LOCALE_ID`. */
+  readonly kjLocale = input<string>('');
+
+  /** First day of the week override (0=Sun … 6=Sat). */
+  readonly kjFirstDayOfWeek = input<number | null>(null);
+
+  /** Placeholder text for the input. */
+  readonly kjPlaceholder = input<string>('');
+
+  /** Read-only — value displays but cannot be edited. */
+  readonly kjReadonly = input<boolean, boolean | string>(false, { transform: booleanAttribute });
+
+  /** Disable the entire picker. */
+  readonly kjDisabled = input<boolean, boolean | string>(false, { transform: booleanAttribute });
+
+  /** Size tier — matches `KjInput`. `xs` (28px) for filter rows / inline editors. */
+  readonly kjSize = input<'xs' | 'sm' | 'md' | 'lg'>('md');
+
+  /** @internal — wired from the projected calendar. */
+  onCalendarSelect(date: Date | null, picker: KjDatePicker): void {
+    if (date) picker.selectDate(date);
+  }
+}

package/src/date-picker/index.ts

@@ -0,0 +1 @@
+export { KjDatePickerComponent } from './date-picker';

package/src/dialog/_examples/dialog.confirmation.example.ts

@@ -0,0 +1,30 @@
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
+import { KjDialog, KjDialogService } from '@kouji-ui/core';
+import { KjButtonComponent } from '../../button/button';
+
+// TODO(wrapper-overlay): re-skin once styled wrapper layer lands.
+@Component({
+  selector: 'kj-dialog-confirmation-body',
+  standalone: true,
+  imports: [KjDialog],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `<kj-dialog [kjAlert]="true"
+    ><h2>Confirm</h2>
+    <p>Are you sure?</p></kj-dialog
+  >`,
+})
+class ConfirmationBody {}
+
+@Component({
+  selector: 'kj-dialog-confirmation-example',
+  standalone: true,
+  imports: [KjButtonComponent],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `<kj-button (click)="open()">Confirm</kj-button>`,
+})
+export class KjDialogConfirmationExample {
+  private readonly dialog = inject(KjDialogService);
+  open(): void {
+    this.dialog.open(ConfirmationBody, { alert: true });
+  }
+}

package/src/dialog/_examples/dialog.default.example.ts

@@ -0,0 +1,30 @@
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
+import { KjDialog, KjDialogService } from '@kouji-ui/core';
+import { KjButtonComponent } from '../../button/button';
+
+// TODO(wrapper-overlay): re-skin via wrapper layer once styled overlay components land.
+@Component({
+  selector: 'kj-dialog-default-body',
+  standalone: true,
+  imports: [KjDialog],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `<kj-dialog
+    ><h2>Hello</h2>
+    <p>Dialog body</p></kj-dialog
+  >`,
+})
+class DialogBody {}
+
+@Component({
+  selector: 'kj-dialog-default-example',
+  standalone: true,
+  imports: [KjButtonComponent],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `<kj-button (click)="open()">Open dialog</kj-button>`,
+})
+export class KjDialogDefaultExample {
+  private readonly dialog = inject(KjDialogService);
+  open(): void {
+    this.dialog.open(DialogBody);
+  }
+}

package/src/dialog/_examples/dialog.nested.example.ts

@@ -0,0 +1,86 @@
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
+import {
+  KjDialog,
+  KjDialogService,
+  KjDialogRef,
+  KjPopoverTrigger,
+  KjPopoverContent,
+  KjPopoverTitle,
+  KjPopoverClose,
+  KjTooltipTrigger,
+  KjTooltipContent,
+} from '@kouji-ui/core';
+import { KjButtonComponent } from '../../button/button';
+
+@Component({
+  selector: 'kj-dialog-nested-outer-body',
+  standalone: true,
+  imports: [
+    KjDialog,
+    KjButtonComponent,
+    KjPopoverTrigger,
+    KjPopoverContent,
+    KjPopoverTitle,
+    KjPopoverClose,
+    KjTooltipTrigger,
+    KjTooltipContent,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-dialog>
+      <h2>Outer dialog</h2>
+      <p>Open overlays from inside a modal — popover, tooltip, or another dialog.</p>
+
+      <kj-button kjTooltipTrigger #tt="kjTooltipTrigger">Hover for tooltip</kj-button>
+      <kj-tooltip-content [kjFor]="tt">Tooltip from inside a dialog</kj-tooltip-content>
+
+      <kj-button kjPopoverTrigger #pp="kjPopoverTrigger">Open popover</kj-button>
+      <kj-popover-content [kjFor]="pp">
+        <h3 kjPopoverTitle>Nested popover</h3>
+        <p>Anchored to a button inside the dialog.</p>
+        <kj-button kjPopoverClose>Close</kj-button>
+      </kj-popover-content>
+
+      <kj-button (click)="openInner()">Open another dialog</kj-button>
+      <kj-button (click)="ref.close()">Done</kj-button>
+    </kj-dialog>
+  `,
+})
+class OuterBody {
+  protected readonly ref = inject(KjDialogRef);
+  private readonly dialog = inject(KjDialogService);
+  protected openInner(): void {
+    this.dialog.open(InnerBody);
+  }
+}
+
+@Component({
+  selector: 'kj-dialog-nested-inner-body',
+  standalone: true,
+  imports: [KjDialog, KjButtonComponent],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-dialog>
+      <h2>Inner dialog</h2>
+      <p>Stacked above the outer dialog.</p>
+      <kj-button (click)="ref.close()">Close</kj-button>
+    </kj-dialog>
+  `,
+})
+class InnerBody {
+  protected readonly ref = inject(KjDialogRef);
+}
+
+@Component({
+  selector: 'kj-dialog-nested-example',
+  standalone: true,
+  imports: [KjButtonComponent],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `<kj-button (click)="open()">Open dialog</kj-button>`,
+})
+export class KjDialogNestedExample {
+  private readonly dialog = inject(KjDialogService);
+  open(): void {
+    this.dialog.open(OuterBody);
+  }
+}

package/src/dialog/_examples/dialog.scrollable.example.ts

@@ -0,0 +1,30 @@
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
+import { KjDialog, KjDialogService } from '@kouji-ui/core';
+import { KjButtonComponent } from '../../button/button';
+
+// TODO(wrapper-overlay): re-skin scrollable demo.
+@Component({
+  selector: 'kj-dialog-scrollable-body',
+  standalone: true,
+  imports: [KjDialog],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `<kj-dialog
+    ><h2>Long content</h2>
+    <div style="max-height:60vh; overflow:auto"><p>Lorem ipsum…</p></div></kj-dialog
+  >`,
+})
+class ScrollableBody {}
+
+@Component({
+  selector: 'kj-dialog-scrollable-example',
+  standalone: true,
+  imports: [KjButtonComponent],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `<kj-button (click)="open()">Open scrollable</kj-button>`,
+})
+export class KjDialogScrollableExample {
+  private readonly dialog = inject(KjDialogService);
+  open(): void {
+    this.dialog.open(ScrollableBody);
+  }
+}

package/src/dialog/_examples/dialog.usage.example.ts

@@ -0,0 +1,57 @@
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
+import { KjDialog, KjDialogRef, KjDialogService } from '@kouji-ui/core';
+import { KjButtonComponent } from '../../button/button';
+
+/**
+ * A walkthrough of the most common dialog usages — open a body, resolve the
+ * confirmation via the typed `KjDialogRef`, and react to the result through
+ * `afterClosed$`.
+ */
+@Component({
+  selector: 'kj-dialog-usage-body',
+  standalone: true,
+  imports: [KjDialog, KjButtonComponent],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-dialog>
+      <h2 style="margin:0 0 var(--kj-space-md)">Save changes?</h2>
+      <p>Your edits will be applied immediately.</p>
+      <div
+        style="display:flex; gap: var(--kj-space-sm); justify-content: flex-end; margin-top: var(--kj-space-lg)"
+      >
+        <kj-button kjVariant="ghost" (click)="ref.close(false)">Cancel</kj-button>
+        <kj-button kjVariant="default" (click)="ref.close(true)">Save</kj-button>
+      </div>
+    </kj-dialog>
+  `,
+})
+class DialogUsageBody {
+  protected readonly ref = inject<KjDialogRef<DialogUsageBody, boolean>>(KjDialogRef);
+}
+
+@Component({
+  selector: 'kj-dialog-usage-example',
+  standalone: true,
+  imports: [KjButtonComponent],
+  styles: [
+    `
+      :host {
+        display: flex;
+        gap: var(--kj-space-md);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: ` <kj-button (click)="openConfirm()">Open confirmation</kj-button> `,
+})
+export class KjDialogUsageExample {
+  private readonly dialog = inject(KjDialogService);
+
+  openConfirm(): void {
+    const ref = this.dialog.open<DialogUsageBody, boolean>(DialogUsageBody);
+    ref.afterClosed$.subscribe((result) => {
+      /* handle the confirmation result */
+      void result;
+    });
+  }
+}

package/src/dialog/_examples/dialog.with-form.example.ts

@@ -0,0 +1,48 @@
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
+import { KjDialog, KjDialogService, KjDialogRef } from '@kouji-ui/core';
+import { KjButtonComponent } from '../../button/button';
+import { KjInputComponent } from '../../input/input';
+import { KjFieldComponent, KjFieldLabelComponent } from '../../field/field';
+
+@Component({
+  selector: 'kj-dialog-form-body',
+  standalone: true,
+  imports: [KjDialog, KjButtonComponent, KjInputComponent, KjFieldComponent, KjFieldLabelComponent],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-dialog>
+      <h2 style="margin: 0 0 var(--kj-space-md);">Edit profile</h2>
+      <kj-field>
+        <kj-field-label>Display name</kj-field-label>
+        <kj-input placeholder="Jane Doe" />
+      </kj-field>
+      <kj-field>
+        <kj-field-label>Email</kj-field-label>
+        <kj-input placeholder="jane@example.com" />
+      </kj-field>
+      <div
+        style="display: flex; gap: var(--kj-space-sm); justify-content: flex-end; margin-top: var(--kj-space-lg);"
+      >
+        <kj-button kjVariant="ghost" (click)="ref.close()">Cancel</kj-button>
+        <kj-button (click)="ref.close('saved')">Save</kj-button>
+      </div>
+    </kj-dialog>
+  `,
+})
+class FormBody {
+  protected readonly ref = inject(KjDialogRef);
+}
+
+@Component({
+  selector: 'kj-dialog-with-form-example',
+  standalone: true,
+  imports: [KjButtonComponent],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `<kj-button (click)="open()">Open form</kj-button>`,
+})
+export class KjDialogWithFormExample {
+  private readonly dialog = inject(KjDialogService);
+  open(): void {
+    this.dialog.open(FormBody);
+  }
+}

package/src/dialog/_examples/index.ts

@@ -0,0 +1,8 @@
+// AUTO-GENERATED by scripts/migrate-examples.mjs
+// One barrel per component folder — used by the docs app as a lazy chunk.
+export { KjDialogConfirmationExample } from './dialog.confirmation.example';
+export { KjDialogDefaultExample } from './dialog.default.example';
+export { KjDialogNestedExample } from './dialog.nested.example';
+export { KjDialogScrollableExample } from './dialog.scrollable.example';
+export { KjDialogUsageExample } from './dialog.usage.example';
+export { KjDialogWithFormExample } from './dialog.with-form.example';