@kouji-ui/core 0.0.4 → 0.1.1

package/vite.config.ts

@@ -9,6 +9,14 @@ export default defineProject({
     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'],

package/src/button/button.example.ts

@@ -1,30 +0,0 @@
-import { Component } from '@angular/core';
-import { KjButton } from './button';
-
-@Component({
-  selector: 'kj-example-button',
-  standalone: true,
-  imports: [KjButton],
-  styleUrls: ['../styles/docs-themes.css'],
-  styles: [`
-    :host { display: block; padding: 2rem; background: var(--kj-bg); font-family: var(--kj-font); }
-    .row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
-    button[kjButton] { padding: 0.5rem 1.25rem; font-family: var(--kj-font); font-size: 0.875rem; border: var(--kj-btn-border); cursor: pointer; transition: var(--kj-transition); }
-    [data-variant="default"] { background: var(--kj-accent); color: var(--kj-accent-on); }
-    [data-variant="destructive"] { background: var(--kj-destructive); color: #fff; }
-    [data-variant="link"] { background: transparent; color: var(--kj-accent); border: none; padding: 0.5rem 0.5rem; text-decoration: none; text-underline-offset: 4px; }
-    [data-variant="link"]:hover { text-decoration: underline; }
-    [data-variant="ghost"] { background: transparent; color: var(--kj-btn-ghost-color); }
-    [aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
-  `],
-  template: `
-    <div class="row">
-      <button kjButton [kjVariant]="'default'">Default</button>
-      <button kjButton [kjVariant]="'destructive'">Destructive</button>
-      <button kjButton [kjVariant]="'link'">Link</button>
-      <button kjButton [kjVariant]="'ghost'">Ghost</button>
-      <button kjButton [kjDisabled]="true">Disabled</button>
-    </div>
-  `,
-})
-export class ButtonExample {}

package/src/button/button.finance.example.ts

@@ -1,37 +0,0 @@
-import { Component } from '@angular/core';
-import { KjButton } from './button';
-
-@Component({
-  selector: 'kj-example-button-finance',
-  standalone: true,
-  imports: [KjButton],
-  styleUrls: ['../styles/docs-themes.css'],
-  styles: [`
-    :host { display: block; padding: 2rem; background: var(--kj-bg); font-family: var(--kj-font); color: var(--kj-text); }
-    .row { display: flex; gap: 0.625rem; flex-wrap: wrap; }
-    button[kjButton] {
-      padding: 4px 15px; font-family: var(--kj-font); font-size: 14px; font-weight: 400;
-      border: 1px solid transparent; border-radius: 6px; cursor: pointer;
-      transition: var(--kj-transition); line-height: 1.5;
-    }
-    button[kjButton][data-variant="default"]     { background: var(--kj-accent); color: var(--kj-accent-on); border-color: var(--kj-accent); }
-    button[kjButton][data-variant="default"]:hover { background: #4096ff; border-color: #4096ff; }
-    button[kjButton][data-variant="destructive"] { background: var(--kj-destructive); color: #fff; border-color: var(--kj-destructive); }
-    button[kjButton][data-variant="link"]        { background: transparent; color: var(--kj-accent); border-color: transparent; }
-    button[kjButton][data-variant="link"]:hover  { color: #4096ff; }
-    button[kjButton][data-variant="ghost"]       { background: transparent; color: var(--kj-text); border: 1px solid var(--kj-text); }
-    button[kjButton][data-variant="ghost"]:hover { color: var(--kj-accent); border-color: var(--kj-accent); }
-    [aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
-  `],
-  host: { class: 'kj-theme-finance' },
-  template: `
-    <div class="row">
-      <button kjButton [kjVariant]="'default'">Default</button>
-      <button kjButton [kjVariant]="'destructive'">Destructive</button>
-      <button kjButton [kjVariant]="'link'">Link</button>
-      <button kjButton [kjVariant]="'ghost'">Ghost</button>
-      <button kjButton [kjDisabled]="true">Disabled</button>
-    </div>
-  `,
-})
-export class ButtonFinanceExample {}

package/src/button/button.retro.example.ts

@@ -1,47 +0,0 @@
-import { Component } from '@angular/core';
-import { KjButton } from './button';
-
-@Component({
-  selector: 'kj-example-button-retro',
-  standalone: true,
-  imports: [KjButton],
-  styleUrls: ['../styles/docs-themes.css'],
-  styles: [`
-    :host { display: block; padding: 2rem; background: var(--kj-bg); font-family: var(--kj-font); color: var(--kj-text); }
-    .row { display: flex; gap: 0.625rem; flex-wrap: wrap; }
-    button[kjButton] {
-      padding: 0.35rem 0.875rem; font-family: var(--kj-font); font-size: 0.75rem;
-      font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
-      border: var(--kj-btn-border); border-radius: var(--kj-radius-md); cursor: pointer;
-      box-shadow: var(--kj-shadow-sm); transition: var(--kj-transition);
-    }
-    button[kjButton]:not([data-variant="link"]):not([data-variant="ghost"]):hover {
-      transform: translate(-1px, -1px); box-shadow: var(--kj-shadow-md);
-    }
-    button[kjButton][data-variant="default"]     { background: var(--kj-text); color: var(--kj-bg); }
-    button[kjButton][data-variant="destructive"] { background: var(--kj-destructive); color: #fff; }
-    button[kjButton][data-variant="link"] {
-      background: transparent; color: var(--kj-text); border: none; box-shadow: none;
-      border-radius: 0; padding: 0.35rem 0.875rem; text-decoration: none;
-    }
-    button[kjButton][data-variant="link"]:hover {
-      text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
-    }
-    button[kjButton][data-variant="ghost"] {
-      background: transparent; color: var(--kj-text); border: 2px solid transparent; box-shadow: none; opacity: 0.7;
-    }
-    button[kjButton][data-variant="ghost"]:hover { opacity: 1; background: rgba(0,0,0,0.06); }
-    [aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
-  `],
-  host: { class: 'kj-theme-retro' },
-  template: `
-    <div class="row">
-      <button kjButton [kjVariant]="'default'">Default</button>
-      <button kjButton [kjVariant]="'destructive'">Destructive</button>
-      <button kjButton [kjVariant]="'link'">Link</button>
-      <button kjButton [kjVariant]="'ghost'">Ghost</button>
-      <button kjButton [kjDisabled]="true">Disabled</button>
-    </div>
-  `,
-})
-export class ButtonRetroExample {}

package/src/button/button.sizes.example.ts

@@ -1,25 +0,0 @@
-import { Component } from '@angular/core';
-import { KjButton } from './button';
-
-@Component({
-  selector: 'kj-example-button-sizes',
-  standalone: true,
-  imports: [KjButton],
-  styleUrls: ['../styles/docs-themes.css'],
-  styles: [`
-    :host { display: block; padding: 2rem; background: var(--kj-bg); font-family: var(--kj-font); }
-    .row { display: flex; flex-direction: row; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
-    button[kjButton] { background: var(--kj-accent); color: var(--kj-accent-on); border: var(--kj-btn-border); cursor: pointer; font-family: var(--kj-font); transition: var(--kj-transition); }
-    [data-size="sm"] { padding: 0.3rem 0.75rem; font-size: 0.75rem; }
-    [data-size="md"] { padding: 0.5rem 1.25rem; font-size: 0.875rem; }
-    [data-size="lg"] { padding: 0.75rem 1.75rem; font-size: 1rem; }
-  `],
-  template: `
-    <div class="row">
-      <button kjButton [kjSize]="'sm'">Small</button>
-      <button kjButton [kjSize]="'md'">Medium (default)</button>
-      <button kjButton [kjSize]="'lg'">Large</button>
-    </div>
-  `,
-})
-export class ButtonSizesExample {}

package/src/dialog/dialog.confirm.example.ts

@@ -1,57 +0,0 @@
-import { Component, signal } from '@angular/core';
-import { KjDialogTrigger, KjDialog, KjDialogOverlay, KjDialogTitle } from './dialog';
-import { KjButton } from '../button/button';
-
-@Component({
-  selector: 'kj-example-dialog-confirm',
-  standalone: true,
-  imports: [KjDialogTrigger, KjDialog, KjDialogOverlay, KjDialogTitle, KjButton],
-  styleUrls: ['../styles/docs-themes.css'],
-  styles: [`
-    :host { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 3rem 2rem; background: var(--kj-bg); font-family: var(--kj-font); min-height: 160px; flex-direction: column; color: var(--kj-text); }
-    .status { font-size: 0.8125rem; color: var(--kj-text-muted); min-height: 1.25rem; }
-    .status.confirmed { color: var(--kj-accent); }
-    .status.cancelled { color: var(--kj-destructive); }
-    button[kjButton] { padding: 0.5rem 1.5rem; border: var(--kj-btn-border); cursor: pointer; font-family: var(--kj-font); font-size: 0.875rem; }
-    [data-variant="destructive"] { background: var(--kj-destructive); color: #fff; }
-    [data-variant="outline"] { background: transparent; color: var(--kj-text); border: 1px solid var(--kj-border); }
-    ::ng-deep .kj-dialog-backdrop { background: var(--kj-backdrop); }
-    ::ng-deep .kj-dialog-panel { background: transparent; box-shadow: none; }
-    ::ng-deep [kjDialogOverlay] { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; }
-    ::ng-deep [kjDialog] { background: var(--kj-surface); border: 1px solid var(--kj-border); border-radius: var(--kj-radius-lg); padding: 1.5rem; min-width: 22rem; color: var(--kj-text); font-family: var(--kj-font); box-shadow: var(--kj-shadow-hard); }
-    ::ng-deep [kjDialogTitle] { margin: 0 0 0.5rem; font-size: 1.125rem; color: var(--kj-text); }
-    ::ng-deep .dialog-body { margin: 0 0 1.5rem; font-size: 0.875rem; color: var(--kj-text-muted); line-height: 1.6; }
-    ::ng-deep .dialog-actions { display: flex; gap: 0.75rem; justify-content: flex-end; }
-    ::ng-deep .dialog-actions button[kjButton] { padding: 0.4rem 1rem; font-size: 0.8125rem; }
-  `],
-  template: `
-    <button kjButton [kjVariant]="'destructive'"
-            [kjDialogTrigger]="confirmDialog"
-            (kjDialogClosed)="onResult($event)">
-      Delete Account
-    </button>
-    <ng-template #confirmDialog>
-      <div kjDialogOverlay>
-        <div kjDialog #dlg="kjDialog">
-          <h2 kjDialogTitle>Are you absolutely sure?</h2>
-          <p class="dialog-body">This action cannot be undone. All your data will be permanently removed.</p>
-          <div class="dialog-actions">
-            <button kjButton [kjVariant]="'outline'" (click)="dlg.close('cancelled')">Cancel</button>
-            <button kjButton [kjVariant]="'destructive'" (click)="dlg.close('confirmed')">Yes, delete</button>
-          </div>
-        </div>
-      </div>
-    </ng-template>
-    <span class="status"
-          [class.confirmed]="result() === 'confirmed'"
-          [class.cancelled]="result() === 'cancelled'">
-      {{ result() === 'confirmed' ? '✓ Account deleted' : result() === 'cancelled' ? '✕ Cancelled' : '' }}
-    </span>
-  `,
-})
-export class DialogConfirmExample {
-  readonly result = signal<'confirmed' | 'cancelled' | null>(null);
-  onResult(value: unknown): void {
-    if (value === 'confirmed' || value === 'cancelled') this.result.set(value);
-  }
-}

package/src/dialog/dialog.context.ts

@@ -1,11 +0,0 @@
-import { InjectionToken, Signal } from '@angular/core';
-
-export interface KjDialogContext {
-  readonly open: Signal<boolean>;
-  readonly dialogId: string;
-  readonly closeOnEscape: Signal<boolean>;
-  readonly closeOnBackdrop: Signal<boolean>;
-  close(result?: unknown): void;
-}
-
-export const KJ_DIALOG = new InjectionToken<KjDialogContext>('KjDialog');

package/src/dialog/dialog.example.ts

@@ -1,40 +0,0 @@
-import { Component } from '@angular/core';
-import { KjDialogTrigger, KjDialog, KjDialogOverlay, KjDialogTitle, KjDialogClose } from './dialog';
-import { KjButton } from '../button/button';
-
-@Component({
-  selector: 'kj-example-dialog-basic',
-  standalone: true,
-  imports: [KjDialogTrigger, KjDialog, KjDialogOverlay, KjDialogTitle, KjDialogClose, KjButton],
-  styleUrls: ['../styles/docs-themes.css'],
-  styles: [`
-    :host { display: flex; align-items: center; justify-content: center; padding: 3rem 2rem; background: var(--kj-bg); font-family: var(--kj-font); min-height: 160px; }
-    button[kjButton] { padding: 0.5rem 1.5rem; border: var(--kj-btn-border); cursor: pointer; font-family: var(--kj-font); font-size: 0.875rem; transition: var(--kj-transition); }
-    [data-variant="default"] { background: var(--kj-accent); color: var(--kj-accent-on); }
-    [data-variant="outline"] { background: transparent; color: var(--kj-text); border: 1px solid var(--kj-border); }
-    ::ng-deep .kj-dialog-backdrop { background: var(--kj-backdrop); }
-    ::ng-deep .kj-dialog-panel { background: transparent; box-shadow: none; }
-    ::ng-deep [kjDialogOverlay] { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; }
-    ::ng-deep [kjDialog] { background: var(--kj-surface); border: 1px solid var(--kj-border); border-radius: var(--kj-radius-lg); padding: 1.5rem; min-width: 20rem; color: var(--kj-text); font-family: var(--kj-font); box-shadow: var(--kj-shadow-hard); }
-    ::ng-deep [kjDialogTitle] { margin: 0 0 0.5rem; font-size: 1.125rem; color: var(--kj-text); }
-    ::ng-deep .dialog-body { margin: 0 0 1.5rem; font-size: 0.875rem; color: var(--kj-text-muted); line-height: 1.6; }
-    ::ng-deep .dialog-actions { display: flex; gap: 0.75rem; justify-content: flex-end; }
-    ::ng-deep .dialog-actions button[kjButton] { padding: 0.4rem 1rem; font-size: 0.8125rem; }
-  `],
-  template: `
-    <button kjButton [kjVariant]="'default'" [kjDialogTrigger]="myDialog">Open Dialog</button>
-    <ng-template #myDialog>
-      <div kjDialogOverlay>
-        <div kjDialog>
-          <h2 kjDialogTitle>Edit Profile</h2>
-          <p class="dialog-body">Make changes to your profile settings here.</p>
-          <div class="dialog-actions">
-            <button kjButton [kjVariant]="'outline'" kjDialogClose>Cancel</button>
-            <button kjButton [kjVariant]="'default'" kjDialogClose>Save Changes</button>
-          </div>
-        </div>
-      </div>
-    </ng-template>
-  `,
-})
-export class DialogBasicExample {}

package/src/dialog/dialog.finance.example.ts

@@ -1,47 +0,0 @@
-import { Component } from '@angular/core';
-import { KjDialogTrigger, KjDialog, KjDialogOverlay, KjDialogTitle, KjDialogClose } from './dialog';
-
-@Component({
-  selector: 'kj-example-dialog-finance',
-  standalone: true,
-  imports: [KjDialogTrigger, KjDialog, KjDialogOverlay, KjDialogTitle, KjDialogClose],
-  styleUrls: ['../styles/docs-themes.css'],
-  styles: [`
-    :host { display: flex; align-items: center; justify-content: center; padding: 3rem 2rem; background: var(--kj-bg); font-family: var(--kj-font); min-height: 160px; }
-    button {
-      padding: 0.45rem 1.125rem; background: var(--kj-accent); color: var(--kj-accent-on);
-      border: var(--kj-btn-border); border-color: var(--kj-accent);
-      border-radius: var(--kj-radius-md); cursor: pointer; font-family: var(--kj-font); font-size: 0.875rem; font-weight: 500;
-    }
-    button:hover { background: #2563eb; }
-    ::ng-deep .kj-dialog-backdrop { background: var(--kj-backdrop); }
-    ::ng-deep .kj-dialog-panel { background: transparent; box-shadow: none; }
-    ::ng-deep [kjDialogOverlay] { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; }
-    ::ng-deep [kjDialog] { background: var(--kj-surface); border: 1px solid var(--kj-border); border-radius: var(--kj-radius-lg); padding: 1.5rem; min-width: 22rem; box-shadow: var(--kj-shadow-hard); font-family: var(--kj-font); color: var(--kj-text); }
-    ::ng-deep [kjDialogTitle] { margin: 0 0 0.375rem; font-size: 1.0625rem; font-weight: 600; color: var(--kj-text); }
-    ::ng-deep .dialog-body { margin: 0 0 1.5rem; font-size: 0.875rem; color: var(--kj-text-muted); line-height: 1.6; }
-    ::ng-deep .dialog-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
-    ::ng-deep [kjDialogOverlay] button { padding: 0.4rem 1rem; font-size: 0.8125rem; font-weight: 500; border-radius: var(--kj-radius-md); }
-    ::ng-deep .btn-cancel { background: var(--kj-surface); color: var(--kj-text); border: 1px solid var(--kj-border); }
-    ::ng-deep .btn-cancel:hover { background: var(--kj-bg); }
-    ::ng-deep .btn-primary { background: var(--kj-accent); color: var(--kj-accent-on); border-color: var(--kj-accent); }
-    ::ng-deep .btn-primary:hover { background: #2563eb; }
-  `],
-  host: { class: 'kj-theme-finance' },
-  template: `
-    <button [kjDialogTrigger]="myDialog">Open Dialog</button>
-    <ng-template #myDialog>
-      <div kjDialogOverlay>
-        <div kjDialog>
-          <h2 kjDialogTitle>Edit Profile</h2>
-          <p class="dialog-body">Make changes to your profile settings here.</p>
-          <div class="dialog-actions">
-            <button class="btn-cancel" kjDialogClose>Cancel</button>
-            <button class="btn-primary" kjDialogClose>Save Changes</button>
-          </div>
-        </div>
-      </div>
-    </ng-template>
-  `,
-})
-export class DialogFinanceExample {}

package/src/dialog/dialog.retro.example.ts

@@ -1,46 +0,0 @@
-import { Component } from '@angular/core';
-import { KjDialogTrigger, KjDialog, KjDialogOverlay, KjDialogTitle, KjDialogClose } from './dialog';
-
-@Component({
-  selector: 'kj-example-dialog-retro',
-  standalone: true,
-  imports: [KjDialogTrigger, KjDialog, KjDialogOverlay, KjDialogTitle, KjDialogClose],
-  styleUrls: ['../styles/docs-themes.css'],
-  styles: [`
-    :host { display: flex; align-items: center; justify-content: center; padding: 3rem 2rem; background: var(--kj-bg); font-family: var(--kj-font); min-height: 160px; color: var(--kj-text); }
-    button {
-      padding: 0.4rem 1rem; font-family: var(--kj-font); font-size: 0.8rem; font-weight: 700;
-      letter-spacing: 0.06em; text-transform: uppercase; background: var(--kj-surface); color: var(--kj-text);
-      border: var(--kj-btn-border); cursor: pointer;
-      box-shadow: var(--kj-shadow-sm); transition: var(--kj-transition);
-    }
-    button:hover { transform: translate(-1px, -1px); box-shadow: var(--kj-shadow-md); }
-    ::ng-deep .kj-dialog-backdrop { background: var(--kj-backdrop); }
-    ::ng-deep .kj-dialog-panel { background: transparent; box-shadow: none; }
-    ::ng-deep [kjDialogOverlay] { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; }
-    ::ng-deep [kjDialog] { background: var(--kj-surface); border: var(--kj-btn-border); padding: 1.5rem; min-width: 20rem; box-shadow: var(--kj-shadow-hard); font-family: var(--kj-font); color: var(--kj-text); }
-    ::ng-deep [kjDialogTitle] { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 2px solid var(--kj-border); padding-bottom: 0.5rem; color: var(--kj-text); }
-    ::ng-deep .dialog-body { margin: 0.75rem 0 1.5rem; font-size: 0.8rem; color: var(--kj-text-muted); line-height: 1.6; }
-    ::ng-deep .dialog-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
-    ::ng-deep [kjDialogOverlay] button { font-size: 0.75rem; padding: 0.3rem 0.875rem; box-shadow: var(--kj-shadow-sm); }
-    ::ng-deep [kjDialogOverlay] button:hover { box-shadow: var(--kj-shadow-md); }
-    ::ng-deep .btn-primary { background: var(--kj-accent); color: var(--kj-accent-on); }
-  `],
-  host: { class: 'kj-theme-retro' },
-  template: `
-    <button [kjDialogTrigger]="myDialog">Open Dialog</button>
-    <ng-template #myDialog>
-      <div kjDialogOverlay>
-        <div kjDialog>
-          <h2 kjDialogTitle>Edit Profile</h2>
-          <p class="dialog-body">Make changes to your profile settings here.</p>
-          <div class="dialog-actions">
-            <button kjDialogClose>Cancel</button>
-            <button class="btn-primary" kjDialogClose>Save Changes</button>
-          </div>
-        </div>
-      </div>
-    </ng-template>
-  `,
-})
-export class DialogRetroExample {}

package/src/menu/index.ts

@@ -1,2 +0,0 @@
-export { KjMenu, KjMenuTrigger, KjMenuContent, KjMenuItem, KjMenuClose } from './menu';
-export { KJ_MENU, type KjMenuContext } from './menu.context';

package/src/menu/menu.context.ts

@@ -1,10 +0,0 @@
-import { InjectionToken, Signal } from '@angular/core';
-
-/** Context shared between menu directives. */
-export interface KjMenuContext {
-  readonly open: Signal<boolean>;
-  toggle(): void;
-  close(): void;
-}
-
-export const KJ_MENU = new InjectionToken<KjMenuContext>('KjMenu');

package/src/menu/menu.example.ts

@@ -1,39 +0,0 @@
-import { Component } from '@angular/core';
-import { KjMenu, KjMenuTrigger, KjMenuContent, KjMenuItem } from './menu';
-import { KjButton } from '../button/button';
-
-@Component({
-  selector: 'kj-example-menu-basic',
-  standalone: true,
-  imports: [KjMenu, KjMenuTrigger, KjMenuContent, KjMenuItem, KjButton],
-  styles: [`
-    :host { display: flex; align-items: flex-start; justify-content: center; padding: 3rem 2rem 10rem; background: #0c0c0c; font-family: 'JetBrains Mono', monospace; min-height: 220px; }
-    .anchor { position: relative; display: inline-block; }
-    button[kjButton] { padding: 0.5rem 1.25rem; border: 1px solid #444; background: transparent; color: #f0ede6; cursor: pointer; font-family: inherit; font-size: 0.875rem; }
-    button[kjButton]:hover { border-color: #b8f500; color: #b8f500; }
-    [kjMenuContent] {
-      position: absolute; top: calc(100% + 4px); left: 0; z-index: 20;
-      background: #1a1a1a; border: 1px solid #333; padding: 0.25rem 0; min-width: 10rem;
-      display: flex; flex-direction: column;
-    }
-    [kjMenuContent][hidden] { display: none; }
-    [kjMenuItem] {
-      background: transparent; border: none; color: #f0ede6; font-family: inherit;
-      font-size: 0.875rem; padding: 0.5rem 1rem; text-align: left; cursor: pointer; width: 100%;
-    }
-    [kjMenuItem]:hover, [kjMenuItem]:focus { background: #252525; color: #b8f500; outline: none; }
-    [kjMenuItem][disabled] { color: #555; cursor: not-allowed; }
-  `],
-  template: `
-    <div class="anchor" kjMenu>
-      <button kjButton kjMenuTrigger>Actions</button>
-      <div kjMenuContent>
-        <button kjMenuItem>Edit</button>
-        <button kjMenuItem>Duplicate</button>
-        <button kjMenuItem>Archive</button>
-        <button kjMenuItem disabled>Delete</button>
-      </div>
-    </div>
-  `,
-})
-export class MenuBasicExample {}

package/src/menu/menu.spec.ts

@@ -1,168 +0,0 @@
-import { render, fireEvent } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { KjMenu, KjMenuTrigger, KjMenuContent, KjMenuItem, KjMenuClose } from './menu';
-
-expect.extend(toHaveNoViolations);
-
-const imports = [KjMenu, KjMenuTrigger, KjMenuContent, KjMenuItem, KjMenuClose];
-
-const template = `
-  <div kjMenu>
-    <button kjMenuTrigger>Actions</button>
-    <div kjMenuContent>
-      <button kjMenuItem>Edit</button>
-      <button kjMenuItem>Delete</button>
-    </div>
-  </div>`;
-
-describe('KjMenu', () => {
-  it('renders trigger button', async () => {
-    const { getByRole } = await render(template, { imports });
-    expect(getByRole('button', { name: 'Actions' })).toBeInTheDocument();
-  });
-
-  it('trigger has aria-haspopup="menu"', async () => {
-    const { getByRole } = await render(template, { imports });
-    expect(getByRole('button', { name: 'Actions' })).toHaveAttribute('aria-haspopup', 'menu');
-  });
-
-  it('trigger has aria-expanded="false" initially', async () => {
-    const { getByRole } = await render(template, { imports });
-    expect(getByRole('button', { name: 'Actions' })).toHaveAttribute('aria-expanded', 'false');
-  });
-
-  it('menu content is hidden initially', async () => {
-    const { getByRole } = await render(template, { imports });
-    const menu = getByRole('menu', { hidden: true });
-    expect(menu).toHaveAttribute('hidden');
-  });
-
-  it('opens on trigger click', async () => {
-    const { getByRole } = await render(template, { imports });
-    fireEvent.click(getByRole('button', { name: 'Actions' }));
-    const menu = getByRole('menu');
-    expect(menu).not.toHaveAttribute('hidden');
-  });
-
-  it('sets aria-expanded="true" when open', async () => {
-    const { getByRole } = await render(template, { imports });
-    fireEvent.click(getByRole('button', { name: 'Actions' }));
-    expect(getByRole('button', { name: 'Actions' })).toHaveAttribute('aria-expanded', 'true');
-  });
-
-  it('closes on second trigger click (toggle)', async () => {
-    const { getByRole } = await render(template, { imports });
-    const trigger = getByRole('button', { name: 'Actions' });
-    fireEvent.click(trigger);
-    fireEvent.click(trigger);
-    const menu = getByRole('menu', { hidden: true });
-    expect(menu).toHaveAttribute('hidden');
-  });
-
-  it('closes on Escape key', async () => {
-    const { getByRole } = await render(template, { imports });
-    fireEvent.click(getByRole('button', { name: 'Actions' }));
-    fireEvent.keyDown(document, { key: 'Escape' });
-    const menu = getByRole('menu', { hidden: true });
-    expect(menu).toHaveAttribute('hidden');
-  });
-
-  it('closes on click outside', async () => {
-    const { getByRole } = await render(template, { imports });
-    fireEvent.click(getByRole('button', { name: 'Actions' }));
-    fireEvent.click(document.body);
-    const menu = getByRole('menu', { hidden: true });
-    expect(menu).toHaveAttribute('hidden');
-  });
-
-  it('closes when a menu item is clicked', async () => {
-    const { getByRole } = await render(template, { imports });
-    fireEvent.click(getByRole('button', { name: 'Actions' }));
-    fireEvent.click(getByRole('menuitem', { name: 'Edit' }));
-    const menu = getByRole('menu', { hidden: true });
-    expect(menu).toHaveAttribute('hidden');
-  });
-
-  it('menu items have role="menuitem"', async () => {
-    const { getAllByRole } = await render(template, { imports });
-    fireEvent.click(getAllByRole('button')[0]);
-    const items = getAllByRole('menuitem');
-    expect(items).toHaveLength(2);
-  });
-
-  it('navigates down with ArrowDown', async () => {
-    const { getByRole, getAllByRole } = await render(template, { imports });
-    fireEvent.click(getByRole('button', { name: 'Actions' }));
-    const menu = getByRole('menu');
-    const items = getAllByRole('menuitem');
-    items[0].focus();
-    fireEvent.keyDown(menu, { key: 'ArrowDown' });
-    expect(document.activeElement).toBe(items[1]);
-  });
-
-  it('navigates up with ArrowUp', async () => {
-    const { getByRole, getAllByRole } = await render(template, { imports });
-    fireEvent.click(getByRole('button', { name: 'Actions' }));
-    const menu = getByRole('menu');
-    const items = getAllByRole('menuitem');
-    items[1].focus();
-    fireEvent.keyDown(menu, { key: 'ArrowUp' });
-    expect(document.activeElement).toBe(items[0]);
-  });
-
-  it('wraps around from last to first on ArrowDown', async () => {
-    const { getByRole, getAllByRole } = await render(template, { imports });
-    fireEvent.click(getByRole('button', { name: 'Actions' }));
-    const menu = getByRole('menu');
-    const items = getAllByRole('menuitem');
-    items[items.length - 1].focus();
-    fireEvent.keyDown(menu, { key: 'ArrowDown' });
-    expect(document.activeElement).toBe(items[0]);
-  });
-
-  it('focuses first item on Home key', async () => {
-    const { getByRole, getAllByRole } = await render(template, { imports });
-    fireEvent.click(getByRole('button', { name: 'Actions' }));
-    const menu = getByRole('menu');
-    const items = getAllByRole('menuitem');
-    items[1].focus();
-    fireEvent.keyDown(menu, { key: 'Home' });
-    expect(document.activeElement).toBe(items[0]);
-  });
-
-  it('focuses last item on End key', async () => {
-    const { getByRole, getAllByRole } = await render(template, { imports });
-    fireEvent.click(getByRole('button', { name: 'Actions' }));
-    const menu = getByRole('menu');
-    const items = getAllByRole('menuitem');
-    items[0].focus();
-    fireEvent.keyDown(menu, { key: 'End' });
-    expect(document.activeElement).toBe(items[items.length - 1]);
-  });
-
-  it('kjMenuClose closes the menu on click', async () => {
-    const closeTemplate = `
-      <div kjMenu>
-        <button kjMenuTrigger>Open</button>
-        <div kjMenuContent>
-          <button kjMenuClose>Cancel</button>
-        </div>
-      </div>`;
-    const { getByRole } = await render(closeTemplate, { imports });
-    fireEvent.click(getByRole('button', { name: 'Open' }));
-    fireEvent.click(getByRole('button', { name: 'Cancel' }));
-    const menu = getByRole('menu', { hidden: true });
-    expect(menu).toHaveAttribute('hidden');
-  });
-
-  it('passes axe audit when closed', async () => {
-    const { container } = await render(template, { imports });
-    expect(await axe(container)).toHaveNoViolations();
-  });
-
-  it('passes axe audit when open', async () => {
-    const { container, getByRole } = await render(template, { imports });
-    fireEvent.click(getByRole('button', { name: 'Actions' }));
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});