@kouji-ui/core 0.1.1 → 0.1.2

package/src/typography/muted.ts

@@ -1,29 +0,0 @@
-import { Directive } from '@angular/core';
-
-/**
- * Reduces a phrasing element's colour intensity to the muted token so the
- * text reads as secondary information against the primary text. Reflects
- * `data-tone="muted"`; the kouji theme layer owns the actual colour mix and
- * is verified against the AAA contrast bar (≥ 7:1) on `base-100`,
- * `base-200`, and `base-300` page backgrounds.
- *
- * Works on any phrasing element (`<span>`, `<small>`, `<p>`, `<em>`).
- *
- * @example
- * ```html
- * <p>Primary text. <small kjMuted>Secondary info.</small></p>
- * <p kjMuted>Standalone muted paragraph.</p>
- * ```
- * @doc-category Core/Data display
- * @doc
- * @doc-name typography
- */
-@Directive({
-  selector: '[kjMuted]',
-  standalone: true,
-  exportAs: 'kjMuted',
-  host: {
-    '[attr.data-tone]': '"muted"',
-  },
-})
-export class KjMuted {}

package/src/typography/truncate.ts

@@ -1,99 +0,0 @@
-import {
-  Directive,
-  ElementRef,
-  afterNextRender,
-  inject,
-  isDevMode,
-  input,
-} from '@angular/core';
-
-/**
- * Clamps the host element's text content to a fixed number of lines.
- *
- * - `kjTruncate="1"` (default) — single-line ellipsis using
- *   `text-overflow: ellipsis`.
- * - `kjTruncate="2"` and above — multi-line clamp using
- *   `-webkit-line-clamp: N`.
- *
- * The directive reflects `[attr.data-truncate]` so the kouji CSS layer can
- * apply the right rules. After the first render it reads the host's
- * `textContent` and writes a normalised `[attr.title]` **only** when the
- * consumer has not supplied a `title` or `aria-label`. This is the
- * *belt-and-braces* affordance for sighted-but-zoomed users — AT users
- * read the full text from the accessibility tree, which is unaffected by
- * the visual clamp on modern browser/AT pairings.
- *
- * The directive does *not* install a `MutationObserver` to chase content
- * changes; if the projected text changes after first render, the consumer
- * is responsible for refreshing `title` themselves.
- *
- * @example
- * ```html
- * <p kjTruncate>Single-line truncation with auto-tooltip.</p>
- * <p [kjTruncate]="3">Three-line clamp for a card description.</p>
- * <p kjTruncate title="Custom tooltip">Consumer title wins.</p>
- * ```
- * @doc-category Core/Data display
- * @doc
- * @doc-name typography
- */
-@Directive({
-  selector: '[kjTruncate]',
-  standalone: true,
-  exportAs: 'kjTruncate',
-  host: {
-    '[attr.data-truncate]': 'kjTruncate()',
-  },
-})
-export class KjTruncate {
-  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef);
-
-  /**
-   * Number of visible lines before truncation kicks in. `1` produces a
-   * single-line ellipsis; values ≥ `2` produce a multi-line clamp. `0` and
-   * negative values are dev-mode warnings — omit the directive instead.
-   * Defaults to `1`.
-   */
-  readonly kjTruncate = input(1, {
-    transform: (value: number | string | undefined) => {
-      const n = typeof value === 'string' ? Number(value) : (value ?? 1);
-      return Number.isFinite(n) && n >= 1 ? Math.floor(n) : 1;
-    },
-  });
-
-  constructor() {
-    afterNextRender(() => {
-      const host = this.el.nativeElement;
-
-      if (isDevMode()) {
-        // Re-validate the raw input shape: the transform clamps invalid values
-        // to `1`, but we still want to flag intent so the consumer fixes the
-        // template rather than silently getting a single-line clamp. A bare
-        // `kjTruncate` attribute (no value, the documented single-line
-        // default) is allowed and skipped.
-        const raw = host.getAttribute('kjTruncate') ?? host.getAttribute('kjtruncate');
-        if (raw !== null && raw !== '') {
-          const parsed = Number(raw);
-          if (!Number.isFinite(parsed) || parsed < 1) {
-            console.warn(
-              `[kj] kjTruncate received "${raw}". Use a positive integer ` +
-                `(1 = single-line ellipsis, 2+ = multi-line clamp), or omit ` +
-                `the directive entirely.`,
-            );
-          }
-        }
-      }
-
-      const hasTitle = host.hasAttribute('title');
-      const hasAriaLabel = host.hasAttribute('aria-label');
-      if (hasTitle || hasAriaLabel) {
-        return;
-      }
-
-      const text = (host.textContent ?? '').trim().replace(/\s+/g, ' ');
-      if (text.length > 0) {
-        host.setAttribute('title', text);
-      }
-    });
-  }
-}

package/src/typography/typography.spec.ts

@@ -1,203 +0,0 @@
-import { render } from '@testing-library/angular';
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { KjBlockquote } from './blockquote';
-import { KjCode } from './code';
-import { KjLead } from './lead';
-import { KjMuted } from './muted';
-import { KjTruncate } from './truncate';
-
-/**
- * Flush microtasks + the rAF that backs `afterNextRender` so the directives'
- * dev-mode host inspections and `KjTruncate`'s `title` injection have a
- * chance to run.
- */
-async function flushAfterNextRender(): Promise<void> {
-  await new Promise<void>((resolve) => setTimeout(resolve, 0));
-  await Promise.resolve();
-  await Promise.resolve();
-}
-
-describe('Typography directives', () => {
-  afterEach(() => vi.restoreAllMocks());
-
-  describe('KjLead', () => {
-    it('reflects data-tone="lead" on the host', async () => {
-      const { container } = await render(`<p kjLead>Lead paragraph.</p>`, {
-        imports: [KjLead],
-      });
-      await flushAfterNextRender();
-      expect(container.querySelector('p')).toHaveAttribute('data-tone', 'lead');
-    });
-
-    it('does not warn on a <p> host', async () => {
-      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
-      await render(`<p kjLead>Lead.</p>`, { imports: [KjLead] });
-      await flushAfterNextRender();
-      const matched = warn.mock.calls.some((c) => /kjLead applied to/i.test(String(c[0])));
-      expect(matched).toBe(false);
-    });
-
-    it('warns when applied to a non-<p> host', async () => {
-      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
-      await render(`<span kjLead>Lead-ish.</span>`, { imports: [KjLead] });
-      await flushAfterNextRender();
-      const matched = warn.mock.calls.some((c) => {
-        const msg = String(c[0]);
-        return /kjLead applied to <span>/i.test(msg) && /<p>/.test(msg);
-      });
-      expect(matched).toBe(true);
-    });
-  });
-
-  describe('KjMuted', () => {
-    it('reflects data-tone="muted" on the host', async () => {
-      const { container } = await render(`<small kjMuted>Meta line.</small>`, {
-        imports: [KjMuted],
-      });
-      expect(container.querySelector('small')).toHaveAttribute('data-tone', 'muted');
-    });
-
-    it('works on any phrasing element (<span>)', async () => {
-      const { container } = await render(`<span kjMuted>Note</span>`, {
-        imports: [KjMuted],
-      });
-      expect(container.querySelector('span')).toHaveAttribute('data-tone', 'muted');
-    });
-  });
-
-  describe('KjCode', () => {
-    it('reflects data-tone="code" on the host', async () => {
-      const { container } = await render(`<code kjCode>npm install</code>`, {
-        imports: [KjCode],
-      });
-      await flushAfterNextRender();
-      expect(container.querySelector('code')).toHaveAttribute('data-tone', 'code');
-    });
-
-    it('does not warn on a <code> host', async () => {
-      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
-      await render(`<code kjCode>x</code>`, { imports: [KjCode] });
-      await flushAfterNextRender();
-      const matched = warn.mock.calls.some((c) => /kjCode applied to/i.test(String(c[0])));
-      expect(matched).toBe(false);
-    });
-
-    it('warns when applied to a non-<code> host (e.g. <span>)', async () => {
-      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
-      await render(`<span kjCode>x</span>`, { imports: [KjCode] });
-      await flushAfterNextRender();
-      const matched = warn.mock.calls.some((c) => {
-        const msg = String(c[0]);
-        return /kjCode applied to <span>/i.test(msg) && /<code>/.test(msg);
-      });
-      expect(matched).toBe(true);
-    });
-  });
-
-  describe('KjBlockquote', () => {
-    it('reflects data-tone="blockquote" on the host', async () => {
-      const { container } = await render(`<blockquote kjBlockquote>Quote</blockquote>`, {
-        imports: [KjBlockquote],
-      });
-      await flushAfterNextRender();
-      expect(container.querySelector('blockquote')).toHaveAttribute(
-        'data-tone',
-        'blockquote',
-      );
-    });
-
-    it('does not warn on a <blockquote> host', async () => {
-      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
-      await render(`<blockquote kjBlockquote>x</blockquote>`, {
-        imports: [KjBlockquote],
-      });
-      await flushAfterNextRender();
-      const matched = warn.mock.calls.some((c) =>
-        /kjBlockquote applied to/i.test(String(c[0])),
-      );
-      expect(matched).toBe(false);
-    });
-
-    it('warns when applied to a non-<blockquote> host (e.g. <div>)', async () => {
-      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
-      await render(`<div kjBlockquote>x</div>`, { imports: [KjBlockquote] });
-      await flushAfterNextRender();
-      const matched = warn.mock.calls.some((c) => {
-        const msg = String(c[0]);
-        return /kjBlockquote applied to <div>/i.test(msg) && /<blockquote>/.test(msg);
-      });
-      expect(matched).toBe(true);
-    });
-  });
-
-  describe('KjTruncate', () => {
-    it('defaults to data-truncate="1"', async () => {
-      const { container } = await render(`<p kjTruncate>Some long text.</p>`, {
-        imports: [KjTruncate],
-      });
-      await flushAfterNextRender();
-      expect(container.querySelector('p')).toHaveAttribute('data-truncate', '1');
-    });
-
-    it('reflects [kjTruncate]="3" as data-truncate="3"', async () => {
-      const { container } = await render(
-        `<p [kjTruncate]="3">Some long text spanning multiple lines.</p>`,
-        { imports: [KjTruncate] },
-      );
-      await flushAfterNextRender();
-      expect(container.querySelector('p')).toHaveAttribute('data-truncate', '3');
-    });
-
-    it('injects [title] from textContent when consumer has not supplied title/aria-label', async () => {
-      const { container } = await render(
-        `<p kjTruncate>Atlas helps engineering teams plan.</p>`,
-        { imports: [KjTruncate] },
-      );
-      await flushAfterNextRender();
-      expect(container.querySelector('p')).toHaveAttribute(
-        'title',
-        'Atlas helps engineering teams plan.',
-      );
-    });
-
-    it('normalises whitespace (trim + collapse runs) when injecting title', async () => {
-      const { container } = await render(
-        `<p kjTruncate>   Lots    of\n   whitespace   </p>`,
-        { imports: [KjTruncate] },
-      );
-      await flushAfterNextRender();
-      expect(container.querySelector('p')).toHaveAttribute(
-        'title',
-        'Lots of whitespace',
-      );
-    });
-
-    it('does not overwrite a consumer-supplied title', async () => {
-      const { container } = await render(
-        `<p kjTruncate title="Custom tooltip">The visible text.</p>`,
-        { imports: [KjTruncate] },
-      );
-      await flushAfterNextRender();
-      expect(container.querySelector('p')).toHaveAttribute('title', 'Custom tooltip');
-    });
-
-    it('does not inject title when aria-label is consumer-supplied', async () => {
-      const { container } = await render(
-        `<p kjTruncate aria-label="Friendly summary">The visible text.</p>`,
-        { imports: [KjTruncate] },
-      );
-      await flushAfterNextRender();
-      const host = container.querySelector('p');
-      expect(host).not.toHaveAttribute('title');
-      expect(host).toHaveAttribute('aria-label', 'Friendly summary');
-    });
-
-    it('does not set title when textContent is empty', async () => {
-      const { container } = await render(`<p kjTruncate></p>`, {
-        imports: [KjTruncate],
-      });
-      await flushAfterNextRender();
-      expect(container.querySelector('p')).not.toHaveAttribute('title');
-    });
-  });
-});

package/tsconfig.lib.json

@@ -1,21 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "types": []
-  },
-  "include": ["src/**/*.ts"],
-  "exclude": ["**/*.spec.ts"],
-  "angularCompilerOptions": {
-    "extendedDiagnostics": {
-      "checks": {
-        "nullishCoalescingNotNullable": "suppress",
-        "optionalChainNotNullable": "suppress"
-      }
-    }
-  }
-}

package/tsconfig.lib.prod.json

@@ -1,17 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial",
-    "extendedDiagnostics": {
-      "checks": {
-        "nullishCoalescingNotNullable": "suppress",
-        "optionalChainNotNullable": "suppress"
-      }
-    }
-  }
-}

package/tsconfig.spec.json

@@ -1,18 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": ["vitest/globals"]
-  },
-  "include": ["src/**/*.d.ts", "src/**/*.spec.ts"],
-  "angularCompilerOptions": {
-    "extendedDiagnostics": {
-      "checks": {
-        "nullishCoalescingNotNullable": "suppress",
-        "optionalChainNotNullable": "suppress"
-      }
-    }
-  }
-}

package/vite.config.ts

@@ -1,27 +0,0 @@
-import { defineProject } from 'vitest/config';
-import angular from '@analogjs/vite-plugin-angular';
-
-export default defineProject({
-  plugins: [angular()],
-  test: {
-    globals: true,
-    environment: 'jsdom',
-    setupFiles: ['src/test-setup.ts'],
-    include: ['src/**/*.spec.ts'],
-    reporters: ['default'],
-    // Threads beat forks substantially on Windows; combined with isolate:false
-    // each worker pays jsdom + Angular TestBed env cost once and reuses it
-    // across all spec files routed to that worker.
-    pool: 'threads',
-    isolate: false,
-    fileParallelism: true,
-    minWorkers: 1,
-    maxWorkers: 2,
-    coverage: {
-      provider: 'v8',
-      reporter: ['text', 'json'],
-      include: ['src/**/*.ts'],
-      exclude: ['src/**/*.spec.ts', 'src/test-setup.ts'],
-    },
-  },
-});