@kouji-ui/components 0.1.1 → 0.1.2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,63 +0,0 @@
-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 {}