@kouji-ui/core 0.1.1 → 0.1.2

package/src/popover/_examples/popover.retro.example.ts

@@ -1,103 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjPopoverTrigger } from '../popover-trigger';
-import { KjPopoverContent } from '../popover-content';
-import { KjPopoverTitle } from '../popover-title';
-import { KjPopoverClose } from '../popover-close';
-
-@Component({
-  selector: 'kj-example-popover-retro',
-  standalone: true,
-  imports: [KjPopoverTrigger, KjPopoverContent, KjPopoverTitle, KjPopoverClose],
-  styleUrls: ['../../styles/docs-themes.css'],
-  host: { class: 'kj-theme-retro' },
-  styles: [
-    `
-      :host {
-        display: flex;
-        align-items: flex-start;
-        justify-content: center;
-        padding: 3rem 2rem 10rem;
-        background: var(--kj-bg);
-        font-family: var(--kj-font);
-        min-height: 220px;
-        color: var(--kj-text);
-      }
-      button {
-        padding: 0.4rem 1rem;
-        font-family: var(--kj-font);
-        font-size: 0.8rem;
-        font-weight: 700;
-        letter-spacing: 0.06em;
-        text-transform: uppercase;
-        background: var(--kj-surface);
-        color: var(--kj-text);
-        border: var(--kj-btn-border);
-        border-radius: 0;
-        cursor: pointer;
-        box-shadow: var(--kj-shadow-sm);
-        transition: var(--kj-transition);
-      }
-      button:hover {
-        transform: translate(-1px, -1px);
-        box-shadow: var(--kj-shadow-md);
-      }
-      kj-popover-content {
-        display: block;
-        z-index: 20;
-        background: var(--kj-bg);
-        border: var(--kj-btn-border);
-        box-shadow: var(--kj-shadow-hard);
-        padding: 1rem;
-        min-width: 14rem;
-        font-family: var(--kj-font);
-      }
-      .popover-title {
-        font-size: 0.75rem;
-        font-weight: 700;
-        text-transform: uppercase;
-        letter-spacing: 0.08em;
-        margin: 0 0 0.5rem;
-        border-bottom: var(--kj-btn-border);
-        padding-bottom: 0.375rem;
-        color: var(--kj-text);
-      }
-      .popover-body {
-        font-size: 0.75rem;
-        color: var(--kj-text-muted);
-        margin: 0.5rem 0 1rem;
-        line-height: 1.6;
-      }
-      .popover-footer {
-        display: flex;
-        justify-content: flex-end;
-        gap: 0.5rem;
-      }
-      .popover-footer button {
-        padding: 0.3rem 0.75rem;
-        font-size: 0.7rem;
-        box-shadow: var(--kj-shadow-sm);
-      }
-      .popover-footer button:hover {
-        box-shadow: var(--kj-shadow-md);
-      }
-      .btn-primary {
-        background: var(--kj-accent);
-        color: var(--kj-accent-on);
-        border-color: var(--kj-border);
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <button kjPopoverTrigger #t="kjPopoverTrigger">Settings</button>
-    <kj-popover-content [kjFor]="t">
-      <h3 kjPopoverTitle class="popover-title">Notifications</h3>
-      <p class="popover-body">Configure notification frequency and delivery preferences.</p>
-      <div class="popover-footer">
-        <button kjPopoverClose>Cancel</button>
-        <button kjPopoverClose class="btn-primary">Save</button>
-      </div>
-    </kj-popover-content>
-  `,
-})
-export class PopoverRetroExample {}

package/src/popover/index.ts

@@ -1,5 +0,0 @@
-export * from './popover-trigger';
-export * from './popover-content';
-export * from './popover-arrow';
-export * from './popover-close';
-export * from './popover-title';

package/src/popover/popover-arrow.ts

@@ -1,30 +0,0 @@
-import { Directive } from '@angular/core';
-
-/**
- * Optional decorative arrow rendered inside `[kjPopoverContent]`.
- *
- * Pure styling hook — has no behaviour. Consumer CSS reads `data-side` from
- * the parent panel host (set by the position strategy) to position and
- * rotate the arrow. `aria-hidden="true"` keeps it out of the AT tree
- * (matches `KjTooltipArrow`).
- *
- * @example
- * ```html
- * <kj-popover-content [kjFor]="t">
- *   <h3 kjPopoverTitle>Profile</h3>
- *   <span kjPopoverArrow></span>
- * </kj-popover-content>
- * ```
- *
- * @doc-category Core/Overlay
- */
-@Directive({
-  selector: '[kjPopoverArrow]',
-  standalone: true,
-  host: {
-    'class': 'kj-popover-arrow',
-    'aria-hidden': 'true',
-    'data-kj-popover-arrow': '',
-  },
-})
-export class KjPopoverArrow {}

package/src/popover/popover-close.ts

@@ -1,36 +0,0 @@
-import { Directive, inject } from '@angular/core';
-import { KjOverlayController } from '../primitives/overlay/controller';
-import { KjOverlayPanel } from '../primitives/overlay/panel';
-
-/**
- * Convenience close button. Place inside a `[kjPopoverContent]` panel.
- * Calls the overlay controller's `close('programmatic')` on click.
- *
- * @example
- * ```html
- * <kj-popover-content [kjFor]="t">
- *   …
- *   <button kjPopoverClose>Close</button>
- * </kj-popover-content>
- * ```
- *
- * @doc-category Core/Overlay
- */
-@Directive({
-  selector: '[kjPopoverClose]',
-  standalone: true,
-  host: {
-    '(click)': 'onClick($event)',
-  },
-})
-export class KjPopoverClose {
-  private readonly _panel = inject(KjOverlayPanel, { optional: true });
-  private get controller(): KjOverlayController | null {
-    return this._panel?.controller ?? null;
-  }
-
-  protected onClick(event: MouseEvent): void {
-    event.stopPropagation();
-    this.controller?.close('programmatic');
-  }
-}

package/src/popover/popover-content.ts

@@ -1,41 +0,0 @@
-import { Component, ChangeDetectionStrategy, ViewEncapsulation, booleanAttribute, inject, input } from '@angular/core';
-import { KjOverlayPanel } from '../primitives/overlay/panel';
-import {
-  KJ_OVERLAY_MOUNT_STRATEGY,
-  KJ_OVERLAY_POSITION_STRATEGY,
-  KJ_OVERLAY_FOCUS_TRAP_STRATEGY,
-  KJ_OVERLAY_PANEL_ROLE,
-} from '../primitives/overlay/tokens';
-import type { KjSide, KjAlign } from '../primitives/overlay/types';
-import { bodyPortal } from '../primitives/overlay/strategies/mount/body-portal';
-import { anchoredTo } from '../primitives/overlay/strategies/position/anchored-to';
-import { tabCycle } from '../primitives/overlay/strategies/focus-trap/tab-cycle';
-
-@Component({
-  selector: 'kj-popover-content',
-  standalone: true,
-  hostDirectives: [{ directive: KjOverlayPanel, inputs: ['kjFor'] }],
-  providers: [
-    { provide: KJ_OVERLAY_PANEL_ROLE, useValue: 'dialog' as const },
-    { provide: KJ_OVERLAY_MOUNT_STRATEGY, useFactory: () => bodyPortal() },
-    { provide: KJ_OVERLAY_POSITION_STRATEGY, useFactory: () => anchoredTo() },
-    { provide: KJ_OVERLAY_FOCUS_TRAP_STRATEGY, useFactory: () => tabCycle({ returnFocus: true }) },
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: { class: 'kj-popover-content' },
-  template: `<ng-content />`,
-})
-export class KjPopoverContent {
-  readonly kjSide   = input<KjSide>('bottom');
-  readonly kjAlign  = input<KjAlign>('center');
-  readonly kjOffset = input<number, unknown>(8, { transform: (v) => Number(v) || 8 });
-  readonly kjTrap   = input(false, { transform: booleanAttribute });
-
-  constructor() {
-    const pos = inject(KJ_OVERLAY_POSITION_STRATEGY) as ReturnType<typeof anchoredTo>;
-    pos.configure({ side: this.kjSide, align: this.kjAlign, offset: this.kjOffset });
-    const trap = inject(KJ_OVERLAY_FOCUS_TRAP_STRATEGY) as ReturnType<typeof tabCycle>;
-    trap.configure({ enabled: () => this.kjTrap() });
-  }
-}

package/src/popover/popover-title.ts

@@ -1,39 +0,0 @@
-import { Directive } from '@angular/core';
-
-let _popoverTitleIdCounter = 0;
-/** Allocate a stable id used for the panel's `aria-labelledby`. */
-export function nextPopoverTitleId(): string {
-  return `kj-popover-title-${++_popoverTitleIdCounter}`;
-}
-
-/**
- * Marks the heading element inside the popover content. Generates a stable
- * id so consumer code (or a future panel-level hook) can wire
- * `aria-labelledby`.
- *
- * Mirrors `KjDialogTitle` in the dialog family — applied to whatever heading
- * level the consumer's information architecture wants (`<h2>` … `<h4>`),
- * the directive does not override `role`.
- *
- * @example
- * ```html
- * <kj-popover-content [kjFor]="t">
- *   <h2 kjPopoverTitle>Profile settings</h2>
- *   …
- * </kj-popover-content>
- * ```
- *
- * @doc-category Core/Overlay
- */
-@Directive({
-  selector: '[kjPopoverTitle]',
-  standalone: true,
-  host: {
-    'class': 'kj-popover-title',
-    '[attr.id]': 'titleId',
-  },
-})
-export class KjPopoverTitle {
-  /** Auto-generated id used for the panel's `aria-labelledby`. */
-  readonly titleId = nextPopoverTitleId();
-}

package/src/popover/popover-trigger.ts

@@ -1,40 +0,0 @@
-import { Directive, booleanAttribute, inject, input } from '@angular/core';
-import { KjOverlayTrigger } from '../primitives/overlay/trigger';
-import type { KjOverlayPanel } from '../primitives/overlay/panel';
-import { KjOverlayController } from '../primitives/overlay/controller';
-import {
-  KJ_OVERLAY_TRIGGER_EVENT_STRATEGY,
-  KJ_OVERLAY_PANEL_ROLE,
-} from '../primitives/overlay/tokens';
-import { onClick } from '../primitives/overlay/strategies/trigger-event/on-click';
-
-export type KjPopoverTriggerKind = 'click' | 'hover';
-
-@Directive({
-  selector: '[kjPopoverTrigger]',
-  exportAs: 'kjPopoverTrigger',
-  standalone: true,
-  hostDirectives: [{ directive: KjOverlayTrigger, inputs: ['kjOpen'] }],
-  providers: [
-    KjOverlayController,
-    // For an MVP we resolve at construction; reactive switch is a follow-up.
-    {
-      provide: KJ_OVERLAY_TRIGGER_EVENT_STRATEGY,
-      useFactory: () => onClick(),
-    },
-    { provide: KJ_OVERLAY_PANEL_ROLE, useValue: 'dialog' as const },
-  ],
-})
-export class KjPopoverTrigger {
-  readonly kjTrigger = input<KjPopoverTriggerKind>('click');
-  readonly kjDisabled = input(false, { transform: booleanAttribute });
-
-  private readonly _overlayTrigger = inject(KjOverlayTrigger, { self: true });
-  /** The controller of the composed `KjOverlayTrigger`, exposed for sibling `[kjFor]` panels. */
-  get controller(): KjOverlayController {
-    return this._overlayTrigger.controller;
-  }
-  attachPanel(panel: KjOverlayPanel): void {
-    this._overlayTrigger.attachPanel(panel);
-  }
-}

package/src/popover/popover.spec.ts

@@ -1,59 +0,0 @@
-import { Component } from '@angular/core';
-import { render } from '@testing-library/angular';
-import { describe, it, expect } from 'vitest';
-import { KjPopoverTrigger } from './popover-trigger';
-import { KjPopoverContent } from './popover-content';
-
-describe('KjPopover', () => {
-  it('trigger has aria-haspopup=dialog and aria-expanded=false initially', async () => {
-    @Component({
-      selector: 'kj-pop-host',
-      standalone: true,
-      imports: [KjPopoverTrigger, KjPopoverContent],
-      template: `
-        <button kjPopoverTrigger #t="kjPopoverTrigger">Open</button>
-        <kj-popover-content [kjFor]="t">Hi</kj-popover-content>
-      `,
-    })
-    class Host {}
-    const { container } = await render(Host);
-    const btn = container.querySelector('button')!;
-    expect(btn.getAttribute('aria-haspopup')).toBe('dialog');
-    expect(btn.getAttribute('aria-expanded')).toBe('false');
-  });
-
-  it('panel has role=dialog and is hidden initially', async () => {
-    @Component({
-      selector: 'kj-pop-host',
-      standalone: true,
-      imports: [KjPopoverTrigger, KjPopoverContent],
-      template: `
-        <button kjPopoverTrigger #t="kjPopoverTrigger">Open</button>
-        <kj-popover-content [kjFor]="t">Hi</kj-popover-content>
-      `,
-    })
-    class Host {}
-    const { container } = await render(Host);
-    const panel = container.querySelector('kj-popover-content') as HTMLElement;
-    expect(panel.getAttribute('role')).toBe('dialog');
-    expect(panel.hasAttribute('hidden')).toBe(true);
-  });
-
-  it('kjTrigger="hover" keeps role=dialog and aria-haspopup=dialog', async () => {
-    @Component({
-      selector: 'kj-pop-host',
-      standalone: true,
-      imports: [KjPopoverTrigger, KjPopoverContent],
-      template: `
-        <button kjPopoverTrigger kjTrigger="hover" #t="kjPopoverTrigger">Open</button>
-        <kj-popover-content [kjFor]="t">Hi</kj-popover-content>
-      `,
-    })
-    class Host {}
-    const { container } = await render(Host);
-    const btn = container.querySelector('button')!;
-    const panel = container.querySelector('kj-popover-content') as HTMLElement;
-    expect(btn.getAttribute('aria-haspopup')).toBe('dialog');
-    expect(panel.getAttribute('role')).toBe('dialog');
-  });
-});

package/src/popover/popover.ts

@@ -1,5 +0,0 @@
-export * from './popover-trigger';
-export * from './popover-content';
-export * from './popover-arrow';
-export * from './popover-close';
-export * from './popover-title';

package/src/presets/bind-presets.spec.ts

@@ -1,50 +0,0 @@
-import { InjectionToken } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { describe, expect, it } from 'vitest';
-import { KJ_VARIANT_PRESET } from './variant';
-import { KJ_SIZE_PRESET } from './size';
-import { bindPresets } from './bind-presets';
-
-interface DummyConfig {
-  variants: string[];
-  sizes: string[];
-  defaults: { variant: string; size: string };
-}
-
-const DUMMY_CONFIG = new InjectionToken<DummyConfig>('dummy.config');
-
-describe('bindPresets', () => {
-  it('translates a config token into KJ_VARIANT_PRESET', () => {
-    TestBed.configureTestingModule({
-      providers: [
-        {
-          provide: DUMMY_CONFIG,
-          useValue: {
-            variants: ['a', 'b'],
-            sizes: ['s', 'm'],
-            defaults: { variant: 'b', size: 'm' },
-          },
-        },
-        ...bindPresets(DUMMY_CONFIG),
-      ],
-    });
-    expect(TestBed.inject(KJ_VARIANT_PRESET)).toEqual({ values: ['a', 'b'], default: 'b' });
-  });
-
-  it('translates a config token into KJ_SIZE_PRESET', () => {
-    TestBed.configureTestingModule({
-      providers: [
-        {
-          provide: DUMMY_CONFIG,
-          useValue: {
-            variants: ['a'],
-            sizes: ['s', 'm', 'l'],
-            defaults: { variant: 'a', size: 'l' },
-          },
-        },
-        ...bindPresets(DUMMY_CONFIG),
-      ],
-    });
-    expect(TestBed.inject(KJ_SIZE_PRESET)).toEqual({ values: ['s', 'm', 'l'], default: 'l' });
-  });
-});

package/src/presets/bind-presets.ts

@@ -1,43 +0,0 @@
-import { InjectionToken, Provider, inject } from '@angular/core';
-import { KJ_VARIANT_PRESET } from './variant';
-import { KJ_SIZE_PRESET } from './size';
-
-/**
- * Generic shape every per-component config must expose to be consumable by
- * `bindPresets`. Consumers free to add fields beyond these.
- *
- * @internal
- */
-export interface KjBindablePresetConfig {
-  variants: string[];
-  sizes: string[];
-  defaults: { variant: string; size: string };
-}
-
-/**
- * Returns providers that translate a per-component config token into the
- * shared preset tokens (`KJ_VARIANT_PRESET`, `KJ_SIZE_PRESET`). Spread into a
- * consumer directive's `providers` array.
- *
- * @internal
- */
-export function bindPresets<T extends KjBindablePresetConfig>(
-  configToken: InjectionToken<T>,
-): Provider[] {
-  return [
-    {
-      provide: KJ_VARIANT_PRESET,
-      useFactory: () => {
-        const c = inject(configToken);
-        return { values: c.variants, default: c.defaults.variant };
-      },
-    },
-    {
-      provide: KJ_SIZE_PRESET,
-      useFactory: () => {
-        const c = inject(configToken);
-        return { values: c.sizes, default: c.defaults.size };
-      },
-    },
-  ];
-}

package/src/presets/index.ts

@@ -1,3 +0,0 @@
-export * from './variant';
-export * from './size';
-export * from './bind-presets';

package/src/presets/size.spec.ts

@@ -1,67 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { render } from '@testing-library/angular';
-import { describe, expect, it, vi, afterEach } from 'vitest';
-import { KJ_SIZE_PRESET, KjSize } from './size';
-
-@Component({
-  standalone: true,
-  imports: [KjSize],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<button kjSize [kjSize]="value">x</button>`,
-})
-class HostComponent {
-  value: string | undefined = undefined;
-}
-
-describe('KjSize', () => {
-  afterEach(() => vi.restoreAllMocks());
-
-  it('reflects kjSize input as data-size on the host', async () => {
-    const { getByRole } = await render(`<button kjSize [kjSize]="'lg'">x</button>`, {
-      imports: [KjSize],
-      providers: [{ provide: KJ_SIZE_PRESET, useValue: { values: ['md', 'lg'], default: 'md' } }],
-    });
-    expect(getByRole('button')).toHaveAttribute('data-size', 'lg');
-  });
-
-  it('falls back to KJ_SIZE_PRESET.default when input not set', async () => {
-    TestBed.configureTestingModule({
-      providers: [{ provide: KJ_SIZE_PRESET, useValue: { values: ['xs', 'md'], default: 'md' } }],
-    });
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    const btn = fixture.nativeElement.querySelector('button');
-    expect(btn.getAttribute('data-size')).toBe('md');
-  });
-
-  it('uses the built-in factory default when no provider is registered', async () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    const btn = fixture.nativeElement.querySelector('button');
-    expect(btn.getAttribute('data-size')).toBe('md');
-  });
-
-  it('warns once in dev mode for an unknown value', async () => {
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
-    TestBed.configureTestingModule({
-      providers: [{ provide: KJ_SIZE_PRESET, useValue: { values: ['xs', 'md'], default: 'md' } }],
-    });
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.componentInstance.value = 'bogus';
-    fixture.detectChanges();
-    expect(warn).toHaveBeenCalledTimes(1);
-    expect(warn.mock.calls[0][0]).toMatch(/unknown size/i);
-  });
-
-  it('does not warn for a known value', async () => {
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
-    TestBed.configureTestingModule({
-      providers: [{ provide: KJ_SIZE_PRESET, useValue: { values: ['xs', 'md'], default: 'md' } }],
-    });
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.componentInstance.value = 'xs';
-    fixture.detectChanges();
-    expect(warn).not.toHaveBeenCalled();
-  });
-});

package/src/presets/size.ts

@@ -1,59 +0,0 @@
-import { Directive, InjectionToken, InputSignalWithTransform, effect, inject, input, isDevMode } from '@angular/core';
-
-/**
- * Shape of the preset configuration consumed by `KjSize`. One per consumer
- * directive, provided via `bindPresets` from a per-component config token.
- *
- * @internal
- */
-export interface KjSizePreset {
-  values: string[];
-  default: string;
-}
-
-/**
- * DI token holding the size preset for the current consumer's injector scope.
- * Resolved by `KjSize` at construction time.
- *
- * Default factory: `{ values: ['md'], default: 'md' }`.
- *
- * @internal
- */
-export const KJ_SIZE_PRESET = new InjectionToken<KjSizePreset>('kj.size.preset', {
-  factory: () => ({ values: ['md'], default: 'md' }),
-});
-
-/**
- * Internal preset directive composed via `hostDirectives` by every stylistic
- * component to expose a configurable `size` input that reflects to a
- * `data-size` host attribute. App code does not import this directly.
- *
- * @internal
- */
-@Directive({
-  selector: '[kjSize]',
-  standalone: true,
-  host: { '[attr.data-size]': 'kjSize()' },
-})
-export class KjSize {
-  private readonly preset = inject(KJ_SIZE_PRESET);
-
-  // See `KjVariant.kjVariant` for why the field type is annotated explicitly.
-  readonly kjSize: InputSignalWithTransform<string, string | undefined> = input(
-    this.preset.default,
-    { transform: (v?: string) => v || this.preset.default },
-  );
-
-  constructor() {
-    if (isDevMode()) {
-      effect(() => {
-        const v = this.kjSize();
-        if (!this.preset.values.includes(v)) {
-          console.warn(
-            `[kj] unknown size "${v}". Allowed values: ${this.preset.values.join(', ')}.`,
-          );
-        }
-      });
-    }
-  }
-}

package/src/presets/variant.spec.ts

@@ -1,72 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { render } from '@testing-library/angular';
-import { describe, expect, it, vi, afterEach } from 'vitest';
-import { KJ_VARIANT_PRESET, KjVariant } from './variant';
-
-@Component({
-  standalone: true,
-  imports: [KjVariant],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<button kjVariant [kjVariant]="value">x</button>`,
-})
-class HostComponent {
-  value: string | undefined = undefined;
-}
-
-describe('KjVariant', () => {
-  afterEach(() => vi.restoreAllMocks());
-
-  it('reflects kjVariant input as data-variant on the host', async () => {
-    const { getByRole } = await render(`<button kjVariant [kjVariant]="'destructive'">x</button>`, {
-      imports: [KjVariant],
-      providers: [
-        {
-          provide: KJ_VARIANT_PRESET,
-          useValue: { values: ['default', 'destructive'], default: 'default' },
-        },
-      ],
-    });
-    expect(getByRole('button')).toHaveAttribute('data-variant', 'destructive');
-  });
-
-  it('falls back to KJ_VARIANT_PRESET.default when input not set', async () => {
-    TestBed.configureTestingModule({
-      providers: [{ provide: KJ_VARIANT_PRESET, useValue: { values: ['a', 'b'], default: 'b' } }],
-    });
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    const btn = fixture.nativeElement.querySelector('button');
-    expect(btn.getAttribute('data-variant')).toBe('b');
-  });
-
-  it('uses the built-in factory default when no provider is registered', async () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    const btn = fixture.nativeElement.querySelector('button');
-    expect(btn.getAttribute('data-variant')).toBe('default');
-  });
-
-  it('warns once in dev mode for an unknown value', async () => {
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
-    TestBed.configureTestingModule({
-      providers: [{ provide: KJ_VARIANT_PRESET, useValue: { values: ['a', 'b'], default: 'a' } }],
-    });
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.componentInstance.value = 'bogus';
-    fixture.detectChanges();
-    expect(warn).toHaveBeenCalledTimes(1);
-    expect(warn.mock.calls[0][0]).toMatch(/unknown variant/i);
-  });
-
-  it('does not warn for a known value', async () => {
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
-    TestBed.configureTestingModule({
-      providers: [{ provide: KJ_VARIANT_PRESET, useValue: { values: ['a', 'b'], default: 'a' } }],
-    });
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.componentInstance.value = 'b';
-    fixture.detectChanges();
-    expect(warn).not.toHaveBeenCalled();
-  });
-});