@kouji-ui/components 0.1.1 → 0.1.3

package/src/alert/alert.css

@@ -1,133 +0,0 @@
-@layer kj.component {
-  .kj-alert {
-    /* component knobs — themes/users override any of these */
-    --kj-alert-bg:           var(--kj-bg-body);
-    --kj-alert-fg:           var(--kj-fg-default);
-    --kj-alert-border-color: var(--kj-border-default);
-    --kj-alert-accent:       var(--kj-fg-info);
-    --kj-alert-radius:       var(--kj-radius-box, 0.5rem);
-    --kj-alert-padding-x:    var(--kj-space-lg, 1rem);
-    --kj-alert-padding-y:    var(--kj-space-md, 0.75rem);
-    --kj-alert-gap:          var(--kj-space-md, 0.75rem);
-    --kj-alert-font-size:    var(--kj-text-sm, 0.875rem);
-
-    display: flex;
-    align-items: flex-start;
-    gap: var(--kj-alert-gap);
-    background: var(--kj-alert-bg);
-    color: var(--kj-alert-fg);
-    border: var(--kj-border, 1px) solid var(--kj-alert-border-color);
-    border-left: 4px solid var(--kj-alert-accent);
-    border-radius: var(--kj-alert-radius);
-    padding: var(--kj-alert-padding-y) var(--kj-alert-padding-x);
-    font: var(--kj-alert-font-size) / 1.45 var(--kj-font-sans, sans-serif);
-    transition: opacity 200ms ease, transform 200ms ease;
-  }
-
-  .kj-alert[data-dismissed="true"] {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-
-  /* Severity variants — flip accent + (optionally) bg/fg. */
-  .kj-alert[data-variant="info"]    { --kj-alert-accent: var(--kj-fg-info, #2563eb); }
-  .kj-alert[data-variant="success"] { --kj-alert-accent: var(--kj-fg-success, #16a34a); }
-  .kj-alert[data-variant="warning"] { --kj-alert-accent: var(--kj-fg-warning, #d97706); }
-  .kj-alert[data-variant="error"]   { --kj-alert-accent: var(--kj-fg-danger, #dc2626); }
-  .kj-alert[data-variant="neutral"] { --kj-alert-accent: var(--kj-fg-muted, #6b7280); }
-
-  /* Static / banner mode — span full width, sticky-friendly chrome. */
-  .kj-alert[data-mode="static"] {
-    border-left-width: var(--kj-border, 1px);
-    border-top: 4px solid var(--kj-alert-accent);
-    border-radius: 0;
-  }
-
-  /* Sizes */
-  .kj-alert[data-size="sm"] {
-    --kj-alert-padding-x: var(--kj-space-md, 0.75rem);
-    --kj-alert-padding-y: var(--kj-space-sm, 0.5rem);
-    --kj-alert-font-size: 0.8125rem;
-  }
-  .kj-alert[data-size="lg"] {
-    --kj-alert-padding-x: var(--kj-space-xl, 1.25rem);
-    --kj-alert-padding-y: var(--kj-space-lg, 1rem);
-    --kj-alert-font-size: 1rem;
-  }
-
-  /* ── Body wrapper ─────────────────────────────────────────────── */
-  .kj-alert__body {
-    flex: 1 1 auto;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-  }
-
-  /* ── Title / Description ──────────────────────────────────────── */
-  .kj-alert__title {
-    margin: 0;
-    font-weight: 600;
-    font-size: 1em;
-    color: var(--kj-alert-accent);
-    line-height: 1.3;
-  }
-  .kj-alert__description {
-    margin: 0;
-    color: var(--kj-alert-fg);
-    opacity: 0.9;
-  }
-
-  /* ── Icon ─────────────────────────────────────────────────────── */
-  .kj-alert__icon {
-    flex: 0 0 auto;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.25em;
-    height: 1.25em;
-    color: var(--kj-alert-accent);
-    margin-top: 0.1em;
-  }
-
-  /* ── Actions ──────────────────────────────────────────────────── */
-  .kj-alert__actions {
-    flex: 0 0 auto;
-    display: inline-flex;
-    align-items: center;
-    gap: var(--kj-space-sm, 0.5rem);
-    margin-left: auto;
-  }
-
-  /* ── Dismiss ──────────────────────────────────────────────────── */
-  .kj-alert__dismiss {
-    flex: 0 0 auto;
-    appearance: none;
-    background: transparent;
-    border: 0;
-    color: inherit;
-    cursor: pointer;
-    padding: 4px 8px;
-    border-radius: 4px;
-    line-height: 1;
-    font-size: 1.1rem;
-    opacity: 0.7;
-    margin-left: auto;
-    /* Touch-target floor (WCAG 2.5.5) */
-    min-width: 2.75rem;
-    min-height: 2.75rem;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .kj-alert__dismiss:hover { opacity: 1; background: rgb(0 0 0 / 0.06); }
-  .kj-alert__dismiss:focus-visible {
-    outline: 2px solid var(--kj-alert-accent);
-    outline-offset: 2px;
-  }
-
-  /* When actions and dismiss coexist, dismiss should not push actions away. */
-  .kj-alert__actions + .kj-alert__dismiss {
-    margin-left: 0;
-  }
-}

package/src/alert/alert.playground.ts

@@ -1,111 +0,0 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import {
-  KjAlertComponent,
-  KjAlertDescriptionComponent,
-  KjAlertDismissComponent,
-  KjAlertIconComponent,
-  KjAlertTitleComponent,
-} from './alert';
-import { KjButtonComponent } from '../button/button';
-import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
-
-/**
- * Playground state — module-scope signals. Knobs cover severity, size,
- * banner mode, dismiss button, and the action row to exercise every slot
- * on the alert composition.
- */
-const variant = signal<'info' | 'success' | 'warning' | 'error'>('info');
-const size = signal<'sm' | 'md' | 'lg'>('md');
-const banner = signal(false);
-const dismissible = signal(false);
-const withActions = signal(false);
-const title = signal('Heads up');
-const description = signal('New theme tokens just landed — try the dark variant in your settings.');
-
-@Component({
-  selector: 'kj-alert-playground',
-  standalone: true,
-  imports: [
-    KjAlertComponent,
-    KjAlertIconComponent,
-    KjAlertTitleComponent,
-    KjAlertDescriptionComponent,
-    KjAlertDismissComponent,
-    KjButtonComponent,
-  ],
-  template: `
-    <kj-alert
-      [kjVariant]="variant()"
-      [kjSize]="size()"
-      [kjAlertStatic]="banner()"
-    >
-      <kj-alert-icon>i</kj-alert-icon>
-      <kj-alert-title>{{ title() }}</kj-alert-title>
-      <kj-alert-description>{{ description() }}</kj-alert-description>
-      @if (withActions()) {
-        <kj-button kjVariant="outline" kjSize="sm">Retry</kj-button>
-      }
-      @if (dismissible()) {
-        <kj-alert-dismiss />
-      }
-    </kj-alert>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjAlertPlaygroundDemo {
-  protected readonly variant = variant;
-  protected readonly size = size;
-  protected readonly banner = banner;
-  protected readonly dismissible = dismissible;
-  protected readonly withActions = withActions;
-  protected readonly title = title;
-  protected readonly description = description;
-}
-
-export const PLAYGROUND: PlaygroundFile = {
-  component: KjAlertPlaygroundDemo,
-  state: {
-    variant: variant as unknown as ReturnType<typeof signal>,
-    size: size as unknown as ReturnType<typeof signal>,
-    banner: banner as unknown as ReturnType<typeof signal>,
-    dismissible: dismissible as unknown as ReturnType<typeof signal>,
-    withActions: withActions as unknown as ReturnType<typeof signal>,
-    title: title as unknown as ReturnType<typeof signal>,
-    description: description as unknown as ReturnType<typeof signal>,
-  },
-  controls: [
-    {
-      kind: 'chips',
-      name: 'variant',
-      label: 'variant',
-      options: ['info', 'success', 'warning', 'error'],
-    },
-    { kind: 'chips', name: 'size', label: 'size', options: ['sm', 'md', 'lg'] },
-    { kind: 'text', name: 'title', label: 'title' },
-    { kind: 'text', name: 'description', label: 'description' },
-    { kind: 'toggle', name: 'banner', label: 'banner mode' },
-    { kind: 'toggle', name: 'dismissible', label: 'dismissible' },
-    { kind: 'toggle', name: 'withActions', label: 'with action' },
-  ],
-  snippet: (values) => {
-    const s = values as {
-      variant: string;
-      size: string;
-      banner: boolean;
-      dismissible: boolean;
-      withActions: boolean;
-      title: string;
-      description: string;
-    };
-    const attrs: string[] = [`kjVariant="${s.variant}"`, `kjSize="${s.size}"`];
-    if (s.banner) attrs.push('[kjAlertStatic]="true"');
-    const slots: string[] = [
-      `  <kj-alert-icon>i</kj-alert-icon>`,
-      `  <kj-alert-title>${s.title}</kj-alert-title>`,
-      `  <kj-alert-description>${s.description}</kj-alert-description>`,
-    ];
-    if (s.withActions) slots.push(`  <kj-button kjVariant="outline" kjSize="sm">Retry</kj-button>`);
-    if (s.dismissible) slots.push(`  <kj-alert-dismiss />`);
-    return `<kj-alert\n  ${attrs.join('\n  ')}\n>\n${slots.join('\n')}\n</kj-alert>`;
-  },
-};

package/src/alert/alert.spec.ts

@@ -1,167 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { describe, expect, test, beforeEach } from 'vitest';
-import {
-  KjAlertActionsComponent,
-  KjAlertComponent,
-  KjAlertDescriptionComponent,
-  KjAlertDismissComponent,
-  KjAlertIconComponent,
-  KjAlertTitleComponent,
-} from './alert';
-
-@Component({
-  standalone: true,
-  imports: [
-    KjAlertComponent,
-    KjAlertIconComponent,
-    KjAlertTitleComponent,
-    KjAlertDescriptionComponent,
-    KjAlertActionsComponent,
-    KjAlertDismissComponent,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    @if (visible()) {
-      <kj-alert
-        [kjVariant]="variant"
-        [kjSize]="size"
-        [kjAlertStatic]="staticBanner"
-        [kjAlertMode]="mode"
-        (kjAlertDismissed)="onDismissed()"
-      >
-        <kj-alert-icon />
-        <kj-alert-title>Title</kj-alert-title>
-        <kj-alert-description>Body</kj-alert-description>
-        <kj-alert-actions>
-          <button>Retry</button>
-        </kj-alert-actions>
-        <kj-alert-dismiss />
-      </kj-alert>
-    }
-  `,
-})
-class HostComponent {
-  variant = 'info';
-  size = 'md';
-  staticBanner = false;
-  mode: 'assertive' | 'polite' | 'static' | 'off' | undefined = undefined;
-  visible = signal(true);
-  fired = 0;
-  onDismissed(): void {
-    this.fired++;
-    this.visible.set(false);
-  }
-}
-
-describe('KjAlertComponent', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({ imports: [HostComponent] });
-  });
-
-  test('renders kj-alert host with role="status" by default', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    const root = fixture.nativeElement.querySelector('kj-alert')!;
-    expect(root.getAttribute('role')).toBe('status');
-    expect(root.getAttribute('aria-live')).toBe('polite');
-  });
-
-  test('forwards kjVariant via host directive (data-variant)', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.componentInstance.variant = 'warning';
-    fixture.detectChanges();
-    const root = fixture.nativeElement.querySelector('kj-alert')!;
-    expect(root.getAttribute('data-variant')).toBe('warning');
-  });
-
-  test('forwards kjSize via host directive (data-size)', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.componentInstance.size = 'lg';
-    fixture.detectChanges();
-    const root = fixture.nativeElement.querySelector('kj-alert')!;
-    expect(root.getAttribute('data-size')).toBe('lg');
-  });
-
-  test('error variant resolves to assertive (role="alert")', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.componentInstance.variant = 'error';
-    fixture.detectChanges();
-    const root = fixture.nativeElement.querySelector('kj-alert')!;
-    expect(root.getAttribute('role')).toBe('alert');
-    expect(root.getAttribute('aria-live')).toBe('assertive');
-  });
-
-  test('kjAlertStatic switches to role="region" with no aria-live', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.componentInstance.staticBanner = true;
-    fixture.detectChanges();
-    const root = fixture.nativeElement.querySelector('kj-alert')!;
-    expect(root.getAttribute('role')).toBe('region');
-    expect(root.getAttribute('aria-live')).toBeNull();
-  });
-
-  test('explicit kjAlertMode wins over the matrix', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.componentInstance.variant = 'error';
-    fixture.componentInstance.mode = 'polite';
-    fixture.detectChanges();
-    const root = fixture.nativeElement.querySelector('kj-alert')!;
-    expect(root.getAttribute('role')).toBe('status');
-    expect(root.getAttribute('aria-live')).toBe('polite');
-  });
-
-  test('renders icon, title, description, actions, dismiss slots', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    expect(fixture.nativeElement.querySelector('kj-alert-icon')).not.toBeNull();
-    expect(fixture.nativeElement.querySelector('kj-alert-title')).not.toBeNull();
-    expect(fixture.nativeElement.querySelector('kj-alert-description')).not.toBeNull();
-    expect(fixture.nativeElement.querySelector('kj-alert-actions')).not.toBeNull();
-    expect(fixture.nativeElement.querySelector('button.kj-alert__dismiss')).not.toBeNull();
-  });
-
-  test('alert root wires aria-labelledby to the title id', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    const root = fixture.nativeElement.querySelector('kj-alert')!;
-    const title = fixture.nativeElement.querySelector('kj-alert-title')!;
-    expect(title.getAttribute('id')).toMatch(/-title$/);
-    expect(root.getAttribute('aria-labelledby')).toBe(title.getAttribute('id'));
-  });
-
-  test('actions container exposes role="group"', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    const actions = fixture.nativeElement.querySelector('kj-alert-actions');
-    expect(actions.getAttribute('role')).toBe('group');
-    expect(actions.getAttribute('aria-label')).toBe('Alert actions');
-  });
-
-  test('clicking the dismiss button fires kjAlertDismissed and consumer unmounts', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    const dismissBtn = fixture.nativeElement.querySelector('button.kj-alert__dismiss');
-    expect(dismissBtn).not.toBeNull();
-    dismissBtn.click();
-    fixture.detectChanges();
-    expect(fixture.componentInstance.fired).toBe(1);
-    expect(fixture.nativeElement.querySelector('kj-alert')).toBeNull();
-  });
-
-  test('dismiss button has aria-label="Dismiss"', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    const dismissBtn = fixture.nativeElement.querySelector('button.kj-alert__dismiss');
-    expect(dismissBtn.getAttribute('aria-label')).toBe('Dismiss');
-  });
-
-  test('icon picks up aria-hidden="true" and data-variant from context', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.componentInstance.variant = 'success';
-    fixture.detectChanges();
-    const icon = fixture.nativeElement.querySelector('kj-alert-icon')!;
-    expect(icon.getAttribute('aria-hidden')).toBe('true');
-    expect(icon.getAttribute('data-variant')).toBe('success');
-  });
-});

package/src/alert/alert.ts

@@ -1,250 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ViewEncapsulation,
-  booleanAttribute,
-  input,
-} from '@angular/core';
-import {
-  KjAlert,
-  KjAlertActions,
-  KjAlertDescription,
-  KjAlertDismiss,
-  KjAlertIcon,
-  KjAlertTitle,
-  KjIconDirective,
-} from '@kouji-ui/core';
-import type { KjAlertMode } from '@kouji-ui/core';
-
-/**
- * Styled wrapper around the `KjAlert` directive family. Provides the
- * persistent in-flow notification surface (severity-aware chrome, severity
- * border accent, banner mode, dismiss button). Visibility is consumer-managed
- * — bind a signal via `@if` and clear it from `(kjAlertDismissed)`.
- *
- * Re-exposes `KjAlert`'s contract directly (variant, size, mode, static, role)
- * with no new wrapper-layer inputs. Severity defaults: `error` → assertive,
- * others → polite, `kjAlertStatic` → static region.
- *
- * @example
- * ```html
- * <kj-alert kjVariant="error" (kjAlertDismissed)="show.set(false)">
- *   <kj-alert-icon />
- *   <kj-alert-title>Could not save draft</kj-alert-title>
- *   <kj-alert-description>Network request timed out — retry?</kj-alert-description>
- *   <kj-alert-actions>
- *     <kj-button (click)="retry()">Retry</kj-button>
- *   </kj-alert-actions>
- *   <kj-alert-dismiss />
- * </kj-alert>
- * ```
- * @doc-example Default
- *   The default playground — `info` severity with icon, title, and description.
- *   @doc-file alert.example.ts
- * @doc-example Usage
- *   A walkthrough of the common shapes — severity variants, dismissible flow,
- *   and an action button row. Use this as the copy-paste starting point.
- *   @doc-file alert.usage.example.ts
- * @doc-example Variants
- *   Info / success / warning / error — severity drives the stripe and icon tint.
- *   @doc-file alert.variants.example.ts
- * @doc-example Dismissible
- *   Project `<kj-alert-dismiss>` and listen to `(kjAlertDismissed)` to clear.
- *   @doc-file alert.dismissible.example.ts
- * @doc-example With actions
- *   Drop `<kj-button>`s inside `<kj-alert-actions>` for retry / view-details flows.
- *   @doc-file alert.with-actions.example.ts
- * @doc-example Static banner
- *   `kjAlertStatic` removes the live region — use for page-persistent notices.
- *   @doc-file alert.banner.example.ts
- *
- * @doc-keyboard
- *   Tab           — Moves focus through interactive children (actions, dismiss)
- *   Enter|Space   — Activates the focused dismiss button or action
- *
- * @doc-aria
- *   role            — `alert` for error severity (assertive), `status` otherwise (polite); `kjAlertStatic` switches to `region`
- *   aria-live       — `assertive` for error, `polite` for info/success/warning
- *   aria-labelledby — Wired to the title id when `<kj-alert-title>` is projected
- *   aria-describedby — Wired to the description id when `<kj-alert-description>` is projected
- *   data-variant    — Mirrors the severity for theme/scope hooks
- *
- * @doc-touch
- *   The dismiss button defaults to `size="icon"` (44×44) so it meets WCAG 2.5.5
- *   out of the box. Action buttons inherit `<kj-button>` size rules.
- *
- * @doc-a11y
- *   Severity drives the live region politeness so screen readers announce
- *   errors immediately but don't interrupt for routine info. Dismiss is a
- *   real `<button>` with `aria-label="Dismiss"`; consumers can swap the
- *   label via `kjAlertDismissLabel`. Decorative icons are `aria-hidden="true"`.
- *
- * @doc-related toast,dialog,banner
- *
- * @doc-css-var
- *   --kj-alert-bg            — Background fill. Defaults to --kj-bg-body.
- *   --kj-alert-fg            — Foreground (body text) color. Defaults to --kj-fg-default.
- *   --kj-alert-border-color  — Outer border color. Defaults to --kj-border-default.
- *   --kj-alert-accent        — Severity stripe + icon + title color. Variants set this per severity.
- *   --kj-alert-radius        — Corner radius. Inherits --kj-radius-box.
- *   --kj-alert-padding-x     — Horizontal padding. Sizes override.
- *   --kj-alert-padding-y     — Vertical padding. Sizes override.
- *   --kj-alert-gap           — Gap between icon, body, and actions.
- *   --kj-alert-font-size     — Body font size. Sizes override.
- *
- * @doc-category Library/Feedback
- * @doc
- * @doc-name alert
- * @doc-description Themed in-flow notification with severity variants, optional dismiss button, and action slots.
- * @doc-is-main
- */
-@Component({
-  selector: 'kj-alert',
-  standalone: true,
-  hostDirectives: [
-    {
-      directive: KjAlert,
-      inputs: [
-        'kjVariant',
-        'kjSize',
-        'kjAlertMode',
-        'kjAlertStatic',
-        'kjAlertRole',
-      ],
-      outputs: ['kjAlertDismissed'],
-    },
-  ],
-  template: `
-    <ng-content select="[kjAlertIcon],kj-alert-icon" />
-    <div class="kj-alert__body">
-      <ng-content select="[kjAlertTitle],kj-alert-title" />
-      <ng-content select="[kjAlertDescription],kj-alert-description" />
-      <ng-content />
-    </div>
-    <ng-content select="[kjAlertActions],kj-alert-actions" />
-    <ng-content select="[kjAlertDismiss],kj-alert-dismiss" />
-  `,
-  styleUrl: './alert.css',
-  encapsulation: ViewEncapsulation.None,
-  host: { class: 'kj-alert' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjAlertComponent {
-  // Inputs are forwarded via `hostDirectives.inputs` above. Re-declared here
-  // only to surface them in the docs extractor (which inspects the wrapper
-  // class). The actual signal lives on the composed directive.
-  readonly kjVariant = input<string>('info');
-  readonly kjSize = input<string>('md');
-  readonly kjAlertMode = input<KjAlertMode | undefined>(undefined);
-  readonly kjAlertStatic = input(false, { transform: booleanAttribute });
-  readonly kjAlertRole = input<string | undefined>(undefined);
-}
-
-/**
- * Decorative icon slot inside `<kj-alert>`. Wraps `KjAlertIcon` so it picks
- * up `aria-hidden="true"` and `data-variant` from the parent alert context.
- *
- * @doc-category Library/Feedback
- * @doc
- * @doc-name alert
- */
-@Component({
-  selector: 'kj-alert-icon',
-  standalone: true,
-  hostDirectives: [KjAlertIcon],
-  template: `<ng-content />`,
-  encapsulation: ViewEncapsulation.None,
-  host: { class: 'kj-alert__icon' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjAlertIconComponent {}
-
-/**
- * Title for the alert. Apply to a heading element (or rely on the wrapper —
- * the wrapper defaults to a `<strong>`-styled element via CSS, but consumers
- * SHOULD use `<h3 kjAlertTitle>` when the alert lives in a content region).
- *
- * @doc-category Library/Feedback
- * @doc
- * @doc-name alert
- */
-@Component({
-  selector: 'kj-alert-title',
-  standalone: true,
-  hostDirectives: [KjAlertTitle],
-  template: `<ng-content />`,
-  encapsulation: ViewEncapsulation.None,
-  host: { class: 'kj-alert__title' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjAlertTitleComponent {}
-
-/**
- * Description body for the alert. Wires `aria-describedby` via `KjAlertDescription`.
- *
- * @doc-category Library/Feedback
- * @doc
- * @doc-name alert
- */
-@Component({
-  selector: 'kj-alert-description',
-  standalone: true,
-  hostDirectives: [KjAlertDescription],
-  template: `<ng-content />`,
-  encapsulation: ViewEncapsulation.None,
-  host: { class: 'kj-alert__description' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjAlertDescriptionComponent {}
-
-/**
- * Container for action buttons (Retry, View details, …). Sets `role="group"`
- * with an overridable `aria-label`. Compose `<kj-button>` instances inside.
- *
- * @doc-category Library/Feedback
- * @doc
- * @doc-name alert
- */
-@Component({
-  selector: 'kj-alert-actions',
-  standalone: true,
-  hostDirectives: [{ directive: KjAlertActions, inputs: ['kjAlertActionsLabel'] }],
-  template: `<ng-content />`,
-  encapsulation: ViewEncapsulation.None,
-  host: { class: 'kj-alert__actions' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjAlertActionsComponent {
-  readonly kjAlertActionsLabel = input<string>('Alert actions');
-}
-
-/**
- * Dismiss button. Renders a real `<button kjAlertDismiss>` so the directive
- * picks up the full `KjButton` chrome (focus ring, ARIA-disabled). Default
- * content is `×`; override via projected content. Place inside `<kj-alert>`.
- *
- * @doc-category Library/Feedback
- * @doc
- * @doc-name alert
- */
-@Component({
-  selector: 'kj-alert-dismiss',
-  standalone: true,
-  imports: [KjAlertDismiss, KjIconDirective],
-  template: `<button
-    type="button"
-    kjAlertDismiss
-    class="kj-alert__dismiss"
-    [kjAlertDismissLabel]="kjAlertDismissLabel()"
-    [kjAlertDismissVariant]="kjAlertDismissVariant()"
-    [kjAlertDismissSize]="kjAlertDismissSize()"
-  ><ng-content><i kjIcon="x"></i></ng-content></button>`,
-  encapsulation: ViewEncapsulation.None,
-  host: { style: 'display: contents;' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjAlertDismissComponent {
-  readonly kjAlertDismissLabel = input<string>('Dismiss');
-  readonly kjAlertDismissVariant = input<string>('ghost');
-  readonly kjAlertDismissSize = input<string>('icon');
-}