@kouji-ui/core 0.0.4 → 0.1.1

package/src/pagination/pagination.ts

@@ -0,0 +1,288 @@
+import {
+  Directive,
+  ElementRef,
+  Signal,
+  WritableSignal,
+  afterNextRender,
+  computed,
+  effect,
+  inject,
+  input,
+  isDevMode,
+  linkedSignal,
+  output,
+  untracked,
+} from '@angular/core';
+import { bindPresets } from '../presets';
+import { KJ_PAGINATION_CONFIG } from './config';
+import {
+  KJ_PAGINATION,
+  KjPageToken,
+  KjPaginationContext,
+} from './pagination.context';
+import { computePageTokens } from './page-tokens';
+
+/**
+ * Root of the Pagination directive family. Owns the page-state model
+ * (`kjPage`, `kjTotalPages`), the sliding-window algorithm
+ * (`kjSiblingCount`, `kjBoundaryCount`), the `pages` computed, the
+ * boundary-state computeds (`isFirstPage`, `isLastPage`), and a polite
+ * live-region announcement on every page change. Provides
+ * {@link KJ_PAGINATION} to descendants for ARIA wiring and selection
+ * coordination.
+ *
+ * Applied to a `<nav>` element. Hosts `aria-label="Pagination"` (the
+ * navigation landmark's accessible name; configurable via
+ * `KJ_PAGINATION_CONFIG.navigationLabel`).
+ *
+ * Page numbers are **1-indexed** and `kjPage` is clamped to
+ * `[1, kjTotalPages()]` on every write. Out-of-range writes warn in dev
+ * mode and silently clamp.
+ *
+ * @example
+ * ```html
+ * <nav kjPagination [(kjPage)]="page" [kjTotalPages]="10">
+ *   <button kjButton kjPaginationPrevious>Previous</button>
+ *   @for (token of pagination.pages(); track token) {
+ *     @if (token === 'ellipsis-left' || token === 'ellipsis-right') {
+ *       <span kjPaginationEllipsis>…</span>
+ *     } @else {
+ *       <button kjButton kjPaginationItem [kjPage]="token">{{ token }}</button>
+ *     }
+ *   }
+ *   <button kjButton kjPaginationNext>Next</button>
+ * </nav>
+ * ```
+ *
+ * @doc-category Core/Navigation
+ * @doc
+ * @doc-name pagination
+ * @doc-description Unstyled pagination root that exposes the page model and announces page changes politely.
+ * @doc-is-main
+ */
+@Directive({
+  selector: '[kjPagination]',
+  standalone: true,
+  exportAs: 'kjPagination',
+  providers: [
+    { provide: KJ_PAGINATION, useExisting: KjPagination },
+    ...bindPresets(KJ_PAGINATION_CONFIG),
+  ],
+  host: {
+    '[attr.aria-label]': 'config.navigationLabel',
+    '[attr.data-page]': 'page()',
+    '[attr.data-total-pages]': 'totalPages()',
+  },
+})
+export class KjPagination implements KjPaginationContext {
+  /** @internal */
+  readonly config = inject(KJ_PAGINATION_CONFIG);
+  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef);
+
+  /**
+   * Current page (1-indexed). Two-way bound — the canonical surface is
+   * `[(kjPage)]`. Out-of-range writes are clamped to `[1, kjTotalPages()]`
+   * with a dev-mode console warning.
+   */
+  // eslint-disable-next-line @angular-eslint/no-input-rename -- alias keeps the public `kjPage` name distinct from this internal linkedSignal-backed property
+  readonly kjPageInput = input<number>(1, { alias: 'kjPage' });
+  readonly kjPage: WritableSignal<number> = linkedSignal(this.kjPageInput);
+
+  /** Total number of pages. May be `0` (empty dataset). */
+  readonly kjTotalPages = input.required<number>();
+
+  /**
+   * Pages adjacent to the current page on each side. Default `1`, so the
+   * window includes `[current-1, current, current+1]`. `0` collapses the
+   * window to `[current]`.
+   */
+  readonly kjSiblingCount = input<number>(this.config.defaults.siblingCount);
+
+  /**
+   * Pages anchored at the start and end. Default `1`, so `[1]` and
+   * `[totalPages]` are always visible. `0` removes the boundary anchors.
+   */
+  readonly kjBoundaryCount = input<number>(this.config.defaults.boundaryCount);
+
+  /**
+   * Cascaded variant for child items / boundary controls that did not set
+   * their own. Forwarded to each child's `KjVariant` host directive via
+   * the `KJ_PAGINATION` context.
+   */
+  readonly kjVariant = input<string>(this.config.defaults.variant);
+
+  /** Cascaded size for child items / boundary controls. */
+  readonly kjSize = input<string>(this.config.defaults.size);
+
+  /**
+   * Page-change output. Mirrors `kjPage` writes; emitted whenever the
+   * model value settles after a clamp / boundary navigation / item click.
+   */
+  readonly kjPageChange = output<number>();
+
+  /** Read-only view of the current page. */
+  readonly page: Signal<number> = computed(() => this.kjPage());
+
+  /** Read-only view of the total page count. */
+  readonly totalPages: Signal<number> = computed(() => this.kjTotalPages());
+
+  /** Cascaded variant exposed via context for children. */
+  readonly variant: Signal<string> = computed(() => this.kjVariant());
+
+  /** Cascaded size exposed via context for children. */
+  readonly size: Signal<string> = computed(() => this.kjSize());
+
+  /** Output of the windowed page-token algorithm. */
+  readonly pages: Signal<readonly KjPageToken[]> = computed(() =>
+    computePageTokens(
+      this.kjPage(),
+      this.kjTotalPages(),
+      this.kjSiblingCount(),
+      this.kjBoundaryCount(),
+    ),
+  );
+
+  /** True on page 1, or whenever the dataset is empty. */
+  readonly isFirstPage: Signal<boolean> = computed(
+    () => this.kjTotalPages() <= 0 || this.kjPage() <= 1,
+  );
+
+  /** True on the last page, or whenever the dataset is empty. */
+  readonly isLastPage: Signal<boolean> = computed(
+    () => this.kjTotalPages() <= 0 || this.kjPage() >= this.kjTotalPages(),
+  );
+
+  /** The visually-hidden live-region span injected at construction. */
+  private liveRegion: HTMLSpanElement | null = null;
+
+  constructor() {
+    // Clamp out-of-range writes. The model can settle on a clamped value
+    // in a single re-run — the effect is idempotent because clamping a
+    // value that is already in-range is a no-op write that signals reject.
+    effect(() => {
+      const total = this.kjTotalPages();
+      const v = this.kjPage();
+      if (total <= 0) {
+        // Empty dataset: lock to 1 so consumer state is well-defined; do
+        // not emit page-change for the lock-in itself.
+        if (v !== 1) untracked(() => this.kjPage.set(1));
+        return;
+      }
+      if (v < 1) {
+        if (isDevMode()) {
+          console.warn(
+            `[kj] kjPage=${v} is out of range; clamping to 1.`,
+          );
+        }
+        untracked(() => this.kjPage.set(1));
+      } else if (v > total) {
+        if (isDevMode()) {
+          console.warn(
+            `[kj] kjPage=${v} exceeds kjTotalPages=${total}; clamping to ${total}.`,
+          );
+        }
+        untracked(() => this.kjPage.set(total));
+      }
+    });
+
+    // Emit kjPageChange on every settled page write. The output mirrors
+    // the model so consumers using the explicit `(kjPageChange)` shape get
+    // the same value regardless of whether the change came from a click,
+    // a programmatic write, or the clamp.
+    let lastEmitted: number | null = null;
+    effect(() => {
+      const v = this.kjPage();
+      const total = this.kjTotalPages();
+      // Skip emit while the value is mid-clamp — re-run will catch the
+      // settled value on the next tick.
+      if (total > 0 && (v < 1 || v > total)) return;
+      if (v !== lastEmitted) {
+        lastEmitted = v;
+        this.kjPageChange.emit(v);
+      }
+    });
+
+    // Inject the live region once the host has rendered. Polite by
+    // default; the live region survives focus changes so AT users hear
+    // "Page 5 of 10" even if the click moved focus elsewhere.
+    afterNextRender(() => {
+      if (typeof document === 'undefined') return;
+      const span = document.createElement('span');
+      span.setAttribute('aria-live', this.config.pageChangeAnnouncementPoliteness);
+      span.setAttribute('aria-atomic', 'true');
+      span.setAttribute('data-kj-pagination-live', '');
+      span.setAttribute(
+        'style',
+        'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0',
+      );
+      this.el.nativeElement.appendChild(span);
+      this.liveRegion = span;
+    });
+
+    // Live-region announcement effect lives in injection context. The
+    // first reactive run primes `lastAnnounced` so the initial render
+    // does not produce a spurious announcement; subsequent changes
+    // re-emit the configured template into the visually-hidden region.
+    let lastAnnounced: number | null = null;
+    effect(() => {
+      const page = this.kjPage();
+      const total = this.kjTotalPages();
+      if (total > 0 && (page < 1 || page > total)) return;
+      if (lastAnnounced === null) {
+        lastAnnounced = page;
+        return;
+      }
+      if (lastAnnounced === page) return;
+      lastAnnounced = page;
+      if (!this.liveRegion) return;
+      // Brief clear-then-set so AT consistently picks up the change
+      // even when the same string is announced repeatedly (e.g. on a
+      // single-page dataset where every "click" yields "Page 1 of 1").
+      const region = this.liveRegion;
+      const message = this.config.pageChangeAnnouncement(page, total);
+      region.textContent = '';
+      // queueMicrotask makes the clear paint before the set; AT pickup
+      // is more reliable than two synchronous writes back-to-back.
+      queueMicrotask(() => {
+        // Guard against the directive being torn down between writes.
+        if (this.liveRegion === region) region.textContent = message;
+      });
+    });
+  }
+
+  /** Jump to a specific page. Clamped to `[1, totalPages]`. */
+  goToPage(page: number): void {
+    const total = this.kjTotalPages();
+    if (total <= 0) return;
+    const clamped = Math.min(Math.max(1, page), total);
+    if (this.kjPage() !== clamped) this.kjPage.set(clamped);
+  }
+
+  /** Jump to page 1. */
+  goToFirst(): void {
+    if (this.kjTotalPages() <= 0) return;
+    if (this.kjPage() !== 1) this.kjPage.set(1);
+  }
+
+  /** Jump to the last page. */
+  goToLast(): void {
+    const total = this.kjTotalPages();
+    if (total <= 0) return;
+    if (this.kjPage() !== total) this.kjPage.set(total);
+  }
+
+  /** Advance one page. No-op on the last page. */
+  goToNext(): void {
+    const total = this.kjTotalPages();
+    if (total <= 0) return;
+    const next = this.kjPage() + 1;
+    if (next <= total) this.kjPage.set(next);
+  }
+
+  /** Retreat one page. No-op on page 1. */
+  goToPrevious(): void {
+    if (this.kjTotalPages() <= 0) return;
+    const prev = this.kjPage() - 1;
+    if (prev >= 1) this.kjPage.set(prev);
+  }
+}

package/src/password-input/index.ts

@@ -0,0 +1,15 @@
+export {
+  KjPasswordInput,
+  KjPasswordInputScope,
+  KjPasswordToggle,
+  KjPasswordStrength,
+  KjPasswordCapsLockWarning,
+} from './password-input';
+export {
+  KJ_PASSWORD_INPUT,
+  type KjPasswordAutocomplete,
+  type KjPasswordInputContext,
+  type KjPasswordScore,
+  type KjPasswordScoreLabel,
+} from './password-input.context';
+export { defaultPasswordScorer } from './password-input.scorer';

package/src/password-input/password-input.context.ts

@@ -0,0 +1,65 @@
+import { InjectionToken, Signal } from '@angular/core';
+
+/** Numeric strength score, matching the de-facto `zxcvbn` 0..4 scale. */
+export type KjPasswordScore = 0 | 1 | 2 | 3 | 4;
+
+/** Human-readable strength label mapped from {@link KjPasswordScore}. */
+export type KjPasswordScoreLabel =
+  | 'too weak'
+  | 'weak'
+  | 'fair'
+  | 'good'
+  | 'strong';
+
+/**
+ * Allowed values for the `autocomplete` attribute on a password field.
+ *
+ * Restricted union — invalid strings are rejected at type-check time. This
+ * catches the common mis-spelling `autocomplete="password"` (which browsers
+ * silently ignore).
+ */
+export type KjPasswordAutocomplete =
+  | 'current-password'
+  | 'new-password'
+  | 'off';
+
+/**
+ * Shared state surfaced by `KjPasswordInput` for its sibling directives
+ * (`KjPasswordToggle`, `KjPasswordStrength`, `KjPasswordCapsLockWarning`) to
+ * read.
+ *
+ * The root directive owns all derivations: the raw `revealed` / `capsLock`
+ * signals, the `score` (computed lazily — only when at least one
+ * `KjPasswordStrength` has registered), and the human-readable `scoreLabel`.
+ */
+export interface KjPasswordInputContext {
+  /** Host `<input>` id, generated when the consumer didn't provide one. */
+  readonly inputId: Signal<string>;
+  /** Whether the password is currently rendered as plain text. */
+  readonly revealed: Signal<boolean>;
+  /** Whether Caps Lock was detected as on during the last keydown. */
+  readonly capsLock: Signal<boolean>;
+  /** Strength score in `0..4`. */
+  readonly score: Signal<KjPasswordScore>;
+  /** Human-readable strength label (i18n via `kjStrengthLabels`). */
+  readonly scoreLabel: Signal<string>;
+  /** Whether the host `<input>` is disabled (mirrors `KjInput`'s state). */
+  readonly disabled: Signal<boolean>;
+  /** Toggles `revealed`. No-op when disabled. */
+  toggle(): void;
+  /**
+   * Registers a `KjPasswordStrength` so the root knows to run the scorer.
+   * Returns a deregister function consumed via `DestroyRef`.
+   */
+  registerStrength(): () => void;
+  /**
+   * Registers a `KjPasswordCapsLockWarning` so the root can wire the
+   * warning's id into `aria-describedby`. Returns a deregister function.
+   */
+  registerCapsLockWarning(): () => void;
+}
+
+/** Injection token for {@link KjPasswordInputContext}. */
+export const KJ_PASSWORD_INPUT = new InjectionToken<KjPasswordInputContext>(
+  'KjPasswordInput',
+);

package/src/password-input/password-input.scorer.ts

@@ -0,0 +1,34 @@
+import { KjPasswordScore } from './password-input.context';
+
+/**
+ * Default password strength scorer.
+ *
+ * A small length + character-class heuristic — intentionally not a security
+ * grade rating. Consumers wanting `zxcvbn`-equivalent scoring should provide
+ * their own scorer via `[kjStrengthScorer]`.
+ *
+ * Scoring rules:
+ * - empty / `< 4` chars  → 0 (too weak)
+ * - `< 8`   chars        → 1 (weak)
+ * - `>= 8`  chars + ≥2 character classes → 2 (fair)
+ * - `>= 10` chars + ≥3 character classes → 3 (good)
+ * - `>= 12` chars + 4 character classes  → 4 (strong)
+ *
+ * Character classes: lowercase, uppercase, digit, symbol.
+ */
+export function defaultPasswordScorer(value: string): KjPasswordScore {
+  if (!value) return 0;
+  const len = value.length;
+  if (len < 4) return 0;
+
+  let classes = 0;
+  if (/[a-z]/.test(value)) classes++;
+  if (/[A-Z]/.test(value)) classes++;
+  if (/[0-9]/.test(value)) classes++;
+  if (/[^a-zA-Z0-9]/.test(value)) classes++;
+
+  if (len >= 12 && classes === 4) return 4;
+  if (len >= 10 && classes >= 3) return 3;
+  if (len >= 8 && classes >= 2) return 2;
+  return 1;
+}

package/src/password-input/password-input.spec.ts

@@ -0,0 +1,274 @@
+import { Component } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { render } from '@testing-library/angular';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { describe, expect, it } from 'vitest';
+
+import { KjButton } from '../button/button';
+import {
+  KjPasswordCapsLockWarning,
+  KjPasswordInput,
+  KjPasswordInputScope,
+  KjPasswordStrength,
+  KjPasswordToggle,
+} from './password-input';
+import { defaultPasswordScorer } from './password-input.scorer';
+
+expect.extend(toHaveNoViolations);
+
+const ALL_DIRECTIVES = [
+  KjPasswordInput,
+  KjPasswordInputScope,
+  KjPasswordToggle,
+  KjPasswordStrength,
+  KjPasswordCapsLockWarning,
+  KjButton,
+];
+
+describe('KjPasswordInput', () => {
+  it('renders an input with type="password" by default', async () => {
+    const { container } = await render(`<input kjPasswordInput />`, {
+      imports: [KjPasswordInput],
+    });
+    const input = container.querySelector('input')!;
+    expect(input.getAttribute('type')).toBe('password');
+  });
+
+  it('defaults autocomplete to "current-password"', async () => {
+    const { container } = await render(`<input kjPasswordInput />`, {
+      imports: [KjPasswordInput],
+    });
+    expect(container.querySelector('input')!.getAttribute('autocomplete')).toBe(
+      'current-password',
+    );
+  });
+
+  it('forwards kjAutocomplete="new-password"', async () => {
+    const { container } = await render(
+      `<input kjPasswordInput kjAutocomplete="new-password" />`,
+      { imports: [KjPasswordInput] },
+    );
+    expect(container.querySelector('input')!.getAttribute('autocomplete')).toBe(
+      'new-password',
+    );
+  });
+
+  it('forwards kjMaxLength to native maxlength', async () => {
+    const { container } = await render(
+      `<input kjPasswordInput [kjMaxLength]="32" />`,
+      { imports: [KjPasswordInput] },
+    );
+    expect(container.querySelector('input')!.getAttribute('maxlength')).toBe(
+      '32',
+    );
+  });
+
+  it('auto-generates an id when none was supplied', async () => {
+    const { container } = await render(`<input kjPasswordInput />`, {
+      imports: [KjPasswordInput],
+    });
+    expect(container.querySelector('input')!.getAttribute('id')).toMatch(
+      /^kj-password-/,
+    );
+  });
+
+  it('keeps the consumer-provided id when present', async () => {
+    const { container } = await render(
+      `<input id="my-pw" kjPasswordInput />`,
+      { imports: [KjPasswordInput] },
+    );
+    expect(container.querySelector('input')!.getAttribute('id')).toBe('my-pw');
+  });
+
+  it('flips type to "text" when kjRevealed is true', async () => {
+    const { container } = await render(
+      `<input kjPasswordInput [kjRevealed]="true" />`,
+      { imports: [KjPasswordInput] },
+    );
+    expect(container.querySelector('input')!.getAttribute('type')).toBe('text');
+  });
+
+  it('toggle button flips reveal state on click', async () => {
+    const { container } = await render(
+      `<div kjPasswordInputScope>
+         <input kjPasswordInput />
+         <button kjButton kjPasswordToggle>eye</button>
+       </div>`,
+      { imports: ALL_DIRECTIVES },
+    );
+    const input = container.querySelector('input')!;
+    const button = container.querySelector('button')!;
+    expect(input.getAttribute('type')).toBe('password');
+    button.click();
+    await new Promise(r => setTimeout(r, 0));
+    expect(input.getAttribute('type')).toBe('text');
+    button.click();
+    await new Promise(r => setTimeout(r, 0));
+    expect(input.getAttribute('type')).toBe('password');
+  });
+
+  it('toggle wires aria-controls to the input id', async () => {
+    const { container } = await render(
+      `<div kjPasswordInputScope>
+         <input id="pw1" kjPasswordInput />
+         <button kjButton kjPasswordToggle>eye</button>
+       </div>`,
+      { imports: ALL_DIRECTIVES },
+    );
+    expect(container.querySelector('button')!.getAttribute('aria-controls')).toBe(
+      'pw1',
+    );
+  });
+
+  it('toggle aria-label switches with state', async () => {
+    const { container } = await render(
+      `<div kjPasswordInputScope>
+         <input kjPasswordInput />
+         <button kjButton kjPasswordToggle>eye</button>
+       </div>`,
+      { imports: ALL_DIRECTIVES },
+    );
+    const button = container.querySelector('button')!;
+    expect(button.getAttribute('aria-label')).toBe('Show password');
+    button.click();
+    await new Promise(r => setTimeout(r, 0));
+    expect(button.getAttribute('aria-label')).toBe('Hide password');
+  });
+
+  it('toggle reflects aria-pressed', async () => {
+    const { container } = await render(
+      `<div kjPasswordInputScope>
+         <input kjPasswordInput />
+         <button kjButton kjPasswordToggle>eye</button>
+       </div>`,
+      { imports: ALL_DIRECTIVES },
+    );
+    const button = container.querySelector('button')!;
+    expect(button.getAttribute('aria-pressed')).toBe('false');
+    button.click();
+    await new Promise(r => setTimeout(r, 0));
+    expect(button.getAttribute('aria-pressed')).toBe('true');
+  });
+
+  it('strength meter exposes role=progressbar with the score in 0..4', async () => {
+    const ctrl = new FormControl('');
+    const { container } = await render(
+      `<div kjPasswordInputScope>
+         <input kjPasswordInput [formControl]="ctrl" />
+         <div kjPasswordStrength></div>
+       </div>`,
+      {
+        imports: [...ALL_DIRECTIVES, ReactiveFormsModule],
+        componentProperties: { ctrl },
+      },
+    );
+    const meter = container.querySelector('[kjPasswordStrength]')!;
+    expect(meter.getAttribute('role')).toBe('progressbar');
+    expect(meter.getAttribute('aria-valuemin')).toBe('0');
+    expect(meter.getAttribute('aria-valuemax')).toBe('4');
+    // empty value → 0
+    expect(meter.getAttribute('aria-valuenow')).toBe('0');
+    expect(meter.getAttribute('aria-valuetext')).toBe('too weak');
+
+    // strong value → 4
+    ctrl.setValue('Aa1!Aa1!Aa1!Aa1!');
+    await new Promise(r => setTimeout(r, 0));
+    expect(meter.getAttribute('aria-valuenow')).toBe('4');
+    expect(meter.getAttribute('aria-valuetext')).toBe('strong');
+  });
+
+  it('caps lock warning is hidden by default', async () => {
+    const { container } = await render(
+      `<div kjPasswordInputScope>
+         <input kjPasswordInput />
+         <p kjPasswordCapsLockWarning>caps</p>
+       </div>`,
+      { imports: ALL_DIRECTIVES },
+    );
+    const warn = container.querySelector('[kjPasswordCapsLockWarning]') as HTMLElement;
+    expect(warn.hidden).toBe(true);
+    expect(warn.getAttribute('role')).toBe('status');
+    expect(warn.getAttribute('aria-live')).toBe('polite');
+  });
+
+  it('caps lock warning becomes visible when CapsLock modifier is detected', async () => {
+    const { container } = await render(
+      `<div kjPasswordInputScope>
+         <input kjPasswordInput />
+         <p kjPasswordCapsLockWarning>caps</p>
+       </div>`,
+      { imports: ALL_DIRECTIVES },
+    );
+    const input = container.querySelector('input')!;
+    const warn = container.querySelector('[kjPasswordCapsLockWarning]') as HTMLElement;
+
+    const event = new KeyboardEvent('keydown', { key: 'a' });
+    Object.defineProperty(event, 'getModifierState', {
+      value: (key: string) => key === 'CapsLock',
+    });
+    input.dispatchEvent(event);
+    await new Promise(r => setTimeout(r, 0));
+    expect(warn.hidden).toBe(false);
+
+    input.dispatchEvent(new Event('blur'));
+    await new Promise(r => setTimeout(r, 0));
+    expect(warn.hidden).toBe(true);
+  });
+
+  it('disabled toggle is a no-op', async () => {
+    @Component({
+      standalone: true,
+      imports: ALL_DIRECTIVES,
+      template: `
+        <div kjPasswordInputScope>
+          <input kjPasswordInput [kjDisabled]="true" />
+          <button kjButton kjPasswordToggle>eye</button>
+        </div>
+      `,
+    })
+    class Host {}
+
+    const { container } = await render(Host);
+    const input = container.querySelector('input')!;
+    const button = container.querySelector('button')!;
+    expect(input.getAttribute('type')).toBe('password');
+    button.click();
+    await new Promise(r => setTimeout(r, 0));
+    expect(input.getAttribute('type')).toBe('password');
+  });
+
+  it('passes axe audit (login form shape)', async () => {
+    const { container } = await render(
+      `<div kjPasswordInputScope>
+         <label for="pw">Password</label>
+         <input id="pw" kjPasswordInput />
+         <button kjButton kjPasswordToggle>eye</button>
+       </div>`,
+      { imports: ALL_DIRECTIVES },
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe('defaultPasswordScorer', () => {
+  it('returns 0 for empty / very short inputs', () => {
+    expect(defaultPasswordScorer('')).toBe(0);
+    expect(defaultPasswordScorer('abc')).toBe(0);
+  });
+
+  it('returns 1 for short passwords', () => {
+    expect(defaultPasswordScorer('abcdefg')).toBe(1);
+  });
+
+  it('returns 2 for medium-length, multi-class passwords', () => {
+    expect(defaultPasswordScorer('Abcdefg1')).toBe(2);
+  });
+
+  it('returns 3 for long, three-class passwords', () => {
+    expect(defaultPasswordScorer('Abcdefghi1')).toBe(3);
+  });
+
+  it('returns 4 for long, four-class passwords', () => {
+    expect(defaultPasswordScorer('Abcdefghij1!')).toBe(4);
+  });
+});