@kouji-ui/components 0.1.1

package/src/toast/toast.ts

@@ -0,0 +1,168 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  input,
+} from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { KjToastViewport, KjToast, KjToastClose } from '@kouji-ui/core';
+import type { KjToastVariant } from '@kouji-ui/core';
+
+/**
+ * Toast suite shell. Hosts the documentation page for the toast service +
+ * viewport + close button trio. Use `KjToastService.show()` to enqueue a
+ * toast, mount `<kj-toast-viewport>` near your trigger, and place
+ * `<kj-toast>` / `<kj-toast-close>` inside the per-call `<ng-template>`.
+ *
+ * @doc
+ * @doc-name toast
+ * @doc-is-main
+ * @doc-example Default
+ *   The default playground — enqueue a single toast from a button click.
+ *   @doc-file toast.default.example.ts
+ * @doc-example Usage
+ *   A walkthrough of the most common toast usages — variants, an action
+ *   button inside the body, and dismissal via `KjToastService.dismiss(id)`.
+ *   @doc-file toast.usage.example.ts
+ * @doc-example Variants
+ *   `default` / `success` / `warning` / `error` / `info` — themed per tone.
+ *   @doc-file toast.variants.example.ts
+ * @doc-example With action
+ *   Project a secondary `<kj-button>` inside the template to offer an action.
+ *   @doc-file toast.with-action.example.ts
+ * @doc-example Dismissible
+ *   `<kj-toast-close>` calls the service's `dismiss(id)` for the current toast.
+ *   @doc-file toast.dismissible.example.ts
+ *
+ * @doc-keyboard
+ *   F6           — Moves focus into the toast viewport (when the host app wires it)
+ *   Enter|Space  — Activates the focused action / close button inside a toast
+ *   Tab          — Cycles through the dismiss + action buttons inside a toast
+ *   Escape       — Optional — apps can wire to `dismiss(id)` on the active toast
+ *
+ * @doc-aria
+ *   role="region"     — applied to `<kj-toast-viewport>` with `aria-label="Notifications"`
+ *   role="status"     — applied to each toast (non-blocking polite announce)
+ *   aria-live         — "polite" for default; "assertive" for error variants
+ *   aria-label        — Defaults to "Dismiss notification" on `<kj-toast-close>`
+ *   data-variant      — Mirrors the toast variant for theme hooks
+ *
+ * @doc-touch
+ *   The dismiss button defaults to a 32px hit area at `md` density — wrap
+ *   icon-only close buttons with extra padding or label text to reach the
+ *   WCAG 2.5.5 floor on touch-first surfaces.
+ *
+ * @doc-a11y
+ *   Implements the toast pattern from ARIA APG. Each toast is a polite live
+ *   region so AT users hear the title without losing their place. Error /
+ *   warning variants escalate to `aria-live="assertive"` per theme. Focus is
+ *   never stolen — the user keeps typing while toasts arrive in the viewport.
+ *
+ * @doc-related dialog,alert,spinner
+ *
+ * @doc-css-var
+ *   --kj-toast-z-index  — Stack level for the viewport. Default 1000; raise above app overlays.
+ *   --kj-toast-gap      — Vertical gap between stacked toasts in both collapsed and expanded states.
+ *
+ * @doc-category Library/Overlay
+ */
+@Component({
+  selector: 'kj-toast-wrapper',
+  standalone: true,
+  template: `<ng-content />`,
+  styleUrl: './toast.css',
+  encapsulation: ViewEncapsulation.None,
+  host: { style: 'display: contents;' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjToastWrapperComponent {}
+
+/**
+ * Toast viewport. Mount once near your trigger button (or in your app shell).
+ * Renders each active toast using the per-call template passed to
+ * `KjToastService.show(template, options)`.
+ */
+@Component({
+  selector: 'kj-toast-viewport',
+  standalone: true,
+  imports: [KjToastViewport, NgTemplateOutlet],
+  template: `
+    <ol
+      kjToastViewport
+      class="kj-toast-viewport"
+      #vp="kjToastViewport"
+      aria-label="Notifications"
+    >
+      @for (r of vp.renderable(); track r.id) {
+        <li>
+          <ng-container *ngTemplateOutlet="r.template; context: r.context" />
+        </li>
+      }
+    </ol>
+  `,
+  styleUrl: './toast.css',
+  encapsulation: ViewEncapsulation.None,
+  host: { style: 'display: contents;' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjToastViewportComponent {}
+
+/**
+ * Single toast item. Bind `[variant]` from `ctx.variant` and `[id]` from `ctx.id`.
+ * Place inside the `<ng-template let-ctx>` you pass to `KjToastService.show()`.
+ */
+@Component({
+  selector: 'kj-toast',
+  standalone: true,
+  imports: [KjToast],
+  template: `
+    <div
+      kjToast
+      class="kj-toast"
+      [kjToastVariant]="variant()"
+      [kjToastId]="id()"
+    ><ng-content /></div>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  host: { style: 'display: contents;' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjToastComponent {
+  readonly variant = input<KjToastVariant>('default');
+  readonly id = input<string>('');
+}
+
+/**
+ * Dismiss button for a toast. Bind `[toastId]` from `ctx.id`. Clicking calls
+ * `KjToastService.dismiss(id)`.
+ *
+ * The rendered `<button>` carries a default `aria-label="Dismiss notification"`
+ * so icon-only close buttons remain accessible (WCAG 4.1.2). Override via the
+ * `ariaLabel` input or by projecting visible text.
+ */
+@Component({
+  selector: 'kj-toast-close',
+  standalone: true,
+  imports: [KjToastClose],
+  template: `<button
+    type="button"
+    [kjToastClose]="toastId()"
+    [attr.aria-label]="ariaLabel()"
+    class="kj-toast-close"
+  ><ng-content /></button>`,
+  encapsulation: ViewEncapsulation.None,
+  host: { style: 'display: contents;' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjToastCloseComponent {
+  /** The id of the toast to dismiss — bind from `ctx.id` in your template context. */
+  readonly toastId = input.required<string>();
+
+  /**
+   * Accessible name for the close button. Defaults to `"Dismiss notification"`
+   * so icon-only close affordances satisfy WCAG 4.1.2 (Name, Role, Value)
+   * without consumer ceremony. Override per-instance when the toast already
+   * names its dismiss action elsewhere.
+   */
+  readonly ariaLabel = input<string>('Dismiss notification');
+}

package/src/toggle/_examples/index.ts

@@ -0,0 +1,7 @@
+// AUTO-GENERATED by scripts/migrate-examples.mjs
+// One barrel per component folder — used by the docs app as a lazy chunk.
+export { KjToggleCheckedExample } from './toggle.checked.example';
+export { KjToggleDefaultExample } from './toggle.default.example';
+export { KjToggleDisabledExample } from './toggle.disabled.example';
+export { KjToggleUsageExample } from './toggle.usage.example';
+export { KjToggleWithLabelExample } from './toggle.with-label.example';

package/src/toggle/_examples/toggle.checked.example.ts

@@ -0,0 +1,20 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { KjToggleComponent } from '../toggle';
+
+@Component({
+  selector: 'kj-toggle-checked-example',
+  standalone: true,
+  imports: [KjToggleComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `<kj-toggle [(pressed)]="active" ariaLabel="Active">Active</kj-toggle>`,
+})
+export class KjToggleCheckedExample {
+  readonly active = signal(true);
+}

package/src/toggle/_examples/toggle.default.example.ts

@@ -0,0 +1,20 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { KjToggleComponent } from '../toggle';
+
+@Component({
+  selector: 'kj-toggle-default-example',
+  standalone: true,
+  imports: [KjToggleComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `<kj-toggle [(pressed)]="bold" ariaLabel="Bold">B</kj-toggle>`,
+})
+export class KjToggleDefaultExample {
+  readonly bold = signal(false);
+}

package/src/toggle/_examples/toggle.disabled.example.ts

@@ -0,0 +1,26 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { KjToggleComponent } from '../toggle';
+
+@Component({
+  selector: 'kj-toggle-disabled-example',
+  standalone: true,
+  imports: [KjToggleComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-toggle [(pressed)]="off" [disabled]="true" ariaLabel="Off (disabled)">Off</kj-toggle>
+    <kj-toggle [(pressed)]="on" [disabled]="true" ariaLabel="On (disabled)" style="margin-left:1rem"
+      >On</kj-toggle
+    >
+  `,
+})
+export class KjToggleDisabledExample {
+  readonly off = signal(false);
+  readonly on = signal(true);
+}

package/src/toggle/_examples/toggle.usage.example.ts

@@ -0,0 +1,51 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { KjToggleComponent } from '../toggle';
+
+/**
+ * A walkthrough of the most common toggle usages — two-way `[(pressed)]`,
+ * disabled, a labelled toggle, and the switch appearance. Use this as the
+ * copy-paste starting point for new screens.
+ */
+@Component({
+  selector: 'kj-toggle-usage-example',
+  standalone: true,
+  imports: [KjToggleComponent],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--kj-space-md);
+      }
+      .row {
+        display: flex;
+        gap: var(--kj-space-md);
+        align-items: center;
+        flex-wrap: wrap;
+      }
+      .label {
+        font: 0.875rem var(--kj-font-sans);
+        color: var(--kj-fg-default);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <div class="row">
+      <kj-toggle [(pressed)]="bold" ariaLabel="Bold">B</kj-toggle>
+      <kj-toggle [(pressed)]="italic" ariaLabel="Italic">I</kj-toggle>
+      <kj-toggle [disabled]="true" ariaLabel="Strikethrough">S</kj-toggle>
+    </div>
+
+    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -->
+    <label class="row">
+      <kj-toggle [(pressed)]="notifications" appearance="switch" ariaLabel="Notifications" />
+      <span class="label">{{ notifications() ? 'Notifications on' : 'Notifications off' }}</span>
+    </label>
+  `,
+})
+export class KjToggleUsageExample {
+  readonly bold = signal(true);
+  readonly italic = signal(false);
+  readonly notifications = signal(true);
+}

package/src/toggle/_examples/toggle.with-label.example.ts

@@ -0,0 +1,30 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { KjToggleComponent } from '../toggle';
+
+@Component({
+  selector: 'kj-toggle-with-label-example',
+  standalone: true,
+  imports: [KjToggleComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+      .row {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--kj-space-sm);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <div class="row">
+      <kj-toggle [(pressed)]="dark" ariaLabel="Dark mode"></kj-toggle>
+      <span>Dark mode</span>
+    </div>
+  `,
+})
+export class KjToggleWithLabelExample {
+  readonly dark = signal(false);
+}

package/src/toggle/index.ts

@@ -0,0 +1 @@
+export * from './toggle';

package/src/toggle/toggle.css

@@ -0,0 +1,123 @@
+@layer kj.component {
+  .kj-toggle {
+    --kj-toggle-bg:           var(--kj-bg-surface);
+    --kj-toggle-bg-pressed:   var(--kj-bg-primary);
+    --kj-toggle-fg:           var(--kj-fg-default);
+    --kj-toggle-fg-pressed:   var(--kj-fg-on-primary);
+    --kj-toggle-radius:       var(--kj-radius-field);
+    --kj-toggle-padding-x:    var(--kj-space-md);
+    --kj-toggle-padding-y:    var(--kj-space-sm);
+    --kj-toggle-font-size:    var(--kj-text-sm);
+
+    display: inline-flex;
+    align-items: center;
+    gap: var(--kj-space-sm);
+    background: var(--kj-toggle-bg);
+    color: var(--kj-toggle-fg);
+    border: var(--kj-border) solid transparent;
+    border-radius: var(--kj-toggle-radius);
+    padding: var(--kj-toggle-padding-y) var(--kj-toggle-padding-x);
+    font: var(--kj-toggle-font-size) / 1.2 var(--kj-font-sans);
+    cursor: pointer;
+    transition: var(--kj-transition);
+  }
+
+  .kj-toggle[data-pressed] {
+    background: var(--kj-toggle-bg-pressed);
+    color: var(--kj-toggle-fg-pressed);
+  }
+
+  .kj-toggle[data-size="sm"] {
+    --kj-toggle-padding-x: var(--kj-space-sm);
+    --kj-toggle-padding-y: 0.25rem;
+    --kj-toggle-font-size: 0.8125rem;
+  }
+  .kj-toggle[data-size="lg"] {
+    --kj-toggle-padding-x: var(--kj-space-lg);
+    --kj-toggle-padding-y: 0.625rem;
+    --kj-toggle-font-size: 1rem;
+  }
+
+  .kj-toggle:hover { background: color-mix(in oklab, var(--kj-toggle-bg) 88%, black); }
+  .kj-toggle:focus-visible { outline: 2px solid var(--kj-bg-primary); outline-offset: 2px; }
+  .kj-toggle[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
+
+  /* ── Switch appearance — track + thumb sliding switch ────────────
+     Matches design-revamp/kouji-ui/project/app.css `.toggle` block
+     (lines 447–471): 44×24 rounded track, 18×18 thumb at top:2 left:2,
+     translateX(20px) on pressed. Tokenised throughout (no hex). */
+  .kj-toggle--switch {
+    --kj-switch-w: 44px;
+    --kj-switch-h: 24px;
+    --kj-switch-thumb: 18px;
+    --kj-switch-pad: 2px;
+
+    background: transparent;
+    border: 0;
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    font-family: var(--kj-font-sans);
+    font-size: var(--kj-text-sm);
+    color: var(--kj-fg-default);
+  }
+  .kj-toggle--switch:hover { background: transparent; }
+  .kj-toggle--switch:focus-visible { outline: none; }
+  .kj-toggle--switch:focus-visible .kj-toggle__track {
+    outline: 2px solid var(--kj-bg-primary);
+    outline-offset: 2px;
+  }
+
+  /* Track + thumb corner geometry follows the theme. kouji (radius 0)
+     renders a square track + square thumb; sakura/dune (large radii)
+     render fully pill; everyone in between scales. Falls back to the
+     pill-shape (radius = track height) when --kj-radius-selector
+     resolves to 0 only on themes where that's the brand decision. */
+  .kj-toggle--switch {
+    --kj-switch-track-radius: var(--kj-radius-selector, var(--kj-switch-h));
+    --kj-switch-thumb-radius: calc(var(--kj-switch-track-radius) - var(--kj-switch-pad));
+  }
+
+  .kj-toggle__track {
+    width: var(--kj-switch-w);
+    height: var(--kj-switch-h);
+    border-radius: var(--kj-switch-track-radius);
+    background-color: var(--kj-bg-surface);
+    border: var(--kj-border) solid var(--kj-border-default);
+    position: relative;
+    flex-shrink: 0;
+    transition: background-color 0.25s cubic-bezier(.34, 1.56, .64, 1);
+  }
+
+  .kj-toggle__thumb {
+    position: absolute;
+    top: var(--kj-switch-pad);
+    left: var(--kj-switch-pad);
+    width: var(--kj-switch-thumb);
+    height: var(--kj-switch-thumb);
+    /* Mirror the track's radius so square themes stay square, soft themes
+       stay round. `max(0, ...)` keeps the result non-negative on kouji
+       (radius 0). */
+    border-radius: max(0px, var(--kj-switch-thumb-radius));
+    background-color: var(--kj-fg-default);
+    transition: transform 0.25s cubic-bezier(.34, 1.56, .64, 1),
+                background-color 0.25s cubic-bezier(.34, 1.56, .64, 1);
+  }
+
+  .kj-toggle--switch[aria-pressed="true"] .kj-toggle__track,
+  .kj-toggle--switch[data-pressed] .kj-toggle__track {
+    background-color: var(--kj-bg-primary);
+    border-color: var(--kj-bg-primary);
+  }
+  .kj-toggle--switch[aria-pressed="true"] .kj-toggle__thumb,
+  .kj-toggle--switch[data-pressed] .kj-toggle__thumb {
+    transform: translateX(calc(var(--kj-switch-w) - var(--kj-switch-h)));
+    background-color: var(--kj-fg-on-primary);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .kj-toggle__track,
+    .kj-toggle__thumb { transition: none; }
+  }
+}

package/src/toggle/toggle.playground.ts

@@ -0,0 +1,65 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { KjToggleComponent } from './toggle';
+import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
+
+/**
+ * Playground state — module-scope signals.
+ */
+const appearance = signal<'press' | 'switch'>('press');
+const size = signal<'sm' | 'md' | 'lg'>('md');
+const label = signal('B');
+const pressed = signal(false);
+const disabled = signal(false);
+
+@Component({
+  selector: 'kj-toggle-playground',
+  standalone: true,
+  imports: [KjToggleComponent],
+  template: `
+    <kj-toggle
+      [appearance]="appearance()"
+      [size]="size()"
+      [(pressed)]="pressed"
+      [disabled]="disabled()"
+    >{{ label() }}</kj-toggle>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjTogglePlaygroundDemo {
+  protected readonly appearance = appearance;
+  protected readonly size = size;
+  protected readonly label = label;
+  protected readonly pressed = pressed;
+  protected readonly disabled = disabled;
+}
+
+export const PLAYGROUND: PlaygroundFile = {
+  component: KjTogglePlaygroundDemo,
+  state: {
+    appearance: appearance as unknown as ReturnType<typeof signal>,
+    size: size as unknown as ReturnType<typeof signal>,
+    label: label as unknown as ReturnType<typeof signal>,
+    pressed: pressed as unknown as ReturnType<typeof signal>,
+    disabled: disabled as unknown as ReturnType<typeof signal>,
+  },
+  controls: [
+    { kind: 'chips', name: 'appearance', label: 'appearance', options: ['press', 'switch'] },
+    { kind: 'chips', name: 'size', label: 'size', options: ['sm', 'md', 'lg'] },
+    { kind: 'text', name: 'label', label: 'label' },
+    { kind: 'toggle', name: 'pressed', label: 'pressed' },
+    { kind: 'toggle', name: 'disabled', label: 'disabled' },
+  ],
+  snippet: (values) => {
+    const s = values as {
+      appearance: string;
+      size: string;
+      label: string;
+      pressed: boolean;
+      disabled: boolean;
+    };
+    const attrs: string[] = [`appearance="${s.appearance}"`, `size="${s.size}"`];
+    if (s.pressed) attrs.push('[pressed]="true"');
+    if (s.disabled) attrs.push('[disabled]="true"');
+    return `<kj-toggle\n  ${attrs.join('\n  ')}\n>${s.label}</kj-toggle>`;
+  },
+};

package/src/toggle/toggle.ts

@@ -0,0 +1,113 @@
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, model, input } from '@angular/core';
+import { KjToggle } from '@kouji-ui/core';
+
+/**
+ * Styled wrapper around the headless `KjToggle` directive.
+ *
+ * The host `<kj-toggle>` is `display: contents`. Internally renders a real
+ * `<button>` with the `kjToggle` directive applied. Two-way bind via
+ * `[(pressed)]`; the wrapper exposes the same press model.
+ *
+ * @doc-example Default
+ *   The default playground — an unpressed toggle with an icon-only label.
+ *   @doc-file toggle.default.example.ts
+ * @doc-example Usage
+ *   A walkthrough of the most common toggle usages — two-way `[(pressed)]`,
+ *   disabled, with a text label, and the switch appearance.
+ *   @doc-file toggle.usage.example.ts
+ * @doc-example Checked
+ *   Pre-pressed state via `[pressed]="true"` — flips `aria-pressed`.
+ *   @doc-file toggle.checked.example.ts
+ * @doc-example Disabled
+ *   `[disabled]="true"` removes the toggle from the tab order.
+ *   @doc-file toggle.disabled.example.ts
+ * @doc-example With label
+ *   Project a text label next to the toggle for non-icon contexts.
+ *   @doc-file toggle.with-label.example.ts
+ *
+ * @doc-keyboard
+ *   Enter|Space — Flips the pressed state and fires `(pressedChange)`
+ *   Tab         — Moves focus to the next focusable element
+ *
+ * @doc-aria
+ *   role="switch"   — applied by the headless `KjToggle` directive
+ *   aria-pressed    — reflects the two-way `[(pressed)]` model
+ *   aria-disabled   — reflected when `[disabled]="true"`
+ *   aria-label      — required for icon-only toggles (dev-mode enforces it)
+ *   data-size       — Mirrors the resolved size for theme hooks
+ *   data-appearance — Mirrors `'press'` vs `'switch'` for CSS hooks
+ *
+ * @doc-touch
+ *   `md` (default) and `lg` meet WCAG 2.5.5 (≥ 44×44). `sm` density retains
+ *   the floor via padding — only horizontal padding shrinks.
+ *
+ * @doc-a11y
+ *   Renders a real `<button role="switch">` so AT announces the pressed
+ *   state and the native focus ring lights up on `:focus-visible`. The
+ *   switch appearance is purely visual — the same `role="switch"` semantics
+ *   apply, so consumers can swap chrome without re-wiring AT.
+ *
+ * @doc-related checkbox,button,radio
+ *
+ * @doc-css-var
+ *   --kj-toggle-bg          — Unpressed background fill.
+ *   --kj-toggle-bg-pressed  — Pressed-state background fill. Defaults to --kj-bg-primary.
+ *   --kj-toggle-fg          — Unpressed foreground (label/icon) color.
+ *   --kj-toggle-fg-pressed  — Pressed-state foreground color.
+ *   --kj-toggle-radius      — Corner radius. Inherits --kj-radius-field.
+ *   --kj-toggle-padding-x   — Horizontal padding. Sizes override.
+ *   --kj-toggle-padding-y   — Vertical padding. Sizes override.
+ *   --kj-toggle-font-size   — Font size. Sizes (sm/md/lg) override.
+ *   --kj-switch-w           — Switch-appearance track width. Default 44px.
+ *   --kj-switch-h           — Switch-appearance track height. Default 24px.
+ *   --kj-switch-thumb       — Switch-appearance thumb diameter. Default 18px.
+ *   --kj-switch-pad         — Inner padding between thumb and track. Default 2px.
+ *
+ * @doc-category Library/Data input
+ * @doc
+ * @doc-name toggle
+ * @doc-description Themed press/unpress toggle button for binary on/off controls.
+ * @doc-is-main
+ */
+@Component({
+  selector: 'kj-toggle',
+  standalone: true,
+  imports: [KjToggle],
+  template: `
+    <button
+      type="button"
+      kjToggle
+      class="kj-toggle"
+      [class.kj-toggle--switch]="appearance() === 'switch'"
+      [(kjPressed)]="pressed"
+      [kjDisabled]="disabled()"
+      [attr.data-size]="size()"
+      [attr.data-appearance]="appearance()"
+      [attr.aria-label]="ariaLabel()"
+    >
+      @if (appearance() === 'switch') {
+        <span class="kj-toggle__track" aria-hidden="true">
+          <span class="kj-toggle__thumb"></span>
+        </span>
+      }
+      <ng-content />
+    </button>
+  `,
+  styleUrl: './toggle.css',
+  encapsulation: ViewEncapsulation.None,
+  host: { style: 'display: contents;' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjToggleComponent {
+  readonly pressed = model<boolean>(false);
+  readonly disabled = input(false);
+  readonly size = input<'sm' | 'md' | 'lg'>('md');
+  readonly ariaLabel = input<string | undefined>(undefined);
+  /**
+   * `'press'` (default) renders the toggle as a press/unpress button — the
+   * classic kj-toggle look. `'switch'` renders a track+thumb sliding switch
+   * matching `app.css .toggle` from the design source. Both keep
+   * `role="switch"` + `aria-pressed` semantics from `kjToggle`.
+   */
+  readonly appearance = input<'press' | 'switch'>('press');
+}

package/src/tooltip/_examples/index.ts

@@ -0,0 +1,9 @@
+// AUTO-GENERATED by scripts/migrate-examples.mjs
+// One barrel per component folder — used by the docs app as a lazy chunk.
+export { KjTooltipDelaysExample } from './tooltip.delays.example';
+export { KjTooltipDisabledExample } from './tooltip.disabled.example';
+export { KjTooltipExample } from './tooltip.example';
+export { KjTooltipGroupExample } from './tooltip.group.example';
+export { KjTooltipRichExample } from './tooltip.rich.example';
+export { KjTooltipSidesExample } from './tooltip.sides.example';
+export { KjTooltipUsageExample } from './tooltip.usage.example';

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

@@ -0,0 +1,16 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjTooltipTrigger, KjTooltipContent } from '@kouji-ui/core';
+import { KjButtonComponent } from '../../button/button';
+
+// TODO(wrapper-overlay): re-skin delays demo.
+@Component({
+  selector: 'kj-tooltip-delays-example',
+  standalone: true,
+  imports: [KjTooltipTrigger, KjTooltipContent, KjButtonComponent],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-button kjTooltipTrigger [kjOpenDelay]="500" #t="kjTooltipTrigger">Slow</kj-button>
+    <kj-tooltip-content [kjFor]="t">Half-second delay</kj-tooltip-content>
+  `,
+})
+export class KjTooltipDelaysExample {}

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

@@ -0,0 +1,16 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjTooltipTrigger, KjTooltipContent } from '@kouji-ui/core';
+import { KjButtonComponent } from '../../button/button';
+
+// TODO(wrapper-overlay): re-skin disabled demo.
+@Component({
+  selector: 'kj-tooltip-disabled-example',
+  standalone: true,
+  imports: [KjTooltipTrigger, KjTooltipContent, KjButtonComponent],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-button kjTooltipTrigger [kjDisabled]="true" #t="kjTooltipTrigger">No tooltip</kj-button>
+    <kj-tooltip-content [kjFor]="t">Hidden</kj-tooltip-content>
+  `,
+})
+export class KjTooltipDisabledExample {}