@kouji-ui/components 0.1.1

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

@@ -0,0 +1,20 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjDropdownMenuTrigger, KjDropdownMenuContent, KjDropdownMenuItem } from '@kouji-ui/core';
+import { KjButtonComponent } from '../../button/button';
+
+// TODO(wrapper-overlay): re-skin via styled wrapper layer.
+@Component({
+  selector: 'kj-dropdown-menu-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>Profile</button>
+      <button kjDropdownMenuItem>Settings</button>
+      <button kjDropdownMenuItem>Logout</button>
+    </kj-dropdown-menu-content>
+  `,
+})
+export class KjDropdownMenuExample {}

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

@@ -0,0 +1,31 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import {
+  KjDropdownMenuTrigger,
+  KjDropdownMenuContent,
+  KjDropdownMenuItem,
+  KjDropdownMenuSeparator,
+} from '@kouji-ui/core';
+import { KjButtonComponent } from '../../button/button';
+
+// TODO(wrapper-overlay): re-skin shortcuts demo.
+@Component({
+  selector: 'kj-dropdown-menu-shortcuts-example',
+  standalone: true,
+  imports: [
+    KjDropdownMenuTrigger,
+    KjDropdownMenuContent,
+    KjDropdownMenuItem,
+    KjDropdownMenuSeparator,
+    KjButtonComponent,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-button kjDropdownMenuTrigger #t="kjDropdownMenuTrigger">Open</kj-button>
+    <kj-dropdown-menu-content [kjFor]="t">
+      <button kjDropdownMenuItem>Save <span>⌘S</span></button>
+      <hr kjDropdownMenuSeparator />
+      <button kjDropdownMenuItem>Quit <span>⌘Q</span></button>
+    </kj-dropdown-menu-content>
+  `,
+})
+export class KjDropdownMenuShortcutsExample {}

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

@@ -0,0 +1,18 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjDropdownMenuTrigger, KjDropdownMenuContent, KjDropdownMenuItem } from '@kouji-ui/core';
+import { KjButtonComponent } from '../../button/button';
+
+// TODO(wrapper-overlay): re-skin sides demo.
+@Component({
+  selector: 'kj-dropdown-menu-sides-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" kjSide="right">
+      <button kjDropdownMenuItem>Item</button>
+    </kj-dropdown-menu-content>
+  `,
+})
+export class KjDropdownMenuSidesExample {}

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

@@ -0,0 +1,56 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import {
+  KjDropdownMenuTrigger,
+  KjDropdownMenuContent,
+  KjDropdownMenuItem,
+  KjDropdownMenuSeparator,
+  KjDropdownMenuLabel,
+} from '@kouji-ui/core';
+import { KjButtonComponent } from '../../button/button';
+
+/**
+ * A walkthrough of the most common dropdown-menu usages — a labelled group of
+ * items with a destructive separator section, and a disabled item.
+ */
+@Component({
+  selector: 'kj-dropdown-menu-usage-example',
+  standalone: true,
+  imports: [
+    KjDropdownMenuTrigger,
+    KjDropdownMenuContent,
+    KjDropdownMenuItem,
+    KjDropdownMenuSeparator,
+    KjDropdownMenuLabel,
+    KjButtonComponent,
+  ],
+  styles: [
+    `
+      :host {
+        display: flex;
+        gap: var(--kj-space-md);
+      }
+      .status {
+        font-size: 0.875rem;
+        color: var(--kj-fg-muted);
+        align-self: center;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-button kjDropdownMenuTrigger #t="kjDropdownMenuTrigger">Account</kj-button>
+    <kj-dropdown-menu-content [kjFor]="t">
+      <span kjDropdownMenuLabel>My account</span>
+      <button kjDropdownMenuItem (click)="last.set('profile')">Profile</button>
+      <button kjDropdownMenuItem (click)="last.set('settings')">Settings</button>
+      <button kjDropdownMenuItem [kjDisabled]="true">Billing (admin only)</button>
+      <hr kjDropdownMenuSeparator />
+      <button kjDropdownMenuItem (click)="last.set('logout')">Logout</button>
+    </kj-dropdown-menu-content>
+
+    <span class="status">Last: {{ last() }}</span>
+  `,
+})
+export class KjDropdownMenuUsageExample {
+  readonly last = signal<string>('—');
+}

package/src/dropdown-menu/_examples/dropdown-menu.with-icons.example.ts

@@ -0,0 +1,31 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import {
+  KjDropdownMenuTrigger,
+  KjDropdownMenuContent,
+  KjDropdownMenuItem,
+  KjDropdownMenuSeparator,
+} from '@kouji-ui/core';
+import { KjButtonComponent } from '../../button/button';
+
+// TODO(wrapper-overlay): re-skin with-icons demo.
+@Component({
+  selector: 'kj-dropdown-menu-with-icons-example',
+  standalone: true,
+  imports: [
+    KjDropdownMenuTrigger,
+    KjDropdownMenuContent,
+    KjDropdownMenuItem,
+    KjDropdownMenuSeparator,
+    KjButtonComponent,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-button kjDropdownMenuTrigger #t="kjDropdownMenuTrigger">Open</kj-button>
+    <kj-dropdown-menu-content [kjFor]="t">
+      <button kjDropdownMenuItem><span>📁</span> Open</button>
+      <hr kjDropdownMenuSeparator />
+      <button kjDropdownMenuItem><span>🚪</span> Quit</button>
+    </kj-dropdown-menu-content>
+  `,
+})
+export class KjDropdownMenuWithIconsExample {}

package/src/dropdown-menu/_examples/dropdown-menu.with-separator.example.ts

@@ -0,0 +1,41 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import {
+  KjDropdownMenuTrigger,
+  KjDropdownMenuContent,
+  KjDropdownMenuItem,
+  KjDropdownMenuSeparator,
+  KjDropdownMenuGroup,
+  KjDropdownMenuLabel,
+} from '@kouji-ui/core';
+import { KjButtonComponent } from '../../button/button';
+
+// TODO(wrapper-overlay): re-skin separator demo.
+@Component({
+  selector: 'kj-dropdown-menu-with-separator-example',
+  standalone: true,
+  imports: [
+    KjDropdownMenuTrigger,
+    KjDropdownMenuContent,
+    KjDropdownMenuItem,
+    KjDropdownMenuSeparator,
+    KjDropdownMenuGroup,
+    KjDropdownMenuLabel,
+    KjButtonComponent,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-button kjDropdownMenuTrigger #t="kjDropdownMenuTrigger">Open</kj-button>
+    <kj-dropdown-menu-content [kjFor]="t">
+      <div kjDropdownMenuGroup>
+        <span kjDropdownMenuLabel>Group A</span>
+        <button kjDropdownMenuItem>One</button>
+      </div>
+      <hr kjDropdownMenuSeparator />
+      <div kjDropdownMenuGroup>
+        <span kjDropdownMenuLabel>Group B</span>
+        <button kjDropdownMenuItem>Two</button>
+      </div>
+    </kj-dropdown-menu-content>
+  `,
+})
+export class KjDropdownMenuWithSeparatorExample {}

package/src/dropdown-menu/_examples/index.ts

@@ -0,0 +1,9 @@
+// AUTO-GENERATED by scripts/migrate-examples.mjs
+// One barrel per component folder — used by the docs app as a lazy chunk.
+export { KjDropdownMenuDisabledExample } from './dropdown-menu.disabled.example';
+export { KjDropdownMenuExample } from './dropdown-menu.example';
+export { KjDropdownMenuShortcutsExample } from './dropdown-menu.shortcuts.example';
+export { KjDropdownMenuSidesExample } from './dropdown-menu.sides.example';
+export { KjDropdownMenuUsageExample } from './dropdown-menu.usage.example';
+export { KjDropdownMenuWithIconsExample } from './dropdown-menu.with-icons.example';
+export { KjDropdownMenuWithSeparatorExample } from './dropdown-menu.with-separator.example';

package/src/dropdown-menu/dropdown-menu.css

@@ -0,0 +1,108 @@
+@layer kj.component {
+  /* The trigger and most wrappers use display: contents — they don't add a
+     box. Theme tokens land on `.kj-dropdown-menu` (the panel), which the
+     directive moves to a body-level container on open so it escapes any
+     clipping ancestor. */
+
+  .kj-dropdown-menu {
+    --kj-dropdown-menu-bg:           var(--kj-bg-elevated);
+    --kj-dropdown-menu-fg:           var(--kj-fg-default);
+    --kj-dropdown-menu-border-color: var(--kj-border-default);
+    --kj-dropdown-menu-radius:       var(--kj-radius-box);
+    --kj-dropdown-menu-padding:      var(--kj-space-xs);
+    --kj-dropdown-menu-shadow:       var(--kj-shadow-md);
+
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    min-width: 12rem;
+    max-width: min(20rem, calc(100vw - 2rem));
+    background: var(--kj-dropdown-menu-bg);
+    color: var(--kj-dropdown-menu-fg);
+    border: var(--kj-border) solid var(--kj-dropdown-menu-border-color);
+    border-radius: var(--kj-dropdown-menu-radius);
+    padding: var(--kj-dropdown-menu-padding);
+    font: 0.875rem / 1.5 var(--kj-font-sans);
+    box-shadow: var(--kj-dropdown-menu-shadow);
+    pointer-events: auto;
+    z-index: 1000;
+  }
+
+  .kj-dropdown-menu[hidden] { display: none; }
+
+  .kj-dropdown-menu-item {
+    --kj-dropdown-menu-item-padding-x: var(--kj-space-md);
+    --kj-dropdown-menu-item-padding-y: var(--kj-space-sm);
+    --kj-dropdown-menu-item-min-height: 2.75rem; /* 44px AAA touch target */
+    --kj-dropdown-menu-item-radius:    var(--kj-radius-field);
+    --kj-dropdown-menu-item-hover-bg:  var(--kj-bg-surface);
+    --kj-dropdown-menu-item-active-bg: var(--kj-bg-field);
+
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--kj-space-sm);
+    width: 100%;
+    min-height: var(--kj-dropdown-menu-item-min-height);
+    box-sizing: border-box;
+    padding: var(--kj-dropdown-menu-item-padding-y) var(--kj-dropdown-menu-item-padding-x);
+    margin: 0;
+    background: transparent;
+    color: inherit;
+    border: none;
+    border-radius: var(--kj-dropdown-menu-item-radius);
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .kj-dropdown-menu-item:hover:not([data-disabled]) {
+    background: var(--kj-dropdown-menu-item-hover-bg);
+  }
+  .kj-dropdown-menu-item:focus-visible {
+    outline: 2px solid var(--kj-bg-primary);
+    outline-offset: -2px;
+  }
+  .kj-dropdown-menu-item[aria-current="true"] {
+    background: var(--kj-dropdown-menu-item-current-bg, var(--kj-bg-field));
+    color: var(--kj-dropdown-menu-item-current-fg, var(--kj-fg-primary));
+    font-weight: 500;
+  }
+  .kj-dropdown-menu-item[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .kj-dropdown-menu-separator {
+    display: block;
+    height: 1px;
+    margin: var(--kj-space-xs) calc(var(--kj-space-xs) * -1);
+    background: color-mix(in oklab, var(--kj-fg-default) 12%, transparent);
+    border: 0;
+  }
+
+  .kj-dropdown-menu-label {
+    display: block;
+    padding: var(--kj-space-xs) var(--kj-space-md);
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--kj-fg-default);
+    opacity: 0.65;
+  }
+
+  .kj-dropdown-menu-group {
+    display: flex;
+    flex-direction: column;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .kj-dropdown-menu {
+      transition: opacity 120ms ease-out, transform 120ms ease-out;
+    }
+    .kj-dropdown-menu[data-state="closed"] { opacity: 0; transform: scale(0.98); }
+    .kj-dropdown-menu[data-state="open"]   { opacity: 1; transform: scale(1); }
+  }
+}

package/src/dropdown-menu/dropdown-menu.playground.ts

@@ -0,0 +1,109 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import {
+  KjDropdownMenuTrigger,
+  KjDropdownMenuContent,
+  KjDropdownMenuItem,
+  KjDropdownMenuSeparator,
+} from './dropdown-menu';
+import { KjButtonComponent } from '../button/button';
+import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
+
+/**
+ * Playground state — module-scope signals. Knobs cover the item count, the
+ * presence of an inline separator, and a disable-second-row toggle so the
+ * keyboard-skip path can be exercised.
+ */
+const itemCount = signal<3 | 4 | 5>(4);
+const showSeparator = signal(true);
+const disableSettings = signal(false);
+
+const ITEMS: ReadonlyArray<string> = ['Profile', 'Settings', 'Team', 'Logout', 'Help'];
+
+@Component({
+  selector: 'kj-dropdown-menu-playground',
+  standalone: true,
+  imports: [
+    KjButtonComponent,
+    KjDropdownMenuTrigger,
+    KjDropdownMenuContent,
+    KjDropdownMenuItem,
+    KjDropdownMenuSeparator,
+  ],
+  styles: [`
+    :host { display: flex; flex-direction: column; min-height: 14rem; align-items: flex-start; gap: var(--kj-space-md); }
+    .kj-dropdown-menu-playground-readout { font: 0.875rem var(--kj-font-sans); color: var(--kj-fg-muted); }
+    .kj-dropdown-menu-playground-readout strong { color: var(--kj-fg-default); font-weight: 600; }
+  `],
+  template: `
+    <kj-button kjDropdownMenuTrigger #t="kjDropdownMenuTrigger">Open menu</kj-button>
+    <kj-dropdown-menu-content [kjFor]="t">
+      @for (item of visibleItems(); track item; let i = $index) {
+        <button
+          kjDropdownMenuItem
+          [kjDisabled]="disableSettings() && item === 'Settings'"
+          (kjSelect)="lastSelected.set(item)"
+        >
+          {{ item }}
+        </button>
+        @if (showSeparator() && i === 0 && visibleItems().length > 1) {
+          <div kjDropdownMenuSeparator></div>
+        }
+      }
+    </kj-dropdown-menu-content>
+
+    <p class="kj-dropdown-menu-playground-readout">
+      Last selected: <strong>{{ lastSelected() ?? '—' }}</strong>
+    </p>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjDropdownMenuPlaygroundDemo {
+  protected readonly itemCount = itemCount;
+  protected readonly showSeparator = showSeparator;
+  protected readonly disableSettings = disableSettings;
+  protected readonly lastSelected = signal<string | null>(null);
+
+  protected visibleItems(): ReadonlyArray<string> {
+    return ITEMS.slice(0, itemCount());
+  }
+}
+
+export const PLAYGROUND: PlaygroundFile = {
+  component: KjDropdownMenuPlaygroundDemo,
+  state: {
+    itemCount: itemCount as unknown as ReturnType<typeof signal>,
+    showSeparator: showSeparator as unknown as ReturnType<typeof signal>,
+    disableSettings: disableSettings as unknown as ReturnType<typeof signal>,
+  },
+  controls: [
+    { kind: 'chips', name: 'itemCount', label: 'items', options: [3, 4, 5] },
+    { kind: 'toggle', name: 'showSeparator', label: 'separator' },
+    { kind: 'toggle', name: 'disableSettings', label: 'disable Settings' },
+  ],
+  snippet: (values) => {
+    const s = values as {
+      itemCount: number;
+      showSeparator: boolean;
+      disableSettings: boolean;
+    };
+    const items = ITEMS.slice(0, s.itemCount);
+    const rows: string[] = [];
+    items.forEach((label, i) => {
+      const disabled = s.disableSettings && label === 'Settings' ? ' [kjDisabled]="true"' : '';
+      rows.push(
+        `  <button kjDropdownMenuItem${disabled} (kjSelect)="lastSelected.set('${label}')">${label}</button>`,
+      );
+      if (s.showSeparator && i === 0 && items.length > 1) {
+        rows.push('  <div kjDropdownMenuSeparator></div>');
+      }
+    });
+    return [
+      '<kj-button kjDropdownMenuTrigger #t="kjDropdownMenuTrigger">Open menu</kj-button>',
+      '<kj-dropdown-menu-content [kjFor]="t">',
+      rows.join('\n'),
+      '</kj-dropdown-menu-content>',
+      '',
+      '<p>Last selected: <strong>{{ lastSelected() ?? \'—\' }}</strong></p>',
+    ].join('\n');
+  },
+};

package/src/dropdown-menu/dropdown-menu.spec.ts

@@ -0,0 +1,5 @@
+import { describe, it } from 'vitest';
+
+describe('KjDropdownMenu (wrapper)', () => {
+  it.todo('rewrite for new overlay API (KjDropdownMenuTrigger / KjDropdownMenuContent primitives)');
+});

package/src/dropdown-menu/dropdown-menu.ts

@@ -0,0 +1,128 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+import {
+  KjDropdownMenuTrigger,
+  KjDropdownMenuContent,
+  KjDropdownMenuItem,
+  KjDropdownMenuSeparator,
+  KjDropdownMenuLabel,
+  KjDropdownMenuGroup,
+} from '@kouji-ui/core';
+
+// Re-exports of the new overlay-primitive dropdown-menu API. Absorbs the
+// context-menu (use `kjTrigger="contextmenu"`) and inline-menu
+// (use `kjMount="inline"`) into a single API surface.
+export {
+  KjDropdownMenuTrigger,
+  KjDropdownMenuContent,
+  KjDropdownMenuItem,
+  KjDropdownMenuSeparator,
+  KjDropdownMenuLabel,
+  KjDropdownMenuGroup,
+  KJ_DROPDOWN_MENU,
+  type KjDropdownMenuContext,
+  type KjDropdownMenuTriggerKind,
+  type KjDropdownMenuMount,
+  type KjDropdownMenuCloseReason,
+} from '@kouji-ui/core';
+
+/**
+ * Dropdown menu suite. Compose `[kjDropdownMenuTrigger]` + `<kj-dropdown-menu-content [kjFor]="t">`
+ * with `[kjDropdownMenuItem]` rows, `[kjDropdownMenuSeparator]` dividers, and
+ * `[kjDropdownMenuLabel]` headings. The wrapper itself only projects content —
+ * its purpose is to host the documentation page for the suite.
+ *
+ * @doc-keyboard
+ *   Enter|Space    — Opens the menu from the trigger; activates the focused menu item when open
+ *   ArrowDown      — Moves focus to the next menu item (roving tabindex)
+ *   ArrowUp        — Moves focus to the previous menu item
+ *   Home           — Moves focus to the first menu item
+ *   End            — Moves focus to the last menu item
+ *   Escape         — Closes the menu and returns focus to the trigger (only the topmost overlay receives Escape when nested)
+ *   Tab            — Closes the menu and continues focus to the next focusable element
+ *
+ * @doc-aria
+ *   aria-haspopup  — set to "menu" on the trigger button
+ *   aria-expanded  — set on the trigger; reflects open/closed state
+ *   aria-controls  — links the trigger to the panel id
+ *   role="menu"    — on the content panel (provided via KJ_OVERLAY_PANEL_ROLE)
+ *   role="menuitem" — on each `[kjDropdownMenuItem]`
+ *   data-disabled  — set on items when [kjDisabled] is true (uses ARIA-disabled, not native, so items stay focusable)
+ *
+ * @doc-css-var
+ *   --kj-dropdown-menu-bg                  — Panel background fill. Defaults to --kj-bg-elevated.
+ *   --kj-dropdown-menu-fg                  — Panel foreground color. Defaults to --kj-fg-default.
+ *   --kj-dropdown-menu-border-color        — Panel border color. Defaults to --kj-border-default.
+ *   --kj-dropdown-menu-radius              — Panel corner radius. Inherits --kj-radius-box.
+ *   --kj-dropdown-menu-padding             — Inner padding of the panel. Defaults to --kj-space-xs.
+ *   --kj-dropdown-menu-shadow              — Box shadow under the panel. Defaults to --kj-shadow-md.
+ *   --kj-dropdown-menu-item-padding-x      — Horizontal padding inside each menu item.
+ *   --kj-dropdown-menu-item-padding-y      — Vertical padding inside each menu item.
+ *   --kj-dropdown-menu-item-min-height     — Minimum row height. 2.75rem keeps WCAG 2.5.5 (44px).
+ *   --kj-dropdown-menu-item-radius         — Per-item corner radius. Inherits --kj-radius-field.
+ *   --kj-dropdown-menu-item-hover-bg       — Hover background fill for items.
+ *   --kj-dropdown-menu-item-active-bg      — Pressed/active background fill for items.
+ *   --kj-dropdown-menu-item-current-bg     — Background fill when aria-current is true.
+ *   --kj-dropdown-menu-item-current-fg     — Foreground color when aria-current is true.
+ *
+ * @doc-touch
+ *   Menu items enforce `min-height: 2.75rem` (44px) via CSS to meet WCAG 2.5.5 — every item is a valid touch target out of the box, regardless of label length.
+ *
+ * @doc-a11y
+ *   The menu follows the WAI-ARIA Menu pattern. Items use a roving tabindex
+ *   inside the panel, so the menu is a single Tab stop. Disabled items use
+ *   ARIA-disabled (not the native attribute) and intercept click events in the
+ *   capture phase — they remain focusable and discoverable. The panel
+ *   portal-mounts to `document.body` by default to escape clipping ancestors;
+ *   use `kjMount="inline"` to keep the panel as a sibling of the trigger when
+ *   you need it inside a transformed/clipped parent. For context-menu use,
+ *   set `kjTrigger="contextmenu"` and `kjMount="point"` to anchor at the pointer
+ *   coordinates rather than the trigger element.
+ *
+ * @doc-related menubar,command-palette,popover
+ *
+ * @doc
+ * @doc-name dropdown-menu
+ * @doc-is-main
+ * @doc-example Default
+ *   A trigger button with a three-row dropdown menu.
+ *   @doc-file dropdown-menu.example.ts
+ * @doc-example Usage
+ *   A walkthrough of the most common dropdown usages — labelled group, a
+ *   separator, and a disabled item.
+ *   @doc-file dropdown-menu.usage.example.ts
+ * @doc-example Sides
+ *   `kjPlacement` flips the panel above / below / start / end the trigger.
+ *   @doc-file dropdown-menu.sides.example.ts
+ * @doc-example With icons
+ *   Each item projects a leading icon next to its label.
+ *   @doc-file dropdown-menu.with-icons.example.ts
+ * @doc-example With separator
+ *   Group related items with `[kjDropdownMenuSeparator]` rules.
+ *   @doc-file dropdown-menu.with-separator.example.ts
+ * @doc-example Shortcuts
+ *   Inline `kbd` chips that mirror the global hotkey for each row.
+ *   @doc-file dropdown-menu.shortcuts.example.ts
+ * @doc-example Disabled
+ *   `[kjDisabled]="true"` keeps the item focusable but blocks activation.
+ *   @doc-file dropdown-menu.disabled.example.ts
+ *
+ * @doc-category Library/Overlay
+ */
+@Component({
+  selector: 'kj-dropdown-menu',
+  standalone: true,
+  imports: [
+    KjDropdownMenuTrigger,
+    KjDropdownMenuContent,
+    KjDropdownMenuItem,
+    KjDropdownMenuSeparator,
+    KjDropdownMenuLabel,
+    KjDropdownMenuGroup,
+  ],
+  template: `<ng-content />`,
+  styleUrl: './dropdown-menu.css',
+  encapsulation: ViewEncapsulation.None,
+  host: { style: 'display: contents;' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjDropdownMenuComponent {}

package/src/dropdown-menu/index.ts

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

package/src/empty-state/_examples/empty-state.error.example.ts

@@ -0,0 +1,63 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import {
+  KjEmptyStateComponent,
+  KjEmptyStateIconComponent,
+  KjEmptyStateTitleComponent,
+  KjEmptyStateDescriptionComponent,
+  KjEmptyStateActionsComponent,
+} from '../empty-state';
+import { KjButtonComponent } from '../../button/button';
+
+/**
+ * Error variant. `kjLive="assertive"` + `kjVariant="error"` → host gains
+ * `role="alert"`; AT announces the failure assertively. Use for runtime
+ * failures the user must act on. For recoverable errors where stale data
+ * is still on screen, prefer a banner alert (planned).
+ */
+@Component({
+  selector: 'kj-empty-state-error-example',
+  standalone: true,
+  imports: [
+    KjEmptyStateComponent,
+    KjEmptyStateIconComponent,
+    KjEmptyStateTitleComponent,
+    KjEmptyStateDescriptionComponent,
+    KjEmptyStateActionsComponent,
+    KjButtonComponent,
+  ],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-empty-state kjVariant="error" kjLive="assertive">
+      <kj-empty-state-icon>
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <circle cx="12" cy="12" r="9" />
+          <path d="M12 8v4" />
+          <path d="M12 16h.01" />
+        </svg>
+      </kj-empty-state-icon>
+      <kj-empty-state-title>We couldn't reach the server</kj-empty-state-title>
+      <kj-empty-state-description
+        >Check your connection and try again. If the problem keeps happening, contact
+        support.</kj-empty-state-description
+      >
+      <kj-empty-state-actions>
+        <kj-button kjVariant="primary">Retry</kj-button>
+      </kj-empty-state-actions>
+    </kj-empty-state>
+  `,
+})
+export class KjEmptyStateErrorExample {}