@kouji-ui/core 0.0.2

package/src/public-api.ts

@@ -0,0 +1,35 @@
+// Public API for @kouji-ui/core
+
+export const KJ_CORE_VERSION = '0.0.1';
+
+// ── Primitives ──────────────────────────────────────────────
+export * from './primitives/index';
+
+// ── Accessibility utilities ──────────────────────────────────
+export * from './a11y/index';
+
+// ── Foundation components ────────────────────────────────────
+export * from './button/index';
+export * from './input/index';
+export * from './checkbox/index';
+export * from './radio/index';
+export * from './toggle/index';
+export * from './badge/index';
+export * from './avatar/index';
+
+// ── Overlay components ───────────────────────────────────────
+export * from './dialog/index';
+export * from './tooltip/index';
+export * from './popover/index';
+export * from './menu/index';
+export * from './toast/index';
+
+// ── Data components ──────────────────────────────────────────
+export * from './table/index';
+export * from './form/index';
+export * from './tabs/index';
+export * from './accordion/index';
+export * from './select/index';
+
+// ── Charts ───────────────────────────────────────────────────
+export * from './chart/index';

package/src/radio/index.ts

@@ -0,0 +1,2 @@
+export { KjRadioGroup, KjRadio } from './radio';
+export { KJ_RADIO_GROUP, type KjRadioContext } from './radio.context';

package/src/radio/radio.context.ts

@@ -0,0 +1,3 @@
+import { InjectionToken, Signal } from '@angular/core';
+export interface KjRadioContext { value: Signal<unknown>; select: (value: unknown) => void; }
+export const KJ_RADIO_GROUP = new InjectionToken<KjRadioContext>('KjRadioGroup');

package/src/radio/radio.spec.ts

@@ -0,0 +1,36 @@
+import { render, fireEvent } from '@testing-library/angular';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { KjRadioGroup, KjRadio } from './radio';
+
+expect.extend(toHaveNoViolations);
+
+const template = `<div kjRadioGroup [(kjValue)]="selected" aria-label="Opts"><div kjRadio [kjRadioValue]="'a'" tabindex="0">A</div><div kjRadio [kjRadioValue]="'b'" tabindex="-1">B</div></div>`;
+const imports = [KjRadioGroup, KjRadio];
+
+describe('KjRadioGroup', () => {
+  it('has radiogroup role', async () => {
+    const { getByRole } = await render(template, { imports, componentProperties: { selected: 'a' } });
+    expect(getByRole('radiogroup')).toBeInTheDocument();
+  });
+
+  it('radio items have role=radio', async () => {
+    const { getAllByRole } = await render(template, { imports, componentProperties: { selected: 'a' } });
+    expect(getAllByRole('radio')).toHaveLength(2);
+  });
+
+  it('selected radio has aria-checked=true', async () => {
+    const { getAllByRole } = await render(template, { imports, componentProperties: { selected: 'a' } });
+    expect(getAllByRole('radio')[0]).toHaveAttribute('aria-checked', 'true');
+  });
+
+  it('clicking radio selects it', async () => {
+    const { getAllByRole } = await render(template, { imports, componentProperties: { selected: 'a' } });
+    fireEvent.click(getAllByRole('radio')[1]);
+    expect(getAllByRole('radio')[1]).toHaveAttribute('aria-checked', 'true');
+  });
+
+  it('passes axe audit', async () => {
+    const { container } = await render(template, { imports, componentProperties: { selected: 'a' } });
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});

package/src/radio/radio.ts

@@ -0,0 +1,55 @@
+import { Directive, computed, inject, input, model } from '@angular/core';
+import { KJ_RADIO_GROUP, KjRadioContext } from './radio.context';
+import { KjDisabled, KjFocusRing, KjFormControl } from '../primitives';
+
+/**
+ * Container for a group of radio buttons. Manages the selected value.
+ * @example
+ * ```html
+ * <div kjRadioGroup [(kjValue)]="size" aria-label="Size">
+ *   <div kjRadio [kjRadioValue]="'s'" tabindex="0">Small</div>
+ * </div>
+ * ```
+ * @category Core/Inputs
+ */
+@Directive({
+  selector: '[kjRadioGroup]', standalone: true,
+  providers: [{ provide: KJ_RADIO_GROUP, useExisting: KjRadioGroup }],
+  host: { role: 'radiogroup' },
+})
+export class KjRadioGroup implements KjRadioContext {
+  kjValue = model<unknown>(undefined);
+  readonly value = this.kjValue.asReadonly();
+  select(val: unknown): void { this.kjValue.set(val); }
+}
+
+/**
+ * Individual radio button within a `[kjRadioGroup]`. Includes CVA for forms integration.
+ * @example `<div kjRadio [kjRadioValue]="'a'" tabindex="0">Option A</div>`
+ * @category Core/Inputs
+ */
+@Directive({
+  selector: '[kjRadio]', standalone: true,
+  hostDirectives: [
+    { directive: KjDisabled, inputs: ['kjDisabled'] },
+    KjFocusRing,
+    KjFormControl,
+  ],
+  host: {
+    role: 'radio',
+    '[attr.aria-checked]': 'checked().toString()',
+    '[attr.data-checked]': 'checked() ? "" : null',
+    '(click)': 'select()',
+    '(keydown.space)': 'onSpace($event)',
+    '(keydown.enter)': 'select()',
+    '(blur)': 'formCtrl.notifyTouched()',
+  },
+})
+export class KjRadio {
+  private readonly group = inject(KJ_RADIO_GROUP);
+  readonly formCtrl = inject(KjFormControl);
+  kjRadioValue = input.required<unknown>();
+  readonly checked = computed(() => this.group.value() === this.kjRadioValue());
+  select(): void { this.group.select(this.kjRadioValue()); this.formCtrl.notifyChange(this.kjRadioValue()); }
+  onSpace(e: Event): void { e.preventDefault(); this.select(); }
+}

package/src/select/index.ts

@@ -0,0 +1,2 @@
+export { KjSelect, KjSelectTrigger, KjSelectContent, KjOption } from './select';
+export { KJ_SELECT, type KjSelectContext } from './select.context';

package/src/select/select.context.ts

@@ -0,0 +1,3 @@
+import { InjectionToken, Signal } from '@angular/core';
+export interface KjSelectContext { value: Signal<unknown>; open: Signal<boolean>; select: (value: unknown) => void; toggle: () => void; hide: () => void; }
+export const KJ_SELECT = new InjectionToken<KjSelectContext>('KjSelect');

package/src/select/select.spec.ts

@@ -0,0 +1,145 @@
+import { render, fireEvent } from '@testing-library/angular';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { KjSelect, KjSelectTrigger, KjSelectContent, KjOption } from './select';
+
+expect.extend(toHaveNoViolations);
+
+const imports = [KjSelect, KjSelectTrigger, KjSelectContent, KjOption];
+const template = `
+  <div kjSelect [(kjSelectValue)]="val">
+    <button kjSelectTrigger aria-haspopup="listbox">Select fruit</button>
+    <div kjSelectContent>
+      <div kjOption [kjOptionValue]="'apple'">Apple</div>
+      <div kjOption [kjOptionValue]="'banana'">Banana</div>
+      <div kjOption [kjOptionValue]="'cherry'">Cherry</div>
+    </div>
+  </div>`;
+
+describe('KjSelect', () => {
+  it('listbox hidden by default', async () => {
+    const { container } = await render(template, { imports, componentProperties: { val: '' } });
+    expect(container.querySelector('[kjSelectContent]')).toHaveAttribute('hidden', '');
+  });
+
+  it('trigger opens listbox', async () => {
+    const { container } = await render(template, { imports, componentProperties: { val: '' } });
+    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
+    expect(container.querySelector('[kjSelectContent]')).not.toHaveAttribute('hidden');
+  });
+
+  it('trigger sets aria-expanded to false by default', async () => {
+    const { container } = await render(template, { imports, componentProperties: { val: '' } });
+    expect(container.querySelector('[kjSelectTrigger]')).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('trigger sets aria-expanded to true when open', async () => {
+    const { container } = await render(template, { imports, componentProperties: { val: '' } });
+    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
+    expect(container.querySelector('[kjSelectTrigger]')).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('clicking option selects and closes', async () => {
+    const { container } = await render(template, { imports, componentProperties: { val: '' } });
+    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
+    fireEvent.click(container.querySelector('[kjOption]')!);
+    expect(container.querySelector('[kjSelectContent]')).toHaveAttribute('hidden', '');
+  });
+
+  it('selected option has aria-selected="true"', async () => {
+    const { container } = await render(template, { imports, componentProperties: { val: 'apple' } });
+    const options = container.querySelectorAll('[kjOption]');
+    expect(options[0]).toHaveAttribute('aria-selected', 'true');
+    expect(options[1]).toHaveAttribute('aria-selected', 'false');
+  });
+
+  it('listbox has role="listbox"', async () => {
+    const { container } = await render(template, { imports, componentProperties: { val: '' } });
+    expect(container.querySelector('[kjSelectContent]')).toHaveAttribute('role', 'listbox');
+  });
+
+  it('options have role="option"', async () => {
+    const { container } = await render(template, { imports, componentProperties: { val: '' } });
+    const options = container.querySelectorAll('[kjOption]');
+    options.forEach(opt => expect(opt).toHaveAttribute('role', 'option'));
+  });
+
+  it('ArrowDown moves focus to next option', async () => {
+    const { container } = await render(template, { imports, componentProperties: { val: '' } });
+    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
+    const content = container.querySelector('[kjSelectContent]')!;
+    fireEvent.keyDown(content, { key: 'ArrowDown' });
+    const options = container.querySelectorAll('[kjOption]');
+    expect(document.activeElement).toBe(options[0]);
+  });
+
+  it('ArrowDown then ArrowDown moves to second option', async () => {
+    const { container } = await render(template, { imports, componentProperties: { val: '' } });
+    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
+    const content = container.querySelector('[kjSelectContent]')!;
+    fireEvent.keyDown(content, { key: 'ArrowDown' });
+    fireEvent.keyDown(content, { key: 'ArrowDown' });
+    const options = container.querySelectorAll('[kjOption]');
+    expect(document.activeElement).toBe(options[1]);
+  });
+
+  it('Home key moves focus to first option', async () => {
+    const { container } = await render(template, { imports, componentProperties: { val: '' } });
+    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
+    const content = container.querySelector('[kjSelectContent]')!;
+    // Move down first
+    fireEvent.keyDown(content, { key: 'ArrowDown' });
+    fireEvent.keyDown(content, { key: 'ArrowDown' });
+    // Then Home
+    fireEvent.keyDown(content, { key: 'Home' });
+    const options = container.querySelectorAll('[kjOption]');
+    expect(document.activeElement).toBe(options[0]);
+  });
+
+  it('End key moves focus to last option', async () => {
+    const { container } = await render(template, { imports, componentProperties: { val: '' } });
+    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
+    const content = container.querySelector('[kjSelectContent]')!;
+    fireEvent.keyDown(content, { key: 'End' });
+    const options = container.querySelectorAll('[kjOption]');
+    expect(document.activeElement).toBe(options[2]);
+  });
+
+  it('Enter selects focused option', async () => {
+    const { container } = await render(template, { imports, componentProperties: { val: '' } });
+    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
+    const content = container.querySelector('[kjSelectContent]')!;
+    fireEvent.keyDown(content, { key: 'ArrowDown' });
+    fireEvent.keyDown(content, { key: 'Enter' });
+    expect(container.querySelector('[kjSelectContent]')).toHaveAttribute('hidden', '');
+  });
+
+  it('Space selects focused option', async () => {
+    const { container } = await render(template, { imports, componentProperties: { val: '' } });
+    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
+    const content = container.querySelector('[kjSelectContent]')!;
+    fireEvent.keyDown(content, { key: 'ArrowDown' });
+    fireEvent.keyDown(content, { key: ' ' });
+    expect(container.querySelector('[kjSelectContent]')).toHaveAttribute('hidden', '');
+  });
+
+  it('type-ahead jumps to matching option', async () => {
+    const { container } = await render(template, { imports, componentProperties: { val: '' } });
+    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
+    const content = container.querySelector('[kjSelectContent]')!;
+    fireEvent.keyDown(content, { key: 'b' });
+    const options = container.querySelectorAll('[kjOption]');
+    expect(document.activeElement).toBe(options[1]);
+  });
+
+  it('Escape closes the listbox', async () => {
+    const { container } = await render(template, { imports, componentProperties: { val: '' } });
+    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(container.querySelector('[kjSelectContent]')).toHaveAttribute('hidden', '');
+  });
+
+  it('passes axe audit', async () => {
+    const { container } = await render(template, { imports, componentProperties: { val: '' } });
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});

package/src/select/select.ts

@@ -0,0 +1,250 @@
+import {
+  afterNextRender,
+  computed,
+  Directive,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  model,
+  signal,
+} from '@angular/core';
+import { KjDisabled, KjFocusRing } from '../primitives';
+import { KJ_SELECT } from './select.context';
+
+/**
+ * Root select container. Manages open/close state via `kjSelectValue` model.
+ *
+ * @example
+ * ```html
+ * <div kjSelect [(kjSelectValue)]="selected">
+ *   <button kjSelectTrigger aria-haspopup="listbox">Choose fruit</button>
+ *   <div kjSelectContent>
+ *     <div kjOption [kjOptionValue]="'apple'">Apple</div>
+ *   </div>
+ * </div>
+ * ```
+ * @category Core/Inputs
+ */
+@Directive({
+  selector: '[kjSelect]',
+  standalone: true,
+  providers: [{ provide: KJ_SELECT, useExisting: KjSelect }],
+})
+export class KjSelect {
+  /** The currently selected value. Supports two-way binding. */
+  readonly kjSelectValue = model<unknown>(undefined);
+
+  /** Read-only signal for the current value. */
+  readonly value = this.kjSelectValue.asReadonly();
+
+  private readonly _open = signal(false);
+
+  /** Whether the listbox is currently open. */
+  readonly open = this._open.asReadonly();
+
+  /**
+   * Selects a value and closes the listbox.
+   * @param val The value to select.
+   */
+  select(val: unknown): void {
+    this.kjSelectValue.set(val);
+    this._open.set(false);
+  }
+
+  /** Toggles the open state of the listbox. */
+  toggle(): void {
+    this._open.update(v => !v);
+  }
+
+  /** Closes the listbox. */
+  hide(): void {
+    this._open.set(false);
+  }
+}
+
+/**
+ * Trigger button that opens/closes the select listbox.
+ * Automatically binds `aria-expanded` to reflect open state.
+ *
+ * @example
+ * ```html
+ * <button kjSelectTrigger aria-haspopup="listbox">Choose fruit</button>
+ * ```
+ * @category Core/Inputs
+ */
+@Directive({
+  selector: '[kjSelectTrigger]',
+  standalone: true,
+  hostDirectives: [KjFocusRing],
+  host: {
+    '[attr.aria-expanded]': 'ctx.open().toString()',
+    '(click)': '$event.stopPropagation(); ctx.toggle()',
+  },
+})
+export class KjSelectTrigger {
+  /** @internal */
+  readonly ctx = inject(KJ_SELECT);
+}
+
+/**
+ * Listbox container. Provides keyboard navigation (Arrow keys, Home, End,
+ * Enter, Space, type-ahead) and ARIA listbox semantics. Hidden when closed.
+ *
+ * @example
+ * ```html
+ * <div kjSelectContent>
+ *   <div kjOption [kjOptionValue]="'apple'">Apple</div>
+ * </div>
+ * ```
+ * @category Core/Inputs
+ */
+@Directive({
+  selector: '[kjSelectContent]',
+  standalone: true,
+  host: {
+    'role': 'listbox',
+    '[attr.hidden]': '!ctx.open() ? "" : null',
+    '[attr.aria-activedescendant]': 'activeId()',
+    '(keydown)': 'onKeydown($event)',
+    '(document:keydown.escape)': 'ctx.hide()',
+    '(document:click)': 'onDocClick()',
+    '(click)': '$event.stopPropagation()',
+  },
+})
+export class KjSelectContent {
+  private readonly el = inject(ElementRef<HTMLElement>);
+  /** @internal */
+  readonly ctx = inject(KJ_SELECT);
+
+  private readonly _activeIndex = signal(-1);
+
+  /** @internal */
+  readonly activeId = computed(() => {
+    const items = this.getOptions();
+    const idx = this._activeIndex();
+    return items[idx]?.id ?? null;
+  });
+
+  /** @internal */
+  onDocClick(): void {
+    if (this.ctx.open()) this.ctx.hide();
+  }
+
+  /** @internal */
+  onKeydown(e: KeyboardEvent): void {
+    const items = this.getOptions();
+    if (!items.length) return;
+    let idx = this._activeIndex();
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        idx = Math.min(idx + 1, items.length - 1);
+        this._activeIndex.set(idx);
+        items[idx]?.el.focus();
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        idx = Math.max(idx - 1, 0);
+        this._activeIndex.set(idx);
+        items[idx]?.el.focus();
+        break;
+      case 'Home':
+        e.preventDefault();
+        this._activeIndex.set(0);
+        items[0]?.el.focus();
+        break;
+      case 'End':
+        e.preventDefault();
+        this._activeIndex.set(items.length - 1);
+        items[items.length - 1]?.el.focus();
+        break;
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        if (idx >= 0) {
+          const val = items[idx]?.value;
+          if (val !== undefined) this.ctx.select(val);
+        }
+        break;
+      default: {
+        const char = e.key.length === 1 ? e.key.toLowerCase() : null;
+        if (char) {
+          const match = items.findIndex(item =>
+            item.el.textContent?.trim().toLowerCase().startsWith(char)
+          );
+          if (match >= 0) {
+            this._activeIndex.set(match);
+            items[match].el.focus();
+          }
+        }
+      }
+    }
+  }
+
+  private getOptions(): Array<{ el: HTMLElement; value: unknown; id: string }> {
+    return (Array.from(
+      this.el.nativeElement.querySelectorAll('[kjOption]')
+    ) as HTMLElement[]).map((el, i) => ({
+      el,
+      value: (el as any).__kjOptionValue,
+      id: el.id || `kj-option-${i}`,
+    }));
+  }
+}
+
+/**
+ * Individual option inside a `kjSelectContent`. Clicking or pressing Enter/Space
+ * calls `select()` on the parent context.
+ *
+ * @example
+ * ```html
+ * <div kjOption [kjOptionValue]="'apple'">Apple</div>
+ * ```
+ * @category Core/Inputs
+ */
+@Directive({
+  selector: '[kjOption]',
+  standalone: true,
+  hostDirectives: [
+    { directive: KjDisabled, inputs: ['kjDisabled'] },
+  ],
+  host: {
+    'role': 'option',
+    '[attr.tabindex]': '"0"',
+    '[attr.aria-selected]': 'selected().toString()',
+    '[attr.aria-disabled]': 'disabled() ? "true" : null',
+    '(click)': 'handleClick()',
+    '(keydown.enter)': '$event.preventDefault(); handleClick()',
+    '(keydown.space)': '$event.preventDefault(); handleClick()',
+  },
+})
+export class KjOption {
+  private readonly ctx = inject(KJ_SELECT);
+  private readonly el = inject(ElementRef<HTMLElement>);
+  /** @internal */
+  readonly disabled = inject(KjDisabled).disabled;
+
+  /** The value this option represents. */
+  readonly kjOptionValue = input.required<unknown>();
+
+  /** @internal */
+  readonly selected = computed(() => this.ctx.value() === this.kjOptionValue());
+
+  constructor() {
+    effect(() => {
+      (this.el.nativeElement as any).__kjOptionValue = this.kjOptionValue();
+    });
+    afterNextRender(() => {
+      if (!this.el.nativeElement.id) {
+        this.el.nativeElement.id = `kj-option-${Math.random().toString(36).slice(2, 7)}`;
+      }
+    });
+  }
+
+  /** @internal */
+  handleClick(): void {
+    if (!this.disabled()) this.ctx.select(this.kjOptionValue());
+  }
+}

package/src/styles/docs-themes.css

@@ -0,0 +1,82 @@
+/* ─────────────────────────────────────────────────────────────
+   kouji-ui docs example themes
+   Three theme layers: kj.tokens (defaults) + kj.theme (overrides)
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.tokens, kj.theme;
+
+/* ── Default (dark) tokens — applied to :root and .kj-theme-default ── */
+@layer kj.tokens {
+  :root,
+  .kj-theme-default {
+    --kj-bg: #0c0c0c;
+    --kj-surface: #1a1a1a;
+    --kj-text: #f0ede6;
+    --kj-text-muted: #888;
+    --kj-border: #333;
+    --kj-accent: #b8f500;
+    --kj-accent-on: #0c0c0c;
+    --kj-destructive: #ef4444;
+    --kj-radius-sm: 0px;
+    --kj-radius-md: 0px;
+    --kj-radius-lg: 0px;
+    --kj-shadow-sm: none;
+    --kj-shadow-md: none;
+    --kj-shadow-hard: none;
+    --kj-font: 'JetBrains Mono', monospace;
+    --kj-btn-border: none;
+    --kj-btn-outline-border: 1px solid rgba(240, 237, 230, 0.6);
+    --kj-btn-ghost-color: rgba(240, 237, 230, 0.55);
+    --kj-backdrop: rgba(0, 0, 0, 0.75);
+    --kj-transition: opacity 0.15s;
+  }
+}
+
+/* ── Theme overrides ── */
+@layer kj.theme {
+  .kj-theme-retro {
+    --kj-bg: #fef9c3;
+    --kj-surface: #fef9c3;
+    --kj-text: #000;
+    --kj-text-muted: #444;
+    --kj-border: #000;
+    --kj-accent: #16a34a;
+    --kj-accent-on: #fff;
+    --kj-destructive: #dc2626;
+    --kj-radius-sm: 0px;
+    --kj-radius-md: 0px;
+    --kj-radius-lg: 0px;
+    --kj-shadow-sm: 2px 2px 0 #000;
+    --kj-shadow-md: 4px 4px 0 #000;
+    --kj-shadow-hard: 6px 6px 0 #000;
+    --kj-font: 'Courier New', monospace;
+    --kj-btn-border: 2px solid #000;
+    --kj-btn-outline-border: 2px solid #000;
+    --kj-btn-ghost-color: #555;
+    --kj-backdrop: rgba(0, 0, 0, 0.6);
+    --kj-transition: transform 0.08s, box-shadow 0.08s;
+  }
+
+  .kj-theme-finance {
+    --kj-bg: #f9fafb;
+    --kj-surface: #fff;
+    --kj-text: #111827;
+    --kj-text-muted: #6b7280;
+    --kj-border: #e5e7eb;
+    --kj-accent: #3b82f6;
+    --kj-accent-on: #fff;
+    --kj-destructive: #ef4444;
+    --kj-radius-sm: 4px;
+    --kj-radius-md: 6px;
+    --kj-radius-lg: 12px;
+    --kj-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.1);
+    --kj-shadow-md: 0 8px 30px rgba(0, 0, 0, 0.1);
+    --kj-shadow-hard: 0 20px 60px rgba(0, 0, 0, 0.12);
+    --kj-font: system-ui, -apple-system, sans-serif;
+    --kj-btn-border: 1px solid transparent;
+    --kj-btn-outline-border: 1px solid #6b7280;
+    --kj-btn-ghost-color: #374151;
+    --kj-backdrop: rgba(0, 0, 0, 0.4);
+    --kj-transition: background 0.12s;
+  }
+}

package/src/table/index.ts

@@ -0,0 +1 @@
+export { KjTable, KjTableHeader, KJ_TABLE, type KjSortDirection } from './table';