@malva-ui/core 0.1.12

package/autocomplete/lib/autocomplete/autocomplete.d.ts

@@ -0,0 +1,296 @@
+import type { BooleanInput } from '@angular/cdk/coercion';
+import type { MlvOptionMatcher, MlvOptionsInput, MlvOptionsSearchFn, MlvSelectOption, MlvSelectOptionTransform } from '@malva-ui/core/dropdown';
+import type { MlvDensity } from '@malva-ui/cdk/density';
+import * as i0 from "@angular/core";
+/** Alias of {@link MlvOptionsSearchFn} — kept for backwards compatibility. */
+export type MlvAutocompleteSearchFn<T> = MlvOptionsSearchFn<T>;
+/**
+ * `[mlvAutocomplete]` — a reusable autocomplete/typeahead behaviour applicable
+ * to **any** text input: a native `<input>` or a `<mlv-input>`. It reuses the
+ * same building blocks as `mlv-combobox` — the shared
+ * {@link filterOptions matching utility} and the `mlv-dropdown-panel` list — to
+ * render a suggestion popup, without forcing the field into a full form
+ * control.
+ *
+ * Suggestions come from the {@link options} source — an array or
+ * `Observable<T[]>` (filtered locally with {@link matcher}), or a
+ * `MlvDataSource<T>` (which filters and pages itself) — or from an async
+ * {@link search} function. Every shape is normalised by the shared
+ * `MlvOptionsAdapter`. The directive owns
+ * the popup (a CDK overlay hosting `mlv-dropdown-panel`, the same primitive
+ * `mlv-popup` wraps — a headless attribute directive cannot host `mlv-popup`'s
+ * declarative content template), the WAI-ARIA combobox wiring on the input
+ * (`role="combobox"`, `aria-autocomplete="list"`, `aria-expanded`,
+ * `aria-controls`, `aria-activedescendant`), and the activedescendant keyboard
+ * model (DOM focus stays in the input; Arrow/Home/End move the highlighted
+ * option, Enter selects it, Escape closes then clears).
+ *
+ * @example
+ * ```html
+ * <!-- Static options on a plain mlv-input -->
+ * <mlv-input [mlvAutocomplete]="fruits" (optionSelected)="pick($event)" />
+ *
+ * <!-- Async search with loading + highlighting -->
+ * <mlv-input [mlvAutocompleteSearch]="searchUsers" [mlvAutocompleteMinLength]="2" />
+ *
+ * <!-- Data source: it filters (setSearch) and pages itself -->
+ * <mlv-input [mlvAutocomplete]="usersDataSource" [mlvAutocompleteMinLength]="2" />
+ *
+ * <!-- Custom matcher -->
+ * <mlv-input [mlvAutocomplete]="cities" [mlvAutocompleteMatcher]="startsWith" />
+ * ```
+ */
+export declare class MlvAutocomplete<T = unknown> {
+    /**
+     * Suggestion source: a static array or `Observable<T[]>` (filtered locally
+     * against the query with {@link matcher}), or a `MlvDataSource<T>` (which owns
+     * its own filtering — the directive forwards the query as
+     * `setSearch({ query, keys: [] })` and pages lazily). Ignored when a
+     * {@link search} function is provided. Bound through the directive's own
+     * selector: `[mlvAutocomplete]="options"`.
+     */
+    readonly options: import("@angular/core").InputSignal<MlvOptionsInput<T>>;
+    /**
+     * Async suggestion source: `(query) => T[] | Promise<T[]> | Observable<T[]>`.
+     * When set, it supersedes {@link options}; results feed the panel and drive
+     * the loading affordance. A newer query supersedes an in-flight one (its
+     * result is discarded), while the previous results stay visible until the new
+     * ones land.
+     */
+    readonly search: import("@angular/core").InputSignal<MlvAutocompleteSearchFn<T> | null>;
+    /**
+     * Maps a raw item to a `MlvSelectOption` (`{ label, value, group? }`). Same
+     * convention as `mlv-select` / `mlv-combobox`; defaults to
+     * {@link defaultOptionTransform} (uses `String(item)` as the label).
+     */
+    readonly toOption: import("@angular/core").InputSignal<MlvSelectOptionTransform<T>>;
+    /**
+     * Predicate used to filter {@link options} against the query. Defaults to a
+     * case- and diacritic-insensitive substring match on the label. Ignored when
+     * {@link search} is provided (the async source owns its own matching).
+     */
+    readonly matcher: import("@angular/core").InputSignal<MlvOptionMatcher<T>>;
+    /**
+     * Debounce (ms) applied to keystrokes before filtering / searching — avoids
+     * redundant work and API calls during rapid typing.
+     * @default 200
+     */
+    readonly debounce: import("@angular/core").InputSignal<number>;
+    /**
+     * Minimum query length before suggestions open. `0` (default) opens on focus
+     * showing the full list — appropriate for cheap local filtering. Raise it
+     * (2+ recommended) for async sources so a network call is not made on every
+     * keystroke.
+     * @default 0
+     */
+    readonly minLength: import("@angular/core").InputSignal<number>;
+    /**
+     * When `true`, the matched substring of the query is emphasised inside each
+     * suggestion label.
+     * @default true
+     */
+    readonly highlight: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * When `true` (default), an **inline completion** is offered as the user types:
+     * if the top visible suggestion's label starts with the typed text (a genuine
+     * prefix, case-insensitively) and the caret is at the end of the field, the
+     * remainder of that suggestion is inserted after the caret and left **selected**
+     * — so continuing to type replaces it, `Enter`/click commits the full value, and
+     * `Escape` reverts to just the typed text. The user's typed prefix keeps their
+     * casing; only the appended remainder uses the suggestion's casing. Non-prefix
+     * (fuzzy / substring-only) top matches are skipped silently (list-only). While
+     * enabled the input advertises `aria-autocomplete="both"`; set `false` for
+     * list-only behaviour (`aria-autocomplete="list"`).
+     * @default true
+     */
+    readonly inline: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * When `true` (default), focusing the input opens the suggestion list
+     * (subject to {@link minLength}). Set `false` to only open on typing / arrow.
+     * @default true
+     */
+    readonly openOnFocus: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    /** Disables the behaviour entirely (no popup, no aria wiring changes). */
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Text shown / announced inside the panel's loading affordances — the top row
+     * while a remote source (an async {@link search} or a `MlvDataSource`)
+     * resolves, and the bottom row while a further page loads. Localise by binding
+     * a translated string.
+     * @default 'Loading…'
+     */
+    readonly loadingText: import("@angular/core").InputSignal<string>;
+    /**
+     * Distance (px) from the end of the suggestion list at which the next
+     * data-source page is requested. Only meaningful for a `MlvDataSource`
+     * {@link options} source, which is the only shape that pages.
+     * @default 150
+     */
+    readonly infiniteScrollThreshold: import("@angular/core").InputSignal<number>;
+    /**
+     * Density applied to the suggestion panel's option rows.
+     *
+     * The panel is hosted in a bare CDK overlay portaled to the overlay container,
+     * outside the input's DOM tree, so ancestor density classes cannot cascade
+     * into it. The resolved density is stamped as a `mlv--{density}` class on the
+     * panel host (the same mechanism `mlv-popup` uses for its detached panel).
+     * When omitted, the nearest ancestor `MLV_DENSITY_CONTEXT` (e.g. a
+     * `form[mlvForm]`) applies, then the global `MlvDensityService` density.
+     */
+    readonly density: import("@angular/core").InputSignal<MlvDensity | undefined>;
+    /**
+     * The raw value of the last selected suggestion, or `null`. Two-way bindable
+     * (`[(mlvAutocompleteValue)]`) so a parent can observe the committed pick.
+     */
+    readonly selectedValue: import("@angular/core").ModelSignal<T | null>;
+    /** Emits the full `MlvSelectOption` each time the user selects a suggestion. */
+    readonly optionSelected: import("@angular/core").OutputEmitterRef<MlvSelectOption<T>>;
+    /** Emits `true` when the suggestion list opens and `false` when it closes. */
+    readonly openedChange: import("@angular/core").OutputEmitterRef<boolean>;
+    /** @private Host element the directive is applied to (native input or mlv-input). */
+    private readonly _hostEl;
+    /** @private Renderer for DOM attribute/listener wiring on the resolved input. */
+    private readonly _renderer;
+    /** @private CDK overlay factory used to host the suggestion panel. */
+    private readonly _overlay;
+    /** @private View container + injector for the `mlv-dropdown-panel` component portal. */
+    private readonly _vcr;
+    private readonly _injector;
+    /** @private Directive lifetime, for imperative listener / subscription cleanup. */
+    private readonly _destroyRef;
+    /** @private Global density service — fallback when no explicit {@link density} is supplied. */
+    private readonly _densityService;
+    /** @private Ancestor-projected density (`MLV_DENSITY_CONTEXT`); consulted before the service. */
+    private readonly _densityContext;
+    /** @private The resolved focusable `<input>` (host itself, or the inner input of a `mlv-input`). */
+    private readonly _inputEl;
+    /** @private Current (post-input) query text. */
+    private readonly _query;
+    /** @private The current suggestion options rendered in the panel. */
+    private readonly _results;
+    /**
+     * @private Shared source adapter: arrays / observables filter locally, a
+     * `MlvDataSource` or `search` fn run remotely. Debounce is 0 here because the
+     * directive already debounces keystrokes before `_runQuery`.
+     */
+    private readonly _adapter;
+    /** @private Panel loading flag — only remote sources report loading. */
+    private readonly _panelLoading;
+    /**
+     * @private Shared activedescendant bookkeeping: tracks the highlighted option
+     * index over the current results with wrap-around navigation. The same engine
+     * backs `mlv-combobox`.
+     */
+    private readonly _activeDescendant;
+    /** @private Whether the suggestion popup is open. */
+    private readonly _open;
+    /** @private The attached panel component ref (a signal so the sync effect re-runs on attach). */
+    private readonly _panelRef;
+    /** Whether the suggestion popup is currently open (read-only view of internal state). */
+    readonly isOpen: import("@angular/core").Signal<boolean>;
+    /** @private Stable listbox id shared between the input's `aria-controls` and the panel's option ids. */
+    private readonly _listboxId;
+    /**
+     * @private Debounced keystroke stream. Carries the query text plus whether the
+     * triggering edit was an insertion (text grew) so the debounced `_runQuery`
+     * knows whether an inline completion may be offered — only genuine insertions
+     * complete, never deletions (Backspace/Delete/cut), focus, or arrow-open.
+     */
+    private readonly _input$;
+    /** @private Skips the synthetic `input` event dispatched while committing / completing a value. */
+    private _suppressNextInput;
+    /** @private Live overlay reference while the panel is open. */
+    private _overlayRef;
+    /**
+     * @private `inputType` of the pending native edit, captured on `beforeinput`
+     * and consumed on `input`. Non-null in real browsers (drives precise
+     * insert-vs-delete detection); `null` in environments that don't fire
+     * `beforeinput` (jsdom / programmatic edits), where a length comparison is the
+     * fallback.
+     */
+    private _pendingInputType;
+    /** @private Length of the input value at the previous `input` event — the length-comparison fallback for insertion detection. */
+    private _previousValueLength;
+    /** @private Whether the current query is allowed to offer an inline completion (set per `_runQuery`; only true for inline-enabled insertions). */
+    private _completionArmed;
+    /** @private Whether an inline completion (typed prefix + selected remainder) is currently present in the input. */
+    private _completionActive;
+    /** @private The `mlv--{density}` class currently applied to the panel host, for removal on change. */
+    private _appliedDensityClass;
+    constructor();
+    /**
+     * @private Resolves the focusable `<input>` and attaches the native listeners
+     * (input / focus / blur / keydown) that drive the behaviour. Cleaned up on
+     * directive destroy.
+     */
+    private _bindTo;
+    /**
+     * @private `aria-activedescendant` target: the DOM id of the highlighted
+     * option row, or `null` when nothing is active. Matches the id the panel
+     * renders (`<listboxId>-option-<index>`).
+     */
+    private readonly _activeOptionId;
+    /** @private Handles a native `input` event: pushes the value (with insertion flag) into the debounced stream. */
+    private _onInput;
+    /**
+     * @private Whether the just-observed `input` event grew the field's text (a
+     * genuine insertion) rather than deleting from it. Prefers the `beforeinput`
+     * `inputType` when available (real browsers), else compares the value length
+     * against the previous `input` event. Consumes the pending type and records
+     * the new length either way.
+     */
+    private _consumeInsertion;
+    /** @private Opens suggestions on focus (immediate, bypassing debounce) when enabled. */
+    private _onFocus;
+    /** @private Closes the popup when focus genuinely leaves the field. */
+    private _onBlur;
+    /** @private Activedescendant keyboard model — DOM focus stays in the input. */
+    private _onKeydown;
+    /**
+     * @private Resolves suggestions for `query` and opens / closes the popup.
+     * Local sources (arrays / observables) filter synchronously; a remote source
+     * (a `MlvDataSource` or an async {@link search}) shows the loading affordance
+     * while keeping the previous results visible, and a newer query supersedes it.
+     */
+    private _runQuery;
+    /**
+     * @private Offers an inline completion for the current results: if the top
+     * suggestion's label is a genuine case-insensitive **prefix** of the typed
+     * text and the caret sits at the end of the field, append the suggestion's
+     * remainder (in its own casing) after the typed prefix (kept in the user's
+     * casing) and leave that remainder **selected**. The completed value is pushed
+     * through the same synthetic-`input` path a commit uses so `mlv-input` /
+     * `ngModel` / a form control observe it, and the top item (index 0) becomes the
+     * activedescendant-active row. No-op unless armed for an inline insertion with
+     * an open panel; non-prefix (fuzzy) top matches are skipped silently.
+     */
+    private _applyCompletion;
+    /**
+     * @private Strips an active inline completion back to the typed prefix (the
+     * text before the selected remainder), restoring the caret to the end and
+     * notifying value listeners. Returns whether a completion was stripped.
+     */
+    private _stripCompletion;
+    /**
+     * Panel (pointer) selection handler — subscribed to the `mlv-dropdown-panel`
+     * `valueChange`. The panel is never seeded with a committed selection
+     * (`selectedValues` is always `[]`), so any non-empty emit is a genuine pick —
+     * no aria reconciliation guard is needed. Public so the overlay subscription
+     * (and unit tests) can invoke it.
+     */
+    selectFromPanel(values: readonly T[]): void;
+    /** @private Commits a suggestion: writes its full label into the input (caret to end), emits, and closes. */
+    private _commit;
+    /** @private Clears the input text (second Escape) and notifies listeners. */
+    private _clearInput;
+    /** @private Creates (if needed) and shows the suggestion overlay. */
+    private _openPopup;
+    /** @private Hides and disposes the overlay, resetting popup state. */
+    private _closePopup;
+    /** @private Tears down the overlay + panel ref. */
+    private _disposeOverlay;
+    /** @private Whether all interaction paths are suppressed. */
+    private _isInert;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvAutocomplete<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MlvAutocomplete<any>, "[mlvAutocomplete],[mlvAutocompleteSearch]", ["mlvAutocomplete"], { "options": { "alias": "mlvAutocomplete"; "required": false; "isSignal": true; }; "search": { "alias": "mlvAutocompleteSearch"; "required": false; "isSignal": true; }; "toOption": { "alias": "mlvAutocompleteToOption"; "required": false; "isSignal": true; }; "matcher": { "alias": "mlvAutocompleteMatcher"; "required": false; "isSignal": true; }; "debounce": { "alias": "mlvAutocompleteDebounce"; "required": false; "isSignal": true; }; "minLength": { "alias": "mlvAutocompleteMinLength"; "required": false; "isSignal": true; }; "highlight": { "alias": "mlvAutocompleteHighlight"; "required": false; "isSignal": true; }; "inline": { "alias": "mlvAutocompleteInline"; "required": false; "isSignal": true; }; "openOnFocus": { "alias": "mlvAutocompleteOpenOnFocus"; "required": false; "isSignal": true; }; "disabled": { "alias": "mlvAutocompleteDisabled"; "required": false; "isSignal": true; }; "loadingText": { "alias": "mlvAutocompleteLoadingText"; "required": false; "isSignal": true; }; "infiniteScrollThreshold": { "alias": "mlvAutocompleteInfiniteScrollThreshold"; "required": false; "isSignal": true; }; "density": { "alias": "mlvAutocompleteDensity"; "required": false; "isSignal": true; }; "selectedValue": { "alias": "mlvAutocompleteValue"; "required": false; "isSignal": true; }; }, { "selectedValue": "mlvAutocompleteValueChange"; "optionSelected": "optionSelected"; "openedChange": "openedChange"; }, never, never, true, never>;
+}

package/autocomplete/malva-ui-core-autocomplete.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@malva-ui/core/autocomplete" />
+export * from './index';

package/avatar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/avatar/avatar';
+export * from './lib/color-from-text.pipe';

package/avatar/lib/avatar/avatar.d.ts

@@ -0,0 +1,125 @@
+import * as i0 from "@angular/core";
+/** Available size variants for the avatar component. */
+export type MlvAvatarSize = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+/** Available shape variants for the avatar component. */
+export type MlvAvatarShape = 'circle' | 'square';
+/**
+ * Derives initials from a name string.
+ * Takes the first letter of each space-separated part, max 2.
+ *
+ * @example
+ * deriveInitials('John Doe')         // 'JD'
+ * deriveInitials('Alice')            // 'A'
+ * deriveInitials('John Michael Doe') // 'JD'
+ * deriveInitials('')                 // ''
+ */
+export declare function deriveInitials(name: string): string;
+/**
+ * Avatar component displaying a user or entity representation.
+ *
+ * Supports image URLs, text initials (explicit or derived from a name),
+ * arbitrary projected content (e.g. icons), and an optional label below.
+ *
+ * Content priority: `src` image > `initials`/`name` > `ng-content`.
+ *
+ * @example
+ * ```html
+ * <mlv-avatar name="John Doe" [color]="'John Doe' | mlvColorFromText" />
+ * <mlv-avatar src="https://example.com/avatar.jpg" label="John Doe" />
+ * <mlv-avatar size="xl" shape="square" initials="JD" color="#526ed3" />
+ * ```
+ */
+export declare class MlvAvatar {
+    /**
+     * The size variant of the avatar.
+     * Maps to predefined width/height and font-size values.
+     */
+    readonly size: import("@angular/core").InputSignal<MlvAvatarSize>;
+    /**
+     * The shape of the avatar visual container.
+     * `circle` is fully rounded; `square` uses `--mlv-radius-2` (8px).
+     */
+    readonly shape: import("@angular/core").InputSignal<MlvAvatarShape>;
+    /**
+     * Optional image URL. When provided, the avatar displays an image.
+     * A loading skeleton is shown while the image loads.
+     * On error, falls back to initials or projected content.
+     */
+    readonly src: import("@angular/core").InputSignal<string | null>;
+    /**
+     * A name string from which initials are automatically derived.
+     * Takes the first character of each space-separated word, up to 2 characters.
+     * E.g. "John Doe" → "JD", "Alice" → "A", "John Michael Doe" → "JD".
+     * Ignored when `initials` is explicitly set.
+     */
+    readonly name: import("@angular/core").InputSignal<string>;
+    /**
+     * Explicit initials string. When provided, overrides initials derived from `name`.
+     */
+    readonly initials: import("@angular/core").InputSignal<string>;
+    /**
+     * CSS color value for the avatar background.
+     * Accepts any valid CSS color: hex, rgb, hsl, CSS custom property reference.
+     * Defaults to `var(--mlv-text-secondary)`.
+     */
+    readonly color: import("@angular/core").InputSignal<string>;
+    /**
+     * Optional label text displayed below the avatar.
+     * Long text is gracefully faded at the edges using `MlvFade`.
+     */
+    readonly label: import("@angular/core").InputSignal<string>;
+    /**
+     * @internal Whether the image has successfully loaded.
+     */
+    protected readonly _imageLoaded: import("@angular/core").WritableSignal<boolean>;
+    /**
+     * @internal Whether the image encountered a load error.
+     */
+    protected readonly _imageError: import("@angular/core").WritableSignal<boolean>;
+    /**
+     * @internal Computed background color style value.
+     * Returns the `color` input if set, otherwise the default CSS variable.
+     */
+    protected readonly _backgroundColor: import("@angular/core").Signal<string>;
+    /**
+     * @internal Resolved initials to display.
+     * Uses explicit `initials` input first, then derives from `name`.
+     */
+    protected readonly _resolvedInitials: import("@angular/core").Signal<string>;
+    /**
+     * @internal Accessible name for the avatar as a whole.
+     * Prefers the display `name`, falling back to the `label`. Returns `null`
+     * when neither is set so the host stays role-less (see host bindings).
+     */
+    protected readonly _accessibleName: import("@angular/core").Signal<string | null>;
+    /**
+     * @internal Whether to show the image element (src provided and no error).
+     */
+    protected readonly _showImage: import("@angular/core").Signal<boolean>;
+    /**
+     * @internal Whether to show the loading skeleton.
+     */
+    protected readonly _showSkeleton: import("@angular/core").Signal<boolean>;
+    /**
+     * @internal Whether to show initials (no valid image, and initials are available).
+     */
+    protected readonly _showInitials: import("@angular/core").Signal<boolean>;
+    /**
+     * @internal Whether to show projected ng-content (no valid image and no initials).
+     */
+    protected readonly _showContent: import("@angular/core").Signal<boolean>;
+    /**
+     * @internal Label words split for individual MlvFade wrapping.
+     */
+    protected readonly _labelWords: import("@angular/core").Signal<string[]>;
+    /**
+     * @internal Handles the image load event.
+     */
+    protected _onImageLoad(): void;
+    /**
+     * @internal Handles the image error event.
+     */
+    protected _onImageError(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvAvatar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MlvAvatar, "mlv-avatar", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/avatar/lib/color-from-text.pipe.d.ts

@@ -0,0 +1,21 @@
+import type { PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Converts a string to an HSL CSS color by hashing the string characters into a hue (0–360).
+ * The saturation and lightness are fixed to produce pleasant, accessible colors.
+ *
+ * @example
+ * {{ 'John Doe' | mlvColorFromText }}  // 'hsl(217, 60%, 45%)'
+ * {{ 'Alice' | mlvColorFromText }}     // 'hsl(74, 60%, 45%)'
+ */
+export declare class MlvColorFromTextPipe implements PipeTransform {
+    /**
+     * Transforms a string into a deterministic HSL color value.
+     *
+     * @param value - The string to convert. Returns a default color for empty strings.
+     * @returns A CSS `hsl(...)` string.
+     */
+    transform(value: string | null | undefined): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvColorFromTextPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<MlvColorFromTextPipe, "mlvColorFromText", true>;
+}

package/avatar/malva-ui-core-avatar.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@malva-ui/core/avatar" />
+export * from './index';

package/avatar-group/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/avatar-group/avatar-group';

package/avatar-group/lib/avatar-group/avatar-group.d.ts

@@ -0,0 +1,115 @@
+import type { BooleanInput } from '@angular/cdk/coercion';
+import type { MlvAvatarSize, MlvAvatarShape } from '@malva-ui/core/avatar';
+import * as i0 from "@angular/core";
+/**
+ * Represents a single member in the avatar group.
+ * Provides enough data to render a `mlv-avatar` for each member.
+ */
+export interface MlvAvatarGroupMember {
+    /** Full display name — used for initials derivation, popup label, and aria-label. */
+    name: string;
+    /** Optional image URL. Falls back to initials or color on error. */
+    src?: string | null;
+    /** Explicit initials string; overrides name-derived initials. */
+    initials?: string;
+    /** CSS color for the avatar background. Defaults to a deterministic color from name. */
+    color?: string;
+}
+/**
+ * Avatar group component rendering a horizontal stack of overlapping `mlv-avatar` instances.
+ *
+ * The visible count is calculated automatically based on the component's container width —
+ * no manual `max` input is needed. When members overflow, an avatar-styled `+N` counter
+ * is appended. Hovering or focusing the counter opens a popup listing every member.
+ * Clicking anywhere on the host emits `groupClick`; clicking the `+N` counter also
+ * emits `overflowClick`.
+ *
+ * The component fills its parent (uses `width: 100%` flex layout). Set a width or
+ * `max-width` on the host to constrain the visible count.
+ *
+ * @example
+ * ```html
+ * <mlv-avatar-group
+ *   [members]="team"
+ *   size="m"
+ *   (groupClick)="openMembersPanel($event)"
+ *   style="max-width: 200px"
+ * />
+ * ```
+ */
+export declare class MlvAvatarGroup {
+    /**
+     * The full list of members to represent.
+     * How many are visible is determined automatically by the container width.
+     */
+    readonly members: import("@angular/core").InputSignal<MlvAvatarGroupMember[]>;
+    /**
+     * Size variant applied to all avatars (including the overflow counter avatar).
+     * Matches `MlvAvatarSize`: `'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'`.
+     * Defaults to `'m'`.
+     */
+    readonly size: import("@angular/core").InputSignal<MlvAvatarSize>;
+    /**
+     * Shape applied to all avatars in the group.
+     * Defaults to `'circle'`.
+     */
+    readonly shape: import("@angular/core").InputSignal<MlvAvatarShape>;
+    /**
+     * When `true`, the group is exposed as a keyboard-operable button.
+     */
+    readonly interactive: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Emits the full member array when the user clicks anywhere on the group host.
+     */
+    readonly groupClick: import("@angular/core").OutputEmitterRef<MlvAvatarGroupMember[]>;
+    /**
+     * Emits the hidden (overflow) members when the user clicks the `+N` counter avatar.
+     * Event propagation is stopped before the host `groupClick` fires separately.
+     */
+    readonly overflowClick: import("@angular/core").OutputEmitterRef<MlvAvatarGroupMember[]>;
+    /** @private Host element ref, observed for width to auto-calculate the visible count. */
+    private readonly _el;
+    /** @private Shared resize-observer service used to track the host width. */
+    private readonly _resizeService;
+    /** @private Localised avatar-group messages. */
+    private readonly _i18n;
+    /** @private ICU resolver for count-aware accessible labels. */
+    private readonly _resolver;
+    /** Measured width of the host element in pixels. 0 = not yet measured. */
+    private readonly _containerWidth;
+    /** Avatar size in pixels for the current `size()` input. */
+    private readonly _avatarSizePx;
+    /**
+     * Maximum total avatars (visible + overflow) that fit in the current container.
+     * Returns `Infinity` before the first ResizeObserver measurement so that
+     * all members are shown during the initial render pass.
+     */
+    private readonly _maxFit;
+    /** Members within the auto-calculated visible limit — rendered as individual avatars. */
+    protected readonly _visibleMembers: import("@angular/core").Signal<MlvAvatarGroupMember[]>;
+    /** Members beyond the visible limit — shown in the overflow popup. */
+    protected readonly _hiddenMembers: import("@angular/core").Signal<MlvAvatarGroupMember[]>;
+    /** Number of hidden members. */
+    protected readonly _overflowCount: import("@angular/core").Signal<number>;
+    /** Whether the overflow counter avatar should render. */
+    protected readonly _hasOverflow: import("@angular/core").Signal<boolean>;
+    /** Label shown inside the overflow counter avatar, e.g. `"+5"`. */
+    protected readonly _overflowLabel: import("@angular/core").Signal<string>;
+    /** Accessible label for the group host element. */
+    protected readonly _hostAriaLabel: import("@angular/core").Signal<string>;
+    /** Localised label for the overflow trigger. */
+    protected readonly _overflowAriaLabel: import("@angular/core").Signal<string>;
+    /** Localised label for the complete member list. */
+    protected readonly _allMembersLabel: import("@angular/core").Signal<string>;
+    constructor();
+    /** Handles click on the overflow counter avatar. */
+    protected _onOverflowClick(event: MouseEvent): void;
+    /** Handles keydown on the overflow counter avatar. */
+    protected _onOverflowKeydown(event: KeyboardEvent): void;
+    /** Handles click on the group host. */
+    protected _onHostClick(): void;
+    /** Activates an interactive group with the standard button keys. */
+    protected _onHostKeydown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvAvatarGroup, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MlvAvatarGroup, "mlv-avatar-group", never, { "members": { "alias": "members"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; }, { "groupClick": "groupClick"; "overflowClick": "overflowClick"; }, never, never, true, never>;
+}

package/avatar-group/malva-ui-core-avatar-group.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@malva-ui/core/avatar-group" />
+export * from './index';

package/badge/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/badge/badge';
+export * from './lib/badge-icon';

package/badge/lib/badge/badge.d.ts

@@ -0,0 +1,59 @@
+import type { BooleanInput } from '@angular/cdk/coercion';
+import type { MlvTone } from '@malva-ui/cdk/utils';
+import { MlvBadgeIcon } from '../badge-icon';
+import * as i0 from "@angular/core";
+import * as i1 from "@malva-ui/cdk/density";
+/**
+ * Available tone variants for the badge component.
+ * Extends the shared {@link MlvTone} semantic vocabulary with neutral and
+ * brand options, mapping to color tokens in the design system.
+ */
+export type MlvBadgeTone = MlvTone | 'default' | 'primary' | 'secondary' | 'accent';
+/**
+ * Badge component for displaying short status labels, counts, or tags.
+ * Supports solid and muted color modes across all semantic tone variants,
+ * with full density system integration.
+ *
+ * A projected `[mlvBadgeIcon]` is sized and spaced by the badge itself and can
+ * be moved to either side with the directive's `position` input.
+ *
+ * @example
+ * ```html
+ * <mlv-badge tone="success">Active</mlv-badge>
+ * <mlv-badge tone="danger" muted>Deprecated</mlv-badge>
+ * <mlv-badge tone="primary" mlvDensity="compact">New</mlv-badge>
+ * <mlv-badge tone="success" muted>
+ *   <svg lucideCheck mlvBadgeIcon />
+ *   Published
+ * </mlv-badge>
+ * ```
+ */
+export declare class MlvBadge {
+    /**
+     * The semantic tone of the badge.
+     * Determines the background and text colors.
+     * Defaults to `'default'` (neutral).
+     */
+    readonly tone: import("@angular/core").InputSignal<MlvBadgeTone>;
+    /**
+     * @deprecated No-op. Badges always render with fully rounded (pill)
+     * corners via `--mlv-radius-full`; this input has never affected the
+     * rendered radius and is kept only so existing `[rounded]` bindings keep
+     * compiling. Override `border-radius` on `.mlv-badge` if you need a
+     * different shape.
+     */
+    readonly rounded: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * When `true`, uses muted surface/text tokens instead of solid fill colors.
+     * Muted badges are less visually prominent and suit inline or decorative contexts.
+     * Supports attribute usage: `<mlv-badge muted>` or `<mlv-badge [muted]="true">`.
+     */
+    readonly muted: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * @protected Projected `[mlvBadgeIcon]`, if any. Only its presence is used —
+     * it adds the label gap, so a badge without an icon keeps its former spacing.
+     */
+    protected readonly _iconRef: import("@angular/core").Signal<MlvBadgeIcon | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvBadge, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MlvBadge, "mlv-badge", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "muted": { "alias": "muted"; "required": false; "isSignal": true; }; }, {}, ["_iconRef"], ["[mlvBadgeIcon]", "*"], true, [{ directive: typeof i1.MlvDensityDirective; inputs: { "mlvDensity": "mlvDensity"; }; outputs: {}; }]>;
+}