@kouji-ui/components 0.1.1

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

@@ -0,0 +1,56 @@
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
+import { KjDrawer, KjDrawerRef, KjDrawerService } from '@kouji-ui/core';
+import { KjButtonComponent } from '../../button/button';
+
+/**
+ * A walkthrough of the most common drawer usages — open from a button, change
+ * the side, and resolve a result back to the opener.
+ */
+@Component({
+  selector: 'kj-drawer-usage-body',
+  standalone: true,
+  imports: [KjDrawer, KjButtonComponent],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-drawer>
+      <h2 style="margin: 0 0 var(--kj-space-md)">Settings</h2>
+      <p>Adjust your preferences.</p>
+      <div style="display:flex; gap: var(--kj-space-sm); margin-top: var(--kj-space-lg)">
+        <kj-button kjVariant="ghost" (click)="ref.close()">Cancel</kj-button>
+        <kj-button kjVariant="default" (click)="ref.close('saved')">Save</kj-button>
+      </div>
+    </kj-drawer>
+  `,
+})
+class DrawerUsageBody {
+  protected readonly ref = inject<KjDrawerRef<DrawerUsageBody, string>>(KjDrawerRef);
+}
+
+@Component({
+  selector: 'kj-drawer-usage-example',
+  standalone: true,
+  imports: [KjButtonComponent],
+  styles: [
+    `
+      :host {
+        display: flex;
+        gap: var(--kj-space-md);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-button (click)="open('right')">Open right</kj-button>
+    <kj-button kjVariant="outline" (click)="open('bottom')">Open bottom sheet</kj-button>
+  `,
+})
+export class KjDrawerUsageExample {
+  private readonly drawer = inject(KjDrawerService);
+
+  open(side: 'right' | 'bottom'): void {
+    const ref = this.drawer.open<DrawerUsageBody, string>(DrawerUsageBody, { side });
+    ref.afterClosed$.subscribe(() => {
+      /* react to confirmed/cancelled */
+    });
+  }
+}

package/src/drawer/_examples/drawer.with-form.example.ts

@@ -0,0 +1,48 @@
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
+import { KjDrawer, KjDrawerService, KjDrawerRef } from '@kouji-ui/core';
+import { KjButtonComponent } from '../../button/button';
+import { KjInputComponent } from '../../input/input';
+import { KjFieldComponent, KjFieldLabelComponent } from '../../field/field';
+
+@Component({
+  selector: 'kj-drawer-form-body',
+  standalone: true,
+  imports: [KjDrawer, KjButtonComponent, KjInputComponent, KjFieldComponent, KjFieldLabelComponent],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-drawer>
+      <h2 style="margin: 0 0 var(--kj-space-md);">Edit profile</h2>
+      <kj-field>
+        <kj-field-label>Display name</kj-field-label>
+        <kj-input placeholder="Jane Doe" />
+      </kj-field>
+      <kj-field>
+        <kj-field-label>Email</kj-field-label>
+        <kj-input placeholder="jane@example.com" />
+      </kj-field>
+      <div
+        style="display: flex; gap: var(--kj-space-sm); justify-content: flex-end; margin-top: var(--kj-space-lg);"
+      >
+        <kj-button kjVariant="ghost" (click)="ref.close()">Cancel</kj-button>
+        <kj-button (click)="ref.close('saved')">Save</kj-button>
+      </div>
+    </kj-drawer>
+  `,
+})
+class Body {
+  protected readonly ref = inject(KjDrawerRef);
+}
+
+@Component({
+  selector: 'kj-drawer-with-form-example',
+  standalone: true,
+  imports: [KjButtonComponent],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `<kj-button (click)="open()">Open form drawer</kj-button>`,
+})
+export class KjDrawerWithFormExample {
+  private readonly drawer = inject(KjDrawerService);
+  open(): void {
+    this.drawer.open(Body);
+  }
+}

package/src/drawer/_examples/index.ts

@@ -0,0 +1,8 @@
+// AUTO-GENERATED by scripts/migrate-examples.mjs
+// One barrel per component folder — used by the docs app as a lazy chunk.
+export { KjDrawerExample } from './drawer.example';
+export { KjDrawerModalVsNonModalExample } from './drawer.modal-vs-non-modal.example';
+export { KjDrawerScrollableExample } from './drawer.scrollable.example';
+export { KjDrawerSidesExample } from './drawer.sides.example';
+export { KjDrawerUsageExample } from './drawer.usage.example';
+export { KjDrawerWithFormExample } from './drawer.with-form.example';

package/src/drawer/drawer.css

@@ -0,0 +1,130 @@
+@layer kj.component {
+  .kj-drawer {
+    --kj-drawer-bg: var(--kj-bg-elevated);
+    --kj-drawer-fg: var(--kj-fg-default);
+    --kj-drawer-border-color: var(--kj-border-default);
+    --kj-drawer-shadow: var(--kj-shadow-lg);
+    --kj-drawer-size: 22rem;
+
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    background: var(--kj-drawer-bg);
+    color: var(--kj-drawer-fg);
+    box-shadow: var(--kj-drawer-shadow);
+    overflow: hidden;
+    z-index: 1000;
+    box-sizing: border-box;
+    padding: var(--kj-space-lg);
+  }
+
+  .kj-drawer[data-kj-side="right"] {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: min(var(--kj-drawer-size), 100vw);
+    border-left: var(--kj-border) solid var(--kj-drawer-border-color);
+  }
+  .kj-drawer[data-kj-side="left"] {
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: min(var(--kj-drawer-size), 100vw);
+    border-right: var(--kj-border) solid var(--kj-drawer-border-color);
+  }
+  .kj-drawer[data-kj-side="top"] {
+    top: 0;
+    left: 0;
+    right: 0;
+    height: min(var(--kj-drawer-size), 100vh);
+    border-bottom: var(--kj-border) solid var(--kj-drawer-border-color);
+  }
+  .kj-drawer[data-kj-side="bottom"] {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: min(var(--kj-drawer-size), 100vh);
+    border-top: var(--kj-border) solid var(--kj-drawer-border-color);
+  }
+
+  /* Modal scrim — pseudo-element on the portaled wrapper. */
+  [data-kj-drawer-container]::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background: rgb(0 0 0 / 0.5);
+    z-index: 999;
+    pointer-events: auto;
+  }
+  [data-kj-drawer-container]:has(.kj-drawer[role="region"])::before {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .kj-drawer {
+      transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
+    }
+    .kj-drawer[data-state="open"] {
+      transform: translate3d(0, 0, 0);
+    }
+    .kj-drawer[data-kj-side="right"][data-state="closed"]  { transform: translate3d(100%, 0, 0); }
+    .kj-drawer[data-kj-side="left"][data-state="closed"]   { transform: translate3d(-100%, 0, 0); }
+    .kj-drawer[data-kj-side="top"][data-state="closed"]    { transform: translate3d(0, -100%, 0); }
+    .kj-drawer[data-kj-side="bottom"][data-state="closed"] { transform: translate3d(0, 100%, 0); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .kj-drawer {
+      transition: opacity 120ms linear;
+    }
+    .kj-drawer[data-state="open"]   { opacity: 1; }
+    .kj-drawer[data-state="closed"] { opacity: 0; }
+  }
+
+  .kj-drawer-header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: var(--kj-space-lg) var(--kj-space-xl);
+    border-bottom: var(--kj-border) solid var(--kj-border-muted);
+    flex-shrink: 0;
+  }
+  .kj-drawer-header[data-align="center"] { justify-content: center; }
+
+  .kj-drawer-title {
+    display: block;
+    margin: 0;
+    font: 600 1.125rem / 1.3 var(--kj-font-sans);
+    color: var(--kj-fg-default);
+  }
+
+  .kj-drawer-description {
+    display: block;
+    margin: var(--kj-space-xs) 0 0;
+    color: var(--kj-fg-muted);
+    font: 0.875rem / 1.4 var(--kj-font-sans);
+    opacity: 0.8;
+  }
+
+  .kj-drawer-body {
+    flex: 1;
+    color: var(--kj-fg-default);
+    font: 0.9375rem / 1.5 var(--kj-font-sans);
+    min-height: 0;
+  }
+  .kj-drawer-body[data-padded] { padding: var(--kj-space-lg) var(--kj-space-xl); }
+  .kj-drawer-body[data-scroll] { overflow-y: auto; }
+
+  .kj-drawer-footer {
+    display: flex;
+    align-items: center;
+    gap: var(--kj-space-sm);
+    padding: var(--kj-space-lg) var(--kj-space-xl);
+    border-top: var(--kj-border) solid var(--kj-border-muted);
+    flex-shrink: 0;
+  }
+  .kj-drawer-footer[data-align="start"]   { justify-content: flex-start; }
+  .kj-drawer-footer[data-align="center"]  { justify-content: center; }
+  .kj-drawer-footer[data-align="end"]     { justify-content: flex-end; }
+  .kj-drawer-footer[data-align="between"] { justify-content: space-between; }
+}

package/src/drawer/drawer.playground.ts

@@ -0,0 +1,107 @@
+import { ChangeDetectionStrategy, Component, effect, inject, signal } from '@angular/core';
+import { KjDrawer, KjDrawerService } from './drawer';
+import { KjButtonComponent } from '../button/button';
+import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
+
+/**
+ * Playground state — module-scope signals. The `open` toggle drives the
+ * service-launched drawer; the title / message text are picked up by the
+ * drawer body component through module-scope bridges so the live panel
+ * reflects the knob values.
+ */
+const title = signal('Drawer');
+const message = signal('Slide-in side panel — close with Escape or the backdrop.');
+const open = signal(false);
+
+@Component({
+  selector: 'kj-drawer-playground-body',
+  standalone: true,
+  imports: [KjDrawer],
+  template: `
+    <kj-drawer>
+      <h2 style="margin:0 0 var(--kj-space-md)">{{ title() }}</h2>
+      <p>{{ message() }}</p>
+    </kj-drawer>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class KjDrawerPlaygroundBody {
+  protected readonly title = title;
+  protected readonly message = message;
+}
+
+@Component({
+  selector: 'kj-drawer-playground',
+  standalone: true,
+  imports: [KjButtonComponent],
+  styles: [`
+    :host { display: flex; gap: var(--kj-space-lg); align-items: flex-start; min-height: 12rem; }
+    .pg-static {
+      width: 18rem;
+      min-height: 12rem;
+      background: var(--kj-bg-elevated);
+      color: var(--kj-fg-default);
+      border: var(--kj-border) solid var(--kj-border-default);
+      border-radius: var(--kj-radius-box);
+      padding: var(--kj-space-xl);
+      box-shadow: var(--kj-shadow-lg);
+      font: 0.9375rem / 1.5 var(--kj-font-sans);
+    }
+    .pg-static h3 { margin: 0 0 var(--kj-space-md); font-size: 1.125rem; }
+    .pg-static p { margin: 0; color: var(--kj-fg-muted); }
+  `],
+  template: `
+    <kj-button (click)="onOpen()">Open drawer</kj-button>
+    <div class="pg-static" role="dialog" aria-label="Drawer preview">
+      <h3>{{ title() }}</h3>
+      <p>{{ message() }}</p>
+    </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjDrawerPlaygroundDemo {
+  private readonly drawer = inject(KjDrawerService);
+
+  protected readonly title = title;
+  protected readonly message = message;
+  protected readonly open = open;
+
+  constructor() {
+    effect(() => {
+      if (open()) {
+        const ref = this.drawer.open(KjDrawerPlaygroundBody);
+        ref.afterClosed$.subscribe(() => open.set(false));
+      }
+    });
+  }
+
+  protected onOpen(): void {
+    open.set(true);
+  }
+}
+
+export const PLAYGROUND: PlaygroundFile = {
+  component: KjDrawerPlaygroundDemo,
+  state: {
+    title: title as unknown as ReturnType<typeof signal>,
+    message: message as unknown as ReturnType<typeof signal>,
+    open: open as unknown as ReturnType<typeof signal>,
+  },
+  controls: [
+    { kind: 'text', name: 'title', label: 'title' },
+    { kind: 'text', name: 'message', label: 'message' },
+    { kind: 'toggle', name: 'open', label: 'open' },
+  ],
+  snippet: (values) => {
+    const s = values as { title: string; message: string; open: boolean };
+    const lines: string[] = [];
+    lines.push(`<kj-button (click)="open()">Open drawer</kj-button>`);
+    lines.push('');
+    lines.push('// drawer body component');
+    lines.push('<kj-drawer>');
+    lines.push(`  <h2>${s.title}</h2>`);
+    lines.push(`  <p>${s.message}</p>`);
+    lines.push('</kj-drawer>');
+    return lines.join('\n');
+  },
+};

package/src/drawer/drawer.spec.ts

@@ -0,0 +1,216 @@
+import { Component } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+import { KjDrawerTrigger } from '@kouji-ui/core';
+
+import {
+  KjDrawerComponent,
+  KjDrawerHeaderComponent,
+  KjDrawerTitleComponent,
+  KjDrawerDescriptionComponent,
+  KjDrawerBodyComponent,
+  KjDrawerFooterComponent,
+  KjDrawerCloseComponent,
+} from './drawer';
+
+function findContainer(): HTMLElement | null {
+  return document.body.querySelector<HTMLElement>('[data-kj-drawer-container]');
+}
+
+function findPanel(): HTMLElement | null {
+  const c = findContainer();
+  return (
+    c?.querySelector<HTMLElement>('[role="dialog"]')
+    ?? c?.querySelector<HTMLElement>('[role="region"]')
+    ?? null
+  );
+}
+
+function cleanupOverlays(): void {
+  document.body
+    .querySelectorAll<HTMLElement>('[data-kj-drawer-container]')
+    .forEach((el) => el.remove());
+  document.documentElement.style.overflow = '';
+  document.documentElement.style.paddingRight = '';
+}
+
+function flushRaf(): void {
+  vi.advanceTimersByTime(20);
+}
+
+describe('KjDrawerComponent (wrapper)', () => {
+  beforeEach(() => {
+    TestBed.resetTestingModule();
+    TestBed.configureTestingModule({});
+    vi.useFakeTimers({
+      toFake: ['setTimeout', 'clearTimeout', 'requestAnimationFrame', 'cancelAnimationFrame', 'queueMicrotask', 'Date'],
+    });
+  });
+
+  afterEach(() => {
+    cleanupOverlays();
+    vi.useRealTimers();
+  });
+
+  test('renders styled wrapper with role=dialog when modal', () => {
+    @Component({
+      standalone: true,
+      imports: [
+        KjDrawerTrigger,
+        KjDrawerComponent,
+        KjDrawerHeaderComponent,
+        KjDrawerTitleComponent,
+        KjDrawerBodyComponent,
+        KjDrawerFooterComponent,
+      ],
+      template: `
+        <button [kjDrawerTrigger]="dwr">Open</button>
+        <ng-template #dwr>
+          <kj-drawer #d="kjDrawerContent">
+            <kj-drawer-header>
+              <kj-drawer-title>Hello</kj-drawer-title>
+            </kj-drawer-header>
+            <kj-drawer-body>Body</kj-drawer-body>
+            <kj-drawer-footer>
+              <button (click)="d.close()">Close</button>
+            </kj-drawer-footer>
+          </kj-drawer>
+        </ng-template>
+      `,
+    })
+    class Host {}
+
+    const fixture = TestBed.createComponent(Host);
+    fixture.detectChanges();
+    const trigger = fixture.nativeElement.querySelector('button') as HTMLButtonElement;
+    trigger.click();
+    fixture.detectChanges();
+    flushRaf();
+
+    const panel = findPanel();
+    expect(panel).toBeTruthy();
+    expect(panel!.classList.contains('kj-drawer')).toBe(true);
+    expect(panel!.getAttribute('role')).toBe('dialog');
+    expect(panel!.getAttribute('aria-modal')).toBe('true');
+    expect(panel!.getAttribute('data-kj-side')).toBe('right');
+
+    expect(panel!.querySelector('.kj-drawer-header')).toBeTruthy();
+    expect(panel!.querySelector('.kj-drawer-title')).toBeTruthy();
+    expect(panel!.querySelector('.kj-drawer-body')).toBeTruthy();
+    expect(panel!.querySelector('.kj-drawer-footer')).toBeTruthy();
+  });
+
+  test('aria-labelledby is wired through the wrapper title', () => {
+    @Component({
+      standalone: true,
+      imports: [
+        KjDrawerTrigger,
+        KjDrawerComponent,
+        KjDrawerHeaderComponent,
+        KjDrawerTitleComponent,
+        KjDrawerDescriptionComponent,
+        KjDrawerBodyComponent,
+      ],
+      template: `
+        <button [kjDrawerTrigger]="dwr">Open</button>
+        <ng-template #dwr>
+          <kj-drawer>
+            <kj-drawer-header>
+              <kj-drawer-title>Settings</kj-drawer-title>
+            </kj-drawer-header>
+            <kj-drawer-body>
+              <kj-drawer-description>Tweak the knobs.</kj-drawer-description>
+            </kj-drawer-body>
+          </kj-drawer>
+        </ng-template>
+      `,
+    })
+    class Host {}
+
+    const fixture = TestBed.createComponent(Host);
+    fixture.detectChanges();
+    (fixture.nativeElement.querySelector('button') as HTMLButtonElement).click();
+    fixture.detectChanges();
+    flushRaf();
+
+    const panel = findPanel()!;
+    const title = panel.querySelector<HTMLElement>('.kj-drawer-title')!;
+    const desc = panel.querySelector<HTMLElement>('.kj-drawer-description')!;
+    expect(title.id).toMatch(/^kj-drawer-title-\d+$/);
+    expect(desc.id).toMatch(/^kj-drawer-description-\d+$/);
+    expect(panel.getAttribute('aria-labelledby')).toBe(title.id);
+    expect(panel.getAttribute('aria-describedby')).toBe(desc.id);
+  });
+
+  test('kjDrawerClose component closes the drawer', () => {
+    @Component({
+      standalone: true,
+      imports: [
+        KjDrawerTrigger,
+        KjDrawerComponent,
+        KjDrawerTitleComponent,
+        KjDrawerCloseComponent,
+      ],
+      template: `
+        <button [kjDrawerTrigger]="dwr">Open</button>
+        <ng-template #dwr>
+          <kj-drawer>
+            <kj-drawer-title>T</kj-drawer-title>
+            <kj-drawer-close>
+              <button>Dismiss</button>
+            </kj-drawer-close>
+          </kj-drawer>
+        </ng-template>
+      `,
+    })
+    class Host {}
+
+    const fixture = TestBed.createComponent(Host);
+    fixture.detectChanges();
+    (fixture.nativeElement.querySelector('button') as HTMLButtonElement).click();
+    fixture.detectChanges();
+    flushRaf();
+    expect(findPanel()).toBeTruthy();
+
+    const dismiss = Array.from(document.querySelectorAll<HTMLElement>('button'))
+      .find((b) => b.textContent?.trim() === 'Dismiss')!;
+    dismiss.click();
+    fixture.detectChanges();
+    flushRaf();
+    expect(findPanel()).toBeNull();
+  });
+
+  test('non-modal wrapper exposes role=region and skips backdrop close', () => {
+    @Component({
+      standalone: true,
+      imports: [
+        KjDrawerTrigger,
+        KjDrawerComponent,
+        KjDrawerTitleComponent,
+        KjDrawerBodyComponent,
+      ],
+      template: `
+        <button [kjDrawerTrigger]="dwr" [kjModal]="false">Open</button>
+        <ng-template #dwr>
+          <kj-drawer>
+            <kj-drawer-title>Non-modal</kj-drawer-title>
+            <kj-drawer-body>Body</kj-drawer-body>
+          </kj-drawer>
+        </ng-template>
+      `,
+    })
+    class Host {}
+
+    const fixture = TestBed.createComponent(Host);
+    fixture.detectChanges();
+    (fixture.nativeElement.querySelector('button') as HTMLButtonElement).click();
+    fixture.detectChanges();
+    flushRaf();
+
+    const panel = findPanel();
+    expect(panel).toBeTruthy();
+    expect(panel!.getAttribute('role')).toBe('region');
+    expect(panel!.getAttribute('aria-modal')).toBeNull();
+    expect(document.documentElement.style.overflow).toBe('');
+  });
+});

package/src/drawer/drawer.ts

@@ -0,0 +1,85 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+
+export {
+  KjDrawer,
+  KjDrawerService,
+  KjDrawerRef,
+  type KjDrawerOpenOptions,
+  type KjDrawerSide,
+} from '@kouji-ui/core';
+
+/**
+ * Service-launched drawer (edge-anchored panel). Inject `KjDrawerService` and
+ * call `open()` with a template; the drawer absorbs the bottom-sheet pattern
+ * via `kjSide="bottom"` plus drag options. The wrapper exists to host the
+ * documentation page for the drawer suite.
+ *
+ * @doc
+ * @doc-name drawer
+ * @doc-is-main
+ * @doc-example Default
+ *   Service-launched drawer that slides in from the right.
+ *   @doc-file drawer.example.ts
+ * @doc-example Usage
+ *   A walkthrough of the most common drawer usages — open from a button,
+ *   change the slide side, and resolve a result back to the opener.
+ *   @doc-file drawer.usage.example.ts
+ * @doc-example Sides
+ *   `kjSide` toggles between left / right / top / bottom (bottom = sheet).
+ *   @doc-file drawer.sides.example.ts
+ * @doc-example Modal vs non-modal
+ *   Toggle the backdrop / inert posture for full-screen vs companion panels.
+ *   @doc-file drawer.modal-vs-non-modal.example.ts
+ * @doc-example Scrollable
+ *   Long body scrolls inside the panel while the header / footer stay pinned.
+ *   @doc-file drawer.scrollable.example.ts
+ * @doc-example With form
+ *   A reactive form lives inside the panel; submit closes with the value.
+ *   @doc-file drawer.with-form.example.ts
+ *
+ * @doc-keyboard
+ *   Escape    — Closes the drawer (only the topmost overlay when stacked)
+ *   Tab       — Cycles focus within the drawer (focus trap via `tabCycle({ returnFocus: true })`)
+ *   Shift+Tab — Cycles backward
+ *
+ * @doc-aria
+ *   role           — "dialog" by default; an `aria-modal="true"` while backdrop is active
+ *   aria-labelledby — Wire to the heading id when you project one
+ *   aria-describedby — Wire to a description node if the heading is not sufficient
+ *   data-state     — "open" / "closed" — drives the slide-in transform
+ *   data-kj-side   — Mirrors the resolved side for theme/scope hooks
+ *
+ * @doc-css-var
+ *   --kj-drawer-bg            — Panel background fill. Defaults to --kj-bg-elevated.
+ *   --kj-drawer-fg            — Foreground text color. Defaults to --kj-fg-default.
+ *   --kj-drawer-border-color  — Color of the edge-facing border. Defaults to --kj-border-default.
+ *   --kj-drawer-shadow        — Box shadow off the panel. Defaults to --kj-shadow-lg.
+ *   --kj-drawer-size          — Panel width (left/right) or height (top/bottom). Defaults to 22rem.
+ *
+ * @doc-touch
+ *   The panel itself is not a touch target. Header / footer action buttons
+ *   should use `kj-button` `size="lg"` (≥ 44px) per WCAG 2.5.5. Bottom sheets
+ *   (`kjSide="bottom"`) gain a drag handle when `drag: true` is passed.
+ *
+ * @doc-a11y
+ *   Focus is trapped inside the drawer while open and returned to the
+ *   triggering element on close (`returnFocus: true`). Siblings outside the
+ *   drawer are marked `inert` while a modal drawer is open. Stacking is safe —
+ *   only the topmost overlay receives Escape and outside-click. The wrapper
+ *   does not generate an accessible name; provide one via `aria-labelledby`
+ *   (pointing to a visible heading) or `aria-label`.
+ *
+ * @doc-related dialog,popover,confirm-popup
+ *
+ * @doc-category Library/Overlay
+ */
+@Component({
+  selector: 'kj-drawer-shell',
+  standalone: true,
+  template: `<ng-content />`,
+  styleUrl: './drawer.css',
+  encapsulation: ViewEncapsulation.None,
+  host: { style: 'display: contents;' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjDrawerComponent {}

package/src/drawer/index.ts

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

package/src/dropdown-menu/_examples/dropdown-menu.disabled.example.ts

@@ -0,0 +1,19 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjDropdownMenuTrigger, KjDropdownMenuContent, KjDropdownMenuItem } from '@kouji-ui/core';
+import { KjButtonComponent } from '../../button/button';
+
+// TODO(wrapper-overlay): re-skin disabled demo.
+@Component({
+  selector: 'kj-dropdown-menu-disabled-example',
+  standalone: true,
+  imports: [KjDropdownMenuTrigger, KjDropdownMenuContent, KjDropdownMenuItem, KjButtonComponent],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-button kjDropdownMenuTrigger #t="kjDropdownMenuTrigger">Open</kj-button>
+    <kj-dropdown-menu-content [kjFor]="t">
+      <button kjDropdownMenuItem>Enabled</button>
+      <button kjDropdownMenuItem kjDisabled>Disabled</button>
+    </kj-dropdown-menu-content>
+  `,
+})
+export class KjDropdownMenuDisabledExample {}