@kouji-ui/components 0.1.1 → 0.1.2

package/src/avatar/avatar-group.usage.example.ts

@@ -1,30 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { KjAvatarComponent } from './avatar';
-import { KjAvatarGroupComponent } from './avatar-group';
-
-/**
- * Common avatar-group shapes — a capped face-pile with +N chip and a list-mode
- * variant for "shared by" rows. Use this as the copy-paste starting point.
- */
-@Component({
-  selector: 'kj-avatar-group-usage-example',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [KjAvatarGroupComponent, KjAvatarComponent],
-  styles: [`:host { display: flex; flex-direction: column; gap: var(--kj-space-md); }`],
-  template: `
-    <kj-avatar-group kjMax="3" kjTotal="7">
-      <kj-avatar content="AL" alt="Alice" />
-      <kj-avatar content="BO" alt="Bo" />
-      <kj-avatar content="CJ" alt="CJ" />
-      <kj-avatar content="DI" alt="Di" />
-    </kj-avatar-group>
-
-    <kj-avatar-group kjRole="list" kjSize="sm">
-      <kj-avatar content="EV" alt="Evan" />
-      <kj-avatar content="FA" alt="Fay" />
-      <kj-avatar content="GU" alt="Guo" />
-    </kj-avatar-group>
-  `,
-})
-export class KjAvatarGroupUsageExample {}

package/src/avatar/avatar.css

@@ -1,58 +0,0 @@
-@layer kj.component {
-  .kj-avatar {
-    --kj-avatar-size:   2.5rem;
-    --kj-avatar-bg:     var(--kj-bg-field);
-    --kj-avatar-fg:     var(--kj-fg-default);
-    --kj-avatar-radius: 9999px;
-
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--kj-avatar-size);
-    height: var(--kj-avatar-size);
-    background: var(--kj-avatar-bg);
-    color: var(--kj-avatar-fg);
-    border-radius: var(--kj-avatar-radius);
-    overflow: hidden;
-    font: 0.875rem / 1 var(--kj-font-sans);
-    font-weight: 600;
-  }
-
-  /* `rounded` reads `--kj-radius-box-lg` (1rem default, declared in
-     `kj.base`) rather than `--kj-radius-box` because some themes (kouji,
-     bauhaus) set `--kj-radius-box` to 0 as a brutalist signature — falling
-     back to that would make `rounded` and `circle` look identical on those
-     themes. `--kj-radius-box-lg` stays unset by theme overrides, so the
-     toggle always produces a visible shape change. */
-  .kj-avatar[data-shape="rounded"] { --kj-avatar-radius: var(--kj-radius-box-lg); }
-
-  /* The host's `[hidden]` attribute (written by the avatar-group when a
-     child overflows `kjMax`) needs an explicit `display: none` because the
-     `inline-flex` declaration above wins against the UA `[hidden] { display:
-     none }` rule via selector specificity. Without this, "hidden" overflow
-     avatars still render and `kjMax` looks broken. */
-  .kj-avatar[hidden] { display: none; }
-
-  .kj-avatar[data-size="xs"] { --kj-avatar-size: 1.5rem; font-size: 0.6875rem; }
-  .kj-avatar[data-size="sm"] { --kj-avatar-size: 2rem;   font-size: 0.75rem; }
-  .kj-avatar[data-size="lg"] { --kj-avatar-size: 3rem;   font-size: 1rem; }
-  .kj-avatar[data-size="xl"] { --kj-avatar-size: 4rem;   font-size: 1.25rem; }
-
-  .kj-avatar-image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
-  }
-  .kj-avatar-image:not([data-loaded]) { opacity: 0; }
-
-  .kj-avatar-fallback {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .kj-avatar-fallback:not([data-visible]) { opacity: 0; pointer-events: none; }
-}

package/src/avatar/avatar.playground.ts

@@ -1,95 +0,0 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { KjAvatarComponent } from './avatar';
-import { KjAvatarGroupComponent } from './avatar-group';
-import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
-
-/**
- * Playground state — module-scope signals. Targets the group facepile (main
- * symbol) and exposes size / shape / max-visible / total / item count so the
- * overflow chip and stacking can be probed.
- */
-const size = signal<'xs' | 'sm' | 'md' | 'lg' | 'xl'>('md');
-const shape = signal<'circle' | 'rounded'>('circle');
-const max = signal<2 | 3 | 4 | 5>(3);
-const total = signal<4 | 6 | 8>(6);
-const itemCount = signal<3 | 4 | 5>(4);
-
-const PEOPLE: ReadonlyArray<{ content: string; alt: string }> = [
-  { content: 'AL', alt: 'Alice' },
-  { content: 'BR', alt: 'Bruno' },
-  { content: 'CY', alt: 'Cyrille' },
-  { content: 'DA', alt: 'Dara' },
-  { content: 'ED', alt: 'Eduardo' },
-];
-
-@Component({
-  selector: 'kj-avatar-playground',
-  standalone: true,
-  imports: [KjAvatarComponent, KjAvatarGroupComponent],
-  template: `
-    <kj-avatar-group
-      [kjMax]="max()"
-      [kjTotal]="total()"
-      [kjSize]="size()"
-      [kjShape]="shape()"
-    >
-      @for (p of visiblePeople(); track p.alt) {
-        <kj-avatar [content]="p.content" [alt]="p.alt" />
-      }
-    </kj-avatar-group>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjAvatarPlaygroundDemo {
-  protected readonly size = size;
-  protected readonly shape = shape;
-  protected readonly max = max;
-  protected readonly total = total;
-  protected readonly itemCount = itemCount;
-
-  protected visiblePeople(): typeof PEOPLE {
-    return PEOPLE.slice(0, itemCount());
-  }
-}
-
-export const PLAYGROUND: PlaygroundFile = {
-  component: KjAvatarPlaygroundDemo,
-  state: {
-    size: size as unknown as ReturnType<typeof signal>,
-    shape: shape as unknown as ReturnType<typeof signal>,
-    max: max as unknown as ReturnType<typeof signal>,
-    total: total as unknown as ReturnType<typeof signal>,
-    itemCount: itemCount as unknown as ReturnType<typeof signal>,
-  },
-  controls: [
-    {
-      kind: 'chips',
-      name: 'size',
-      label: 'size',
-      options: ['xs', 'sm', 'md', 'lg', 'xl'],
-    },
-    { kind: 'chips', name: 'shape', label: 'shape', options: ['circle', 'rounded'] },
-    { kind: 'chips', name: 'max', label: 'max visible', options: [2, 3, 4, 5] },
-    { kind: 'chips', name: 'total', label: 'total', options: [4, 6, 8] },
-    { kind: 'chips', name: 'itemCount', label: 'items', options: [3, 4, 5] },
-  ],
-  snippet: (values) => {
-    const s = values as {
-      size: string;
-      shape: string;
-      max: number;
-      total: number;
-      itemCount: number;
-    };
-    const attrs: string[] = [
-      `[kjMax]="${s.max}"`,
-      `[kjTotal]="${s.total}"`,
-      `kjSize="${s.size}"`,
-      `kjShape="${s.shape}"`,
-    ];
-    const children = PEOPLE.slice(0, s.itemCount)
-      .map((p) => `  <kj-avatar content="${p.content}" alt="${p.alt}" />`)
-      .join('\n');
-    return `<kj-avatar-group\n  ${attrs.join('\n  ')}\n>\n${children}\n</kj-avatar-group>`;
-  },
-};

package/src/avatar/avatar.ts

@@ -1,123 +0,0 @@
-import { Component, ChangeDetectionStrategy, ViewEncapsulation, computed, inject, input, TemplateRef } from '@angular/core';
-import { NgTemplateOutlet } from '@angular/common';
-import { KjAvatar, KjAvatarImage, KjAvatarFallback, KJ_AVATAR_GROUP, type KjAvatarShape } from '@kouji-ui/core';
-
-type KjAvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-/**
- * Avatar component. Renders an image when `src` is provided; otherwise (or when
- * the image fails to load) shows the `content` input. `content` accepts a plain
- * string or a `TemplateRef` for richer markup (icon, sub-badge, etc.).
- *
- * @doc-example Default
- *   The default playground — initials avatar at the default size.
- *   @doc-file avatar.default.example.ts
- * @doc-example Usage
- *   The common shapes — image, initials fallback, sized, and a rounded square.
- *   Use this as the copy-paste starting point.
- *   @doc-file avatar.usage.example.ts
- * @doc-example Sizes
- *   xs / sm / md / lg / xl — `md` is the default.
- *   @doc-file avatar.sizes.example.ts
- * @doc-example With image
- *   Bind `src` and `alt` — the alt also surfaces as a native hover tooltip.
- *   @doc-file avatar.with-image.example.ts
- * @doc-example Initials fallback
- *   Project text into `content` for a graceful fallback when `src` is missing.
- *   @doc-file avatar.initials.example.ts
- * @doc-example Shapes
- *   `circle` (default) or `rounded` — pick the silhouette that matches the surface.
- *   @doc-file avatar.shapes.example.ts
- *
- * @doc-aria
- *   alt           — Forwarded to the inner `<img>`; falls back to empty string when omitted
- *   title         — Mirrors `alt` so hovering surfaces a native tooltip
- *   data-size     — Mirrors the resolved size for theme/scope hooks
- *   data-shape    — Mirrors the resolved shape for theme/scope hooks
- *
- * @doc-a11y
- *   When `src` is set the inner `<img>` carries the user-supplied `alt`; an
- *   empty alt (the default) marks it decorative so AT skips it — pair with a
- *   visible name elsewhere. The fallback element is a `<span>` so it reads as
- *   plain text rather than an image.
- *
- * @doc-related avatar-group,badge,icon
- *
- * @doc-category Library/Data display
- * @doc
- * @doc-name avatar
- */
-@Component({
-  selector: 'kj-avatar',
-  standalone: true,
-  hostDirectives: [KjAvatar],
-  imports: [KjAvatarImage, KjAvatarFallback, NgTemplateOutlet],
-  template: `
-    @if (src(); as srcVal) {
-      <img kjAvatarImage class="kj-avatar-image" [src]="srcVal" [alt]="alt() ?? ''" />
-    }
-    <span kjAvatarFallback class="kj-avatar-fallback">
-      @if (isTemplate(content())) {
-        <ng-container *ngTemplateOutlet="$any(content())"></ng-container>
-      } @else {
-        {{ content() }}
-      }
-    </span>
-  `,
-  styleUrl: './avatar.css',
-  encapsulation: ViewEncapsulation.None,
-  host: {
-    'class': 'kj-avatar',
-    '[attr.data-size]': 'resolvedSize()',
-    '[attr.data-shape]': 'resolvedShape()',
-    // Mirror `alt` to `title` so hovering the avatar shows a native tooltip.
-    // `alt` alone only surfaces to screen readers / fallback rendering.
-    '[attr.title]': 'alt()',
-  },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjAvatarComponent {
-  /**
-   * Optional `KjAvatarGroup` context. Avatars rendered inside a
-   * `<kj-avatar-group>` inherit `kjSize` / `kjShape` from the group when
-   * their own inputs are unset — matching the `@doc-example Sizes` claim
-   * that group size "cascades onto every projected `<kj-avatar>`".
-   */
-  private readonly group = inject(KJ_AVATAR_GROUP, { optional: true });
-
-  readonly src = input<string | undefined>(undefined);
-  readonly alt = input<string | undefined>(undefined);
-  /** Content shown when there is no `src`, or as a fallback if the image fails. */
-  readonly content = input<string | TemplateRef<unknown>>('');
-  /**
-   * Explicit avatar size. Leave unset to inherit from a parent
-   * `<kj-avatar-group kjSize="...">`; falls back to `'md'` when neither
-   * is set.
-   */
-  readonly size = input<KjAvatarSize | undefined>(undefined);
-  /**
-   * Explicit avatar shape. Leave unset to inherit from a parent
-   * `<kj-avatar-group kjShape="...">`; falls back to `'circle'` when neither
-   * is set.
-   */
-  readonly shape = input<KjAvatarShape | undefined>(undefined);
-
-  /** Effective size — explicit input wins, then group context, then `'md'`. */
-  protected readonly resolvedSize = computed<KjAvatarSize>(() => {
-    const own = this.size();
-    if (own) return own;
-    const fromGroup = this.group?.size() as KjAvatarSize | undefined;
-    return fromGroup ?? 'md';
-  });
-
-  /** Effective shape — explicit input wins, then group context, then `'circle'`. */
-  protected readonly resolvedShape = computed<KjAvatarShape>(() => {
-    const own = this.shape();
-    if (own) return own;
-    return this.group?.shape() ?? 'circle';
-  });
-
-  protected isTemplate(v: unknown): v is TemplateRef<unknown> {
-    return v instanceof TemplateRef;
-  }
-}

package/src/avatar/index.ts

@@ -1,2 +0,0 @@
-export * from './avatar';
-export * from './avatar-group';

package/src/badge/_examples/badge.default.example.ts

@@ -1,18 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjBadgeComponent } from '../badge';
-
-@Component({
-  selector: 'kj-badge-default-example',
-  standalone: true,
-  imports: [KjBadgeComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<kj-badge>New</kj-badge>`,
-})
-export class KjBadgeDefaultExample {}

package/src/badge/_examples/badge.sizes.example.ts

@@ -1,25 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjBadgeComponent } from '../badge';
-
-@Component({
-  selector: 'kj-badge-sizes-example',
-  standalone: true,
-  imports: [KjBadgeComponent],
-  styles: [
-    `
-      :host {
-        display: flex;
-        gap: 0.5rem;
-        align-items: center;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-badge size="xs">Extra small</kj-badge>
-    <kj-badge size="sm">Small</kj-badge>
-    <kj-badge size="md">Medium</kj-badge>
-    <kj-badge size="lg">Large</kj-badge>
-  `,
-})
-export class KjBadgeSizesExample {}

package/src/badge/_examples/badge.variants.example.ts

@@ -1,24 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjBadgeComponent } from '../badge';
-
-@Component({
-  selector: 'kj-badge-variants-example',
-  standalone: true,
-  imports: [KjBadgeComponent],
-  styles: [
-    `
-      :host {
-        display: flex;
-        gap: 0.5rem;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-badge variant="default">Default</kj-badge>
-    <kj-badge variant="secondary">Secondary</kj-badge>
-    <kj-badge variant="destructive">Destructive</kj-badge>
-    <kj-badge variant="outline">Outline</kj-badge>
-  `,
-})
-export class KjBadgeVariantsExample {}

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

@@ -1,31 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjBadgeComponent } from '../badge';
-
-@Component({
-  selector: 'kj-badge-with-dot-example',
-  standalone: true,
-  imports: [KjBadgeComponent],
-  styles: [
-    `
-      :host {
-        display: flex;
-        gap: var(--kj-space-sm);
-        flex-wrap: wrap;
-        align-items: center;
-      }
-      .success {
-        --kj-badge-dot-color: var(--kj-bg-success);
-      }
-      .warning {
-        --kj-badge-dot-color: var(--kj-bg-warning);
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-badge dot variant="secondary" class="success">Active</kj-badge>
-    <kj-badge dot variant="secondary" class="warning">Pending</kj-badge>
-    <kj-badge dot variant="outline">Archived</kj-badge>
-  `,
-})
-export class KjBadgeWithDotExample {}

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

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

@@ -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 { 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

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

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

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

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

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