@kouji-ui/core 0.1.1 → 0.1.2

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

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

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

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

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

@@ -1,6 +0,0 @@
-// 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,163 +0,0 @@
-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('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 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 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 () => {
-    const { container } = await render(`<button kjButton>Action</button>`, { imports: [KjButton] });
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/button/button.ts

@@ -1,142 +0,0 @@
-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>` (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'" [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
- *      @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
- * @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: KjVariant, inputs: ['kjVariant'] },
-    { directive: KjSize,    inputs: ['kjSize'] },
-    KjFocusRing,
-  ],
-  providers: [...bindPresets(KJ_BUTTON_CONFIG)],
-  host: {
-    '[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 {
-  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

@@ -1,33 +0,0 @@
-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);
-  });
-});