@kouji-ui/core 0.0.3 → 0.1.1

package/src/button/_examples/button.example.ts

@@ -0,0 +1,71 @@
+import { Component, ChangeDetectionStrategy } 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;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  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/_examples/button.finance.example.ts

@@ -0,0 +1,83 @@
+import { Component, ChangeDetectionStrategy } 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' },
+  changeDetection: ChangeDetectionStrategy.Eager,
+  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/_examples/button.retro.example.ts

@@ -0,0 +1,91 @@
+import { Component, ChangeDetectionStrategy } 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' },
+  changeDetection: ChangeDetectionStrategy.Eager,
+  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/_examples/button.sizes.example.ts

@@ -0,0 +1,60 @@
+import { Component, ChangeDetectionStrategy } 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;
+      }
+      [data-size='xl'] {
+        padding: 0.875rem 2.25rem;
+        font-size: 1.0625rem;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <div class="row">
+      <button kjButton [kjSize]="'sm'">Small</button>
+      <button kjButton [kjSize]="'md'">Medium (default)</button>
+      <button kjButton [kjSize]="'lg'">Large</button>
+      <button kjButton [kjSize]="'xl'">Extra-large</button>
+    </div>
+  `,
+})
+export class ButtonSizesExample {}

package/src/button/_examples/index.ts

@@ -0,0 +1,6 @@
+// AUTO-GENERATED by scripts/migrate-examples.mjs
+// One barrel per component folder — used by the docs app as a lazy chunk.
+export { ButtonExample } from './button.example';
+export { ButtonFinanceExample } from './button.finance.example';
+export { ButtonRetroExample } from './button.retro.example';
+export { ButtonSizesExample } from './button.sizes.example';

package/src/button/button.spec.ts

@@ -1,28 +1,159 @@
-import { render, fireEvent } from '@testing-library/angular';
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { render } from '@testing-library/angular';
 import { axe, toHaveNoViolations } from 'jest-axe';
+import { describe, expect, it } from 'vitest';
 import { KjButton } from './button';
+import { provideKjButton } from './config';
 
 expect.extend(toHaveNoViolations);
 
+@Component({
+  standalone: true,
+  imports: [KjButton],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `<button kjButton [kjDisabled]="d" (click)="onClick()">x</button>`,
+})
+class ClickHost {
+  d = true;
+  fired = 0;
+  onClick() {
+    this.fired++;
+  }
+}
+
+@Component({
+  standalone: true,
+  imports: [KjButton],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `<button kjButton [(kjPressed)]="pressed">x</button>`,
+})
+class ToggleHost {
+  pressed = signal<boolean | undefined>(false);
+}
+
 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] });
+  it('default variant comes from KJ_BUTTON_DEFAULTS', async () => {
+    const { getByRole } = await render(`<button kjButton>x</button>`, { imports: [KjButton] });
+    expect(getByRole('button')).toHaveAttribute('data-variant', 'default');
+  });
+
+  it('default size comes from KJ_BUTTON_DEFAULTS', async () => {
+    const { getByRole } = await render(`<button kjButton>x</button>`, { imports: [KjButton] });
+    expect(getByRole('button')).toHaveAttribute('data-size', 'md');
+  });
+
+  it('sets data-variant from the aliased input', async () => {
+    const { getByRole } = await render(`<button kjButton [kjVariant]="'destructive'">x</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] });
+  it('sets data-size from the aliased input', async () => {
+    const { getByRole } = await render(`<button kjButton [kjSize]="'sm'">x</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('sets aria-disabled and data-disabled when disabled is true', async () => {
+    const { getByRole } = await render(`<button kjButton [kjDisabled]="true">x</button>`, {
+      imports: [KjButton],
+    });
+    const btn = getByRole('button');
+    expect(btn).toHaveAttribute('aria-disabled', 'true');
+    expect(btn).toHaveAttribute('data-disabled', '');
+  });
+
+  it('omits aria-disabled and data-disabled when not disabled and not loading', async () => {
+    const { getByRole } = await render(`<button kjButton>x</button>`, { imports: [KjButton] });
+    const btn = getByRole('button');
+    expect(btn).not.toHaveAttribute('aria-disabled');
+    expect(btn).not.toHaveAttribute('data-disabled');
+  });
+
+  it('sets data-full="true" when kjFullWidth is true', async () => {
+    const { getByRole } = await render(`<button kjButton [kjFullWidth]="true">x</button>`, {
+      imports: [KjButton],
+    });
+    expect(getByRole('button')).toHaveAttribute('data-full', 'true');
+  });
+
+  it('omits data-full when kjFullWidth is false (default)', async () => {
+    const { getByRole } = await render(`<button kjButton>x</button>`, { imports: [KjButton] });
+    expect(getByRole('button')).not.toHaveAttribute('data-full');
+  });
+
+  it('loading=true sets aria-busy and forces aria-disabled true', async () => {
+    const { getByRole } = await render(`<button kjButton [kjLoading]="true">x</button>`, {
+      imports: [KjButton],
+    });
+    const btn = getByRole('button');
+    expect(btn).toHaveAttribute('aria-busy', 'true');
+    expect(btn).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('pressed undefined omits aria-pressed', async () => {
+    const { getByRole } = await render(`<button kjButton>x</button>`, { imports: [KjButton] });
+    expect(getByRole('button')).not.toHaveAttribute('aria-pressed');
+  });
+
+  it('pressed=true sets aria-pressed="true"', async () => {
+    const { getByRole } = await render(`<button kjButton [kjPressed]="true">x</button>`, {
+      imports: [KjButton],
+    });
+    expect(getByRole('button')).toHaveAttribute('aria-pressed', 'true');
+  });
+
+  it('pressed=false sets aria-pressed="false"', async () => {
+    const { getByRole } = await render(`<button kjButton [kjPressed]="false">x</button>`, {
+      imports: [KjButton],
+    });
+    expect(getByRole('button')).toHaveAttribute('aria-pressed', 'false');
+  });
+
+  it('suppresses click events when disabled', () => {
+    TestBed.configureTestingModule({ imports: [ClickHost] });
+    const fixture = TestBed.createComponent(ClickHost);
+    fixture.detectChanges();
+    const btn = fixture.nativeElement.querySelector('button');
+    btn.click();
+    expect(fixture.componentInstance.fired).toBe(0);
+  });
+
+  it('auto-toggles pressed and emits pressedChange on click when bound', () => {
+    TestBed.configureTestingModule({ imports: [ToggleHost] });
+    const fixture = TestBed.createComponent(ToggleHost);
+    fixture.detectChanges();
+    const btn = fixture.nativeElement.querySelector('button');
+    expect(btn.getAttribute('aria-pressed')).toBe('false');
+    btn.click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.pressed()).toBe(true);
+    expect(btn.getAttribute('aria-pressed')).toBe('true');
+    btn.click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.pressed()).toBe(false);
+    expect(btn.getAttribute('aria-pressed')).toBe('false');
+  });
+
+  it('provideKjButton at TestBed scope flows into directive defaults', async () => {
+    TestBed.configureTestingModule({
+      providers: [
+        provideKjButton({
+          variants: ['default', 'destructive', 'brand'],
+          defaults: { variant: 'brand', size: 'md' },
+        }),
+      ],
+    });
+    const { getByRole } = await render(`<button kjButton>x</button>`, { imports: [KjButton] });
+    expect(getByRole('button')).toHaveAttribute('data-variant', 'brand');
   });
 
   it('passes axe audit', async () => {

package/src/button/button.ts

@@ -1,17 +1,54 @@
-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';
+import { Directive, ElementRef, ModelSignal, afterNextRender, computed, inject, input, model } from '@angular/core';
+import { KjFocusRing } from '../primitives';
+import { KjVariant, KjSize, bindPresets } from '../presets';
+import { KJ_BUTTON_CONFIG } from './config';
 
 /**
- * Enhances a native ```<button>``` with variant, size, disabled state, and focus-ring behavior.
- * Composes `KjDisabled` and `KjFocusRing` via `hostDirectives`.
+ * Enhances a native `<button>` (or `<a>`) with kouji-ui presets and a11y
+ * primitives. Variant and size are configurable via `provideKjButton(…)`.
+ *
+ * Owns disabled / loading / pressed semantics directly: `kjLoading=true` sets
+ * `aria-busy="true"` and forces the host into a disabled state regardless of
+ * the `kjDisabled` input. The `kjPressed` model is unset (default) for
+ * non-toggle buttons and omits `aria-pressed`; once bound (`[kjPressed]` or
+ * `[(kjPressed)]`), the directive auto-flips its value on click and emits
+ * `kjPressedChange`.
+ *
+ * Click events on disabled buttons are intercepted in the capture phase and
+ * suppressed before any consumer template-bound listener fires, while keeping
+ * the button focusable (kouji's WCAG 2.1 AAA a11y stance: ARIA-disabled, not
+ * native `disabled` attribute).
  *
  * @example
  * ```html
- * <button kjButton [kjVariant]="'destructive'" [kjDisabled]="isLoading()">Delete</button>
+ * <button kjButton [kjVariant]="'destructive'" [kjSize]="'sm'" [kjLoading]="busy()">Delete</button>
  * ```
+ *
+ * @doc-keyboard
+ *   Enter|Space  — Activates the button (native button semantics)
+ *   Tab          — Moves focus to the next focusable element; disabled buttons remain focusable
+ *
+ * @doc-aria
+ *   aria-disabled  — set to "true" when [kjDisabled] or [kjLoading] is true
+ *   aria-busy      — set to "true" when [kjLoading] is true
+ *   aria-pressed   — emitted only when [kjPressed] is bound; absent for non-toggle buttons
+ *   data-disabled  — mirror of aria-disabled for CSS targeting
+ *   data-full      — set to "true" when [kjFullWidth] is true
+ *
+ * @doc-touch
+ *   Meets WCAG 2.5.5 (44×44 CSS px) at `size="lg"` (2.75rem) and `size="icon"` (enforced via min-width/min-height). Sizes `sm` (32px) and `md` (36px) sit below the 44px floor and rely on the inline-text-link exception — use them for buttons embedded in a sentence or dense form rows only.
+ *
+ * @doc-a11y
+ *   Kouji uses ARIA-disabled rather than the native `disabled` attribute so the
+ *   button stays focusable and discoverable by assistive tech. Click events on
+ *   a disabled/loading button are intercepted in the capture phase and suppressed
+ *   before consumer listeners fire. The focus ring is provided by `KjFocusRing`,
+ *   so the outline only appears on `:focus-visible` (keyboard / programmatic
+ *   focus) and never on mouse focus. When `kjButton` is applied to an `<a>`,
+ *   activation follows native anchor semantics (Enter only).
+ *
+ * @doc-related button-group,link,icon-button
+ *
  * @doc
  *  @doc-example Variants
  *    @doc-theme default
@@ -22,23 +59,84 @@ export type KjButtonSize = 'sm' | 'md' | 'lg' | 'icon';
  *      @doc-file button.finance.example.ts
  *  @doc-example Sizes
  *    @doc-file button.sizes.example.ts
- * @category Core/Base
+ * @doc-category Core/Base
+ * @doc-name button
+ * @doc-is-main
+ * @doc-description Adds accessible disabled, loading, and pressed semantics to any native button or anchor.
  */
 @Directive({
   selector: '[kjButton]',
   standalone: true,
   hostDirectives: [
-    { directive: KjDisabled, inputs: ['kjDisabled'] },
+    { directive: KjVariant, inputs: ['kjVariant'] },
+    { directive: KjSize,    inputs: ['kjSize'] },
     KjFocusRing,
   ],
+  providers: [...bindPresets(KJ_BUTTON_CONFIG)],
   host: {
-    '[attr.data-variant]': 'kjVariant()',
-    '[attr.data-size]': 'kjSize()',
+    '[attr.aria-disabled]': 'effectiveDisabled() ? "true" : null',
+    '[attr.data-disabled]': 'effectiveDisabled() ? "" : null',
+    '[attr.aria-busy]':     'kjLoading() ? "true" : null',
+    '[attr.aria-pressed]':  'pressedAttr()',
+    '[attr.data-full]':     'kjFullWidth() ? "true" : null',
   },
 })
 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');
+  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef);
+
+  /** Disables the button. Reflects `aria-disabled` and `data-disabled`. */
+  readonly kjDisabled = input(false);
+
+  /** Marks the button as in-flight (e.g. async action). Sets `aria-busy="true"` and forces disabled. */
+  readonly kjLoading = input(false);
+
+  /** Stretches the button to fill the parent's inline axis. Reflects `data-full="true"`. */
+  readonly kjFullWidth = input(false);
+
+  /**
+   * Toggle state. Unset (default) marks this as a non-toggle button and omits
+   * `aria-pressed`. Once a value is provided (one-way `[kjPressed]` or two-way
+   * `[(kjPressed)]`), the directive auto-toggles on click and emits the new
+   * value via `kjPressedChange`.
+   *
+   * Both the field annotation and the explicit generic+initial-value form
+   * are required: ng-packagr's declaration emission narrows
+   * `ModelSignal<T | undefined>` to `ModelSignal<T>` for any inferred form
+   * we tried (`model<boolean>()`, `model<boolean | undefined>(undefined)`),
+   * which breaks consumer two-way bindings of `boolean | undefined` signals.
+   * Pinning the field type preserves the read+write contract in the
+   * published .d.ts. See `rules/code_style.md` "Prefer TypeScript inference"
+   * for the documented ng-packagr exception.
+   */
+  readonly kjPressed: ModelSignal<boolean | undefined> = model<boolean | undefined>(undefined);
+
+  protected readonly effectiveDisabled = computed(() => this.kjDisabled() || this.kjLoading());
+
+  protected readonly pressedAttr = computed(() => {
+    const p = this.kjPressed();
+    return p === undefined ? null : (p ? 'true' : 'false');
+  });
+
+  constructor() {
+    // Capture-phase native listener: fires BEFORE Angular's template-bound
+    // bubble-phase (click) listeners on the same element, so
+    // stopImmediatePropagation() actually prevents consumer handlers.
+    afterNextRender(() => {
+      this.el.nativeElement.addEventListener(
+        'click',
+        (event: Event) => {
+          if (this.effectiveDisabled()) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            return;
+          }
+          const p = this.kjPressed();
+          if (p !== undefined) {
+            this.kjPressed.set(!p);
+          }
+        },
+        { capture: true },
+      );
+    });
+  }
 }

package/src/button/config.spec.ts

@@ -0,0 +1,33 @@
+import { TestBed } from '@angular/core/testing';
+import { describe, expect, it } from 'vitest';
+import { KJ_BUTTON_CONFIG, KJ_BUTTON_DEFAULTS, provideKjButton } from './config';
+
+describe('KJ_BUTTON_CONFIG', () => {
+  it('default factory returns the shipped defaults', () => {
+    expect(TestBed.inject(KJ_BUTTON_CONFIG)).toEqual(KJ_BUTTON_DEFAULTS);
+  });
+
+  it('provideKjButton replaces variants and sizes (no merge)', () => {
+    TestBed.configureTestingModule({
+      providers: [provideKjButton({ variants: ['only-one'], sizes: ['only-md'] })],
+    });
+    const cfg = TestBed.inject(KJ_BUTTON_CONFIG);
+    expect(cfg.variants).toEqual(['only-one']);
+    expect(cfg.sizes).toEqual(['only-md']);
+    expect(cfg.defaults).toEqual(KJ_BUTTON_DEFAULTS.defaults);
+  });
+
+  it('provideKjButton overrides defaults when given', () => {
+    TestBed.configureTestingModule({
+      providers: [
+        provideKjButton({
+          variants: ['a', 'b'],
+          defaults: { variant: 'b', size: 'lg' },
+        }),
+      ],
+    });
+    const cfg = TestBed.inject(KJ_BUTTON_CONFIG);
+    expect(cfg.defaults).toEqual({ variant: 'b', size: 'lg' });
+    expect(cfg.sizes).toEqual(KJ_BUTTON_DEFAULTS.sizes);
+  });
+});