@kouji-ui/core 0.1.1 → 0.1.2

package/src/public-api.ts

@@ -1,84 +0,0 @@
-// Public API for @kouji-ui/core
-
-// -- Primitives --
-export * from './primitives/index';
-
-// -- Accessibility utilities --
-export * from './a11y/index';
-
-// -- Internal presets (composed via hostDirectives; filtered from docs) --
-export * from './presets/index';
-
-// -- Foundation components --
-export * from './button/index';
-export * from './button-group/index';
-export * from './input/index';
-export * from './input-group/index';
-export * from './input-mask/index';
-export * from './input-otp/index';
-export * from './number-input/index';
-export * from './slider/index';
-export * from './password-input/index';
-export * from './textarea/index';
-export * from './checkbox/index';
-export * from './radio/index';
-export * from './toggle/index';
-export * from './badge/index';
-export * from './overlay-badge/index';
-export * from './avatar/index';
-export * from './kbd/index';
-export * from './icon/index';
-
-// -- Data display --
-export * from './list/index';
-export * from './carousel/index';
-export * from './chat/index';
-export * from './typography/index';
-export * from './tag/index';
-
-// -- Overlay components --
-export * from './dialog/index';
-export * from './drawer/index';
-export * from './tooltip/index';
-export * from './popover/index';
-export * from './confirm-popup/index';
-export * from './dropdown-menu/index';
-export * from './speed-dial/index';
-export * from './toast/index';
-export * from './command-palette/index';
-
-// -- Data components --
-export * from './table/index';
-export * from './field/index';
-export * from './file-upload/index';
-export * from './form/index';
-export * from './tabs/index';
-export * from './accordion/index';
-export * from './stepper/index';
-export * from './select/index';
-export * from './combobox/index';
-export * from './cascade-select/index';
-export * from './tree-select/index';
-export * from './time-picker/index';
-export * from './color-picker/index';
-export * from './calendar/index';
-export * from './date-picker/index';
-
-// -- Charts --
-export * from './chart/index';
-
-// -- Layout components --
-export * from './divider/index';
-export * from './skeleton/index';
-
-// -- Navigation --
-export * from './link/index';
-export * from './breadcrumb/index';
-export * from './menubar/index';
-export * from './pagination/index';
-
-// -- Feedback components --
-export * from './spinner/index';
-export * from './progress-bar/index';
-
-export * from './alert/index';

package/src/radio/index.ts

@@ -1,2 +0,0 @@
-export { KjRadioGroup, KjRadio } from './radio';
-export { KJ_RADIO_GROUP, type KjRadioContext } from './radio.context';

package/src/radio/radio.context.ts

@@ -1,3 +0,0 @@
-import { InjectionToken, Signal } from '@angular/core';
-export interface KjRadioContext { value: Signal<unknown>; select: (value: unknown) => void; }
-export const KJ_RADIO_GROUP = new InjectionToken<KjRadioContext>('KjRadioGroup');

package/src/radio/radio.spec.ts

@@ -1,36 +0,0 @@
-import { render, fireEvent } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { KjRadioGroup, KjRadio } from './radio';
-
-expect.extend(toHaveNoViolations);
-
-const template = `<div kjRadioGroup [(kjValue)]="selected" aria-label="Opts"><div kjRadio [kjRadioValue]="'a'" tabindex="0">A</div><div kjRadio [kjRadioValue]="'b'" tabindex="-1">B</div></div>`;
-const imports = [KjRadioGroup, KjRadio];
-
-describe('KjRadioGroup', () => {
-  it('has radiogroup role', async () => {
-    const { getByRole } = await render(template, { imports, componentProperties: { selected: 'a' } });
-    expect(getByRole('radiogroup')).toBeInTheDocument();
-  });
-
-  it('radio items have role=radio', async () => {
-    const { getAllByRole } = await render(template, { imports, componentProperties: { selected: 'a' } });
-    expect(getAllByRole('radio')).toHaveLength(2);
-  });
-
-  it('selected radio has aria-checked=true', async () => {
-    const { getAllByRole } = await render(template, { imports, componentProperties: { selected: 'a' } });
-    expect(getAllByRole('radio')[0]).toHaveAttribute('aria-checked', 'true');
-  });
-
-  it('clicking radio selects it', async () => {
-    const { getAllByRole } = await render(template, { imports, componentProperties: { selected: 'a' } });
-    fireEvent.click(getAllByRole('radio')[1]);
-    expect(getAllByRole('radio')[1]).toHaveAttribute('aria-checked', 'true');
-  });
-
-  it('passes axe audit', async () => {
-    const { container } = await render(template, { imports, componentProperties: { selected: 'a' } });
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/radio/radio.ts

@@ -1,66 +0,0 @@
-import { Directive, computed, inject, input, model } from '@angular/core';
-import { KJ_RADIO_GROUP, KjRadioContext } from './radio.context';
-import { KjDisabled, KjFocusRing, KjFormControl } from '../primitives';
-
-/**
- * Container for a group of radio buttons. Manages the selected value.
- * @example
- * ```html
- * <div kjRadioGroup [(kjValue)]="size" aria-label="Size">
- *   <div kjRadio [kjRadioValue]="'s'" tabindex="0">Small</div>
- * </div>
- * ```
- * @doc-category Core/Inputs
- * @doc
- * @doc-name radio
- */
-@Directive({
-  selector: '[kjRadioGroup]', standalone: true,
-  providers: [{ provide: KJ_RADIO_GROUP, useExisting: KjRadioGroup }],
-  host: { role: 'radiogroup' },
-})
-export class KjRadioGroup implements KjRadioContext {
-  kjValue = model<unknown>(undefined);
-  readonly value = this.kjValue.asReadonly();
-  select(val: unknown): void { this.kjValue.set(val); }
-}
-
-/**
- * Individual radio button within a `[kjRadioGroup]`. Includes CVA for forms integration.
- *
- * Owns `role="radio"`, `aria-checked`, Space/Enter activation, and Angular
- * forms integration via the `KjFormControl` host directive so each radio
- * participates in reactive and template-driven forms.
- *
- * @example `<div kjRadio [kjRadioValue]="'a'" tabindex="0">Option A</div>`
- * @doc-category Core/Inputs
- * @doc
- * @doc-name radio
- * @doc-description Individual radio button within a radio group with accessible activation and forms support.
- * @doc-is-main
- */
-@Directive({
-  selector: '[kjRadio]', standalone: true,
-  hostDirectives: [
-    { directive: KjDisabled, inputs: ['kjDisabled'] },
-    KjFocusRing,
-    KjFormControl,
-  ],
-  host: {
-    role: 'radio',
-    '[attr.aria-checked]': 'checked().toString()',
-    '[attr.data-checked]': 'checked() ? "" : null',
-    '(click)': 'select()',
-    '(keydown.space)': 'onSpace($event)',
-    '(keydown.enter)': 'select()',
-    '(blur)': 'formCtrl.notifyTouched()',
-  },
-})
-export class KjRadio {
-  private readonly group = inject(KJ_RADIO_GROUP);
-  readonly formCtrl = inject(KjFormControl);
-  kjRadioValue = input.required<unknown>();
-  readonly checked = computed(() => this.group.value() === this.kjRadioValue());
-  select(): void { this.group.select(this.kjRadioValue()); this.formCtrl.notifyChange(this.kjRadioValue()); }
-  onSpace(e: Event): void { e.preventDefault(); this.select(); }
-}

package/src/select/index.ts

@@ -1,4 +0,0 @@
-export * from './select-root';
-export * from './select-trigger';
-export * from './select-content';
-export * from './select-option';

package/src/select/select-content.ts

@@ -1,69 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ViewEncapsulation,
-  inject,
-  input,
-} from '@angular/core';
-import { KjOverlayPanel } from '../primitives/overlay/panel';
-import {
-  KJ_OVERLAY_MOUNT_STRATEGY,
-  KJ_OVERLAY_POSITION_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 { KjListNavigator, injectSelectionModel } from '../primitives/list';
-
-/**
- * Listbox panel for `KjSelect`. Composes `KjOverlayPanel` for
- * mount/position/role wiring and `KjListNavigator` for the WAI-ARIA APG
- * listbox keyboard + active-descendant contract. Reflects
- * `KjSelectionModel.mode()` as `aria-multiselectable`.
- *
- * @doc-category Core/Inputs
- */
-@Component({
-  selector: 'kj-select-content',
-  standalone: true,
-  hostDirectives: [
-    { directive: KjOverlayPanel, inputs: ['kjFor'] },
-    KjListNavigator,
-  ],
-  providers: [
-    { provide: KJ_OVERLAY_PANEL_ROLE, useValue: 'listbox' as const },
-    { provide: KJ_OVERLAY_MOUNT_STRATEGY, useFactory: () => bodyPortal() },
-    { provide: KJ_OVERLAY_POSITION_STRATEGY, useFactory: () => anchoredTo() },
-  ],
-  host: {
-    '[attr.aria-multiselectable]':
-      'selection.mode() === "multi" ? "true" : null',
-  },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  template: `<ng-content />`,
-})
-export class KjSelectContent {
-  /** @internal — for the aria-multiselectable host binding. */
-  protected readonly selection = injectSelectionModel<unknown>();
-
-  /** Which side of the trigger to anchor on. */
-  readonly kjSide = input<KjSide>('bottom');
-  /** Alignment along the chosen side. */
-  readonly kjAlign = input<KjAlign>('start');
-  /** Pixel offset between trigger and panel. */
-  readonly kjOffset = input<number, unknown>(4, {
-    transform: v => Number(v) || 4,
-  });
-
-  constructor() {
-    const pos = inject(KJ_OVERLAY_POSITION_STRATEGY) as ReturnType<typeof anchoredTo>;
-    pos.configure({
-      side: this.kjSide,
-      align: this.kjAlign,
-      offset: this.kjOffset,
-      matchTriggerWidth: 'min',
-    });
-  }
-}

package/src/select/select-option.ts

@@ -1,35 +0,0 @@
-import { Directive } from '@angular/core';
-import { KjListItem } from '../primitives/list';
-
-/**
- * Individual option inside a `<kj-select-content>`. Public inputs
- * (`kjOptionValue`, `kjOptionLabel`) are aliased onto the composed
- * `KjListItem`'s `kjItemValue` / `kjItemLabel`. Activation (click /
- * Enter / Space), selection-model toggle, and overlay dismissal are
- * all owned by `KjListItem` + `KjSelect.afterSelect` — this directive
- * is just role + class + the input aliasing.
- *
- * @example
- * ```html
- * <div kjOption [kjOptionValue]="'apple'">Apple</div>
- * ```
- * @doc-category Core/Inputs
- */
-@Directive({
-  selector: '[kjOption]',
-  standalone: true,
-  hostDirectives: [
-    {
-      directive: KjListItem,
-      inputs: [
-        'kjItemValue:kjOptionValue',
-        'kjItemLabel:kjOptionLabel',
-      ],
-    },
-  ],
-  host: {
-    'class': 'kj-option',
-    'role': 'option',
-  },
-})
-export class KjOption {}

package/src/select/select-root.ts

@@ -1,129 +0,0 @@
-import {
-  Directive,
-  ElementRef,
-  InjectionToken,
-  computed,
-  contentChildren,
-  forwardRef,
-  inject,
-  input,
-  model,
-  signal,
-  type Signal,
-  type WritableSignal,
-} from '@angular/core';
-import { KjOverlayController } from '../primitives/overlay/controller';
-import {
-  KJ_LIST_NAVIGATOR_CONFIG,
-  KjListItem,
-  KjSelectionModel,
-  KjTypeAhead,
-  type KjCompareFn,
-  type KjListNavigatorConfig,
-  type KjListSelectionMode,
-} from '../primitives/list';
-
-export const KJ_SELECT = new InjectionToken<KjSelect>('KjSelect');
-
-/**
- * Root select container. Implements `KjListNavigatorConfig` (items,
- * value, mode, compareBy) and provides itself under
- * `KJ_LIST_NAVIGATOR_CONFIG` via `forwardRef`. Downstream primitives
- * (`KjSelectionModel`, `KjListNavigator`, `KjTypeAhead`) read whatever
- * they need from this single contract.
- *
- * `KjSelect` itself does NOT inject `KjSelectionModel` — doing so at
- * construction would create a runtime cycle (the model's
- * `inject(KJ_LIST_NAVIGATOR_CONFIG)` would try to resolve a not-yet-
- * constructed `KjSelect` instance, regardless of `forwardRef`). Instead,
- * the model is constructed lazily when a child (`KjOption`, `KjListItem`)
- * first asks for it, by which point `KjSelect` is fully built.
- *
- * @doc-category Core/Inputs
- */
-@Directive({
-  selector: '[kjSelect]',
-  standalone: true,
-  exportAs: 'kjSelect',
-  providers: [
-    { provide: KJ_SELECT, useExisting: forwardRef(() => KjSelect) },
-    { provide: KJ_LIST_NAVIGATOR_CONFIG, useExisting: forwardRef(() => KjSelect) },
-    KjSelectionModel,
-    KjTypeAhead,
-    KjOverlayController,
-  ],
-})
-export class KjSelect implements KjListNavigatorConfig {
-  /** Two-way bindable selected value (single) or values (multi). */
-  readonly kjSelectValue = model<unknown>(undefined);
-
-  /**
-   * Implements `KjListNavigatorConfig.value`. The selection model reads
-   * and writes through this same signal — one source of truth, no
-   * bridging effects.
-   */
-  readonly value = this.kjSelectValue as unknown as WritableSignal<
-    unknown | readonly unknown[] | null
-  >;
-
-  /** Optional custom equality fn. Defaults to `Object.is`. */
-  readonly kjCompareBy = input<KjCompareFn<unknown>>(Object.is as KjCompareFn<unknown>);
-
-  /** @internal — written by `KjSelectTrigger`'s `kjMultiple` input. */
-  readonly _multiple = signal(false);
-  /** Whether multi-select is enabled. */
-  readonly multiple = this._multiple.asReadonly();
-
-  /** @internal — set by `KjSelectTrigger` at construction time. */
-  readonly _triggerEl = signal<ElementRef<HTMLElement> | null>(null);
-  /**
-   * Element ref of the registered trigger button. Resolves the moment
-   * `KjSelectTrigger` constructs (no view-query lifecycle wait), so
-   * consumers can call `focus()` synchronously from `effect()` blocks
-   * even when the select is mounted dynamically.
-   */
-  readonly triggerEl = this._triggerEl.asReadonly();
-
-  /** Move keyboard focus to the trigger. No-op if no trigger registered. */
-  focus(): void {
-    this._triggerEl()?.nativeElement.focus();
-  }
-
-  /** All `KjListItem`s under this select — source for navigator + type-ahead. */
-  readonly items = contentChildren(KjListItem, { descendants: true });
-
-  /** Implements `KjListNavigatorConfig.mode`. */
-  readonly mode: Signal<KjListSelectionMode> = computed(() =>
-    this._multiple() ? 'multi' : 'single',
-  );
-
-  /** Implements `KjListNavigatorConfig.compareBy`. */
-  readonly compareBy = this.kjCompareBy;
-
-  private readonly controller = inject(KjOverlayController);
-
-  /** Whether the overlay is open. */
-  readonly open = this.controller.isOpen;
-
-  /** Directly-injected selection model; wired via `bind()` below. */
-  private readonly _selection = inject(KjSelectionModel);
-
-  constructor() {
-    this._selection.bind({
-      value:     this.value,
-      items:     this.items,
-      mode:      this.mode,
-      compareBy: this.compareBy,
-    });
-  }
-
-  /**
-   * Implements `KjListNavigatorConfig.afterSelect`. Called by
-   * `KjListItem` right after it toggles the shared selection model.
-   * In single mode (the only mode where `closeRequested` is `true`)
-   * we dismiss the overlay; multi mode keeps it open.
-   */
-  afterSelect(_: unknown, closeRequested: boolean): void {
-    if (closeRequested) this.controller.close('programmatic');
-  }
-}

package/src/select/select-trigger.ts

@@ -1,93 +0,0 @@
-import {
-  Directive,
-  ElementRef,
-  booleanAttribute,
-  effect,
-  inject,
-  input,
-} from '@angular/core';
-import { KjFocusRing } from '../primitives';
-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,
-  type KjTriggerEventStrategy,
-} from '../primitives/overlay/tokens';
-import { onClick } from '../primitives/overlay/strategies/trigger-event/on-click';
-import { KJ_SELECT } from './select-root';
-
-/**
- * Wraps `onClick()` and forces `ariaHasPopup` to `'listbox'` so the trigger
- * advertises its panel role to assistive tech.
- */
-function listboxClickTrigger(): KjTriggerEventStrategy {
-  const inner = onClick();
-  return {
-    ariaHasPopup: 'listbox',
-    attach: c => inner.attach(c),
-    bindToggle: t => inner.bindToggle(t),
-    onOpen: () => inner.onOpen?.(),
-    onClose: () => inner.onClose?.(),
-    detach: () => inner.detach(),
-  };
-}
-
-/**
- * Trigger directive for `KjSelectContent`. Composes the overlay
- * `KjOverlayTrigger` host directive (which wires `aria-expanded`,
- * `aria-controls`, `aria-haspopup`) and forwards the `kjMultiple` input
- * onto the umbrella `KjSelect` root.
- *
- * The shared `KjOverlayController` is provided by the `KjSelect` root
- * directive, not here — so option clicks can call `controller.close()`
- * directly through the same instance the trigger is wired to.
- *
- * @doc-category Core/Inputs
- */
-@Directive({
-  selector: '[kjSelectTrigger]',
-  exportAs: 'kjSelectTrigger',
-  standalone: true,
-  hostDirectives: [
-    KjFocusRing,
-    { directive: KjOverlayTrigger, inputs: ['kjOpen'] },
-  ],
-  providers: [
-    {
-      provide: KJ_OVERLAY_TRIGGER_EVENT_STRATEGY,
-      useFactory: () => listboxClickTrigger(),
-    },
-    { provide: KJ_OVERLAY_PANEL_ROLE, useValue: 'listbox' as const },
-  ],
-})
-export class KjSelectTrigger {
-  /** @internal — same instance as the one provided on KjSelect root. */
-  readonly controller = inject(KjOverlayController);
-  private readonly select = inject(KJ_SELECT, { optional: true });
-
-  /** Whether the listbox supports multiple selection (absorbs `multi-select`). */
-  readonly kjMultiple = input(false, { transform: booleanAttribute });
-  /** Disabled state (advisory; downstream styling). */
-  readonly kjDisabled = input(false, { transform: booleanAttribute });
-
-  private readonly hostEl = inject(ElementRef<HTMLElement>);
-
-  constructor() {
-    // Forward kjMultiple onto the parent KjSelect (when present) so options
-    // and content can read a single source of truth.
-    effect(() => {
-      this.select?._multiple.set(this.kjMultiple());
-    });
-    // Register the trigger's host element with the parent KjSelect so
-    // consumers (cell editors, dialogs, custom integrations) can call
-    // `KjSelect.focus()` without a view-query round-trip.
-    this.select?._triggerEl.set(this.hostEl);
-  }
-
-  private readonly _overlayTrigger = inject(KjOverlayTrigger, { self: true });
-  attachPanel(panel: KjOverlayPanel): void {
-    this._overlayTrigger.attachPanel(panel);
-  }
-}

package/src/select/select.spec.ts

@@ -1,138 +0,0 @@
-import { Component } from '@angular/core';
-import { render } from '@testing-library/angular';
-import { describe, it, expect } from 'vitest';
-import { KjSelect, KjSelectTrigger, KjSelectContent, KjOption } from './select';
-
-describe('KjSelect', () => {
-  it('panel exposes role=listbox', async () => {
-    @Component({
-      selector: 'kj-sel-host',
-      standalone: true,
-      imports: [KjSelect, KjSelectTrigger, KjSelectContent, KjOption],
-      template: `
-        <div kjSelect>
-          <button kjSelectTrigger #t="kjSelectTrigger">Open</button>
-          <kj-select-content [kjFor]="t">
-            <div kjOption [kjOptionValue]="'a'">A</div>
-          </kj-select-content>
-        </div>
-      `,
-    })
-    class Host {}
-    const { container } = await render(Host);
-    const panel = container.querySelector('kj-select-content') as HTMLElement;
-    expect(panel.getAttribute('role')).toBe('listbox');
-  });
-
-  it('trigger advertises aria-haspopup=listbox', async () => {
-    @Component({
-      selector: 'kj-sel-host',
-      standalone: true,
-      imports: [KjSelect, KjSelectTrigger, KjSelectContent, KjOption],
-      template: `
-        <div kjSelect>
-          <button kjSelectTrigger #t="kjSelectTrigger">Open</button>
-          <kj-select-content [kjFor]="t">
-            <div kjOption [kjOptionValue]="'a'">A</div>
-          </kj-select-content>
-        </div>
-      `,
-    })
-    class Host {}
-    const { container } = await render(Host);
-    const btn = container.querySelector('button')!;
-    expect(btn.getAttribute('aria-haspopup')).toBe('listbox');
-    expect(btn.getAttribute('aria-expanded')).toBe('false');
-  });
-
-  it('panel reflects aria-multiselectable when kjMultiple is set on trigger', async () => {
-    @Component({
-      selector: 'kj-sel-host',
-      standalone: true,
-      imports: [KjSelect, KjSelectTrigger, KjSelectContent, KjOption],
-      template: `
-        <div kjSelect>
-          <button kjSelectTrigger kjMultiple #t="kjSelectTrigger">Open</button>
-          <kj-select-content [kjFor]="t">
-            <div kjOption [kjOptionValue]="'a'">A</div>
-            <div kjOption [kjOptionValue]="'b'">B</div>
-          </kj-select-content>
-        </div>
-      `,
-    })
-    class Host {}
-    const { container } = await render(Host);
-    const panel = container.querySelector('kj-select-content') as HTMLElement;
-    expect(panel.getAttribute('aria-multiselectable')).toBe('true');
-  });
-
-  it('panel omits aria-multiselectable in single mode', async () => {
-    @Component({
-      selector: 'kj-sel-host',
-      standalone: true,
-      imports: [KjSelect, KjSelectTrigger, KjSelectContent, KjOption],
-      template: `
-        <div kjSelect>
-          <button kjSelectTrigger #t="kjSelectTrigger">Open</button>
-          <kj-select-content [kjFor]="t">
-            <div kjOption [kjOptionValue]="'a'">A</div>
-          </kj-select-content>
-        </div>
-      `,
-    })
-    class Host {}
-    const { container } = await render(Host);
-    const panel = container.querySelector('kj-select-content') as HTMLElement;
-    expect(panel.hasAttribute('aria-multiselectable')).toBe(false);
-  });
-
-  it('options carry role=option', async () => {
-    @Component({
-      selector: 'kj-sel-host',
-      standalone: true,
-      imports: [KjSelect, KjSelectTrigger, KjSelectContent, KjOption],
-      template: `
-        <div kjSelect>
-          <button kjSelectTrigger #t="kjSelectTrigger">Open</button>
-          <kj-select-content [kjFor]="t">
-            <div kjOption [kjOptionValue]="'a'">A</div>
-            <div kjOption [kjOptionValue]="'b'">B</div>
-          </kj-select-content>
-        </div>
-      `,
-    })
-    class Host {}
-    const { container } = await render(Host);
-    const opts = container.querySelectorAll('[kjOption]');
-    expect(opts.length).toBe(2);
-    opts.forEach(o => expect(o.getAttribute('role')).toBe('option'));
-  });
-
-  it('ArrowDown sets aria-activedescendant on the listbox panel', async () => {
-    @Component({
-      standalone: true,
-      imports: [KjSelect, KjSelectTrigger, KjSelectContent, KjOption],
-      template: `
-        <div kjSelect>
-          <button kjSelectTrigger #t="kjSelectTrigger">Open</button>
-          <kj-select-content [kjFor]="t">
-            <div kjOption [kjOptionValue]="'a'">A</div>
-            <div kjOption [kjOptionValue]="'b'">B</div>
-          </kj-select-content>
-        </div>
-      `,
-    })
-    class Host {}
-    const { container, fixture } = await render(Host);
-    // open the overlay
-    const trigger = container.querySelector('button') as HTMLElement;
-    trigger.click();
-    fixture.detectChanges();
-    // body-portal puts panel into document.body; fall back to container if null
-    let panel = document.querySelector('kj-select-content') as HTMLElement | null;
-    if (!panel) panel = container.querySelector('kj-select-content') as HTMLElement;
-    panel.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
-    fixture.detectChanges();
-    expect(panel.getAttribute('aria-activedescendant')).toMatch(/^kj-list-item-\d+$/);
-  });
-});

package/src/select/select.ts

@@ -1,4 +0,0 @@
-export * from './select-root';
-export * from './select-trigger';
-export * from './select-content';
-export * from './select-option';

package/src/skeleton/index.ts

@@ -1,5 +0,0 @@
-export {
-  KjSkeleton,
-  type KjSkeletonAnimation,
-  type KjSkeletonShape,
-} from './skeleton';