@kouji-ui/components 0.1.1 → 0.1.2

package/src/breadcrumb/breadcrumb.spec.ts

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

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

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

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

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

@@ -1,18 +0,0 @@
-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 {}

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

@@ -1,43 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KJ_BUTTON_DEFAULTS, provideKjButton } from '@kouji-ui/core';
-import { KjButtonComponent } from '../button';
-
-@Component({
-  selector: 'kj-button-configured-example',
-  standalone: true,
-  imports: [KjButtonComponent],
-  providers: [
-    provideKjButton({
-      variants: [...KJ_BUTTON_DEFAULTS.variants, 'brand', 'warning'],
-      defaults: { variant: 'brand', size: 'md' },
-    }),
-  ],
-  styles: [
-    `
-      :host {
-        display: block;
-        display: flex;
-        gap: var(--kj-space-md);
-      }
-    `,
-    `
-      .kj-button[data-variant='brand'] {
-        --kj-button-bg: var(--kj-bg-primary);
-        --kj-button-fg: var(--kj-fg-on-primary);
-      }
-    `,
-    `
-      .kj-button[data-variant='warning'] {
-        --kj-button-bg: var(--kj-bg-warning);
-        --kj-button-fg: var(--kj-fg-on-warning);
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-button>Default (now 'brand')</kj-button>
-    <kj-button kjVariant="warning">Warning</kj-button>
-    <kj-button kjVariant="default">Original default</kj-button>
-  `,
-})
-export class KjButtonConfiguredExample {}

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

@@ -1,25 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjButtonComponent } from '../button';
-
-@Component({
-  selector: 'kj-button-disabled-example',
-  standalone: true,
-  imports: [KjButtonComponent],
-  styles: [
-    `
-      :host {
-        display: flex;
-        gap: var(--kj-space-sm);
-        flex-wrap: wrap;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-button [kjDisabled]="true">Default</kj-button>
-    <kj-button kjVariant="destructive" [kjDisabled]="true">Destructive</kj-button>
-    <kj-button kjVariant="ghost" [kjDisabled]="true">Ghost</kj-button>
-    <kj-button kjVariant="outline" [kjDisabled]="true">Outline</kj-button>
-  `,
-})
-export class KjButtonDisabledExample {}

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

@@ -1,22 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjButtonComponent } from '../button';
-
-/**
- * Default usage example for KjButtonComponent.
- * Rendered live in the docs and as code in the example panel.
- */
-@Component({
-  selector: 'kj-button-example',
-  standalone: true,
-  imports: [KjButtonComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<kj-button kjVariant="default">Click me</kj-button>`,
-})
-export class KjButtonExample {}

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

@@ -1,27 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjButtonComponent } from '../button';
-
-@Component({
-  selector: 'kj-button-icon-example',
-  standalone: true,
-  imports: [KjButtonComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-button kjSize="icon" kjAriaLabel="Open settings">
-      <!-- Inline SVG keeps the example self-contained; consumers typically use their own icon system. -->
-      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-        <path
-          d="M19.14 12.94a7.07 7.07 0 0 0 0-1.88l2.03-1.58a.5.5 0 0 0 .12-.64l-1.92-3.32a.5.5 0 0 0-.61-.22l-2.39.96a7 7 0 0 0-1.62-.94l-.36-2.54A.5.5 0 0 0 13.9 2h-3.8a.5.5 0 0 0-.49.42l-.36 2.54a7 7 0 0 0-1.62.94l-2.39-.96a.5.5 0 0 0-.61.22L2.71 8.48a.5.5 0 0 0 .12.64l2.03 1.58a7.07 7.07 0 0 0 0 1.88l-2.03 1.58a.5.5 0 0 0-.12.64l1.92 3.32a.5.5 0 0 0 .61.22l2.39-.96c.5.39 1.04.71 1.62.94l.36 2.54c.04.24.25.42.49.42h3.8a.5.5 0 0 0 .49-.42l.36-2.54a7 7 0 0 0 1.62-.94l2.39.96a.5.5 0 0 0 .61-.22l1.92-3.32a.5.5 0 0 0-.12-.64ZM12 15.5A3.5 3.5 0 1 1 15.5 12 3.5 3.5 0 0 1 12 15.5Z"
-        />
-      </svg>
-    </kj-button>
-  `,
-})
-export class KjButtonIconExample {}