@kouji-ui/core 0.0.4 → 0.1.2

package/src/toast/toast.ts

@@ -1,307 +0,0 @@
-import {
-  DestroyRef, Directive, ElementRef, TemplateRef,
-  afterNextRender, computed, inject, input, signal,
-} from '@angular/core';
-import { KjToastService, KjToastTemplateContext, KjToastVariant } from './toast.service';
-import { KJ_TOAST_STRATEGY } from './toast.strategy';
-import { KjToastPositionX, KjToastPositionY } from './toast.types';
-
-export type { KjToastVariant, KjToastContext, KjToastOptions } from './toast.service';
-export type { KjToastPositionX, KjToastPositionY } from './toast.types';
-
-/**
- * Marks an element as a single toast item. Sets `role`, `aria-atomic`, `data-variant`,
- * `data-front`, and exposes positional state as CSS custom properties so client CSS
- * can drive stacking, scaling, or spread-out animations.
- *
- * **CSS variables exposed (when `[kjToastId]` is bound):**
- * - `--kj-toast-index` — 1-based position from the front (newest = 1)
- * - `--kj-toast-before` — number of toasts behind this one
- * - `--kj-toast-after`  — number of toasts in front of this one
- * - `--kj-toast-height` — measured pixel height (kept in sync via ResizeObserver)
- *
- * @doc
- *  @doc-example Basic
- *    @doc-theme default
- *      @doc-file toast.example.ts
- *    @doc-theme retro
- *      @doc-file toast.retro.example.ts
- *    @doc-theme finance
- *      @doc-file toast.finance.example.ts
- *
- * @example
- * ```html
- * <ng-template #defaultTpl let-ctx>
- *   <div kjToast [kjToastVariant]="ctx.variant" [kjToastId]="ctx.id">
- *     <span>{{ ctx.message }}</span>
- *     <button (click)="ctx.dismiss()" aria-label="Dismiss">×</button>
- *   </div>
- * </ng-template>
- * ```
- * @category Core/Overlays
- */
-@Directive({
-  selector: '[kjToast]',
-  standalone: true,
-  host: {
-    '[attr.role]': 'role()',
-    '[attr.aria-atomic]': '"true"',
-    '[attr.data-variant]': 'kjToastVariant()',
-    '[attr.data-front]': 'isFront()',
-    '[style.--kj-toast-index]': 'index()',
-    '[style.--kj-toast-before]': 'before()',
-    '[style.--kj-toast-after]': 'after()',
-    '[style.--kj-toast-height]': 'heightPx()',
-  },
-})
-export class KjToast {
-  /** Visual / semantic variant. Defaults to `'default'`. */
-  kjToastVariant = input<KjToastVariant>('default');
-
-  /**
-   * The toast id this element renders. Bind from the template context (`ctx.id`)
-   * so the directive can compute its position in the live queue and expose
-   * `--kj-toast-index`, `--kj-toast-before`, `--kj-toast-after`, and `data-front`.
-   * Optional — without it, the toast still renders with role/variant only.
-   */
-  kjToastId = input<string | null>(null);
-
-  private readonly svc = inject(KjToastService);
-  private readonly el = inject(ElementRef<HTMLElement>);
-  private readonly destroyRef = inject(DestroyRef);
-  private readonly _height = signal<number>(0);
-
-  readonly role = computed(() =>
-    this.kjToastVariant() === 'destructive' ? 'alert' : 'status',
-  );
-
-  /** 1-based position from the front (1 = newest). `null` when no id is bound. */
-  readonly index = computed<number | null>(() => {
-    const id = this.kjToastId();
-    if (!id) return null;
-    const list = this.svc.toasts();
-    const i = list.findIndex(t => t.id === id);
-    return i >= 0 ? list.length - i : null;
-  });
-
-  /** Toasts older than this one (behind in the stack). */
-  readonly before = computed<number | null>(() => {
-    const idx = this.index();
-    return idx == null ? null : idx - 1;
-  });
-
-  /** Toasts newer than this one (in front of it). */
-  readonly after = computed<number | null>(() => {
-    const idx = this.index();
-    if (idx == null) return null;
-    return this.svc.toasts().length - idx;
-  });
-
-  /** True when this is the front-most (newest) toast. */
-  readonly isFront = computed(() => this.index() === 1);
-
-  /** Measured height as a pixel string (`"42px"`). Empty when unmeasured. */
-  readonly heightPx = computed(() => {
-    const h = this._height();
-    return h > 0 ? `${h}px` : '';
-  });
-
-  constructor() {
-    afterNextRender(() => {
-      const node = this.el.nativeElement;
-      const measure = () => this._height.set(Math.round(node.getBoundingClientRect().height));
-      measure();
-      // Use border-box geometry via getBoundingClientRect — contentRect strips padding.
-      const ro = new ResizeObserver(measure);
-      ro.observe(node);
-      this.destroyRef.onDestroy(() => ro.disconnect());
-    });
-  }
-}
-
-/** Per-toast renderable: the resolved template + the bound context to render with. */
-export interface KjToastRenderable<TData = unknown> {
-  readonly id: string;
-  readonly template: TemplateRef<KjToastTemplateContext<TData>> | null;
-  readonly context: KjToastTemplateContext<TData>;
-}
-
-/**
- * Container for active toasts. Reads the queue from `KjToastService`, applies
- * a visibility cap (`kjToastMaxVisible`), and exposes layout state both as
- * inputs-driven CSS variables and `data-position-x` / `data-position-y`
- * attributes so client CSS can drive position, gap, stacking strategy, and
- * z-index.
- *
- * **CSS variables exposed on the host:**
- * - `--kj-toast-gap` — gap between stacked toasts
- * - `--kj-toast-z-index` — base z-index for toasts
- * - `--kj-toasts-count` — number of currently-rendered toasts
- * - `--kj-toast-front-height` — measured height of the front-most toast
- *
- * **Data attributes:**
- * - `data-position-x="start|center|end"`
- * - `data-position-y="top|bottom"`
- * - `data-expanded="true|false"`
- *
- * @example
- * ```html
- * <ol kjToastViewport
- *     [kjToastDefaultTemplate]="defaultTpl"
- *     [kjToastMaxVisible]="3"
- *     [kjToastGap]="8"
- *     kjToastPositionX="end"
- *     kjToastPositionY="bottom"
- *     #vp="kjToastViewport"
- *     aria-label="Notifications">
- *   @for (r of vp.renderable(); track r.id) {
- *     <li><ng-container *ngTemplateOutlet="r.template; context: { $implicit: r.context }" /></li>
- *   }
- * </ol>
- * ```
- * @category Core/Overlays
- */
-@Directive({
-  selector: '[kjToastViewport]',
-  standalone: true,
-  exportAs: 'kjToastViewport',
-  host: {
-    'role': 'region',
-    '[attr.aria-live]': '"polite"',
-    '[attr.aria-atomic]': '"false"',
-    '[attr.aria-relevant]': '"additions removals"',
-    '[attr.data-position-x]': 'kjToastPositionX()',
-    '[attr.data-position-y]': 'kjToastPositionY()',
-    '[attr.data-expanded]': 'expanded()',
-    '[style.--kj-toast-gap]': 'gapPx()',
-    '[style.--kj-toast-z-index]': 'kjToastBaseZIndex()',
-    '[style.--kj-toasts-count]': 'renderable().length',
-    '[style.--kj-toast-front-height]': 'frontHeightPx()',
-    '(mouseenter)': 'onHover(true)',
-    '(mouseleave)': 'onHover(false)',
-    '(focusin)':    'onHover(true)',
-    '(focusout)':   'onHover(false)',
-  },
-})
-export class KjToastViewport {
-  private readonly svc = inject(KjToastService);
-  private readonly el = inject(ElementRef<HTMLElement>);
-  private readonly destroyRef = inject(DestroyRef);
-  private readonly strategy = inject(KJ_TOAST_STRATEGY);
-
-  /** Default template used for string-based toasts. Per-call templates override this. */
-  readonly kjToastDefaultTemplate = input<TemplateRef<KjToastTemplateContext> | null>(null);
-
-  /** Cap on simultaneously-rendered toasts. Excess stays queued and surfaces as space frees. Defaults from the active `KjToastStrategy`. */
-  readonly kjToastMaxVisible = input<number>(this.strategy.maxVisible);
-
-  /** Pixel gap between stacked toasts — exposed as `--kj-toast-gap`. Defaults from the active `KjToastStrategy`. */
-  readonly kjToastGap = input<number>(this.strategy.gap);
-
-  /** Base `z-index` exposed as `--kj-toast-z-index`. Defaults from the active `KjToastStrategy`. */
-  readonly kjToastBaseZIndex = input<number>(this.strategy.baseZIndex);
-
-  /** Horizontal anchor — written as `data-position-x` for client CSS. Defaults from the active `KjToastStrategy`. */
-  readonly kjToastPositionX = input<KjToastPositionX>(this.strategy.positionX);
-
-  /** Vertical anchor — written as `data-position-y` for client CSS. Defaults from the active `KjToastStrategy`. */
-  readonly kjToastPositionY = input<KjToastPositionY>(this.strategy.positionY);
-
-  /**
-   * Manual override for the spread-out state. When unset (`undefined`) and the active
-   * strategy has `expandOnHover: true`, the viewport flips automatically on hover/focus.
-   * Set explicitly to force one state or to drive expansion from custom logic.
-   */
-  readonly kjToastExpand = input<boolean | undefined>(undefined);
-
-  private readonly _hovered = signal(false);
-
-  /** Resolved expand state — explicit input wins; otherwise falls back to hover when the strategy enables it. */
-  readonly expanded = computed(() => {
-    const override = this.kjToastExpand();
-    if (override !== undefined) return override;
-    return this.strategy.expandOnHover && this._hovered();
-  });
-
-  protected onHover(state: boolean): void {
-    if (this.strategy.expandOnHover) this._hovered.set(state);
-  }
-
-  /** Live list of queued toasts (uncapped). */
-  readonly toasts = this.svc.toasts;
-
-  /** Renderables — capped by `kjToastMaxVisible`, paired with a template + bound context. */
-  readonly renderable = computed<KjToastRenderable[]>(() => {
-    const fallback = this.kjToastDefaultTemplate();
-    const cap = this.kjToastMaxVisible();
-    const list = this.toasts();
-    // Newest are at the END of the service array; the front of the stack is the
-    // last item. When capping, drop the OLDEST first.
-    const visible = Number.isFinite(cap) && list.length > cap
-      ? list.slice(list.length - cap)
-      : list;
-    return visible.map(t => ({
-      id: t.id,
-      template: t.template ?? fallback,
-      context: this.svc.contextFor(t),
-    }));
-  });
-
-  private readonly _frontHeight = signal<number>(0);
-
-  /** `--kj-toast-gap` value (`"8px"`). */
-  readonly gapPx = computed(() => `${this.kjToastGap()}px`);
-
-  /** `--kj-toast-front-height` value (`"42px"`) — the measured height of the front toast. */
-  readonly frontHeightPx = computed(() => {
-    const h = this._frontHeight();
-    return h > 0 ? `${h}px` : '';
-  });
-
-  constructor() {
-    afterNextRender(() => {
-      const root = this.el.nativeElement as HTMLElement;
-      const measure = () => {
-        const front = root.querySelector('[kjToast][data-front="true"]') as HTMLElement | null;
-        if (!front) { this._frontHeight.set(0); return; }
-        this._frontHeight.set(Math.round(front.getBoundingClientRect().height));
-      };
-      measure();
-      const ro = new ResizeObserver(measure);
-      // Observe the viewport — children added/resized trigger remeasure.
-      ro.observe(root);
-      // MutationObserver picks up new children (data-front="true" added on a new toast).
-      const mo = new MutationObserver(measure);
-      mo.observe(root, { childList: true, subtree: true, attributes: true, attributeFilter: ['data-front'] });
-      this.destroyRef.onDestroy(() => { ro.disconnect(); mo.disconnect(); });
-    });
-  }
-}
-
-/**
- * Optional dismiss button. Use `(click)="ctx.dismiss()"` directly in the template
- * for new code — this directive is for cases where the dismiss target id is
- * known outside the template context.
- *
- * @example
- * ```html
- * <button [kjToastClose]="toast.id" aria-label="Dismiss">×</button>
- * ```
- * @category Core/Overlays
- */
-@Directive({
-  selector: '[kjToastClose]',
-  standalone: true,
-  host: {
-    '(click)': 'dismiss()',
-  },
-})
-export class KjToastClose {
-  private readonly svc = inject(KjToastService);
-  /** The id of the toast to dismiss on click. */
-  kjToastClose = input.required<string>();
-
-  dismiss(): void {
-    this.svc.dismiss(this.kjToastClose());
-  }
-}

package/src/toast/toast.types.ts

@@ -1,5 +0,0 @@
-/** Horizontal anchor exposed as `data-position-x`. */
-export type KjToastPositionX = 'start' | 'center' | 'end';
-
-/** Vertical anchor exposed as `data-position-y`. */
-export type KjToastPositionY = 'top' | 'bottom';

package/src/toggle/index.ts

@@ -1 +0,0 @@
-export { KjToggle } from './toggle';

package/src/toggle/toggle.spec.ts

@@ -1,24 +0,0 @@
-import { render, fireEvent } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { KjToggle } from './toggle';
-
-expect.extend(toHaveNoViolations);
-
-describe('KjToggle', () => {
-  it('has aria-pressed=false by default', async () => {
-    const { getByRole } = await render(`<button kjToggle>Bold</button>`, { imports: [KjToggle] });
-    expect(getByRole('button')).toHaveAttribute('aria-pressed', 'false');
-  });
-
-  it('toggles aria-pressed on click', async () => {
-    const { getByRole } = await render(`<button kjToggle>Bold</button>`, { imports: [KjToggle] });
-    fireEvent.click(getByRole('button'));
-    expect(getByRole('button')).toHaveAttribute('aria-pressed', 'true');
-    expect(getByRole('button')).toHaveAttribute('data-pressed', '');
-  });
-
-  it('passes axe audit', async () => {
-    const { container } = await render(`<button kjToggle>Bold</button>`, { imports: [KjToggle] });
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/toggle/toggle.ts

@@ -1,40 +0,0 @@
-import { Directive, inject, model } from '@angular/core';
-import { KjDisabled, KjFocusRing, KjFormControl } from '../primitives';
-
-/**
- * Adds toggle (press) behavior with Angular forms integration.
- *
- * @example
- * ```html
- * <button kjToggle [(kjPressed)]="isBold" aria-label="Bold">B</button>
- * ```
- * @category Core/Inputs
- */
-@Directive({
-  selector: '[kjToggle]',
-  standalone: true,
-  hostDirectives: [
-    { directive: KjDisabled, inputs: ['kjDisabled'] },
-    KjFocusRing,
-    KjFormControl,
-  ],
-  host: {
-    '[attr.aria-pressed]': 'kjPressed().toString()',
-    '[attr.data-pressed]': 'kjPressed() ? "" : null',
-    '(click)': 'toggle()',
-    '(blur)': 'formCtrl.notifyTouched()',
-  },
-})
-export class KjToggle {
-  readonly formCtrl = inject(KjFormControl);
-
-  /** Whether the toggle is pressed. Supports two-way binding. */
-  kjPressed = model<boolean>(false);
-
-  /** @internal */
-  toggle(): void {
-    const next = !this.kjPressed();
-    this.kjPressed.set(next);
-    this.formCtrl.notifyChange(next);
-  }
-}

package/src/tooltip/index.ts

@@ -1,5 +0,0 @@
-export {
-  KjTooltipContent,
-  KjTooltipTrigger,
-  type KjTooltipSide,
-} from './tooltip';

package/src/tooltip/tooltip.example.ts

@@ -1,46 +0,0 @@
-import { Component } from '@angular/core';
-import { KjTooltipTrigger, KjTooltipContent } from './tooltip';
-import { KjButton } from '../button/button';
-
-@Component({
-  selector: 'kj-example-tooltip-basic',
-  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; }
-    .row { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; justify-content: center; }
-    .tip-wrap { position: relative; display: inline-block; }
-    button[kjButton] { padding: 0.5rem 1.25rem; font-family: var(--kj-font); font-size: 0.875rem; border: var(--kj-btn-border); cursor: pointer; transition: var(--kj-transition); }
-    [data-variant="default"] { background: var(--kj-accent); color: var(--kj-accent-on); }
-    [data-variant="link"] { background: transparent; color: var(--kj-accent); border: none; padding: 0.5rem 0.5rem; text-decoration: none; text-underline-offset: 4px; }
-    [data-variant="link"]:hover { text-decoration: underline; }
-    [data-variant="ghost"] { background: transparent; color: var(--kj-btn-ghost-color); }
-    [kjTooltipContent] {
-      position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
-      background: var(--kj-accent); color: var(--kj-accent-on); padding: 0.25rem 0.625rem; font-size: 0.75rem;
-      white-space: nowrap; pointer-events: none; transition: var(--kj-transition);
-    }
-    [kjTooltipContent][hidden] { display: none; }
-    [data-side="bottom"] { top: calc(100% + 8px); bottom: auto; }
-    [data-side="left"]  { right: calc(100% + 8px); left: auto; bottom: auto; top: 50%; transform: translateY(-50%); }
-    [data-side="right"] { left: calc(100% + 8px); bottom: auto; top: 50%; transform: translateY(-50%); }
-  `],
-  template: `
-    <div class="row">
-      <div class="tip-wrap">
-        <button kjButton [kjVariant]="'default'" [kjTooltipTrigger]="tip1">Default</button>
-        <span #tip1 kjTooltipContent>Copy to clipboard</span>
-      </div>
-      <div class="tip-wrap">
-        <button kjButton [kjVariant]="'link'" [kjTooltipTrigger]="tip2">Link</button>
-        <span #tip2 kjTooltipContent [kjTooltipSide]="'bottom'">Opens below</span>
-      </div>
-      <div class="tip-wrap">
-        <button kjButton [kjVariant]="'ghost'" [kjTooltipTrigger]="tip3">Ghost</button>
-        <span #tip3 kjTooltipContent [kjTooltipSide]="'right'">Opens right</span>
-      </div>
-    </div>
-  `,
-})
-export class TooltipBasicExample {}

package/src/tooltip/tooltip.finance.example.ts

@@ -1,54 +0,0 @@
-import { Component } from '@angular/core';
-import { KjTooltipTrigger, KjTooltipContent } from './tooltip';
-import { KjButton } from '../button/button';
-
-@Component({
-  selector: 'kj-example-tooltip-finance',
-  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; }
-    .tip-wrap { position: relative; display: inline-block; }
-    button[kjButton] {
-      padding: 4px 15px; font-family: var(--kj-font); font-size: 14px; font-weight: 400;
-      border: 1px solid transparent; border-radius: 6px; cursor: pointer;
-      transition: var(--kj-transition); line-height: 1.5;
-    }
-    button[kjButton][data-variant="default"]     { background: var(--kj-accent); color: var(--kj-accent-on); border-color: var(--kj-accent); }
-    button[kjButton][data-variant="default"]:hover { background: #4096ff; border-color: #4096ff; }
-    button[kjButton][data-variant="link"]        { background: transparent; color: var(--kj-accent); border-color: transparent; }
-    button[kjButton][data-variant="link"]:hover  { color: #4096ff; }
-    button[kjButton][data-variant="ghost"]       { background: transparent; color: var(--kj-text); border: 1px solid var(--kj-text); }
-    button[kjButton][data-variant="ghost"]:hover { color: var(--kj-accent); border-color: var(--kj-accent); }
-    [kjTooltipContent] {
-      position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
-      background: #1f2937; color: #f9fafb;
-      padding: 0.3rem 0.625rem; font-size: 0.75rem; border-radius: var(--kj-radius-sm);
-      white-space: nowrap; pointer-events: none; box-shadow: var(--kj-shadow-sm);
-    }
-    [kjTooltipContent][hidden] { display: none; }
-    [data-side="bottom"] { top: calc(100% + 8px); bottom: auto; }
-    [data-side="right"] { left: calc(100% + 8px); bottom: auto; top: 50%; transform: translateY(-50%); }
-    [data-side="left"]  { right: calc(100% + 8px); left: auto; bottom: auto; top: 50%; transform: translateY(-50%); }
-  `],
-  host: { class: 'kj-theme-finance' },
-  template: `
-    <div class="row">
-      <div class="tip-wrap">
-        <button kjButton [kjVariant]="'default'" [kjTooltipTrigger]="tip1">Default</button>
-        <span #tip1 kjTooltipContent>Copy to clipboard</span>
-      </div>
-      <div class="tip-wrap">
-        <button kjButton [kjVariant]="'link'" [kjTooltipTrigger]="tip2">Link</button>
-        <span #tip2 kjTooltipContent [kjTooltipSide]="'bottom'">Opens below</span>
-      </div>
-      <div class="tip-wrap">
-        <button kjButton [kjVariant]="'ghost'" [kjTooltipTrigger]="tip3">Ghost</button>
-        <span #tip3 kjTooltipContent [kjTooltipSide]="'right'">Opens right</span>
-      </div>
-    </div>
-  `,
-})
-export class TooltipFinanceExample {}

package/src/tooltip/tooltip.placements.example.ts

@@ -1,56 +0,0 @@
-import { Component } from '@angular/core';
-import { KjTooltipTrigger, KjTooltipContent } from './tooltip';
-import { KjButton } from '../button/button';
-
-@Component({
-  selector: 'kj-example-tooltip-placements',
-  standalone: true,
-  imports: [KjTooltipTrigger, KjTooltipContent, KjButton],
-  styleUrls: ['../styles/docs-themes.css'],
-  styles: [`
-    :host { display: flex; align-items: center; justify-content: center; padding: 5rem 4rem; background: var(--kj-bg); font-family: var(--kj-font); min-height: 220px; }
-    .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto auto; gap: 0.75rem; place-items: center; }
-    .tip-wrap { position: relative; display: inline-block; }
-    button[kjButton] { padding: 0.5rem 1.25rem; font-family: var(--kj-font); font-size: 0.875rem; border: var(--kj-btn-border); cursor: pointer; transition: var(--kj-transition); }
-    [data-variant="default"] { background: var(--kj-accent); color: var(--kj-accent-on); }
-    [kjTooltipContent] {
-      position: absolute; z-index: 10;
-      background: var(--kj-accent); color: var(--kj-accent-on); padding: 0.25rem 0.625rem; font-size: 0.75rem;
-      white-space: nowrap; pointer-events: none; transition: var(--kj-transition);
-    }
-    [kjTooltipContent][hidden] { display: none; }
-    [data-side="top"]    { bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); }
-    [data-side="bottom"] { top: calc(100% + 8px); left: 50%; transform: translateX(-50%); }
-    [data-side="left"]   { right: calc(100% + 8px); top: 50%; transform: translateY(-50%); }
-    [data-side="right"]  { left: calc(100% + 8px); top: 50%; transform: translateY(-50%); }
-    .empty { width: 80px; }
-  `],
-  template: `
-    <div class="grid">
-      <div class="empty"></div>
-      <div class="tip-wrap">
-        <button kjButton [kjVariant]="'default'" [kjTooltipTrigger]="tipTop">Top</button>
-        <span #tipTop kjTooltipContent [kjTooltipSide]="'top'">Top tooltip</span>
-      </div>
-      <div class="empty"></div>
-
-      <div class="tip-wrap">
-        <button kjButton [kjVariant]="'default'" [kjTooltipTrigger]="tipLeft">Left</button>
-        <span #tipLeft kjTooltipContent [kjTooltipSide]="'left'">Left tooltip</span>
-      </div>
-      <div class="empty"></div>
-      <div class="tip-wrap">
-        <button kjButton [kjVariant]="'default'" [kjTooltipTrigger]="tipRight">Right</button>
-        <span #tipRight kjTooltipContent [kjTooltipSide]="'right'">Right tooltip</span>
-      </div>
-
-      <div class="empty"></div>
-      <div class="tip-wrap">
-        <button kjButton [kjVariant]="'default'" [kjTooltipTrigger]="tipBottom">Bottom</button>
-        <span #tipBottom kjTooltipContent [kjTooltipSide]="'bottom'">Bottom tooltip</span>
-      </div>
-      <div class="empty"></div>
-    </div>
-  `,
-})
-export class TooltipPlacementsExample {}

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

@@ -1,65 +0,0 @@
-import { Component } 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; }
-    .tip-wrap { position: relative; display: inline-block; }
-    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); }
-    [kjTooltipContent] {
-      position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
-      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);
-    }
-    [kjTooltipContent][hidden] { display: none; }
-    [data-side="bottom"] { top: calc(100% + 8px); bottom: auto; }
-    [data-side="right"] { left: calc(100% + 8px); bottom: auto; top: 50%; transform: translateY(-50%); }
-    [data-side="left"]  { right: calc(100% + 8px); left: auto; bottom: auto; top: 50%; transform: translateY(-50%); }
-  `],
-  host: { class: 'kj-theme-retro' },
-  template: `
-    <div class="row">
-      <div class="tip-wrap">
-        <button kjButton [kjVariant]="'default'" [kjTooltipTrigger]="tip1">Default</button>
-        <span #tip1 kjTooltipContent>Copy to clipboard</span>
-      </div>
-      <div class="tip-wrap">
-        <button kjButton [kjVariant]="'link'" [kjTooltipTrigger]="tip2">Link</button>
-        <span #tip2 kjTooltipContent [kjTooltipSide]="'bottom'">Opens below</span>
-      </div>
-      <div class="tip-wrap">
-        <button kjButton [kjVariant]="'ghost'" [kjTooltipTrigger]="tip3">Ghost</button>
-        <span #tip3 kjTooltipContent [kjTooltipSide]="'right'">Opens right</span>
-      </div>
-    </div>
-  `,
-})
-export class TooltipRetroExample {}