@kouji-ui/components 0.1.1

package/src/breadcrumb/breadcrumb.playground.ts

@@ -0,0 +1,93 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import {
+  KjBreadcrumbComponent,
+  KjBreadcrumbCurrentComponent,
+  KjBreadcrumbItemComponent,
+  KjBreadcrumbLinkComponent,
+  KjBreadcrumbListComponent,
+} from './breadcrumb';
+import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
+
+/**
+ * Playground state — module-scope signals. Knobs vary the trail depth, the
+ * cascaded size, and the overflow cap so the truncation behaviour can be
+ * exercised live.
+ */
+const size = signal<'sm' | 'md' | 'lg'>('md');
+const depth = signal<3 | 4 | 5 | 6>(4);
+const maxItems = signal<0 | 3 | 4>(0);
+
+const PATH: ReadonlyArray<{ href: string; label: string }> = [
+  { href: '/', label: 'Home' },
+  { href: '/library', label: 'Library' },
+  { href: '/library/data', label: 'Data display' },
+  { href: '/library/data/breadcrumb', label: 'Breadcrumb' },
+  { href: '/library/data/breadcrumb/usage', label: 'Usage' },
+  { href: '/library/data/breadcrumb/usage/detail', label: 'Detail' },
+];
+
+@Component({
+  selector: 'kj-breadcrumb-playground',
+  standalone: true,
+  imports: [
+    KjBreadcrumbComponent,
+    KjBreadcrumbListComponent,
+    KjBreadcrumbItemComponent,
+    KjBreadcrumbLinkComponent,
+    KjBreadcrumbCurrentComponent,
+  ],
+  template: `
+    <kj-breadcrumb [kjSize]="size()" [kjMaxItems]="maxItems()">
+      <kj-breadcrumb-list>
+        @for (crumb of trail(); track crumb.href; let last = $last) {
+          <kj-breadcrumb-item>
+            @if (last) {
+              <kj-breadcrumb-current>{{ crumb.label }}</kj-breadcrumb-current>
+            } @else {
+              <kj-breadcrumb-link [kjHref]="crumb.href">{{ crumb.label }}</kj-breadcrumb-link>
+            }
+          </kj-breadcrumb-item>
+        }
+      </kj-breadcrumb-list>
+    </kj-breadcrumb>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjBreadcrumbPlaygroundDemo {
+  protected readonly size = size;
+  protected readonly depth = depth;
+  protected readonly maxItems = maxItems;
+
+  protected trail(): typeof PATH {
+    return PATH.slice(0, depth());
+  }
+}
+
+export const PLAYGROUND: PlaygroundFile = {
+  component: KjBreadcrumbPlaygroundDemo,
+  state: {
+    size: size as unknown as ReturnType<typeof signal>,
+    depth: depth as unknown as ReturnType<typeof signal>,
+    maxItems: maxItems as unknown as ReturnType<typeof signal>,
+  },
+  controls: [
+    { kind: 'chips', name: 'size', label: 'size', options: ['sm', 'md', 'lg'] },
+    { kind: 'chips', name: 'depth', label: 'depth', options: [3, 4, 5, 6] },
+    { kind: 'chips', name: 'maxItems', label: 'max items', options: [0, 3, 4] },
+  ],
+  snippet: (values) => {
+    const s = values as { size: string; depth: number; maxItems: number };
+    const attrs: string[] = [`kjSize="${s.size}"`];
+    if (s.maxItems > 0) attrs.push(`[kjMaxItems]="${s.maxItems}"`);
+    const crumbs = PATH.slice(0, s.depth)
+      .map((c, i, arr) => {
+        const last = i === arr.length - 1;
+        const inner = last
+          ? `<kj-breadcrumb-current>${c.label}</kj-breadcrumb-current>`
+          : `<kj-breadcrumb-link kjHref="${c.href}">${c.label}</kj-breadcrumb-link>`;
+        return `    <kj-breadcrumb-item>${inner}</kj-breadcrumb-item>`;
+      })
+      .join('\n');
+    return `<kj-breadcrumb\n  ${attrs.join('\n  ')}\n>\n  <kj-breadcrumb-list>\n${crumbs}\n  </kj-breadcrumb-list>\n</kj-breadcrumb>`;
+  },
+};

package/src/breadcrumb/breadcrumb.spec.ts

@@ -0,0 +1,230 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { describe, expect, test, beforeEach } from 'vitest';
+import {
+  KjBreadcrumbComponent,
+  KjBreadcrumbListComponent,
+  KjBreadcrumbItemComponent,
+  KjBreadcrumbLinkComponent,
+  KjBreadcrumbCurrentComponent,
+  KjBreadcrumbSeparatorComponent,
+  KjBreadcrumbEllipsisComponent,
+} from './breadcrumb';
+
+const imports = [
+  KjBreadcrumbComponent,
+  KjBreadcrumbListComponent,
+  KjBreadcrumbItemComponent,
+  KjBreadcrumbLinkComponent,
+  KjBreadcrumbCurrentComponent,
+  KjBreadcrumbSeparatorComponent,
+  KjBreadcrumbEllipsisComponent,
+];
+
+@Component({
+  standalone: true,
+  imports,
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-breadcrumb [kjMaxItems]="maxItems()" [kjOverflow]="overflow()" [kjSeparator]="separator()">
+      <kj-breadcrumb-list>
+        @for (crumb of crumbs(); track crumb.label; let last = $last) {
+          <kj-breadcrumb-item>
+            @if (last) {
+              <kj-breadcrumb-current>{{ crumb.label }}</kj-breadcrumb-current>
+            } @else {
+              <kj-breadcrumb-link [kjHref]="crumb.href">{{ crumb.label }}</kj-breadcrumb-link>
+            }
+          </kj-breadcrumb-item>
+        }
+      </kj-breadcrumb-list>
+    </kj-breadcrumb>
+  `,
+})
+class HostComponent {
+  readonly crumbs = signal<{ label: string; href: string }[]>([
+    { label: 'Home', href: '/' },
+    { label: 'Library', href: '/library' },
+    { label: 'Data', href: '/library/data' },
+  ]);
+  readonly maxItems = signal<number>(4);
+  readonly overflow = signal<'truncate' | 'menu' | 'none'>('truncate');
+  readonly separator = signal<string | undefined>(undefined);
+}
+
+@Component({
+  standalone: true,
+  imports,
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-breadcrumb>
+      <kj-breadcrumb-list>
+        <kj-breadcrumb-item>
+          <kj-breadcrumb-link kjHref="/">Home</kj-breadcrumb-link>
+        </kj-breadcrumb-item>
+        <kj-breadcrumb-separator>›</kj-breadcrumb-separator>
+        <kj-breadcrumb-item>
+          <kj-breadcrumb-link kjHref="/library">Library</kj-breadcrumb-link>
+        </kj-breadcrumb-item>
+        <kj-breadcrumb-separator>›</kj-breadcrumb-separator>
+        <kj-breadcrumb-item>
+          <kj-breadcrumb-current>Data</kj-breadcrumb-current>
+        </kj-breadcrumb-item>
+      </kj-breadcrumb-list>
+    </kj-breadcrumb>
+  `,
+})
+class ExplicitSeparatorHost {}
+
+@Component({
+  standalone: true,
+  imports,
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-breadcrumb [kjMaxItems]="3">
+      <kj-breadcrumb-list>
+        <kj-breadcrumb-item>
+          <kj-breadcrumb-link kjHref="/">Home</kj-breadcrumb-link>
+        </kj-breadcrumb-item>
+        <kj-breadcrumb-item>
+          <kj-breadcrumb-ellipsis>…</kj-breadcrumb-ellipsis>
+        </kj-breadcrumb-item>
+        <kj-breadcrumb-item>
+          <kj-breadcrumb-link kjHref="/a">A</kj-breadcrumb-link>
+        </kj-breadcrumb-item>
+        <kj-breadcrumb-item>
+          <kj-breadcrumb-link kjHref="/b">B</kj-breadcrumb-link>
+        </kj-breadcrumb-item>
+        <kj-breadcrumb-item>
+          <kj-breadcrumb-current>Current</kj-breadcrumb-current>
+        </kj-breadcrumb-item>
+      </kj-breadcrumb-list>
+    </kj-breadcrumb>
+  `,
+})
+class TruncatedHost {}
+
+describe('KjBreadcrumbComponent (wrapper)', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HostComponent, ExplicitSeparatorHost, TruncatedHost],
+    });
+  });
+
+  test('renders a <nav> with class kj-breadcrumb and aria-label="Breadcrumb"', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    const nav = fixture.nativeElement.querySelector('.kj-breadcrumb');
+    expect(nav).not.toBeNull();
+    expect(nav.getAttribute('aria-label')).toBe('Breadcrumb');
+  });
+
+  test('renders an <ol> with class kj-breadcrumb-list', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    const ol = fixture.nativeElement.querySelector('.kj-breadcrumb-list');
+    expect(ol).not.toBeNull();
+  });
+
+  test('renders one <li class="kj-breadcrumb-item"> per crumb', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    const items = fixture.nativeElement.querySelectorAll('.kj-breadcrumb-item');
+    expect(items.length).toBe(3);
+  });
+
+  test('the terminal cell renders <span class="kj-breadcrumb-current"> with aria-current="page"', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    const current = fixture.nativeElement.querySelector('.kj-breadcrumb-current');
+    expect(current).not.toBeNull();
+    expect(current.getAttribute('aria-current')).toBe('page');
+  });
+
+  test('non-terminal cells render <a class="kj-breadcrumb-link kj-link"> with href', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    const links = fixture.nativeElement.querySelectorAll('a.kj-breadcrumb-link');
+    expect(links.length).toBe(2);
+    expect(links[0].getAttribute('href')).toBe('/');
+    expect(links[1].getAttribute('href')).toBe('/library');
+  });
+
+  test('the per-crumb link defaults to muted variant + sm size + hover underline', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    const link = fixture.nativeElement.querySelector('a.kj-breadcrumb-link');
+    expect(link.getAttribute('data-variant')).toBe('muted');
+    expect(link.getAttribute('data-size')).toBe('sm');
+    expect(link.getAttribute('data-underline')).toBe('hover');
+  });
+
+  test('explicit separator wrapper sets data-explicit-separators on the list', () => {
+    const fixture = TestBed.createComponent(ExplicitSeparatorHost);
+    fixture.detectChanges();
+    const ol = fixture.nativeElement.querySelector('.kj-breadcrumb-list');
+    expect(ol.getAttribute('data-explicit-separators')).toBe('');
+    const seps = fixture.nativeElement.querySelectorAll('.kj-breadcrumb-separator');
+    expect(seps.length).toBe(2);
+    expect(seps[0].getAttribute('aria-hidden')).toBe('true');
+    expect(seps[0].getAttribute('role')).toBe('presentation');
+  });
+
+  test('kjSeparator forwards to --kj-breadcrumb-separator-content', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.componentInstance.separator.set('›');
+    fixture.detectChanges();
+    const nav: HTMLElement = fixture.nativeElement.querySelector('.kj-breadcrumb');
+    expect(nav.style.getPropertyValue('--kj-breadcrumb-separator-content')).toContain('›');
+  });
+
+  test('truncation hides interior items and surfaces hidden count in aria-label', () => {
+    const fixture = TestBed.createComponent(TruncatedHost);
+    fixture.detectChanges();
+    const nav = fixture.nativeElement.querySelector('.kj-breadcrumb');
+    expect(nav.getAttribute('aria-label')).toContain('hidden');
+    const items = fixture.nativeElement.querySelectorAll('.kj-breadcrumb-item');
+    // 5 li items (one of them holds the ellipsis).
+    expect(items.length).toBe(5);
+  });
+
+  test('ellipsis cell carries class kj-breadcrumb-ellipsis and renders inside its <li>', () => {
+    const fixture = TestBed.createComponent(TruncatedHost);
+    fixture.detectChanges();
+    const ell = fixture.nativeElement.querySelector('.kj-breadcrumb-ellipsis');
+    expect(ell).not.toBeNull();
+    expect(ell.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  test('overflow="none" disables truncation', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.componentInstance.crumbs.set([
+      { label: 'Home', href: '/' },
+      { label: 'A', href: '/a' },
+      { label: 'B', href: '/b' },
+      { label: 'C', href: '/c' },
+      { label: 'D', href: '/d' },
+      { label: 'Cur', href: '/cur' },
+    ]);
+    fixture.componentInstance.maxItems.set(3);
+    fixture.componentInstance.overflow.set('none');
+    fixture.detectChanges();
+    const items = fixture.nativeElement.querySelectorAll('.kj-breadcrumb-item');
+    let visible = 0;
+    items.forEach((it: Element) => {
+      if (!it.hasAttribute('data-hidden')) visible++;
+    });
+    expect(visible).toBe(6);
+  });
+
+  test('component is structurally rendered with expected class hierarchy', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    const nav = fixture.nativeElement.querySelector('.kj-breadcrumb');
+    const ol = nav.querySelector('.kj-breadcrumb-list');
+    const firstItem = ol.querySelector('.kj-breadcrumb-item');
+    const link = firstItem.querySelector('a.kj-breadcrumb-link');
+    expect(link).not.toBeNull();
+    expect(link.textContent.trim()).toBe('Home');
+  });
+});

package/src/breadcrumb/breadcrumb.ts

@@ -0,0 +1,272 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  booleanAttribute,
+  input,
+} from '@angular/core';
+import {
+  KjBreadcrumb,
+  KjBreadcrumbList,
+  KjBreadcrumbItem,
+  KjBreadcrumbCurrent,
+  KjBreadcrumbSeparator,
+  KjBreadcrumbEllipsis,
+  KjLink,
+} from '@kouji-ui/core';
+
+/**
+ * Styled wrapper around the headless `KjBreadcrumb` directive — root of the
+ * breadcrumb compound. Hosts a `<nav aria-label="Breadcrumb">` (selector
+ * restriction on the directive) by composing `KjBreadcrumb` via
+ * `hostDirectives`. Compose with `<kj-breadcrumb-list>`,
+ * `<kj-breadcrumb-item>`, `<kj-breadcrumb-link>`,
+ * `<kj-breadcrumb-current>`, `<kj-breadcrumb-separator>`, and
+ * `<kj-breadcrumb-ellipsis>` to build the trail.
+ *
+ * @example
+ * ```html
+ * <kj-breadcrumb>
+ *   <kj-breadcrumb-list>
+ *     <kj-breadcrumb-item><kj-breadcrumb-link kjHref="/">Home</kj-breadcrumb-link></kj-breadcrumb-item>
+ *     <kj-breadcrumb-item><kj-breadcrumb-link kjHref="/library">Library</kj-breadcrumb-link></kj-breadcrumb-item>
+ *     <kj-breadcrumb-item><kj-breadcrumb-current>Data</kj-breadcrumb-current></kj-breadcrumb-item>
+ *   </kj-breadcrumb-list>
+ * </kj-breadcrumb>
+ * ```
+ *
+ * @doc-example Default
+ *   The default playground — three-crumb trail with auto `/` separator.
+ *   @doc-file breadcrumb.example.ts
+ * @doc-example Usage
+ *   The common shape — Home → section → page with a current cell. Use this as
+ *   the copy-paste starting point.
+ *   @doc-file breadcrumb.usage.example.ts
+ * @doc-example With icons
+ *   Project a Home glyph (or any icon) inside the first link for a compact trail.
+ *   @doc-file breadcrumb.with-icons.example.ts
+ * @doc-example Truncated
+ *   `kjMaxItems` clips the middle of long trails and renders an ellipsis cell.
+ *   @doc-file breadcrumb.truncated.example.ts
+ * @doc-example Custom separator
+ *   Swap `--kj-breadcrumb-separator-content` for `›`, `→`, or any glyph.
+ *   @doc-file breadcrumb.custom-separator.example.ts
+ * @doc-example Long path
+ *   How a 6+ level trail collapses with the default overflow behaviour.
+ *   @doc-file breadcrumb.long-path.example.ts
+ *
+ * @doc-keyboard
+ *   Tab           — Moves focus to the next breadcrumb link
+ *   Enter         — Activates the focused link (native anchor semantics)
+ *
+ * @doc-aria
+ *   aria-label    — `"Breadcrumb"` on the nav landmark; override via `kjAriaLabel`
+ *   aria-current  — `"page"` on the terminal `<kj-breadcrumb-current>` cell
+ *   role          — `navigation` on the host
+ *
+ * @doc-touch
+ *   Links inherit `<kj-link>` sizing — the `sm` default keeps the trail
+ *   compact. Bump `kjSize` on the host or individual links when the trail is
+ *   the primary navigation target on mobile.
+ *
+ * @doc-a11y
+ *   Renders a `<nav aria-label="Breadcrumb">` landmark with an ordered list
+ *   inside. The current page cell carries `aria-current="page"` (not a link)
+ *   so AT users know they're already on it. Separators are decorative — the
+ *   default CSS pseudo-element keeps them out of the accessibility tree.
+ *
+ * @doc-related link,navigation,tabs
+ *
+ * @doc-css-var
+ *   --kj-breadcrumb-gap                — Gap between crumbs and separators.
+ *   --kj-breadcrumb-separator-content  — Content for the auto CSS separator. Defaults to `'/'`; swap for `'›'` or any glyph.
+ *   --kj-breadcrumb-overflow-pad       — Horizontal padding on the ellipsis cell.
+ *   --kj-color-breadcrumb-muted        — Color for non-current crumbs and separators. Inherits --kj-fg-muted.
+ *   --kj-color-breadcrumb-current      — Color for the current-page cell. Inherits --kj-fg-default.
+ *
+ * @doc-category Library/Navigation
+ * @doc
+ * @doc-name breadcrumb
+ * @doc-description Themed breadcrumb trail with a nav landmark, configurable separator, and overflow ellipsis.
+ * @doc-is-main
+ */
+@Component({
+  selector: 'nav[kj-breadcrumb], kj-breadcrumb',
+  standalone: true,
+  hostDirectives: [
+    {
+      directive: KjBreadcrumb,
+      inputs: ['kjAriaLabel', 'kjSeparator', 'kjMaxItems', 'kjOverflow'],
+    },
+  ],
+  template: `<ng-content />`,
+  styleUrl: './breadcrumb.css',
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    'class': 'kj-breadcrumb',
+    'role': 'navigation',
+    '[attr.data-size]': 'kjSize()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjBreadcrumbComponent {
+  /** Size preset cascaded onto descendants. Default `'md'`. */
+  readonly kjSize = input<string>('md');
+}
+
+/**
+ * Wraps `KjBreadcrumbList`. Renders an `<ol>` host inside the breadcrumb
+ * root via host-directive composition.
+ *
+ * @doc-category Library/Navigation
+ * @doc
+ * @doc-name breadcrumb
+ */
+@Component({
+  selector: 'ol[kj-breadcrumb-list], kj-breadcrumb-list',
+  standalone: true,
+  hostDirectives: [{ directive: KjBreadcrumbList, inputs: ['kjWrap'] }],
+  template: `<ng-content />`,
+  encapsulation: ViewEncapsulation.None,
+  host: { 'class': 'kj-breadcrumb-list' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjBreadcrumbListComponent {}
+
+/**
+ * Wraps `KjBreadcrumbItem`. Renders a `<li>` host inside the list.
+ *
+ * @doc-category Library/Navigation
+ * @doc
+ * @doc-name breadcrumb
+ */
+@Component({
+  selector: 'li[kj-breadcrumb-item], kj-breadcrumb-item',
+  standalone: true,
+  hostDirectives: [KjBreadcrumbItem],
+  template: `<ng-content />`,
+  encapsulation: ViewEncapsulation.None,
+  host: { 'class': 'kj-breadcrumb-item' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjBreadcrumbItemComponent {}
+
+/**
+ * Wraps `KjBreadcrumbLink`. Renders the per-crumb `<a kjBreadcrumbLink>`
+ * with breadcrumb defaults (muted variant, small size, hover-only underline).
+ *
+ * Renders an inner `<a>` so the link's data attributes, ARIA semantics, and
+ * external/disabled plumbing land on the actual hyperlink — mirrors the
+ * `<kj-link>` "directive on inner host" pattern.
+ *
+ * @doc-category Library/Navigation
+ * @doc
+ * @doc-name breadcrumb
+ */
+@Component({
+  selector: 'kj-breadcrumb-link',
+  standalone: true,
+  imports: [KjLink],
+  template: `
+    <a
+      kjLink
+      class="kj-breadcrumb-link kj-link"
+      data-breadcrumb-link=""
+      [attr.href]="kjHref() ?? null"
+      [attr.target]="kjTarget() ?? null"
+      [attr.aria-label]="kjAriaLabel() ?? null"
+      [kjVariant]="kjVariant()"
+      [kjSize]="kjSize()"
+      [kjUnderline]="kjUnderline()"
+      [kjExternal]="kjExternal()"
+      [kjDisabled]="kjDisabled()"
+    >
+      <ng-content />
+    </a>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  host: { style: 'display: contents;' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjBreadcrumbLinkComponent {
+  /** Bound to the inner `<a [href]>`. */
+  readonly kjHref = input<string | undefined>(undefined);
+
+  /** Bound to the inner `<a [target]>`. */
+  readonly kjTarget = input<'_self' | '_blank' | '_parent' | '_top' | string | undefined>(undefined);
+
+  /** Bound to `[attr.aria-label]` on the inner `<a>`. */
+  readonly kjAriaLabel = input<string | undefined>(undefined);
+
+  /** KjLink variant. Defaults to `'muted'` (the breadcrumb default). */
+  readonly kjVariant = input<string>('muted');
+
+  /** KjLink size. Defaults to `'sm'` (the breadcrumb default). */
+  readonly kjSize = input<string>('sm');
+
+  /** Underline mode. Defaults to `'hover'`. */
+  readonly kjUnderline = input<'always' | 'hover' | 'none'>('hover');
+
+  /** External-link tri-state. Forwarded to `KjLink`. */
+  readonly kjExternal = input(false);
+
+  /** Disabled-link bundle. Forwarded to `KjLink`. */
+  readonly kjDisabled = input<boolean, unknown>(false, { transform: booleanAttribute });
+}
+
+/**
+ * Wraps `KjBreadcrumbCurrent`. Renders a `<span>` cell with
+ * `aria-current="page"` (selector restriction on the directive) via
+ * host-directive composition.
+ *
+ * @doc-category Library/Navigation
+ * @doc
+ * @doc-name breadcrumb
+ */
+@Component({
+  selector: 'span[kj-breadcrumb-current], kj-breadcrumb-current',
+  standalone: true,
+  hostDirectives: [KjBreadcrumbCurrent],
+  template: `<ng-content />`,
+  encapsulation: ViewEncapsulation.None,
+  host: { 'class': 'kj-breadcrumb-current' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjBreadcrumbCurrentComponent {}
+
+/**
+ * Wraps `KjBreadcrumbSeparator`. Renders a `<li>` separator cell for
+ * icon-based separators (where the auto CSS pseudo-element won't do).
+ *
+ * @doc-category Library/Navigation
+ * @doc
+ * @doc-name breadcrumb
+ */
+@Component({
+  selector: 'li[kj-breadcrumb-separator], kj-breadcrumb-separator',
+  standalone: true,
+  hostDirectives: [KjBreadcrumbSeparator],
+  template: `<ng-content />`,
+  encapsulation: ViewEncapsulation.None,
+  host: { 'class': 'kj-breadcrumb-separator' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjBreadcrumbSeparatorComponent {}
+
+/**
+ * Wraps `KjBreadcrumbEllipsis`. Renders an overflow indicator cell.
+ *
+ * @doc-category Library/Navigation
+ * @doc
+ * @doc-name breadcrumb
+ */
+@Component({
+  selector: 'kj-breadcrumb-ellipsis',
+  standalone: true,
+  hostDirectives: [KjBreadcrumbEllipsis],
+  template: `<ng-content>…</ng-content>`,
+  encapsulation: ViewEncapsulation.None,
+  host: { 'class': 'kj-breadcrumb-ellipsis' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjBreadcrumbEllipsisComponent {}

package/src/breadcrumb/breadcrumb.usage.example.ts

@@ -0,0 +1,45 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+  KjBreadcrumbComponent,
+  KjBreadcrumbCurrentComponent,
+  KjBreadcrumbItemComponent,
+  KjBreadcrumbLinkComponent,
+  KjBreadcrumbListComponent,
+} from './breadcrumb';
+
+/**
+ * Common breadcrumb shape — Home → section → page with a current cell.
+ * Use this as the copy-paste starting point for new screens.
+ */
+@Component({
+  selector: 'kj-breadcrumb-usage-example',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    KjBreadcrumbComponent,
+    KjBreadcrumbListComponent,
+    KjBreadcrumbItemComponent,
+    KjBreadcrumbLinkComponent,
+    KjBreadcrumbCurrentComponent,
+  ],
+  styles: [`:host { display: block; }`],
+  template: `
+    <kj-breadcrumb>
+      <kj-breadcrumb-list>
+        <kj-breadcrumb-item>
+          <kj-breadcrumb-link kjHref="/">Home</kj-breadcrumb-link>
+        </kj-breadcrumb-item>
+        <kj-breadcrumb-item>
+          <kj-breadcrumb-link kjHref="/docs">Docs</kj-breadcrumb-link>
+        </kj-breadcrumb-item>
+        <kj-breadcrumb-item>
+          <kj-breadcrumb-link kjHref="/docs/components">Components</kj-breadcrumb-link>
+        </kj-breadcrumb-item>
+        <kj-breadcrumb-item>
+          <kj-breadcrumb-current>Breadcrumb</kj-breadcrumb-current>
+        </kj-breadcrumb-item>
+      </kj-breadcrumb-list>
+    </kj-breadcrumb>
+  `,
+})
+export class KjBreadcrumbUsageExample {}

package/src/breadcrumb/index.ts

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

package/src/button/_examples/button.anchor.example.ts

@@ -0,0 +1,18 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjButton } from '@kouji-ui/core';
+
+@Component({
+  selector: 'kj-button-anchor-example',
+  standalone: true,
+  imports: [KjButton],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: ` <a kjButton kjVariant="link" href="#profile">View profile</a> `,
+})
+export class KjButtonAnchorExample {}