@kouji-ui/core 0.0.2 → 0.0.4

package/.turbo/turbo-build.log

@@ -1,13 +1,13 @@
 
-> @kouji-ui/core@0.0.2 build /home/runner/work/kouji-ui/kouji-ui/packages/core
+> @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.
 ✔ Compiling with Angular sources in partial compilation mode.
 ✔ Generating FESM and DTS bundles
 - Copying assets
@@ -23,5 +23,5 @@ Built Angular Package
 - to:   /home/runner/work/kouji-ui/kouji-ui/dist/kj-core
 ------------------------------------------------------------------------------
 
-Build at: 2026-05-04T20:37:30.262Z - Time: 4059ms
+Build at: 2026-05-04T22:25:26.490Z - Time: 5957ms
 

package/CHANGELOG.md

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

package/README.md

@@ -1,64 +1,96 @@
-# KjCore
+# @kouji-ui/core
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.2.0.
+Headless Angular 21 UI primitives — directives over CDK with WCAG 2.1 AAA semantics and zero CSS.
 
-## Code scaffolding
+You write the markup. You write the styles. The library wires up keyboard navigation, ARIA, focus management, and state.
 
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+[Documentation](https://kouji-ui.onrender.com) · [GitHub](https://github.com/kouji-dev/kouji-ui)
 
-```bash
-ng generate component component-name
-```
-
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
-
-```bash
-ng generate --help
-```
-
-## Building
-
-To build the library, run:
+## Install
 
 ```bash
-ng build kj-core
+pnpm add @kouji-ui/core @angular/cdk
 ```
 
-This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+Peer dependencies: `@angular/common` `@angular/core` `@angular/cdk` — all `^21.0.0`.
 
-### Publishing the Library
+## Quick start
 
-Once the project is built, you can publish your library by following these steps:
+Every primitive is a standalone directive. Import it where you use it.
 
-1. Navigate to the `dist` directory:
+```ts
+import { Component } from '@angular/core';
+import { KjButton } from '@kouji-ui/core';
 
-   ```bash
-   cd dist/kj-core
-   ```
+@Component({
+  selector: 'app-example',
+  imports: [KjButton],
+  template: `<button kjButton (click)="save()">Save</button>`,
+})
+export class ExampleComponent {
+  save() { /* ... */ }
+}
+```
 
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
+The directive owns the keyboard contract, ARIA roles, and focus ring — not the look. Style the host element however you want.
+
+### A more involved example: dialog
+
+```ts
+import { Component } from '@angular/core';
+import {
+  KjDialog,
+  KjDialogTrigger,
+  KjDialogOverlay,
+  KjDialogTitle,
+  KjDialogClose,
+} from '@kouji-ui/core';
+
+@Component({
+  selector: 'app-confirm',
+  imports: [KjDialog, KjDialogTrigger, KjDialogOverlay, KjDialogTitle, KjDialogClose],
+  template: `
+    <button [kjDialogTrigger]="confirm">Delete</button>
+
+    <ng-template #confirm>
+      <div kjDialog>
+        <div kjDialogOverlay></div>
+        <h2 kjDialogTitle>Delete this item?</h2>
+        <p>This action cannot be undone.</p>
+        <button kjDialogClose>Cancel</button>
+        <button kjDialogClose (click)="delete()">Delete</button>
+      </div>
+    </ng-template>
+  `,
+})
+export class ConfirmComponent {
+  delete() { /* ... */ }
+}
+```
 
-## Running unit tests
+Focus trap, Escape-to-close, scroll lock, ARIA wiring — all handled.
 
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+## What's included
 
-```bash
-ng test
-```
+| Domain          | Primitives                                                  |
+| --------------- | ----------------------------------------------------------- |
+| Buttons & inputs | `KjButton`, `KjInput`, `KjCheckbox`, `KjRadio`, `KjToggle`, `KjSelect` |
+| Form composition | `KjFormField`, `KjFormLabel`, `KjFormError`                 |
+| Overlays         | `KjDialog`, `KjPopover`, `KjTooltip`, `KjToast`, `KjMenu`   |
+| Navigation       | `KjTabs`, `KjAccordion`                                     |
+| Data display     | `KjTable`, `KjBadge`, `KjAvatar`, `KjChart`                 |
+| A11y primitives  | `KjFocusTrap`, `KjFocusRing`, `KjLiveRegion`, `KjRovingTabindex`, `KjVisuallyHidden`, `KjAriaDescribedBy` |
 
-## Running end-to-end tests
+Every primitive ships with examples and an inputs reference at [kouji-ui.onrender.com](https://kouji-ui.onrender.com).
 
-For end-to-end (e2e) testing, run:
-
-```bash
-ng e2e
-```
+## Design principles
 
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+- **Headless** — directives, not components. You own the DOM and CSS.
+- **WCAG 2.1 AAA target** — keyboard contracts, focus management, ARIA, and contrast all designed for AAA.
+- **CDK-aligned** — wraps `@angular/cdk` primitives where it makes sense (overlay, focus-trap), never reimplements from scratch.
+- **Signals-first** — public APIs use `input()` / `signal()` / `effect()`.
+- **Zero runtime CSS** — no shipped stylesheet. Bring your own design system.
 
-## Additional Resources
+## License
 
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+MIT © [kouji-dev](https://github.com/kouji-dev)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kouji-ui/core",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Headless Angular 21 UI primitives — directives over CDK with WCAG 2.1 AAA semantics and zero CSS.",
   "license": "MIT",
   "repository": {

package/src/button/button.spec.ts

@@ -1,4 +1,4 @@
-import { render, fireEvent } from '@testing-library/angular';
+import { render } from '@testing-library/angular';
 import { axe, toHaveNoViolations } from 'jest-axe';
 import { KjButton } from './button';
 

package/src/dialog/dialog.spec.ts

@@ -75,7 +75,7 @@ describe('KjDialogTrigger', () => {
   });
 
   it('closes dialog on overlay click (close on backdrop enabled by default)', async () => {
-    const { getByRole, getByText } = await render(
+    const { getByRole } = await render(
       `<button [kjDialogTrigger]="dlg">Open</button>
        <ng-template #dlg>
          <div kjDialogOverlay>

package/src/primitives/forms/form-control.spec.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { render, fireEvent } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
+import { render } from '@testing-library/angular';
+import { toHaveNoViolations } from 'jest-axe';
 import { KjFormControl } from './form-control';
 
 expect.extend(toHaveNoViolations);
@@ -14,7 +14,7 @@ expect.extend(toHaveNoViolations);
 class TestHostComponent {
   ctrl = new FormControl('');
   formCtrl!: KjFormControl;
-  onInput(e: Event): void {
+  onInput(_e: Event): void {
     // will be wired by the directive consumer pattern
   }
   onBlur(): void {}

package/src/primitives/overlay/overlay.spec.ts

@@ -1,4 +1,4 @@
-import { Component, TemplateRef, ViewChild, ViewContainerRef, inject } from '@angular/core';
+import { Component, TemplateRef, ViewChild, ViewContainerRef, inject, OnInit } from '@angular/core';
 import { render } from '@testing-library/angular';
 import { KjOverlayService, KjOverlayRef } from './overlay';
 
@@ -17,7 +17,7 @@ describe('KjOverlayService', () => {
       standalone: true,
       template: '<ng-template #tpl><div>overlay content</div></ng-template>',
     })
-    class TestComponent {
+    class TestComponent implements OnInit {
       @ViewChild('tpl', { static: true }) tpl!: TemplateRef<unknown>;
       readonly svc = inject(KjOverlayService);
       readonly vcr = inject(ViewContainerRef);
@@ -34,7 +34,7 @@ describe('KjOverlayService', () => {
       standalone: true,
       template: '<ng-template #tpl><div>overlay</div></ng-template>',
     })
-    class TestComponent {
+    class TestComponent implements OnInit {
       @ViewChild('tpl', { static: true }) tpl!: TemplateRef<unknown>;
       readonly svc = inject(KjOverlayService);
       readonly vcr = inject(ViewContainerRef);
@@ -53,7 +53,7 @@ describe('KjOverlayService', () => {
       standalone: true,
       template: '<ng-template #tpl><div>overlay</div></ng-template>',
     })
-    class TestComponent {
+    class TestComponent implements OnInit {
       @ViewChild('tpl', { static: true }) tpl!: TemplateRef<unknown>;
       readonly svc = inject(KjOverlayService);
       readonly vcr = inject(ViewContainerRef);
@@ -73,7 +73,7 @@ describe('KjOverlayService', () => {
       standalone: true,
       template: '<ng-template #tpl><div>overlay</div></ng-template>',
     })
-    class TestComponent {
+    class TestComponent implements OnInit {
       @ViewChild('tpl', { static: true }) tpl!: TemplateRef<unknown>;
       readonly svc = inject(KjOverlayService);
       readonly vcr = inject(ViewContainerRef);

package/src/primitives/overlay/overlay.ts

@@ -41,7 +41,11 @@ export class KjOverlayRef {
 
   /** Toggles the overlay between open and closed states. */
   toggle(): void {
-    this.isOpen() ? this.close() : this.open();
+    if (this.isOpen()) {
+      this.close();
+    } else {
+      this.open();
+    }
   }
 
   /**

package/src/select/select.ts

@@ -188,7 +188,7 @@ export class KjSelectContent {
       this.el.nativeElement.querySelectorAll('[kjOption]')
     ) as HTMLElement[]).map((el, i) => ({
       el,
-      value: (el as any).__kjOptionValue,
+      value: (el as HTMLElement & { __kjOptionValue?: unknown }).__kjOptionValue,
       id: el.id || `kj-option-${i}`,
     }));
   }
@@ -234,7 +234,7 @@ export class KjOption {
 
   constructor() {
     effect(() => {
-      (this.el.nativeElement as any).__kjOptionValue = this.kjOptionValue();
+      (this.el.nativeElement as HTMLElement & { __kjOptionValue?: unknown }).__kjOptionValue = this.kjOptionValue();
     });
     afterNextRender(() => {
       if (!this.el.nativeElement.id) {

package/src/table/table.spec.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { ColumnDef } from '@tanstack/angular-table';
-import { render, fireEvent } from '@testing-library/angular';
+import { render } from '@testing-library/angular';
 import { axe, toHaveNoViolations } from 'jest-axe';
 import { KjTable, KjTableHeader } from './table';
 

package/src/toast/toast.spec.ts

@@ -1,8 +1,8 @@
-import { render, fireEvent } from '@testing-library/angular';
+import { TestBed } from '@angular/core/testing';
+import { render } from '@testing-library/angular';
 import { axe, toHaveNoViolations } from 'jest-axe';
 import { KjToast, KjToastViewport } from './toast';
 import { KjToastService } from './toast.service';
-import { Component, inject } from '@angular/core';
 
 expect.extend(toHaveNoViolations);
 
@@ -47,43 +47,44 @@ describe('KjToastViewport', () => {
 });
 
 describe('KjToastService', () => {
-  it('show(message) adds a toast', async () => {
-    const svc = new KjToastService();
+  let svc: KjToastService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    svc = TestBed.inject(KjToastService);
+  });
+
+  it('show(message) adds a toast', () => {
     expect(svc.toasts().length).toBe(0);
     svc.show('Hello', { duration: 0 });
     expect(svc.toasts().length).toBe(1);
     expect(svc.toasts()[0].message).toBe('Hello');
   });
 
-  it('dismiss() removes a toast', async () => {
-    const svc = new KjToastService();
+  it('dismiss() removes a toast', () => {
     const id = svc.show('Test', { duration: 0 });
     svc.dismiss(id);
     expect(svc.toasts().length).toBe(0);
   });
 
-  it('success() sets variant=success', async () => {
-    const svc = new KjToastService();
+  it('success() sets variant=success', () => {
     svc.success('Done', { duration: 0 });
     expect(svc.toasts()[0].variant).toBe('success');
   });
 
-  it('error() sets variant=destructive', async () => {
-    const svc = new KjToastService();
+  it('error() sets variant=destructive', () => {
     svc.error('Fail', { duration: 0 });
     expect(svc.toasts()[0].variant).toBe('destructive');
   });
 
-  it('dismissAll() clears all toasts', async () => {
-    const svc = new KjToastService();
+  it('dismissAll() clears all toasts', () => {
     svc.show('A', { duration: 0 });
     svc.show('B', { duration: 0 });
     svc.dismissAll();
     expect(svc.toasts().length).toBe(0);
   });
 
-  it('contextFor() exposes a bound dismiss callback', async () => {
-    const svc = new KjToastService();
+  it('contextFor() exposes a bound dismiss callback', () => {
     const id = svc.show('Hello', { duration: 0 });
     const ctx = svc.contextFor(svc.toasts()[0]);
     expect(ctx.id).toBe(id);

package/src/toast/toast.ts

@@ -2,7 +2,7 @@ import {
   DestroyRef, Directive, ElementRef, TemplateRef,
   afterNextRender, computed, inject, input, signal,
 } from '@angular/core';
-import { KjToastContext, KjToastService, KjToastTemplateContext, KjToastVariant } from './toast.service';
+import { KjToastService, KjToastTemplateContext, KjToastVariant } from './toast.service';
 import { KJ_TOAST_STRATEGY } from './toast.strategy';
 import { KjToastPositionX, KjToastPositionY } from './toast.types';