@tolle_/tolle-ui 18.2.28 → 18.2.30

package/lib/table.component.d.ts

@@ -0,0 +1,106 @@
+import { OnChanges } from '@angular/core';
+import { cn } from './utils/cn';
+import * as i0 from "@angular/core";
+/**
+ * Unstyled table primitives you compose yourself, for when you need full
+ * control over the markup.
+ *
+ * For sorting, paging, selection and column definitions out of the box, use
+ * `tolle-data-table` instead — this is the lower-level building block.
+ *
+ * Everything below the `<table>` is a **directive on the native element**
+ * (`<thead tolleTableHeader>`, `<tr tolleTableRow>`, …) rather than a custom
+ * element. A `<tolle-table-row>` wrapper would sit between `<tbody>` and `<tr>`
+ * and break the CSS table layout, so the directives style the real elements in
+ * place and add no DOM of their own.
+ *
+ * ```html
+ * <tolle-table>
+ *   <thead tolleTableHeader>
+ *     <tr tolleTableRow><th tolleTableHead>Name</th></tr>
+ *   </thead>
+ *   <tbody tolleTableBody>
+ *     <tr tolleTableRow><td tolleTableCell>Ada</td></tr>
+ *   </tbody>
+ * </tolle-table>
+ * ```
+ * @new
+ */
+export declare class TableComponent 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 scrolling container via `cn()` (last-wins). */
+    containerClass: string;
+    /** Extra Tailwind classes merged onto the `<table>` via `cn()` (last-wins). */
+    class: string;
+    protected cn: typeof cn;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TableComponent, "tolle-table", never, { "containerClass": { "alias": "containerClass"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/** Styles a native `<thead>`. */
+export declare class TableHeaderDirective {
+    /** Extra Tailwind classes merged onto the `<thead>` via `cn()` (last-wins). */
+    class: string;
+    protected cn: typeof cn;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableHeaderDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TableHeaderDirective, "[tolleTableHeader]", never, { "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
+}
+/** Styles a native `<tbody>`. */
+export declare class TableBodyDirective {
+    /** Extra Tailwind classes merged onto the `<tbody>` via `cn()` (last-wins). */
+    class: string;
+    protected cn: typeof cn;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableBodyDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TableBodyDirective, "[tolleTableBody]", never, { "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
+}
+/** Styles a native `<tfoot>` for summary or total rows. */
+export declare class TableFooterDirective {
+    /** Extra Tailwind classes merged onto the `<tfoot>` via `cn()` (last-wins). */
+    class: string;
+    protected cn: typeof cn;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableFooterDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TableFooterDirective, "[tolleTableFooter]", never, { "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
+}
+/** Styles a native `<tr>`, with an optional selected state. */
+export declare class TableRowDirective {
+    /** Applies the selected background and sets `data-state="selected"`. @default false */
+    selected: boolean;
+    /** Extra Tailwind classes merged onto the `<tr>` via `cn()` (last-wins). */
+    class: string;
+    protected cn: typeof cn;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableRowDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TableRowDirective, "[tolleTableRow]", never, { "selected": { "alias": "selected"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
+}
+/** Styles a native `<th>` header cell. */
+export declare class TableHeadDirective {
+    /** Scope of the header cell for assistive tech. @default 'col' */
+    scope: 'col' | 'row' | 'colgroup' | 'rowgroup';
+    /** Current sort direction, surfaced as `aria-sort`. @default null */
+    sort: 'ascending' | 'descending' | 'none' | null;
+    /** Extra Tailwind classes merged onto the `<th>` via `cn()` (last-wins). */
+    class: string;
+    protected cn: typeof cn;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableHeadDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TableHeadDirective, "[tolleTableHead]", never, { "scope": { "alias": "scope"; "required": false; }; "sort": { "alias": "sort"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
+}
+/** Styles a native `<td>` data cell. */
+export declare class TableCellDirective {
+    /** Extra Tailwind classes merged onto the `<td>` via `cn()` (last-wins). */
+    class: string;
+    protected cn: typeof cn;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableCellDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TableCellDirective, "[tolleTableCell]", never, { "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
+}
+/** Styles a native `<caption>`, rendered below the table. */
+export declare class TableCaptionDirective {
+    /** Extra Tailwind classes merged onto the `<caption>` via `cn()` (last-wins). */
+    class: string;
+    protected cn: typeof cn;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableCaptionDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TableCaptionDirective, "[tolleTableCaption]", never, { "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/task.component.d.ts

@@ -0,0 +1,151 @@
+import { EventEmitter, OnChanges, OnDestroy, OnInit } from '@angular/core';
+import { type VariantProps } from 'class-variance-authority';
+import * as i0 from "@angular/core";
+/** Lifecycle of a single agent task. */
+export type TaskStatus = 'pending' | 'in-progress' | 'completed' | 'error';
+declare const taskVariants: (props?: ({
+    status?: "error" | "pending" | "in-progress" | "completed" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type TaskProps = VariantProps<typeof taskVariants>;
+/**
+ * Coordinates a `tolle-task` and its trigger/content children.
+ *
+ * The children are `OnPush` and none of the parent's state arrives as their own
+ * inputs, so it is published here as observables and every subscriber calls
+ * `markForCheck()`.
+ */
+export declare class TaskService {
+    private readonly openSource;
+    /** Emits whether the task's content is expanded. */
+    readonly open$: import("rxjs").Observable<boolean>;
+    private readonly statusSource;
+    /** Emits the task's current status. */
+    readonly status$: import("rxjs").Observable<TaskStatus>;
+    private readonly titleSource;
+    /** Emits the task's title. */
+    readonly title$: import("rxjs").Observable<string>;
+    get open(): boolean;
+    get status(): TaskStatus;
+    get title(): string;
+    setOpen(open: boolean): void;
+    toggle(): void;
+    setStatus(status: TaskStatus): void;
+    setTitle(title: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TaskService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<TaskService>;
+}
+/**
+ * A collapsible record of one unit of agent work — a title, a status, and the
+ * individual steps taken, revealed on demand.
+ *
+ * ```html
+ * <tolle-task status="completed" title="Read the codebase" [open]="true">
+ *   <tolle-task-trigger></tolle-task-trigger>
+ *   <tolle-task-content>
+ *     <tolle-task-item>
+ *       Searched <tolle-task-item-file>utils/cn.ts</tolle-task-item-file>
+ *     </tolle-task-item>
+ *   </tolle-task-content>
+ * </tolle-task>
+ * ```
+ * @new
+ */
+export declare class TaskComponent implements OnInit, OnChanges, OnDestroy {
+    private readonly cdr;
+    /** Lifecycle state of the task; drives the icon and border colour. @default 'pending' */
+    status: TaskStatus;
+    /** Title shown by `tolle-task-trigger`. @default '' */
+    title: string;
+    /** Whether the task's content is expanded. @default false */
+    open: boolean;
+    /** Extra Tailwind classes merged onto the task via `cn()` (last-wins). */
+    class: string;
+    /** Emitted with the new expanded state whenever the task opens or closes. */
+    openChange: EventEmitter<boolean>;
+    private readonly service;
+    private readonly sub;
+    ngOnInit(): void;
+    ngOnChanges(): void;
+    ngOnDestroy(): void;
+    private push;
+    get computedClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TaskComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TaskComponent, "tolle-task", never, { "status": { "alias": "status"; "required": false; }; "title": { "alias": "title"; "required": false; }; "open": { "alias": "open"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "openChange": "openChange"; }, never, ["*"], true, never>;
+}
+/** Header row of a `tolle-task`: status icon, title, and the expand chevron. */
+export declare class TaskTriggerComponent implements OnChanges, OnInit, 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;
+    /** Extra Tailwind classes merged onto the trigger via `cn()` (last-wins). */
+    class: string;
+    private readonly service;
+    private readonly cdr;
+    private readonly sub;
+    isOpen: boolean;
+    status: TaskStatus;
+    title: string;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    get iconClass(): string;
+    get computedClass(): string;
+    toggle(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TaskTriggerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TaskTriggerComponent, "tolle-task-trigger", never, { "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/** The body of a `tolle-task`; rendered only while the task is expanded. */
+export declare class TaskContentComponent implements OnChanges, OnInit, 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;
+    /** Extra Tailwind classes merged onto the content via `cn()` (last-wins). */
+    class: string;
+    private readonly service;
+    private readonly cdr;
+    private readonly sub;
+    isOpen: boolean;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    get computedClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TaskContentComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TaskContentComponent, "tolle-task-content", never, { "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/** One line of work inside a `tolle-task-content`. */
+export declare class TaskItemComponent 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 item via `cn()` (last-wins). */
+    class: string;
+    get computedClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TaskItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TaskItemComponent, "tolle-task-item", never, { "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/** An inline file chip, for naming the file a task step touched. */
+export declare class TaskItemFileComponent 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;
+    /** Remixicon class for the leading file glyph. @default 'ri-file-line' */
+    icon: string;
+    /** Extra Tailwind classes merged onto the chip via `cn()` (last-wins). */
+    class: string;
+    get computedClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TaskItemFileComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TaskItemFileComponent, "tolle-task-item-file", never, { "icon": { "alias": "icon"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+export {};

package/lib/theme.service.d.ts

@@ -13,6 +13,15 @@ export declare class ThemeService {
     private chartStyleId;
     constructor(document: Document, platformId: object, config: TolleConfig, rendererFactory: RendererFactory2);
     private initializeTheme;
+    /**
+     * Sets a CSS custom property on an element.
+     *
+     * `Renderer2.setStyle(el, '--x', v)` without `DashCase` compiles to
+     * `el.style['--x'] = v`, which is a silent no-op for custom properties — the
+     * theme control appears to work and simply changes nothing. Every custom
+     * property goes through here so no call site can forget the flag.
+     */
+    private setCssVar;
     /** Set a typography stack (`--font-sans` / `--font-serif` / `--font-mono`). */
     setFont(kind: 'sans' | 'serif' | 'mono', stack: string, persist?: boolean): void;
     /** Read the current stack for a font role from the live document. */

package/lib/time-picker.component.d.ts

@@ -0,0 +1,243 @@
+import { EventEmitter, ElementRef, QueryList, ChangeDetectorRef, OnDestroy, OnInit, OnChanges } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { type VariantProps } from 'class-variance-authority';
+import { cn } from './utils/cn';
+import * as i0 from "@angular/core";
+/** A wall-clock time with no date and no timezone attached. */
+export interface TimeParts {
+    hour: number;
+    minute: number;
+    second: number;
+}
+/** Seconds elapsed since midnight for a wall-clock time. */
+export declare function timePartsToSeconds(parts: TimeParts): number;
+/**
+ * Parses `HH:mm` or `HH:mm:ss` (24-hour). Returns `null` for anything that
+ * is not a well-formed, in-range time — callers treat that as "no value".
+ */
+export declare function parseTimeString(value: string | null | undefined): TimeParts | null;
+/** Renders a wall-clock time as `HH:mm`, or `HH:mm:ss` when `withSeconds`. */
+export declare function formatTimeString(parts: TimeParts, withSeconds?: boolean): string;
+/**
+ * 24-hour hour to its 12-hour clock face. Midnight is `12 AM` and noon is
+ * `12 PM` — the two values that a naive `hour % 12` gets wrong.
+ */
+export declare function to12Hour(hour24: number): {
+    hour12: number;
+    meridiem: 'AM' | 'PM';
+};
+/** 12-hour clock face back to a 24-hour hour. `12 AM` is 0, `12 PM` is 12. */
+export declare function from12Hour(hour12: number, meridiem: 'AM' | 'PM'): number;
+/** Which unit a column of the picker scrolls through. */
+export type TimeColumnKind = 'hour' | 'minute' | 'second' | 'meridiem';
+/** One entry inside a time column. */
+export interface TimeOption {
+    /** Stable identity for `trackBy` and `aria-activedescendant`. */
+    id: string;
+    /** Text shown to the user. */
+    label: string;
+    /**
+     * The 24-hour value this entry commits for its column. For a `meridiem`
+     * column this is the resulting 24-hour *hour*.
+     */
+    raw: number;
+    /** Value used for the selected comparison (clock-face value for hours). */
+    face: number;
+    disabled: boolean;
+}
+/** A scrollable column of the picker. */
+export interface TimeColumn {
+    kind: TimeColumnKind;
+    label: string;
+    options: TimeOption[];
+}
+declare const timeOptionVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | "lg" | null | undefined;
+    selected?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Variant props for the option rows inside a time column. */
+export type TimeColumnsProps = VariantProps<typeof timeOptionVariants>;
+/**
+ * The bare scrollable hour / minute / second / AM-PM columns, with no trigger
+ * and no popover of its own.
+ *
+ * `tolle-time-picker` wraps this in a floating panel, and
+ * `tolle-date-time-picker` sits it beside a calendar — so the option
+ * generation, the min/max disabling and the roving keyboard model live here
+ * once instead of in both.
+ */
+export declare class TimeColumnsComponent implements OnInit, OnChanges {
+    private cdr;
+    /** Selected hour in 24-hour form, or `null` when nothing is chosen yet. @default null */
+    hour: number | null;
+    /** Selected minute, or `null` when nothing is chosen yet. @default null */
+    minute: number | null;
+    /** Selected second, or `null` when nothing is chosen yet. @default null */
+    second: number | null;
+    /** Renders a 12-hour clock face with an AM/PM column. @default false */
+    use12Hours: boolean;
+    /** Adds the seconds column. @default false */
+    showSeconds: boolean;
+    /** Interval between minute entries, in minutes. @default 1 */
+    minuteStep: number;
+    /** Interval between second entries, in seconds. @default 1 */
+    secondStep: number;
+    /** Earliest selectable time, as seconds since midnight. @default 0 */
+    minSeconds: number;
+    /** Latest selectable time, as seconds since midnight. @default 86399 */
+    maxSeconds: number;
+    /** Row height and text size of the entries. @default 'default' */
+    size: TimeColumnsProps['size'];
+    /** Extra Tailwind classes merged onto the column strip via `cn()` (last-wins). */
+    class: string;
+    /** Emitted with the full wall-clock time whenever an entry is chosen. */
+    timeChange: EventEmitter<TimeParts>;
+    listboxes?: QueryList<ElementRef<HTMLElement>>;
+    readonly columnsId: string;
+    /**
+     * Built once per input change rather than read from a getter: a getter would
+     * hand `*ngFor` a fresh array on every change-detection pass, so every row —
+     * each carrying a click handler — would be torn down and rebuilt on every
+     * pass.
+     */
+    columns: TimeColumn[];
+    /** Roving active entry per column, for `aria-activedescendant`. */
+    activeIndex: number[];
+    protected cn: typeof cn;
+    constructor(cdr: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnChanges(): void;
+    get heightClass(): string;
+    private rebuild;
+    /**
+     * True when nothing in `[start, start + span]` falls inside the allowed
+     * window — i.e. picking this entry could not produce a legal time.
+     */
+    private rangeDisabled;
+    private syncActiveToSelection;
+    isSelected(column: TimeColumn, option: TimeOption): boolean;
+    isActive(columnIndex: number, option: TimeOption): boolean;
+    activeDescendantFor(columnIndex: number): string | null;
+    optionClass(column: TimeColumn, option: TimeOption, columnIndex: number): string;
+    /** Commits `option` in its column and emits the resulting whole time. */
+    choose(column: TimeColumn, option: TimeOption, columnIndex: number): void;
+    onColumnKeydown(event: KeyboardEvent, columnIndex: number): void;
+    private moveActive;
+    /** Lands on the first enabled entry at or past `index`, walking `direction`. */
+    private setActive;
+    private focusColumn;
+    /** Focuses the first column — used when the panel opens. */
+    focusFirstColumn(): void;
+    /**
+     * Centres each column on its selected entry. Scrolls the listbox directly
+     * rather than calling `scrollIntoView`, which would also scroll the page
+     * behind a fixed-position panel.
+     */
+    scrollSelectedIntoView(): void;
+    private scrollOptionIntoView;
+    trackColumn: (_: number, column: TimeColumn) => TimeColumnKind;
+    trackOption: (_: number, option: TimeOption) => string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TimeColumnsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TimeColumnsComponent, "tolle-time-columns", never, { "hour": { "alias": "hour"; "required": false; }; "minute": { "alias": "minute"; "required": false; }; "second": { "alias": "second"; "required": false; }; "use12Hours": { "alias": "use12Hours"; "required": false; }; "showSeconds": { "alias": "showSeconds"; "required": false; }; "minuteStep": { "alias": "minuteStep"; "required": false; }; "secondStep": { "alias": "secondStep"; "required": false; }; "minSeconds": { "alias": "minSeconds"; "required": false; }; "maxSeconds": { "alias": "maxSeconds"; "required": false; }; "size": { "alias": "size"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "timeChange": "timeChange"; }, never, never, true, never>;
+}
+declare const timePickerTriggerVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | "lg" | null | undefined;
+    invalid?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Variant props for the time picker trigger. */
+export type TimePickerProps = VariantProps<typeof timePickerTriggerVariants>;
+/**
+ * A trigger that opens scrollable hour / minute / second columns in a floating
+ * panel.
+ *
+ * The value is a **24-hour `HH:mm` string** (or `HH:mm:ss` when `showSeconds`),
+ * regardless of whether the face is rendered as 12-hour — a wall-clock time has
+ * no date and no timezone, and a `Date` would invent both. Set
+ * `valueType="date"` to exchange `Date` objects instead, in which case the time
+ * is written onto today's date (or onto the date already held by the control).
+ *
+ * Implements `ControlValueAccessor`, so it works with `ngModel` and reactive
+ * forms. Use `tolle-date-time-picker` when a date is needed alongside.
+ * @new
+ */
+export declare class TimePickerComponent implements OnChanges, ControlValueAccessor, OnDestroy {
+    private 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;
+    /** Text shown on the trigger when no time is selected. @default 'Select a time' */
+    placeholder: string;
+    /** Disables the control. @default false */
+    disabled: boolean;
+    /** Renders a 12-hour face with an AM/PM column. The emitted value stays 24-hour. @default false */
+    use12Hours: boolean;
+    /** Adds a seconds column and emits `HH:mm:ss`. @default false */
+    showSeconds: boolean;
+    /** Interval between minute entries, in minutes. @default 1 */
+    minuteStep: number;
+    /** Interval between second entries, in seconds. @default 1 */
+    secondStep: number;
+    /** Earliest selectable time as a 24-hour `HH:mm` string; earlier entries are disabled. */
+    min?: string;
+    /** Latest selectable time as a 24-hour `HH:mm` string; later entries are disabled. */
+    max?: string;
+    /** Height and text size of the trigger and entries. @default 'default' */
+    size: TimePickerProps['size'];
+    /** Applies the destructive border and focus ring. @default false */
+    invalid: boolean;
+    /** Accessible name when there is no associated visible label. @default '' */
+    ariaLabel: string;
+    /** Exchange `Date` objects instead of `HH:mm` strings through the form control. @default 'string' */
+    valueType: 'string' | 'date';
+    /** Extra Tailwind classes merged onto the trigger via `cn()` (last-wins). */
+    class: string;
+    /** Emitted with the chosen time whenever it changes. */
+    valueChange: EventEmitter<string | Date | null>;
+    /** Emitted when the panel opens. */
+    opened: EventEmitter<void>;
+    /** Emitted when the panel closes. */
+    closed: EventEmitter<void>;
+    triggerEl?: ElementRef<HTMLElement>;
+    panelEl?: ElementRef<HTMLElement>;
+    columnsCmp?: TimeColumnsComponent;
+    readonly panelId: string;
+    hour: number | null;
+    minute: number | null;
+    second: number | null;
+    isOpen: boolean;
+    protected cn: typeof cn;
+    private cleanup?;
+    /** The date half of a `Date` value, kept so round-tripping does not move the day. */
+    private dateAnchor;
+    private onChange;
+    private onTouched;
+    constructor(cdr: ChangeDetectorRef);
+    private readonly outsideClickHandler;
+    private readonly escapeHandler;
+    /** The current selection as wall-clock parts, or `null` when incomplete. */
+    get parts(): TimeParts | null;
+    get displayValue(): string;
+    get minSeconds(): number;
+    get maxSeconds(): number;
+    get computedTriggerClass(): string;
+    toggle(): void;
+    open(): void;
+    close(): void;
+    onTriggerKeyDown(event: KeyboardEvent): void;
+    onTimeChange(parts: TimeParts): void;
+    private emit;
+    private currentValue;
+    private updatePosition;
+    private teardown;
+    ngOnDestroy(): void;
+    writeValue(value: string | Date | null | undefined): void;
+    registerOnChange(fn: (value: string | Date | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TimePickerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TimePickerComponent, "tolle-time-picker", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "use12Hours": { "alias": "use12Hours"; "required": false; }; "showSeconds": { "alias": "showSeconds"; "required": false; }; "minuteStep": { "alias": "minuteStep"; "required": false; }; "secondStep": { "alias": "secondStep"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "size": { "alias": "size"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "valueType": { "alias": "valueType"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "valueChange": "valueChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+}
+export {};

package/lib/toast.service.d.ts

@@ -1,9 +1,10 @@
 import * as i0 from "@angular/core";
+export type ToastVariant = 'default' | 'destructive' | 'success' | 'warning' | 'info';
 export interface Toast {
     id: number;
     title?: string;
     description: string;
-    variant?: 'default' | 'destructive' | 'success';
+    variant?: ToastVariant;
     duration?: number;
     remainingTime: number;
     isPaused: boolean;
@@ -11,6 +12,7 @@ export interface Toast {
 export type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
 export declare class ToastService {
     private toasts;
+    private nextId;
     private toastSubject;
     toasts$: import("rxjs").Observable<Toast[]>;
     constructor();

package/lib/toaster.component.d.ts

@@ -1,17 +1,34 @@
-import { ToastService, Toast, ToastPosition } from './toast.service';
+import { OnDestroy, OnInit } from '@angular/core';
+import { ToastService, Toast, ToastPosition, ToastVariant } from './toast.service';
 import { cn } from './utils/cn';
 import * as i0 from "@angular/core";
-export declare class ToastContainerComponent {
+export declare class ToastContainerComponent implements OnInit, OnDestroy {
     toastService: ToastService;
+    private elementRef;
     position: ToastPosition;
     toasts$: import("rxjs").Observable<Toast[]>;
-    icons: {
-        destructive: string;
-        success: string;
-        default: string;
-    };
-    getVariantClasses(variant?: string): "border-destructive/50 bg-destructive/10 text-destructive" | "border-success/50 bg-success/10 text-success" | "bg-background text-foreground border-border";
-    getProgressClasses(variant?: string): "bg-primary" | "bg-destructive" | "bg-success";
+    /**
+     * Move the host to <body> so the fixed container is never clipped or
+     * z-index-clamped by a consumer ancestor that creates a stacking context
+     * (transform / filter / backdrop-blur / opacity). Being a direct child of
+     * <body> and sitting above the CDK overlay container keeps toasts on top
+     * of modals, sheets and alert dialogs.
+     */
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    icons: Record<ToastVariant, string>;
+    /**
+     * Border + text only. The toast root always carries an opaque `bg-background`;
+     * the variant colour is applied as a separate tint layer (see `getTintClasses`)
+     * so toasts are never see-through over page content.
+     */
+    private variantClasses;
+    private tintClasses;
+    private progressClasses;
+    private resolve;
+    getVariantClasses(variant?: string): string;
+    getTintClasses(variant?: string): string;
+    getProgressClasses(variant?: string): string;
     get positionClasses(): string;
     protected cn: typeof cn;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToastContainerComponent, never>;