@kouji-ui/core 0.0.4 → 0.1.2

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/button/button.spec.ts

@@ -1,32 +0,0 @@
-import { render } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { KjButton } from './button';
-
-expect.extend(toHaveNoViolations);
-
-describe('KjButton', () => {
-  it('renders a button element', async () => {
-    const { getByRole } = await render(`<button kjButton>Click</button>`, { imports: [KjButton] });
-    expect(getByRole('button')).toBeInTheDocument();
-  });
-
-  it('sets data-variant attribute', async () => {
-    const { getByRole } = await render(`<button kjButton [kjVariant]="'destructive'">Delete</button>`, { imports: [KjButton] });
-    expect(getByRole('button')).toHaveAttribute('data-variant', 'destructive');
-  });
-
-  it('sets data-size attribute', async () => {
-    const { getByRole } = await render(`<button kjButton [kjSize]="'sm'">Small</button>`, { imports: [KjButton] });
-    expect(getByRole('button')).toHaveAttribute('data-size', 'sm');
-  });
-
-  it('sets aria-disabled when disabled via hostDirective', async () => {
-    const { getByRole } = await render(`<button kjButton [kjDisabled]="true">Disabled</button>`, { imports: [KjButton] });
-    expect(getByRole('button')).toHaveAttribute('aria-disabled', 'true');
-  });
-
-  it('passes axe audit', async () => {
-    const { container } = await render(`<button kjButton>Action</button>`, { imports: [KjButton] });
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/button/button.ts

@@ -1,44 +0,0 @@
-import { Directive, input } from '@angular/core';
-import { KjDisabled, KjFocusRing } from '../primitives';
-
-export type KjButtonVariant = 'default' | 'destructive' | 'outline' | 'ghost' | 'link';
-export type KjButtonSize = 'sm' | 'md' | 'lg' | 'icon';
-
-/**
- * Enhances a native ```<button>``` with variant, size, disabled state, and focus-ring behavior.
- * Composes `KjDisabled` and `KjFocusRing` via `hostDirectives`.
- *
- * @example
- * ```html
- * <button kjButton [kjVariant]="'destructive'" [kjDisabled]="isLoading()">Delete</button>
- * ```
- * @doc
- *  @doc-example Variants
- *    @doc-theme default
- *      @doc-file button.example.ts
- *    @doc-theme retro
- *      @doc-file button.retro.example.ts
- *    @doc-theme finance
- *      @doc-file button.finance.example.ts
- *  @doc-example Sizes
- *    @doc-file button.sizes.example.ts
- * @category Core/Base
- */
-@Directive({
-  selector: '[kjButton]',
-  standalone: true,
-  hostDirectives: [
-    { directive: KjDisabled, inputs: ['kjDisabled'] },
-    KjFocusRing,
-  ],
-  host: {
-    '[attr.data-variant]': 'kjVariant()',
-    '[attr.data-size]': 'kjSize()',
-  },
-})
-export class KjButton {
-  /** The visual variant of the button. Defaults to `'default'`. */
-  kjVariant = input<KjButtonVariant>('default');
-  /** The size of the button. Defaults to `'md'`. */
-  kjSize = input<KjButtonSize>('md');
-}

package/src/button/index.ts

@@ -1 +0,0 @@
-export { KjButton, type KjButtonVariant, type KjButtonSize } from './button';

package/src/chart/chart.spec.ts

@@ -1,27 +0,0 @@
-import { render } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { KjChart } from './chart';
-
-expect.extend(toHaveNoViolations);
-
-describe('KjChart', () => {
-  it('renders the host element', async () => {
-    const { container } = await render(`<div kjChart [kjChartOption]="{}"></div>`, { imports: [KjChart] });
-    expect(container.querySelector('[kjChart]')).toBeInTheDocument();
-  });
-
-  it('sets role=img', async () => {
-    const { container } = await render(`<div kjChart [kjChartOption]="{}" kjChartLabel="Sales"></div>`, { imports: [KjChart] });
-    expect(container.querySelector('[kjChart]')).toHaveAttribute('role', 'img');
-  });
-
-  it('sets aria-label', async () => {
-    const { container } = await render(`<div kjChart [kjChartOption]="{}" kjChartLabel="Revenue chart"></div>`, { imports: [KjChart] });
-    expect(container.querySelector('[kjChart]')).toHaveAttribute('aria-label', 'Revenue chart');
-  });
-
-  it('passes axe audit', async () => {
-    const { container } = await render(`<div kjChart [kjChartOption]="{}" kjChartLabel="Revenue chart"></div>`, { imports: [KjChart] });
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/chart/chart.ts

@@ -1,48 +0,0 @@
-import { Directive, DestroyRef, ElementRef, inject, input, afterNextRender, afterEveryRender } from '@angular/core';
-import type { EChartsOption } from 'echarts';
-
-/**
- * Wraps Apache ECharts. Initializes after first render, updates reactively, disposes on destroy.
- * Always provide `kjChartLabel` for WCAG AAA compliance.
- *
- * @example
- * ```html
- * <div kjChart [kjChartOption]="chartOption()" kjChartLabel="Monthly revenue" style="height:300px"></div>
- * ```
- * @category Core/Data
- */
-@Directive({
-  selector: '[kjChart]', standalone: true,
-  host: { role: 'img', '[attr.aria-label]': 'kjChartLabel() || null' },
-})
-export class KjChart {
-  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef);
-  private readonly destroyRef = inject(DestroyRef);
-
-  /** ECharts option object defining the chart. */
-  kjChartOption = input.required<EChartsOption>();
-  /** Accessible label for the chart. Required for WCAG AAA compliance. */
-  kjChartLabel = input<string>('');
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private chart: any;
-
-  constructor() {
-    afterNextRender(async () => {
-      try {
-        const echarts = await import('echarts');
-        this.chart = echarts.init(this.el.nativeElement);
-        this.chart.setOption(this.kjChartOption());
-        this.destroyRef.onDestroy(() => this.chart?.dispose());
-      } catch {
-        // ECharts cannot initialize in non-browser environments (jsdom, SSR)
-      }
-    });
-
-    afterEveryRender(() => {
-      if (this.chart) {
-        this.chart.setOption(this.kjChartOption());
-      }
-    });
-  }
-}

package/src/chart/index.ts

@@ -1 +0,0 @@
-export { KjChart } from './chart';

package/src/checkbox/checkbox.spec.ts

@@ -1,35 +0,0 @@
-import { render, fireEvent } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { KjCheckbox } from './checkbox';
-
-expect.extend(toHaveNoViolations);
-
-describe('KjCheckbox', () => {
-  it('sets role=checkbox', async () => {
-    const { getByRole } = await render(`<div kjCheckbox tabindex="0">Check</div>`, { imports: [KjCheckbox] });
-    expect(getByRole('checkbox')).toBeInTheDocument();
-  });
-
-  it('has aria-checked=false by default', async () => {
-    const { getByRole } = await render(`<div kjCheckbox tabindex="0">Check</div>`, { imports: [KjCheckbox] });
-    expect(getByRole('checkbox')).toHaveAttribute('aria-checked', 'false');
-  });
-
-  it('toggles checked on click', async () => {
-    const { getByRole } = await render(`<div kjCheckbox tabindex="0">Check</div>`, { imports: [KjCheckbox] });
-    fireEvent.click(getByRole('checkbox'));
-    expect(getByRole('checkbox')).toHaveAttribute('aria-checked', 'true');
-    expect(getByRole('checkbox')).toHaveAttribute('data-checked', '');
-  });
-
-  it('toggles on Space key', async () => {
-    const { getByRole } = await render(`<div kjCheckbox tabindex="0">Check</div>`, { imports: [KjCheckbox] });
-    fireEvent.keyDown(getByRole('checkbox'), { key: ' ' });
-    expect(getByRole('checkbox')).toHaveAttribute('aria-checked', 'true');
-  });
-
-  it('passes axe audit', async () => {
-    const { container } = await render(`<div kjCheckbox tabindex="0" aria-label="Accept terms">Accept</div>`, { imports: [KjCheckbox] });
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/checkbox/checkbox.ts

@@ -1,82 +0,0 @@
-import { Directive, inject, model } from '@angular/core';
-import { KjDisabled, KjFocusRing, KjFormControl } from '../primitives';
-
-/**
- * Adds checkbox semantics with Angular forms integration.
- * Supports `formControl`, `formControlName`, and `ngModel` bindings.
- *
- * @example
- * ```html
- * <div kjCheckbox tabindex="0" [(kjChecked)]="accepted" aria-label="Accept terms">Accept</div>
- * ```
- * @doc
- *  @doc-file checkbox.example.ts
- *    ```typescript
- *       import { Component, signal } from '@angular/core';
- *       import { KjCheckbox } from '@kouji-ui/core';
- *
- *       @Component({
- *         standalone: true,
- *         imports: [KjCheckbox],
- *         styles: [`
- *           .row { display: flex; flex-direction: column; gap: 1rem; padding: 2rem; background: #0c0c0c; }
- *           .item { display: flex; align-items: center; gap: 0.75rem; }
- *           [kjCheckbox] { width: 18px; height: 18px; border: 2px solid #333; background: #111; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
- *           [data-checked] { background: #b8f500; border-color: #b8f500; }
- *           [data-checked]::after { content: '✓'; color: #0c0c0c; font-size: 0.75rem; font-weight: bold; }
- *           span { color: #888; font-family: 'JetBrains Mono', monospace; font-size: 0.875rem; }
- *         `],
- *         template: `
- *           <div class="row">
- *             <div class="item">
- *               <div kjCheckbox tabindex="0" [(kjChecked)]="terms" aria-label="Accept terms"></div>
- *               <span>Accept terms — {{ terms() ? 'checked' : 'unchecked' }}</span>
- *             </div>
- *             <div class="item">
- *               <div kjCheckbox tabindex="0" [(kjChecked)]="newsletter" aria-label="Newsletter"></div>
- *               <span>Subscribe to newsletter</span>
- *             </div>
- *           </div>
- *         `,
- *       })
- *       export class CheckboxExampleComponent {
- *         terms = signal(false);
- *         newsletter = signal(true);
- *       }
- *    ```
- * @category Core/Inputs
- */
-@Directive({
-  selector: '[kjCheckbox]',
-  standalone: true,
-  hostDirectives: [
-    { directive: KjDisabled, inputs: ['kjDisabled'] },
-    KjFocusRing,
-    KjFormControl,
-  ],
-  host: {
-    role: 'checkbox',
-    '[attr.aria-checked]': 'kjChecked().toString()',
-    '[attr.data-checked]': 'kjChecked() ? "" : null',
-    '[attr.disabled]': 'formCtrl.disabled() ? "" : null',
-    '(click)': 'toggle()',
-    '(keydown.space)': 'onSpace($event)',
-    '(blur)': 'formCtrl.notifyTouched()',
-  },
-})
-export class KjCheckbox {
-  readonly formCtrl = inject(KjFormControl);
-
-  /** Whether the checkbox is checked. Supports two-way binding. */
-  kjChecked = model<boolean>(false);
-
-  /** @internal */
-  toggle(): void {
-    const next = !this.kjChecked();
-    this.kjChecked.set(next);
-    this.formCtrl.notifyChange(next);
-  }
-
-  /** @internal */
-  onSpace(e: Event): void { e.preventDefault(); this.toggle(); }
-}

package/src/checkbox/index.ts

@@ -1 +0,0 @@
-export { KjCheckbox } from './checkbox';

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 {}