@kouji-ui/core 0.0.4 → 0.1.1

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

@@ -0,0 +1,107 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjTooltipTrigger, KjTooltipContent } from '../tooltip';
+import { KjButton } from '../../button/button';
+
+@Component({
+  selector: 'kj-example-tooltip-retro',
+  standalone: true,
+  imports: [KjTooltipTrigger, KjTooltipContent, KjButton],
+  styleUrls: ['../../styles/docs-themes.css'],
+  styles: [
+    `
+      :host {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 5rem 3rem;
+        background: var(--kj-bg);
+        font-family: var(--kj-font);
+        min-height: 180px;
+        color: var(--kj-text);
+      }
+      .row {
+        display: flex;
+        gap: 1.5rem;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: center;
+      }
+      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='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);
+      }
+      :global(kj-tooltip-content) {
+        background: var(--kj-text);
+        color: var(--kj-bg);
+        padding: 0.2rem 0.5rem;
+        font-size: 0.6875rem;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+        white-space: nowrap;
+        pointer-events: none;
+        border: 1px solid var(--kj-border);
+        box-shadow: var(--kj-shadow-sm);
+      }
+    `,
+  ],
+  host: { class: 'kj-theme-retro' },
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <div class="row">
+      <button kjButton [kjVariant]="'default'" kjTooltipTrigger #t1="kjTooltipTrigger">
+        Default
+      </button>
+      <kj-tooltip-content [kjFor]="t1">Copy to clipboard</kj-tooltip-content>
+
+      <button kjButton [kjVariant]="'link'" kjTooltipTrigger #t2="kjTooltipTrigger">Link</button>
+      <kj-tooltip-content [kjFor]="t2" [kjSide]="'bottom'">Opens below</kj-tooltip-content>
+
+      <button kjButton [kjVariant]="'ghost'" kjTooltipTrigger #t3="kjTooltipTrigger">Ghost</button>
+      <kj-tooltip-content [kjFor]="t3" [kjSide]="'right'">Opens right</kj-tooltip-content>
+    </div>
+  `,
+})
+export class TooltipRetroExample {}

package/src/tooltip/index.ts

@@ -1,5 +1,4 @@
-export {
-  KjTooltipContent,
-  KjTooltipTrigger,
-  type KjTooltipSide,
-} from './tooltip';
+export * from './tooltip-trigger';
+export * from './tooltip-content';
+export * from './tooltip-arrow';
+export * from './tooltip-group';

package/src/tooltip/tooltip-arrow.ts

@@ -0,0 +1,31 @@
+import { Directive } from '@angular/core';
+
+/**
+ * Optional decorative arrow rendered inside `[kjTooltipContent]`.
+ *
+ * Pure styling hook — has no behaviour. The wrapper / consumer CSS reads
+ * `data-side` from the parent `[kjTooltipContent]` to position and rotate
+ * the arrow. `aria-hidden="true"` keeps it out of the AT tree.
+ *
+ * @example
+ * ```html
+ * <ng-template #tip>
+ *   <div kjTooltipContent>
+ *     Save to disk
+ *     <span kjTooltipArrow></span>
+ *   </div>
+ * </ng-template>
+ * ```
+ *
+ * @doc-category Core/Overlay
+ */
+@Directive({
+  selector: '[kjTooltipArrow]',
+  standalone: true,
+  host: {
+    'class': 'kj-tooltip-arrow',
+    'aria-hidden': 'true',
+    'data-kj-tooltip-arrow': '',
+  },
+})
+export class KjTooltipArrow {}

package/src/tooltip/tooltip-content.ts

@@ -0,0 +1,38 @@
+// tooltip-content.ts
+import { Component, ChangeDetectionStrategy, 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';
+
+@Component({
+  selector: 'kj-tooltip-content',
+  standalone: true,
+  hostDirectives: [
+    { directive: KjOverlayPanel, inputs: ['kjFor'] },
+  ],
+  providers: [
+    { provide: KJ_OVERLAY_PANEL_ROLE, useValue: 'tooltip' as const },
+    { provide: KJ_OVERLAY_MOUNT_STRATEGY, useFactory: () => bodyPortal() },
+    { provide: KJ_OVERLAY_POSITION_STRATEGY, useFactory: () => anchoredTo() },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'kj-tooltip-content' },
+  template: `<ng-content />`,
+})
+export class KjTooltipContent {
+  readonly kjSide   = input<KjSide>('top');
+  readonly kjAlign  = input<KjAlign>('center');
+  readonly kjOffset = input<number, unknown>(8, { transform: (v) => Number(v) || 8 });
+
+  constructor() {
+    const pos = inject(KJ_OVERLAY_POSITION_STRATEGY) as ReturnType<typeof anchoredTo>;
+    pos.configure({ side: this.kjSide, align: this.kjAlign, offset: this.kjOffset });
+  }
+}

package/src/tooltip/tooltip-group.ts

@@ -0,0 +1,32 @@
+import { Directive, output } from '@angular/core';
+
+/**
+ * Coordinates "skip-delay" timing between sibling tooltips.
+ *
+ * **Note (overlay primitives migration):** The skip-delay coordination
+ * context was removed during the overlay-primitives migration; this
+ * directive is currently a no-op marker that preserves the public selector
+ * and analytics outputs. Re-instating coordinated open delays is a
+ * follow-up — track via the trigger-event strategy on `KjTooltipTrigger`.
+ *
+ * @example
+ * ```html
+ * <div kjTooltipGroup>
+ *   <button kjButton [kjTooltip]="'Bold'">B</button>
+ *   <button kjButton [kjTooltip]="'Italic'">I</button>
+ * </div>
+ * ```
+ *
+ * @doc-category Core/Overlay
+ */
+@Directive({
+  selector: '[kjTooltipGroup]',
+  standalone: true,
+  exportAs: 'kjTooltipGroup',
+})
+export class KjTooltipGroup {
+  /** Fires whenever any tooltip in this group opens. Convenience analytics hook. */
+  readonly kjTooltipOpened = output<void>();
+  /** Fires whenever any tooltip in this group closes. Convenience analytics hook. */
+  readonly kjTooltipClosed = output<void>();
+}

package/src/tooltip/tooltip-trigger.ts

@@ -0,0 +1,47 @@
+import { Directive, inject, input, booleanAttribute } 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 { onHover, type KjOnHoverStrategy } from '../primitives/overlay/strategies/trigger-event/on-hover';
+
+@Directive({
+  selector: '[kjTooltipTrigger]',
+  exportAs: 'kjTooltipTrigger',
+  standalone: true,
+  hostDirectives: [
+    { directive: KjOverlayTrigger, inputs: ['kjOpen'] },
+  ],
+  providers: [
+    KjOverlayController,
+    {
+      provide: KJ_OVERLAY_TRIGGER_EVENT_STRATEGY,
+      useFactory: () => onHover({ openDelay: 200, closeDelay: 0 }),
+    },
+    { provide: KJ_OVERLAY_PANEL_ROLE, useValue: 'tooltip' as const },
+  ],
+})
+export class KjTooltipTrigger {
+  readonly kjOpenDelay  = input<number, unknown>(200, { transform: (v) => Number(v) || 200 });
+  readonly kjCloseDelay = input<number, unknown>(0,   { transform: (v) => Number(v) || 0 });
+  readonly kjDisabled   = input(false, { transform: booleanAttribute });
+
+  constructor() {
+    const strat = inject(KJ_OVERLAY_TRIGGER_EVENT_STRATEGY) as KjOnHoverStrategy;
+    if ('configure' in strat) {
+      strat.configure({ openDelay: this.kjOpenDelay, closeDelay: this.kjCloseDelay });
+    }
+  }
+
+  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/tooltip/tooltip.spec.ts

@@ -1,104 +1,40 @@
-import { render, fireEvent } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { KjTooltipContent, KjTooltipTrigger } from './tooltip';
-
-expect.extend(toHaveNoViolations);
-const imports = [KjTooltipTrigger, KjTooltipContent];
-
-// [kjTooltipTrigger]="t" is a property binding — it does not appear as a DOM attribute.
-// Select the trigger element by its tag or by aria-describedby (always set per WAI-ARIA spec).
-// Select the content element by [kjTooltipContent] which IS a static directive attribute.
-
-describe('KjTooltipContent + KjTooltipTrigger', () => {
-  it('content hidden by default', async () => {
-    const { container } = await render(
-      `<button [kjTooltipTrigger]="t">Hover</button>
-       <span #t kjTooltipContent [kjTooltipDelay]="0" [kjTooltipHideDelay]="0">Tip</span>`,
-      { imports },
-    );
-    expect(container.querySelector('[kjTooltipContent]')).toHaveAttribute('hidden', '');
-  });
-
-  it('content has role=tooltip by default', async () => {
-    const { container } = await render(
-      `<button [kjTooltipTrigger]="t">Hover</button>
-       <span #t kjTooltipContent [kjTooltipDelay]="0">Tip</span>`,
-      { imports },
-    );
-    expect(container.querySelector('[kjTooltipContent]')).toHaveAttribute('role', 'tooltip');
-  });
-
-  it('shows on mouseenter (no delay)', async () => {
-    const { container } = await render(
-      `<button [kjTooltipTrigger]="t">Hover</button>
-       <span #t kjTooltipContent [kjTooltipDelay]="0" [kjTooltipHideDelay]="0">Tip</span>`,
-      { imports },
-    );
-    fireEvent.mouseEnter(container.querySelector('button')!);
-    expect(container.querySelector('[kjTooltipContent]')).not.toHaveAttribute('hidden');
-  });
-
-  it('hides on mouseleave (no delay)', async () => {
-    const { container } = await render(
-      `<button [kjTooltipTrigger]="t">Hover</button>
-       <span #t kjTooltipContent [kjTooltipDelay]="0" [kjTooltipHideDelay]="0">Tip</span>`,
-      { imports },
-    );
-    fireEvent.mouseEnter(container.querySelector('button')!);
-    fireEvent.mouseLeave(container.querySelector('button')!);
-    expect(container.querySelector('[kjTooltipContent]')).toHaveAttribute('hidden', '');
-  });
-
-  it('hides on Escape key', async () => {
-    const { container } = await render(
-      `<button [kjTooltipTrigger]="t">Hover</button>
-       <span #t kjTooltipContent [kjTooltipDelay]="0">Tip</span>`,
-      { imports },
-    );
-    fireEvent.mouseEnter(container.querySelector('button')!);
-    fireEvent.keyDown(container.querySelector('button')!, { key: 'Escape' });
-    expect(container.querySelector('[kjTooltipContent]')).toHaveAttribute('hidden', '');
-  });
-
-  it('hides on blur', async () => {
-    const { container } = await render(
-      `<button [kjTooltipTrigger]="t">Hover</button>
-       <span #t kjTooltipContent [kjTooltipDelay]="0" [kjTooltipHideDelay]="0">Tip</span>`,
-      { imports },
-    );
-    fireEvent.focus(container.querySelector('button')!);
-    fireEvent.blur(container.querySelector('button')!);
-    expect(container.querySelector('[kjTooltipContent]')).toHaveAttribute('hidden', '');
-  });
-
-  it('trigger has aria-describedby wired to content id always', async () => {
-    const { container } = await render(
-      `<button [kjTooltipTrigger]="t">Info</button>
-       <span #t kjTooltipContent [kjTooltipDelay]="0">Info text</span>`,
-      { imports },
-    );
-    const trigger = container.querySelector('button')!;
-    const content = container.querySelector('[kjTooltipContent]')!;
-    expect(trigger.getAttribute('aria-describedby')).toBeTruthy();
-    expect(trigger.getAttribute('aria-describedby')).toBe(content.id);
-  });
-
-  it('role can be customised', async () => {
-    const { container } = await render(
-      `<button [kjTooltipTrigger]="t">X</button>
-       <span #t kjTooltipContent kjTooltipRole="note" [kjTooltipDelay]="0">Note</span>`,
-      { imports },
-    );
-    expect(container.querySelector('[kjTooltipContent]')).toHaveAttribute('role', 'note');
-  });
-
-  it('passes axe audit when shown', async () => {
-    const { container } = await render(
-      `<button [kjTooltipTrigger]="t">Info</button>
-       <span #t kjTooltipContent [kjTooltipDelay]="0">Info text</span>`,
-      { imports },
-    );
-    fireEvent.mouseEnter(container.querySelector('button')!);
-    expect(await axe(container)).toHaveNoViolations();
+import { Component } from '@angular/core';
+import { render } from '@testing-library/angular';
+import { describe, it, expect } from 'vitest';
+import { KjTooltipTrigger } from './tooltip-trigger';
+import { KjTooltipContent } from './tooltip-content';
+
+describe('KjTooltip', () => {
+  it('trigger has aria-expanded false initially', async () => {
+    @Component({
+      selector: 'kj-tt-host',
+      standalone: true,
+      imports: [KjTooltipTrigger, KjTooltipContent],
+      template: `
+        <button kjTooltipTrigger #t="kjTooltipTrigger">Hover</button>
+        <kj-tooltip-content [kjFor]="t">Hi</kj-tooltip-content>
+      `,
+    })
+    class Host {}
+    const { container } = await render(Host);
+    const btn = container.querySelector('button')!;
+    expect(btn.getAttribute('aria-expanded')).toBe('false');
+  });
+
+  it('panel is hidden + has role=tooltip', async () => {
+    @Component({
+      selector: 'kj-tt-host',
+      standalone: true,
+      imports: [KjTooltipTrigger, KjTooltipContent],
+      template: `
+        <button kjTooltipTrigger #t="kjTooltipTrigger">Hover</button>
+        <kj-tooltip-content [kjFor]="t">Hi</kj-tooltip-content>
+      `,
+    })
+    class Host {}
+    const { container } = await render(Host);
+    const panel = container.querySelector('kj-tooltip-content') as HTMLElement;
+    expect(panel.getAttribute('role')).toBe('tooltip');
+    expect(panel.hasAttribute('hidden')).toBe(true);
   });
 });

package/src/tooltip/tooltip.ts

@@ -1,129 +1,5 @@
-import { Directive, ElementRef, inject, input, signal } from '@angular/core';
-
-/** Preferred side for the tooltip relative to its trigger. */
-export type KjTooltipSide = 'top' | 'bottom' | 'left' | 'right';
-
-let _tooltipIdCounter = 0;
-
-/** Maps a tooltip content element to its directive instance. */
-const _tooltipRegistry = new WeakMap<Element, KjTooltipContent>();
-
-/**
- * Tooltip content panel. Owns all configuration and visibility state.
- * Pair with `[kjTooltipTrigger]` — pass the native element reference using `#myTip` (no `exportAs` needed).
- *
- * Automatically sets `role="tooltip"` (customisable via `kjTooltipRole`).
- * Note: `role="tooltip"` prohibits `aria-label` and `aria-labelledby` per WAI-ARIA.
- *
- * @doc
- *  @doc-example Basic
- *    @doc-theme default
- *      @doc-file tooltip.example.ts
- *    @doc-theme retro
- *      @doc-file tooltip.retro.example.ts
- *    @doc-theme finance
- *      @doc-file tooltip.finance.example.ts
- *  @doc-example Placements
- *    @doc-file tooltip.placements.example.ts
- * @category Core/Overlays
- * @required
- */
-@Directive({
-  selector: '[kjTooltipContent]',
-  standalone: true,
-  host: {
-    '[attr.id]':       'tooltipId',
-    '[attr.role]':     'kjTooltipRole()',
-    '[attr.data-side]':'kjTooltipSide()',
-    '[attr.hidden]':   '!visible() ? "" : null',
-    '(mouseenter)': 'cancelHide()',
-    '(mouseleave)': 'startHide()',
-  },
-})
-export class KjTooltipContent {
-  private readonly el = inject(ElementRef<HTMLElement>);
-
-  /** Preferred placement relative to the trigger. One of `'top'`, `'bottom'`, `'left'`, `'right'`. Defaults to `'top'`. */
-  readonly kjTooltipSide = input<KjTooltipSide>('top');
-
-  /** ARIA role for the tooltip element. Defaults to `'tooltip'`. Note: `role="tooltip"` prohibits `aria-label` and `aria-labelledby`. */
-  readonly kjTooltipRole = input<string>('tooltip');
-
-  /** Delay in ms before the tooltip appears on hover. Defaults to `600`. Set to `0` for instant. */
-  readonly kjTooltipDelay = input<number>(600);
-
-  /** Delay in ms before the tooltip disappears after hover ends. Defaults to `200`. */
-  readonly kjTooltipHideDelay = input<number>(200);
-
-  /** Auto-generated `id` wired to the trigger's `aria-describedby`. Always present — set before first display per WAI-ARIA spec. */
-  readonly tooltipId = `kj-tooltip-${++_tooltipIdCounter}`;
-
-  readonly visible = signal(false);
-
-  private showTimer?: ReturnType<typeof setTimeout>;
-  private hideTimer?: ReturnType<typeof setTimeout>;
-
-  constructor() {
-    // Register synchronously so KjTooltipTrigger's host binding can resolve immediately
-    _tooltipRegistry.set(this.el.nativeElement, this);
-  }
-
-  show(): void {
-    clearTimeout(this.hideTimer);
-    const delay = this.kjTooltipDelay();
-    if (delay <= 0) { this.visible.set(true); return; }
-    this.showTimer = setTimeout(() => this.visible.set(true), delay);
-  }
-
-  startHide(): void {
-    clearTimeout(this.showTimer);
-    const delay = this.kjTooltipHideDelay();
-    if (delay <= 0) { this.visible.set(false); return; }
-    this.hideTimer = setTimeout(() => this.visible.set(false), delay);
-  }
-
-  cancelHide(): void {
-    clearTimeout(this.hideTimer);
-  }
-
-  forceHide(): void {
-    clearTimeout(this.showTimer);
-    clearTimeout(this.hideTimer);
-    this.visible.set(false);
-  }
-}
-
-/**
- * Trigger element for the tooltip. Pass the `[kjTooltipContent]` native element reference via `[kjTooltipTrigger]`.
- *
- * - Automatically wires `aria-describedby` to the content's `id` — always set before first display per WAI-ARIA spec
- * - Shows on hover and focus, hides on leave, blur, or Escape
- *
- * @category Core/Overlays
- * @required
- */
-@Directive({
-  selector: '[kjTooltipTrigger]',
-  standalone: true,
-  host: {
-    '[attr.aria-describedby]': '_content?.tooltipId',
-    '(mouseenter)':     '_show()',
-    '(mouseleave)':     '_startHide()',
-    '(focus)':          '_show()',
-    '(blur)':           '_forceHide()',
-    '(keydown.escape)': '_forceHide()',
-  },
-})
-export class KjTooltipTrigger {
-  /** Native element of the `[kjTooltipContent]` to associate. Use `#myTip` *(no `exportAs`)* in the template. */
-  readonly kjTooltipTrigger = input.required<HTMLElement>();
-
-  /** Resolved `KjTooltipContent` instance looked up from the registry. */
-  protected get _content(): KjTooltipContent | undefined {
-    return _tooltipRegistry.get(this.kjTooltipTrigger());
-  }
-
-  protected _show():      void { this._content?.show(); }
-  protected _startHide(): void { this._content?.startHide(); }
-  protected _forceHide(): void { this._content?.forceHide(); }
-}
+// tooltip.ts
+export * from './tooltip-trigger';
+export * from './tooltip-content';
+export * from './tooltip-arrow';
+export * from './tooltip-group';

package/src/tree-select/index.ts

@@ -0,0 +1,12 @@
+export {
+  KjTreeSelect,
+  KjTreeSelectNode,
+  KjTreeSelectToggle,
+} from './tree-select';
+export { KjTreeSelectTrigger } from './tree-select-trigger';
+export { KjTreeSelectContent } from './tree-select-content';
+export {
+  KJ_TREE_SELECT,
+  type KjTreeNode,
+  type KjTreeSelectContext,
+} from './tree-select.context';