@kouji-ui/core 0.0.4 → 0.1.2

package/src/input/input.ts

@@ -1,80 +0,0 @@
-import { Directive, ElementRef, effect, inject, input } from '@angular/core';
-import { KjDisabled, KjFocusRing, KjFormControl } from '../primitives';
-
-/**
- * Enhances a native `<input>` with Angular forms integration, disabled/invalid state, and focus-ring.
- * Supports `formControl`, `formControlName`, and `ngModel` bindings.
- *
- * @example
- * ```html
- * <input kjInput type="email" [formControl]="emailCtrl" [kjInvalid]="emailCtrl.invalid" />
- * ```
- * @doc
- *  @doc-file input.example.ts
- *    ```typescript
- *       import { Component } from '@angular/core';
- *       import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
- *       import { KjInput } from '@kouji-ui/core';
- *
- *       @Component({
- *         standalone: true,
- *         imports: [KjInput, ReactiveFormsModule],
- *         styles: [`
- *           .form { padding: 2rem; background: #0c0c0c; display: flex; flex-direction: column; gap: 1rem; max-width: 400px; }
- *           [kjInput] { padding: 0.625rem 0.875rem; background: #111; border: 1px solid #222; color: #f0ede6; font-family: 'JetBrains Mono', monospace; font-size: 0.875rem; width: 100%; }
- *           [kjInput]:focus { outline: none; border-color: #b8f500; }
- *           [aria-invalid="true"] { border-color: #ef4444; }
- *           .error { color: #ef4444; font-size: 0.75rem; font-family: 'JetBrains Mono', monospace; }
- *           label { color: #888; font-size: 0.75rem; font-family: 'JetBrains Mono', monospace; }
- *         `],
- *         template: `
- *           <div class="form">
- *             <label for="email">Email</label>
- *             <input id="email" kjInput type="email" [formControl]="emailCtrl"
- *               [kjInvalid]="emailCtrl.invalid && emailCtrl.touched"
- *               placeholder="you@example.com" />
- *             @if (emailCtrl.invalid && emailCtrl.touched) {
- *               <span class="error">Please enter a valid email.</span>
- *             }
- *             <label for="disabled">Disabled input</label>
- *             <input id="disabled" kjInput type="text" [kjDisabled]="true" value="Not editable" />
- *           </div>
- *         `,
- *       })
- *       export class InputExampleComponent {
- *         emailCtrl = new FormControl('', [Validators.email, Validators.required]);
- *       }
- *    ```
- * @category Core/Inputs
- */
-@Directive({
-  selector: '[kjInput]',
-  standalone: true,
-  hostDirectives: [
-    { directive: KjDisabled, inputs: ['kjDisabled'] },
-    KjFocusRing,
-    KjFormControl,
-  ],
-  host: {
-    '[attr.aria-invalid]': 'formCtrl.touched() && kjInvalid() ? "true" : null',
-    '[attr.data-invalid]': 'formCtrl.touched() && kjInvalid() ? "" : null',
-    '[attr.disabled]': 'formCtrl.disabled() ? "" : null',
-    '(input)': 'formCtrl.notifyChange($any($event.target).value)',
-    '(blur)': 'formCtrl.notifyTouched()',
-  },
-})
-export class KjInput {
-  readonly formCtrl = inject(KjFormControl);
-  private readonly el = inject<ElementRef<HTMLInputElement>>(ElementRef);
-
-  /** Whether the input is in an invalid state. Combined with `touched` for ARIA. */
-  kjInvalid = input<boolean>(false);
-
-  constructor() {
-    // Reflect the CVA value signal back to the native input element.
-    effect(() => {
-      const val = this.formCtrl.value();
-      this.el.nativeElement.value = val == null ? '' : String(val);
-    });
-  }
-}

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();
-  });
-});

package/src/menu/menu.ts

@@ -1,176 +0,0 @@
-import { Directive, ElementRef, inject, signal } from '@angular/core';
-import { KJ_MENU, KjMenuContext } from './menu.context';
-
-/**
- * Root menu container. Manages open/close state and provides context to child directives.
- * Pairs with `[kjMenuTrigger]`, `[kjMenuContent]`, and `[kjMenuItem]`.
- *
- * Click outside or Escape closes the menu. Clicking the trigger toggles it.
- * Arrow-key navigation, Home/End, and typeahead are handled by `[kjMenuContent]`.
- *
- * @example
- * ```html
- * <div kjMenu>
- *   <button kjMenuTrigger>Actions</button>
- *   <div kjMenuContent>
- *     <button kjMenuItem>Edit</button>
- *     <button kjMenuItem>Delete</button>
- *   </div>
- * </div>
- * ```
- * @doc
- *  @doc-example Basic
- *    @doc-theme default
- *      @doc-file menu.example.ts
- * @category Core/Navigation
- */
-@Directive({
-  selector: '[kjMenu]',
-  standalone: true,
-  providers: [{ provide: KJ_MENU, useExisting: KjMenu }],
-  exportAs: 'kjMenu',
-})
-export class KjMenu implements KjMenuContext {
-  private readonly _open = signal(false);
-  readonly open = this._open.asReadonly();
-
-  toggle(): void { this._open.update(v => !v); }
-  close(): void { this._open.set(false); }
-}
-
-/**
- * Trigger element that toggles the parent menu.
- * Automatically sets `aria-haspopup` and `aria-expanded` on the host element.
- *
- * @category Core/Navigation
- */
-@Directive({
-  selector: '[kjMenuTrigger]',
-  standalone: true,
-  host: {
-    '[attr.aria-haspopup]': '"menu"',
-    '[attr.aria-expanded]': 'ctx.open().toString()',
-    // stopPropagation prevents the document:click on kjMenuContent from immediately closing
-    '(click)': '$event.stopPropagation(); ctx.toggle()',
-  },
-})
-export class KjMenuTrigger {
-  readonly ctx = inject(KJ_MENU);
-}
-
-/**
- * Menu content panel. Hidden when closed via the `hidden` attribute.
- * Provides keyboard navigation: Arrow keys, Home/End, Escape, and typeahead.
- * Click-outside dismissal is handled via a document-level click listener.
- *
- * @category Core/Navigation
- */
-@Directive({
-  selector: '[kjMenuContent]',
-  standalone: true,
-  host: {
-    'role': 'menu',
-    '[attr.hidden]': '!ctx.open() ? "" : null',
-    // Prevent clicks inside from propagating to document click handler
-    '(click)': '$event.stopPropagation()',
-    // Keyboard navigation within the menu
-    '(keydown)': 'onKeydown($event)',
-    // Close on Escape key
-    '(document:keydown.escape)': 'ctx.open() && ctx.close()',
-    // Close on any click outside (trigger stopPropagation prevents self-close)
-    '(document:click)': 'ctx.open() && ctx.close()',
-  },
-})
-export class KjMenuContent {
-  private readonly el = inject(ElementRef<HTMLElement>);
-  readonly ctx = inject(KJ_MENU);
-
-  onKeydown(e: KeyboardEvent): void {
-    const items = this.getFocusableItems();
-    if (!items.length) return;
-    const current = items.indexOf(document.activeElement as HTMLElement);
-
-    switch (e.key) {
-      case 'ArrowDown':
-        e.preventDefault();
-        items[(current + 1) % items.length].focus();
-        break;
-      case 'ArrowUp':
-        e.preventDefault();
-        items[(current - 1 + items.length) % items.length].focus();
-        break;
-      case 'Home':
-        e.preventDefault();
-        items[0].focus();
-        break;
-      case 'End':
-        e.preventDefault();
-        items[items.length - 1].focus();
-        break;
-      default: {
-        // Type-ahead: jump to next item starting with pressed character
-        const char = e.key.length === 1 ? e.key.toLowerCase() : null;
-        if (char) {
-          const match =
-            items.find((item, i) =>
-              i > current && item.textContent?.trim().toLowerCase().startsWith(char)
-            ) ??
-            items.find(item =>
-              item.textContent?.trim().toLowerCase().startsWith(char)
-            );
-          match?.focus();
-        }
-      }
-    }
-  }
-
-  private getFocusableItems(): HTMLElement[] {
-    const nodes = this.el.nativeElement.querySelectorAll('[kjMenuItem]');
-    return (Array.from(nodes) as HTMLElement[]).filter(el => !el.hasAttribute('disabled'));
-  }
-}
-
-/**
- * Individual menu item. Closes the menu on click or keyboard activation (Enter/Space).
- *
- * @example
- * ```html
- * <button kjMenuItem>Delete</button>
- * ```
- * @category Core/Navigation
- */
-@Directive({
-  selector: '[kjMenuItem]',
-  standalone: true,
-  host: {
-    'role': 'menuitem',
-    '[attr.tabindex]': '"0"',
-    '(click)': 'ctx.close()',
-    '(keydown.enter)': '$event.preventDefault(); ctx.close()',
-    '(keydown.space)': '$event.preventDefault(); ctx.close()',
-  },
-})
-export class KjMenuItem {
-  readonly ctx = inject(KJ_MENU);
-}
-
-/**
- * Closes the parent menu when clicked. Convenience directive for non-item close buttons.
- * Place anywhere inside `[kjMenu]`.
- *
- * @example
- * ```html
- * <button kjMenuClose>Cancel</button>
- * ```
- * @category Core/Navigation
- */
-@Directive({
-  selector: '[kjMenuClose]',
-  standalone: true,
-  host: {
-    '(click)': 'ctx.close()',
-  },
-})
-export class KjMenuClose {
-  readonly ctx = inject(KJ_MENU);
-}

package/src/popover/index.ts

@@ -1,12 +0,0 @@
-export {
-  KjPopover,
-  KjPopoverTrigger,
-  KjPopoverContent,
-  KjPopoverClose,
-} from './popover';
-export {
-  KJ_POPOVER,
-  type KjPopoverContext,
-  type KjPopoverSide,
-  type KjPopoverAlign,
-} from './popover.context';

package/src/popover/popover.context.ts

@@ -1,18 +0,0 @@
-import { InjectionToken, Signal, InputSignal } from '@angular/core';
-
-/** Preferred side for the popover relative to its trigger. */
-export type KjPopoverSide = 'top' | 'bottom' | 'left' | 'right';
-/** Alignment of the popover along the cross-axis. */
-export type KjPopoverAlign = 'start' | 'center' | 'end';
-
-/** Context shared between popover directives. */
-export interface KjPopoverContext {
-  readonly open: Signal<boolean>;
-  readonly popoverId: string;
-  kjPopoverSide: Signal<KjPopoverSide> | InputSignal<KjPopoverSide>;
-  kjPopoverAlign: Signal<KjPopoverAlign> | InputSignal<KjPopoverAlign>;
-  toggle: () => void;
-  hide: () => void;
-}
-
-export const KJ_POPOVER = new InjectionToken<KjPopoverContext>('KjPopover');

package/src/popover/popover.example.ts

@@ -1,50 +0,0 @@
-import { Component } from '@angular/core';
-import {
-  KjPopover, KjPopoverTrigger,
-  KjPopoverContent, KjPopoverClose,
-} from './popover';
-import { KjButton } from '../button/button';
-
-@Component({
-  selector: 'kj-example-popover-basic',
-  standalone: true,
-  imports: [
-    KjPopover, KjPopoverTrigger,
-    KjPopoverContent, KjPopoverClose,
-    KjButton,
-  ],
-  styleUrls: ['../styles/docs-themes.css'],
-  styles: [`
-    :host { display: flex; align-items: flex-start; justify-content: center; padding: 3rem 2rem 10rem; background: var(--kj-bg); font-family: var(--kj-font); min-height: 220px; }
-    .anchor { position: relative; display: inline-block; }
-    button[kjButton] { padding: 0.5rem 1.25rem; border: 1px solid var(--kj-border); background: transparent; color: var(--kj-text); cursor: pointer; font-family: inherit; font-size: 0.875rem; }
-    button[kjButton]:hover { border-color: var(--kj-accent); color: var(--kj-accent); }
-    [kjPopoverContent] {
-      position: absolute; top: calc(100% + 8px); left: 0; z-index: 20;
-      background: var(--kj-surface); border: 1px solid var(--kj-border); padding: 1rem; min-width: 14rem;
-      color: var(--kj-text);
-    }
-    [kjPopoverContent][hidden] { display: none; }
-    [kjPopoverContent][data-align="end"] { left: auto; right: 0; }
-    .popover-title { font-size: 0.875rem; font-weight: 600; margin: 0 0 0.5rem; color: var(--kj-accent); }
-    .popover-body { font-size: 0.8125rem; color: var(--kj-text-muted); margin: 0 0 1rem; line-height: 1.5; }
-    .popover-footer { display: flex; justify-content: flex-end; gap: 0.5rem; }
-    .popover-footer button[kjButton] { padding: 0.35rem 0.875rem; font-size: 0.8125rem; }
-    [data-variant="default"] { border-color: var(--kj-accent); color: var(--kj-accent-on); background: var(--kj-accent); }
-    [data-variant="ghost"] { border-color: transparent; background: transparent; color: var(--kj-text-muted); }
-  `],
-  template: `
-    <div class="anchor" kjPopover>
-      <button kjButton kjPopoverTrigger>Open Popover</button>
-      <div kjPopoverContent>
-        <p class="popover-title">Notification Settings</p>
-        <p class="popover-body">Control how and when you receive notifications from this app.</p>
-        <div class="popover-footer">
-          <button kjButton kjPopoverClose [kjVariant]="'ghost'">Cancel</button>
-          <button kjButton kjPopoverClose [kjVariant]="'default'">Save</button>
-        </div>
-      </div>
-    </div>
-  `,
-})
-export class PopoverBasicExample {}

package/src/popover/popover.finance.example.ts

@@ -1,52 +0,0 @@
-import { Component } from '@angular/core';
-import {
-  KjPopover, KjPopoverTrigger,
-  KjPopoverContent, KjPopoverClose,
-} from './popover';
-
-@Component({
-  selector: 'kj-example-popover-finance',
-  standalone: true,
-  imports: [
-    KjPopover, KjPopoverTrigger,
-    KjPopoverContent, KjPopoverClose,
-  ],
-  styleUrls: ['../styles/docs-themes.css'],
-  host: { class: 'kj-theme-finance' },
-  styles: [`
-    :host { display: flex; align-items: flex-start; justify-content: center; padding: 3rem 2rem 10rem; background: var(--kj-bg); font-family: var(--kj-font); min-height: 220px; }
-    .anchor { position: relative; display: inline-block; }
-    button {
-      padding: 0.4rem 1rem; background: var(--kj-accent); color: var(--kj-accent-on); border: 1px solid var(--kj-accent);
-      border-radius: var(--kj-radius-md); cursor: pointer; font-family: inherit; font-size: 0.875rem; font-weight: 500;
-    }
-    button:hover { background: #2563eb; }
-    [kjPopoverContent] {
-      position: absolute; top: calc(100% + 8px); left: 0; z-index: 20;
-      background: var(--kj-surface); border: 1px solid var(--kj-border); border-radius: var(--kj-radius-lg);
-      box-shadow: var(--kj-shadow-md); padding: 1rem; min-width: 14rem;
-    }
-    [kjPopoverContent][hidden] { display: none; }
-    .popover-title { font-size: 0.875rem; font-weight: 600; color: var(--kj-text); margin: 0 0 0.375rem; }
-    .popover-body { font-size: 0.8125rem; color: var(--kj-text-muted); margin: 0 0 1rem; line-height: 1.5; }
-    .popover-footer { display: flex; justify-content: flex-end; gap: 0.5rem; }
-    .btn-cancel { padding: 0.35rem 0.875rem; background: var(--kj-surface); color: #374151; border: 1px solid var(--kj-border); border-radius: var(--kj-radius-sm); cursor: pointer; font-size: 0.8125rem; font-weight: 500; }
-    .btn-cancel:hover { background: #f3f4f6; }
-    .btn-primary { padding: 0.35rem 0.875rem; background: var(--kj-accent); color: var(--kj-accent-on); border: 1px solid var(--kj-accent); border-radius: var(--kj-radius-sm); cursor: pointer; font-size: 0.8125rem; font-weight: 500; }
-    .btn-primary:hover { background: #2563eb; }
-  `],
-  template: `
-    <div class="anchor" kjPopover>
-      <button kjPopoverTrigger>Preferences</button>
-      <div kjPopoverContent>
-        <p class="popover-title">Notification Preferences</p>
-        <p class="popover-body">Choose how you receive alerts and account notifications.</p>
-        <div class="popover-footer">
-          <button class="btn-cancel" kjPopoverClose>Cancel</button>
-          <button class="btn-primary" kjPopoverClose>Apply</button>
-        </div>
-      </div>
-    </div>
-  `,
-})
-export class PopoverFinanceExample {}

package/src/popover/popover.retro.example.ts

@@ -1,53 +0,0 @@
-import { Component } from '@angular/core';
-import {
-  KjPopover, KjPopoverTrigger,
-  KjPopoverContent, KjPopoverClose,
-} from './popover';
-
-@Component({
-  selector: 'kj-example-popover-retro',
-  standalone: true,
-  imports: [
-    KjPopover, KjPopoverTrigger,
-    KjPopoverContent, KjPopoverClose,
-  ],
-  styleUrls: ['../styles/docs-themes.css'],
-  host: { class: 'kj-theme-retro' },
-  styles: [`
-    :host { display: flex; align-items: flex-start; justify-content: center; padding: 3rem 2rem 10rem; background: var(--kj-bg); font-family: var(--kj-font); min-height: 220px; color: var(--kj-text); }
-    .anchor { position: relative; display: inline-block; }
-    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); border-radius: 0; cursor: pointer;
-      box-shadow: var(--kj-shadow-sm); transition: var(--kj-transition);
-    }
-    button:hover { transform: translate(-1px, -1px); box-shadow: var(--kj-shadow-md); }
-    [kjPopoverContent] {
-      position: absolute; top: calc(100% + 8px); left: 0; z-index: 20;
-      background: var(--kj-bg); border: var(--kj-btn-border); box-shadow: var(--kj-shadow-hard);
-      padding: 1rem; min-width: 14rem; font-family: var(--kj-font);
-    }
-    [kjPopoverContent][hidden] { display: none; }
-    .popover-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.5rem; border-bottom: var(--kj-btn-border); padding-bottom: 0.375rem; color: var(--kj-text); }
-    .popover-body { font-size: 0.75rem; color: var(--kj-text-muted); margin: 0.5rem 0 1rem; line-height: 1.6; }
-    .popover-footer { display: flex; justify-content: flex-end; gap: 0.5rem; }
-    .popover-footer button { padding: 0.3rem 0.75rem; font-size: 0.7rem; box-shadow: var(--kj-shadow-sm); }
-    .popover-footer button:hover { box-shadow: var(--kj-shadow-md); }
-    .btn-primary { background: var(--kj-accent); color: var(--kj-accent-on); border-color: var(--kj-border); }
-  `],
-  template: `
-    <div class="anchor" kjPopover>
-      <button kjPopoverTrigger>Settings</button>
-      <div kjPopoverContent>
-        <p class="popover-title">Notifications</p>
-        <p class="popover-body">Configure notification frequency and delivery preferences.</p>
-        <div class="popover-footer">
-          <button kjPopoverClose>Cancel</button>
-          <button kjPopoverClose class="btn-primary">Save</button>
-        </div>
-      </div>
-    </div>
-  `,
-})
-export class PopoverRetroExample {}