@kouji-ui/components 0.1.1

package/src/badge/_examples/badge.with-icon.example.ts

@@ -0,0 +1,23 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjBadgeComponent } from '../badge';
+
+@Component({
+  selector: 'kj-badge-with-icon-example',
+  standalone: true,
+  imports: [KjBadgeComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-badge variant="destructive">
+      <span aria-hidden="true">●</span>
+      Live
+    </kj-badge>
+  `,
+})
+export class KjBadgeWithIconExample {}

package/src/badge/_examples/index.ts

@@ -0,0 +1,7 @@
+// AUTO-GENERATED by scripts/migrate-examples.mjs
+// One barrel per component folder — used by the docs app as a lazy chunk.
+export { KjBadgeDefaultExample } from './badge.default.example';
+export { KjBadgeSizesExample } from './badge.sizes.example';
+export { KjBadgeVariantsExample } from './badge.variants.example';
+export { KjBadgeWithDotExample } from './badge.with-dot.example';
+export { KjBadgeWithIconExample } from './badge.with-icon.example';

package/src/badge/badge.css

@@ -0,0 +1,59 @@
+@layer kj.component {
+  .kj-badge {
+    --kj-badge-bg:           var(--kj-bg-primary);
+    --kj-badge-fg:           var(--kj-fg-on-primary);
+    --kj-badge-border-color: transparent;
+    --kj-badge-radius:       var(--kj-radius-selector);
+    --kj-badge-padding-x:    var(--kj-space-sm);
+    --kj-badge-padding-y:    0.125rem;
+    --kj-badge-font-size:    0.75rem;
+    --kj-badge-dot-size:     0.375rem;
+    --kj-badge-dot-color:    currentColor;
+
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    background: var(--kj-badge-bg);
+    color: var(--kj-badge-fg);
+    border: var(--kj-border) solid var(--kj-badge-border-color);
+    border-radius: var(--kj-badge-radius);
+    padding: var(--kj-badge-padding-y) var(--kj-badge-padding-x);
+    font: var(--kj-badge-font-size) / 1 var(--kj-font-sans);
+    font-weight: 500;
+  }
+
+  .kj-badge[data-dot]::before {
+    content: "";
+    flex: none;
+    width: var(--kj-badge-dot-size);
+    height: var(--kj-badge-dot-size);
+    border-radius: 50%;
+    background: var(--kj-badge-dot-color);
+  }
+
+  .kj-badge[data-variant="secondary"] {
+    --kj-badge-bg: var(--kj-bg-surface);
+    --kj-badge-fg: var(--kj-fg-default);
+  }
+  .kj-badge[data-variant="destructive"] {
+    --kj-badge-bg: var(--kj-bg-danger);
+    --kj-badge-fg: var(--kj-fg-on-danger);
+  }
+  .kj-badge[data-variant="outline"] {
+    --kj-badge-bg: transparent;
+    --kj-badge-fg: var(--kj-fg-default);
+    --kj-badge-border-color: var(--kj-border-default);
+  }
+
+  .kj-badge[data-size="xs"] {
+    --kj-badge-padding-x: 0.1875rem;
+    --kj-badge-padding-y: 0.03125rem;
+    --kj-badge-font-size: 0.5625rem;
+  }
+  .kj-badge[data-size="sm"] {
+    --kj-badge-padding-x: 0.375rem;
+    --kj-badge-padding-y: 0.125rem;
+    --kj-badge-font-size: 0.6875rem;
+  }
+  .kj-badge[data-size="lg"] { --kj-badge-padding-x: var(--kj-space-md); --kj-badge-font-size: 0.875rem; }
+}

package/src/badge/badge.playground.ts

@@ -0,0 +1,49 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { KjBadgeComponent } from './badge';
+import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
+
+/**
+ * Playground state — module-scope signals. Tunes variant, size and label so
+ * the inline badge can be previewed across its visual register.
+ */
+const variant = signal<'default' | 'secondary' | 'destructive' | 'outline'>('default');
+const size = signal<'xs' | 'sm' | 'md' | 'lg'>('md');
+const label = signal('New');
+
+@Component({
+  selector: 'kj-badge-playground',
+  standalone: true,
+  imports: [KjBadgeComponent],
+  template: `
+    <kj-badge [variant]="variant()" [size]="size()">{{ label() }}</kj-badge>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjBadgePlaygroundDemo {
+  protected readonly variant = variant;
+  protected readonly size = size;
+  protected readonly label = label;
+}
+
+export const PLAYGROUND: PlaygroundFile = {
+  component: KjBadgePlaygroundDemo,
+  state: {
+    variant: variant as unknown as ReturnType<typeof signal>,
+    size: size as unknown as ReturnType<typeof signal>,
+    label: label as unknown as ReturnType<typeof signal>,
+  },
+  controls: [
+    {
+      kind: 'chips',
+      name: 'variant',
+      label: 'variant',
+      options: ['default', 'secondary', 'destructive', 'outline'],
+    },
+    { kind: 'chips', name: 'size', label: 'size', options: ['xs', 'sm', 'md', 'lg'] },
+    { kind: 'text', name: 'label', label: 'label' },
+  ],
+  snippet: (values) => {
+    const s = values as { variant: string; size: string; label: string };
+    return `<kj-badge variant="${s.variant}" size="${s.size}">${s.label}</kj-badge>`;
+  },
+};

package/src/badge/badge.ts

@@ -0,0 +1,86 @@
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, booleanAttribute, input } from '@angular/core';
+import { KjBadge, KjBadgeVariant } from '@kouji-ui/core';
+
+/**
+ * Styled wrapper around the headless `KjBadge` directive.
+ *
+ * @doc-example Default
+ *   The default playground — a single badge with the default variant.
+ *   @doc-file badge.default.example.ts
+ * @doc-example Usage
+ *   The common shapes — status pill, count badge, and an icon-prefixed tag.
+ *   Use this as the copy-paste starting point.
+ *   @doc-file badge.usage.example.ts
+ * @doc-example Variants
+ *   default / secondary / destructive / outline — pick the visual weight.
+ *   @doc-file badge.variants.example.ts
+ * @doc-example Sizes
+ *   xs / sm / md / lg — `md` is the default. Inline-text exception applies.
+ *   @doc-file badge.sizes.example.ts
+ * @doc-example With icon
+ *   Project an icon before the label for status pills or sender chips.
+ *   @doc-file badge.with-icon.example.ts
+ * @doc-example With dot
+ *   Set `dot` to render a leading status indicator; tint it via
+ *   `--kj-badge-dot-color` for state pills (active / pending / archived).
+ *   @doc-file badge.with-dot.example.ts
+ *
+ * @doc-aria
+ *   role          — Decorative by default; promote to `status` for live counts and pair with `aria-live="polite"`
+ *   data-size     — Mirrors the resolved size for theme/scope hooks
+ *
+ * @doc-touch
+ *   Badges are inline-text decorations, not tap targets. When wired to an
+ *   interactive trigger (filter chip, removable tag), wrap with a real
+ *   `<button>` and size it to ≥ 44×44 (WCAG 2.5.5).
+ *
+ * @doc-a11y
+ *   Renders a `<span>` so the badge reads as part of the surrounding text.
+ *   For live count updates (notifications, unread totals) wrap the host with
+ *   `role="status"` + `aria-live="polite"` so AT announces changes without
+ *   stealing focus.
+ *
+ * @doc-related tag,overlay-badge,avatar
+ *
+ * @doc-css-var
+ *   --kj-badge-bg            — Background fill. Variant rules set this; override to brand-paint a one-off.
+ *   --kj-badge-fg            — Foreground (text + icon) color. Resolved per variant.
+ *   --kj-badge-border-color  — Border color. Outline variant sets this; default is transparent.
+ *   --kj-badge-radius        — Corner radius. Inherits --kj-radius-selector.
+ *   --kj-badge-padding-x     — Horizontal padding. Sizes override.
+ *   --kj-badge-padding-y     — Vertical padding. Sizes override.
+ *   --kj-badge-font-size     — Font size. Sizes override.
+ *   --kj-badge-dot-size      — Diameter of the leading dot (when `dot` is set).
+ *   --kj-badge-dot-color     — Fill of the leading dot. Defaults to currentColor.
+ *
+ * @doc-category Library/Data display
+ * @doc
+ * @doc-name badge
+ * @doc-description Themed inline label for status, counts, or category tags with variant and size presets.
+ * @doc-is-main
+ */
+@Component({
+  selector: 'kj-badge',
+  standalone: true,
+  imports: [KjBadge],
+  template: `
+    <span
+      kjBadge
+      class="kj-badge"
+      [kjBadgeVariant]="variant()"
+      [kjBadgeDot]="dot()"
+      [attr.data-size]="size()"
+    >
+      <ng-content />
+    </span>
+  `,
+  styleUrl: './badge.css',
+  encapsulation: ViewEncapsulation.None,
+  host: { style: 'display: contents;' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjBadgeComponent {
+  readonly variant = input<KjBadgeVariant>('default');
+  readonly size = input<'xs' | 'sm' | 'md' | 'lg'>('md');
+  readonly dot = input(false, { transform: booleanAttribute });
+}

package/src/badge/badge.usage.example.ts

@@ -0,0 +1,22 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { KjBadgeComponent } from './badge';
+
+/**
+ * Common badge shapes — status pill, count, outline. Use this as the
+ * copy-paste starting point for new screens.
+ */
+@Component({
+  selector: 'kj-badge-usage-example',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [KjBadgeComponent],
+  styles: [`:host { display: flex; gap: var(--kj-space-sm); flex-wrap: wrap; align-items: center; }`],
+  template: `
+    <kj-badge variant="default">New</kj-badge>
+    <kj-badge variant="secondary">Beta</kj-badge>
+    <kj-badge variant="destructive">Deprecated</kj-badge>
+    <kj-badge variant="outline">v2.0</kj-badge>
+    <kj-badge size="sm" variant="destructive">12</kj-badge>
+  `,
+})
+export class KjBadgeUsageExample {}

package/src/badge/index.ts

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

package/src/breadcrumb/_examples/breadcrumb.custom-separator.example.ts

@@ -0,0 +1,53 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import {
+  KjBreadcrumbComponent,
+  KjBreadcrumbListComponent,
+  KjBreadcrumbItemComponent,
+  KjBreadcrumbLinkComponent,
+  KjBreadcrumbCurrentComponent,
+} from '../breadcrumb';
+
+/**
+ * Custom separator example. The chevron `›` is supplied via the `kjSeparator`
+ * input on the root, which reflects to the
+ * `--kj-breadcrumb-separator-content` CSS variable consumed by the auto
+ * pseudo-element.
+ */
+@Component({
+  selector: 'kj-breadcrumb-custom-separator-example',
+  standalone: true,
+  imports: [
+    KjBreadcrumbComponent,
+    KjBreadcrumbListComponent,
+    KjBreadcrumbItemComponent,
+    KjBreadcrumbLinkComponent,
+    KjBreadcrumbCurrentComponent,
+  ],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-breadcrumb kjSeparator="›">
+      <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-link kjHref="/library/data">Data</kj-breadcrumb-link>
+        </kj-breadcrumb-item>
+        <kj-breadcrumb-item>
+          <kj-breadcrumb-current>Sales report Q4</kj-breadcrumb-current>
+        </kj-breadcrumb-item>
+      </kj-breadcrumb-list>
+    </kj-breadcrumb>
+  `,
+})
+export class KjBreadcrumbCustomSeparatorExample {}

package/src/breadcrumb/_examples/breadcrumb.example.ts

@@ -0,0 +1,48 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import {
+  KjBreadcrumbComponent,
+  KjBreadcrumbListComponent,
+  KjBreadcrumbItemComponent,
+  KjBreadcrumbLinkComponent,
+  KjBreadcrumbCurrentComponent,
+} from '../breadcrumb';
+
+/**
+ * Default 3-crumb path. Auto-separator (`/`), `aria-current="page"` on the
+ * terminal cell, muted-styled links via the wrapper defaults.
+ */
+@Component({
+  selector: 'kj-breadcrumb-example',
+  standalone: true,
+  imports: [
+    KjBreadcrumbComponent,
+    KjBreadcrumbListComponent,
+    KjBreadcrumbItemComponent,
+    KjBreadcrumbLinkComponent,
+    KjBreadcrumbCurrentComponent,
+  ],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  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-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>
+  `,
+})
+export class KjBreadcrumbExample {}

package/src/breadcrumb/_examples/breadcrumb.long-path.example.ts

@@ -0,0 +1,58 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import {
+  KjBreadcrumbComponent,
+  KjBreadcrumbListComponent,
+  KjBreadcrumbItemComponent,
+  KjBreadcrumbLinkComponent,
+  KjBreadcrumbCurrentComponent,
+} from '../breadcrumb';
+
+/**
+ * Long-path example with 6 crumbs. With `kjOverflow="none"` no truncation
+ * occurs and the row will wrap (configure via the list's `kjWrap="wrap"`
+ * for explicit multi-line layout).
+ */
+@Component({
+  selector: 'kj-breadcrumb-long-path-example',
+  standalone: true,
+  imports: [
+    KjBreadcrumbComponent,
+    KjBreadcrumbListComponent,
+    KjBreadcrumbItemComponent,
+    KjBreadcrumbLinkComponent,
+    KjBreadcrumbCurrentComponent,
+  ],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-breadcrumb kjOverflow="none">
+      <kj-breadcrumb-list kjWrap="wrap">
+        <kj-breadcrumb-item>
+          <kj-breadcrumb-link kjHref="/">Home</kj-breadcrumb-link>
+        </kj-breadcrumb-item>
+        <kj-breadcrumb-item>
+          <kj-breadcrumb-link kjHref="/projects">Projects</kj-breadcrumb-link>
+        </kj-breadcrumb-item>
+        <kj-breadcrumb-item>
+          <kj-breadcrumb-link kjHref="/projects/aurora">Aurora</kj-breadcrumb-link>
+        </kj-breadcrumb-item>
+        <kj-breadcrumb-item>
+          <kj-breadcrumb-link kjHref="/projects/aurora/v2">v2</kj-breadcrumb-link>
+        </kj-breadcrumb-item>
+        <kj-breadcrumb-item>
+          <kj-breadcrumb-link kjHref="/projects/aurora/v2/research">Research</kj-breadcrumb-link>
+        </kj-breadcrumb-item>
+        <kj-breadcrumb-item>
+          <kj-breadcrumb-current>Field notes</kj-breadcrumb-current>
+        </kj-breadcrumb-item>
+      </kj-breadcrumb-list>
+    </kj-breadcrumb>
+  `,
+})
+export class KjBreadcrumbLongPathExample {}

package/src/breadcrumb/_examples/breadcrumb.truncated.example.ts

@@ -0,0 +1,59 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import {
+  KjBreadcrumbComponent,
+  KjBreadcrumbListComponent,
+  KjBreadcrumbItemComponent,
+  KjBreadcrumbLinkComponent,
+  KjBreadcrumbCurrentComponent,
+  KjBreadcrumbEllipsisComponent,
+} from '../breadcrumb';
+
+/**
+ * Truncation example. With `kjMaxItems=3` and 5 crumbs, the middle 3 collapse
+ * into the ellipsis cell (visible: `Home › … › Current`).
+ */
+@Component({
+  selector: 'kj-breadcrumb-truncated-example',
+  standalone: true,
+  imports: [
+    KjBreadcrumbComponent,
+    KjBreadcrumbListComponent,
+    KjBreadcrumbItemComponent,
+    KjBreadcrumbLinkComponent,
+    KjBreadcrumbCurrentComponent,
+    KjBreadcrumbEllipsisComponent,
+  ],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  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-link kjHref="/a">Section A</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/b">Subsection B</kj-breadcrumb-link>
+        </kj-breadcrumb-item>
+        <kj-breadcrumb-item>
+          <kj-breadcrumb-link kjHref="/a/b/c">Folder C</kj-breadcrumb-link>
+        </kj-breadcrumb-item>
+        <kj-breadcrumb-item>
+          <kj-breadcrumb-current>Current page</kj-breadcrumb-current>
+        </kj-breadcrumb-item>
+      </kj-breadcrumb-list>
+    </kj-breadcrumb>
+  `,
+})
+export class KjBreadcrumbTruncatedExample {}

package/src/breadcrumb/_examples/breadcrumb.with-icons.example.ts

@@ -0,0 +1,66 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import {
+  KjBreadcrumbComponent,
+  KjBreadcrumbListComponent,
+  KjBreadcrumbItemComponent,
+  KjBreadcrumbLinkComponent,
+  KjBreadcrumbCurrentComponent,
+} from '../breadcrumb';
+
+/**
+ * Breadcrumb with a Home icon on the first crumb. The icon sits inside the
+ * link cell; the auto separator still renders between items.
+ */
+@Component({
+  selector: 'kj-breadcrumb-with-icons-example',
+  standalone: true,
+  imports: [
+    KjBreadcrumbComponent,
+    KjBreadcrumbListComponent,
+    KjBreadcrumbItemComponent,
+    KjBreadcrumbLinkComponent,
+    KjBreadcrumbCurrentComponent,
+  ],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+      .kj-icon {
+        width: 1em;
+        height: 1em;
+        vertical-align: -0.125em;
+        margin-inline-end: 0.25em;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-breadcrumb>
+      <kj-breadcrumb-list>
+        <kj-breadcrumb-item>
+          <kj-breadcrumb-link kjHref="/" kjAriaLabel="Home">
+            <svg
+              class="kj-icon"
+              viewBox="0 0 16 16"
+              aria-hidden="true"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+            >
+              <path d="M2 7l6-5 6 5v7a1 1 0 0 1-1 1h-3v-5H6v5H3a1 1 0 0 1-1-1V7z" />
+            </svg>
+            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>
+  `,
+})
+export class KjBreadcrumbWithIconsExample {}

package/src/breadcrumb/_examples/index.ts

@@ -0,0 +1,7 @@
+// AUTO-GENERATED by scripts/migrate-examples.mjs
+// One barrel per component folder — used by the docs app as a lazy chunk.
+export { KjBreadcrumbCustomSeparatorExample } from './breadcrumb.custom-separator.example';
+export { KjBreadcrumbExample } from './breadcrumb.example';
+export { KjBreadcrumbLongPathExample } from './breadcrumb.long-path.example';
+export { KjBreadcrumbTruncatedExample } from './breadcrumb.truncated.example';
+export { KjBreadcrumbWithIconsExample } from './breadcrumb.with-icons.example';

package/src/breadcrumb/breadcrumb.css

@@ -0,0 +1,121 @@
+/* ─────────────────────────────────────────────────────────────
+   .kj-breadcrumb — component-layer tokens + structural CSS
+   Tokens default to shared-layer values from @kouji-ui/themes.
+   The component owns its own gap, separator content, and per-cell
+   colours; the per-crumb anchor inherits Link's tokens by default.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  .kj-breadcrumb {
+    /* component knobs — themes / users can override any of these */
+    --kj-breadcrumb-gap:                var(--kj-space-sm, 0.5rem);
+    --kj-breadcrumb-separator-content:  '/';
+    --kj-breadcrumb-overflow-pad:       0.25rem;
+    --kj-color-breadcrumb-muted:        var(--kj-fg-muted);
+    --kj-color-breadcrumb-current:      var(--kj-fg-default);
+
+    display: block;
+    color: var(--kj-color-breadcrumb-muted);
+    font-size: 0.875rem;
+  }
+
+  /* ── Sizes (root) ───────────────────────────────────────────── */
+  .kj-breadcrumb[data-size="sm"] { font-size: 0.8125rem; }
+  .kj-breadcrumb[data-size="md"] { font-size: 0.875rem; }
+  .kj-breadcrumb[data-size="lg"] { font-size: 1rem; }
+
+  /* ── Ordered list ───────────────────────────────────────────── */
+  .kj-breadcrumb-list {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: var(--kj-breadcrumb-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    min-width: 0;
+  }
+
+  .kj-breadcrumb-list[data-wrap="wrap"]     { flex-wrap: wrap; }
+  .kj-breadcrumb-list[data-wrap="no-wrap"]  { flex-wrap: nowrap; }
+  .kj-breadcrumb-list[data-wrap="truncate"] { flex-wrap: nowrap; }
+
+  /* ── Item ───────────────────────────────────────────────────── */
+  .kj-breadcrumb-item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--kj-breadcrumb-gap);
+    min-width: 0;
+  }
+
+  .kj-breadcrumb-item[data-hidden] { display: none; }
+
+  /* ── Auto separator (CSS pseudo-element) ────────────────────── */
+  .kj-breadcrumb-list:not([data-explicit-separators]) > .kj-breadcrumb-item:not(:first-child)::before {
+    content: var(--kj-breadcrumb-separator-content, '/');
+    color: var(--kj-color-breadcrumb-muted);
+    opacity: 0.65;
+    user-select: none;
+    margin-inline-end: var(--kj-breadcrumb-gap);
+  }
+
+  /* RTL mirroring: chevron-like glyphs flip; slashes stay. The data-attr
+     is set by the consumer when they want mirroring; we ship the rule. */
+  [dir="rtl"] .kj-breadcrumb-list:not([data-explicit-separators]) > .kj-breadcrumb-item:not(:first-child)::before {
+    /* No-op for '/'. For '›' / '→' the consumer adds [data-mirror-separator]. */
+  }
+  [dir="rtl"] .kj-breadcrumb[data-mirror-separator] .kj-breadcrumb-list:not([data-explicit-separators]) > .kj-breadcrumb-item:not(:first-child)::before {
+    display: inline-block;
+    transform: scaleX(-1);
+  }
+
+  /* ── Explicit separator ─────────────────────────────────────── */
+  .kj-breadcrumb-separator {
+    display: inline-flex;
+    align-items: center;
+    color: var(--kj-color-breadcrumb-muted);
+    opacity: 0.65;
+    user-select: none;
+  }
+
+  /* ── Per-crumb link (inherits KjLink styling via .kj-link) ──── */
+  .kj-breadcrumb-link {
+    text-decoration: none;
+    padding-block: 0.5rem; /* hit-area extension for WCAG 2.5.5 */
+  }
+
+  /* ── Current cell ───────────────────────────────────────────── */
+  .kj-breadcrumb-current {
+    color: var(--kj-color-breadcrumb-current);
+    font-weight: 500;
+  }
+
+  /* ── Ellipsis cell ──────────────────────────────────────────── */
+  .kj-breadcrumb-ellipsis {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.5rem;
+    padding-inline: var(--kj-breadcrumb-overflow-pad);
+    color: var(--kj-color-breadcrumb-muted);
+    background: transparent;
+    border: 0;
+    cursor: default;
+    user-select: none;
+  }
+
+  .kj-breadcrumb-ellipsis[data-overflow="menu"] {
+    cursor: pointer;
+    border-radius: var(--kj-radius-field, 0.25rem);
+  }
+
+  .kj-breadcrumb-ellipsis[data-overflow="menu"]:hover {
+    background: var(--kj-bg-surface, transparent);
+  }
+
+  /* ── Print: show the full breadcrumb ────────────────────────── */
+  @media print {
+    .kj-breadcrumb-item[data-hidden] { display: revert; }
+    .kj-breadcrumb-ellipsis          { display: none; }
+  }
+}