@kouji-ui/core 0.0.4 → 0.1.2

package/src/a11y/live-region.ts

@@ -1,48 +0,0 @@
-import { Directive, ElementRef, inject, input } from '@angular/core';
-
-/** Politeness setting for ARIA live regions. */
-export type KjLivePoliteness = 'off' | 'polite' | 'assertive';
-
-/**
- * Marks an element as an ARIA live region and exposes an `announce` method
- * for programmatically pushing announcements to screen readers via DOM text content.
- *
- * @example
- * ```html
- * <div kjLiveRegion [kjPoliteness]="'polite'" #region="kjLiveRegion"></div>
- * <button (click)="region.announce('Item saved')">Save</button>
- * ```
- * @category Core/Accessibility
- */
-@Directive({
-  selector: '[kjLiveRegion]',
-  standalone: true,
-  exportAs: 'kjLiveRegion',
-  host: {
-    '[attr.aria-live]': 'kjPoliteness()',
-    '[attr.aria-atomic]': '"true"',
-  },
-})
-export class KjLiveRegion {
-  private readonly el = inject(ElementRef<HTMLElement>);
-
-  /** The ARIA live politeness setting. Defaults to `'polite'`. */
-  kjPoliteness = input<KjLivePoliteness>('polite');
-
-  /**
-   * Announces a message to screen readers by briefly clearing and re-setting text.
-   * @param message - The message to announce.
-   * @param durationMs - Optional duration in ms before clearing the announcement.
-   */
-  announce(message: string, durationMs?: number): void {
-    const el = this.el.nativeElement;
-    el.textContent = '';
-    // Brief timeout lets screen readers detect the content change.
-    setTimeout(() => {
-      el.textContent = message;
-      if (durationMs != null) {
-        setTimeout(() => { el.textContent = ''; }, durationMs);
-      }
-    }, 50);
-  }
-}

package/src/a11y/roving-tabindex.spec.ts

@@ -1,62 +0,0 @@
-import { render, fireEvent } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import {
-  KjRovingTabindex,
-  KjRovingTabindexItemDirective,
-} from './roving-tabindex';
-
-expect.extend(toHaveNoViolations);
-
-const template = `
-  <div kjRovingTabindex role="toolbar" aria-label="Formatting">
-    <button kjRovingTabindexItem>Bold</button>
-    <button kjRovingTabindexItem>Italic</button>
-    <button kjRovingTabindexItem>Underline</button>
-  </div>`;
-const imports = [KjRovingTabindex, KjRovingTabindexItemDirective];
-
-describe('KjRovingTabindex', () => {
-  it('renders all items', async () => {
-    const { getAllByRole } = await render(template, { imports });
-    expect(getAllByRole('button')).toHaveLength(3);
-  });
-
-  it('first item has tabindex 0, others -1', async () => {
-    const { getAllByRole } = await render(template, { imports });
-    const [first, second, third] = getAllByRole('button');
-    expect(first).toHaveAttribute('tabindex', '0');
-    expect(second).toHaveAttribute('tabindex', '-1');
-    expect(third).toHaveAttribute('tabindex', '-1');
-  });
-
-  it('moves focus right on ArrowRight', async () => {
-    const { getAllByRole, container } = await render(template, { imports });
-    const [first, second] = getAllByRole('button');
-    first.focus();
-    fireEvent.keyDown(container.querySelector('[kjRovingTabindex]')!, { key: 'ArrowRight' });
-    expect(second).toHaveAttribute('tabindex', '0');
-    expect(first).toHaveAttribute('tabindex', '-1');
-  });
-
-  it('moves focus left on ArrowLeft', async () => {
-    const { getAllByRole, container } = await render(template, { imports });
-    const [first, second] = getAllByRole('button');
-    second.focus();
-    fireEvent.keyDown(container.querySelector('[kjRovingTabindex]')!, { key: 'ArrowLeft' });
-    expect(first).toHaveAttribute('tabindex', '0');
-    expect(second).toHaveAttribute('tabindex', '-1');
-  });
-
-  it('wraps to last item on ArrowLeft from first', async () => {
-    const { getAllByRole, container } = await render(template, { imports });
-    const buttons = getAllByRole('button');
-    buttons[0].focus();
-    fireEvent.keyDown(container.querySelector('[kjRovingTabindex]')!, { key: 'ArrowLeft' });
-    expect(buttons[2]).toHaveAttribute('tabindex', '0');
-  });
-
-  it('passes axe accessibility audit', async () => {
-    const { container } = await render(template, { imports });
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/a11y/roving-tabindex.ts

@@ -1,104 +0,0 @@
-import {
-  Directive,
-  ElementRef,
-  InjectionToken,
-  contentChildren,
-  effect,
-  inject,
-  signal,
-} from '@angular/core';
-
-/** Context token for roving tabindex coordination. */
-export const KJ_ROVING_TABINDEX = new InjectionToken<KjRovingTabindex>(
-  'KjRovingTabindex',
-);
-
-/**
- * Marks an individual item within a `[kjRovingTabindex]` container.
- * Its `tabindex` is managed automatically by the parent directive.
- *
- * @example
- * ```html
- * <button kjRovingTabindexItem>Item</button>
- * ```
- * @category Core/Accessibility
- */
-@Directive({
-  selector: '[kjRovingTabindexItem]',
-  standalone: true,
-  host: {
-    '[attr.tabindex]': 'active() ? "0" : "-1"',
-  },
-})
-export class KjRovingTabindexItemDirective {
-  /** @internal */
-  readonly el = inject(ElementRef<HTMLElement>);
-  /** @internal */
-  readonly active = signal(false);
-}
-
-/**
- * Implements the roving tabindex pattern for composite widgets such as toolbars and tab lists.
- * Only one item has `tabindex="0"` at a time; arrow keys move focus between items.
- *
- * @example
- * ```html
- * <div kjRovingTabindex role="toolbar" aria-label="Formatting">
- *   <button kjRovingTabindexItem>Bold</button>
- *   <button kjRovingTabindexItem>Italic</button>
- * </div>
- * ```
- * @category Core/Accessibility
- */
-@Directive({
-  selector: '[kjRovingTabindex]',
-  standalone: true,
-  providers: [{ provide: KJ_ROVING_TABINDEX, useExisting: KjRovingTabindex }],
-  host: {
-    '(keydown)': 'onKeydown($event)',
-    '(focusin)': 'onFocusIn($event)',
-  },
-})
-export class KjRovingTabindex {
-  private readonly items = contentChildren(KjRovingTabindexItemDirective);
-  private readonly activeIndex = signal(0);
-
-  constructor() {
-    effect(() => {
-      const all = this.items();
-      all.forEach((item, i) => item.active.set(i === this.activeIndex()));
-    });
-  }
-
-  /** @internal — syncs activeIndex when focus moves into an item programmatically */
-  onFocusIn(event: FocusEvent): void {
-    const all = this.items();
-    const idx = all.findIndex((item) => item.el.nativeElement === event.target);
-    if (idx !== -1) {
-      this.activeIndex.set(idx);
-    }
-  }
-
-  /** @internal */
-  onKeydown(event: KeyboardEvent): void {
-    const all = this.items();
-    if (!all.length) return;
-    let next = this.activeIndex();
-
-    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
-      next = (next + 1) % all.length;
-    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
-      next = (next - 1 + all.length) % all.length;
-    } else if (event.key === 'Home') {
-      next = 0;
-    } else if (event.key === 'End') {
-      next = all.length - 1;
-    } else {
-      return;
-    }
-
-    event.preventDefault();
-    this.activeIndex.set(next);
-    all[next].el.nativeElement.focus();
-  }
-}

package/src/a11y/visually-hidden.spec.ts

@@ -1,34 +0,0 @@
-import { render } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { KjVisuallyHidden } from './visually-hidden';
-
-expect.extend(toHaveNoViolations);
-
-describe('KjVisuallyHidden', () => {
-  it('applies visually-hidden inline styles', async () => {
-    const { container } = await render(
-      `<span kjVisuallyHidden>Screen reader only</span>`,
-      { imports: [KjVisuallyHidden] },
-    );
-    const el = container.querySelector('span')!;
-    const style = el.getAttribute('style') ?? '';
-    expect(style).toContain('position');
-    expect(style).toContain('absolute');
-  });
-
-  it('content remains in the DOM for screen readers', async () => {
-    const { getByText } = await render(
-      `<span kjVisuallyHidden>Screen reader only</span>`,
-      { imports: [KjVisuallyHidden] },
-    );
-    expect(getByText('Screen reader only')).toBeInTheDocument();
-  });
-
-  it('passes axe accessibility audit', async () => {
-    const { container } = await render(
-      `<button><span kjVisuallyHidden>Close dialog</span></button>`,
-      { imports: [KjVisuallyHidden] },
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/a11y/visually-hidden.ts

@@ -1,24 +0,0 @@
-import { Directive } from '@angular/core';
-
-/**
- * Visually hides an element while keeping it accessible to screen readers.
- * Uses the standard visually-hidden CSS technique via inline styles.
- *
- * @example
- * ```html
- * <button>
- *   <kj-icon name="close" />
- *   <span kjVisuallyHidden>Close dialog</span>
- * </button>
- * ```
- * @category Core/Accessibility
- */
-@Directive({
-  selector: '[kjVisuallyHidden]',
-  standalone: true,
-  host: {
-    style:
-      'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0',
-  },
-})
-export class KjVisuallyHidden {}

package/src/accordion/accordion.context.ts

@@ -1,22 +0,0 @@
-import { InjectionToken, Signal } from '@angular/core';
-
-/** Context interface for the root accordion directive. */
-export interface KjAccordionContext {
-  readonly openIds: Signal<ReadonlySet<string>>;
-  toggle(id: string): void;
-  isOpen(id: string): boolean;
-}
-
-/** Context interface for an individual accordion item directive. */
-export interface KjAccordionItemContext {
-  readonly expanded: Signal<boolean>;
-  toggle(): void;
-  open(): void;
-  close(): void;
-}
-
-/** Injection token for the root accordion directive. */
-export const KJ_ACCORDION = new InjectionToken<KjAccordionContext>('KjAccordion');
-
-/** Injection token for an individual accordion item directive. */
-export const KJ_ACCORDION_ITEM = new InjectionToken<KjAccordionItemContext>('KjAccordionItem');

package/src/accordion/accordion.spec.ts

@@ -1,32 +0,0 @@
-import { render, fireEvent } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { KjAccordion, KjAccordionItem, KjAccordionTrigger, KjAccordionContent } from './accordion';
-
-expect.extend(toHaveNoViolations);
-const imports = [KjAccordion, KjAccordionItem, KjAccordionTrigger, KjAccordionContent];
-const template = `<div kjAccordion><div kjAccordionItem [kjItemValue]="'i1'"><button kjAccordionTrigger>Section</button><div kjAccordionContent>Content</div></div></div>`;
-
-describe('KjAccordion', () => {
-  it('content hidden by default', async () => {
-    const { container } = await render(template, { imports });
-    expect(container.querySelector('[kjAccordionContent]')).toHaveAttribute('hidden', '');
-  });
-  it('click trigger expands', async () => {
-    const { container } = await render(template, { imports });
-    fireEvent.click(container.querySelector('[kjAccordionTrigger]')!);
-    expect(container.querySelector('[kjAccordionContent]')).not.toHaveAttribute('hidden');
-  });
-  it('trigger has aria-expanded=false when closed', async () => {
-    const { container } = await render(template, { imports });
-    expect(container.querySelector('[kjAccordionTrigger]')).toHaveAttribute('aria-expanded', 'false');
-  });
-  it('trigger has aria-expanded=true when open', async () => {
-    const { container } = await render(template, { imports });
-    fireEvent.click(container.querySelector('[kjAccordionTrigger]')!);
-    expect(container.querySelector('[kjAccordionTrigger]')).toHaveAttribute('aria-expanded', 'true');
-  });
-  it('passes axe audit', async () => {
-    const { container } = await render(template, { imports });
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/accordion/accordion.ts

@@ -1,129 +0,0 @@
-import { Directive, computed, inject, input, signal } from '@angular/core';
-import { KJ_ACCORDION, KJ_ACCORDION_ITEM } from './accordion.context';
-
-/**
- * Root accordion container. Manages open/close state for accordion items.
- * Supports `'single'` (only one item open) or `'multiple'` (any number open).
- *
- * @example
- * ```html
- * <div kjAccordion [kjAccordionType]="'multiple'">
- *   <div kjAccordionItem [kjItemValue]="'item-1'">...</div>
- * </div>
- * ```
- * @category Core/Navigation
- */
-@Directive({
-  selector: '[kjAccordion]',
-  standalone: true,
-  providers: [{ provide: KJ_ACCORDION, useExisting: KjAccordion }],
-})
-export class KjAccordion {
-  /** Whether multiple items can be open simultaneously. Defaults to `'single'`. */
-  readonly kjAccordionType = input<'single' | 'multiple'>('single');
-
-  private readonly _openIds = signal<ReadonlySet<string>>(new Set());
-  /** Set of currently open item values. */
-  readonly openIds = this._openIds.asReadonly();
-
-  /** Toggles an item open or closed. In single mode, closes all others first. */
-  toggle(id: string): void {
-    this._openIds.update(ids => {
-      const next = new Set(ids);
-      if (next.has(id)) {
-        next.delete(id);
-      } else {
-        if (this.kjAccordionType() === 'single') next.clear();
-        next.add(id);
-      }
-      return next;
-    });
-  }
-
-  /** Returns whether the given item value is currently open. */
-  isOpen(id: string): boolean {
-    return this._openIds().has(id);
-  }
-}
-
-/**
- * Individual accordion item. Manages its own expanded state via the parent accordion context.
- *
- * @example
- * ```html
- * <div kjAccordionItem [kjItemValue]="'section-1'">
- *   <button kjAccordionTrigger>Section 1</button>
- *   <div kjAccordionContent>Content</div>
- * </div>
- * ```
- * @category Core/Navigation
- */
-@Directive({
-  selector: '[kjAccordionItem]',
-  standalone: true,
-  providers: [{ provide: KJ_ACCORDION_ITEM, useExisting: KjAccordionItem }],
-})
-export class KjAccordionItem {
-  private readonly accordion = inject(KJ_ACCORDION) as KjAccordion;
-
-  /** The unique value identifying this item within the accordion. */
-  readonly kjItemValue = input.required<string>();
-
-  /** Whether this item is currently expanded. */
-  readonly expanded = computed(() => this.accordion.isOpen(this.kjItemValue()));
-
-  /** Toggles this item's expanded state. */
-  toggle(): void { this.accordion.toggle(this.kjItemValue()); }
-
-  /** Opens this item. */
-  open(): void { if (!this.expanded()) this.toggle(); }
-
-  /** Closes this item. */
-  close(): void { if (this.expanded()) this.toggle(); }
-}
-
-/**
- * Trigger button for an accordion item. Controls expand/collapse.
- * Sets `aria-expanded` and `data-open` attributes based on the item's expanded state.
- *
- * @example
- * ```html
- * <button kjAccordionTrigger>Section title</button>
- * ```
- * @category Core/Navigation
- */
-@Directive({
-  selector: '[kjAccordionTrigger]',
-  standalone: true,
-  host: {
-    '[attr.aria-expanded]': 'item.expanded().toString()',
-    '[attr.data-open]': 'item.expanded() ? "" : null',
-    '(click)': 'item.toggle()',
-  },
-})
-export class KjAccordionTrigger {
-  /** The parent accordion item context. */
-  readonly item = inject(KJ_ACCORDION_ITEM);
-}
-
-/**
- * Accordion content panel. Hidden when the parent item is collapsed.
- * Uses the `hidden` attribute for accessibility-compliant visibility.
- *
- * @example
- * ```html
- * <div kjAccordionContent>Panel content</div>
- * ```
- * @category Core/Navigation
- */
-@Directive({
-  selector: '[kjAccordionContent]',
-  standalone: true,
-  host: {
-    '[attr.hidden]': '!item.expanded() ? "" : null',
-  },
-})
-export class KjAccordionContent {
-  /** The parent accordion item context. */
-  readonly item = inject(KJ_ACCORDION_ITEM);
-}

package/src/accordion/index.ts

@@ -1,2 +0,0 @@
-export { KjAccordion, KjAccordionItem, KjAccordionTrigger, KjAccordionContent } from './accordion';
-export { KJ_ACCORDION, KJ_ACCORDION_ITEM } from './accordion.context';

package/src/avatar/avatar.spec.ts

@@ -1,18 +0,0 @@
-import { render } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { KjAvatar, KjAvatarImage, KjAvatarFallback } from './avatar';
-
-expect.extend(toHaveNoViolations);
-
-const imports = [KjAvatar, KjAvatarImage, KjAvatarFallback];
-
-describe('KjAvatar', () => {
-  it('renders container', async () => {
-    const { container } = await render(`<span kjAvatar><img kjAvatarImage src="" alt="JD" /><span kjAvatarFallback>JD</span></span>`, { imports });
-    expect(container.querySelector('[kjAvatar]')).toBeInTheDocument();
-  });
-  it('passes axe audit', async () => {
-    const { container } = await render(`<span kjAvatar><img kjAvatarImage src="/p.jpg" alt="Jane Doe" /><span kjAvatarFallback aria-hidden="true">JD</span></span>`, { imports });
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/avatar/avatar.ts

@@ -1,26 +0,0 @@
-import { Directive, InjectionToken, inject, signal } from '@angular/core';
-
-export interface KjAvatarContext { imageLoaded: ReturnType<typeof signal<boolean>>; }
-export const KJ_AVATAR = new InjectionToken<KjAvatarContext>('KjAvatar');
-
-/**
- * Container for avatar. Tracks image load state.
- * @example `<span kjAvatar><img kjAvatarImage src="..." alt="..." /><span kjAvatarFallback>JD</span></span>`
- * @category Core/Display
- */
-@Directive({ selector: '[kjAvatar]', standalone: true, providers: [{ provide: KJ_AVATAR, useExisting: KjAvatar }] })
-export class KjAvatar implements KjAvatarContext { readonly imageLoaded = signal(false); }
-
-/**
- * Image element within a `[kjAvatar]` container.
- * @category Core/Display
- */
-@Directive({ selector: '[kjAvatarImage]', standalone: true, host: { '(load)': 'ctx.imageLoaded.set(true)', '(error)': 'ctx.imageLoaded.set(false)', '[attr.data-loaded]': 'ctx.imageLoaded() ? "" : null' } })
-export class KjAvatarImage { readonly ctx = inject(KJ_AVATAR); }
-
-/**
- * Fallback shown when image is unavailable.
- * @category Core/Display
- */
-@Directive({ selector: '[kjAvatarFallback]', standalone: true, host: { '[attr.data-visible]': '!ctx.imageLoaded() ? "" : null' } })
-export class KjAvatarFallback { readonly ctx = inject(KJ_AVATAR); }

package/src/avatar/index.ts

@@ -1 +0,0 @@
-export { KjAvatar, KjAvatarImage, KjAvatarFallback, KJ_AVATAR } from './avatar';

package/src/badge/badge.spec.ts

@@ -1,20 +0,0 @@
-import { render } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { KjBadge } from './badge';
-
-expect.extend(toHaveNoViolations);
-
-describe('KjBadge', () => {
-  it('sets data-variant attribute', async () => {
-    const { container } = await render(`<span kjBadge [kjBadgeVariant]="'destructive'">New</span>`, { imports: [KjBadge] });
-    expect(container.querySelector('span')).toHaveAttribute('data-variant', 'destructive');
-  });
-  it('defaults to default variant', async () => {
-    const { container } = await render(`<span kjBadge>Beta</span>`, { imports: [KjBadge] });
-    expect(container.querySelector('span')).toHaveAttribute('data-variant', 'default');
-  });
-  it('passes axe audit', async () => {
-    const { container } = await render(`<span kjBadge>Beta</span>`, { imports: [KjBadge] });
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/badge/badge.ts

@@ -1,14 +0,0 @@
-import { Directive, input } from '@angular/core';
-
-export type KjBadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline';
-
-/**
- * Marks an element as a badge via data attributes.
- * @example `<span kjBadge [kjBadgeVariant]="'destructive'">Critical</span>`
- * @category Core/Display
- */
-@Directive({ selector: '[kjBadge]', standalone: true, host: { '[attr.data-variant]': 'kjBadgeVariant()' } })
-export class KjBadge {
-  /** The visual variant of the badge. Defaults to `'default'`. */
-  kjBadgeVariant = input<KjBadgeVariant>('default');
-}

package/src/badge/index.ts

@@ -1 +0,0 @@
-export { KjBadge, type KjBadgeVariant } from './badge';

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