@kouji-ui/components 0.1.1 → 0.1.3

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

@@ -1,31 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { KjButtonComponent } from '../button';
-
-@Component({
-  selector: 'kj-button-loading-example',
-  standalone: true,
-  imports: [KjButtonComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-button [kjLoading]="busy()" (click)="run()">
-      {{ busy() ? 'Saving…' : 'Save' }}
-    </kj-button>
-  `,
-})
-export class KjButtonLoadingExample {
-  readonly busy = signal(false);
-
-  async run() {
-    if (this.busy()) return;
-    this.busy.set(true);
-    await new Promise((r) => setTimeout(r, 1500));
-    this.busy.set(false);
-  }
-}

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

@@ -1,24 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { KjButtonComponent } from '../button';
-
-@Component({
-  selector: 'kj-button-pressed-example',
-  standalone: true,
-  imports: [KjButtonComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-button kjVariant="outline" [(kjPressed)]="on">
-      {{ on() ? 'Bold ON' : 'Bold OFF' }}
-    </kj-button>
-  `,
-})
-export class KjButtonPressedExample {
-  readonly on = signal(false);
-}

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

@@ -1,26 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjButtonComponent } from '../button';
-
-@Component({
-  selector: 'kj-button-sizes-example',
-  standalone: true,
-  imports: [KjButtonComponent],
-  styles: [
-    `
-      :host {
-        display: flex;
-        gap: var(--kj-space-sm);
-        align-items: center;
-        flex-wrap: wrap;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-button kjSize="sm">Small</kj-button>
-    <kj-button kjSize="md">Medium</kj-button>
-    <kj-button kjSize="lg">Large</kj-button>
-    <kj-button kjSize="icon" kjAriaLabel="Settings">⚙</kj-button>
-  `,
-})
-export class KjButtonSizesExample {}

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

@@ -1,66 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { KjButtonComponent } from '../button';
-
-/**
- * A walkthrough of the most common button usages — variant, size, loading,
- * disabled, pressed (toggle), and full-width. Use this as the copy-paste
- * starting point for new screens.
- */
-@Component({
-  selector: 'kj-button-usage-example',
-  standalone: true,
-  imports: [KjButtonComponent],
-  styles: [
-    `
-      :host {
-        display: flex;
-        flex-direction: column;
-        gap: var(--kj-space-md);
-      }
-      .row {
-        display: flex;
-        gap: var(--kj-space-sm);
-        flex-wrap: wrap;
-        align-items: center;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <div class="row">
-      <kj-button kjVariant="default" (click)="onSave()">Save changes</kj-button>
-      <kj-button kjVariant="destructive">Delete</kj-button>
-      <kj-button kjVariant="ghost">Cancel</kj-button>
-      <kj-button kjVariant="outline">More info</kj-button>
-    </div>
-
-    <div class="row">
-      <kj-button kjSize="sm">Small</kj-button>
-      <kj-button kjSize="md">Medium</kj-button>
-      <kj-button kjSize="lg">Large</kj-button>
-    </div>
-
-    <div class="row">
-      <kj-button [kjLoading]="busy()" (click)="run()">
-        {{ busy() ? 'Saving…' : 'Save' }}
-      </kj-button>
-      <kj-button [kjDisabled]="true">Disabled</kj-button>
-      <kj-button kjVariant="outline" [(kjPressed)]="pressed">
-        {{ pressed() ? 'Bold ON' : 'Bold OFF' }}
-      </kj-button>
-    </div>
-  `,
-})
-export class KjButtonUsageExample {
-  readonly busy = signal(false);
-  readonly pressed = signal(false);
-
-  onSave(): void {
-    /* persist the form */
-  }
-
-  run(): void {
-    this.busy.set(true);
-    setTimeout(() => this.busy.set(false), 1200);
-  }
-}

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

@@ -1,26 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjButtonComponent } from '../button';
-
-@Component({
-  selector: 'kj-button-variants-example',
-  standalone: true,
-  imports: [KjButtonComponent],
-  styles: [
-    `
-      :host {
-        display: flex;
-        gap: var(--kj-space-sm);
-        flex-wrap: wrap;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-button kjVariant="default">Default</kj-button>
-    <kj-button kjVariant="destructive">Destructive</kj-button>
-    <kj-button kjVariant="ghost">Ghost</kj-button>
-    <kj-button kjVariant="outline">Outline</kj-button>
-    <kj-button kjVariant="link">Link</kj-button>
-  `,
-})
-export class KjButtonVariantsExample {}

package/src/button/_examples/index.ts

@@ -1,12 +0,0 @@
-// AUTO-GENERATED by scripts/migrate-examples.mjs
-// One barrel per component folder — used by the docs app as a lazy chunk.
-export { KjButtonAnchorExample } from './button.anchor.example';
-export { KjButtonConfiguredExample } from './button.configured.example';
-export { KjButtonDisabledExample } from './button.disabled.example';
-export { KjButtonExample } from './button.example';
-export { KjButtonIconExample } from './button.icon.example';
-export { KjButtonLoadingExample } from './button.loading.example';
-export { KjButtonPressedExample } from './button.pressed.example';
-export { KjButtonSizesExample } from './button.sizes.example';
-export { KjButtonUsageExample } from './button.usage.example';
-export { KjButtonVariantsExample } from './button.variants.example';

package/src/button/button.css

@@ -1,263 +0,0 @@
-/* ─────────────────────────────────────────────────────────────
-   .kj-button — component-layer tokens + structural CSS
-   Tokens default to shared-layer values from @kouji-ui/themes.
-   Variants/sizes/states retarget the component tokens; the
-   structural rules below are the only place raw var(--kj-button-*)
-   is read.
-   ──────────────────────────────────────────────────────────── */
-
-@layer kj.component {
-  .kj-button {
-    /* component knobs — themes/users can override any of these */
-    --kj-button-bg:               var(--kj-bg-primary);
-    --kj-button-fg:               var(--kj-fg-on-primary);
-    --kj-button-border-color:     transparent;
-    --kj-button-border-style:     solid;
-    --kj-button-border-width:     var(--kj-border);
-    --kj-button-radius:           var(--kj-radius-field);
-    --kj-button-padding-x:        var(--kj-space-md);
-    --kj-button-padding-y:        var(--kj-space-sm);
-    --kj-button-font:             var(--kj-font-sans);
-    --kj-button-font-size:        var(--kj-text-sm);
-    --kj-button-justify:          center;
-    --kj-button-gap:              var(--kj-space-sm);
-    --kj-button-min-width:        auto;
-    --kj-button-height:           auto;
-    --kj-button-translate-active: none;
-    /* --kj-button-shadow / --kj-button-shadow-hover / --kj-button-shadow-active
-       are intentionally NOT declared here. Declaring them with element-level
-       specificity would win over the theme's `[data-theme="X"]` ancestor
-       declaration (e.g. kouji's `6px 6px 0 #2a2a2a` offset block), since
-       both selectors are (0,1,0) and same-layer source-order favours the
-       element. The hover/active rules below pull the value via
-       `var(name, fallback)` so the theme's inherited value reaches the
-       component AND the fallback (`none`) applies when no theme sets one. */
-    /* Typographic tone — themes override these for brand voice (e.g.
-       bauhaus bumps weight to 900; cyberpunk tightens tracking). */
-    --kj-button-font-weight:      600;
-    --kj-button-letter-spacing:  -0.01em;
-    /* Hover lift — pulls from the shared per-theme --kj-hover-translate
-       (bauhaus = -4px; everyone else = -2px). */
-    --kj-button-hover-translate:  var(--kj-hover-translate, -2px);
-
-    /* the only place raw var(--kj-button-*) is read */
-    display: inline-flex;
-    align-items: center;
-    justify-content: var(--kj-button-justify);
-    gap: var(--kj-button-gap);
-    min-width: var(--kj-button-min-width);
-    /* Explicit per-size height + align-self prevents flex parents
-       (align-items: stretch) from over-growing the button vertically. */
-    height: var(--kj-button-height);
-    align-self: center;
-    background: var(--kj-button-bg);
-    color: var(--kj-button-fg);
-    border: var(--kj-button-border-width) var(--kj-button-border-style) var(--kj-button-border-color);
-    border-radius: var(--kj-button-radius);
-    padding: var(--kj-button-padding-y) var(--kj-button-padding-x);
-    font: var(--kj-button-font-weight) var(--kj-button-font-size) / 1.2 var(--kj-button-font);
-    letter-spacing: var(--kj-button-letter-spacing);
-    /* Button shadow is opt-in PER PAGE CONTEXT (e.g. landing hero, docs
-       playground stage) AND restricted to the `default` (primary) variant
-       — never global. Pages set `--kj-button-shadow` at their scope; the
-       applying rules below only fire for `[data-variant="default"]`. */
-    /* Transition only properties tied to user interaction (hover / active /
-       focus). NOT background-color — variant-driven bg changes propagate
-       through the wrapper input on the same tick as the host attribute, and
-       transitioning bg here animates the initial primary→variant flip on
-       components like <kj-button variant="ghost"> when the wrapper resolves. */
-    transition: color var(--kj-transition), border-color var(--kj-transition),
-                box-shadow var(--kj-transition), transform var(--kj-transition),
-                opacity var(--kj-transition);
-    cursor: pointer;
-    text-decoration: none;
-  }
-
-  /* Variants flip component tokens. Each variant owns its hover so the
-     hover surface is designed per intent, not derived heuristically.
-
-     Filled variants (default, destructive) darken on hover via a fixed
-     8% color-mix toward black. Themes can override the variant rules
-     entirely for a brand-correct shade. */
-
-  .kj-button[data-variant="destructive"] {
-    --kj-button-bg: var(--kj-bg-danger);
-    --kj-button-fg: var(--kj-fg-on-danger);
-  }
-  .kj-button[data-variant="destructive"]:hover {
-    --kj-button-bg: color-mix(in oklch, var(--kj-bg-danger), black 8%);
-  }
-
-  .kj-button[data-variant="ghost"] {
-    --kj-button-bg: transparent;
-    --kj-button-fg: var(--kj-fg-default);
-    --kj-button-border-color: transparent;
-  }
-  /* Use a foreground-tinted overlay rather than a static base-200 surface so
-     the hover state stays visible even on themes where base-100 / base-200
-     are nearly the same value (e.g. kouji's deep #0c0c0c / #141414 ramp). */
-  .kj-button[data-variant="ghost"]:hover {
-    --kj-button-bg: color-mix(in oklab, var(--kj-fg-default) 10%, transparent);
-  }
-
-  .kj-button[data-variant="outline"] {
-    --kj-button-bg: transparent;
-    --kj-button-fg: var(--kj-fg-default);
-    --kj-button-border-color: var(--kj-border-default);
-  }
-  .kj-button[data-variant="outline"]:hover {
-    --kj-button-bg: var(--kj-bg-surface);
-  }
-
-  .kj-button[data-variant="link"] {
-    --kj-button-bg: transparent;
-    --kj-button-fg: var(--kj-fg-primary);
-    --kj-button-padding-x: 0;
-    --kj-button-padding-y: 0;
-    /* Link variant is plain underlined text — explicitly null out any
-       theme-set --kj-button-shadow so kouji/bauhaus offsets don't leak
-       onto inline text links. Ghost / outline / destructive keep theirs. */
-    --kj-button-shadow: none;
-    --kj-button-shadow-hover: none;
-    --kj-button-shadow-active: none;
-    text-decoration: underline;
-    text-underline-offset: 4px;
-  }
-  .kj-button[data-variant="link"]:hover {
-    --kj-button-bg: transparent;
-    --kj-button-fg: color-mix(in oklch, var(--kj-fg-primary), black 8%);
-  }
-
-  /* sizes — heights are explicit so flex parents can't stretch the button.
-     padding-y is kept for the `height: auto` (token-overridden) case and
-     for visual rhythm with content larger than the height. */
-  .kj-button[data-size="sm"] {
-    --kj-button-padding-x: var(--kj-space-sm);
-    --kj-button-padding-y: 0.25rem;
-    --kj-button-font-size: 0.8125rem;
-    --kj-button-height:    2rem;       /*  32px */
-  }
-  .kj-button[data-size="md"] {
-    --kj-button-height:    2.25rem;    /*  36px */
-  }
-  .kj-button[data-size="lg"] {
-    --kj-button-padding-x: var(--kj-space-lg);
-    --kj-button-padding-y: 0.625rem;
-    --kj-button-font-size: 1rem;
-    --kj-button-height:    2.75rem;    /*  44px (AAA touch target) */
-  }
-  .kj-button[data-size="xl"] {
-    --kj-button-padding-x: var(--kj-space-2xl);
-    --kj-button-padding-y: 0.875rem;
-    --kj-button-font-size: 1.0625rem;
-    --kj-button-gap:       var(--kj-space-md);
-    --kj-button-height:    3.25rem;    /*  52px */
-  }
-  .kj-button[data-size="icon"] {
-    --kj-button-padding-x: var(--kj-space-sm);
-    --kj-button-padding-y: var(--kj-space-sm);
-    --kj-button-height:    2.25rem;
-    aspect-ratio: 1;
-  }
-
-  /* Full-width: spans the parent (flex / block / grid track). */
-  .kj-button[data-full="true"] {
-    width: 100%;
-  }
-
-  /* Default-variant hover (catches the unset-or-`default` case). Specificity
-     here is lower than the variant-specific rules above, so destructive /
-     ghost / outline / link override correctly.
-
-     Themes can retarget the hover surface by setting
-     `--kj-button-bg-hover` (and optionally `--kj-button-fg-hover`) on
-     `[data-theme="X"]`. The fallbacks below preserve the default 8%
-     darken behaviour for any theme that doesn't customise. Defining the
-     defaults via `var(name, fallback)` instead of a `--kj-button-bg-hover:`
-     declaration on `.kj-button` keeps the theme's ancestor declaration
-     winning the cascade (an element-level default would override the
-     inherited value from `[data-theme]`). */
-  .kj-button:hover {
-    --kj-button-bg: var(--kj-button-bg-hover, color-mix(in oklch, var(--kj-bg-primary), black 8%));
-    /* Hover lift — themed via --kj-hover-translate. Bauhaus = -4px,
-       everyone else = -2px (default in :root). */
-    transform: translateY(var(--kj-button-hover-translate));
-  }
-  /* fg-hover only applies to the default variant; ghost/outline/link own
-     their hover fg already, and destructive keeps its on-danger fg. */
-  .kj-button[data-variant="default"]:hover {
-    --kj-button-fg: var(--kj-button-fg-hover, var(--kj-fg-on-primary));
-  }
-  /* Shadow application — `default` (primary) variant only. Themes leave
-     `--kj-button-shadow` unset by default; pages opt in by declaring it
-     at their scope (landing hero, docs playground stage). Hover/active
-     fall back to the static shadow so a single declaration is enough. */
-  .kj-button[data-variant="default"] {
-    box-shadow: var(--kj-button-shadow, none);
-  }
-  .kj-button[data-variant="default"]:hover {
-    box-shadow: var(--kj-button-shadow-hover, var(--kj-button-shadow, none));
-  }
-  .kj-button[data-variant="default"]:active {
-    box-shadow: var(--kj-button-shadow-active, var(--kj-button-shadow, none));
-  }
-  .kj-button:active {
-    transform: var(--kj-button-translate-active);
-  }
-  .kj-button:focus-visible {
-    outline: 2px solid var(--kj-border-focus);
-    outline-offset: 2px;
-  }
-  .kj-button[aria-disabled="true"] {
-    opacity: 0.45;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  /* ── Touch target enforcement (WCAG 2.5.5) ─────────────────────────── */
-  /* Icon-only buttons have no inline text affordance, so they need the
-     full 44×44 touch target. The `sm` text variant relies on its label
-     for the equivalent-inline exception and stays visually small. */
-  .kj-button[data-size='icon'] {
-    min-width: 2.75rem;  /* 44px */
-    min-height: 2.75rem; /* 44px */
-  }
-
-  /* ── Busy / loading state ───────────────────────────────────────────── */
-  .kj-button[aria-busy='true'] {
-    /* `opacity` dims the entire button (spinner + bg) uniformly. The
-       previous rule re-pointed --kj-button-fg at --kj-fg-default, which
-       on dark themes is the off-white page text — making the spinner
-       paint white over a yellow primary button. Opacity preserves the
-       variant's resolved fg so the spinner stays the same colour as
-       the would-be label. */
-    opacity: 0.7;
-    cursor: progress;
-  }
-
-  /* ── Pressed (toggle) state ─────────────────────────────────────────── */
-  .kj-button[aria-pressed='true'] {
-    --kj-button-bg: var(--kj-bg-field);
-    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.12);
-  }
-
-  /* ── Spinner element (placeholder until KjSpinner ships) ─────────────
-     The wrapper hides <ng-content> while loading and renders only this
-     spinner, so it should sit centred in the button (the host already
-     applies `justify-content: var(--kj-button-justify)` = center). No
-     trailing margin — there's nothing after it to push away. */
-  .kj-button__spinner {
-    display: inline-block;
-    width: 1em;
-    height: 1em;
-    vertical-align: -0.125em;
-    border: 2px solid currentColor;
-    border-right-color: transparent;
-    border-radius: 50%;
-    animation: kj-button-spinner-rotate 0.6s linear infinite;
-  }
-}
-
-@keyframes kj-button-spinner-rotate {
-  to { transform: rotate(360deg); }
-}

package/src/button/button.playground.ts

@@ -1,79 +0,0 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { KjButtonComponent } from './button';
-import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
-
-/**
- * Playground state — module-scope signals. The demo component reads them via
- * its template; the snippet fn reads them via the engine-supplied `values`
- * arg; the engine writes them via {@link PLAYGROUND.state}.
- */
-const variant = signal<'default' | 'destructive' | 'ghost' | 'outline' | 'link'>('default');
-const size = signal<'sm' | 'md' | 'lg' | 'icon'>('md');
-const label = signal('Click me');
-const disabled = signal(false);
-const loading = signal(false);
-const fullWidth = signal(false);
-
-@Component({
-  selector: 'kj-button-playground',
-  standalone: true,
-  imports: [KjButtonComponent],
-  template: `
-    <kj-button
-      [kjVariant]="variant()"
-      [kjSize]="size()"
-      [kjDisabled]="disabled()"
-      [kjLoading]="loading()"
-      [kjFullWidth]="fullWidth()"
-    >{{ label() }}</kj-button>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjButtonPlaygroundDemo {
-  protected readonly variant = variant;
-  protected readonly size = size;
-  protected readonly label = label;
-  protected readonly disabled = disabled;
-  protected readonly loading = loading;
-  protected readonly fullWidth = fullWidth;
-}
-
-export const PLAYGROUND: PlaygroundFile = {
-  component: KjButtonPlaygroundDemo,
-  state: {
-    variant: variant as unknown as ReturnType<typeof signal>,
-    size: size as unknown as ReturnType<typeof signal>,
-    label: label as unknown as ReturnType<typeof signal>,
-    disabled: disabled as unknown as ReturnType<typeof signal>,
-    loading: loading as unknown as ReturnType<typeof signal>,
-    fullWidth: fullWidth as unknown as ReturnType<typeof signal>,
-  },
-  controls: [
-    {
-      kind: 'chips',
-      name: 'variant',
-      label: 'variant',
-      options: ['default', 'destructive', 'ghost', 'outline', 'link'],
-    },
-    { kind: 'chips', name: 'size', label: 'size', options: ['sm', 'md', 'lg', 'icon'] },
-    { kind: 'text', name: 'label', label: 'label' },
-    { kind: 'toggle', name: 'disabled', label: 'disabled' },
-    { kind: 'toggle', name: 'loading', label: 'loading' },
-    { kind: 'toggle', name: 'fullWidth', label: 'full width' },
-  ],
-  snippet: (values) => {
-    const s = values as {
-      variant: string;
-      size: string;
-      label: string;
-      disabled: boolean;
-      loading: boolean;
-      fullWidth: boolean;
-    };
-    const attrs: string[] = [`kjVariant="${s.variant}"`, `kjSize="${s.size}"`];
-    if (s.disabled) attrs.push('[kjDisabled]="true"');
-    if (s.loading) attrs.push('[kjLoading]="true"');
-    if (s.fullWidth) attrs.push('[kjFullWidth]="true"');
-    return `<kj-button\n  ${attrs.join('\n  ')}\n>${s.label}</kj-button>`;
-  },
-};

package/src/button/button.spec.ts

@@ -1,100 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { describe, expect, test, beforeEach } from 'vitest';
-import { KjButtonComponent } from './button';
-
-@Component({
-  standalone: true,
-  imports: [KjButtonComponent],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<kj-button
-    [kjVariant]="variant"
-    [kjSize]="size"
-    [kjDisabled]="disabled"
-    [kjLoading]="loading"
-    [kjPressed]="pressed"
-    [kjAriaLabel]="ariaLabel"
-    >{{ label }}</kj-button
-  >`,
-})
-class HostComponent {
-  variant: string = 'default';
-  size: string = 'md';
-  disabled = false;
-  loading = false;
-  pressed: boolean | undefined = undefined;
-  ariaLabel: string | undefined = undefined;
-  label = 'Click';
-}
-
-describe('KjButtonComponent', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({ imports: [HostComponent] });
-  });
-
-  test('renders an inner <button> with the .kj-button class', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    expect(fixture.nativeElement.querySelector('button.kj-button')).not.toBeNull();
-  });
-
-  test('forwards variant via [kjVariant] (data-variant attr)', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.componentInstance.variant = 'destructive';
-    fixture.detectChanges();
-    expect(
-      fixture.nativeElement.querySelector('button.kj-button').getAttribute('data-variant'),
-    ).toBe('destructive');
-  });
-
-  test('forwards size via [kjSize] (data-size attr)', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.componentInstance.size = 'sm';
-    fixture.detectChanges();
-    expect(fixture.nativeElement.querySelector('button.kj-button').getAttribute('data-size')).toBe(
-      'sm',
-    );
-  });
-
-  test('forwards disabled (aria-disabled attr on inner button)', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.componentInstance.disabled = true;
-    fixture.detectChanges();
-    expect(
-      fixture.nativeElement.querySelector('button.kj-button').getAttribute('aria-disabled'),
-    ).toBe('true');
-  });
-
-  test('forwards loading: aria-busy on inner button + spinner element rendered', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.componentInstance.loading = true;
-    fixture.detectChanges();
-    const btn = fixture.nativeElement.querySelector('button.kj-button');
-    expect(btn.getAttribute('aria-busy')).toBe('true');
-    expect(btn.querySelector('.kj-button__spinner')).not.toBeNull();
-  });
-
-  test('does not render spinner when loading is false', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    expect(fixture.nativeElement.querySelector('.kj-button__spinner')).toBeNull();
-  });
-
-  test('forwards pressed (aria-pressed attr on inner button)', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.componentInstance.pressed = true;
-    fixture.detectChanges();
-    expect(
-      fixture.nativeElement.querySelector('button.kj-button').getAttribute('aria-pressed'),
-    ).toBe('true');
-  });
-
-  test('forwards ariaLabel to the inner button', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.componentInstance.ariaLabel = 'Save changes';
-    fixture.detectChanges();
-    expect(fixture.nativeElement.querySelector('button.kj-button').getAttribute('aria-label')).toBe(
-      'Save changes',
-    );
-  });
-});