Popover changelog

Every version of Popover, newest first. Update with npx @ndop/cli update popover; it keeps your edits.

Preview an update

Paste your copy of the file to see what updating it to 1.0.0 would do.

1.0.0 Latest

Stable release; no code changes since 0.2.0.

0.2.0

Every part of the item is now its own directive without the Nd prefix, which is kept for the headless primitives. Renames NdPopover to Popover, NdPopoverClose to PopoverClose, NdPopoverPortal to PopoverPortal and NdPopoverTrigger to PopoverTrigger. Selectors and inputs are unchanged, and ndop update renames the imports and their uses in your code.

What `ndop update` does from 0.1.3

Updates {ui}/popover/popover.ts, keeping your edits.
Renames NdPopover to Popover where your code imports it.
Renames NdPopoverClose to PopoverClose where your code imports it.
Renames NdPopoverPortal to PopoverPortal where your code imports it.
Renames NdPopoverTrigger to PopoverTrigger where your code imports it.

{ui}/popover/popover.ts

} from '@ndop/primitives/popover';
import { cn } from '@/lib/utils';

export { NdPopover, NdPopoverClose, NdPopoverPortal, NdPopoverTrigger };
/**
 * A popover (`@ndop/primitives/popover`): rich content anchored to its
 * trigger, opened and closed with it. Put it on an `ng-container`; `open`
 * is two-way bindable.
 *
 * @example
 * ```html
 * <ng-container ndPopover>…</ng-container>
 * ```
 */
@Directive({
  selector: '[ndPopover]',
  hostDirectives: [
    {
      directive: NdPopover,
      inputs: ['open', 'defaultOpen'],
      outputs: ['openChange'],
    },
  ],
})
export class Popover {}

/**
 * The button that opens and closes its popover.
 *
 * @example
 * ```html
 * <button ndButton variant="outline" ndPopoverTrigger>Filters</button>
 * ```
 */
@Directive({
  selector: '[ndPopoverTrigger]',
  hostDirectives: [NdPopoverTrigger],
  host: { 'data-slot': 'popover-trigger' },
})
export class PopoverTrigger {}

/**
 * Marks the `ng-template` its popover renders while open.
 *
 * @example
 * ```html
 * <ng-template ndPopoverPortal>…</ng-template>
 * ```
 */
@Directive({
  selector: 'ng-template[ndPopoverPortal]',
  hostDirectives: [NdPopoverPortal],
})
export class PopoverPortal {}

/**
 * A button that closes its popover.
 *
 * @example
 * ```html
 * <button ndButton ndPopoverClose>Done</button>
 * ```
 */
@Directive({
  selector: '[ndPopoverClose]',
  hostDirectives: [NdPopoverClose],
  host: { 'data-slot': 'popover-close' },
})
export class PopoverClose {}

/**
 * The popover panel, placed next to its trigger.
 *
 * @example

0.1.3

Lists the item under Overlays in the docs. The files are unchanged.

0.1.2

Removes the source notice at the top of popover.ts. The credit for the shadcn/ui styles it was based on is on the docs site instead.

What `ndop update` does from 0.1.1

Updates {ui}/popover/popover.ts, keeping your edits.

{ui}/popover/popover.ts

/*
 * Styles from shadcn/ui new-york-v4 "popover" (MIT License, Copyright (c)
 * 2023 shadcn), copied on 2026-10-02 (ADR-0014). Changes:
 * - data-[side=left|right] become data-[side=start|end] with
 *   slide-in-from-end|start: Ndop sides are logical (RFC-0001);
 * - origin-(--radix-popover-content-transform-origin) is dropped: the CDK
 *   overlay sets no such variable;
 * - no PopoverAnchor: the trigger is always the anchor;
 * - exit animations don't play, as for Dialog.
 */
import { computed, Directive, input } from '@angular/core';
import {
  NdPopover,

0.1.1

Points the item at its API metadata, metadata/popover.json, which the docs and the MCP server read. The files are unchanged.

0.1.0

First release.

What `ndop update` does

Adds {ui}/popover/popover.ts.
Installs @ndop/primitives.
Installs the utils item.