@kouji-ui/components 0.1.1

package/src/field/_examples/field.with-prefix-suffix.example.ts

@@ -0,0 +1,63 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjAriaDescribedBy } from '@kouji-ui/core';
+import {
+  KjFieldComponent,
+  KjFieldGroupComponent,
+  KjFieldHelpComponent,
+  KjFieldLabelComponent,
+} from '../field';
+
+/**
+ * `kj-field-group` lays out a leading prefix, the input, and a trailing
+ * suffix as a single visual control. The inner `<input>` keeps full focus
+ * and form semantics; the addons are presentational only.
+ */
+@Component({
+  selector: 'kj-field-with-prefix-suffix-example',
+  standalone: true,
+  imports: [
+    KjFieldComponent,
+    KjFieldLabelComponent,
+    KjFieldHelpComponent,
+    KjFieldGroupComponent,
+    KjAriaDescribedBy,
+  ],
+  styles: [
+    `
+      :host {
+        display: block;
+        max-width: 400px;
+      }
+      input.kj-bare {
+        flex: 1;
+        background: transparent;
+        color: var(--kj-fg-default);
+        border: 0;
+        outline: none;
+        padding: var(--kj-space-sm) var(--kj-space-md);
+        font: var(--kj-text-sm) / 1.4 var(--kj-font-sans);
+        width: 100%;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-field #f="kjField">
+      <kj-field-label>Amount</kj-field-label>
+      <kj-field-group>
+        <span prefix>$</span>
+        <input
+          kjAriaDescribedBy
+          class="kj-bare"
+          type="number"
+          placeholder="0.00"
+          [id]="f.controlId()"
+          [kjDescribedBy]="$any(f.describedByIds())"
+        />
+        <span suffix>USD</span>
+      </kj-field-group>
+      <kj-field-help>Enter the total in US dollars.</kj-field-help>
+    </kj-field>
+  `,
+})
+export class KjFieldWithPrefixSuffixExample {}

package/src/field/_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 { KjFieldDisabledExample } from './field.disabled.example';
+export { KjFieldExample } from './field.example';
+export { KjFieldRequiredExample } from './field.required.example';
+export { KjFieldWithErrorExample } from './field.with-error.example';
+export { KjFieldWithPrefixSuffixExample } from './field.with-prefix-suffix.example';

package/src/field/field.css

@@ -0,0 +1,138 @@
+/* ─────────────────────────────────────────────────────────────
+   .kj-field — vertical-stack form-row container.
+   The wrapper itself is `display: contents`-style transparent;
+   .kj-field renders the actual flex container so projected
+   children participate in the stack without an extra div.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  kj-field.kj-field {
+    --kj-field-gap:               var(--kj-space-xs);
+    --kj-field-label-fg:          var(--kj-fg-default);
+    --kj-field-label-font:        var(--kj-font-sans);
+    --kj-field-label-font-size:   var(--kj-text-sm);
+    --kj-field-label-weight:      500;
+    --kj-field-help-fg:           var(--kj-fg-muted);
+    --kj-field-help-font-size:    var(--kj-text-xs);
+    --kj-field-error-fg:          var(--kj-fg-danger);
+    --kj-field-error-font-size:   var(--kj-text-xs);
+    --kj-field-required-fg:       var(--kj-fg-danger);
+    --kj-field-disabled-opacity:  0.55;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--kj-field-gap);
+    width: 100%;
+  }
+
+  kj-field.kj-field[data-orientation="horizontal"] {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--kj-space-md);
+  }
+
+  kj-field.kj-field[data-disabled] {
+    opacity: var(--kj-field-disabled-opacity);
+    cursor: not-allowed;
+  }
+
+  /* Label */
+  .kj-field-label {
+    color: var(--kj-field-label-fg);
+    font: var(--kj-field-label-weight) var(--kj-field-label-font-size) / 1.4
+          var(--kj-field-label-font);
+  }
+  .kj-field-label[data-required]::after {
+    content: " *";
+    color: var(--kj-field-required-fg);
+    /* Aria-hidden via CSS — the * is purely visual; aria-required carries
+       semantics on the inner control. */
+  }
+  .kj-field-label[data-invalid] {
+    color: var(--kj-field-error-fg);
+  }
+
+  /* Help / description */
+  .kj-field-help {
+    color: var(--kj-field-help-fg);
+    font: var(--kj-field-help-font-size) / 1.4 var(--kj-font-sans);
+  }
+
+  /* Error */
+  .kj-field-error {
+    color: var(--kj-field-error-fg);
+    font: var(--kj-field-error-font-size) / 1.4 var(--kj-font-sans);
+  }
+
+  /* Compound input layout */
+  .kj-field-group {
+    --kj-field-group-bg:           var(--kj-bg-field);
+    --kj-field-group-fg:           var(--kj-fg-default);
+    --kj-field-group-border-color: var(--kj-border-default);
+    --kj-field-group-radius:       var(--kj-radius-field);
+    --kj-field-group-addon-fg:     var(--kj-fg-muted);
+    --kj-field-group-addon-bg:     var(--kj-bg-surface);
+    --kj-field-group-padding-x:    var(--kj-space-md);
+
+    display: inline-flex;
+    align-items: stretch;
+    width: 100%;
+    background: var(--kj-field-group-bg);
+    color: var(--kj-field-group-fg);
+    border: var(--kj-border) solid var(--kj-field-group-border-color);
+    border-radius: var(--kj-field-group-radius);
+    overflow: hidden;
+    transition: var(--kj-transition);
+  }
+  .kj-field-group:focus-within {
+    border-color: var(--kj-border-focus, var(--kj-bg-primary));
+    outline: 2px solid var(--kj-bg-primary);
+    outline-offset: -2px;
+  }
+  .kj-field-group[data-invalid] {
+    border-color: var(--kj-border-danger, var(--kj-fg-danger));
+  }
+  .kj-field-group[data-disabled] {
+    opacity: var(--kj-field-disabled-opacity);
+    cursor: not-allowed;
+  }
+
+  .kj-field-group__prefix,
+  .kj-field-group__suffix {
+    display: inline-flex;
+    align-items: center;
+    padding: 0 var(--kj-field-group-padding-x);
+    color: var(--kj-field-group-addon-fg);
+    background: var(--kj-field-group-addon-bg);
+    font: var(--kj-text-sm) / 1 var(--kj-font-sans);
+    white-space: nowrap;
+  }
+  /* Hide empty addon slots so the layout collapses cleanly when only one
+     side is used. The :empty selector handles the comment-only / no-content
+     case in projected slots. */
+  .kj-field-group__prefix:empty,
+  .kj-field-group__suffix:empty {
+    display: none;
+  }
+
+  .kj-field-group__control {
+    display: inline-flex;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+  /* Inner controls inside a group should drop their own border / radius and
+     fill the group's box. Targeting common inner-control classes; the
+     consumer is responsible for ensuring their custom controls cooperate. */
+  .kj-field-group__control > .kj-input,
+  .kj-field-group__control > input,
+  .kj-field-group__control > kj-input,
+  .kj-field-group__control > kj-input > .kj-input {
+    border: 0;
+    border-radius: 0;
+    width: 100%;
+  }
+  .kj-field-group__control > .kj-input:focus-visible,
+  .kj-field-group__control > input:focus-visible {
+    outline: none;
+  }
+}

package/src/field/field.playground.ts

@@ -0,0 +1,108 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import {
+  KjFieldComponent,
+  KjFieldLabelComponent,
+  KjFieldHelpComponent,
+  KjFieldErrorComponent,
+} from './field';
+import { KjInputComponent } from '../input/input';
+import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
+
+/**
+ * Playground state — module-scope signals. Knobs toggle the field's posture
+ * (required, invalid, disabled) and switch the supporting message between
+ * help text and an error message.
+ */
+const orientation = signal<'vertical' | 'horizontal'>('vertical');
+const label = signal('Email');
+const helpText = signal("We'll never share your email.");
+const required = signal(false);
+const invalid = signal(false);
+const disabled = signal(false);
+
+@Component({
+  selector: 'kj-field-playground',
+  standalone: true,
+  imports: [
+    KjFieldComponent,
+    KjFieldLabelComponent,
+    KjFieldHelpComponent,
+    KjFieldErrorComponent,
+    KjInputComponent,
+  ],
+  styles: [`:host { display: block; max-width: 28rem; }`],
+  template: `
+    <kj-field
+      [kjFieldOrientation]="orientation()"
+      [kjRequired]="required()"
+      [kjInvalid]="invalid()"
+      [kjDisabled]="disabled()"
+    >
+      <kj-field-label>{{ label() }}</kj-field-label>
+      <kj-input type="email" placeholder="you@example.com" [invalid]="invalid()" [disabled]="disabled()" />
+      @if (invalid()) {
+        <kj-field-error>Please enter a valid email address.</kj-field-error>
+      } @else {
+        <kj-field-help>{{ helpText() }}</kj-field-help>
+      }
+    </kj-field>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjFieldPlaygroundDemo {
+  protected readonly orientation = orientation;
+  protected readonly label = label;
+  protected readonly helpText = helpText;
+  protected readonly required = required;
+  protected readonly invalid = invalid;
+  protected readonly disabled = disabled;
+}
+
+export const PLAYGROUND: PlaygroundFile = {
+  component: KjFieldPlaygroundDemo,
+  state: {
+    orientation: orientation as unknown as ReturnType<typeof signal>,
+    label: label as unknown as ReturnType<typeof signal>,
+    helpText: helpText as unknown as ReturnType<typeof signal>,
+    required: required as unknown as ReturnType<typeof signal>,
+    invalid: invalid as unknown as ReturnType<typeof signal>,
+    disabled: disabled as unknown as ReturnType<typeof signal>,
+  },
+  controls: [
+    {
+      kind: 'chips',
+      name: 'orientation',
+      label: 'orientation',
+      options: ['vertical', 'horizontal'],
+    },
+    { kind: 'text', name: 'label', label: 'label' },
+    { kind: 'text', name: 'helpText', label: 'help' },
+    { kind: 'toggle', name: 'required', label: 'required' },
+    { kind: 'toggle', name: 'invalid', label: 'invalid' },
+    { kind: 'toggle', name: 'disabled', label: 'disabled' },
+  ],
+  snippet: (values) => {
+    const s = values as {
+      orientation: string;
+      label: string;
+      helpText: string;
+      required: boolean;
+      invalid: boolean;
+      disabled: boolean;
+    };
+    const attrs: string[] = [`kjFieldOrientation="${s.orientation}"`];
+    if (s.required) attrs.push('[kjRequired]="true"');
+    if (s.invalid) attrs.push('[kjInvalid]="true"');
+    if (s.disabled) attrs.push('[kjDisabled]="true"');
+    const lines: string[] = [`<kj-field\n  ${attrs.join('\n  ')}\n>`];
+    lines.push(`  <kj-field-label>${s.label}</kj-field-label>`);
+    lines.push(`  <kj-input type="email" placeholder="you@example.com" />`);
+    if (s.invalid) {
+      lines.push(`  <kj-field-error>Please enter a valid email address.</kj-field-error>`);
+    } else if (s.helpText) {
+      lines.push(`  <kj-field-help>${s.helpText}</kj-field-help>`);
+    }
+    lines.push('</kj-field>');
+    return lines.join('\n');
+  },
+};

package/src/field/field.spec.ts

@@ -0,0 +1,132 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { describe, expect, test, beforeEach } from 'vitest';
+import { KjAriaDescribedBy } from '@kouji-ui/core';
+import {
+  KjFieldComponent,
+  KjFieldErrorComponent,
+  KjFieldGroupComponent,
+  KjFieldHelpComponent,
+  KjFieldLabelComponent,
+} from './field';
+
+@Component({
+  standalone: true,
+  imports: [
+    KjFieldComponent,
+    KjFieldLabelComponent,
+    KjFieldHelpComponent,
+    KjFieldErrorComponent,
+    KjAriaDescribedBy,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-field
+      #f="kjField"
+      [kjRequired]="required()"
+      [kjDisabled]="disabled()"
+      [kjInvalid]="invalid()"
+    >
+      <kj-field-label>Email</kj-field-label>
+      <input
+        kjAriaDescribedBy
+        type="email"
+        [id]="f.controlId()"
+        [kjDescribedBy]="f.describedByIds()"
+      />
+      <kj-field-help>Format: name@example.com</kj-field-help>
+      <kj-field-error>Invalid email.</kj-field-error>
+    </kj-field>
+  `,
+})
+class HostComponent {
+  required = signal(false);
+  disabled = signal(false);
+  invalid = signal(false);
+}
+
+describe('KjFieldComponent', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({ imports: [HostComponent] });
+  });
+
+  test('renders the kj-field host with class kj-field', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('kj-field.kj-field')).not.toBeNull();
+  });
+
+  test('label[for] points at the inner input id', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    const label = fixture.nativeElement.querySelector('label.kj-field-label') as HTMLLabelElement;
+    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
+    expect(input.id).toBeTruthy();
+    expect(label.getAttribute('for')).toBe(input.id);
+  });
+
+  test('aria-describedby contains help id while not invalid', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    const help = fixture.nativeElement.querySelector('span.kj-field-help') as HTMLElement;
+    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
+    expect(input.getAttribute('aria-describedby')).toBe(help.id);
+  });
+
+  test('aria-describedby includes both help and error ids when invalid', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.componentInstance.invalid.set(true);
+    fixture.detectChanges();
+    const help = fixture.nativeElement.querySelector('span.kj-field-help') as HTMLElement;
+    const error = fixture.nativeElement.querySelector('span.kj-field-error') 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);
+  });
+
+  test('error span is hidden until kjInvalid is true', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    const error = fixture.nativeElement.querySelector('span.kj-field-error') as HTMLElement;
+    expect(error.hasAttribute('hidden')).toBe(true);
+    fixture.componentInstance.invalid.set(true);
+    fixture.detectChanges();
+    expect(error.hasAttribute('hidden')).toBe(false);
+  });
+
+  test('reflects required / disabled / invalid via data-* on host', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.componentInstance.required.set(true);
+    fixture.componentInstance.disabled.set(true);
+    fixture.componentInstance.invalid.set(true);
+    fixture.detectChanges();
+    const host = fixture.nativeElement.querySelector('kj-field') as HTMLElement;
+    expect(host.hasAttribute('data-required')).toBe(true);
+    expect(host.hasAttribute('data-disabled')).toBe(true);
+    expect(host.hasAttribute('data-invalid')).toBe(true);
+  });
+
+  test('field-group renders prefix/suffix slots', () => {
+    @Component({
+      standalone: true,
+      imports: [KjFieldComponent, KjFieldLabelComponent, KjFieldGroupComponent],
+      template: `
+        <kj-field>
+          <kj-field-label>Amount</kj-field-label>
+          <kj-field-group>
+            <span prefix data-test="prefix">$</span>
+            <input data-test="input" />
+            <span suffix data-test="suffix">USD</span>
+          </kj-field-group>
+        </kj-field>
+      `,
+    })
+    class A {}
+    const fixture = TestBed.createComponent(A);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('[data-test="prefix"]')).not.toBeNull();
+    expect(fixture.nativeElement.querySelector('[data-test="suffix"]')).not.toBeNull();
+    expect(fixture.nativeElement.querySelector('[data-test="input"]')).not.toBeNull();
+  });
+});

package/src/field/field.ts

@@ -0,0 +1,232 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+} from '@angular/core';
+import {
+  KjField,
+  KjFieldError,
+  KjFieldGroup,
+  KjFieldHelp,
+  KjFieldLabel,
+} from '@kouji-ui/core';
+
+/**
+ * Styled wrapper around the headless `KjField` directive family.
+ *
+ * Renders a vertical stack of label, control slot, and helper / error
+ * messages. The inner control should be projected as a child element with
+ * the `kjField`-aware id binding (the wrapper exposes `controlId` via the
+ * `KjField` host directive) — `kj-field-label` resolves `for=`
+ * automatically and the wrapper composes `aria-describedby` from any
+ * `kj-field-help` and `kj-field-error` siblings.
+ *
+ * @doc-example Default
+ *   Label + input + help text — anchors the default chrome with auto-wired
+ *   id and `aria-describedby` plumbing.
+ *   @doc-file field.example.ts
+ * @doc-example Usage
+ *   Common field shapes — required, with help, with error, and a prefix/suffix
+ *   group — assembled into one screen as a copy-paste starting point.
+ *   @doc-file field.usage.example.ts
+ * @doc-example With error
+ *   `[kjInvalid]="true"` flips the label tone and links the `kj-field-error`
+ *   id into the input's `aria-describedby`.
+ *   @doc-file field.with-error.example.ts
+ * @doc-example Required
+ *   `[kjRequired]="true"` paints the asterisk and sets `aria-required` on the
+ *   underlying input.
+ *   @doc-file field.required.example.ts
+ * @doc-example Disabled
+ *   `[kjDisabled]="true"` dims the row and propagates `disabled` to the
+ *   projected control.
+ *   @doc-file field.disabled.example.ts
+ * @doc-example Prefix and suffix
+ *   Wraps the input in `<kj-field-group>` with `[prefix]` / `[suffix]` slots
+ *   for currency symbols, units, or inline actions.
+ *   @doc-file field.with-prefix-suffix.example.ts
+ *
+ * @doc-keyboard
+ *   Tab — Moves focus to the projected control inside the field
+ *
+ * @doc-aria
+ *   aria-describedby — Auto-composed from any kj-field-help / kj-field-error siblings via controlId / describedByIds
+ *   aria-invalid     — Reflected on the projected control when [kjInvalid] is true
+ *   aria-required    — Reflected on the projected control when [kjRequired] is true
+ *   data-disabled    — Mirrors [kjDisabled] for theme CSS
+ *   data-invalid     — Mirrors [kjInvalid] for theme CSS
+ *
+ * @doc-touch
+ *   The field itself is not a touch target — the projected control sets the
+ *   hit area. Pair with `kj-input` / `kj-input-otp` / etc. sized for ≥ 44×44 px.
+ *
+ * @doc-a11y
+ *   `KjField` owns the id wiring: `controlId()` provides a stable id for the
+ *   projected control, and `describedByIds()` aggregates the ids of any
+ *   `kj-field-help` and `kj-field-error` siblings so consumers can pipe them
+ *   straight into `aria-describedby`. Label association is automatic when
+ *   the projected control consumes `controlId()`.
+ *
+ * @doc-related input,form,input-group
+ *
+ * @doc-css-var
+ *   --kj-field-gap                — Vertical gap between label, control, and help/error rows.
+ *   --kj-field-label-fg           — Label color. Flips to the error tone when the field is invalid.
+ *   --kj-field-label-font         — Label font family. Inherits --kj-font-sans.
+ *   --kj-field-label-font-size    — Label font size. Defaults to --kj-text-sm.
+ *   --kj-field-label-weight       — Label font weight. Default 500.
+ *   --kj-field-help-fg            — Help / description text color. Muted by default.
+ *   --kj-field-help-font-size     — Help / description text size. Defaults to --kj-text-xs.
+ *   --kj-field-error-fg           — Error text color and invalid-label color.
+ *   --kj-field-error-font-size    — Error text size. Defaults to --kj-text-xs.
+ *   --kj-field-required-fg       — Color of the required asterisk.
+ *   --kj-field-disabled-opacity   — Opacity applied when the field is disabled.
+ *   --kj-field-group-bg           — Background fill for the inline group (input + prefix/suffix).
+ *   --kj-field-group-fg           — Foreground color inside the group.
+ *   --kj-field-group-border-color — Border color of the group; focus/invalid retarget this.
+ *   --kj-field-group-radius       — Corner radius of the group. Inherits --kj-radius-field.
+ *   --kj-field-group-addon-fg     — Foreground color of prefix/suffix addons.
+ *   --kj-field-group-addon-bg     — Background fill of prefix/suffix addons.
+ *   --kj-field-group-padding-x    — Horizontal padding inside addons.
+ *
+ * @doc-category Library/Data input
+ * @doc
+ * @doc-name field
+ * @doc-description Themed form field wrapper that auto-wires label, help, error, and required/invalid/disabled state.
+ * @doc-is-main
+ */
+@Component({
+  selector: 'kj-field',
+  standalone: true,
+  hostDirectives: [
+    {
+      directive: KjField,
+      inputs: [
+        'kjFieldOrientation',
+        'kjRequired',
+        'kjDisabled',
+        'kjInvalid',
+        'kjFieldId',
+        'kjFieldLabelId',
+      ],
+    },
+  ],
+  template: `<ng-content />`,
+  styleUrl: './field.css',
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: 'kj-field',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjFieldComponent {}
+
+/**
+ * Styled wrapper around `KjFieldLabel`.
+ * @doc-category Library/Data input
+ * @doc
+ * @doc-name field
+ */
+@Component({
+  selector: 'kj-field-label',
+  standalone: true,
+  imports: [KjFieldLabel],
+  template: `
+    <!-- The label is associated via [attr.for] set on it by KjFieldLabel from
+         the field's controlId signal — the static analyzer can't see that. -->
+    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -->
+    <label kjFieldLabel class="kj-field-label"><ng-content /></label>
+  `,
+  styleUrl: './field.css',
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    style: 'display: contents;',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjFieldLabelComponent {}
+
+/**
+ * Styled wrapper around `KjFieldHelp`.
+ * @doc-category Library/Data input
+ * @doc
+ * @doc-name field
+ */
+@Component({
+  selector: 'kj-field-help',
+  standalone: true,
+  imports: [KjFieldHelp],
+  template: `<span kjFieldHelp class="kj-field-help"><ng-content /></span>`,
+  styleUrl: './field.css',
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    style: 'display: contents;',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjFieldHelpComponent {}
+
+/**
+ * Styled wrapper around `KjFieldError`.
+ * @doc-category Library/Data input
+ * @doc
+ * @doc-name field
+ */
+@Component({
+  selector: 'kj-field-error',
+  standalone: true,
+  imports: [KjFieldError],
+  template: `<span kjFieldError class="kj-field-error"><ng-content /></span>`,
+  styleUrl: './field.css',
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    style: 'display: contents;',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjFieldErrorComponent {}
+
+/**
+ * Styled wrapper around `KjFieldGroup`. Lays out an input with optional
+ * leading / trailing addons (icons, units, action buttons) as a single
+ * visual control.
+ *
+ * Project addons via the `prefix` and `suffix` content slots:
+ *
+ * @example
+ * ```html
+ * <kj-field-group>
+ *   <span prefix>$</span>
+ *   <input kjInput type="number" />
+ *   <span suffix>USD</span>
+ * </kj-field-group>
+ * ```
+ * @doc-category Library/Data input
+ * @doc
+ * @doc-name field
+ */
+@Component({
+  selector: 'kj-field-group',
+  standalone: true,
+  imports: [KjFieldGroup],
+  template: `
+    <div kjFieldGroup class="kj-field-group">
+      <span class="kj-field-group__prefix" [attr.data-empty]="null">
+        <ng-content select="[prefix]" />
+      </span>
+      <span class="kj-field-group__control">
+        <ng-content />
+      </span>
+      <span class="kj-field-group__suffix">
+        <ng-content select="[suffix]" />
+      </span>
+    </div>
+  `,
+  styleUrl: './field.css',
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    style: 'display: contents;',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjFieldGroupComponent {}