@kouji-ui/core 0.0.2

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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,129 @@
+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

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

package/src/avatar/avatar.spec.ts

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,26 @@
+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

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

package/src/badge/badge.spec.ts

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,14 @@
+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

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

package/src/button/button.example.ts

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,32 @@
+import { render, fireEvent } 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

@@ -0,0 +1,44 @@
+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

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

package/src/chart/chart.spec.ts

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,48 @@
+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

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