@kouji-ui/components 0.1.1 → 0.1.3

package/src/chat/chat.spec.ts

@@ -1,343 +0,0 @@
-import { Component } from '@angular/core';
-import { render } from '@testing-library/angular';
-import { describe, expect, it } from 'vitest';
-import {
-  KjChatAvatarComponent,
-  KjChatBubbleComponent,
-  KjChatComponent,
-  KjChatFooterComponent,
-  KjChatHeaderComponent,
-  KjChatLogComponent,
-} from './chat';
-
-const imports = [
-  KjChatLogComponent,
-  KjChatComponent,
-  KjChatAvatarComponent,
-  KjChatHeaderComponent,
-  KjChatBubbleComponent,
-  KjChatFooterComponent,
-];
-
-/**
- * Allow Angular's signal-driven `effect`s and `afterNextRender` group
- * computation to settle before the assertions read host attributes.
- */
-async function flush(): Promise<void> {
-  await new Promise<void>((resolve) => setTimeout(resolve, 0));
-  await Promise.resolve();
-  await Promise.resolve();
-}
-
-describe('KjChatLogComponent', () => {
-  it('renders an inner [kjChatLog] with role=log + aria-live=polite', async () => {
-    @Component({
-      standalone: true,
-      imports,
-      template: `<kj-chat-log></kj-chat-log>`,
-    })
-    class Host {}
-
-    const { container } = await render(Host);
-    await flush();
-
-    const log = container.querySelector('.kj-chat-log') as HTMLElement;
-    expect(log).toBeTruthy();
-    expect(log.getAttribute('role')).toBe('log');
-    expect(log.getAttribute('aria-live')).toBe('polite');
-    expect(log.getAttribute('aria-relevant')).toBe('additions');
-    expect(log.getAttribute('aria-atomic')).toBe('false');
-  });
-
-  it('forwards kjChatLogLabel to the directive (aria-label)', async () => {
-    @Component({
-      standalone: true,
-      imports,
-      template: `<kj-chat-log kjChatLogLabel="Conversation with Alice"></kj-chat-log>`,
-    })
-    class Host {}
-
-    const { container } = await render(Host);
-    await flush();
-
-    expect(container.querySelector('.kj-chat-log')?.getAttribute('aria-label')).toBe(
-      'Conversation with Alice',
-    );
-  });
-
-  it('forwards kjChatLogLive=off to the directive', async () => {
-    @Component({
-      standalone: true,
-      imports,
-      template: `<kj-chat-log kjChatLogLive="off"></kj-chat-log>`,
-    })
-    class Host {}
-
-    const { container } = await render(Host);
-    await flush();
-
-    expect(container.querySelector('.kj-chat-log')?.getAttribute('aria-live')).toBe('off');
-  });
-
-  it('renders projected children unchanged', async () => {
-    @Component({
-      standalone: true,
-      imports,
-      template: `
-        <kj-chat-log>
-          <kj-chat data-testid="r1"><kj-chat-bubble>A</kj-chat-bubble></kj-chat>
-          <kj-chat data-testid="r2"><kj-chat-bubble>B</kj-chat-bubble></kj-chat>
-        </kj-chat-log>
-      `,
-    })
-    class Host {}
-
-    const { container } = await render(Host);
-    await flush();
-
-    expect(container.querySelectorAll('kj-chat')).toHaveLength(2);
-    expect(container.querySelectorAll('.kj-chat-bubble')).toHaveLength(2);
-  });
-});
-
-describe('KjChatComponent', () => {
-  it('default role is article on the inner host', async () => {
-    @Component({
-      standalone: true,
-      imports,
-      template: `<kj-chat></kj-chat>`,
-    })
-    class Host {}
-
-    const { container } = await render(Host);
-    await flush();
-
-    expect(container.querySelector('.kj-chat')?.getAttribute('role')).toBe('article');
-  });
-
-  it('reflects kjSide to data-side', async () => {
-    @Component({
-      standalone: true,
-      imports,
-      template: `<kj-chat kjSide="end"></kj-chat>`,
-    })
-    class Host {}
-
-    const { container } = await render(Host);
-    await flush();
-
-    expect(container.querySelector('.kj-chat')?.getAttribute('data-side')).toBe('end');
-  });
-
-  it('default side is start', async () => {
-    @Component({
-      standalone: true,
-      imports,
-      template: `<kj-chat></kj-chat>`,
-    })
-    class Host {}
-
-    const { container } = await render(Host);
-    await flush();
-
-    expect(container.querySelector('.kj-chat')?.getAttribute('data-side')).toBe('start');
-  });
-
-  it('wires aria-labelledby and aria-describedby from projected header / footer', async () => {
-    @Component({
-      standalone: true,
-      imports,
-      template: `
-        <kj-chat>
-          <kj-chat-header>Alice 12:46</kj-chat-header>
-          <kj-chat-bubble>Hi</kj-chat-bubble>
-          <kj-chat-footer>Sent</kj-chat-footer>
-        </kj-chat>
-      `,
-    })
-    class Host {}
-
-    const { container } = await render(Host);
-    await flush();
-
-    const row = container.querySelector('.kj-chat')!;
-    const header = container.querySelector('.kj-chat-header') as HTMLElement;
-    const footer = container.querySelector('.kj-chat-footer') as HTMLElement;
-    expect(header.id).toMatch(/^kj-chat-header-\d+$/);
-    expect(footer.id).toMatch(/^kj-chat-footer-\d+$/);
-    expect(row.getAttribute('aria-labelledby')).toBe(header.id);
-    expect(row.getAttribute('aria-describedby')).toBe(footer.id);
-  });
-});
-
-describe('KjChatAvatarComponent', () => {
-  it('forces aria-hidden=true and role=presentation on the slot', async () => {
-    @Component({
-      standalone: true,
-      imports,
-      template: `<kj-chat-avatar></kj-chat-avatar>`,
-    })
-    class Host {}
-
-    const { container } = await render(Host);
-    await flush();
-
-    const av = container.querySelector('.kj-chat-avatar')!;
-    expect(av.getAttribute('aria-hidden')).toBe('true');
-    expect(av.getAttribute('role')).toBe('presentation');
-  });
-
-  it('renders projected content', async () => {
-    @Component({
-      standalone: true,
-      imports,
-      template: `
-        <kj-chat-avatar>
-          <span class="probe">probe</span>
-        </kj-chat-avatar>
-      `,
-    })
-    class Host {}
-
-    const { container } = await render(Host);
-    await flush();
-
-    expect(container.querySelector('.kj-chat-avatar .probe')?.textContent).toBe('probe');
-  });
-});
-
-describe('KjChatBubbleComponent', () => {
-  it('default variant + size land on the inner host', async () => {
-    @Component({
-      standalone: true,
-      imports,
-      template: `<kj-chat-bubble>Hi</kj-chat-bubble>`,
-    })
-    class Host {}
-
-    const { container } = await render(Host);
-    await flush();
-
-    const b = container.querySelector('.kj-chat-bubble')!;
-    expect(b.getAttribute('data-variant')).toBe('default');
-    expect(b.getAttribute('data-size')).toBe('md');
-  });
-
-  it('forwards kjVariant + kjSize through the typed wrapper inputs', async () => {
-    @Component({
-      standalone: true,
-      imports,
-      template: `<kj-chat-bubble kjVariant="primary" kjSize="lg">Hi</kj-chat-bubble>`,
-    })
-    class Host {}
-
-    const { container } = await render(Host);
-    await flush();
-
-    const b = container.querySelector('.kj-chat-bubble')!;
-    expect(b.getAttribute('data-variant')).toBe('primary');
-    expect(b.getAttribute('data-size')).toBe('lg');
-  });
-
-  it('renders data-tail inside a row by default', async () => {
-    @Component({
-      standalone: true,
-      imports,
-      template: `
-        <kj-chat>
-          <kj-chat-bubble>Hi</kj-chat-bubble>
-        </kj-chat>
-      `,
-    })
-    class Host {}
-
-    const { container } = await render(Host);
-    await flush();
-
-    expect(container.querySelector('.kj-chat-bubble')?.hasAttribute('data-tail')).toBe(true);
-  });
-
-  it('omits data-tail when kjChatBubbleNoTail is true', async () => {
-    @Component({
-      standalone: true,
-      imports,
-      template: `
-        <kj-chat>
-          <kj-chat-bubble [kjChatBubbleNoTail]="true">Hi</kj-chat-bubble>
-        </kj-chat>
-      `,
-    })
-    class Host {}
-
-    const { container } = await render(Host);
-    await flush();
-
-    expect(container.querySelector('.kj-chat-bubble')?.hasAttribute('data-tail')).toBe(false);
-  });
-});
-
-describe('KjChatFooterComponent', () => {
-  it('reflects kjState as data-state and aria-label', async () => {
-    @Component({
-      standalone: true,
-      imports,
-      template: `<kj-chat-footer kjState="read">Read</kj-chat-footer>`,
-    })
-    class Host {}
-
-    const { container } = await render(Host);
-    await flush();
-
-    const f = container.querySelector('.kj-chat-footer')!;
-    expect(f.getAttribute('data-state')).toBe('read');
-    expect(f.getAttribute('aria-label')).toBe('Read');
-  });
-
-  it('omits data-state when kjState is unset', async () => {
-    @Component({
-      standalone: true,
-      imports,
-      template: `<kj-chat-footer>Sent 12:46</kj-chat-footer>`,
-    })
-    class Host {}
-
-    const { container } = await render(Host);
-    await flush();
-
-    const f = container.querySelector('.kj-chat-footer')!;
-    expect(f.hasAttribute('data-state')).toBe(false);
-    expect(f.hasAttribute('aria-label')).toBe(false);
-  });
-});
-
-describe('KjChatHeaderComponent', () => {
-  it('mints unique ids for two adjacent headers', async () => {
-    @Component({
-      standalone: true,
-      imports,
-      template: `
-        <kj-chat-log>
-          <kj-chat>
-            <kj-chat-header data-testid="h1">A</kj-chat-header>
-            <kj-chat-bubble>x</kj-chat-bubble>
-          </kj-chat>
-          <kj-chat>
-            <kj-chat-header data-testid="h2">B</kj-chat-header>
-            <kj-chat-bubble>y</kj-chat-bubble>
-          </kj-chat>
-        </kj-chat-log>
-      `,
-    })
-    class Host {}
-
-    const { container } = await render(Host);
-    await flush();
-
-    const headers = container.querySelectorAll('.kj-chat-header');
-    expect(headers.length).toBe(2);
-    const h1 = (headers[0] as HTMLElement).id;
-    const h2 = (headers[1] as HTMLElement).id;
-    expect(h1).not.toEqual(h2);
-    expect(h1).toMatch(/^kj-chat-header-/);
-  });
-});

package/src/chat/chat.ts

@@ -1,269 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ViewEncapsulation,
-  input,
-} from '@angular/core';
-import {
-  KjChat,
-  KjChatAvatar,
-  KjChatBubble,
-  KjChatFooter,
-  KjChatHeader,
-  KjChatLog,
-  type KjChatRole,
-  type KjChatSide,
-  type KjChatState,
-} from '@kouji-ui/core';
-
-/**
- * Typed bubble variant set. Mirrors the analysis preset list so consumer
- * templates get IDE autocomplete; the underlying `KjVariant` widens to
- * `string` and is validated against `KJ_CHAT_BUBBLE_CONFIG` in dev mode.
- */
-export type KjChatBubbleVariant =
-  | 'default'
-  | 'primary'
-  | 'secondary'
-  | 'accent'
-  | 'info'
-  | 'success'
-  | 'warning'
-  | 'error';
-
-/** Typed bubble size set. Backed by `KjSize` host directive. */
-export type KjChatBubbleSize = 'sm' | 'md' | 'lg';
-
-/** Live-region politeness for the log container. */
-export type KjChatLogLive = 'polite' | 'off';
-
-/**
- * Chat log container. Composes `KjChatLog` via `hostDirectives` so the
- * `role="log"` / `aria-live` / `aria-relevant` host bindings land on the
- * `<kj-chat-log>` custom element itself — that element IS the live region
- * announced by APG's Log pattern, AND the `KJ_CHAT_LOG` provider lives
- * here so projected `<kj-chat>` children find it through their consumer-
- * declared injector chain (content projection preserves the original
- * injection context).
- *
- * Per the analysis we ship `aria-live="polite"` by default and deliberately
- * do not expose `'assertive'` — interrupting the user mid-typing on every
- * inbound message is the canonical chat-app a11y bug.
- *
- * @doc-example Default
- *   The default playground — a four-message conversation between two senders.
- *   @doc-file chat-bubble.example.ts
- * @doc-example Usage
- *   The common shape — start/end sides, primary variant for self, footer
- *   read-state. Use this as the copy-paste starting point.
- *   @doc-file chat.usage.example.ts
- * @doc-example Sides
- *   `kjSide="start"` (theirs) vs `"end"` (mine) — drives bubble tail and alignment.
- *   @doc-file chat-bubble.sides.example.ts
- * @doc-example Variants
- *   default / primary / success / warning / error — pick the visual register.
- *   @doc-file chat-bubble.variants.example.ts
- * @doc-example With state
- *   Footer `kjState` reflects delivery / read / failed glyphs with an `aria-label`.
- *   @doc-file chat-bubble.with-state.example.ts
- * @doc-example Grouped
- *   Consecutive rows from the same `kjChatAuthor` collapse their headers and tails.
- *   @doc-file chat-bubble.grouped.example.ts
- *
- * @doc-keyboard
- *   Tab           — Moves focus through interactive elements inside the log (links, action buttons)
- *
- * @doc-aria
- *   role             — `log` on `<kj-chat-log>`; `article` on each `<kj-chat>` row
- *   aria-live        — `"polite"` on the log (assertive is deliberately not exposed)
- *   aria-relevant    — `"additions"` on the log so removed messages don't re-announce
- *   aria-labelledby  — Row references its header id
- *   aria-describedby — Row references its footer (state) id
- *   data-side        — Mirrors `kjSide` for theme/scope hooks
- *   data-grouped     — Reflected when consecutive rows share an author
- *
- * @doc-touch
- *   Bubbles are reading surfaces, not tap targets. When wiring in action
- *   buttons (reply, react, copy) inside a row, size them to ≥ 44×44 and
- *   reveal them on hover/focus rather than packing them inline.
- *
- * @doc-a11y
- *   Follows the WAI-ARIA APG Log pattern. The log defaults to `aria-live="polite"`
- *   so AT users hear inbound messages without interruption — we deliberately
- *   do not expose `"assertive"`. Avatars are forced `aria-hidden` because the
- *   row's header conveys sender identity. Footer state glyphs carry an
- *   `aria-label` so "✓✓" reads as "Read".
- *
- * @doc-related dialog,toast,popover
- *
- * @doc-css-var
- *   --kj-chat-gap                — Column gap between avatar and bubble in the row grid.
- *   --kj-chat-col-gap            — Row gap between header, bubble, and footer cells.
- *   --kj-chat-bubble-bg          — Bubble background fill. Variant rules set this; override per side or sender.
- *   --kj-chat-bubble-fg          — Bubble foreground (text) color. Resolved per variant.
- *   --kj-chat-bubble-radius      — Bubble corner radius. Inherits --kj-radius-box.
- *   --kj-chat-bubble-padding-x   — Horizontal padding inside the bubble. Sizes override.
- *   --kj-chat-bubble-padding-y   — Vertical padding inside the bubble. Sizes override.
- *   --kj-chat-bubble-font-size   — Bubble font size. Sizes override.
- *
- * @doc-category Library/Data display
- * @doc
- * @doc-name chat
- * @doc-description Themed chat message log with bubble variants, avatars, and accessible inbound-message announcements.
- * @doc-is-main
- */
-@Component({
-  selector: 'kj-chat-log',
-  standalone: true,
-  hostDirectives: [
-    {
-      directive: KjChatLog,
-      inputs: ['kjChatLogLive', 'kjChatLogLabel'],
-    },
-  ],
-  template: `<ng-content />`,
-  styleUrl: './chat.css',
-  encapsulation: ViewEncapsulation.None,
-  host: { class: 'kj-chat-log' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjChatLogComponent {}
-
-/**
- * Chat row. Composes `KjChat` via `hostDirectives` so `role="article"` (or
- * the consumer's `kjRole` override), `data-side`, `data-grouped`, and the
- * `aria-labelledby` / `aria-describedby` wiring all land on the `<kj-chat>`
- * host. The `KJ_CHAT` provider lives on the host so projected
- * `<kj-chat-header>`, `<kj-chat-bubble>`, `<kj-chat-footer>` children find
- * it through their original consumer-declared injector chain.
- *
- * Group-by-sender uses `previousElementSibling` traversal — that walk stays
- * deterministic even with the wrapper because the grouping `KjChat`
- * instances live on the visible custom elements that ARE physical DOM
- * siblings inside the log.
- * @doc
- * @doc-name chat
- */
-@Component({
-  selector: 'kj-chat',
-  standalone: true,
-  hostDirectives: [
-    {
-      directive: KjChat,
-      inputs: ['kjSide', 'kjChatAuthor', 'kjChatGrouped', 'kjRole'],
-    },
-  ],
-  template: `<ng-content />`,
-  encapsulation: ViewEncapsulation.None,
-  host: { class: 'kj-chat' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjChatComponent {}
-
-/**
- * Sender face slot. Composes `KjChatAvatar` so the slot is forced
- * `aria-hidden="true"` (the row's accessible name comes from the header;
- * letting the avatar's `<img alt>` re-announce the name causes AT users
- * to hear "Jane Doe, Jane Doe, [message]"). Project a decorative
- * `<kj-avatar>` (or any ornamental marker) inside.
- * @doc
- * @doc-name chat
- */
-@Component({
-  selector: 'kj-chat-avatar',
-  standalone: true,
-  hostDirectives: [KjChatAvatar],
-  template: `<ng-content />`,
-  encapsulation: ViewEncapsulation.None,
-  host: { class: 'kj-chat-avatar' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjChatAvatarComponent {}
-
-/**
- * Sender name + time header. The directive mints a stable id and registers
- * it with the parent row for `aria-labelledby`; the wrapper supplies the
- * `<ng-content>` slot. Per the analysis the header should contain a
- * `<time datetime="…">` element; the directive does not enforce this — the
- * consumer renders it.
- * @doc
- * @doc-name chat
- */
-@Component({
-  selector: 'kj-chat-header',
-  standalone: true,
-  hostDirectives: [KjChatHeader],
-  template: `<ng-content />`,
-  encapsulation: ViewEncapsulation.None,
-  host: { class: 'kj-chat-header' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjChatHeaderComponent {}
-
-/**
- * Rounded message body. Renders an inner `[kjChatBubble]` host (which
- * itself composes `KjVariant` + `KjSize` via `hostDirectives`) so
- * `data-variant`, `data-size`, and `data-tail` land on the visible bubble
- * element where the CSS expects them. The bubble does not provide DI
- * tokens to descendants, so projecting through an inner template does not
- * break any injection chain.
- *
- * Variant / size are typed at the wrapper layer for IDE autocomplete; they
- * widen to `string` at the directive layer where they are validated against
- * `KJ_CHAT_BUBBLE_CONFIG` in dev mode.
- * @doc
- * @doc-name chat
- */
-@Component({
-  selector: 'kj-chat-bubble',
-  standalone: true,
-  imports: [KjChatBubble],
-  template: `
-    <p
-      kjChatBubble
-      class="kj-chat-bubble"
-      [kjVariant]="kjVariant()"
-      [kjSize]="kjSize()"
-      [kjChatBubbleNoTail]="kjChatBubbleNoTail()"
-    >
-      <ng-content />
-    </p>
-  `,
-  encapsulation: ViewEncapsulation.None,
-  host: { style: 'display: contents;' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjChatBubbleComponent {
-  /** Visual register. Validated against `KJ_CHAT_BUBBLE_CONFIG`. */
-  readonly kjVariant = input<KjChatBubbleVariant>('default');
-  /** Density preset. Drives padding + font-size on the bubble. */
-  readonly kjSize = input<KjChatBubbleSize>('md');
-  /** Suppresses the tail unconditionally. Auto-suppression on grouped rows is independent. */
-  readonly kjChatBubbleNoTail = input(false);
-}
-
-/**
- * Read-state footer. Composes `KjChatFooter` so the directive mints an id,
- * registers it with the parent row for `aria-describedby`, reflects
- * `kjState` to `data-state`, and injects an `aria-label` so the glyph is
- * intelligible to AT.
- * @doc
- * @doc-name chat
- */
-@Component({
-  selector: 'kj-chat-footer',
-  standalone: true,
-  hostDirectives: [
-    {
-      directive: KjChatFooter,
-      inputs: ['kjState'],
-    },
-  ],
-  template: `<ng-content />`,
-  encapsulation: ViewEncapsulation.None,
-  host: { class: 'kj-chat-footer' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjChatFooterComponent {}
-
-export type { KjChatRole, KjChatSide, KjChatState };

package/src/chat/chat.usage.example.ts

@@ -1,49 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { KjAvatarComponent } from '../avatar/avatar';
-import {
-  KjChatAvatarComponent,
-  KjChatBubbleComponent,
-  KjChatComponent,
-  KjChatFooterComponent,
-  KjChatHeaderComponent,
-  KjChatLogComponent,
-} from './chat';
-
-/**
- * Common chat-log shape — labelled log, two senders, sides, a primary
- * variant for self, and a footer read-state. Use this as the copy-paste
- * starting point for new screens.
- */
-@Component({
-  selector: 'kj-chat-usage-example',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    KjChatLogComponent,
-    KjChatComponent,
-    KjChatAvatarComponent,
-    KjChatHeaderComponent,
-    KjChatBubbleComponent,
-    KjChatFooterComponent,
-    KjAvatarComponent,
-  ],
-  styles: [`
-    :host { display: block; }
-    kj-chat-log { max-height: 20rem; }
-  `],
-  template: `
-    <kj-chat-log kjChatLogLabel="Conversation with Maya">
-      <kj-chat kjSide="start" kjChatAuthor="maya">
-        <kj-chat-avatar><kj-avatar content="MA" alt="Maya" /></kj-chat-avatar>
-        <kj-chat-header>Maya <time datetime="2025-05-06T09:12">09:12</time></kj-chat-header>
-        <kj-chat-bubble>Want to ship the token system this week?</kj-chat-bubble>
-      </kj-chat>
-
-      <kj-chat kjSide="end" kjChatAuthor="me">
-        <kj-chat-bubble kjVariant="primary">Yes — PR's open, waiting on review.</kj-chat-bubble>
-        <kj-chat-footer kjState="read">Read</kj-chat-footer>
-      </kj-chat>
-    </kj-chat-log>
-  `,
-})
-export class KjChatUsageExample {}

package/src/chat/index.ts

@@ -1,13 +0,0 @@
-export {
-  KjChatAvatarComponent,
-  KjChatBubbleComponent,
-  KjChatComponent,
-  KjChatFooterComponent,
-  KjChatHeaderComponent,
-  KjChatLogComponent,
-  type KjChatBubbleSize,
-  type KjChatBubbleVariant,
-  type KjChatRole,
-  type KjChatSide,
-  type KjChatState,
-} from './chat';

package/src/checkbox/_examples/checkbox.checked.example.ts

@@ -1,20 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { KjCheckboxComponent } from '../checkbox';
-
-@Component({
-  selector: 'kj-checkbox-checked-example',
-  standalone: true,
-  imports: [KjCheckboxComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<kj-checkbox [(checked)]="value">Subscribed</kj-checkbox>`,
-})
-export class KjCheckboxCheckedExample {
-  readonly value = signal(true);
-}