@kouji-ui/components 0.1.1

package/src/divider/divider.playground.ts

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

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

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

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

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

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

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

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

@@ -0,0 +1,32 @@
+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 });
+  }
+}