@kouji-ui/components 0.1.1 → 0.1.2

package/src/toast/toast.ts

@@ -1,168 +0,0 @@
-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

@@ -1,7 +0,0 @@
-// 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

@@ -1,20 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

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

package/src/toggle/toggle.css

@@ -1,123 +0,0 @@
-@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

@@ -1,65 +0,0 @@
-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

@@ -1,113 +0,0 @@
-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

@@ -1,9 +0,0 @@
-// 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

@@ -1,16 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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 {}