@kouji-ui/core 0.0.4 → 0.1.2

package/typography/prose.css

@@ -0,0 +1,312 @@
+/* ─────────────────────────────────────────────────────────────
+   kouji-ui Typography — `kj-prose` container + tone reflections
+   --------------------------------------------------------------
+   Apply `.kj-prose` to a container element to restyle every
+   descendant `h1`–`h6`, `p`, `a`, `blockquote`, `code`, `pre`,
+   `ul`, `ol`, `li`, `dl`, `dt`, `dd`, `hr`, `figure`,
+   `figcaption`, `table`, `strong`, `em`, `kbd` according to the
+   kouji type system.
+
+   The five attribute directives (`kjLead`, `kjMuted`, `kjCode`,
+   `kjBlockquote`, `kjTruncate`) reflect `data-tone` /
+   `data-truncate` host attributes; the rules below key off those
+   attributes so the same styling applies whether the consumer
+   used the directive, hand-typed `data-tone="muted"` on a span,
+   or wrapped a subtree in `.kj-prose`.
+
+   Tokens read from the kouji theme layer:
+     --kj-bg-body / surface / elevated ......... background scale
+     --kj-fg-default ........................... primary text
+     --kj-fg-muted ............................. secondary text (≥ 7:1)
+     --kj-border-default / muted ............... separators / rules
+     --kj-color-link ........................... anchor colour
+     --kj-color-link-visited ................... visited anchor
+     --kj-font-sans / --kj-font-mono / --kj-font-display
+     --kj-font-size-xs / sm / md / lg / xl / 2xl / 3xl / 4xl
+     --kj-line-height-tight / snug / normal / relaxed / loose
+     --kj-radius-sm / md
+     --kj-prose-max-width ...................... opt-out for CJK
+   ───────────────────────────────────────────────────────────── */
+
+@layer kj.prose {
+  .kj-prose {
+    color: var(--kj-fg-default);
+    font-family: var(--kj-font-sans);
+    font-size: var(--kj-font-size-md, 1rem);
+    line-height: var(--kj-line-height-relaxed, 1.7);
+    max-width: var(--kj-prose-max-width, 65ch);
+    text-align: start;
+  }
+
+  /* ── Block rhythm: vertical margins between adjacent flow elements ── */
+  .kj-prose > * + * {
+    margin-block-start: 1em;
+  }
+
+  .kj-prose > :first-child {
+    margin-block-start: 0;
+  }
+
+  .kj-prose > :last-child {
+    margin-block-end: 0;
+  }
+
+  /* ── Headings ────────────────────────────────────────────── */
+  .kj-prose h1,
+  .kj-prose h2,
+  .kj-prose h3,
+  .kj-prose h4,
+  .kj-prose h5,
+  .kj-prose h6 {
+    color: var(--kj-fg-default);
+    font-family: var(--kj-font-display, var(--kj-font-sans));
+    font-weight: 600;
+    line-height: var(--kj-line-height-tight, 1.2);
+    margin-block-start: 1.6em;
+    margin-block-end: 0.6em;
+  }
+
+  .kj-prose h1 {
+    font-size: var(--kj-font-size-4xl, 2.25rem);
+    font-weight: 700;
+    line-height: var(--kj-line-height-tight, 1.1);
+  }
+
+  .kj-prose h2 {
+    font-size: var(--kj-font-size-3xl, 1.875rem);
+  }
+
+  .kj-prose h3 {
+    font-size: var(--kj-font-size-2xl, 1.5rem);
+  }
+
+  .kj-prose h4 {
+    font-size: var(--kj-font-size-xl, 1.25rem);
+  }
+
+  .kj-prose h5 {
+    font-size: var(--kj-font-size-lg, 1.125rem);
+  }
+
+  .kj-prose h6 {
+    font-size: var(--kj-font-size-md, 1rem);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  /* ── Paragraphs ──────────────────────────────────────────── */
+  .kj-prose p {
+    line-height: var(--kj-line-height-relaxed, 1.7);
+  }
+
+  /* ── Anchors ─────────────────────────────────────────────── */
+  .kj-prose a {
+    color: var(--kj-fg-primary);
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+  }
+
+  .kj-prose a:visited {
+    color: var(--kj-fg-accent);
+  }
+
+  .kj-prose a:hover {
+    text-decoration-thickness: 2px;
+  }
+
+  /* ── Lists ───────────────────────────────────────────────── */
+  .kj-prose ul,
+  .kj-prose ol {
+    padding-inline-start: 1.5em;
+  }
+
+  .kj-prose ul {
+    list-style: disc;
+  }
+
+  .kj-prose ol {
+    list-style: decimal;
+  }
+
+  .kj-prose li {
+    margin-block-start: 0.4em;
+    line-height: var(--kj-line-height-relaxed, 1.7);
+  }
+
+  .kj-prose li > ul,
+  .kj-prose li > ol {
+    margin-block-start: 0.4em;
+  }
+
+  /* ── Definition lists ────────────────────────────────────── */
+  .kj-prose dt {
+    font-weight: 600;
+    margin-block-start: 0.8em;
+  }
+
+  .kj-prose dd {
+    margin-inline-start: 1.5em;
+  }
+
+  /* ── Blockquote ──────────────────────────────────────────── */
+  .kj-prose blockquote {
+    border-inline-start: 4px solid var(--kj-border-muted, currentColor);
+    color: var(--kj-fg-muted, var(--kj-fg-default));
+    font-style: italic;
+    margin-inline: 0;
+    padding-inline-start: 1em;
+  }
+
+  /* ── Code (inline + block) ───────────────────────────────── */
+  .kj-prose code {
+    background-color: var(--kj-bg-surface, transparent);
+    border-radius: var(--kj-radius-sm, 4px);
+    font-family: var(--kj-font-mono);
+    font-size: 0.9em;
+    padding-block: 0.1em;
+    padding-inline: 0.35em;
+  }
+
+  .kj-prose pre {
+    background-color: var(--kj-bg-surface, transparent);
+    border-radius: var(--kj-radius-md, 6px);
+    color: var(--kj-fg-default);
+    font-family: var(--kj-font-mono);
+    line-height: var(--kj-line-height-snug, 1.45);
+    overflow-x: auto;
+    padding: 1em;
+  }
+
+  .kj-prose pre code {
+    background-color: transparent;
+    border-radius: 0;
+    font-size: inherit;
+    padding: 0;
+  }
+
+  /* ── Horizontal rule ─────────────────────────────────────── */
+  .kj-prose hr {
+    background-color: var(--kj-border-default, currentColor);
+    border: 0;
+    height: 1px;
+    margin-block: 2em;
+  }
+
+  /* ── Figures ─────────────────────────────────────────────── */
+  .kj-prose figure {
+    margin-inline: 0;
+  }
+
+  .kj-prose figcaption {
+    color: var(--kj-fg-muted, var(--kj-fg-default));
+    font-size: var(--kj-font-size-sm, 0.875rem);
+    margin-block-start: 0.5em;
+    text-align: center;
+  }
+
+  /* ── Tables ──────────────────────────────────────────────── */
+  .kj-prose table {
+    border-collapse: collapse;
+    font-size: var(--kj-font-size-sm, 0.9em);
+    width: 100%;
+  }
+
+  .kj-prose thead {
+    border-block-end: 2px solid var(--kj-border-default, currentColor);
+  }
+
+  .kj-prose th,
+  .kj-prose td {
+    border-block-end: 1px solid var(--kj-border-muted, currentColor);
+    padding-block: 0.5em;
+    padding-inline: 0.75em;
+    text-align: start;
+    vertical-align: top;
+  }
+
+  .kj-prose th {
+    font-weight: 600;
+  }
+
+  /* ── Inline emphasis ─────────────────────────────────────── */
+  .kj-prose strong {
+    font-weight: 700;
+  }
+
+  .kj-prose em {
+    font-style: italic;
+  }
+
+  /* ── Size modifiers ──────────────────────────────────────── */
+  .kj-prose-sm {
+    font-size: var(--kj-font-size-sm, 0.875rem);
+    line-height: var(--kj-line-height-normal, 1.6);
+  }
+
+  .kj-prose-lg {
+    font-size: var(--kj-font-size-lg, 1.125rem);
+    line-height: var(--kj-line-height-loose, 1.8);
+  }
+}
+
+/* ──────────────────────────────────────────────────────────────
+   Tone reflections — applied by directives via `[data-tone]`,
+   readable in or out of a `.kj-prose` container.
+   ────────────────────────────────────────────────────────────── */
+
+@layer kj.tone {
+  [data-tone='lead'] {
+    color: var(--kj-fg-muted, var(--kj-fg-default));
+    font-size: var(--kj-font-size-lg, 1.125rem);
+    line-height: var(--kj-line-height-relaxed, 1.7);
+  }
+
+  [data-tone='muted'] {
+    color: var(--kj-fg-muted, var(--kj-fg-default));
+  }
+
+  [data-tone='code'] {
+    background-color: var(--kj-bg-surface, transparent);
+    border-radius: var(--kj-radius-sm, 4px);
+    font-family: var(--kj-font-mono);
+    font-size: 0.9em;
+    padding-block: 0.1em;
+    padding-inline: 0.35em;
+  }
+
+  [data-tone='blockquote'] {
+    border-inline-start: 4px solid var(--kj-border-muted, currentColor);
+    color: var(--kj-fg-muted, var(--kj-fg-default));
+    font-style: italic;
+    margin-inline: 0;
+    padding-inline-start: 1em;
+  }
+}
+
+/* ──────────────────────────────────────────────────────────────
+   Truncate — single-line ellipsis (data-truncate="1") and
+   multi-line clamp (data-truncate="2"+).
+   ────────────────────────────────────────────────────────────── */
+
+@layer kj.truncate {
+  [data-truncate='1'] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Multi-line clamp. Modern `attr(data-truncate type(<number>))` works in
+     Chromium 133+ but doesn't ship in every WebKit-based engine yet, so
+     enumerate the common counts (2..6) explicitly — covers card / list
+     description copy without needing engine fallback gymnastics. */
+  [data-truncate]:not([data-truncate='1']) {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+  [data-truncate='2'] { -webkit-line-clamp: 2; line-clamp: 2; }
+  [data-truncate='3'] { -webkit-line-clamp: 3; line-clamp: 3; }
+  [data-truncate='4'] { -webkit-line-clamp: 4; line-clamp: 4; }
+  [data-truncate='5'] { -webkit-line-clamp: 5; line-clamp: 5; }
+  [data-truncate='6'] { -webkit-line-clamp: 6; line-clamp: 6; }
+}

package/.turbo/turbo-build.log

@@ -1,27 +0,0 @@
-
-> @kouji-ui/core@0.0.4 build /home/runner/work/kouji-ui/kouji-ui/packages/core
-> ng-packagr -p ng-package.json
-
-Building Angular Package
-
-------------------------------------------------------------------------------
-- Compiling with Angular sources in partial compilation mode.
-Building entry point '@kouji-ui/core'
-------------------------------------------------------------------------------
-✔ Compiling with Angular sources in partial compilation mode.
-✔ Generating FESM and DTS bundles
-- Copying assets
-✔ Copying assets
-- Writing package manifest
-ℹ Removing scripts section in package.json as it's considered a potential security vulnerability.
-✔ Writing package manifest
-✔ Built @kouji-ui/core
-
-------------------------------------------------------------------------------
-Built Angular Package
-- from: /home/runner/work/kouji-ui/kouji-ui/packages/core
-- to:   /home/runner/work/kouji-ui/kouji-ui/dist/kj-core
-------------------------------------------------------------------------------
-
-Build at: 2026-05-04T22:25:26.490Z - Time: 5957ms
-

package/CHANGELOG.md

@@ -1,21 +0,0 @@
-# @kouji-ui/core
-
-## 0.0.4
-
-### Patch Changes
-
-- 202d9de: CI fix: husky pre-push hook now skips in CI environments (`$CI` or `$GITHUB_ACTIONS` set). Prevents the Changesets action's automated push from being blocked by the changeset-status gate. No runtime effect on the published package.
-- dc0fe0f: Test-only fix: rewrite `KjToastService` test suite to use `TestBed.inject()` so `inject(KJ_TOAST_STRATEGY)` resolves through Angular DI (was crashing with `new KjToastService()` outside an injection context). No runtime change.
-- d6b40e1: Internal lint cleanup — replace `any` casts in select option storage with typed `HTMLElement & { __kjOptionValue?: unknown }` and convert ternary statement to if/else in overlay toggle. No public API or behavior change.
-
-## 0.0.3
-
-### Patch Changes
-
-- c177d1e: Rewrite README with real install/usage docs, primitive index, and design principles. Replaces the Angular CLI scaffold placeholder.
-
-## 0.0.2
-
-### Patch Changes
-
-- 1813d21: Initial publish — headless Angular 21 UI primitives over CDK with WCAG 2.1 AAA semantics and zero CSS.

package/ng-package.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/kj-core",
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  }
-}

package/src/a11y/aria-describedby.spec.ts

@@ -1,55 +0,0 @@
-import { render } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { KjAriaDescribedBy } from './aria-describedby';
-
-expect.extend(toHaveNoViolations);
-
-describe('KjAriaDescribedBy', () => {
-  it('sets aria-describedby from a single id string', async () => {
-    const { container } = await render(
-      `<input kjAriaDescribedBy [kjDescribedBy]="'hint-1'" />
-       <span id="hint-1">This is a hint</span>`,
-      { imports: [KjAriaDescribedBy] },
-    );
-    expect(container.querySelector('input')).toHaveAttribute('aria-describedby', 'hint-1');
-  });
-
-  it('sets aria-describedby from multiple ids', async () => {
-    const { container } = await render(
-      `<input kjAriaDescribedBy [kjDescribedBy]="['hint-1', 'error-1']" />
-       <span id="hint-1">Hint</span>
-       <span id="error-1">Error</span>`,
-      { imports: [KjAriaDescribedBy] },
-    );
-    expect(container.querySelector('input')).toHaveAttribute(
-      'aria-describedby',
-      'hint-1 error-1',
-    );
-  });
-
-  it('removes aria-describedby when given empty array', async () => {
-    const { container } = await render(
-      `<input kjAriaDescribedBy [kjDescribedBy]="[]" />`,
-      { imports: [KjAriaDescribedBy] },
-    );
-    expect(container.querySelector('input')).not.toHaveAttribute('aria-describedby');
-  });
-
-  it('removes aria-describedby when given empty string', async () => {
-    const { container } = await render(
-      `<input kjAriaDescribedBy [kjDescribedBy]="''" />`,
-      { imports: [KjAriaDescribedBy] },
-    );
-    expect(container.querySelector('input')).not.toHaveAttribute('aria-describedby');
-  });
-
-  it('passes axe accessibility audit', async () => {
-    const { container } = await render(
-      `<label for="f">Name</label>
-       <input id="f" kjAriaDescribedBy [kjDescribedBy]="'hint'" />
-       <span id="hint">Enter your full name</span>`,
-      { imports: [KjAriaDescribedBy] },
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/a11y/aria-describedby.ts

@@ -1,33 +0,0 @@
-import { Directive, computed, input } from '@angular/core';
-
-/**
- * Wires `aria-describedby` to one or more element IDs.
- * Accepts a single ID string or an array of ID strings.
- * Removes the attribute automatically when the value is empty.
- *
- * @example
- * ```html
- * <input kjAriaDescribedBy [kjDescribedBy]="['hint-id', errorId()]" />
- * <span id="hint-id">Format: DD/MM/YYYY</span>
- * ```
- * @category Core/Accessibility
- */
-@Directive({
-  selector: '[kjAriaDescribedBy]',
-  standalone: true,
-  host: {
-    '[attr.aria-describedby]': 'ariaDescribedBy()',
-  },
-})
-export class KjAriaDescribedBy {
-  /** One or more element IDs to reference via `aria-describedby`. */
-  kjDescribedBy = input<string | string[]>('');
-
-  /** @internal */
-  readonly ariaDescribedBy = computed(() => {
-    const val = this.kjDescribedBy();
-    const ids = Array.isArray(val) ? val : [val];
-    const filtered = ids.filter(Boolean);
-    return filtered.length ? filtered.join(' ') : null;
-  });
-}

package/src/a11y/focus-trap.spec.ts

@@ -1,86 +0,0 @@
-import { render, fireEvent } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { KjFocusTrap } from './focus-trap';
-
-expect.extend(toHaveNoViolations);
-
-describe('KjFocusTrap', () => {
-  it('renders without error when enabled', async () => {
-    const { container } = await render(
-      `<div kjFocusTrap [kjFocusTrapEnabled]="true">
-        <button>First</button>
-        <button>Last</button>
-      </div>`,
-      { imports: [KjFocusTrap] },
-    );
-    expect(container.querySelector('[kjFocusTrap]')).toBeInTheDocument();
-  });
-
-  it('renders without error when disabled', async () => {
-    const { container } = await render(
-      `<div kjFocusTrap [kjFocusTrapEnabled]="false">
-        <button>First</button>
-      </div>`,
-      { imports: [KjFocusTrap] },
-    );
-    expect(container.querySelector('[kjFocusTrap]')).toBeInTheDocument();
-  });
-
-  it('wraps focus from last to first on Tab when enabled', async () => {
-    const { container } = await render(
-      `<div kjFocusTrap [kjFocusTrapEnabled]="true">
-        <button>First</button>
-        <button>Last</button>
-      </div>`,
-      { imports: [KjFocusTrap] },
-    );
-    const buttons = container.querySelectorAll('button');
-    const last = buttons[buttons.length - 1] as HTMLElement;
-    last.focus();
-    fireEvent.keyDown(document, { key: 'Tab', shiftKey: false });
-    expect(document.activeElement).toBe(buttons[0]);
-  });
-
-  it('wraps focus from first to last on Shift+Tab when enabled', async () => {
-    const { container } = await render(
-      `<div kjFocusTrap [kjFocusTrapEnabled]="true">
-        <button>First</button>
-        <button>Last</button>
-      </div>`,
-      { imports: [KjFocusTrap] },
-    );
-    const buttons = container.querySelectorAll('button');
-    const first = buttons[0] as HTMLElement;
-    first.focus();
-    fireEvent.keyDown(document, { key: 'Tab', shiftKey: true });
-    expect(document.activeElement).toBe(buttons[buttons.length - 1]);
-  });
-
-  it('does not trap focus when disabled', async () => {
-    const { container } = await render(
-      `<div kjFocusTrap [kjFocusTrapEnabled]="false">
-        <button>First</button>
-        <button>Last</button>
-      </div>`,
-      { imports: [KjFocusTrap] },
-    );
-    const buttons = container.querySelectorAll('button');
-    const last = buttons[buttons.length - 1] as HTMLElement;
-    last.focus();
-    // Tab should not redirect focus — no focus change from the handler.
-    const activeBeforeTab = document.activeElement;
-    fireEvent.keyDown(document, { key: 'Tab', shiftKey: false });
-    // When disabled, the handler does nothing, so focus stays on last.
-    expect(document.activeElement).toBe(activeBeforeTab);
-  });
-
-  it('passes axe accessibility audit', async () => {
-    const { container } = await render(
-      `<div role="dialog" aria-label="Test dialog" kjFocusTrap [kjFocusTrapEnabled]="true">
-        <button>Action</button>
-      </div>`,
-      { imports: [KjFocusTrap] },
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/a11y/focus-trap.ts

@@ -1,70 +0,0 @@
-import { Directive, DestroyRef, ElementRef, afterNextRender, inject, input } from '@angular/core';
-import { PLATFORM_ID } from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
-
-const FOCUSABLE = [
-  'a[href]', 'button:not([disabled])', 'input:not([disabled])',
-  'select:not([disabled])', 'textarea:not([disabled])',
-  '[tabindex]:not([tabindex="-1"])', '[contenteditable="true"]',
-].join(',');
-
-/**
- * Traps keyboard focus within the host element using a native Tab-key interceptor.
- * Designed for modal dialogs, drawers, and other overlay patterns.
- *
- * @example
- * ```html
- * <div role="dialog" kjFocusTrap [kjFocusTrapEnabled]="isOpen()">
- *   <button>Action</button>
- * </div>
- * ```
- * @category Core/Accessibility
- */
-@Directive({
-  selector: '[kjFocusTrap]',
-  standalone: true,
-})
-export class KjFocusTrap {
-  private readonly el = inject(ElementRef<HTMLElement>);
-  private readonly destroyRef = inject(DestroyRef);
-  private readonly platformId = inject(PLATFORM_ID);
-
-  /** Whether the focus trap is active. Set to true when the overlay is open. */
-  kjFocusTrapEnabled = input<boolean>(false);
-
-  constructor() {
-    afterNextRender(() => {
-      if (!isPlatformBrowser(this.platformId)) return;
-
-      const handleKeydown = (e: KeyboardEvent) => {
-        if (!this.kjFocusTrapEnabled() || e.key !== 'Tab') return;
-        const focusable = (Array.from(
-          this.el.nativeElement.querySelectorAll(FOCUSABLE)
-        ) as HTMLElement[]).filter(el => !el.closest('[hidden]') && getComputedStyle(el).display !== 'none');
-
-        if (!focusable.length) { e.preventDefault(); return; }
-        const first = focusable[0];
-        const last = focusable[focusable.length - 1];
-
-        if (e.shiftKey) {
-          if (document.activeElement === first || !this.el.nativeElement.contains(document.activeElement)) {
-            e.preventDefault(); last.focus();
-          }
-        } else {
-          if (document.activeElement === last || !this.el.nativeElement.contains(document.activeElement)) {
-            e.preventDefault(); first.focus();
-          }
-        }
-      };
-
-      document.addEventListener('keydown', handleKeydown);
-      this.destroyRef.onDestroy(() => document.removeEventListener('keydown', handleKeydown));
-    });
-  }
-
-  /** Focuses the first tabbable element inside the trap. */
-  focusFirst(): void {
-    const el = this.el.nativeElement.querySelector(FOCUSABLE) as HTMLElement | null;
-    el?.focus();
-  }
-}

package/src/a11y/index.ts

@@ -1,9 +0,0 @@
-export { KjAriaDescribedBy } from './aria-describedby';
-export { KjFocusTrap } from './focus-trap';
-export { KjLiveRegion, type KjLivePoliteness } from './live-region';
-export {
-  KjRovingTabindex,
-  KjRovingTabindexItemDirective,
-  KJ_ROVING_TABINDEX,
-} from './roving-tabindex';
-export { KjVisuallyHidden } from './visually-hidden';

package/src/a11y/live-region.spec.ts

@@ -1,58 +0,0 @@
-import { render } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { vi } from 'vitest';
-import { KjLiveRegion } from './live-region';
-
-expect.extend(toHaveNoViolations);
-
-describe('KjLiveRegion', () => {
-  it('sets aria-live to polite by default', async () => {
-    const { container } = await render(
-      `<div kjLiveRegion></div>`,
-      { imports: [KjLiveRegion] },
-    );
-    expect(container.querySelector('div')).toHaveAttribute('aria-live', 'polite');
-  });
-
-  it('sets aria-live to assertive when specified', async () => {
-    const { container } = await render(
-      `<div kjLiveRegion [kjPoliteness]="'assertive'"></div>`,
-      { imports: [KjLiveRegion] },
-    );
-    expect(container.querySelector('div')).toHaveAttribute('aria-live', 'assertive');
-  });
-
-  it('sets aria-atomic to true', async () => {
-    const { container } = await render(
-      `<div kjLiveRegion></div>`,
-      { imports: [KjLiveRegion] },
-    );
-    expect(container.querySelector('div')).toHaveAttribute('aria-atomic', 'true');
-  });
-
-  it('announces a message via DOM text content after a brief timeout', async () => {
-    vi.useFakeTimers();
-    const { container } = await render(
-      `<div kjLiveRegion></div>`,
-      { imports: [KjLiveRegion] },
-    );
-    const div = container.querySelector('div')!;
-
-    // Simulate the announce mechanism: clear, then set after 50ms.
-    div.textContent = '';
-    setTimeout(() => { div.textContent = 'Item saved'; }, 50);
-
-    vi.advanceTimersByTime(50);
-    expect(div.textContent).toBe('Item saved');
-
-    vi.useRealTimers();
-  });
-
-  it('passes axe accessibility audit', async () => {
-    const { container } = await render(
-      `<div kjLiveRegion></div>`,
-      { imports: [KjLiveRegion] },
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});