@tolle_/tolle-ui 18.2.29 → 18.3.0

package/lib/multi-select.component.d.ts

@@ -1,44 +1,94 @@
-import { QueryList, AfterContentInit, ElementRef, OnDestroy } from '@angular/core';
+import { EventEmitter, QueryList, AfterContentInit, ElementRef, OnChanges, OnDestroy, ChangeDetectorRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
+import { type VariantProps } from 'class-variance-authority';
 import { SelectItemComponent } from './select-item.component';
 import { SelectService } from './select.service';
 import { cn } from './utils/cn';
 import * as i0 from "@angular/core";
-export declare class MultiSelectComponent implements ControlValueAccessor, AfterContentInit, OnDestroy {
+declare const multiSelectTriggerVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | "lg" | null | undefined;
+    error?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type MultiSelectProps = VariantProps<typeof multiSelectTriggerVariants>;
+/** One chip on the trigger, standing for a selected option. */
+export interface MultiSelectChip {
+    label: string;
+    value: any;
+}
+/**
+ * A multi-select listbox: a trigger that shows the current selection as
+ * removable chips and opens a floating panel of `tolle-select-item` options.
+ * Implements `ControlValueAccessor`, so it works with `ngModel` and reactive
+ * forms.
+ */
+export declare class MultiSelectComponent implements ControlValueAccessor, AfterContentInit, OnChanges, OnDestroy {
     private selectService;
+    private cdr;
+    /** Text shown on the trigger when nothing is selected. @default 'Select options...' */
     placeholder: string;
-    size: 'xs' | 'sm' | 'default' | 'lg';
+    /** Padding and text size of the trigger. @default 'default' */
+    size: MultiSelectProps['size'];
+    /** Adds a search box that filters the projected options. @default false */
     searchable: boolean;
+    /** Disables the control and blocks opening the panel. @default false */
     disabled: boolean;
+    /** Extra Tailwind classes merged onto the trigger via `cn()` (last-wins). @default '' */
     class: string;
+    /** Largest number of values that can be selected at once; leave unset for no cap. */
     maxSelections?: number;
+    /** How many chips to render before collapsing the rest into a "+N more" hint. @default 3 */
     maxDisplayItems: number;
+    /** Applies the destructive border and focus ring. @default false */
     error: boolean;
+    /** Emitted with the full array of selected values whenever the selection changes. */
+    valueChange: EventEmitter<any[]>;
+    /** Emitted when the panel opens. */
+    opened: EventEmitter<void>;
+    /** Emitted when the panel closes. */
+    closed: EventEmitter<void>;
     trigger: ElementRef;
     popover: ElementRef;
     searchInput?: ElementRef<HTMLElement>;
     items: QueryList<SelectItemComponent>;
     value: any[];
-    selectedItems: {
-        label: string;
-        value: any;
-    }[];
+    selectedItems: MultiSelectChip[];
+    /**
+     * The chips actually rendered, built into a field rather than read from a
+     * getter. A getter hands `*ngFor` a freshly-allocated array on every
+     * change-detection pass; paired with the default identity differ that tore
+     * down and rebuilt every badge — including the one under the pointer, whose
+     * destruction re-fires its own remove handler. See `trackChip` below, which
+     * closes the same hole for the rebuilt chip objects `syncItems()` produces.
+     */
+    displayItems: MultiSelectChip[];
+    exceedsDisplayLimit: boolean;
     isOpen: boolean;
     searchQuery: string;
     noResults: boolean;
     private cleanup?;
+    private sub;
     activeIndex: number;
     private typeaheadBuffer;
     private typeaheadTime;
     private pendingTypeaheadChar;
-    constructor(selectService: SelectService);
+    constructor(selectService: SelectService, cdr: ChangeDetectorRef);
     get computedTriggerClass(): string;
     ngAfterContentInit(): void;
-    get displayItems(): {
-        label: string;
-        value: any;
-    }[];
-    get exceedsDisplayLimit(): boolean;
+    /**
+     * `maxDisplayItems` decides how much of the selection is rendered, so the
+     * chip list has to be rebuilt when it changes.
+     *
+     * The `markForCheck()` is not redundant: under OnPush a `[class]` binding is
+     * applied through Angular's *styling* path, which writes the input but —
+     * unlike a plain property binding — never marks the component dirty, so the
+     * trigger would keep rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    /** `*ngFor` identity for the chips — keyed on the option value, not the
+     * wrapper object, which `syncItems()` re-allocates on every sync. */
+    trackChip: (_index: number, chip: MultiSelectChip) => any;
+    private refreshDisplay;
     get selectableItems(): SelectItemComponent[];
     get availableSelections(): number;
     private _outsideClickHandler;
@@ -50,6 +100,7 @@ export declare class MultiSelectComponent implements ControlValueAccessor, After
     selectAll(): void;
     clearAll(): void;
     removeValue(event: MouseEvent, val: any): void;
+    private emitValue;
     private syncItems;
     onSearchChange(q: string): void;
     private get navigableItems();
@@ -76,5 +127,6 @@ export declare class MultiSelectComponent implements ControlValueAccessor, After
     setDisabledState(isDisabled: boolean): void;
     protected cn: typeof cn;
     static ɵfac: i0.ɵɵFactoryDeclaration<MultiSelectComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MultiSelectComponent, "tolle-multi-select", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "size": { "alias": "size"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "class": { "alias": "class"; "required": false; }; "maxSelections": { "alias": "maxSelections"; "required": false; }; "maxDisplayItems": { "alias": "maxDisplayItems"; "required": false; }; "error": { "alias": "error"; "required": false; }; }, {}, ["items"], ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MultiSelectComponent, "tolle-multi-select", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "size": { "alias": "size"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "class": { "alias": "class"; "required": false; }; "maxSelections": { "alias": "maxSelections"; "required": false; }; "maxDisplayItems": { "alias": "maxDisplayItems"; "required": false; }; "error": { "alias": "error"; "required": false; }; }, { "valueChange": "valueChange"; "opened": "opened"; "closed": "closed"; }, ["items"], ["*"], true, never>;
 }
+export {};

package/lib/native-select.component.d.ts

@@ -0,0 +1,57 @@
+import { EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { type VariantProps } from 'class-variance-authority';
+import * as i0 from "@angular/core";
+declare const nativeSelectVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | "lg" | null | undefined;
+    invalid?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type NativeSelectProps = VariantProps<typeof nativeSelectVariants>;
+export type NativeSelectOption = {
+    label: string;
+    value: any;
+    disabled?: boolean;
+};
+/**
+ * A styled native `<select>`. Unlike `tolle-select` it uses the platform
+ * dropdown, so it needs no portal or floating-ui and works well on mobile and
+ * inside forms that must degrade without JavaScript.
+ *
+ * Options come from `options`, or from projected `<option>` elements when you
+ * need `<optgroup>` or custom markup.
+ * @new
+ */
+export declare class NativeSelectComponent implements ControlValueAccessor {
+    private cdr;
+    /** Id applied to the underlying `<select>`; pair it with a `tolle-label`. */
+    id: string;
+    /** Options to render. Omit and project `<option>` elements for custom markup. @default [] */
+    options: NativeSelectOption[];
+    /** Non-selectable prompt shown when no value is set. @default '' */
+    placeholder: string;
+    /** Height and text size of the control. @default 'default' */
+    size: NativeSelectProps['size'];
+    /** Applies the destructive border and sets `aria-invalid`. @default false */
+    invalid: boolean;
+    /** Disables the control. @default false */
+    disabled: boolean;
+    /** Accessible name when there is no associated visible label. @default '' */
+    ariaLabel: string;
+    /** Extra Tailwind classes merged onto the `<select>` via `cn()` (last-wins). */
+    class: string;
+    /** Emitted with the newly selected value whenever the user picks an option. */
+    valueChange: EventEmitter<any>;
+    value: any;
+    onChange: (value: any) => void;
+    onTouched: () => void;
+    constructor(cdr: ChangeDetectorRef);
+    get computedClass(): string;
+    onSelectChange(event: Event): void;
+    writeValue(value: any): void;
+    registerOnChange(fn: (value: any) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NativeSelectComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NativeSelectComponent, "tolle-native-select", never, { "id": { "alias": "id"; "required": false; }; "options": { "alias": "options"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "size": { "alias": "size"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "valueChange": "valueChange"; }, never, ["*"], true, never>;
+}
+export {};

package/lib/navigation-menu.component.d.ts

@@ -0,0 +1,230 @@
+import { ElementRef, EventEmitter, OnDestroy, OnInit, OnChanges } from '@angular/core';
+import { type VariantProps } from 'class-variance-authority';
+import { cn } from './utils/cn';
+import * as i0 from "@angular/core";
+/**
+ * Coordinates the items of a single `tolle-navigation-menu`. Provided by
+ * `NavigationMenuComponent`, injected by its descendants.
+ *
+ * Closing is deferred by `closeDelay` so a pointer travelling diagonally from a
+ * trigger into its panel does not dismiss the menu mid-flight; re-entering
+ * either surface calls `cancelClose()` and the pending close is dropped.
+ */
+export declare class NavigationMenuService {
+    private openIdSource;
+    /** Emits the id of the currently open item, or `null` when all are closed. */
+    readonly openId$: import("rxjs").Observable<string | null>;
+    /** Milliseconds to wait before closing after the pointer leaves. */
+    closeDelay: number;
+    private closeTimer;
+    /** Id of the open item, or `null`. */
+    get openId(): string | null;
+    /** True while any panel is open. */
+    get isAnyOpen(): boolean;
+    /** True while a deferred close is pending — exposed for tests/diagnostics. */
+    get isCloseScheduled(): boolean;
+    isOpen(id: string): boolean;
+    /** Opens an item immediately and cancels any pending close. */
+    open(id: string): void;
+    /** Closes immediately, dropping any pending close. */
+    closeNow(): void;
+    /** Queues a close in `closeDelay` ms; a later `open`/`cancelClose` wins. */
+    scheduleClose(): void;
+    /** Drops a pending close (pointer came back). */
+    cancelClose(): void;
+    toggle(id: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NavigationMenuService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<NavigationMenuService>;
+}
+declare const navigationMenuVariants: (props?: ({
+    align?: "start" | "end" | "center" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type NavigationMenuProps = VariantProps<typeof navigationMenuVariants>;
+declare const navigationMenuTriggerVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type NavigationMenuTriggerProps = VariantProps<typeof navigationMenuTriggerVariants>;
+declare const navigationMenuLinkVariants: (props?: ({
+    variant?: "default" | "muted" | null | undefined;
+    active?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type NavigationMenuLinkProps = VariantProps<typeof navigationMenuLinkVariants>;
+/**
+ * Site navigation menu: a row of links and triggers, where each trigger reveals
+ * a floating panel on hover, focus or click.
+ *
+ * ```html
+ * <tolle-navigation-menu>
+ *   <tolle-navigation-menu-list>
+ *     <tolle-navigation-menu-item>
+ *       <tolle-navigation-menu-trigger>Products</tolle-navigation-menu-trigger>
+ *       <tolle-navigation-menu-content class="w-[420px]">
+ *         <tolle-navigation-menu-link href="/analytics">Analytics</tolle-navigation-menu-link>
+ *       </tolle-navigation-menu-content>
+ *     </tolle-navigation-menu-item>
+ *   </tolle-navigation-menu-list>
+ * </tolle-navigation-menu>
+ * ```
+ * @new
+ */
+export declare class NavigationMenuComponent implements OnChanges, OnInit, OnDestroy {
+    private readonly cdr;
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    /** Horizontal alignment of the list within the nav. @default 'center' */
+    align: NavigationMenuProps['align'];
+    /** Accessible name for the `<nav>` landmark. @default 'Main' */
+    ariaLabel: string;
+    /**
+     * Milliseconds before a panel closes after the pointer leaves — the grace
+     * period that lets the pointer travel diagonally into the panel. @default 150
+     */
+    set closeDelay(value: number);
+    get closeDelay(): number;
+    /** Extra Tailwind classes merged onto the `<nav>` via `cn()` (last-wins). */
+    class: string;
+    /** Emitted with the id of the item that opened, or `null` when the menu closes. */
+    openChange: EventEmitter<string | null>;
+    private readonly service;
+    private readonly host;
+    private readonly sub;
+    private listening;
+    protected get computedClass(): string;
+    ngOnInit(): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    private outsideClick;
+    private startListening;
+    private stopListening;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NavigationMenuComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NavigationMenuComponent, "tolle-navigation-menu", never, { "align": { "alias": "align"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "closeDelay": { "alias": "closeDelay"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "openChange": "openChange"; }, never, ["*"], true, never>;
+}
+/** The horizontal list that holds the navigation items. */
+export declare class NavigationMenuListComponent implements OnChanges {
+    private readonly cdr;
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    /** Extra Tailwind classes merged onto the `<ul>` via `cn()` (last-wins). */
+    class: string;
+    protected readonly cn: typeof cn;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NavigationMenuListComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NavigationMenuListComponent, "tolle-navigation-menu-list", never, { "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/** One entry in the list — a plain link, or a trigger plus its content panel. */
+export declare class NavigationMenuItemComponent implements OnChanges, OnDestroy {
+    private readonly cdr;
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    /** Explicit id for the item; one is generated when omitted. */
+    id: string;
+    /** Extra Tailwind classes merged onto the `<li>` via `cn()` (last-wins). */
+    class: string;
+    readonly service: NavigationMenuService;
+    protected readonly cn: typeof cn;
+    triggerElement: HTMLElement | null;
+    get triggerId(): string;
+    get contentId(): string;
+    get isOpen(): boolean;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NavigationMenuItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NavigationMenuItemComponent, "tolle-navigation-menu-item", never, { "id": { "alias": "id"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/** Button that reveals its item's panel on hover, focus or click. */
+export declare class NavigationMenuTriggerComponent implements OnChanges, OnDestroy {
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    /** Prevents the panel from opening. @default false */
+    disabled: boolean;
+    /** Height/padding scale of the trigger. @default 'default' */
+    size: NavigationMenuTriggerProps['size'];
+    /** Extra Tailwind classes merged onto the trigger via `cn()` (last-wins). */
+    class: string;
+    protected readonly item: NavigationMenuItemComponent;
+    private readonly service;
+    private readonly cdr;
+    private readonly sub;
+    constructor();
+    set triggerRef(ref: ElementRef<HTMLButtonElement> | undefined);
+    protected get isOpen(): boolean;
+    protected get computedClass(): string;
+    protected onClick(): void;
+    protected onPointerEnter(): void;
+    protected onPointerLeave(): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NavigationMenuTriggerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NavigationMenuTriggerComponent, "tolle-navigation-menu-trigger", never, { "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/** The floating panel revealed by a trigger. Rendered only while open. */
+export declare class NavigationMenuContentComponent implements OnChanges, OnDestroy {
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    /** Preferred side of the trigger to render on; flips when space is tight. @default 'bottom' */
+    placement: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';
+    /** Gap in pixels between the trigger and the panel. @default 8 */
+    sideOffset: number;
+    /** Extra Tailwind classes merged onto the panel via `cn()` (last-wins). */
+    class: string;
+    protected readonly item: NavigationMenuItemComponent;
+    private readonly service;
+    private readonly cdr;
+    private readonly sub;
+    private cleanup?;
+    constructor();
+    set panelRef(ref: ElementRef<HTMLElement> | undefined);
+    protected get isOpen(): boolean;
+    protected get computedClass(): string;
+    protected onPointerEnter(): void;
+    protected onPointerLeave(): void;
+    private startPositioning;
+    private stopPositioning;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NavigationMenuContentComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NavigationMenuContentComponent, "tolle-navigation-menu-content", never, { "placement": { "alias": "placement"; "required": false; }; "sideOffset": { "alias": "sideOffset"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/** A link inside a panel (or directly in the list, for flat entries). */
+export declare class NavigationMenuLinkComponent implements OnChanges {
+    private readonly cdr;
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    /** Destination URL. Omit to render a non-navigating item. */
+    href: string;
+    /** Anchor target; `_blank` also sets a safe `rel`. */
+    target: string;
+    /** Marks the link as the current page. @default false */
+    active: boolean;
+    /** Visual style of the link. @default 'default' */
+    variant: NavigationMenuLinkProps['variant'];
+    /** Extra Tailwind classes merged onto the anchor via `cn()` (last-wins). */
+    class: string;
+    /** Emitted with the click event when the link is activated. */
+    navigate: EventEmitter<MouseEvent>;
+    protected get computedClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NavigationMenuLinkComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NavigationMenuLinkComponent, "tolle-navigation-menu-link", never, { "href": { "alias": "href"; "required": false; }; "target": { "alias": "target"; "required": false; }; "active": { "alias": "active"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "navigate": "navigate"; }, never, ["[label]", "*", "[description]"], true, never>;
+}
+export {};

package/lib/plan.component.d.ts

@@ -0,0 +1,120 @@
+import { EventEmitter, OnChanges, OnDestroy, OnInit } from '@angular/core';
+import { type VariantProps } from 'class-variance-authority';
+import * as i0 from "@angular/core";
+/** Progress of a single step in an agent plan. */
+export type PlanStepStatus = 'pending' | 'active' | 'done' | 'skipped';
+/** How far through the plan the agent is. */
+export interface PlanProgress {
+    /** 1-based position of the step being worked on, or of the last finished one. */
+    current: number;
+    /** Number of registered steps. */
+    total: number;
+}
+declare const planVariants: (props?: ({
+    size?: "default" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type PlanProps = VariantProps<typeof planVariants>;
+declare const planStepVariants: (props?: ({
+    status?: "active" | "pending" | "done" | "skipped" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type PlanStepProps = VariantProps<typeof planStepVariants>;
+/**
+ * Coordinates a `tolle-plan` and its steps: assigns each step its number and
+ * derives the "Step N of M" summary.
+ *
+ * The header is `OnPush` and the step count is not one of its inputs, so the
+ * summary is published as an observable and every subscriber calls
+ * `markForCheck()`.
+ */
+export declare class PlanService {
+    private readonly statuses;
+    private readonly order;
+    private readonly progressSource;
+    /** Emits the plan's current position and step count. */
+    readonly progress$: import("rxjs").Observable<PlanProgress>;
+    private readonly collapsedSource;
+    /** Emits whether the plan is showing only its summary row. */
+    readonly collapsed$: import("rxjs").Observable<boolean>;
+    get progress(): PlanProgress;
+    get collapsed(): boolean;
+    setCollapsed(collapsed: boolean): void;
+    toggleCollapsed(): void;
+    /** Registers a step and returns its 1-based number. */
+    register(id: string, status: PlanStepStatus): number;
+    setStatus(id: string, status: PlanStepStatus): void;
+    unregister(id: string): void;
+    /**
+     * "Current" is the first step still in flight — the active one if there is
+     * one, otherwise however many have already been resolved.
+     */
+    private recompute;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PlanService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<PlanService>;
+}
+/**
+ * An ordered plan the agent intends to work through. Each `tolle-plan-step`
+ * numbers itself and joins the connector line; collapsing the plan swaps the
+ * steps for a single "Step N of M" summary.
+ *
+ * ```html
+ * <tolle-plan title="Migration plan">
+ *   <tolle-plan-step label="Read the schema" status="done"></tolle-plan-step>
+ *   <tolle-plan-step label="Write the migration" status="active"></tolle-plan-step>
+ *   <tolle-plan-step label="Run it" status="pending"></tolle-plan-step>
+ * </tolle-plan>
+ * ```
+ * @new
+ */
+export declare class PlanComponent implements OnInit, OnChanges, OnDestroy {
+    /** Heading shown above the steps. @default 'Plan' */
+    title: string;
+    /** Shows only the header and its "Step N of M" summary. @default false */
+    collapsed: boolean;
+    /** Lets the user collapse and expand the plan by clicking the header. @default true */
+    collapsible: boolean;
+    /** Padding and text scale of the plan. @default 'default' */
+    size: PlanProps['size'];
+    /** Extra Tailwind classes merged onto the plan via `cn()` (last-wins). */
+    class: string;
+    /** Emitted with the new collapsed state when the header is toggled. */
+    collapsedChange: EventEmitter<boolean>;
+    private readonly service;
+    private readonly cdr;
+    private readonly sub;
+    isCollapsed: boolean;
+    progress: PlanProgress;
+    ngOnInit(): void;
+    ngOnChanges(): void;
+    ngOnDestroy(): void;
+    /** The compact "Step N of M" label, empty until at least one step registers. */
+    get summary(): string;
+    get computedClass(): string;
+    get headerClass(): string;
+    toggle(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PlanComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PlanComponent, "tolle-plan", never, { "title": { "alias": "title"; "required": false; }; "collapsed": { "alias": "collapsed"; "required": false; }; "collapsible": { "alias": "collapsible"; "required": false; }; "size": { "alias": "size"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "collapsedChange": "collapsedChange"; }, never, ["*"], true, never>;
+}
+/** One numbered step of a `tolle-plan`. */
+export declare class PlanStepComponent implements OnInit, OnChanges, OnDestroy {
+    /** What this step does. @default '' */
+    label: string;
+    /** Supporting detail shown under the label. @default '' */
+    description: string;
+    /** Progress of this step; drives the badge colour and glyph. @default 'pending' */
+    status: PlanStepStatus;
+    /** Extra Tailwind classes merged onto the step via `cn()` (last-wins). */
+    class: string;
+    private readonly service;
+    private readonly id;
+    /** 1-based position of this step, assigned on registration. */
+    index: number;
+    ngOnInit(): void;
+    ngOnChanges(): void;
+    ngOnDestroy(): void;
+    get computedClass(): string;
+    get badgeClass(): string;
+    get labelClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PlanStepComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PlanStepComponent, "tolle-plan-step", never, { "label": { "alias": "label"; "required": false; }; "description": { "alias": "description"; "required": false; }; "status": { "alias": "status"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+export {};

package/lib/popover.component.d.ts

@@ -9,6 +9,7 @@ export declare class PopoverComponent implements OnDestroy {
     isOpen: boolean;
     private cleanup?;
     private _outsideClickHandler;
+    private _escapeHandler;
     toggle(): void;
     open(): void;
     close(): void;