@tolle_/tolle-ui 18.2.29 → 18.2.30

package/lib/message-scroller.component.d.ts

@@ -0,0 +1,159 @@
+import { EventEmitter, AfterViewInit, OnInit, OnDestroy, OnChanges } from '@angular/core';
+import { cn } from './utils/cn';
+import { ScrollStartPosition } from './message-scroller.service';
+import * as i0 from "@angular/core";
+/**
+ * A scroll container built for conversations, where content streams in while
+ * the reader is still reading.
+ *
+ * A plain overflow-scroll div gets this wrong in both directions: it either
+ * pins to the bottom and yanks the page mid-sentence, or it never follows and
+ * the reader misses the reply. This handles the cases that are easy to get
+ * wrong — following the live edge only while the reader is already there,
+ * opening a saved thread at the newest turn rather than the absolute end, and
+ * holding position when older history loads in above.
+ *
+ * ```html
+ * <tolle-message-scroller startPosition="last-anchor">
+ *   <tolle-message-scroller-viewport>
+ *     <tolle-message-scroller-content>
+ *       <div tolleMessageScrollerItem [scrollAnchor]="turn.isNewTurn" *ngFor="let turn of turns">
+ *         …
+ *       </div>
+ *     </tolle-message-scroller-content>
+ *   </tolle-message-scroller-viewport>
+ *   <tolle-message-scroller-button />
+ * </tolle-message-scroller>
+ * ```
+ * @new
+ */
+export declare class MessageScrollerComponent 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;
+    /**
+     * Where to land when the transcript first renders. `last-anchor` opens at the
+     * newest turn so a long answer starts from its first line.
+     * @default 'last-anchor'
+     */
+    startPosition: ScrollStartPosition;
+    /**
+     * Pixels of the previous turn kept visible above an anchored turn, so the
+     * reader can see what the reply is responding to. @default 48
+     */
+    scrollPreviousItemPeek: number;
+    /**
+     * Distance from the bottom, in px, still treated as the live edge.
+     * @default 32
+     */
+    threshold: number;
+    /** Extra Tailwind classes merged onto the frame via `cn()` (last-wins). */
+    class: string;
+    /** Emitted when the reader arrives at, or leaves, the live edge. */
+    atBottomChange: EventEmitter<boolean>;
+    private readonly service;
+    private readonly sub;
+    protected cn: typeof cn;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /** Jumps to the newest content and resumes following. */
+    scrollToBottom(behavior?: ScrollBehavior): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MessageScrollerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageScrollerComponent, "tolle-message-scroller", never, { "startPosition": { "alias": "startPosition"; "required": false; }; "scrollPreviousItemPeek": { "alias": "scrollPreviousItemPeek"; "required": false; }; "threshold": { "alias": "threshold"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "atBottomChange": "atBottomChange"; }, never, ["*"], true, never>;
+}
+/**
+ * The scrolling element. Watches its own size and its content's size so it can
+ * follow streamed text and hold position when history is prepended.
+ */
+export declare class MessageScrollerViewportComponent implements OnChanges, AfterViewInit, 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;
+    /** Extra Tailwind classes merged onto the viewport via `cn()` (last-wins). */
+    class: string;
+    private readonly service;
+    private readonly scroller;
+    private readonly host;
+    private readonly zone;
+    private viewportEl;
+    private resizeObserver?;
+    private mutationObserver?;
+    private onScroll;
+    /** scrollHeight captured before each DOM mutation, to detect prepends. */
+    private lastScrollHeight;
+    private lastScrollTop;
+    protected cn: typeof cn;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Distinguishes content appended below (stream) from content inserted above
+     * (history). Growth while the reader has NOT moved but the scrollable area
+     * above them has, means a prepend — restore their position rather than let
+     * the view lurch.
+     */
+    private afterMutation;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MessageScrollerViewportComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageScrollerViewportComponent, "tolle-message-scroller-viewport", never, { "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/** The transcript itself. Announced politely so streamed replies reach screen readers. */
+export declare class MessageScrollerContentComponent 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 transcript via `cn()` (last-wins). */
+    class: string;
+    protected cn: typeof cn;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MessageScrollerContentComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageScrollerContentComponent, "tolle-message-scroller-content", never, { "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * Marks one row of the transcript. Set `scrollAnchor` on the row that begins a
+ * conversation turn so `startPosition="last-anchor"` can open there.
+ */
+export declare class MessageScrollerItemDirective implements OnInit, OnDestroy {
+    /** Marks this row as the start of a turn. @default false */
+    scrollAnchor: boolean;
+    private readonly service;
+    private readonly host;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /** Brings this row into view — use for jump-to-message. */
+    scrollIntoView(behavior?: ScrollBehavior): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MessageScrollerItemDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MessageScrollerItemDirective, "[tolleMessageScrollerItem]", never, { "scrollAnchor": { "alias": "scrollAnchor"; "required": false; }; }, {}, never, never, true, never>;
+}
+/** Floating "jump to latest" control. Hidden while the reader is already at the edge. */
+export declare class MessageScrollerButtonComponent 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;
+    /** Accessible name for the jump control. @default 'Jump to latest messages' */
+    ariaLabel: string;
+    /** Extra Tailwind classes merged onto the button via `cn()` (last-wins). */
+    class: string;
+    private readonly service;
+    private readonly cdr;
+    private readonly sub;
+    atBottom: boolean;
+    protected cn: typeof cn;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    jump(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MessageScrollerButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageScrollerButtonComponent, "tolle-message-scroller-button", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

package/lib/message-scroller.service.d.ts

@@ -0,0 +1,73 @@
+import * as i0 from "@angular/core";
+/** Where a freshly-mounted scroller should start. */
+export type ScrollStartPosition = 'top' | 'bottom' | 'last-anchor';
+/**
+ * Scroll state for one `tolle-message-scroller`, shared with its viewport,
+ * items and buttons.
+ *
+ * The governing rule is: **never move the reader against their intent.** Every
+ * automatic scroll here is gated on the reader already being at the live edge.
+ * The moment they scroll up, auto-scroll switches off and stays off until they
+ * come back down or explicitly jump.
+ *
+ * Positions are read from and written to the DOM directly rather than mirrored
+ * into component state — scroll events fire far too often to run change
+ * detection on, and the values would be stale by the time they landed.
+ */
+export declare class MessageScrollerService {
+    /** The scrollable element, set by the viewport once it renders. */
+    private viewport;
+    /** Rows registered as the start of a conversation turn, in DOM order. */
+    private anchors;
+    private readonly atBottomSubject;
+    /** True while the reader is at (or within `threshold` of) the live edge. */
+    readonly atBottom$: import("rxjs").Observable<boolean>;
+    private readonly followingSubject;
+    /**
+     * True while new content should pull the view along. Set false the instant
+     * the reader scrolls away from the bottom.
+     */
+    readonly following$: import("rxjs").Observable<boolean>;
+    /** Distance from the bottom, in px, still considered "at the live edge". */
+    threshold: number;
+    get atBottom(): boolean;
+    get isFollowing(): boolean;
+    registerViewport(el: HTMLElement): void;
+    registerAnchor(el: HTMLElement): void;
+    unregisterAnchor(el: HTMLElement): void;
+    /**
+     * Recomputes whether we're at the live edge. Called from the viewport's
+     * scroll handler, which runs outside Angular — this only pushes through the
+     * subjects when the boolean actually flips, so we re-enter change detection
+     * once per state change instead of once per scroll event.
+     */
+    measure(): void;
+    /** Jumps to the live edge and resumes following. */
+    scrollToBottom(behavior?: ScrollBehavior): void;
+    /** Scrolls a specific row into view, e.g. jump-to-message from a search result. */
+    scrollToItem(el: HTMLElement, behavior?: ScrollBehavior): void;
+    /**
+     * Positions the transcript on open. `last-anchor` puts the newest turn at the
+     * top of the viewport instead of dumping the reader at the absolute end, so a
+     * long streamed answer starts from its beginning — with `peek` px of the
+     * previous turn left visible for context.
+     */
+    applyStartPosition(position: ScrollStartPosition, peek: number): void;
+    /**
+     * Content grew. Follows only if the reader was already at the edge; uses
+     * 'auto' so streamed tokens don't queue a smooth animation per chunk.
+     */
+    handleContentGrowth(): void;
+    /**
+     * History was prepended above the current view. Restores the reader's exact
+     * position by re-adding the height the new content introduced — otherwise the
+     * transcript visibly lurches downward as older messages load in.
+     */
+    preserveOnPrepend(previousScrollHeight: number): void;
+    /** Current scrollHeight, captured before a prepend so it can be compared after. */
+    snapshotScrollHeight(): number;
+    /** The last registered anchor in document order (registration order can vary). */
+    private lastAnchorInDomOrder;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MessageScrollerService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MessageScrollerService>;
+}

package/lib/message.component.d.ts

@@ -0,0 +1,128 @@
+import { OnChanges, OnDestroy } from '@angular/core';
+import { type VariantProps } from 'class-variance-authority';
+import { cn } from './utils/cn';
+import * as i0 from "@angular/core";
+declare const messageVariants: (props?: ({
+    align?: "start" | "end" | null | undefined;
+    size?: "default" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type MessageProps = VariantProps<typeof messageVariants>;
+/** Which edge of the transcript a message hangs off. */
+export type MessageAlign = 'start' | 'end';
+/**
+ * Shares the owning message's alignment with its OnPush children.
+ *
+ * Avatar / content / header / footer all need to know which edge the row hangs
+ * off, but reading `MessageComponent.align` from a child getter would never mark
+ * that child dirty. Emitting through an observable and calling `markForCheck()`
+ * on each emission is the only thing that re-renders them.
+ */
+export declare class MessageAlignService {
+    private alignSource;
+    /** Emits the owning message's alignment whenever it changes. */
+    readonly align$: import("rxjs").Observable<MessageAlign>;
+    /** The owning message's current alignment. */
+    get align(): MessageAlign;
+    setAlign(align: MessageAlign): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MessageAlignService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MessageAlignService>;
+}
+/**
+ * Base class for the message sub-components: resolves the row's alignment from
+ * the parent `tolle-message` and keeps the OnPush view in sync with it.
+ */
+declare abstract class MessageAlignAware implements OnChanges, OnDestroy {
+    /** Extra Tailwind classes merged onto the element via `cn()` (last-wins). */
+    class: string;
+    private readonly service;
+    private readonly cdr;
+    private readonly sub;
+    /**
+     * A bound `class` input is written through Angular's styling path, which
+     * does not mark an OnPush view dirty — without this every subclass would
+     * keep rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    constructor();
+    /** Alignment inherited from the enclosing message, defaulting to 'start'. */
+    protected get align(): MessageAlign;
+    ngOnDestroy(): void;
+    protected cn: typeof cn;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MessageAlignAware, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MessageAlignAware, never, never, { "class": { "alias": "class"; "required": false; }; }, {}, never, never, false, never>;
+}
+/**
+ * The row layout for a single chat message: avatar on one edge, the content
+ * column (header, bubble, footer) filling the rest. Compose it with
+ * `tolle-bubble` for the visible surface.
+ * @new
+ */
+export declare class MessageComponent implements OnChanges {
+    private readonly cdr;
+    /** Which edge the message hangs off — 'start' for incoming, 'end' for outgoing. @default 'start' */
+    align: MessageProps['align'];
+    /** Gap density of the row. @default 'default' */
+    size: MessageProps['size'];
+    /** Extra Tailwind classes merged onto the row via `cn()` (last-wins). */
+    class: string;
+    private readonly service;
+    ngOnChanges(): void;
+    get computedClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MessageComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageComponent, "tolle-message", never, { "align": { "alias": "align"; "required": false; }; "size": { "alias": "size"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+declare const messageGroupVariants: (props?: ({
+    align?: "start" | "end" | null | undefined;
+    spacing?: "default" | "tight" | "loose" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type MessageGroupProps = VariantProps<typeof messageGroupVariants>;
+/**
+ * Stacks consecutive messages from the same sender with tighter spacing, so a
+ * burst of replies reads as one turn rather than several.
+ */
+export declare class MessageGroupComponent 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;
+    /** Edge the grouped messages hang off. @default 'start' */
+    align: MessageGroupProps['align'];
+    /** Vertical gap between the grouped messages. @default 'default' */
+    spacing: MessageGroupProps['spacing'];
+    /** Extra Tailwind classes merged onto the group via `cn()` (last-wins). */
+    class: string;
+    get computedClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MessageGroupComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageGroupComponent, "tolle-message-group", never, { "align": { "alias": "align"; "required": false; }; "spacing": { "alias": "spacing"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * Avatar slot for a message. Anchored to the bottom of the row so it sits beside
+ * the last line of a multi-line bubble rather than floating at the top.
+ */
+export declare class MessageAvatarComponent extends MessageAlignAware {
+    get computedClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MessageAvatarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageAvatarComponent, "tolle-message-avatar", never, {}, {}, never, ["*"], true, never>;
+}
+/** Content column of a message — wraps the header, the bubble, and the footer. */
+export declare class MessageContentComponent extends MessageAlignAware {
+    get computedClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MessageContentComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageContentComponent, "tolle-message-content", never, {}, {}, never, ["*"], true, never>;
+}
+/** Sender name and metadata rendered above the message surface. */
+export declare class MessageHeaderComponent extends MessageAlignAware {
+    get computedClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MessageHeaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageHeaderComponent, "tolle-message-header", never, {}, {}, never, ["*"], true, never>;
+}
+/** Delivery status, actions, or a timestamp rendered below the message surface. */
+export declare class MessageFooterComponent extends MessageAlignAware {
+    get computedClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MessageFooterComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageFooterComponent, "tolle-message-footer", never, {}, {}, never, ["*"], true, never>;
+}
+export {};

package/lib/model-selector.component.d.ts

@@ -0,0 +1,103 @@
+import { EventEmitter, OnChanges } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { type VariantProps } from 'class-variance-authority';
+import { PopoverComponent } from './popover.component';
+import * as i0 from "@angular/core";
+/** One model the user can pick. Deliberately provider-agnostic. */
+export type ModelOption = {
+    /** Stable identifier written back through the form control. */
+    id: string;
+    /** Human-readable model name. */
+    name: string;
+    /** Vendor or family; when present the list is grouped by it. */
+    provider?: string;
+    /** One-line summary shown under the name. */
+    description?: string;
+    /** Short tag rendered as a pill, e.g. "new" or "preview". */
+    badge?: string;
+    /** Prevents the option from being chosen. */
+    disabled?: boolean;
+};
+/** A provider heading and the models filed under it. */
+export type ModelSelectorGroup = {
+    provider: string;
+    models: ModelOption[];
+};
+declare const modelSelectorTriggerVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | "lg" | null | undefined;
+    variant?: "default" | "ghost" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ModelSelectorProps = VariantProps<typeof modelSelectorTriggerVariants>;
+/**
+ * A compact picker for choosing which model a conversation should use.
+ *
+ * Implements `ControlValueAccessor`, so it binds with `ngModel` or a reactive
+ * form control and round-trips the chosen model's `id`. Searching, keyboard
+ * navigation and positioning are reused from `tolle-command` and
+ * `tolle-popover` rather than reimplemented here.
+ *
+ * ```html
+ * <tolle-model-selector [models]="models" [(ngModel)]="modelId"></tolle-model-selector>
+ * ```
+ * @new
+ */
+export declare class ModelSelectorComponent implements ControlValueAccessor, OnChanges {
+    /** Models to choose from; grouped by `provider` when that field is set. @default [] */
+    models: ModelOption[];
+    /** Text shown on the trigger when nothing is selected. @default 'Select a model' */
+    placeholder: string;
+    /** Placeholder inside the search box. @default 'Search models…' */
+    searchPlaceholder: string;
+    /** Message shown when the query matches no model. @default 'No models found.' */
+    emptyMessage: string;
+    /** Shows the search box above the list. @default true */
+    searchable: boolean;
+    /** Prefixes the selected model's name with its provider on the trigger. @default false */
+    showProviderOnTrigger: boolean;
+    /** Height and text size of the trigger. @default 'default' */
+    size: ModelSelectorProps['size'];
+    /** Visual style of the trigger. @default 'default' */
+    variant: ModelSelectorProps['variant'];
+    /** Optional remixicon class shown at the start of the trigger. @default 'ri-sparkling-line' */
+    icon: string;
+    /** Where the list opens relative to the trigger. @default 'bottom-start' */
+    placement: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+    /** Disables the control. @default false */
+    disabled: boolean;
+    /** Accessible name for the trigger and list. @default '' */
+    ariaLabel: string;
+    /** Extra Tailwind classes merged onto the trigger via `cn()` (last-wins). */
+    class: string;
+    /** Emitted with the chosen model's `id` whenever the selection changes. */
+    valueChange: EventEmitter<string | null>;
+    /** Emitted with the whole `ModelOption` whenever the selection changes. */
+    modelChange: EventEmitter<ModelOption | null>;
+    popover?: PopoverComponent;
+    /** Id of the currently selected model, or `null`. */
+    value: string | null;
+    /** Models bucketed by provider, recomputed whenever `models` changes. */
+    groups: ModelSelectorGroup[];
+    private readonly cdr;
+    private onChange;
+    private onTouched;
+    ngOnChanges(): void;
+    /** The selected `ModelOption`, or `null` when the value matches nothing. */
+    get selected(): ModelOption | null;
+    get triggerLabel(): string;
+    get computedTriggerClass(): string;
+    onSelect(id: string): void;
+    onPopoverClose(): void;
+    /**
+     * Buckets models by provider, preserving input order both between and within
+     * groups. Models with no provider land in a single unlabelled group so a flat
+     * list still renders.
+     */
+    private groupModels;
+    writeValue(value: string | null): void;
+    registerOnChange(fn: (value: string | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ModelSelectorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ModelSelectorComponent, "tolle-model-selector", never, { "models": { "alias": "models"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "showProviderOnTrigger": { "alias": "showProviderOnTrigger"; "required": false; }; "size": { "alias": "size"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "valueChange": "valueChange"; "modelChange": "modelChange"; }, never, never, true, never>;
+}
+export {};

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 {};