@kouji-ui/components 0.1.1

package/src/tag/tag.playground.ts

@@ -0,0 +1,63 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { KjTagComponent } from './tag';
+import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
+
+/**
+ * Playground state — module-scope signals.
+ */
+const variant = signal<'default' | 'secondary' | 'success' | 'warning' | 'destructive' | 'info' | 'outline' | 'ghost'>('default');
+const size = signal<'xs' | 'sm' | 'md' | 'lg'>('md');
+const label = signal('New');
+const disabled = signal(false);
+
+@Component({
+  selector: 'kj-tag-playground',
+  standalone: true,
+  imports: [KjTagComponent],
+  template: `
+    <kj-tag
+      [kjVariant]="variant()"
+      [kjSize]="size()"
+      [kjTagDisabled]="disabled()"
+    >{{ label() }}</kj-tag>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjTagPlaygroundDemo {
+  protected readonly variant = variant;
+  protected readonly size = size;
+  protected readonly label = label;
+  protected readonly disabled = disabled;
+}
+
+export const PLAYGROUND: PlaygroundFile = {
+  component: KjTagPlaygroundDemo,
+  state: {
+    variant: variant as unknown as ReturnType<typeof signal>,
+    size: size as unknown as ReturnType<typeof signal>,
+    label: label as unknown as ReturnType<typeof signal>,
+    disabled: disabled as unknown as ReturnType<typeof signal>,
+  },
+  controls: [
+    {
+      kind: 'chips',
+      name: 'variant',
+      label: 'variant',
+      options: ['default', 'secondary', 'success', 'warning', 'destructive', 'info', 'outline', 'ghost'],
+    },
+    { kind: 'chips', name: 'size', label: 'size', options: ['xs', 'sm', 'md', 'lg'] },
+    { kind: 'text', name: 'label', label: 'label' },
+    { kind: 'toggle', name: 'disabled', label: 'disabled' },
+  ],
+  snippet: (values) => {
+    const s = values as {
+      variant: string;
+      size: string;
+      label: string;
+      disabled: boolean;
+    };
+    const attrs: string[] = [`kjVariant="${s.variant}"`, `kjSize="${s.size}"`];
+    if (s.disabled) attrs.push('[kjTagDisabled]="true"');
+    return `<kj-tag\n  ${attrs.join('\n  ')}\n>${s.label}</kj-tag>`;
+  },
+};

package/src/tag/tag.spec.ts

@@ -0,0 +1,153 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { describe, expect, test, beforeEach } from 'vitest';
+import { KjTagComponent, KjTagListComponent, KjTagRemoveComponent } from './tag';
+
+@Component({
+  standalone: true,
+  imports: [KjTagComponent, KjTagRemoveComponent],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-tag [kjTagDisabled]="disabled" [kjTagSelectable]="selectable" [(kjTagSelected)]="selected"
+      >{{ label }}<kj-tag-remove [kjTagRemoveLabel]="removeLabel">×</kj-tag-remove></kj-tag
+    >
+  `,
+})
+class TagHost {
+  disabled = false;
+  selectable = false;
+  selected = signal(false);
+  label = 'Acme';
+  removeLabel: string | undefined = undefined;
+}
+
+@Component({
+  standalone: true,
+  imports: [KjTagComponent, KjTagListComponent],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-tag-list
+      [kjTagListRole]="role"
+      [kjTagListMultiple]="multiple"
+      [kjTagListDisabled]="listDisabled"
+      aria-label="Filters"
+    >
+      <kj-tag [kjTagSelectable]="true" [(kjTagSelected)]="one">One</kj-tag>
+      <kj-tag [kjTagSelectable]="true" [(kjTagSelected)]="two">Two</kj-tag>
+    </kj-tag-list>
+  `,
+})
+class ListHost {
+  role: 'listbox' | 'grid' | 'group' = 'listbox';
+  multiple = true;
+  listDisabled = false;
+  one = signal(false);
+  two = signal(true);
+}
+
+describe('KjTagComponent', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({ imports: [TagHost, ListHost] });
+  });
+
+  test('renders the projected text inside <kj-tag>', () => {
+    const fixture = TestBed.createComponent(TagHost);
+    fixture.detectChanges();
+    const tag = fixture.nativeElement.querySelector('kj-tag.kj-tag');
+    expect(tag).not.toBeNull();
+    expect(tag.textContent).toContain('Acme');
+  });
+
+  test('selectable mode sets role="button" and aria-pressed', () => {
+    const fixture = TestBed.createComponent(TagHost);
+    fixture.componentInstance.selectable = true;
+    fixture.detectChanges();
+    const tag = fixture.nativeElement.querySelector('kj-tag');
+    expect(tag.getAttribute('role')).toBe('button');
+    expect(tag.getAttribute('tabindex')).toBe('0');
+    expect(tag.getAttribute('aria-pressed')).toBe('false');
+  });
+
+  test('selectable click toggles two-way bound kjTagSelected', () => {
+    const fixture = TestBed.createComponent(TagHost);
+    fixture.componentInstance.selectable = true;
+    fixture.detectChanges();
+    const tag = fixture.nativeElement.querySelector('kj-tag') as HTMLElement;
+    tag.click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.selected()).toBe(true);
+    expect(tag.getAttribute('aria-pressed')).toBe('true');
+  });
+
+  test('forwards kjTagDisabled (aria-disabled attr)', () => {
+    const fixture = TestBed.createComponent(TagHost);
+    fixture.componentInstance.disabled = true;
+    fixture.componentInstance.selectable = true;
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('kj-tag').getAttribute('aria-disabled')).toBe(
+      'true',
+    );
+  });
+});
+
+describe('KjTagRemoveComponent', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({ imports: [TagHost] });
+  });
+
+  test('renders the kj-tag-remove host with an accessible name from the parent label', () => {
+    const fixture = TestBed.createComponent(TagHost);
+    fixture.detectChanges();
+    const btn = fixture.nativeElement.querySelector('kj-tag-remove.kj-tag-remove');
+    expect(btn).not.toBeNull();
+    // KjTagRemove's host bindings inject the auto-derived "Remove Acme" label.
+    expect(btn.getAttribute('aria-label')).toMatch(/^Remove\s+Acme/);
+  });
+
+  test('respects kjTagRemoveLabel override on aria-label', () => {
+    const fixture = TestBed.createComponent(TagHost);
+    fixture.componentInstance.removeLabel = 'Dismiss filter';
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('kj-tag-remove').getAttribute('aria-label')).toBe(
+      'Dismiss filter',
+    );
+  });
+});
+
+describe('KjTagListComponent', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({ imports: [ListHost] });
+  });
+
+  test('propagates listbox role onto the host and into chips', () => {
+    const fixture = TestBed.createComponent(ListHost);
+    fixture.detectChanges();
+    const list = fixture.nativeElement.querySelector('kj-tag-list.kj-tag-list');
+    expect(list.getAttribute('role')).toBe('listbox');
+    expect(list.getAttribute('aria-multiselectable')).toBe('true');
+    const chips = fixture.nativeElement.querySelectorAll('kj-tag');
+    expect(chips[0].getAttribute('role')).toBe('option');
+    expect(chips[1].getAttribute('role')).toBe('option');
+    expect(chips[1].getAttribute('aria-selected')).toBe('true');
+  });
+
+  test('group role does not force a chip role from the container', () => {
+    const fixture = TestBed.createComponent(ListHost);
+    fixture.componentInstance.role = 'group';
+    fixture.componentInstance.multiple = false;
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('kj-tag-list').getAttribute('role')).toBe('group');
+    const chip = fixture.nativeElement.querySelector('kj-tag');
+    // Selectable still sets role=button when not under listbox/grid.
+    expect(chip.getAttribute('role')).toBe('button');
+  });
+
+  test('cascades kjTagListDisabled into nested chips', () => {
+    const fixture = TestBed.createComponent(ListHost);
+    fixture.componentInstance.listDisabled = true;
+    fixture.detectChanges();
+    const chips = fixture.nativeElement.querySelectorAll('kj-tag');
+    expect(chips[0].getAttribute('aria-disabled')).toBe('true');
+    expect(chips[1].getAttribute('aria-disabled')).toBe('true');
+  });
+});

package/src/tag/tag.ts

@@ -0,0 +1,186 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+} from '@angular/core';
+import { KjIconDirective, KjTag, KjTagList, KjTagRemove } from '@kouji-ui/core';
+
+/**
+ * Styled wrapper around the headless `KjTag` directive. Renders the visual
+ * chrome (rounded pill, density tokens, variant tones) and exposes the
+ * directive's full input surface via `hostDirectives` aliasing — same
+ * composition shape as `<kj-badge>`, with the interactive states (selectable,
+ * removable, group-coordinated) layered on top.
+ *
+ * Compose `<kj-tag-remove>` for the removable shape and wrap chips in
+ * `<kj-tag-list>` for group keyboard / ARIA. Interactivity is conveyed via
+ * the directive's host-bound `role` / `tabindex` / `aria-pressed`, never by
+ * swapping the tag name.
+ *
+ * @example
+ * ```html
+ * <kj-tag kjVariant="primary">Acme</kj-tag>
+ *
+ * <kj-tag>
+ *   Acme
+ *   <kj-tag-remove>×</kj-tag-remove>
+ * </kj-tag>
+ *
+ * <kj-tag kjTagSelectable [(kjTagSelected)]="on">Filter</kj-tag>
+ * ```
+ * @doc-example Default
+ *   The default playground — a static decorative chip with `default` variant.
+ *   @doc-file tag.example.ts
+ * @doc-example Usage
+ *   A walkthrough of the most common tag usages — decorative chip, removable
+ *   chip, selectable filter, and a tag list with arrow-key navigation.
+ *   @doc-file tag.usage.example.ts
+ * @doc-example Variants
+ *   `default` / `secondary` / `success` / `warning` / `destructive` / `info` /
+ *   `outline` / `ghost`. Match the tone to the data.
+ *   @doc-file tag.variants.example.ts
+ * @doc-example Sizes
+ *   `xs` / `sm` / `md` / `lg` — `md` is the default density.
+ *   @doc-file tag.sizes.example.ts
+ * @doc-example Removable
+ *   Project `<kj-tag-remove>` for a trailing dismiss button; `(kjTagRemoved)`
+ *   fires when the user clicks it.
+ *   @doc-file tag.removable.example.ts
+ * @doc-example Selectable
+ *   `kjTagSelectable` + `[(kjTagSelected)]` turns the tag into a toggle pill.
+ *   @doc-file tag.selectable.example.ts
+ * @doc-example Tag list
+ *   Wrap chips in `<kj-tag-list>` for single-tab-stop + arrow-key navigation.
+ *   @doc-file tag.list.example.ts
+ *
+ * @doc-keyboard
+ *   Enter|Space — Activates a selectable tag; flips `aria-pressed`
+ *   Delete      — Fires `kjTagRemoved` when the tag is removable
+ *   ArrowKeys   — Move focus between tags when wrapped in `<kj-tag-list>`
+ *   Tab         — Tags participate in the tab order only when interactive
+ *
+ * @doc-aria
+ *   role           — Set by the headless directive: "button" when selectable,
+ *                    "listitem" inside a tag-list, otherwise none (decorative)
+ *   aria-pressed   — Reflected on selectable tags
+ *   aria-disabled  — Reflected when `[kjTagDisabled]="true"`
+ *   aria-label     — Auto-derived for the remove button as "Remove {label}"
+ *   data-variant   — Mirrors the resolved variant for theme hooks
+ *   data-size      — Mirrors the resolved size for theme hooks
+ *
+ * @doc-touch
+ *   `md` (default) and `lg` meet WCAG 2.5.5 for the interactive surface. Use
+ *   `xs` / `sm` only for purely decorative chips embedded in dense lists.
+ *
+ * @doc-a11y
+ *   Decorative tags carry no role — they read as plain text to AT. Selectable
+ *   tags adopt button semantics with `aria-pressed`. Removable tags expose a
+ *   real `<button>` for the dismiss action so it lands in the tab order with
+ *   the native focus ring.
+ *
+ * @doc-related badge,button-group,chip
+ *
+ * @doc-css-var
+ *   --kj-tag-bg            — Background fill. Variant rules set this; override to brand-paint a one-off.
+ *   --kj-tag-fg            — Foreground (label + icon) color. Resolved per variant.
+ *   --kj-tag-border-color  — Border color. Outline variant sets this; others default to transparent.
+ *   --kj-tag-radius        — Corner radius. Inherits --kj-radius-selector.
+ *   --kj-tag-padding-x     — Horizontal padding. Sizes override.
+ *   --kj-tag-padding-y     — Vertical padding. Sizes override.
+ *   --kj-tag-font-size     — Font size. Sizes (xs/sm/md/lg) override.
+ *   --kj-tag-gap           — Gap between label and trailing remove button.
+ *
+ * @doc-category Library/Data display
+ * @doc
+ * @doc-name tag
+ * @doc-description Themed tag or chip with decorative, removable, and selectable variants for filters and labels.
+ * @doc-is-main
+ */
+@Component({
+  selector: 'kj-tag',
+  standalone: true,
+  // KjTag itself supplies KjVariant / KjSize / KjDisabled / KjFocusRing as
+  // host directives + the `bindPresets(KJ_TAG_CONFIG)` providers. Composing
+  // KjTag here cascades all of them onto the wrapper's host element.
+  hostDirectives: [
+    {
+      directive: KjTag,
+      inputs: [
+        'kjTagSelectable',
+        'kjTagSelected',
+        'kjTagLabel',
+        'kjTagDisabled',
+      ],
+      outputs: ['kjTagSelectedChange', 'kjTagRemoved'],
+    },
+  ],
+  template: `<ng-content />`,
+  styleUrl: './tag.css',
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: 'kj-tag',
+    // The KjVariant / KjSize host directives nested inside KjTag set
+    // [data-variant] / [data-size] on the same host element automatically.
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjTagComponent {}
+
+/**
+ * Trailing remove button for `<kj-tag>`. Composes the headless `KjTagRemove`
+ * directive (which itself composes `KjButton` for native button semantics,
+ * ARIA-disabled, and the focus ring). Auto-derives an
+ * `aria-label="Remove {label}"` from the parent tag's projected text;
+ * override with `kjTagRemoveLabel`.
+ * @doc
+ * @doc-name tag
+ */
+@Component({
+  selector: 'kj-tag-remove',
+  standalone: true,
+  imports: [KjIconDirective],
+  hostDirectives: [
+    {
+      directive: KjTagRemove,
+      inputs: ['kjTagRemoveLabel'],
+    },
+  ],
+  template: `<ng-content><i kjIcon="x"></i></ng-content>`,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: 'kj-tag-remove',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjTagRemoveComponent {}
+
+/**
+ * Optional chip-group container. Provides the listbox / grid / group ARIA
+ * wiring + roving tabindex via the headless `KjTagList` directive. Standalone
+ * tags work without it; wrap chips in `<kj-tag-list>` whenever the group
+ * needs a single tab stop and arrow-key navigation.
+ * @doc
+ * @doc-name tag
+ */
+@Component({
+  selector: 'kj-tag-list',
+  standalone: true,
+  hostDirectives: [
+    {
+      directive: KjTagList,
+      inputs: [
+        'kjTagListRole',
+        'kjTagListOrientation',
+        'kjTagListMultiple',
+        'kjTagListDisabled',
+      ],
+    },
+  ],
+  template: `<ng-content />`,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: 'kj-tag-list',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjTagListComponent {}

package/src/test-setup.ts

@@ -0,0 +1,5 @@
+import '@analogjs/vitest-angular/setup-zone';
+import { setupTestBed } from '@analogjs/vitest-angular/setup-testbed';
+import '@testing-library/jest-dom';
+
+setupTestBed({ zoneless: false });

package/src/textarea/_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 { KjTextareaAutoresizeExample } from './textarea.autoresize.example';
+export { KjTextareaCharacterCountExample } from './textarea.character-count.example';
+export { KjTextareaExample } from './textarea.example';
+export { KjTextareaNoResizeExample } from './textarea.no-resize.example';
+export { KjTextareaUsageExample } from './textarea.usage.example';
+export { KjTextareaWithFieldExample } from './textarea.with-field.example';

package/src/textarea/_examples/textarea.autoresize.example.ts

@@ -0,0 +1,37 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjTextareaComponent } from '../textarea';
+
+/**
+ * Auto-resize example. The textarea grows from `kjMinRows` to `kjMaxRows`
+ * as the user types and the user drag handle is suppressed.
+ */
+@Component({
+  selector: 'kj-textarea-autoresize-example',
+  standalone: true,
+  imports: [KjTextareaComponent],
+  styles: [
+    `
+      :host {
+        display: grid;
+        gap: var(--kj-space-md);
+      }
+      label {
+        font: var(--kj-text-xs)/1.2 var(--kj-font-mono, var(--kj-font-sans));
+        color: var(--kj-fg-muted);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <div>
+      <label for="bio">Auto-resize (2–8 rows)</label>
+      <kj-textarea
+        kjAutoresize="auto"
+        [kjMinRows]="2"
+        [kjMaxRows]="8"
+        kjPlaceholder="Type a few lines and watch the height adjust…"
+      ></kj-textarea>
+    </div>
+  `,
+})
+export class KjTextareaAutoresizeExample {}

package/src/textarea/_examples/textarea.character-count.example.ts

@@ -0,0 +1,34 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { KjTextareaComponent } from '../textarea';
+
+/**
+ * Character-counter example. `kjMaxLength` enables native truncation; the
+ * visible counter renders below the textarea and an aria-live region
+ * announces threshold crossings (≤ 20, ≤ 10, 0 remaining) to AT users.
+ */
+@Component({
+  selector: 'kj-textarea-character-count-example',
+  standalone: true,
+  imports: [KjTextareaComponent, ReactiveFormsModule],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-textarea
+      [kjRows]="4"
+      [kjMaxLength]="200"
+      kjShowCounter
+      kjPlaceholder="Up to 200 characters…"
+      [formControl]="bio"
+    ></kj-textarea>
+  `,
+})
+export class KjTextareaCharacterCountExample {
+  readonly bio = new FormControl('');
+}

package/src/textarea/_examples/textarea.example.ts

@@ -0,0 +1,22 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjTextareaComponent } from '../textarea';
+
+/**
+ * Default usage example for `KjTextareaComponent`.
+ * Rendered live in the docs and as code in the example panel.
+ */
+@Component({
+  selector: 'kj-textarea-example',
+  standalone: true,
+  imports: [KjTextareaComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: ` <kj-textarea [kjRows]="4" kjPlaceholder="Tell us about yourself…"></kj-textarea> `,
+})
+export class KjTextareaExample {}

package/src/textarea/_examples/textarea.no-resize.example.ts

@@ -0,0 +1,28 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjTextareaComponent } from '../textarea';
+
+/**
+ * Locks the user-drag resize handle. Use when the surrounding layout owns
+ * the textarea's geometry (e.g. inside a fixed-height card).
+ */
+@Component({
+  selector: 'kj-textarea-no-resize-example',
+  standalone: true,
+  imports: [KjTextareaComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-textarea
+      [kjRows]="3"
+      kjResize="none"
+      kjPlaceholder="No resize handle on this one…"
+    ></kj-textarea>
+  `,
+})
+export class KjTextareaNoResizeExample {}

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

@@ -0,0 +1,50 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { KjTextareaComponent } from '../textarea';
+
+/**
+ * A walkthrough of the most common textarea usages — placeholder + `[(ngModel)]`,
+ * character counter with live region, and an invalid state. Use this as the
+ * copy-paste starting point for new screens.
+ */
+@Component({
+  selector: 'kj-textarea-usage-example',
+  standalone: true,
+  imports: [KjTextareaComponent, FormsModule],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--kj-space-md);
+      }
+      .hint {
+        font: 0.75rem var(--kj-font-sans);
+        color: var(--kj-fg-muted);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-textarea [kjRows]="4" kjPlaceholder="Share a quick update…" [(ngModel)]="bio"></kj-textarea>
+
+    <kj-textarea
+      [kjRows]="3"
+      [kjMaxLength]="120"
+      kjShowCounter
+      kjPlaceholder="Up to 120 characters"
+      [(ngModel)]="summary"
+    ></kj-textarea>
+
+    <kj-textarea
+      [kjRows]="2"
+      [kjInvalid]="true"
+      kjPlaceholder="At least 10 characters"
+    ></kj-textarea>
+    <p class="hint">Must be at least 10 characters long.</p>
+  `,
+})
+export class KjTextareaUsageExample {
+  readonly bio = signal('');
+  readonly summary = signal('');
+}

package/src/textarea/_examples/textarea.with-field.example.ts

@@ -0,0 +1,66 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { KjField, KjFieldError, KjFieldHelp, KjFieldLabel } from '@kouji-ui/core';
+import { KjTextareaComponent } from '../textarea';
+
+/**
+ * Field-wrapped example. `KjField` owns label / help / error semantics
+ * and the `aria-describedby` chain; the textarea handles its own counter
+ * (which composes its id alongside the field's described-by ids).
+ */
+@Component({
+  selector: 'kj-textarea-with-field-example',
+  standalone: true,
+  imports: [
+    KjTextareaComponent,
+    ReactiveFormsModule,
+    KjField,
+    KjFieldLabel,
+    KjFieldHelp,
+    KjFieldError,
+  ],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+      [kjField] {
+        display: grid;
+        gap: var(--kj-space-xs);
+        max-width: 480px;
+      }
+      [kjFieldLabel] {
+        font: var(--kj-text-sm)/1.2 var(--kj-font-sans);
+        color: var(--kj-fg-default);
+      }
+      [kjFieldHelp] {
+        font: var(--kj-text-xs)/1.2 var(--kj-font-mono, var(--kj-font-sans));
+        color: var(--kj-fg-muted);
+      }
+      [kjFieldError] {
+        font: var(--kj-text-xs)/1.2 var(--kj-font-mono, var(--kj-font-sans));
+        color: var(--kj-fg-danger);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <div kjField [kjRequired]="true" [kjInvalid]="bio.touched && bio.invalid">
+      <label for="textarea-bio" kjFieldLabel>Bio</label>
+      <kj-textarea
+        id="textarea-bio"
+        [kjRows]="4"
+        [kjMaxLength]="200"
+        kjShowCounter
+        kjPlaceholder="A few lines about you…"
+        [formControl]="bio"
+        [kjInvalid]="bio.touched && bio.invalid"
+      ></kj-textarea>
+      <span kjFieldHelp>Plain text. Markdown is not rendered.</span>
+      <span kjFieldError>This field is required.</span>
+    </div>
+  `,
+})
+export class KjTextareaWithFieldExample {
+  readonly bio = new FormControl('', { validators: [Validators.required] });
+}

package/src/textarea/index.ts

@@ -0,0 +1 @@
+export * from './textarea';