@kouji-ui/components 0.1.1 → 0.1.2

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

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

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

@@ -1,138 +0,0 @@
-/* ─────────────────────────────────────────────────────────────
-   .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

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

@@ -1,132 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { describe, expect, test, beforeEach } from 'vitest';
-import { KjAriaDescribedBy } from '@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

@@ -1,232 +0,0 @@
-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 {}