@kouji-ui/components 0.1.1 → 0.1.2

package/src/divider/divider.playground.ts

@@ -1,97 +0,0 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { KjDividerComponent } from './divider';
-import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
-
-/**
- * Playground state — module-scope signals. Knobs cover orientation, variant,
- * size, structural posture, and an optional label projected into the slot.
- */
-const orientation = signal<'horizontal' | 'vertical'>('horizontal');
-const variant = signal<'solid' | 'dashed' | 'dotted'>('solid');
-const size = signal<'sm' | 'md' | 'lg'>('md');
-const structural = signal(false);
-const label = signal('');
-
-@Component({
-  selector: 'kj-divider-playground',
-  standalone: true,
-  imports: [KjDividerComponent],
-  styles: [`
-    :host { display: block; padding: var(--kj-space-md) 0; }
-    .stack { display: flex; flex-direction: column; gap: var(--kj-space-md); min-height: 4rem; }
-    .row { display: flex; align-items: center; gap: var(--kj-space-md); height: 4rem; }
-  `],
-  template: `
-    @if (orientation() === 'horizontal') {
-      <div class="stack">
-        <span>Above</span>
-        <kj-divider
-          [kjOrientation]="orientation()"
-          [kjVariant]="variant()"
-          [kjSize]="size()"
-          [kjStructural]="structural()"
-        >{{ label() }}</kj-divider>
-        <span>Below</span>
-      </div>
-    } @else {
-      <div class="row">
-        <span>Left</span>
-        <kj-divider
-          [kjOrientation]="orientation()"
-          [kjVariant]="variant()"
-          [kjSize]="size()"
-          [kjStructural]="structural()"
-        />
-        <span>Right</span>
-      </div>
-    }
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjDividerPlaygroundDemo {
-  protected readonly orientation = orientation;
-  protected readonly variant = variant;
-  protected readonly size = size;
-  protected readonly structural = structural;
-  protected readonly label = label;
-}
-
-export const PLAYGROUND: PlaygroundFile = {
-  component: KjDividerPlaygroundDemo,
-  state: {
-    orientation: orientation as unknown as ReturnType<typeof signal>,
-    variant: variant as unknown as ReturnType<typeof signal>,
-    size: size as unknown as ReturnType<typeof signal>,
-    structural: structural as unknown as ReturnType<typeof signal>,
-    label: label as unknown as ReturnType<typeof signal>,
-  },
-  controls: [
-    {
-      kind: 'chips',
-      name: 'orientation',
-      label: 'orientation',
-      options: ['horizontal', 'vertical'],
-    },
-    { kind: 'chips', name: 'variant', label: 'variant', options: ['solid', 'dashed', 'dotted'] },
-    { kind: 'chips', name: 'size', label: 'size', options: ['sm', 'md', 'lg'] },
-    { kind: 'text', name: 'label', label: 'label' },
-    { kind: 'toggle', name: 'structural', label: 'structural' },
-  ],
-  snippet: (values) => {
-    const s = values as {
-      orientation: string;
-      variant: string;
-      size: string;
-      structural: boolean;
-      label: string;
-    };
-    const attrs: string[] = [
-      `kjOrientation="${s.orientation}"`,
-      `kjVariant="${s.variant}"`,
-      `kjSize="${s.size}"`,
-    ];
-    if (s.structural) attrs.push('[kjStructural]="true"');
-    if (s.label) return `<kj-divider\n  ${attrs.join('\n  ')}\n>${s.label}</kj-divider>`;
-    return `<kj-divider\n  ${attrs.join('\n  ')}\n/>`;
-  },
-};

package/src/divider/divider.spec.ts

@@ -1,207 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { describe, expect, test, beforeEach } from 'vitest';
-import { KjDividerComponent } from './divider';
-
-/**
- * Flush microtasks + the rAF that backs afterNextRender so the wrapper's
- * one-shot host-content probe (and the underlying KjDivider directive's
- * isHr / withContent signals) settles before assertions.
- */
-async function flushAfterNextRender(): Promise<void> {
-  await new Promise<void>((resolve) => setTimeout(resolve, 0));
-  await Promise.resolve();
-  await Promise.resolve();
-}
-
-@Component({
-  standalone: true,
-  imports: [KjDividerComponent],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<kj-divider />`,
-})
-class RuleOnlyHost {}
-
-@Component({
-  standalone: true,
-  imports: [KjDividerComponent],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<kj-divider>OR</kj-divider>`,
-})
-class WithTextHost {}
-
-@Component({
-  standalone: true,
-  imports: [KjDividerComponent],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<kj-divider><span class="probe">OR</span></kj-divider>`,
-})
-class WithElementHost {}
-
-@Component({
-  standalone: true,
-  imports: [KjDividerComponent],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<kj-divider
-    [kjOrientation]="orientation"
-    [kjStructural]="structural"
-    [kjAlign]="align"
-    [kjVariant]="variant"
-    [kjSize]="size"
-    >{{ label }}</kj-divider
-  >`,
-})
-class ConfigurableHost {
-  orientation: 'horizontal' | 'vertical' = 'horizontal';
-  structural = false;
-  align: 'start' | 'center' | 'end' = 'center';
-  variant: 'solid' | 'dashed' | 'dotted' = 'solid';
-  size: 'sm' | 'md' | 'lg' = 'md';
-  label = '';
-}
-
-@Component({
-  standalone: true,
-  imports: [KjDividerComponent],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<kj-divider [kjStructural]="true" [kjOrientation]="'vertical'" />`,
-})
-class StructuralVerticalHost {}
-
-describe('KjDividerComponent', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  describe('host election', () => {
-    test('renders an inner <hr> when no content is projected', async () => {
-      const fixture = TestBed.createComponent(RuleOnlyHost);
-      fixture.detectChanges();
-      await flushAfterNextRender();
-      fixture.detectChanges();
-      const root = fixture.nativeElement as HTMLElement;
-      expect(root.querySelector('kj-divider hr.kj-divider')).not.toBeNull();
-      expect(root.querySelector('kj-divider div.kj-divider')).toBeNull();
-    });
-
-    test('renders an inner <div> when text content is projected', async () => {
-      const fixture = TestBed.createComponent(WithTextHost);
-      fixture.detectChanges();
-      await flushAfterNextRender();
-      fixture.detectChanges();
-      const root = fixture.nativeElement as HTMLElement;
-      expect(root.querySelector('kj-divider div.kj-divider')).not.toBeNull();
-      expect(root.querySelector('kj-divider hr.kj-divider')).toBeNull();
-    });
-
-    test('renders an inner <div> when element content is projected', async () => {
-      const fixture = TestBed.createComponent(WithElementHost);
-      fixture.detectChanges();
-      await flushAfterNextRender();
-      fixture.detectChanges();
-      const root = fixture.nativeElement as HTMLElement;
-      const divHost = root.querySelector('kj-divider div.kj-divider');
-      expect(divHost).not.toBeNull();
-      expect(divHost!.querySelector('.kj-divider__content .probe')?.textContent).toBe('OR');
-    });
-  });
-
-  describe('aliased input forwarding', () => {
-    test('forwards kjOrientation to the directive (data-orientation)', async () => {
-      const fixture = TestBed.createComponent(ConfigurableHost);
-      fixture.componentInstance.orientation = 'vertical';
-      fixture.detectChanges();
-      await flushAfterNextRender();
-      fixture.detectChanges();
-      const host = fixture.nativeElement.querySelector('kj-divider hr.kj-divider')!;
-      expect(host.getAttribute('data-orientation')).toBe('vertical');
-    });
-
-    test('forwards kjAlign to the directive (data-align) on the with-content host', async () => {
-      const fixture = TestBed.createComponent(ConfigurableHost);
-      fixture.componentInstance.label = 'Today';
-      fixture.componentInstance.align = 'start';
-      fixture.detectChanges();
-      await flushAfterNextRender();
-      fixture.detectChanges();
-      const host = fixture.nativeElement.querySelector('kj-divider div.kj-divider')!;
-      expect(host).not.toBeNull();
-      expect(host.getAttribute('data-align')).toBe('start');
-    });
-
-    test('resolves kjVariant via the wrapper preset (default solid)', async () => {
-      const fixture = TestBed.createComponent(ConfigurableHost);
-      fixture.detectChanges();
-      await flushAfterNextRender();
-      fixture.detectChanges();
-      const host = fixture.nativeElement.querySelector('kj-divider hr.kj-divider')!;
-      expect(host.getAttribute('data-variant')).toBe('solid');
-    });
-
-    test('forwards kjVariant to the directive (data-variant)', async () => {
-      const fixture = TestBed.createComponent(ConfigurableHost);
-      fixture.componentInstance.variant = 'dashed';
-      fixture.detectChanges();
-      await flushAfterNextRender();
-      fixture.detectChanges();
-      const host = fixture.nativeElement.querySelector('kj-divider hr.kj-divider')!;
-      expect(host.getAttribute('data-variant')).toBe('dashed');
-    });
-
-    test('resolves kjSize via the wrapper preset (default md)', async () => {
-      const fixture = TestBed.createComponent(ConfigurableHost);
-      fixture.detectChanges();
-      await flushAfterNextRender();
-      fixture.detectChanges();
-      const host = fixture.nativeElement.querySelector('kj-divider hr.kj-divider')!;
-      expect(host.getAttribute('data-size')).toBe('md');
-    });
-
-    test('forwards kjSize to the directive (data-size)', async () => {
-      const fixture = TestBed.createComponent(ConfigurableHost);
-      fixture.componentInstance.size = 'lg';
-      fixture.detectChanges();
-      await flushAfterNextRender();
-      fixture.detectChanges();
-      const host = fixture.nativeElement.querySelector('kj-divider hr.kj-divider')!;
-      expect(host.getAttribute('data-size')).toBe('lg');
-    });
-  });
-
-  describe('structural-mode wiring (via KjDivider directive)', () => {
-    test('decorative default: aria-hidden="true" on the inner <hr>', async () => {
-      const fixture = TestBed.createComponent(RuleOnlyHost);
-      fixture.detectChanges();
-      await flushAfterNextRender();
-      fixture.detectChanges();
-      const host = fixture.nativeElement.querySelector('kj-divider hr.kj-divider')!;
-      expect(host.getAttribute('aria-hidden')).toBe('true');
-      expect(host.hasAttribute('role')).toBe(false);
-    });
-
-    test('structural mode on a with-content <div>: role="separator"', async () => {
-      const fixture = TestBed.createComponent(ConfigurableHost);
-      fixture.componentInstance.label = 'OR';
-      fixture.componentInstance.structural = true;
-      fixture.detectChanges();
-      await flushAfterNextRender();
-      fixture.detectChanges();
-      const host = fixture.nativeElement.querySelector('kj-divider div.kj-divider')!;
-      expect(host).not.toBeNull();
-      expect(host.getAttribute('role')).toBe('separator');
-      expect(host.hasAttribute('aria-hidden')).toBe(false);
-    });
-
-    test('structural + vertical: aria-orientation="vertical" via the directive', async () => {
-      const fixture = TestBed.createComponent(StructuralVerticalHost);
-      fixture.detectChanges();
-      await flushAfterNextRender();
-      fixture.detectChanges();
-      const host = fixture.nativeElement.querySelector('kj-divider hr.kj-divider')!;
-      // <hr> has implicit role="separator" — directive must NOT set role explicitly.
-      expect(host.hasAttribute('role')).toBe(false);
-      expect(host.getAttribute('aria-orientation')).toBe('vertical');
-      expect(host.hasAttribute('aria-hidden')).toBe(false);
-    });
-  });
-});

package/src/divider/divider.ts

@@ -1,220 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  ViewEncapsulation,
-  afterNextRender,
-  contentChildren,
-  input,
-  signal,
-  viewChild,
-} from '@angular/core';
-import {
-  KJ_SIZE_PRESET,
-  KJ_VARIANT_PRESET,
-  KjDivider,
-  type KjDividerAlign,
-  type KjDividerOrientation,
-} from '@kouji-ui/core';
-
-/**
- * Styled wrapper around the headless `KjDivider` directive.
- *
- * Auto-elects the host element: renders `<hr kjDivider/>` when no content is
- * projected (rule-only case — preserves the native `<hr>` semantic and its
- * implicit `role="separator"` when structural), and `<div kjDivider>` when
- * content is projected (the with-content case — `<hr>` is a void element and
- * cannot host children, so we fall back to `<div>` for label projection).
- *
- * The wrapper itself is layout-invisible (`display: contents`) so a vertical
- * divider inside a flex strip does not introduce an extra block-level box that
- * would break the row-flex.
- *
- * **Composition note.** Per the analysis, the directive is composed by
- * applying `kjDivider` to the inner rendered host (`<hr>` or `<div>`) rather
- * than via the wrapper's own `hostDirectives`. The directive must run on the
- * visible rule element so the data attributes (`data-orientation`,
- * `data-with-content`, `data-variant`, `data-size`) and ARIA semantics land
- * where theme CSS expects them, not on the `display: contents` outer
- * `<kj-divider>` custom element.
- *
- * @example
- * ```html
- * <kj-divider />
- * <kj-divider [kjStructural]="true" kjOrientation="vertical" />
- * <kj-divider [kjStructural]="true">OR</kj-divider>
- * ```
- * @doc-example Default
- *   A horizontal rule between two short text blocks.
- *   @doc-file divider.example.ts
- * @doc-example Usage
- *   A walkthrough of the most common divider usages — structural separator,
- *   labelled rule, and vertical divider inside a flex row.
- *   @doc-file divider.usage.example.ts
- * @doc-example Vertical
- *   `kjOrientation="vertical"` for inline separators inside a flex strip.
- *   @doc-file divider.vertical.example.ts
- * @doc-example With content
- *   A short label nestled into the rule — "OR", "AND THEN", section breaks.
- *   @doc-file divider.with-content.example.ts
- * @doc-example Variants
- *   Line styles — `solid` / `dashed` / `dotted`.
- *   @doc-file divider.variants.example.ts
- * @doc-example Sizes
- *   `sm` / `md` / `lg` — drives both thickness and surrounding spacing.
- *   @doc-file divider.sizes.example.ts
- * @doc-example Structural
- *   `[kjStructural]="true"` exposes `role="separator"` for AT.
- *   @doc-file divider.structural.example.ts
- *
- * @doc-aria
- *   role="separator"  — Reflected on the rule when `[kjStructural]="true"`
- *   aria-hidden       — Reflected `"true"` when decorative (the default)
- *   data-orientation  — Mirrors the resolved orientation for theme/scope hooks
- *   data-with-content — Mirrors whether a label is projected
- *
- * @doc-css-var
- *   --kj-divider-color     — Rule color. Defaults to --kj-border-default with a fg-default fallback mix.
- *   --kj-divider-thickness — Line thickness. `sm` keeps 1px; `lg` bumps to 2px.
- *   --kj-divider-spacing   — Margin around the rule along its block axis (or inline for vertical).
- *   --kj-divider-gap       — Gap between the projected label and the surrounding rule segments.
- *
- * @doc-a11y
- *   When `kjStructural` is `true`, the rule announces as a structural break
- *   between regions (`role="separator"`); when false (default), it is fully
- *   decorative (`aria-hidden="true"`). The wrapper auto-elects `<hr>` for
- *   rule-only and `<div>` for with-content (since `<hr>` is void and cannot
- *   host a label).
- *
- * @doc-related typography,card,list
- *
- * @doc-category Library/Layout/Divider
- * @doc
- * @doc-name divider
- * @doc-description Themed horizontal or vertical separator line with solid, dashed, or dotted variants and optional label.
- * @doc-is-main
- */
-@Component({
-  selector: 'kj-divider',
-  standalone: true,
-  imports: [KjDivider],
-  template: `
-    @if (probed() && !hasContent()) {
-      <hr
-        kjDivider
-        class="kj-divider"
-        [kjOrientation]="kjOrientation()"
-        [kjStructural]="kjStructural()"
-        [kjVariant]="kjVariant()"
-        [kjSize]="kjSize()"
-      />
-    } @else {
-      <div
-        kjDivider
-        class="kj-divider"
-        [kjOrientation]="kjOrientation()"
-        [kjStructural]="kjStructural()"
-        [kjAlign]="kjAlign()"
-        [kjVariant]="kjVariant()"
-        [kjSize]="kjSize()"
-      >
-        <span #contentProbe class="kj-divider__content"><ng-content /></span>
-      </div>
-    }
-  `,
-  styleUrl: './divider.css',
-  encapsulation: ViewEncapsulation.None,
-  host: { style: 'display: contents;' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: KJ_VARIANT_PRESET,
-      useValue: { values: ['solid', 'dashed', 'dotted'], default: 'solid' },
-    },
-    {
-      provide: KJ_SIZE_PRESET,
-      useValue: { values: ['sm', 'md', 'lg'], default: 'md' },
-    },
-  ],
-})
-export class KjDividerComponent {
-  /** Visual orientation of the rule. Reflects to `data-orientation` on the rule host. */
-  readonly kjOrientation = input<KjDividerOrientation>('horizontal');
-
-  /**
-   * Whether the divider carries semantic weight (separates two regions not
-   * already demarcated by surrounding heading or landmark structure).
-   * Defaults to `false` (decorative; `aria-hidden="true"`).
-   */
-  readonly kjStructural = input<boolean>(false);
-
-  /** Alignment of the projected content within a with-content divider. */
-  readonly kjAlign = input<KjDividerAlign>('center');
-
-  /** Line style preset. Validated against `KJ_VARIANT_PRESET` (`solid` / `dashed` / `dotted`). */
-  readonly kjVariant = input<'solid' | 'dashed' | 'dotted'>('solid');
-
-  /** Size preset. Validated against `KJ_SIZE_PRESET` (`sm` / `md` / `lg`). */
-  readonly kjSize = input<'sm' | 'md' | 'lg'>('md');
-
-  /**
-   * Reference to the inner `<span class="kj-divider__content">` that wraps the
-   * `<ng-content>` slot when the with-content branch is rendered. Sampled
-   * after first render to discover whether the consumer actually projected
-   * anything.
-   */
-  private readonly contentProbe = viewChild<ElementRef<HTMLElement>>('contentProbe');
-
-  /**
-   * Host election lifecycle:
-   *   1. Initial render — the wrapper renders the `<div>` with-content branch
-   *      so the `<ng-content>` slot is live and any projected nodes (text or
-   *      elements) physically land in the DOM.
-   *   2. `afterNextRender` — the wrapper inspects the `<span>` content probe.
-   *      If it is empty (no consumer-projected content), `probed` flips true
-   *      with `hasContent=false`, swapping the host to `<hr>` for the
-   *      rule-only case (preserves the native `<hr>` semantic and its
-   *      implicit `role="separator"` when structural).
-   *   3. Otherwise the wrapper stays on the `<div>` branch.
-   *
-   * The conditional-content edge case (consumers toggling content at runtime)
-   * is documented in the analysis as an open question — `hasContent` only
-   * settles once. Consumers wanting runtime-toggleable labels should wrap them
-   * in a stable element child (e.g. `<span>`); `projectedChildren` keeps the
-   * host on `<div>` whenever an element child is present.
-   */
-  protected readonly probed = signal(false);
-  protected readonly hasContent = signal(true);
-
-  /**
-   * Tracks any projected element children so the host stays on `<div>` if a
-   * runtime toggle adds or removes a labelled child after first probe.
-   */
-  private readonly projectedChildren = contentChildren('*', { descendants: false });
-
-  constructor() {
-    afterNextRender(() => {
-      if (this.probed()) return;
-      const probe = this.contentProbe()?.nativeElement;
-      const initialText = probe ? (probe.textContent ?? '').trim() : '';
-      const hasElementChildren = !!probe && this.hasMeaningfulElementChildren(probe);
-      const present =
-        initialText.length > 0 || hasElementChildren || this.projectedChildren().length > 0;
-      this.hasContent.set(present);
-      this.probed.set(true);
-    });
-  }
-
-  private hasMeaningfulElementChildren(probe: HTMLElement): boolean {
-    const nodes = probe.childNodes;
-    for (let i = 0; i < nodes.length; i++) {
-      const node = nodes[i];
-      if (node.nodeType === Node.ELEMENT_NODE) return true;
-      if (node.nodeType === Node.TEXT_NODE) {
-        const text = node.nodeValue ?? '';
-        if (text.trim().length > 0) return true;
-      }
-    }
-    return false;
-  }
-}

package/src/divider/index.ts

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

package/src/drawer/_examples/drawer.example.ts

@@ -1,30 +0,0 @@
-import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
-import { KjDrawer, KjDrawerService } from '@kouji-ui/core';
-import { KjButtonComponent } from '../../button/button';
-
-// TODO(wrapper-overlay): re-skin via styled wrapper.
-@Component({
-  selector: 'kj-drawer-default-body',
-  standalone: true,
-  imports: [KjDrawer],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<kj-drawer
-    ><h2>Drawer</h2>
-    <p>Body</p></kj-drawer
-  >`,
-})
-class DrawerBody {}
-
-@Component({
-  selector: 'kj-drawer-example',
-  standalone: true,
-  imports: [KjButtonComponent],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<kj-button (click)="open()">Open drawer</kj-button>`,
-})
-export class KjDrawerExample {
-  private readonly drawer = inject(KjDrawerService);
-  open(): void {
-    this.drawer.open(DrawerBody);
-  }
-}

package/src/drawer/_examples/drawer.modal-vs-non-modal.example.ts

@@ -1,27 +0,0 @@
-import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
-import { KjDrawer, KjDrawerService } from '@kouji-ui/core';
-import { KjButtonComponent } from '../../button/button';
-
-// TODO(wrapper-overlay): modal toggling needs revisit on overlay primitives.
-@Component({
-  selector: 'kj-drawer-modal-body',
-  standalone: true,
-  imports: [KjDrawer],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<kj-drawer><h2>Drawer</h2></kj-drawer>`,
-})
-class Body {}
-
-@Component({
-  selector: 'kj-drawer-modal-vs-non-modal-example',
-  standalone: true,
-  imports: [KjButtonComponent],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<kj-button (click)="open()">Open</kj-button>`,
-})
-export class KjDrawerModalVsNonModalExample {
-  private readonly drawer = inject(KjDrawerService);
-  open(): void {
-    this.drawer.open(Body);
-  }
-}

package/src/drawer/_examples/drawer.scrollable.example.ts

@@ -1,30 +0,0 @@
-import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
-import { KjDrawer, KjDrawerService } from '@kouji-ui/core';
-import { KjButtonComponent } from '../../button/button';
-
-// TODO(wrapper-overlay): re-skin scrollable drawer.
-@Component({
-  selector: 'kj-drawer-scrollable-body',
-  standalone: true,
-  imports: [KjDrawer],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<kj-drawer
-    ><h2>Long</h2>
-    <div style="overflow:auto; max-height:60vh"><p>Lorem ipsum…</p></div></kj-drawer
-  >`,
-})
-class Body {}
-
-@Component({
-  selector: 'kj-drawer-scrollable-example',
-  standalone: true,
-  imports: [KjButtonComponent],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<kj-button (click)="open()">Open</kj-button>`,
-})
-export class KjDrawerScrollableExample {
-  private readonly drawer = inject(KjDrawerService);
-  open(): void {
-    this.drawer.open(Body);
-  }
-}

package/src/drawer/_examples/drawer.sides.example.ts

@@ -1,32 +0,0 @@
-import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
-import { KjDrawer, KjDrawerService, type KjDrawerSide } from '@kouji-ui/core';
-import { KjButtonComponent } from '../../button/button';
-
-// TODO(wrapper-overlay): re-skin sides demo.
-@Component({
-  selector: 'kj-drawer-sides-body',
-  standalone: true,
-  imports: [KjDrawer],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<kj-drawer><h2>Drawer</h2></kj-drawer>`,
-})
-class Body {}
-
-@Component({
-  selector: 'kj-drawer-sides-example',
-  standalone: true,
-  imports: [KjButtonComponent],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-button (click)="open('left')">Left</kj-button>
-    <kj-button (click)="open('right')">Right</kj-button>
-    <kj-button (click)="open('top')">Top</kj-button>
-    <kj-button (click)="open('bottom')">Bottom</kj-button>
-  `,
-})
-export class KjDrawerSidesExample {
-  private readonly drawer = inject(KjDrawerService);
-  open(side: KjDrawerSide): void {
-    this.drawer.open(Body, { side });
-  }
-}