@malva-ui/core 0.1.12 → 0.1.14

package/types/malva-ui-core-chat.d.ts

@@ -0,0 +1,375 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken, Signal, TemplateRef } from '@angular/core';
+import * as _malva_ui_core_chat from '@malva-ui/core/chat';
+import * as _malva_ui_i18n from '@malva-ui/i18n';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { MlvScrollbar } from '@malva-ui/core/scrollbar';
+import * as i1 from '@malva-ui/cdk/density';
+
+/** Delivery lifecycle of an own message; rendered as tick icons in the meta row. */
+type MlvChatMessageStatus = 'sending' | 'sent' | 'delivered' | 'read' | 'failed';
+/** Participant referenced by {@link MlvChatMessageData.authorId}. */
+interface MlvChatUser {
+    /** Stable unique id, matched against `message.authorId` and the `mlv-chat` `selfId` input. */
+    id: string;
+    /** Display name; also drives the initials + `mlvColorFromText` avatar fallback. */
+    name: string;
+    /** Optional avatar image URL. */
+    avatarSrc?: string;
+}
+/** A single media/audio attachment inside a message. */
+interface MlvChatAttachment {
+    /** Stable unique id (track key inside the media grid). */
+    id: string;
+    /** Renderer selection. */
+    kind: 'image' | 'gif' | 'video' | 'audio';
+    /** Media source URL (object URLs are fine while uploading). */
+    src: string;
+    /** Image alt text; an i18n fallback is used when absent. */
+    alt?: string;
+    /** Intrinsic width in px; reserves the aspect-ratio before load. */
+    width?: number;
+    /** Intrinsic height in px; reserves the aspect-ratio before load. */
+    height?: number;
+    /**
+     * Duration in seconds. Shown as a chip on video cells and as the audio total.
+     * Audio falls back to element metadata when absent.
+     */
+    duration?: number;
+    /** Video poster URL; falls back to the first frame via `preload="metadata"`. */
+    poster?: string;
+    /** 0–100 while uploading → progress overlay; omit/undefined once done. */
+    uploadProgress?: number;
+}
+/**
+ * One chat message. The `mlv-chat` `messages` input is ordered oldest → newest.
+ *
+ * Named `MlvChatMessageData` because the bubble component claims the
+ * `MlvChatMessage` class name.
+ */
+interface MlvChatMessageData<TData = unknown> {
+    /** Stable unique id (track key, animation gating, edge detection). */
+    id: string;
+    /** Author reference; `=== selfId` ⇒ own message (right-aligned, accent). */
+    authorId: string;
+    /** Plain text body. */
+    text?: string;
+    /** Media/audio attachments. */
+    attachments?: MlvChatAttachment[];
+    /** Message time; accepts Date, epoch millis, or an ISO string. */
+    timestamp: Date | number | string;
+    /** Delivery status; ticks are rendered on own messages only. */
+    status?: MlvChatMessageStatus;
+    /** Full embedded replied-to message → condensed quote render (one level deep). */
+    replyTo?: MlvChatMessageData;
+    /** Matches an `[mlvChatMessageDef]` `mlvChatMessageDefType` for custom rendering. */
+    type?: string;
+    /** Consumer payload for custom templates. */
+    data?: TData;
+}
+/** Position of a message inside its consecutive-author group. */
+type MlvChatGroupPosition = 'single' | 'first' | 'middle' | 'last';
+/** A message paired with its computed group position. */
+interface MlvChatRenderMessage {
+    message: MlvChatMessageData;
+    position: MlvChatGroupPosition;
+}
+/** Item of the flattened render list produced by {@link buildChatRenderList}. */
+type MlvChatRenderItem = {
+    kind: 'date';
+    id: string;
+    date: Date;
+} | {
+    kind: 'group';
+    id: string;
+    authorId: string;
+    own: boolean;
+    messages: MlvChatRenderMessage[];
+};
+
+/** Template context of an `[mlvChatMessageDef]` custom message renderer. */
+interface MlvChatMessageDefContext {
+    /** The message being rendered. */
+    $implicit: MlvChatMessageData;
+    /** True when the message is authored by the current user. */
+    isOwn: boolean;
+    /** Position inside the consecutive-author group. */
+    groupPosition: MlvChatGroupPosition;
+    /** True when rendered condensed inside a reply quote. */
+    quote: boolean;
+}
+/** Reference to a registered custom message-type template. */
+interface MlvChatMessageDefRef {
+    /** The template to render for messages of the registered type. */
+    templateRef: TemplateRef<MlvChatMessageDefContext>;
+}
+/**
+ * Users map (id → user) provided by `mlv-chat` so bubbles can resolve author
+ * display names (reply quotes). Optional — standalone bubbles render without it.
+ */
+declare const MLV_CHAT_USERS: InjectionToken<Signal<ReadonlyMap<string, MlvChatUser>>>;
+/** Custom message-type templates (type → def) provided by `mlv-chat`. */
+declare const MLV_CHAT_MESSAGE_DEFS: InjectionToken<Signal<ReadonlyMap<string, MlvChatMessageDefRef>>>;
+
+/** Template context of an `[mlvChatAuthorDef]` author slot. */
+interface MlvChatAuthorDefContext {
+    /** The group's author, or undefined when the id is missing from `users`. */
+    $implicit: MlvChatUser | undefined;
+    /** True when the group is authored by the current user. */
+    isOwn: boolean;
+    /** First message of the group, for timestamps or role badges. */
+    firstMessage: MlvChatMessageData;
+}
+/**
+ * Replaces the default author name shown above a group of other-authored
+ * messages — for example to render an avatar plus a role badge.
+ *
+ * @example
+ * <ng-template mlvChatAuthorDef let-user>
+ *   <mlv-avatar size="xs" [name]="user.name" [src]="user.avatarSrc ?? null" />
+ *   {{ user.name }}
+ * </ng-template>
+ */
+declare class MlvChatAuthorDef {
+    /** The template rendered in the author slot. */
+    readonly templateRef: TemplateRef<MlvChatAuthorDefContext>;
+    /** Type guard giving template variables their concrete types. */
+    static ngTemplateContextGuard(_dir: MlvChatAuthorDef, _ctx: unknown): _ctx is MlvChatAuthorDefContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvChatAuthorDef, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MlvChatAuthorDef, "[mlvChatAuthorDef]", never, {}, {}, never, never, true, never>;
+}
+
+/** Template context of an `[mlvChatDateDef]` date separator. */
+interface MlvChatDateDefContext {
+    /** Start of the calendar day the separator introduces. */
+    $implicit: Date;
+}
+/**
+ * Replaces the default Today/Yesterday/date pill rendered between messages of
+ * different calendar days.
+ *
+ * @example
+ * <ng-template mlvChatDateDef let-date>{{ date | date: 'fullDate' }}</ng-template>
+ */
+declare class MlvChatDateDef {
+    /** The template rendered for each date separator. */
+    readonly templateRef: TemplateRef<MlvChatDateDefContext>;
+    /** Type guard giving template variables their concrete types. */
+    static ngTemplateContextGuard(_dir: MlvChatDateDef, _ctx: unknown): _ctx is MlvChatDateDefContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvChatDateDef, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MlvChatDateDef, "[mlvChatDateDef]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Marks an `<ng-template>` as the renderer for chat messages whose `type`
+ * matches `mlvChatMessageDefType`. The template replaces the bubble body;
+ * alignment, meta row, and animations stay owned by the chat.
+ *
+ * @example
+ * <ng-template mlvChatMessageDef mlvChatMessageDefType="poll" let-message let-isOwn="isOwn">
+ *   <app-poll [poll]="message.data" />
+ * </ng-template>
+ */
+declare class MlvChatMessageDef {
+    /** The message `type` this template renders. Templates without a type are ignored. */
+    readonly mlvChatMessageDefType: _angular_core.InputSignal<string>;
+    /** The template rendered for matching messages. */
+    readonly templateRef: TemplateRef<MlvChatMessageDefContext>;
+    /** Type guard giving template variables their concrete types. */
+    static ngTemplateContextGuard(_dir: MlvChatMessageDef, _ctx: unknown): _ctx is MlvChatMessageDefContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvChatMessageDef, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MlvChatMessageDef, "[mlvChatMessageDef]", never, { "mlvChatMessageDefType": { "alias": "mlvChatMessageDefType"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Scrollable chat surface. Renders an oldest→newest `messages` array as author
+ * groups with date separators, delivery statuses, replies, media, and audio.
+ * Grouping is computed internally — consumers only supply flat data.
+ */
+declare class MlvChat {
+    /** @private Distance from the bottom under which the view counts as pinned. */
+    private static readonly _PIN_THRESHOLD;
+    /** @private Distance from the top under which the window grows / `loadOlder` fires. */
+    private static readonly _TOP_THRESHOLD;
+    /** @private Number of messages the render window grows by per step. */
+    private static readonly _WINDOW_STEP;
+    /** Messages ordered oldest → newest. */
+    readonly messages: _angular_core.InputSignal<MlvChatMessageData<unknown>[]>;
+    /** Id of the current user; messages authored by it render as own messages. */
+    readonly selfId: _angular_core.InputSignal<string>;
+    /** Known participants, used for avatars and author names. */
+    readonly users: _angular_core.InputSignal<MlvChatUser[]>;
+    /** Renders skeleton bubbles instead of content while the first page loads. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** Shows the top loader while an older page is being fetched. */
+    readonly loadingOlder: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** Whether more history exists; gates the `loadOlder` output. */
+    readonly hasOlder: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** Ids of users currently composing a message. */
+    readonly typingUsers: _angular_core.InputSignal<string[]>;
+    /** Maximum gap in minutes between messages of one author group. */
+    readonly groupWindow: _angular_core.InputSignal<number>;
+    /** Author slot visibility; `'auto'` shows it once more than two users are known. */
+    readonly showAuthors: _angular_core.InputSignal<boolean | "auto">;
+    /** Whether calendar-day separators are rendered. */
+    readonly dateSeparators: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** Number of newest messages kept in the DOM. */
+    readonly windowSize: _angular_core.InputSignal<number>;
+    /** Emits when the user scrolls past the oldest rendered message and more history exists. */
+    readonly loadOlder: _angular_core.OutputEmitterRef<void>;
+    /** Emits the failed message whose retry action was activated. */
+    readonly retry: _angular_core.OutputEmitterRef<MlvChatMessageData<unknown>>;
+    /** Emits the message and attachment of an activated media cell. */
+    readonly mediaClick: _angular_core.OutputEmitterRef<{
+        message: MlvChatMessageData;
+        attachment: MlvChatAttachment;
+    }>;
+    /** Emits the message and its embedded original when a reply quote is activated. */
+    readonly replyClick: _angular_core.OutputEmitterRef<{
+        message: MlvChatMessageData;
+        replyTo: MlvChatMessageData;
+    }>;
+    /** @internal Chat i18n strings. */
+    protected readonly _i18n: _angular_core.Signal<_malva_ui_i18n.MlvChatI18n>;
+    /** @internal Author slot template, when a consumer provides one. */
+    protected readonly authorDef: _angular_core.Signal<MlvChatAuthorDef | undefined>;
+    /** @internal Date separator template, when a consumer provides one. */
+    protected readonly dateDef: _angular_core.Signal<MlvChatDateDef | undefined>;
+    /** @private Custom message-type templates projected by the consumer. */
+    private readonly _messageDefs;
+    /** @internal id → user map, provided to bubbles through `MLV_CHAT_USERS`. */
+    readonly _usersMap: _angular_core.Signal<Map<string, MlvChatUser>>;
+    /** @internal type → def map, provided to bubbles through `MLV_CHAT_MESSAGE_DEFS`. */
+    readonly _defsMap: _angular_core.Signal<Map<string, MlvChatMessageDef>>;
+    /** @internal Number of newest messages currently rendered; grown by the scroll engine. */
+    protected readonly _renderCount: _angular_core.WritableSignal<number>;
+    /** @internal Newest slice of `messages` kept in the DOM. */
+    protected readonly _windowed: _angular_core.Signal<MlvChatMessageData<unknown>[]>;
+    /** @internal Flattened author groups and date separators of the render window. */
+    protected readonly _renderItems: _angular_core.Signal<_malva_ui_core_chat.MlvChatRenderItem[]>;
+    /** @internal Whether the author slot renders above other-authored groups. */
+    protected readonly _authorsVisible: _angular_core.Signal<boolean>;
+    /** @internal Typing users resolved against the known participants. */
+    protected readonly _typingUserObjects: _angular_core.Signal<MlvChatUser[]>;
+    /** @internal Placeholder rows rendered while `loading` is set. */
+    protected readonly _skeletonRows: readonly {
+        own: boolean;
+        width: string;
+    }[];
+    /** @internal The scroll container; measured by the scroll engine. */
+    protected readonly _viewport: _angular_core.Signal<MlvScrollbar | undefined>;
+    /** @private Inner content wrapper; its height changes drive re-pinning. */
+    private readonly _content;
+    /** @private Shared resize observer used to follow content height changes. */
+    private readonly _resizeObserver;
+    /** @internal True while the view sits at (or near) the newest message. */
+    protected readonly _pinned: _angular_core.WritableSignal<boolean>;
+    /** @internal Messages appended while unpinned; drives the new-messages pill. */
+    protected readonly _newCount: _angular_core.WritableSignal<number>;
+    /** @internal Ids of messages that arrived live, so only those animate in. */
+    protected readonly _liveIds: _angular_core.WritableSignal<ReadonlySet<string>>;
+    /** @private First/last ids of the previous `messages` value, to classify changes. */
+    private _edgeIds;
+    /** @private Distance from the viewport bottom captured before a prepend renders. */
+    private _pendingCompensation;
+    constructor();
+    /** @internal Re-reads the viewport metrics after a scroll event. */
+    protected _onScroll(): void;
+    /**
+     * @internal Updates pinning and top-edge behavior from raw scroll metrics.
+     * Split from `_onScroll` so the logic is testable without layout.
+     */
+    protected _evaluateScroll(scrollTop: number, scrollHeight: number, clientHeight: number): void;
+    /** @internal Grows the render window, or asks for an older page once it is exhausted. */
+    protected _growWindow(): void;
+    /** @internal Scrolls to the newest message and clears the pill counter. */
+    protected _scrollToBottom(behavior?: ScrollBehavior): void;
+    /**
+     * @private Records every message newer than the previous last id so only
+     * live arrivals animate in — initial load, window growth, and prepended
+     * history render instantly.
+     */
+    private _markLiveMessages;
+    /** @private Records the distance from the bottom so a prepend keeps the view still. */
+    private _captureCompensation;
+    /**
+     * @private Restores the captured distance once the taller content has rendered.
+     * Returns true when a compensation was applied, so the caller skips pinning.
+     */
+    private _applyCompensation;
+    /** @private Jumps the viewport to the newest message without animation. */
+    private _stickToBottom;
+    /** @internal Composes the accessible label of one message article. */
+    protected _messageLabel(message: MlvChatMessageData, own: boolean): string;
+    /** @private Maps a delivery status to its translated label. */
+    private _statusLabel;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvChat, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MlvChat, "mlv-chat", never, { "messages": { "alias": "messages"; "required": true; "isSignal": true; }; "selfId": { "alias": "selfId"; "required": true; "isSignal": true; }; "users": { "alias": "users"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingOlder": { "alias": "loadingOlder"; "required": false; "isSignal": true; }; "hasOlder": { "alias": "hasOlder"; "required": false; "isSignal": true; }; "typingUsers": { "alias": "typingUsers"; "required": false; "isSignal": true; }; "groupWindow": { "alias": "groupWindow"; "required": false; "isSignal": true; }; "showAuthors": { "alias": "showAuthors"; "required": false; "isSignal": true; }; "dateSeparators": { "alias": "dateSeparators"; "required": false; "isSignal": true; }; "windowSize": { "alias": "windowSize"; "required": false; "isSignal": true; }; }, { "loadOlder": "loadOlder"; "retry": "retry"; "mediaClick": "mediaClick"; "replyClick": "replyClick"; }, ["authorDef", "dateDef", "_messageDefs"], never, true, [{ directive: typeof i1.MlvDensityDirective; inputs: { "mlvDensity": "mlvDensity"; }; outputs: {}; }]>;
+}
+
+/**
+ * Formats a duration in seconds as `m:ss` (e.g. 75 → '1:15').
+ * Negative or non-finite input renders as '0:00'.
+ */
+declare function formatChatDuration(seconds: number): string;
+
+/**
+ * A single chat bubble. Normally rendered internally by `mlv-chat`, but usable
+ * standalone. Renders text, reply quotes, delivery status ticks, and the meta
+ * row; media/audio attachments are rendered by internal sub-components.
+ */
+declare class MlvChatMessage {
+    /** The message to render. */
+    readonly message: _angular_core.InputSignal<MlvChatMessageData<unknown>>;
+    /** True when authored by the current user (right-aligned, accent bubble, status ticks). */
+    readonly own: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** Position inside the consecutive-author group; drives corner-tail radii. */
+    readonly groupPosition: _angular_core.InputSignal<MlvChatGroupPosition>;
+    /** Condensed quote rendering (inside a reply block): clamped text, no meta row. */
+    readonly quote: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** Emits when the retry button of a failed own message is activated. */
+    readonly retry: _angular_core.OutputEmitterRef<void>;
+    /** Emits the clicked media attachment (image/video cell). */
+    readonly mediaClick: _angular_core.OutputEmitterRef<MlvChatAttachment>;
+    /** Emits the embedded replied-to message when the quote block is activated. */
+    readonly replyClick: _angular_core.OutputEmitterRef<MlvChatMessageData<unknown>>;
+    /** @internal Chat i18n strings. */
+    protected readonly _i18n: _angular_core.Signal<_malva_ui_i18n.MlvChatI18n>;
+    /** @private Users map provided by the surrounding `mlv-chat`; null when standalone. */
+    private readonly _users;
+    /** @internal Custom message-type templates provided by the surrounding `mlv-chat`. */
+    protected readonly _defs: _angular_core.Signal<ReadonlyMap<string, _malva_ui_core_chat.MlvChatMessageDefRef>> | null;
+    /** @internal Normalized timestamp for the DatePipe. */
+    protected readonly _date: _angular_core.Signal<Date>;
+    /** @internal Image/gif/video attachments, rendered by the media grid. */
+    protected readonly _mediaAttachments: _angular_core.Signal<MlvChatAttachment[]>;
+    /** @internal Audio attachments, each rendered by its own player. */
+    protected readonly _audioAttachments: _angular_core.Signal<MlvChatAttachment[]>;
+    /** @internal Formats seconds as `m:ss` for the condensed audio chip in quote mode. */
+    protected readonly _formatDuration: typeof formatChatDuration;
+    /** @internal Template for this message's custom type, if registered. */
+    protected readonly _typeTemplate: _angular_core.Signal<_angular_core.TemplateRef<_malva_ui_core_chat.MlvChatMessageDefContext> | null>;
+    /** @internal Resolves an author display name from the container-provided users map. */
+    protected _userName(id: string): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvChatMessage, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MlvChatMessage, "mlv-chat-message", never, { "message": { "alias": "message"; "required": true; "isSignal": true; }; "own": { "alias": "own"; "required": false; "isSignal": true; }; "groupPosition": { "alias": "groupPosition"; "required": false; "isSignal": true; }; "quote": { "alias": "quote"; "required": false; "isSignal": true; }; }, { "retry": "retry"; "mediaClick": "mediaClick"; "replyClick": "replyClick"; }, never, never, true, never>;
+}
+
+/** Normalizes the {@link MlvChatMessageData.timestamp} union to a Date. */
+declare function toChatDate(timestamp: Date | number | string): Date;
+/** True when both dates fall on the same calendar day (local time). */
+declare function isSameChatDay(a: Date, b: Date): boolean;
+/**
+ * Flattens an oldest→newest message array into date separators + author groups.
+ * A group breaks on author change, on a gap larger than `groupWindowMinutes`,
+ * and always at a calendar-day boundary.
+ *
+ * @param messages Messages ordered oldest → newest.
+ * @param selfId Current user id; groups authored by it are flagged `own`.
+ * @param groupWindowMinutes Maximum gap between consecutive messages of one group.
+ * @param dateSeparators Whether `kind: 'date'` items are emitted at day boundaries.
+ */
+declare function buildChatRenderList(messages: readonly MlvChatMessageData[], selfId: string, groupWindowMinutes: number, dateSeparators: boolean): MlvChatRenderItem[];
+
+export { MLV_CHAT_MESSAGE_DEFS, MLV_CHAT_USERS, MlvChat, MlvChatAuthorDef, MlvChatDateDef, MlvChatMessage, MlvChatMessageDef, buildChatRenderList, formatChatDuration, isSameChatDay, toChatDate };
+export type { MlvChatAttachment, MlvChatAuthorDefContext, MlvChatDateDefContext, MlvChatGroupPosition, MlvChatMessageData, MlvChatMessageDefContext, MlvChatMessageDefRef, MlvChatMessageStatus, MlvChatRenderItem, MlvChatRenderMessage, MlvChatUser };

package/types/malva-ui-core-checkbox.d.ts

@@ -0,0 +1,158 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { MlvSignalCheckboxControlBase, MlvFormControl, MlvFormState, MlvFocusableGroupBase } from '@malva-ui/core/form-utils';
+
+/**
+ * Visual/validation state of the checkbox. Mirrors {@link MlvFormState}.
+ */
+type MlvCheckboxState = MlvFormState;
+declare class MlvCheckbox extends MlvSignalCheckboxControlBase implements MlvFormControl {
+    /** @private Optional parent checkbox group used for roving-focus coordination. */
+    private readonly _group;
+    /** @private Host element reference, used to strip the moved ARIA attributes. */
+    private readonly _elementRef;
+    /** @private Renderer used to imperatively remove host ARIA attributes. */
+    private readonly _renderer;
+    /**
+     * @private The `aria-label` a consumer placed directly on the `<mlv-checkbox>`
+     * host, captured before host bindings run. The host is role-less, so ARIA
+     * prohibits an `aria-label` there (axe `aria-prohibited-attr`); it is moved to
+     * the inner `<input type="checkbox">` instead (see the constructor).
+     */
+    private readonly _hostAriaLabel;
+    /**
+     * @private The `aria-labelledby` a consumer placed directly on the
+     * `<mlv-checkbox>` host, captured before host bindings run. Moved to the inner
+     * input for the same reason as {@link _hostAriaLabel}.
+     */
+    private readonly _hostAriaLabelledBy;
+    /**
+     * Id reference(s) naming the inner native input (`aria-labelledby`). Use this
+     * input (not a host `[attr.aria-labelledby]` binding) when the reference is
+     * dynamic — the role-less host must not carry ARIA naming attributes
+     * (axe `aria-prohibited-attr`). A static host `aria-labelledby` attribute is
+     * also supported and forwarded automatically (see the constructor); this
+     * input takes precedence when both are present.
+     *
+     * The inherited `ariaLabel` input behaves the same way for `aria-label`.
+     */
+    readonly ariaLabelledBy: _angular_core.InputSignal<string | undefined>;
+    /**
+     * @internal The accessible name forwarded onto the native input, sourced from a
+     * host `aria-label`. `null` when the consumer supplied none, so no empty
+     * `aria-label` is emitted on the input.
+     */
+    readonly _ariaLabel: _angular_core.WritableSignal<string | null>;
+    /**
+     * @internal The `aria-labelledby` forwarded onto the native input, sourced from
+     * a host `aria-labelledby`. `null` when the consumer supplied none.
+     */
+    readonly _ariaLabelledBy: _angular_core.WritableSignal<string | null>;
+    /**
+     * @internal The final `aria-label` for the native input: the `ariaLabel` input
+     * wins over a captured static host attribute; `null` emits no attribute.
+     */
+    readonly _resolvedAriaLabel: _angular_core.Signal<string | null>;
+    /**
+     * @internal The final `aria-labelledby` for the native input, with the same
+     * precedence as {@link _resolvedAriaLabel}.
+     */
+    readonly _resolvedAriaLabelledBy: _angular_core.Signal<string | null>;
+    constructor();
+    /**
+     * The checked state — the signal-forms `FormCheckboxControl` model. Two-way
+     * bindable (`[(checked)]`) and kept in sync with the bound field by
+     * `[formField]` / `[formControl]` / `ngModel`. The `FormCheckboxControl`
+     * contract forbids a sibling `value` member, so the previous group-membership
+     * `value` input was removed in the signal-forms cutover.
+     */
+    readonly checked: _angular_core.ModelSignal<boolean>;
+    /** Renders mixed-state visuals (minus icon). */
+    readonly indeterminate: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * When `false`, forces the native input out of the tab order (`tabindex="-1"`)
+     * regardless of group roving state. Composite parents that own a single tab
+     * stop — e.g. `mlv-tree` multi-select rows or `mlv-data-table` rows — set
+     * `[tabbable]="false"` so the checkbox does not add an extra tab stop while
+     * remaining operable via the row (Space) and the mouse.
+     */
+    readonly tabbable: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    readonly inputId: string;
+    /**
+     * Roving tabindex applied to the native checkbox input — the single focus
+     * target. `0` for the tabbable checkbox, `-1` for the rest of a group.
+     * Managed by `MlvCheckboxGroup`.
+     */
+    readonly tabIndex: _angular_core.WritableSignal<number>;
+    /** @internal Effective tabindex on the native input, gated by `tabbable`. */
+    readonly _resolvedTabIndex: _angular_core.Signal<number>;
+    /**
+     * @private Reference to the visually-hidden native input, which is the
+     * component's focus target (kept in the a11y tree via the clip-path pattern).
+     */
+    private readonly _nativeInput;
+    /**
+     * Moves focus to the native checkbox input. Satisfies CDK `FocusableOption`
+     * so `MlvCheckboxGroup`'s `FocusKeyManager` focuses the input, not the host.
+     */
+    focus(): void;
+    /** @internal Notifies the parent group when the native input gains focus. */
+    onFocus(): void;
+    /**
+     * Reflects the native `change` event (Space / click): the `checked` model
+     * emits, propagating to the bound field. Touched is reported on blur (see
+     * {@link onBlur}), matching the signal-forms `touch` contract.
+     */
+    onInputChange(event: Event): void;
+    /** Toggles the checked state from an Enter keypress on the native input. */
+    toggle(event: Event): void;
+    /**
+     * @internal Marks the control touched when focus leaves the native input —
+     * the signal-forms `touch` output replacing the CVA `onTouched` callback.
+     */
+    onBlur(): void;
+    /** Whether the control holds a clearable value — Checked state counts as the clearable value (clear unchecks). */
+    readonly hasValue: _angular_core.Signal<boolean>;
+    /**
+     * @private The wrapper around the projected content, used once after the
+     * first render to tell whether the consumer supplied visible text.
+     */
+    private readonly _contentRef;
+    /**
+     * @private Dev-mode diagnostic: a checkbox with no projected text, no
+     * `label` and no ARIA naming has no accessible name at all. CSS decides which
+     * of the two visible sources renders, so this only reports the empty case.
+     */
+    private _warnWhenUnlabelled;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvCheckbox, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MlvCheckbox, "mlv-checkbox", never, { "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "tabbable": { "alias": "tabbable"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, ["*"], true, never>;
+}
+
+interface MlvCheckboxGroupAccessor {
+    onChildFocus(checkbox: MlvCheckbox): void;
+}
+declare const CHECKBOX_GROUP: InjectionToken<MlvCheckboxGroupAccessor>;
+
+/**
+ * Visual/validation state of the checkbox group. Mirrors {@link MlvFormState}.
+ */
+type MlvCheckboxGroupState = MlvFormState;
+declare class MlvCheckboxGroup extends MlvFocusableGroupBase<MlvCheckbox> implements MlvCheckboxGroupAccessor {
+    /** Accessible label for the group, rendered above the checkboxes. */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Visual/validation state applied to the group. */
+    readonly state: _angular_core.InputSignal<MlvFormState>;
+    /**
+     * @protected The projected checkboxes in DOM order — drives the shared
+     * roving-tabindex arrow navigation from {@link MlvFocusableGroupBase}.
+     */
+    protected readonly _items: _angular_core.Signal<readonly MlvCheckbox[]>;
+    /** @protected Skips disabled checkboxes during arrow navigation. */
+    protected _isDisabled(checkbox: MlvCheckbox): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvCheckboxGroup, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MlvCheckboxGroup, "mlv-checkbox-group", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; }, {}, ["_items"], ["*"], true, never>;
+}
+
+export { CHECKBOX_GROUP, MlvCheckbox, MlvCheckboxGroup };
+export type { MlvCheckboxGroupAccessor, MlvCheckboxGroupState, MlvCheckboxState };

package/types/malva-ui-core-chip.d.ts

@@ -0,0 +1,128 @@
+import * as _angular_core from '@angular/core';
+import * as _malva_ui_i18n from '@malva-ui/i18n';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { MlvStructural, MlvTone } from '@malva-ui/cdk/utils';
+import * as i1 from '@malva-ui/cdk/density';
+
+/**
+ * Template slot directive for content rendered **before** the chip text label.
+ * Use with `<ng-template mlvChipPrepend>` inside a chip element.
+ */
+declare class MlvChipPrepend extends MlvStructural {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvChipPrepend, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MlvChipPrepend, "[mlvChipPrepend]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Template slot directive for content rendered **after** the chip text label.
+ * Use with `<ng-template mlvChipAppend>` inside a chip element.
+ */
+declare class MlvChipAppend extends MlvStructural {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvChipAppend, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MlvChipAppend, "[mlvChipAppend]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Available tone variants for the chip component.
+ * Extends the shared {@link MlvTone} semantic vocabulary with neutral and
+ * brand options, mapping to color tokens in the design system.
+ */
+type MlvChipTone = MlvTone | 'default' | 'primary' | 'secondary' | 'accent';
+/**
+ * Chip component for representing filterable tags, selected items, or categorized attributes.
+ * Similar to badge but with richer interactivity: prepend/append slots, closable mode,
+ * floating (elevated) variant, and full density system integration.
+ *
+ * When `animated` is `true`, enter and leave animations (opacity + scale + width) are enabled.
+ * The leave animation completes before `chipClose` emits.
+ *
+ * @example
+ * ```html
+ * <mlv-chip tone="primary">Angular</mlv-chip>
+ * <mlv-chip tone="success" muted closable animated (chipClose)="removeTag('done')">Done</mlv-chip>
+ * <mlv-chip tone="accent" floating>
+ *   <ng-template mlvChipPrepend><svg lucideStar [size]="12" /></ng-template>
+ *   Featured
+ * </mlv-chip>
+ * ```
+ */
+declare class MlvChip {
+    /** @protected The component's i18n strings signal. */
+    protected readonly _i18n: _angular_core.Signal<_malva_ui_i18n.MlvChipI18n>;
+    /**
+     * The semantic tone of the chip.
+     * Determines the background and text colors.
+     * Defaults to `'default'` (neutral).
+     */
+    readonly tone: _angular_core.InputSignal<MlvChipTone>;
+    /**
+     * When `true`, uses muted surface/text tokens instead of solid fill colors.
+     * Muted chips are less visually prominent — suited for inline or secondary contexts.
+     * Supports attribute usage: `<mlv-chip muted>`.
+     */
+    readonly muted: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * When `true`, renders the chip with fully rounded (pill) corners.
+     * Default shape uses `--mlv-radius-l` (slightly rounded).
+     * Supports attribute usage: `<mlv-chip rounded>`.
+     */
+    readonly rounded: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * When `true`, renders the chip with an elevated box-shadow, making it appear
+     * to float above the page surface. Equivalent to the button's `elevated` variant.
+     * Supports attribute usage: `<mlv-chip floating>`.
+     */
+    readonly floating: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * When `true`, renders a close (×) button after all chip content.
+     * Clicking it triggers the leave animation (if `animated`) before emitting `chipClose`.
+     * Supports attribute usage: `<mlv-chip closable>`.
+     */
+    readonly closable: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Configurable tabindex for the chip host. Defaults to `0` (focusable).
+     * Set to `-1` when the parent (e.g., tokenizer) manages focus via FocusKeyManager.
+     */
+    readonly chipTabIndex: _angular_core.InputSignal<number>;
+    /**
+     * Optional override for the close button's `aria-label`. When `null` (default),
+     * the generic i18n "Remove" label (`MLV_CHIP_I18N.remove`) is used. Set this to
+     * a more descriptive value — e.g. `"Remove: Angular"` — so screen-reader users
+     * know which item the close button removes when the same chip is one of many.
+     */
+    readonly closeAriaLabel: _angular_core.InputSignal<string | null>;
+    /**
+     * Emits after the leave animation completes when the user clicks the close button.
+     * Only relevant when `closable` is `true`.
+     */
+    readonly chipClose: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @protected Resolved accessible name for the close button. Prefers the
+     * explicit {@link closeAriaLabel} override, falling back to the generic
+     * i18n "Remove" string.
+     */
+    protected readonly _resolvedCloseAriaLabel: _angular_core.Signal<string>;
+    /** @protected Template slot rendered before the chip label. */
+    protected readonly _prependRef: _angular_core.Signal<MlvChipPrepend | undefined>;
+    /** @protected Template slot rendered after the chip label (before the close button). */
+    protected readonly _appendRef: _angular_core.Signal<MlvChipAppend | undefined>;
+    /**
+     * @protected Handles the close button click. When `animated` is true, sets `_leaving`
+     * to trigger the CSS leave animation and defers `chipClose` until it completes.
+     * When not animated, emits `chipClose` immediately.
+     * Prevents event propagation so the chip's container doesn't receive the click.
+     */
+    protected _handleClose(event: Event): void;
+    /**
+     * @protected Handles Backspace/Delete key to remove a closable chip.
+     * Emits `chipClose` and prevents default to avoid browser back navigation.
+     */
+    protected _handleKeyRemove(event: Event): void;
+    /** @private Host element reference, exposed publicly via the `element` getter. */
+    private readonly _elementRef;
+    get element(): HTMLElement;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MlvChip, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MlvChip, "mlv-chip", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "muted": { "alias": "muted"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "floating": { "alias": "floating"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "chipTabIndex": { "alias": "chipTabIndex"; "required": false; "isSignal": true; }; "closeAriaLabel": { "alias": "closeAriaLabel"; "required": false; "isSignal": true; }; }, { "chipClose": "chipClose"; }, ["_prependRef", "_appendRef"], ["*"], true, [{ directive: typeof i1.MlvDensityDirective; inputs: { "mlvDensity": "mlvDensity"; }; outputs: {}; }]>;
+}
+
+export { MlvChip, MlvChipAppend, MlvChipPrepend };
+export type { MlvChipTone };