@kouji-ui/core 0.0.3 → 0.1.1

package/src/toast/toast.example.ts

@@ -1,134 +0,0 @@
-import { Component, inject } from '@angular/core';
-import { NgTemplateOutlet } from '@angular/common';
-import { KjToastViewport, KjToast } from './toast';
-import { KjToastService } from './toast.service';
-import { KjButton } from '../button/button';
-
-@Component({
-  selector: 'kj-example-toast-basic',
-  standalone: true,
-  imports: [KjToastViewport, KjToast, KjButton, NgTemplateOutlet],
-  styleUrls: ['../styles/docs-themes.css'],
-  styles: [`
-    :host { display: block; padding: 2rem; background: var(--kj-bg); font-family: var(--kj-font); min-height: 360px; position: relative; overflow: hidden; }
-    .row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
-    button[kjButton] { padding: 0.4rem 1rem; border: none; cursor: pointer; font-family: inherit; font-size: 0.8125rem; }
-    button[kjButton][data-variant="success"]     { background: #4ade80; color: #0c0c0c; }
-    button[kjButton][data-variant="destructive"] { background: #ef4444; color: #fff; }
-    button[kjButton][data-variant="warning"]     { background: #fb923c; color: #0c0c0c; }
-    button[kjButton][data-variant="default"]     { background: #b8f500; color: #0c0c0c; }
-
-    /* ── Viewport: positioned via [data-position-*] ── */
-    [kjToastViewport] {
-      position: absolute;
-      width: 22rem; max-width: calc(100% - 2rem);
-      list-style: none; padding: 0; margin: 0;
-      z-index: var(--kj-toast-z-index);
-    }
-    [kjToastViewport][data-position-y="bottom"] { bottom: 1rem; }
-    [kjToastViewport][data-position-y="top"]    { top: 1rem; }
-    [kjToastViewport][data-position-x="end"]    { right: 1rem; }
-    [kjToastViewport][data-position-x="start"]  { left: 1rem; }
-
-    /* Each <li> wraps a toast — absolutely positioned so siblings overlap.
-       The viewport itself stays a 0-height anchor; the front toast pegs to its edge. */
-    [kjToastViewport] li {
-      position: absolute; left: 0; right: 0;
-      transition: transform 0.4s cubic-bezier(0.21, 0.61, 0.35, 1),
-                  opacity 0.3s ease;
-    }
-    [kjToastViewport][data-position-y="bottom"] li { bottom: 0; }
-    [kjToastViewport][data-position-y="top"]    li { top: 0; }
-
-    /* ── COLLAPSED stack: only the front toast is fully visible.
-       Each older toast scales down 5% per level, lifts upward by index*gap,
-       and shrinks to the front toast's height. ── */
-    [kjToastViewport][data-expanded="false"] [kjToast]:not([data-front="true"]) {
-      height: var(--kj-toast-front-height);
-      overflow: hidden;
-      transform: translateY(calc((var(--kj-toast-index) - 1) * var(--kj-toast-gap) * -1))
-                 scale(calc(1 - (var(--kj-toast-index) - 1) * 0.06));
-      opacity: calc(1 - (var(--kj-toast-index) - 1) * 0.25);
-    }
-    [kjToastViewport][data-position-y="top"][data-expanded="false"] [kjToast]:not([data-front="true"]) {
-      transform: translateY(calc((var(--kj-toast-index) - 1) * var(--kj-toast-gap)))
-                 scale(calc(1 - (var(--kj-toast-index) - 1) * 0.06));
-    }
-
-    /* ── EXPANDED: each toast lifts by its measured height + gap, summed for older toasts.
-       Uses --kj-toast-before (older count visible behind). ── */
-    [kjToastViewport][data-expanded="true"] [kjToast] {
-      transform: translateY(calc((var(--kj-toast-index) - 1) * (var(--kj-toast-height, 0px) + var(--kj-toast-gap)) * -1));
-    }
-    [kjToastViewport][data-position-y="top"][data-expanded="true"] [kjToast] {
-      transform: translateY(calc((var(--kj-toast-index) - 1) * (var(--kj-toast-height, 0px) + var(--kj-toast-gap))));
-    }
-
-    /* ── Toast appearance ── */
-    [kjToast] {
-      display: flex; align-items: flex-start; gap: 0.75rem;
-      padding: 0.875rem 1rem; font-size: 0.8125rem;
-      border-radius: 8px;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
-      animation: enter 0.35s cubic-bezier(0.21, 0.61, 0.35, 1);
-    }
-    @keyframes enter {
-      from { opacity: 0; transform: translateY(100%) scale(0.95); }
-      to   { opacity: 1; transform: translateY(0) scale(1); }
-    }
-    .icon { font-size: 1rem; line-height: 1.2; flex-shrink: 0; }
-    .body { flex: 1; min-width: 0; line-height: 1.4; }
-    .title { font-weight: 600; margin-bottom: 0.125rem; }
-    .close {
-      background: none; border: none; cursor: pointer; opacity: 0.5; font-size: 1.1rem;
-      color: inherit; padding: 0; line-height: 1; flex-shrink: 0;
-    }
-    .close:hover { opacity: 1; }
-
-    [kjToast][data-variant="success"]     { background: #052e16; color: #86efac; border: 1px solid #166534; }
-    [kjToast][data-variant="destructive"] { background: #2c0a0a; color: #fca5a5; border: 1px solid #991b1b; }
-    [kjToast][data-variant="warning"]     { background: #2c1a04; color: #fcd34d; border: 1px solid #92400e; }
-    [kjToast][data-variant="default"]     { background: #1a1a1a; color: #f0ede6; border: 1px solid #2a2a2a; }
-    [kjToast][data-variant="success"] .icon     { color: #4ade80; }
-    [kjToast][data-variant="destructive"] .icon { color: #f87171; }
-    [kjToast][data-variant="warning"] .icon     { color: #fb923c; }
-    [kjToast][data-variant="default"] .icon     { color: #b8f500; }
-  `],
-  template: `
-    <div class="row">
-      <button kjButton [attr.data-variant]="'success'"     (click)="toast.success('Changes saved successfully!')">Success</button>
-      <button kjButton [attr.data-variant]="'destructive'" (click)="toast.error('Something went wrong!')">Error</button>
-      <button kjButton [attr.data-variant]="'warning'"     (click)="toast.warning('Session expires in 5 minutes.')">Warning</button>
-      <button kjButton [attr.data-variant]="'default'"     (click)="toast.info('New update available.')">Info</button>
-    </div>
-
-    <ol kjToastViewport [kjToastDefaultTemplate]="defaultTpl" #vp="kjToastViewport" aria-label="Notifications">
-      @for (r of vp.renderable(); track r.id) {
-        <li><ng-container *ngTemplateOutlet="r.template; context: r.context" /></li>
-      }
-    </ol>
-
-    <ng-template #defaultTpl let-ctx>
-      <div kjToast [kjToastVariant]="ctx.variant" [kjToastId]="ctx.id">
-        <span class="icon" aria-hidden="true">{{ iconFor(ctx.variant) }}</span>
-        <div class="body">
-          @if (ctx.title) { <div class="title">{{ ctx.title }}</div> }
-          <span>{{ ctx.message }}</span>
-        </div>
-        <button class="close" (click)="ctx.dismiss()" aria-label="Dismiss">×</button>
-      </div>
-    </ng-template>
-  `,
-})
-export class ToastBasicExample {
-  readonly toast = inject(KjToastService);
-
-  iconFor(variant: 'default' | 'success' | 'destructive' | 'warning'): string {
-    switch (variant) {
-      case 'success':     return '✓';
-      case 'destructive': return '✕';
-      case 'warning':     return '!';
-      default:            return 'ℹ';
-    }
-  }
-}

package/src/toast/toast.finance.example.ts

@@ -1,68 +0,0 @@
-import { Component, inject } from '@angular/core';
-import { NgTemplateOutlet } from '@angular/common';
-import { KjToastViewport, KjToast } from './toast';
-import { KjToastService } from './toast.service';
-
-@Component({
-  selector: 'kj-example-toast-finance',
-  standalone: true,
-  imports: [KjToastViewport, KjToast, NgTemplateOutlet],
-  styleUrls: ['../styles/docs-themes.css'],
-  host: { class: 'kj-theme-finance' },
-  styles: [`
-    :host { display: block; padding: 2rem; background: var(--kj-bg); font-family: var(--kj-font); min-height: 260px; position: relative; }
-    .row { display: flex; gap: 0.625rem; flex-wrap: wrap; }
-    button {
-      padding: 0.4rem 1rem; font-family: inherit; font-size: 0.8125rem; font-weight: 500;
-      border-radius: var(--kj-radius-md); border: var(--kj-btn-border); cursor: pointer; transition: var(--kj-transition); line-height: 1.5;
-    }
-    .btn-success { background: #22c55e; color: #fff; border-color: #22c55e; }
-    .btn-success:hover { background: #16a34a; }
-    .btn-error   { background: #ef4444; color: #fff; border-color: #ef4444; }
-    .btn-error:hover { background: #dc2626; }
-    .btn-warning { background: #f59e0b; color: #fff; border-color: #f59e0b; }
-    .btn-warning:hover { background: #d97706; }
-    .btn-info    { background: var(--kj-accent); color: var(--kj-accent-on); border-color: var(--kj-accent); }
-    .btn-info:hover { background: #2563eb; }
-    [kjToastViewport] {
-      position: absolute; bottom: 1rem; right: 1rem;
-      display: flex; flex-direction: column; gap: 0.5rem; width: 18rem;
-      list-style: none; padding: 0; margin: 0;
-    }
-    [kjToast] {
-      display: flex; align-items: center; justify-content: space-between;
-      padding: 0.75rem 1rem; font-size: 0.8125rem; border-radius: var(--kj-radius-lg);
-      box-shadow: var(--kj-shadow-sm); animation: slideIn 0.2s ease;
-    }
-    @keyframes slideIn { from { opacity: 0; transform: translateX(1rem); } to { opacity: 1; transform: translateX(0); } }
-    [data-variant="success"]     { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
-    [data-variant="destructive"] { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
-    [data-variant="warning"]     { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
-    [data-variant="default"]     { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
-    .close { background: none; border: none; cursor: pointer; font-size: 1rem; color: inherit; padding: 0 0 0 0.5rem; opacity: 0.5; }
-    .close:hover { opacity: 1; }
-  `],
-  template: `
-    <div class="row">
-      <button class="btn-success" (click)="toast.success('Transaction completed.')">Success</button>
-      <button class="btn-error"   (click)="toast.error('Payment declined.')">Error</button>
-      <button class="btn-warning" (click)="toast.warning('Session expiring soon.')">Warning</button>
-      <button class="btn-info"    (click)="toast.info('Statement ready to download.')">Info</button>
-    </div>
-    <ol kjToastViewport [kjToastDefaultTemplate]="defaultTpl" #vp="kjToastViewport" aria-label="Notifications">
-      @for (r of vp.renderable(); track r.id) {
-        <li><ng-container *ngTemplateOutlet="r.template; context: r.context" /></li>
-      }
-    </ol>
-
-    <ng-template #defaultTpl let-ctx>
-      <div kjToast [kjToastVariant]="ctx.variant" [kjToastId]="ctx.id">
-        <span>{{ ctx.message }}</span>
-        <button class="close" (click)="ctx.dismiss()" aria-label="Dismiss">×</button>
-      </div>
-    </ng-template>
-  `,
-})
-export class ToastFinanceExample {
-  readonly toast = inject(KjToastService);
-}

package/src/toast/toast.retro.example.ts

@@ -1,69 +0,0 @@
-import { Component, inject } from '@angular/core';
-import { NgTemplateOutlet } from '@angular/common';
-import { KjToastViewport, KjToast } from './toast';
-import { KjToastService } from './toast.service';
-
-@Component({
-  selector: 'kj-example-toast-retro',
-  standalone: true,
-  imports: [KjToastViewport, KjToast, NgTemplateOutlet],
-  styleUrls: ['../styles/docs-themes.css'],
-  host: { class: 'kj-theme-retro' },
-  styles: [`
-    :host { display: block; padding: 2rem; background: var(--kj-bg); font-family: var(--kj-font); min-height: 260px; position: relative; color: var(--kj-text); }
-    .row { display: flex; gap: 0.625rem; flex-wrap: wrap; }
-    button {
-      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: 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); }
-    .btn-ok   { background: #16a34a; color: #fff; }
-    .btn-err  { background: #dc2626; color: #fff; }
-    .btn-warn { background: #d97706; color: #fff; }
-    .btn-info { background: #1d4ed8; color: #fff; border-color: #1d4ed8; box-shadow: 3px 3px 0 #1d4ed8; }
-    .btn-info:hover { box-shadow: 4px 4px 0 #1d4ed8; }
-    [kjToastViewport] {
-      position: absolute; bottom: 1rem; right: 1rem;
-      display: flex; flex-direction: column; gap: 0.5rem; width: 18rem;
-      list-style: none; padding: 0; margin: 0;
-    }
-    [kjToast] {
-      display: flex; align-items: center; justify-content: space-between;
-      padding: 0.625rem 0.875rem; font-family: var(--kj-font); font-size: 0.75rem;
-      border: var(--kj-btn-border); background: var(--kj-bg); color: var(--kj-text); box-shadow: var(--kj-shadow-md);
-      animation: slideIn 0.15s ease;
-    }
-    @keyframes slideIn { from { opacity: 0; transform: translateX(1rem); } to { opacity: 1; transform: translateX(0); } }
-    [data-variant="success"]     { border-color: #16a34a; }
-    [data-variant="destructive"] { border-color: #dc2626; }
-    [data-variant="warning"]     { border-color: #d97706; }
-    [data-variant="default"]     { border-color: #1d4ed8; }
-    .close { background: none; border: none; box-shadow: none; cursor: pointer; font-size: 1rem; padding: 0 0 0 0.5rem; transition: none; font-family: inherit; }
-    .close:hover { transform: none; }
-  `],
-  template: `
-    <div class="row">
-      <button class="btn-ok"   (click)="toast.success('File saved!')">OK</button>
-      <button class="btn-err"  (click)="toast.error('Access denied!')">ERR</button>
-      <button class="btn-warn" (click)="toast.warning('Low disk space.')">WARN</button>
-      <button class="btn-info" (click)="toast.info('Update available.')">INFO</button>
-    </div>
-    <ol kjToastViewport [kjToastDefaultTemplate]="defaultTpl" #vp="kjToastViewport" aria-label="Notifications">
-      @for (r of vp.renderable(); track r.id) {
-        <li><ng-container *ngTemplateOutlet="r.template; context: r.context" /></li>
-      }
-    </ol>
-
-    <ng-template #defaultTpl let-ctx>
-      <div kjToast [kjToastVariant]="ctx.variant" [kjToastId]="ctx.id">
-        <span>{{ ctx.message }}</span>
-        <button class="close" (click)="ctx.dismiss()" aria-label="Dismiss">×</button>
-      </div>
-    </ng-template>
-  `,
-})
-export class ToastRetroExample {
-  readonly toast = inject(KjToastService);
-}

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 {}