@kouji-ui/core 0.1.1 → 0.1.3

package/src/speed-dial/speed-dial.spec.ts

@@ -1,143 +0,0 @@
-import { render, fireEvent } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { KjButton } from '../button/button';
-import {
-  KjSpeedDial,
-  KjSpeedDialAction,
-  KjSpeedDialActions,
-  KjSpeedDialTrigger,
-} from './index';
-
-expect.extend(toHaveNoViolations);
-
-const imports = [
-  KjButton,
-  KjSpeedDial,
-  KjSpeedDialTrigger,
-  KjSpeedDialActions,
-  KjSpeedDialAction,
-];
-
-const TEMPLATE = `
-  <div kjSpeedDial>
-    <button kjButton kjSpeedDialTrigger aria-label="Open">+</button>
-    <div kjSpeedDialActions>
-      <button kjButton kjSpeedDialAction aria-label="Edit">E</button>
-      <button kjButton kjSpeedDialAction aria-label="Share">S</button>
-    </div>
-  </div>
-`;
-
-describe('KjSpeedDial', () => {
-  it('starts collapsed and reflects ARIA on the trigger', async () => {
-    const { getByLabelText, container } = await render(TEMPLATE, { imports });
-    const trigger = getByLabelText('Open');
-    expect(trigger).toHaveAttribute('aria-haspopup', 'menu');
-    expect(trigger).toHaveAttribute('aria-expanded', 'false');
-    expect(trigger.getAttribute('aria-controls')).toMatch(/^kj-speed-dial-\d+$/);
-
-    const actions = container.querySelector('[kjSpeedDialActions]') as HTMLElement;
-    expect(actions).toHaveAttribute('aria-hidden', 'true');
-    expect(actions.id).toMatch(/^kj-speed-dial-\d+$/);
-    expect(trigger.getAttribute('aria-controls')).toBe(actions.id);
-  });
-
-  it('reflects kjDirection as data-direction on root and actions container', async () => {
-    const { container } = await render(
-      `
-        <div kjSpeedDial kjDirection="left">
-          <button kjButton kjSpeedDialTrigger aria-label="Open">+</button>
-          <div kjSpeedDialActions>
-            <button kjButton kjSpeedDialAction aria-label="A">A</button>
-          </div>
-        </div>
-      `,
-      { imports },
-    );
-
-    const root = container.querySelector('[kjSpeedDial]') as HTMLElement;
-    const actions = container.querySelector('[kjSpeedDialActions]') as HTMLElement;
-    expect(root).toHaveAttribute('data-direction', 'left');
-    expect(actions).toHaveAttribute('data-direction', 'left');
-  });
-
-  it('toggles open on trigger click and expands the cluster', async () => {
-    const { getByLabelText, container } = await render(TEMPLATE, { imports });
-    const trigger = getByLabelText('Open');
-    const actions = container.querySelector('[kjSpeedDialActions]') as HTMLElement;
-    const root = container.querySelector('[kjSpeedDial]') as HTMLElement;
-
-    fireEvent.click(trigger);
-    expect(trigger).toHaveAttribute('aria-expanded', 'true');
-    expect(trigger).toHaveAttribute('data-state', 'open');
-    expect(actions).not.toHaveAttribute('aria-hidden');
-    expect(actions).toHaveAttribute('data-expanded', '');
-    expect(root).toHaveAttribute('data-expanded', '');
-
-    fireEvent.click(trigger);
-    expect(trigger).toHaveAttribute('aria-expanded', 'false');
-    expect(actions).toHaveAttribute('aria-hidden', 'true');
-  });
-
-  it('closes when an action is activated (default kjCloseOnActivate=true)', async () => {
-    const { getByLabelText } = await render(TEMPLATE, { imports });
-    fireEvent.click(getByLabelText('Open'));
-    expect(getByLabelText('Open')).toHaveAttribute('aria-expanded', 'true');
-
-    fireEvent.click(getByLabelText('Edit'));
-    expect(getByLabelText('Open')).toHaveAttribute('aria-expanded', 'false');
-  });
-
-  it('keeps the dial open when kjCloseOnActivate=false', async () => {
-    const { getByLabelText } = await render(
-      `
-        <div kjSpeedDial>
-          <button kjButton kjSpeedDialTrigger aria-label="Open">+</button>
-          <div kjSpeedDialActions>
-            <button kjButton kjSpeedDialAction [kjCloseOnActivate]="false" aria-label="Stay">S</button>
-          </div>
-        </div>
-      `,
-      { imports },
-    );
-    fireEvent.click(getByLabelText('Open'));
-    fireEvent.click(getByLabelText('Stay'));
-    expect(getByLabelText('Open')).toHaveAttribute('aria-expanded', 'true');
-  });
-
-  it('closes when Escape is pressed on the trigger', async () => {
-    const { getByLabelText } = await render(TEMPLATE, { imports });
-    fireEvent.click(getByLabelText('Open'));
-    expect(getByLabelText('Open')).toHaveAttribute('aria-expanded', 'true');
-
-    fireEvent.keyDown(getByLabelText('Open'), { key: 'Escape' });
-    expect(getByLabelText('Open')).toHaveAttribute('aria-expanded', 'false');
-  });
-
-  it('does not open when kjDisabled', async () => {
-    const { getByLabelText } = await render(
-      `
-        <div kjSpeedDial [kjDisabled]="true">
-          <button kjButton kjSpeedDialTrigger aria-label="Open">+</button>
-          <div kjSpeedDialActions>
-            <button kjButton kjSpeedDialAction aria-label="A">A</button>
-          </div>
-        </div>
-      `,
-      { imports },
-    );
-    fireEvent.click(getByLabelText('Open'));
-    expect(getByLabelText('Open')).toHaveAttribute('aria-expanded', 'false');
-  });
-
-  it('passes axe audit when collapsed', async () => {
-    const { container } = await render(TEMPLATE, { imports });
-    expect(await axe(container)).toHaveNoViolations();
-  });
-
-  it('passes axe audit when expanded', async () => {
-    const { getByLabelText, container } = await render(TEMPLATE, { imports });
-    fireEvent.click(getByLabelText('Open'));
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/speed-dial/speed-dial.ts

@@ -1,127 +0,0 @@
-import {
-  Directive,
-  booleanAttribute,
-  computed,
-  input,
-  linkedSignal,
-  output,
-  signal,
-} from '@angular/core';
-import {
-  KJ_SPEED_DIAL,
-  type KjSpeedDialContext,
-  type KjSpeedDialDirection,
-  nextKjSpeedDialId,
-} from './speed-dial.context';
-
-/**
- * Root container for a Speed Dial / FAB.
- *
- * A Speed Dial is a viewport-anchored floating action button that, when
- * activated, fans out a cluster of secondary action buttons. This directive
- * owns the open/closed state and exposes it to descendant trigger, container
- * and action directives via the {@link KJ_SPEED_DIAL} injection token.
- *
- * Reflects `data-direction`, `data-expanded` and `data-disabled` host
- * attributes for the styled wrapper to drive its layout and animation.
- *
- * @example
- * ```html
- * <div kjSpeedDial kjDirection="up">
- *   <button kjButton kjSpeedDialTrigger aria-label="Open menu">+</button>
- *   <div kjSpeedDialActions>
- *     <button kjButton kjSpeedDialAction aria-label="Edit">E</button>
- *     <button kjButton kjSpeedDialAction aria-label="Share">S</button>
- *   </div>
- * </div>
- * ```
- *
- * @doc-category Core/Actions
- * @doc
- * @doc-name speed-dial
- * @doc-description Unstyled speed dial root that owns open state and fan-out direction for trigger and action children.
- * @doc-is-main
- */
-@Directive({
-  selector: '[kjSpeedDial]',
-  standalone: true,
-  exportAs: 'kjSpeedDial',
-  providers: [{ provide: KJ_SPEED_DIAL, useExisting: KjSpeedDial }],
-  host: {
-    '[attr.data-direction]': 'kjDirection()',
-    '[attr.data-expanded]': 'expanded() ? "" : null',
-    '[attr.data-disabled]': 'kjDisabled() ? "" : null',
-    '(mouseenter)': 'onPointerEnter()',
-    '(mouseleave)': 'onPointerLeave()',
-  },
-})
-export class KjSpeedDial implements KjSpeedDialContext {
-  /** Direction the action cluster fans out from the trigger. */
-  readonly kjDirection = input<KjSpeedDialDirection>('up');
-
-  /** Two-way bindable expanded state. */
-  // eslint-disable-next-line @angular-eslint/no-input-rename -- alias keeps the public `kjOpen` name distinct from this internal linkedSignal-backed property
-  readonly kjOpenInput = input<boolean>(false, { alias: 'kjOpen' });
-  readonly kjOpen = linkedSignal(this.kjOpenInput);
-
-  /** Disables opening; if open, closes. */
-  readonly kjDisabled = input(false, { transform: booleanAttribute });
-
-  /** Open on hover (desktop only — coarse pointers always click-to-open). */
-  readonly kjOpenOnHover = input(false, { transform: booleanAttribute });
-
-  /** Convenience output paired with the `kjOpen` input, deduplicated against internal writes. */
-  readonly kjOpenChange = output<boolean>();
-
-  // ── KjSpeedDialContext fields ────────────────────────────────────────
-
-  readonly contentId: string = nextKjSpeedDialId();
-  readonly expanded = computed(() => this.kjOpen() && !this.kjDisabled());
-  readonly disabled = computed(() => this.kjDisabled());
-  readonly direction = computed(() => this.kjDirection());
-
-  // Track the last value emitted to consumers so we don't double-emit when
-  // an internal close is followed by the model effect.
-  private readonly lastEmitted = signal<boolean>(false);
-
-  // ── Mutations ────────────────────────────────────────────────────────
-
-  open(): void {
-    if (this.kjDisabled()) return;
-    if (this.kjOpen()) return;
-    this.kjOpen.set(true);
-    if (this.lastEmitted() !== true) {
-      this.lastEmitted.set(true);
-      this.kjOpenChange.emit(true);
-    }
-  }
-
-  close(): void {
-    if (!this.kjOpen()) return;
-    this.kjOpen.set(false);
-    if (this.lastEmitted() !== false) {
-      this.lastEmitted.set(false);
-      this.kjOpenChange.emit(false);
-    }
-  }
-
-  toggle(): void {
-    if (this.kjOpen()) this.close();
-    else this.open();
-  }
-
-  protected onPointerEnter(): void {
-    if (!this.kjOpenOnHover()) return;
-    if (this.kjDisabled()) return;
-    if (typeof window !== 'undefined' && window.matchMedia?.('(pointer: coarse)').matches) {
-      return;
-    }
-    this.open();
-  }
-
-  protected onPointerLeave(): void {
-    if (!this.kjOpenOnHover()) return;
-    if (this.kjDisabled()) return;
-    this.close();
-  }
-}

package/src/spinner/config.ts

@@ -1,48 +0,0 @@
-import { InjectionToken, Provider } from '@angular/core';
-
-/**
- * Animation shape preset for `KjSpinner`. Reflected to `data-animation`;
- * themes own the keyframes.
- */
-export type KjSpinnerAnimation = 'spin' | 'dots' | 'pulse' | 'bars';
-
-export interface KjSpinnerConfig {
-  variants: string[];
-  sizes: string[];
-  animations: string[];
-  defaults: { variant: string; size: string; animation: string; ariaLabel: string };
-}
-
-/**
- * Default Spinner presets shipped by kouji-ui. Exported so consumers can
- * spread them when extending: `[...KJ_SPINNER_DEFAULTS.animations, 'ring']`.
- */
-export const KJ_SPINNER_DEFAULTS: KjSpinnerConfig = {
-  variants: ['neutral', 'primary', 'secondary', 'success', 'warning', 'error', 'info'],
-  sizes: ['xs', 'sm', 'md', 'lg'],
-  animations: ['spin', 'dots', 'pulse', 'bars'],
-  defaults: { variant: 'neutral', size: 'md', animation: 'spin', ariaLabel: 'Loading' },
-};
-
-/**
- * DI token for the active Spinner presets. Default factory yields
- * `KJ_SPINNER_DEFAULTS`. Override via `provideKjSpinner(…)` at the
- * application scope or at a component scope.
- */
-export const KJ_SPINNER_CONFIG = new InjectionToken<KjSpinnerConfig>('kj.spinner.config', {
-  factory: () => KJ_SPINNER_DEFAULTS,
-});
-
-/**
- * Configures the Spinner presets for the enclosing injector. Replaces (does
- * not merge) `variants`, `sizes`, and `animations`; spread
- * `KJ_SPINNER_DEFAULTS.*` to extend.
- */
-export function provideKjSpinner(config: Partial<KjSpinnerConfig>): Provider[] {
-  return [
-    {
-      provide: KJ_SPINNER_CONFIG,
-      useValue: { ...KJ_SPINNER_DEFAULTS, ...config },
-    },
-  ];
-}

package/src/spinner/index.ts

@@ -1,8 +0,0 @@
-export { KjSpinner } from './spinner';
-export {
-  KJ_SPINNER_CONFIG,
-  KJ_SPINNER_DEFAULTS,
-  provideKjSpinner,
-  type KjSpinnerAnimation,
-  type KjSpinnerConfig,
-} from './config';

package/src/spinner/spinner.spec.ts

@@ -1,262 +0,0 @@
-import { render } from '@testing-library/angular';
-import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest';
-import { KjSpinner } from './spinner';
-
-/**
- * Flush microtasks + the rAF that backs `afterNextRender` so the directive
- * has a chance to read host attributes and the `prefers-reduced-motion`
- * media query.
- */
-async function flushAfterNextRender(): Promise<void> {
-  await new Promise<void>((resolve) => setTimeout(resolve, 0));
-  await Promise.resolve();
-  await Promise.resolve();
-}
-
-/**
- * Stub `window.matchMedia` for a deterministic `prefers-reduced-motion`
- * value during a test. Returns the listener registered by the directive so
- * the test can simulate a runtime change of the user preference.
- */
-function stubMatchMedia(initial: boolean): {
-  fire: (matches: boolean) => void;
-  restore: () => void;
-} {
-  const original = window.matchMedia;
-  let listener: ((e: MediaQueryListEvent) => void) | null = null;
-  const mql: Partial<MediaQueryList> = {
-    matches: initial,
-    media: '(prefers-reduced-motion: reduce)',
-    addEventListener: ((_type: string, l: EventListener) => {
-      listener = l as (e: MediaQueryListEvent) => void;
-    }) as MediaQueryList['addEventListener'],
-    removeEventListener: (() => {
-      listener = null;
-    }) as MediaQueryList['removeEventListener'],
-    addListener: () => {},
-    removeListener: () => {},
-    onchange: null,
-    dispatchEvent: () => true,
-  };
-  (window as unknown as { matchMedia: (q: string) => MediaQueryList }).matchMedia = () =>
-    mql as MediaQueryList;
-  return {
-    fire: (matches: boolean) => {
-      (mql as { matches: boolean }).matches = matches;
-      listener?.({ matches } as MediaQueryListEvent);
-    },
-    restore: () => {
-      window.matchMedia = original;
-    },
-  };
-}
-
-describe('KjSpinner', () => {
-  let mm: ReturnType<typeof stubMatchMedia>;
-
-  beforeEach(() => {
-    mm = stubMatchMedia(false);
-  });
-
-  afterEach(() => {
-    mm.restore();
-  });
-
-  describe('a11y contract', () => {
-    it('sets role="status" on the host', async () => {
-      const { container } = await render(`<span kjSpinner></span>`, {
-        imports: [KjSpinner],
-      });
-      await flushAfterNextRender();
-      expect(container.querySelector('span')).toHaveAttribute('role', 'status');
-    });
-
-    it('sets aria-live="polite" and aria-atomic="true"', async () => {
-      const { container } = await render(`<span kjSpinner></span>`, {
-        imports: [KjSpinner],
-      });
-      await flushAfterNextRender();
-      const host = container.querySelector('span')!;
-      expect(host).toHaveAttribute('aria-live', 'polite');
-      expect(host).toHaveAttribute('aria-atomic', 'true');
-    });
-
-    it('applies default aria-label="Loading" when no consumer label is provided', async () => {
-      const { container } = await render(`<span kjSpinner></span>`, {
-        imports: [KjSpinner],
-      });
-      await flushAfterNextRender();
-      expect(container.querySelector('span')).toHaveAttribute('aria-label', 'Loading');
-    });
-
-    it('consumer kjAriaLabel input wins over the default', async () => {
-      const { container } = await render(
-        `<span kjSpinner kjAriaLabel="Sending"></span>`,
-        { imports: [KjSpinner] },
-      );
-      await flushAfterNextRender();
-      expect(container.querySelector('span')).toHaveAttribute('aria-label', 'Sending');
-    });
-
-    it('does not override a consumer-authored aria-label attribute on the host', async () => {
-      const { container } = await render(
-        `<span kjSpinner aria-label="Saving draft"></span>`,
-        { imports: [KjSpinner] },
-      );
-      await flushAfterNextRender();
-      expect(container.querySelector('span')).toHaveAttribute('aria-label', 'Saving draft');
-    });
-
-    it('does not set aria-label when host carries aria-labelledby', async () => {
-      const { container } = await render(
-        `<span id="lbl">Loading users</span>
-         <span kjSpinner aria-labelledby="lbl"></span>`,
-        { imports: [KjSpinner] },
-      );
-      await flushAfterNextRender();
-      const host = container.querySelector('span[kjSpinner]')!;
-      expect(host).not.toHaveAttribute('aria-label');
-      expect(host).toHaveAttribute('aria-labelledby', 'lbl');
-    });
-  });
-
-  describe('data-animation reflection', () => {
-    it('defaults to data-animation="spin"', async () => {
-      const { container } = await render(`<span kjSpinner></span>`, {
-        imports: [KjSpinner],
-      });
-      await flushAfterNextRender();
-      expect(container.querySelector('span')).toHaveAttribute('data-animation', 'spin');
-    });
-
-    it('reflects kjAnimation="dots"', async () => {
-      const { container } = await render(
-        `<span kjSpinner kjAnimation="dots"></span>`,
-        { imports: [KjSpinner] },
-      );
-      await flushAfterNextRender();
-      expect(container.querySelector('span')).toHaveAttribute('data-animation', 'dots');
-    });
-
-    it('reflects kjAnimation="pulse"', async () => {
-      const { container } = await render(
-        `<span kjSpinner kjAnimation="pulse"></span>`,
-        { imports: [KjSpinner] },
-      );
-      await flushAfterNextRender();
-      expect(container.querySelector('span')).toHaveAttribute('data-animation', 'pulse');
-    });
-
-    it('reflects kjAnimation="bars"', async () => {
-      const { container } = await render(
-        `<span kjSpinner kjAnimation="bars"></span>`,
-        { imports: [KjSpinner] },
-      );
-      await flushAfterNextRender();
-      expect(container.querySelector('span')).toHaveAttribute('data-animation', 'bars');
-    });
-  });
-
-  describe('data-reduced-motion mirrors prefers-reduced-motion', () => {
-    it('omits data-reduced-motion when the user preference is not set', async () => {
-      const { container } = await render(`<span kjSpinner></span>`, {
-        imports: [KjSpinner],
-      });
-      await flushAfterNextRender();
-      expect(container.querySelector('span')).not.toHaveAttribute('data-reduced-motion');
-    });
-
-    it('reflects data-reduced-motion="true" when the media query matches at mount', async () => {
-      mm.restore();
-      mm = stubMatchMedia(true);
-      const { container } = await render(`<span kjSpinner></span>`, {
-        imports: [KjSpinner],
-      });
-      await flushAfterNextRender();
-      expect(container.querySelector('span')).toHaveAttribute('data-reduced-motion', 'true');
-    });
-
-    it('updates data-reduced-motion when the media query changes at runtime', async () => {
-      const { container, fixture } = await render(`<span kjSpinner></span>`, {
-        imports: [KjSpinner],
-      });
-      await flushAfterNextRender();
-      const host = container.querySelector('span')!;
-      expect(host).not.toHaveAttribute('data-reduced-motion');
-
-      mm.fire(true);
-      fixture.detectChanges();
-      expect(host).toHaveAttribute('data-reduced-motion', 'true');
-
-      mm.fire(false);
-      fixture.detectChanges();
-      expect(host).not.toHaveAttribute('data-reduced-motion');
-    });
-
-    it('does not throw when window.matchMedia is unavailable (SSR-style)', async () => {
-      mm.restore();
-      const original = window.matchMedia;
-      // Simulate non-browser env at the time afterNextRender runs.
-      (window as unknown as { matchMedia: undefined }).matchMedia = undefined;
-      try {
-        const { container } = await render(`<span kjSpinner></span>`, {
-          imports: [KjSpinner],
-        });
-        await flushAfterNextRender();
-        expect(container.querySelector('span')).not.toHaveAttribute('data-reduced-motion');
-      } finally {
-        window.matchMedia = original;
-        mm = stubMatchMedia(false);
-      }
-    });
-  });
-
-  describe('KjVariant + KjSize composition', () => {
-    it('reflects default data-variant="neutral" from KJ_SPINNER_DEFAULTS', async () => {
-      const { container } = await render(`<span kjSpinner></span>`, {
-        imports: [KjSpinner],
-      });
-      await flushAfterNextRender();
-      expect(container.querySelector('span')).toHaveAttribute('data-variant', 'neutral');
-    });
-
-    it('reflects default data-size="md" from KJ_SPINNER_DEFAULTS', async () => {
-      const { container } = await render(`<span kjSpinner></span>`, {
-        imports: [KjSpinner],
-      });
-      await flushAfterNextRender();
-      expect(container.querySelector('span')).toHaveAttribute('data-size', 'md');
-    });
-
-    it('forwards kjVariant input to data-variant (composed via hostDirectives)', async () => {
-      const { container } = await render(
-        `<span kjSpinner kjVariant="primary"></span>`,
-        { imports: [KjSpinner] },
-      );
-      await flushAfterNextRender();
-      expect(container.querySelector('span')).toHaveAttribute('data-variant', 'primary');
-    });
-
-    it('forwards kjSize input to data-size (composed via hostDirectives)', async () => {
-      const { container } = await render(
-        `<span kjSpinner kjSize="xs"></span>`,
-        { imports: [KjSpinner] },
-      );
-      await flushAfterNextRender();
-      expect(container.querySelector('span')).toHaveAttribute('data-size', 'xs');
-    });
-
-    it('warns on unknown variant in dev mode', async () => {
-      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
-      try {
-        await render(`<span kjSpinner kjVariant="bogus"></span>`, {
-          imports: [KjSpinner],
-        });
-        await flushAfterNextRender();
-        expect(warn).toHaveBeenCalled();
-      } finally {
-        warn.mockRestore();
-      }
-    });
-  });
-});