@kouji-ui/components 0.1.1 → 0.1.2

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

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

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

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

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

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

@@ -1,7 +0,0 @@
-// AUTO-GENERATED by scripts/migrate-examples.mjs
-// One barrel per component folder — used by the docs app as a lazy chunk.
-export { 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

@@ -1,121 +0,0 @@
-/* ─────────────────────────────────────────────────────────────
-   .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; }
-  }
-}

package/src/breadcrumb/breadcrumb.playground.ts

@@ -1,93 +0,0 @@
-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>`;
-  },
-};