@kouji-ui/core 0.0.4 → 0.1.2

package/src/styles/docs-themes.css

@@ -1,82 +0,0 @@
-/* ─────────────────────────────────────────────────────────────
-   kouji-ui docs example themes
-   Three theme layers: kj.tokens (defaults) + kj.theme (overrides)
-   ──────────────────────────────────────────────────────────── */
-
-@layer kj.tokens, kj.theme;
-
-/* ── Default (dark) tokens — applied to :root and .kj-theme-default ── */
-@layer kj.tokens {
-  :root,
-  .kj-theme-default {
-    --kj-bg: #0c0c0c;
-    --kj-surface: #1a1a1a;
-    --kj-text: #f0ede6;
-    --kj-text-muted: #888;
-    --kj-border: #333;
-    --kj-accent: #b8f500;
-    --kj-accent-on: #0c0c0c;
-    --kj-destructive: #ef4444;
-    --kj-radius-sm: 0px;
-    --kj-radius-md: 0px;
-    --kj-radius-lg: 0px;
-    --kj-shadow-sm: none;
-    --kj-shadow-md: none;
-    --kj-shadow-hard: none;
-    --kj-font: 'JetBrains Mono', monospace;
-    --kj-btn-border: none;
-    --kj-btn-outline-border: 1px solid rgba(240, 237, 230, 0.6);
-    --kj-btn-ghost-color: rgba(240, 237, 230, 0.55);
-    --kj-backdrop: rgba(0, 0, 0, 0.75);
-    --kj-transition: opacity 0.15s;
-  }
-}
-
-/* ── Theme overrides ── */
-@layer kj.theme {
-  .kj-theme-retro {
-    --kj-bg: #fef9c3;
-    --kj-surface: #fef9c3;
-    --kj-text: #000;
-    --kj-text-muted: #444;
-    --kj-border: #000;
-    --kj-accent: #16a34a;
-    --kj-accent-on: #fff;
-    --kj-destructive: #dc2626;
-    --kj-radius-sm: 0px;
-    --kj-radius-md: 0px;
-    --kj-radius-lg: 0px;
-    --kj-shadow-sm: 2px 2px 0 #000;
-    --kj-shadow-md: 4px 4px 0 #000;
-    --kj-shadow-hard: 6px 6px 0 #000;
-    --kj-font: 'Courier New', monospace;
-    --kj-btn-border: 2px solid #000;
-    --kj-btn-outline-border: 2px solid #000;
-    --kj-btn-ghost-color: #555;
-    --kj-backdrop: rgba(0, 0, 0, 0.6);
-    --kj-transition: transform 0.08s, box-shadow 0.08s;
-  }
-
-  .kj-theme-finance {
-    --kj-bg: #f9fafb;
-    --kj-surface: #fff;
-    --kj-text: #111827;
-    --kj-text-muted: #6b7280;
-    --kj-border: #e5e7eb;
-    --kj-accent: #3b82f6;
-    --kj-accent-on: #fff;
-    --kj-destructive: #ef4444;
-    --kj-radius-sm: 4px;
-    --kj-radius-md: 6px;
-    --kj-radius-lg: 12px;
-    --kj-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.1);
-    --kj-shadow-md: 0 8px 30px rgba(0, 0, 0, 0.1);
-    --kj-shadow-hard: 0 20px 60px rgba(0, 0, 0, 0.12);
-    --kj-font: system-ui, -apple-system, sans-serif;
-    --kj-btn-border: 1px solid transparent;
-    --kj-btn-outline-border: 1px solid #6b7280;
-    --kj-btn-ghost-color: #374151;
-    --kj-backdrop: rgba(0, 0, 0, 0.4);
-    --kj-transition: background 0.12s;
-  }
-}

package/src/table/index.ts

@@ -1 +0,0 @@
-export { KjTable, KjTableHeader, KJ_TABLE, type KjSortDirection } from './table';

package/src/table/table.spec.ts

@@ -1,113 +0,0 @@
-import { Component } from '@angular/core';
-import { ColumnDef } from '@tanstack/angular-table';
-import { render } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { KjTable, KjTableHeader } from './table';
-
-expect.extend(toHaveNoViolations);
-
-interface User { name: string; age: number; }
-
-@Component({
-  standalone: true,
-  imports: [KjTable, KjTableHeader],
-  template: `
-    <table [kjTable]="columns" [kjTableData]="data" #tbl="kjTable">
-      <thead>
-        @for (hg of tbl.table().getHeaderGroups(); track hg.id) {
-          <tr>
-            @for (h of hg.headers; track h.id) {
-              <th kjTableHeader [kjHeader]="h" scope="col">{{ h.id }}</th>
-            }
-          </tr>
-        }
-      </thead>
-      <tbody>
-        @for (row of tbl.table().getRowModel().rows; track row.id) {
-          <tr>
-            @for (cell of row.getVisibleCells(); track cell.id) {
-              <td>{{ cell.getValue() }}</td>
-            }
-          </tr>
-        }
-      </tbody>
-    </table>`,
-})
-class TableTestComponent {
-  columns: ColumnDef<User>[] = [
-    { accessorKey: 'name', header: 'Name' },
-    { accessorKey: 'age', header: 'Age' },
-  ];
-  data: User[] = [
-    { name: 'Alice', age: 30 },
-    { name: 'Bob', age: 25 },
-  ];
-}
-
-describe('KjTable', () => {
-  it('renders table headers', async () => {
-    const { container } = await render(TableTestComponent);
-    const headers = container.querySelectorAll('th');
-    expect(headers.length).toBe(2);
-  });
-
-  it('renders data rows', async () => {
-    const { container } = await render(TableTestComponent);
-    const rows = container.querySelectorAll('tbody tr');
-    expect(rows.length).toBe(2);
-  });
-
-  it('renders cell data', async () => {
-    const { getByText } = await render(TableTestComponent);
-    expect(getByText('Alice')).toBeInTheDocument();
-    expect(getByText('Bob')).toBeInTheDocument();
-  });
-
-  it('passes axe audit', async () => {
-    const { container } = await render(TableTestComponent);
-    expect(await axe(container)).toHaveNoViolations();
-  });
-
-  it('sortable header has tabindex=0', async () => {
-    const { container } = await render(TableTestComponent);
-    const ths = container.querySelectorAll('th');
-    ths.forEach(th => expect(th).toHaveAttribute('tabindex', '0'));
-  });
-
-  it('sortable header has aria-sort="none" initially', async () => {
-    const { container } = await render(TableTestComponent);
-    const ths = container.querySelectorAll('th');
-    ths.forEach(th => expect(th).toHaveAttribute('aria-sort', 'none'));
-  });
-
-  it('non-sortable column header has no cursor:pointer', async () => {
-    @Component({
-      standalone: true,
-      imports: [KjTable, KjTableHeader],
-      template: `
-        <table [kjTable]="columns" [kjTableData]="data" #tbl="kjTable">
-          <thead>
-            @for (hg of tbl.table().getHeaderGroups(); track hg.id) {
-              <tr>
-                @for (h of hg.headers; track h.id) {
-                  <th kjTableHeader [kjHeader]="h" scope="col">{{ h.id }}</th>
-                }
-              </tr>
-            }
-          </thead>
-          <tbody></tbody>
-        </table>`,
-    })
-    class NoSortTableComponent {
-      columns: ColumnDef<User>[] = [
-        { accessorKey: 'name', header: 'Name', enableSorting: false },
-      ];
-      data: User[] = [{ name: 'Alice', age: 30 }];
-    }
-
-    const { container } = await render(NoSortTableComponent);
-    const th = container.querySelector('th')!;
-    expect(th.style.cursor).not.toBe('pointer');
-    expect(th.hasAttribute('data-sort')).toBe(false);
-  });
-});

package/src/table/table.ts

@@ -1,126 +0,0 @@
-import {
-  ColumnDef,
-  RowData,
-  SortingState,
-  createAngularTable,
-  getCoreRowModel,
-  getSortedRowModel,
-  type Table,
-} from '@tanstack/angular-table';
-import { Directive, InjectionToken, computed, input, signal } from '@angular/core';
-
-/** Injection token providing the TanStack table instance to child directives. */
-export const KJ_TABLE = new InjectionToken<KjTable<unknown>>('KjTable');
-
-/**
- * Wraps TanStack Angular Table. Accepts `kjTable` (columns) and `kjTableData` signal inputs and
- * exposes the table instance (rows, headers, sorting) via the `KJ_TABLE` context token.
- *
- * Use `table` to access the full TanStack `Table<T>` instance in templates via `exportAs: 'kjTable'`.
- *
- * @example
- * ```html
- * <table [kjTable]="columns" [kjTableData]="rows" #tbl="kjTable">
- *   <thead>
- *     @for (headerGroup of tbl.table().getHeaderGroups(); track headerGroup.id) {
- *       <tr>
- *         @for (header of headerGroup.headers; track header.id) {
- *           <th kjTableHeader [kjHeader]="header">
- *             {{ header.column.columnDef.header }}
- *           </th>
- *         }
- *       </tr>
- *     }
- *   </thead>
- * </table>
- * ```
- * @category Core/Data
- */
-@Directive({
-  selector: '[kjTable]',
-  standalone: true,
-  exportAs: 'kjTable',
-  providers: [{ provide: KJ_TABLE, useExisting: KjTable }],
-})
-export class KjTable<TData extends RowData = unknown> {
-  /** Column definitions for the table. */
-  kjTable = input.required<ColumnDef<TData>[]>();
-
-  /** Data rows for the table. */
-  kjTableData = input<TData[]>([]);
-
-  private readonly _sorting = signal<SortingState>([]);
-
-  /** The TanStack table instance. Access rows, headers, and state here. */
-  readonly table: () => Table<TData> = createAngularTable<TData>(() => ({
-    data: this.kjTableData(),
-    columns: this.kjTable(),
-    state: { sorting: this._sorting() },
-    onSortingChange: (updater) => {
-      const next = typeof updater === 'function' ? updater(this._sorting()) : updater;
-      this._sorting.set(next);
-    },
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-  }));
-
-  /** Current sorting state as a signal. */
-  readonly sorting = this._sorting.asReadonly();
-}
-
-/** Sort direction for table columns. */
-export type KjSortDirection = 'asc' | 'desc';
-
-/**
- * Marks a `<th>` as a sortable column header. Sets `aria-sort` based on TanStack sort state.
- * Clicking toggles sort direction only when the column has sorting enabled.
- * If `enableSorting: false` is set on the column def, the header renders as plain text.
- *
- * @example
- * ```html
- * <th kjTableHeader [kjHeader]="header" scope="col">Name</th>
- * ```
- * @category Core/Data
- */
-@Directive({
-  selector: '[kjTableHeader]',
-  standalone: true,
-  host: {
-    '[style.cursor]':   'canSort() ? "pointer" : null',
-    '[attr.tabindex]':  'canSort() ? "0" : null',
-    '[attr.aria-sort]': 'canSort() ? ariaSort() : null',
-    '[attr.data-sort]': 'canSort() ? sortDir() : null',
-    '(click)':          'onHeaderClick()',
-    '(keydown.enter)':  'onHeaderClick()',
-    '(keydown.space)':  '$event.preventDefault(); onHeaderClick()',
-  },
-})
-export class KjTableHeader<TData extends RowData = unknown> {
-  /** The TanStack header object for this column. Pass from the table's getHeaderGroups(). */
-  kjHeader = input<ReturnType<Table<TData>['getHeaderGroups']>[0]['headers'][0] | undefined>(undefined);
-
-  /** Whether this column supports sorting, derived from TanStack column state. */
-  readonly canSort = computed(() => this.kjHeader()?.column.getCanSort() ?? false);
-
-  /** Current sort direction, or null when unsorted. */
-  readonly sortDir = computed((): KjSortDirection | null => {
-    const h = this.kjHeader();
-    if (!h) return null;
-    const sorted = h.column.getIsSorted();
-    if (sorted === 'asc') return 'asc';
-    if (sorted === 'desc') return 'desc';
-    return null;
-  });
-
-  /** ARIA sort attribute value derived from sort direction. */
-  readonly ariaSort = computed(() => {
-    const d = this.sortDir();
-    if (d === 'asc')  return 'ascending';
-    if (d === 'desc') return 'descending';
-    return 'none';
-  });
-
-  onHeaderClick(): void {
-    if (this.canSort()) this.kjHeader()?.column.toggleSorting();
-  }
-}

package/src/tabs/index.ts

@@ -1,2 +0,0 @@
-export { KjTabs, KjTabList, KjTab, KjTabPanel } from './tabs';
-export { KJ_TABS, type KjTabsContext } from './tabs.context';

package/src/tabs/tabs.context.ts

@@ -1,9 +0,0 @@
-import { InjectionToken, Signal } from '@angular/core';
-
-/** Shared context passed from KjTabs to child tab/panel directives. */
-export interface KjTabsContext {
-  value: Signal<string>;
-  activate: (value: string) => void;
-}
-
-export const KJ_TABS = new InjectionToken<KjTabsContext>('KjTabs');

package/src/tabs/tabs.spec.ts

@@ -1,40 +0,0 @@
-import { render, fireEvent } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { KjTabs, KjTabList, KjTab, KjTabPanel } from './tabs';
-
-expect.extend(toHaveNoViolations);
-
-const imports = [KjTabs, KjTabList, KjTab, KjTabPanel];
-const template = `
-  <div kjTabs [kjTabsValue]="'tab1'">
-    <div kjTabList aria-label="Demo tabs">
-      <button kjTab [kjTabValue]="'tab1'">Tab 1</button>
-      <button kjTab [kjTabValue]="'tab2'">Tab 2</button>
-    </div>
-    <div kjTabPanel [kjPanelFor]="'tab1'">Content 1</div>
-    <div kjTabPanel [kjPanelFor]="'tab2'">Content 2</div>
-  </div>`;
-
-describe('KjTabs', () => {
-  it('active tab has aria-selected=true', async () => {
-    const { getAllByRole } = await render(template, { imports });
-    expect(getAllByRole('tab')[0]).toHaveAttribute('aria-selected', 'true');
-    expect(getAllByRole('tab')[1]).toHaveAttribute('aria-selected', 'false');
-  });
-
-  it('inactive panel is hidden', async () => {
-    const { getByText } = await render(template, { imports });
-    expect(getByText('Content 2').closest('[kjTabPanel]')).toHaveAttribute('hidden', '');
-  });
-
-  it('clicking a tab activates it', async () => {
-    const { getAllByRole } = await render(template, { imports });
-    fireEvent.click(getAllByRole('tab')[1]);
-    expect(getAllByRole('tab')[1]).toHaveAttribute('aria-selected', 'true');
-  });
-
-  it('passes axe audit', async () => {
-    const { container } = await render(template, { imports });
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/tabs/tabs.ts

@@ -1,130 +0,0 @@
-import { Directive, computed, inject, input, model } from '@angular/core';
-import { KJ_TABS, KjTabsContext } from './tabs.context';
-
-/**
- * Root tabs container. Manages active tab value.
- * @example
- * ```html
- * <div kjTabs [(kjTabsValue)]="activeTab"><div kjTabList>...</div></div>
- * ```
- * @doc
- *  @doc-file tabs.example.ts
- *    ```typescript
- *       import { Component, signal } from '@angular/core';
- *       import { KjTabs, KjTabList, KjTab, KjTabPanel } from '@kouji-ui/core';
- *
- *       @Component({
- *         standalone: true,
- *         imports: [KjTabs, KjTabList, KjTab, KjTabPanel],
- *         styles: [`
- *           .tabs { background: #0c0c0c; padding: 2rem; }
- *           [kjTabList] { display: flex; border-bottom: 1px solid #1e1e1e; margin-bottom: 1.5rem; }
- *           [kjTab] { background: none; border: none; border-bottom: 2px solid transparent; color: #555; font-family: 'JetBrains Mono', monospace; font-size: 0.875rem; padding: 0.625rem 1.25rem; cursor: pointer; transition: color 0.15s, border-color 0.15s; margin-bottom: -1px; }
- *           [kjTab][aria-selected="true"] { color: #f0ede6; border-bottom-color: #b8f500; }
- *           [kjTab]:hover { color: #f0ede6; }
- *           [kjTabPanel] { color: #666; font-family: 'JetBrains Mono', monospace; font-size: 0.875rem; line-height: 1.6; }
- *           [hidden] { display: none; }
- *         `],
- *         template: `
- *           <div class="tabs">
- *             <div kjTabs [(kjTabsValue)]="activeTab" aria-label="Example tabs">
- *               <div kjTabList>
- *                 <button kjTab [kjTabValue]="'tab1'">Overview</button>
- *                 <button kjTab [kjTabValue]="'tab2'">API</button>
- *                 <button kjTab [kjTabValue]="'tab3'">Examples</button>
- *               </div>
- *               <div kjTabPanel [kjPanelFor]="'tab1'">The overview tab content goes here.</div>
- *               <div kjTabPanel [kjPanelFor]="'tab2'">API reference content goes here.</div>
- *               <div kjTabPanel [kjPanelFor]="'tab3'">Code examples go here.</div>
- *             </div>
- *           </div>
- *         `,
- *       })
- *       export class TabsExampleComponent {
- *         activeTab = signal('tab1');
- *       }
- *    ```
- * @category Core/Navigation
- */
-@Directive({
-  selector: '[kjTabs]',
-  standalone: true,
-  providers: [{ provide: KJ_TABS, useExisting: KjTabs }],
-})
-export class KjTabs implements KjTabsContext {
-  /** Two-way bound active tab value. */
-  kjTabsValue = model<string>('');
-
-  /** Read-only signal of the current active tab value. */
-  readonly value = this.kjTabsValue.asReadonly();
-
-  /** Activates the tab with the given value. */
-  activate(val: string): void {
-    this.kjTabsValue.set(val);
-  }
-}
-
-/**
- * Container for tab triggers. Sets `role="tablist"`.
- * @category Core/Navigation
- */
-@Directive({
-  selector: '[kjTabList]',
-  standalone: true,
-  host: { role: 'tablist' },
-})
-export class KjTabList {}
-
-/**
- * Individual tab trigger. Sets `role="tab"` and manages `aria-selected`.
- * @example `<button kjTab [kjTabValue]="'profile'">Profile</button>`
- * @category Core/Navigation
- */
-@Directive({
-  selector: '[kjTab]',
-  standalone: true,
-  host: {
-    role: 'tab',
-    '[attr.aria-selected]': 'active().toString()',
-    '[attr.data-active]': 'active() ? "" : null',
-    '[attr.tabindex]': 'active() ? "0" : "-1"',
-    '(click)': 'activate()',
-  },
-})
-export class KjTab {
-  private readonly ctx = inject(KJ_TABS);
-
-  /** The value this tab represents. */
-  kjTabValue = input.required<string>();
-
-  /** Whether this tab is currently active. */
-  readonly active = computed(() => this.ctx.value() === this.kjTabValue());
-
-  /** Activates this tab by updating the shared context. */
-  activate(): void {
-    this.ctx.activate(this.kjTabValue());
-  }
-}
-
-/**
- * Tab panel content. Hidden when not active.
- * @example `<div kjTabPanel [kjPanelFor]="'profile'">Profile content</div>`
- * @category Core/Navigation
- */
-@Directive({
-  selector: '[kjTabPanel]',
-  standalone: true,
-  host: {
-    role: 'tabpanel',
-    '[attr.hidden]': 'hidden() ? "" : null',
-  },
-})
-export class KjTabPanel {
-  private readonly ctx = inject(KJ_TABS);
-
-  /** The tab value this panel corresponds to. */
-  kjPanelFor = input.required<string>();
-
-  /** Whether this panel is currently hidden. */
-  readonly hidden = computed(() => this.ctx.value() !== this.kjPanelFor());
-}

package/src/test-setup.ts

@@ -1,5 +0,0 @@
-import '@analogjs/vitest-angular/setup-zone';
-import { setupTestBed } from '@analogjs/vitest-angular/setup-testbed';
-import '@testing-library/jest-dom';
-
-setupTestBed({ zoneless: false });

package/src/toast/index.ts

@@ -1,21 +0,0 @@
-export {
-  KjToast,
-  KjToastViewport,
-  KjToastClose,
-  type KjToastRenderable,
-  type KjToastVariant,
-  type KjToastContext,
-  type KjToastOptions,
-  type KjToastPositionX,
-  type KjToastPositionY,
-} from './toast';
-export { KjToastService, type KjToastItem, type KjToastTemplateContext } from './toast.service';
-export {
-  KJ_TOAST_STRATEGY,
-  KJ_TOAST_SONNER_STRATEGY,
-  KJ_TOAST_LIST_STRATEGY,
-  type KjToastStrategy,
-  provideKjToastStrategy,
-  provideKjToastSonnerStrategy,
-  provideKjToastListStrategy,
-} from './toast.strategy';

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 'ℹ';
-    }
-  }
-}