@kouji-ui/components 0.1.1 → 0.1.2

package/src/tag/tag.playground.ts

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

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

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

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

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

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

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

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

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

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

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

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