mn-angular-lib 1.0.75 → 1.0.77

package/types/mn-angular-lib.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Provider, TemplateRef, OnInit, OnChanges, EventEmitter, ElementRef, OnDestroy, DoCheck, Type, ComponentRef, AfterViewInit, QueryList, ViewContainerRef, SimpleChanges, Signal, PipeTransform } from '@angular/core';
+import { InjectionToken, Provider, TemplateRef, OnInit, OnChanges, EventEmitter, ElementRef, PipeTransform, OnDestroy, DoCheck, ChangeDetectorRef, Type, ComponentRef, AfterViewInit, QueryList, ViewContainerRef, SimpleChanges, Signal } from '@angular/core';
 export { TemplateRef, Type } from '@angular/core';
 import * as tailwind_variants from 'tailwind-variants';
 import { VariantProps } from 'tailwind-variants';
@@ -270,6 +270,9 @@ declare const mnButtonVariants: tailwind_variants.TVReturnType<{
         true: string;
         false: string;
     };
+    hover: {
+        true: string;
+    };
 }, undefined, "inline-flex items-center justify-center hover:cursor-pointer transition-all duration-300 ease-in-out", {
     size: {
         sm: string;
@@ -309,6 +312,9 @@ declare const mnButtonVariants: tailwind_variants.TVReturnType<{
         true: string;
         false: string;
     };
+    hover: {
+        true: string;
+    };
 }, undefined, tailwind_variants.TVReturnType<{
     size: {
         sm: string;
@@ -348,6 +354,9 @@ declare const mnButtonVariants: tailwind_variants.TVReturnType<{
         true: string;
         false: string;
     };
+    hover: {
+        true: string;
+    };
 }, undefined, "inline-flex items-center justify-center hover:cursor-pointer transition-all duration-300 ease-in-out", unknown, unknown, undefined>>;
 type MnButtonVariants = VariantProps<typeof mnButtonVariants>;
 
@@ -358,6 +367,7 @@ type MnButtonTypes = {
     color: MnButtonVariants['color'];
     disabled?: MnButtonVariants['disabled'];
     wrap?: MnButtonVariants['wrap'];
+    hover?: MnButtonVariants['hover'];
 };
 
 declare class MnButton {
@@ -2113,6 +2123,46 @@ declare class MnSelect implements OnInit {
     static ɵcmp: i0.ɵɵComponentDeclaration<MnSelect, "mn-lib-select", never, { "props": { "alias": "props"; "required": true; }; }, {}, never, never, true, never>;
 }
 
+type MnSkeletonShape = 'rectangle' | 'circle' | 'text';
+type MnSkeletonProps = {
+    shape?: MnSkeletonShape;
+    animated?: boolean;
+    width?: string;
+    height?: string;
+};
+
+declare class MnSkeleton {
+    data: Partial<MnSkeletonProps>;
+    readonly ariaHidden = "true";
+    get hostClasses(): string;
+    get width(): string | null;
+    get height(): string | null;
+    get isAnimated(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MnSkeleton, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MnSkeleton, "mn-skeleton", never, { "data": { "alias": "data"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+declare const mnSkeletonVariants: tailwind_variants.TVReturnType<{
+    shape: {
+        rectangle: string;
+        circle: string;
+        text: string;
+    };
+}, undefined, "bg-base-300 relative overflow-hidden", {
+    shape: {
+        rectangle: string;
+        circle: string;
+        text: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    shape: {
+        rectangle: string;
+        circle: string;
+        text: string;
+    };
+}, undefined, "bg-base-300 relative overflow-hidden", unknown, unknown, undefined>>;
+type MnSkeletonVariantProps = VariantProps<typeof mnSkeletonVariants>;
+
 type PaginationStrategy = {
     hasMoreRows: boolean;
     loadMore: () => Promise<void>;
@@ -2126,81 +2176,48 @@ type OffsetPaginationStrategy = {
     pageSize: number;
     totalItems?: number;
 } & PaginationStrategy;
-declare enum ColumnSortType {
-    ALPHABETICAL = "ALPHABETICAL",
-    NUMERICAL = "NUMERICAL",
-    DATE = "DATE",
-    NONE = "NONE"
-}
-type SortState = {
-    columnKey: string;
-    direction: 'asc' | 'desc';
-};
-type TableAppearance = {
-    striped?: boolean;
-    hover?: boolean;
-    compact?: boolean;
-    bordered?: boolean;
-};
-type ColumnFilterType = 'text' | 'select';
-type ColumnFilterOption = {
-    label: string;
-    value: string;
-};
-type ColumnDefinition<T> = {
-    key: string;
-    header: string | TemplateRef<unknown>;
-    /** Translation key for the column header. When set, mn-table resolves it via MnLanguageService and keeps it updated on locale change. */
-    headerKey?: string;
-    cell: ((row: T) => string) | TemplateRef<unknown>;
-    /** Alternative cell renderer shown below the given breakpoint. When set, `cell` is hidden below this breakpoint and `cellSm` is shown instead. */
-    cellSm?: {
-        below: 'sm' | 'md' | 'lg';
-        cell: ((row: T) => string) | TemplateRef<unknown>;
-    };
-    sortType?: ColumnSortType;
-    getRawValueToSort?: (row: T) => unknown;
-    width?: string;
-    align?: 'left' | 'center' | 'right';
-    hiddenBelow?: 'sm' | 'md' | 'lg';
-    /** Whether this column supports per-column filtering. */
-    filterable?: boolean;
-    /** Type of filter input: 'text' for free-text, 'select' for dropdown. Defaults to 'text'. */
-    filterType?: ColumnFilterType;
-    /** Options for 'select' filter type. */
-    filterOptions?: ColumnFilterOption[];
-    /** Placeholder text for the filter input. */
-    filterPlaceholder?: string;
-    /** Translation key for the filter placeholder. When set, mn-table resolves it via MnLanguageService. */
-    filterPlaceholderKey?: string;
-    /** Whether the filter input is disabled. */
-    filterDisabled?: boolean;
-    /** Autocomplete attribute for the filter input. */
-    filterAutocomplete?: string;
-    /** Maximum character length for text filter inputs. */
-    filterMaxLength?: number;
-    /** Custom filter function. Receives the row and the current filter value. */
-    filterFn?: (row: T, filterValue: string) => boolean;
+type PaginationMode = 'none' | 'load-more' | 'paginated' | 'client-side-pagination' | 'infinite-scroll';
+type MnCollectionLabels = {
+    loadMore?: string;
+    /** Translation key for the "Load more" button label. */
+    loadMoreKey?: string;
+    rowsPerPage?: string;
+    /** Translation key for the "Rows per page" label. */
+    rowsPerPageKey?: string;
 };
-type TableDataSource<T> = {
+/**
+ * Chrome shared by every MnLib collection component (table, list, grid):
+ * data, search, pagination, loading/skeleton, empty state and i18n. Component
+ * data sources ({@link import('../mn-table').TableDataSource},
+ * {@link import('../mn-list').ListDataSource},
+ * {@link import('../mn-grid').GridDataSource}) extend this with their own
+ * rendering contract (columns / item template / card template).
+ */
+type MnCollectionDataSource<T> = {
     dataRows: BehaviorSubject<T[]>;
-    columns: ColumnDefinition<T>[];
     getID: (row: T) => string;
     emptyMessage: string;
-    /** Translation key for the empty message. When set, mn-table resolves it via MnLanguageService. */
+    /** Translation key for the empty message. When set, the component resolves it via MnLanguageService. */
     emptyMessageKey?: string;
     emptyTemplate?: TemplateRef<unknown>;
     isDataLoading: boolean;
+    /** Number of placeholder rows rendered while data is loading. Defaults to 5. */
+    skeletonRowCount?: number;
     canSearch: boolean;
     searchPlaceholder?: string;
-    /** Translation key for the search placeholder. When set, mn-table resolves it via MnLanguageService. */
+    /** Translation key for the search placeholder. When set, the component resolves it via MnLanguageService. */
     searchPlaceholderKey?: string;
     isInSearch?: (row: T, searchValue: string) => boolean;
     searchForAdditionalItems?: (searchValue: string) => Promise<T[]>;
-    paginationMode?: 'none' | 'load-more' | 'paginated' | 'client-side-pagination' | 'infinite-scroll';
+    /**
+     * Callback invoked when the user types in the search box (server-side search).
+     * When provided, the component skips client-side filtering and delegates to the consumer.
+     */
+    onServerSearch?: (searchValue: string) => void;
+    paginationMode?: PaginationMode;
     paginationStrategy?: PaginationStrategy;
     loadAdditionalRows?: () => Promise<T[]>;
-    /** Number of rows per page when paginationMode is 'paginated'. Defaults to 10. */
+    /** Number of items per page when paginationMode is 'paginated'. Defaults to 10. */
     pageSize?: number;
     /** Options for the page-size selector dropdown. Defaults to [5, 10, 25, 50]. */
     pageSizeOptions?: number[];
@@ -2213,178 +2230,454 @@ type TableDataSource<T> = {
     totalItems?: number;
     /**
      * Callback invoked when the user navigates to a different page.
-     * When provided, the table delegates pagination to the consumer (server-side).
-     * The consumer is responsible for fetching the new page data and updating dataRows.
+     * When provided, the component delegates pagination to the consumer (server-side).
      */
     onPageChange?: (page: number) => void;
-    /**
-     * Callback invoked when the user types in the search box (server-side search).
-     * When provided, the table skips client-side filtering and delegates to the consumer.
-     */
-    onServerSearch?: (searchValue: string) => void;
     /**
      * Callback invoked when the user scrolls to the bottom in infinite-scroll mode.
-     * When provided, the table delegates loading more rows to the consumer (server-side).
-     * The consumer is responsible for appending new data to dataRows.
+     * When provided, the component delegates loading more rows to the consumer (server-side).
      */
     onLoadMore?: () => void;
-    defaultSort?: SortState;
+    labels?: MnCollectionLabels;
+};
+/**
+ * Adds row/item selection to {@link MnCollectionDataSource}. Used by components
+ * that support selection (table, list); grid intentionally omits it.
+ */
+type MnSelectableCollectionDataSource<T> = MnCollectionDataSource<T> & {
     selectionMode?: 'none' | 'single' | 'multi';
     selectedRows?: BehaviorSubject<T[]>;
-    /** IDs to pre-select when the table initializes. */
+    /** IDs to pre-select when the component initializes. */
     initialSelectedIds?: string[];
-    onRowClick?: (row: T) => void;
-    appearance?: TableAppearance;
-    /** Template rendered on the left side of the toolbar (before the search field). */
-    toolbarLeftTemplate?: TemplateRef<unknown>;
-    /** Template rendered on the right side of the toolbar (after the search field). */
-    toolbarRightTemplate?: TemplateRef<unknown>;
-    labels?: TableLabels;
-};
-type TableLabels = {
-    loadMore?: string;
-    /** Translation key for the "Load more" button label. */
-    loadMoreKey?: string;
-    rowsPerPage?: string;
-    /** Translation key for the "Rows per page" label. */
-    rowsPerPageKey?: string;
 };
 
-/** Map of column key to its current filter value. */
-type ColumnFilterState = Record<string, string | undefined>;
-declare class MnTable<T = object> implements OnInit, OnDestroy, DoCheck {
-    dataSource: TableDataSource<T>;
-    sortChange: EventEmitter<SortState | null>;
-    selectionChange: EventEmitter<T[]>;
-    rowClick: EventEmitter<T>;
-    filteredItems: T[];
-    paginatedItems: T[];
-    searchValue: string;
-    loadingMoreRows: boolean;
-    currentSort: SortState | null;
-    selectedIds: Set<string>;
-    currentPage: number;
-    pageSize: number;
-    /** Per-column filter values keyed by column key. */
-    columnFilters: ColumnFilterState;
-    private cdr;
-    private lang;
-    private dataSubscription?;
-    private searchSubject;
-    private searchSubscription?;
-    private langSubscription?;
-    /** Tracks the previous toolbar left template reference for change detection. */
-    private previousToolbarLeftTemplate?;
-    /**
-     * Checks for changes to dataSource properties that are not covered
-     * by Angular's default change detection (e.g. toolbarLeftTemplate).
-     */
-    ngDoCheck(): void;
-    get showLoadMore(): boolean;
-    ngOnDestroy(): void;
-    get isPaginated(): boolean;
-    /** Whether any column has filtering enabled. */
-    get hasColumnFilters(): boolean;
-    /** Updates a column filter value and re-applies filtering. */
-    onColumnFilter(columnKey: string, value: string): void;
-    sort(column: ColumnDefinition<T>): void;
-    getSortIcon(column: ColumnDefinition<T>): string;
-    isSortable(column: ColumnDefinition<T>): boolean;
-    isSelected(row: T): boolean;
-    toggleRow(row: T): void;
-    toggleAll(): void;
-    get allSelected(): boolean;
-    get hasSelection(): boolean;
-    get isMultiSelect(): boolean;
-    onRowClick(row: T): void;
-    /** Whether the table delegates pagination to the consumer (server-side). */
-    get isServerPaginated(): boolean;
-    /** Whether the table delegates search to the consumer (server-side). */
-    get isServerSearched(): boolean;
-    /** Total number of items, accounting for server-side pagination. */
-    get totalItemCount(): number;
-    get totalPages(): number;
-    ngOnInit(): void;
-    /**
-     * Resolves all translation keys (headerKey, filterPlaceholderKey, emptyMessageKey, etc.)
-     * into their corresponding display strings using MnLanguageService.
-     */
-    private resolveTranslationKeys;
-    onSearch(searchString: string): void;
-    loadMoreRows(): void;
-    get resolvedPageSizeOptions(): number[];
-    /** Page-size options formatted for mn-select. */
-    get pageSizeSelectOptions(): MnSelectOption<number>[];
-    /** Filter options formatted for mn-select for a given column. */
-    getFilterSelectOptions(column: ColumnDefinition<T>): MnSelectOption<string>[];
-    goToPage(page: number): void;
-    onPageSizeChange(newSize: number): void;
-    get visiblePages(): number[];
-    private applyPagination;
-    isTemplateRef(value: unknown): value is TemplateRef<unknown>;
-    getCellValue(column: ColumnDefinition<T>, row: T): string;
-    /** Returns the small-screen cell value for a column with cellSm defined. */
-    getCellSmValue(column: ColumnDefinition<T>, row: T): string;
-    trackByID: (_index: number, row: T) => string;
-    trackByKey: (_index: number, column: ColumnDefinition<T>) => string;
-    readonly tableClasses = "w-full border-collapse overflow-y-hidden";
-    get totalColumnCount(): number;
-    get skeletonRows(): number[];
-    private applyFilterAndSort;
-    private applySorting;
-    private processLoadedRows;
-    private validateDataSource;
-    private emitSelection;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MnTable<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MnTable<any>, "mn-table", never, { "dataSource": { "alias": "dataSource"; "required": false; }; }, { "sortChange": "sortChange"; "selectionChange": "selectionChange"; "rowClick": "rowClick"; }, never, never, true, never>;
-}
-
 /**
- * Attribute directive that applies responsive-hiding classes to table cells/headers.
- * Hides the element by default and shows it as `table-cell` at the specified breakpoint.
- *
- * Uses a static class map so Tailwind CSS can detect the full class names at build time.
+ * A marker object used in config values to indicate that the value
+ * should be resolved via the MnLanguageService.
  *
- * Usage: `<td [mnHiddenBelow]="column.hiddenBelow">`
+ * Example in mn-config.json5:
+ *   label: { $translate: "form.email.label" }
  */
-declare class MnHiddenBelowDirective implements OnChanges {
-    /** The breakpoint below which the element is hidden. */
-    mnHiddenBelow: 'sm' | 'md' | 'lg' | undefined;
-    private readonly el;
-    private readonly renderer;
-    private appliedClasses;
-    /** Static mapping of breakpoints to their full Tailwind class names. */
-    private readonly classMap;
-    ngOnChanges(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MnHiddenBelowDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MnHiddenBelowDirective, "[mnHiddenBelow]", never, { "mnHiddenBelow": { "alias": "mnHiddenBelow"; "required": false; }; }, {}, never, never, true, never>;
-}
-
+type MnTranslatable = {
+    $translate: string;
+    params?: Record<string, string | number>;
+};
 /**
- * Attribute directive that hides an element below the given breakpoint and shows it at/above.
- * Uses `hidden` + `{bp}:inline` so the element is invisible on small screens.
- *
- * Usage: `<span [mnShowAbove]="'sm'">`
+ * A config value that is either a plain value or a translatable marker.
  */
-declare class MnShowAboveDirective implements OnChanges {
-    /** The breakpoint at/above which the element becomes visible. */
-    mnShowAbove: 'sm' | 'md' | 'lg' | undefined;
-    private readonly el;
-    private readonly renderer;
-    private appliedClasses;
-    /** Static mapping of breakpoints to their full Tailwind class names. */
-    private readonly classMap;
-    ngOnChanges(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MnShowAboveDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MnShowAboveDirective, "[mnShowAbove]", never, { "mnShowAbove": { "alias": "mnShowAbove"; "required": false; }; }, {}, never, never, true, never>;
-}
-
+type MnConfigValue<T = string> = T | MnTranslatable;
 /**
- * Attribute directive that shows an element below the given breakpoint and hides it at/above.
- * Uses `inline` by default + `{bp}:hidden` so the element is only visible on small screens.
- *
- * Usage: `<span [mnShowBelow]="'sm'">`
- */
+ * A flat key-value map of translations for a single locale.
+ * Supports nested keys via dot notation: "form.email.label"
+ */
+type MnTranslationMap = Record<string, string>;
+/**
+ * All loaded translations keyed by locale code (e.g. "en", "nl", "de").
+ */
+type MnTranslations = Record<string, MnTranslationMap>;
+/**
+ * Configuration for the language provider.
+ */
+type MnLanguageConfig = {
+    /** URL pattern for loading translation files. Use `{locale}` as placeholder. e.g. "assets/i18n/{locale}.json" */
+    urlPattern: string;
+    /** The default/fallback locale. */
+    defaultLocale: string;
+    /** Locales to preload at bootstrap. */
+    preload?: string[];
+    /**
+     * Optional mapping of domain hostnames to locale codes.
+     * When set, the service will use the current domain to determine the initial locale.
+     * Example: { "example.nl": "nl", "example.de": "de", "example.com": "en" }
+     */
+    domainLocaleMap?: Record<string, string>;
+    /** Whether to enable debug logging. */
+    debug?: boolean;
+};
+/**
+ * Type guard: checks whether a value is a translatable marker object.
+ */
+declare function isTranslatable(value: unknown): value is MnTranslatable;
+
+declare class MnLanguageService {
+    private readonly http;
+    private readonly appRef;
+    private _translations;
+    private _locale$;
+    private _urlPattern;
+    private _debug;
+    /** Observable of the current active locale. */
+    readonly locale$: Observable<string>;
+    /** Current active locale. */
+    get locale(): string;
+    /**
+     * Enable or disable debug logging.
+     */
+    setDebug(enabled: boolean): void;
+    /**
+     * Configure the URL pattern used to fetch translation files.
+     * Use `{locale}` as placeholder, e.g. `"assets/i18n/{locale}.json"`.
+     */
+    configure(urlPattern: string): void;
+    /**
+     * Load translations for a locale from the configured URL pattern.
+     * If translations are already loaded for this locale, this is a no-op.
+     */
+    loadLocale(locale: string): Promise<void>;
+    /**
+     * Switch the active locale. Loads translations if not yet loaded.
+     */
+    setLocale(locale: string): Promise<void>;
+    /**
+     * Register translations for a locale directly from code (no HTTP needed).
+     */
+    registerTranslations(locale: string, translations: MnTranslationMap): void;
+    /**
+     * Translate a key using the current locale, with optional parameter interpolation.
+     * Falls back to the key itself if no translation is found.
+     *
+     * Interpolation replaces `{{paramName}}` with the provided value.
+     */
+    translate(key: string, params?: Record<string, string | number>): string;
+    /**
+     * Helper to retrieve a value from a potentially nested translation map using a dot-notated key.
+     */
+    private getValueFromMap;
+    /**
+     * Shorthand alias for `translate`.
+     */
+    t(key: string, params?: Record<string, string | number>): string;
+    /**
+     * Resolve the effective default locale from a domain-to-locale map.
+     * Matches `window.location.hostname` against the map keys.
+     * Returns the mapped locale, or the provided fallback if no match is found.
+     */
+    resolveLocaleForDomain(domainLocaleMap: Record<string, string> | undefined, fallback: string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MnLanguageService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MnLanguageService>;
+}
+
+/**
+ * Provides an APP_INITIALIZER that configures the MnLanguageService and
+ * preloads the requested locales during application bootstrap.
+ *
+ * Usage in app.config.ts:
+ *   ...provideMnLanguage({
+ *     urlPattern: 'assets/i18n/{locale}.json',
+ *     defaultLocale: 'en',
+ *     preload: ['en', 'nl'],
+ *   })
+ */
+declare function provideMnLanguage(config: MnLanguageConfig): Provider[];
+
+/**
+ * Pipe that translates a key via MnLanguageService.
+ *
+ * Usage in templates:
+ *   {{ 'form.email.label' | mnTranslate }}
+ *   {{ 'greeting' | mnTranslate:{ name: 'World' } }}
+ *
+ * Note: This pipe is impure so it re-evaluates when the locale changes.
+ */
+declare class MnTranslatePipe implements PipeTransform {
+    private readonly lang;
+    transform(key: string, params?: Record<string, string | number>): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MnTranslatePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<MnTranslatePipe, "mnTranslate", true>;
+}
+
+/**
+ * Shared chrome for MnLib collection components (table, list, grid):
+ * data subscription, client/server search, every pagination mode, load-more,
+ * skeleton-row count, empty-state plumbing, common i18n key resolution and
+ * toolbar change-detection.
+ *
+ * Concrete components extend this (or {@link MnSelectableCollectionBase}) and
+ * implement only their rendering. The class is decorated `@Directive()` so it can
+ * declare `@Input`s and use `inject()` while remaining abstract.
+ *
+ * Init runs in a fixed order (see {@link ngOnInit}); subclasses hook in via the
+ * `protected` template methods rather than overriding `ngOnInit`.
+ */
+declare abstract class MnCollectionBase<T, DS extends MnCollectionDataSource<T>> implements OnInit, OnDestroy, DoCheck {
+    dataSource: DS;
+    filteredItems: T[];
+    paginatedItems: T[];
+    searchValue: string;
+    loadingMoreRows: boolean;
+    currentPage: number;
+    pageSize: number;
+    protected readonly cdr: ChangeDetectorRef;
+    protected readonly lang: MnLanguageService;
+    /** Prefix used in validation error messages, e.g. `MnList`. Overridden by subclasses. */
+    protected readonly componentName: string;
+    private dataSubscription?;
+    private searchSubject;
+    private searchSubscription?;
+    private langSubscription?;
+    /** Tracks the previous toolbar template reference for change detection. */
+    private previousToolbarTemplate?;
+    /** Whether the component delegates search to the consumer (server-side). */
+    get isServerSearched(): boolean;
+    get isPaginated(): boolean;
+    /** Whether the component delegates pagination to the consumer (server-side). */
+    get isServerPaginated(): boolean;
+    get showLoadMore(): boolean;
+    /** Total number of items, accounting for server-side pagination. */
+    get totalItemCount(): number;
+    get totalPages(): number;
+    get resolvedPageSizeOptions(): number[];
+    /** Page-size options formatted for mn-select. */
+    get pageSizeSelectOptions(): MnSelectOption<number>[];
+    get visiblePages(): number[];
+    get skeletonRows(): number[];
+    /** The toolbar template whose identity is watched in change detection. */
+    protected abstract get trackedToolbarTemplate(): TemplateRef<unknown> | undefined;
+    ngOnInit(): void;
+    ngDoCheck(): void;
+    ngOnDestroy(): void;
+    onSearch(searchString: string): void;
+    goToPage(page: number): void;
+    onPageSizeChange(newSize: number): void;
+    loadMoreRows(): void;
+    isTemplateRef(value: unknown): value is TemplateRef<unknown>;
+    trackByID: (_index: number, item: T) => string;
+    /** Applies search/sort/filtering and pagination to the current rows. */
+    protected abstract applyFilter(searchForItems: boolean): void;
+    /** Runs after pageSize is set but before the first {@link applyFilter}. */
+    protected beforeInitialFilter(): void;
+    /**
+     * Resolves translation keys to display strings via {@link MnLanguageService}.
+     * Subclasses override to resolve their own keys; call `super` to keep these.
+     */
+    protected resolveTranslationKeys(): void;
+    protected applyPagination(): void;
+    /** Client-side search filtering shared by list and grid. */
+    protected applySearchFilter(items: T[]): T[];
+    protected processLoadedRows(rows: T[]): void;
+    protected validateDataSource(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MnCollectionBase<any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MnCollectionBase<any, any>, never, never, { "dataSource": { "alias": "dataSource"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Extends {@link MnCollectionBase} with single/multi row selection, shared by
+ * components that support it (table, list). Grid extends the plain base instead.
+ */
+declare abstract class MnSelectableCollectionBase<T, DS extends MnSelectableCollectionDataSource<T>> extends MnCollectionBase<T, DS> {
+    selectionChange: EventEmitter<T[]>;
+    selectedIds: Set<string>;
+    get allSelected(): boolean;
+    get hasSelection(): boolean;
+    get isMultiSelect(): boolean;
+    isSelected(item: T): boolean;
+    toggle(item: T): void;
+    toggleAll(): void;
+    /** Seeds selection from `initialSelectedIds` before the first filter pass. */
+    protected beforeInitialFilter(): void;
+    protected emitSelection(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MnSelectableCollectionBase<any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MnSelectableCollectionBase<any, any>, never, never, {}, { "selectionChange": "selectionChange"; }, never, never, true, never>;
+}
+
+/**
+ * Presentational pagination footer shared by every MnLib collection component
+ * (table, list, grid): the load-more button, the page-size selector and the
+ * page navigator. It holds no state — the host component owns pagination state
+ * (via {@link import('./mn-collection-base.directive').MnCollectionBase}) and
+ * reacts to the outputs.
+ */
+declare class MnCollectionPagination {
+    /** Prefix for the page-size select's id, keeping it unique per host. */
+    idPrefix: string;
+    isPaginated: boolean;
+    isServerPaginated: boolean;
+    showLoadMore: boolean;
+    loadingMoreRows: boolean;
+    currentPage: number;
+    pageSize: number;
+    totalPages: number;
+    totalItemCount: number;
+    visiblePages: number[];
+    pageSizeSelectOptions: MnSelectOption<number>[];
+    labels?: MnCollectionLabels;
+    loadMore: EventEmitter<void>;
+    pageChange: EventEmitter<number>;
+    pageSizeChange: EventEmitter<number>;
+    get showPagination(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MnCollectionPagination, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MnCollectionPagination, "mn-collection-pagination", never, { "idPrefix": { "alias": "idPrefix"; "required": false; }; "isPaginated": { "alias": "isPaginated"; "required": false; }; "isServerPaginated": { "alias": "isServerPaginated"; "required": false; }; "showLoadMore": { "alias": "showLoadMore"; "required": false; }; "loadingMoreRows": { "alias": "loadingMoreRows"; "required": false; }; "currentPage": { "alias": "currentPage"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "totalPages": { "alias": "totalPages"; "required": false; }; "totalItemCount": { "alias": "totalItemCount"; "required": false; }; "visiblePages": { "alias": "visiblePages"; "required": false; }; "pageSizeSelectOptions": { "alias": "pageSizeSelectOptions"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; }, { "loadMore": "loadMore"; "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; }, never, never, true, never>;
+}
+
+declare enum ColumnSortType {
+    ALPHABETICAL = "ALPHABETICAL",
+    NUMERICAL = "NUMERICAL",
+    DATE = "DATE",
+    NONE = "NONE"
+}
+type SortState = {
+    columnKey: string;
+    direction: 'asc' | 'desc';
+};
+type TableAppearance = {
+    striped?: boolean;
+    hover?: boolean;
+    compact?: boolean;
+    bordered?: boolean;
+};
+type ColumnFilterType = 'text' | 'select';
+type ColumnFilterOption = {
+    label: string;
+    value: string;
+};
+/**
+ * Customizes the loading-skeleton placeholder rendered in a column's cells.
+ * Either a partial {@link MnSkeletonProps} (shape/width/height/animated) or a
+ * `TemplateRef` for a fully custom placeholder. When omitted, a text-shaped
+ * skeleton at 75% width is used (matching the previous default).
+ */
+type ColumnSkeleton = Partial<MnSkeletonProps> | TemplateRef<unknown>;
+type ColumnDefinition<T> = {
+    key: string;
+    header: string | TemplateRef<unknown>;
+    /** Translation key for the column header. When set, mn-table resolves it via MnLanguageService and keeps it updated on locale change. */
+    headerKey?: string;
+    cell: ((row: T) => string) | TemplateRef<unknown>;
+    /** Alternative cell renderer shown below the given breakpoint. When set, `cell` is hidden below this breakpoint and `cellSm` is shown instead. */
+    cellSm?: {
+        below: 'sm' | 'md' | 'lg';
+        cell: ((row: T) => string) | TemplateRef<unknown>;
+    };
+    sortType?: ColumnSortType;
+    getRawValueToSort?: (row: T) => unknown;
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+    hiddenBelow?: 'sm' | 'md' | 'lg';
+    /** Whether this column supports per-column filtering. */
+    filterable?: boolean;
+    /** Type of filter input: 'text' for free-text, 'select' for dropdown. Defaults to 'text'. */
+    filterType?: ColumnFilterType;
+    /** Options for 'select' filter type. */
+    filterOptions?: ColumnFilterOption[];
+    /** Placeholder text for the filter input. */
+    filterPlaceholder?: string;
+    /** Translation key for the filter placeholder. When set, mn-table resolves it via MnLanguageService. */
+    filterPlaceholderKey?: string;
+    /** Whether the filter input is disabled. */
+    filterDisabled?: boolean;
+    /** Autocomplete attribute for the filter input. */
+    filterAutocomplete?: string;
+    /** Maximum character length for text filter inputs. */
+    filterMaxLength?: number;
+    /** Custom filter function. Receives the row and the current filter value. */
+    filterFn?: (row: T, filterValue: string) => boolean;
+    /** Customizes the loading-skeleton placeholder shown in this column's cells while data loads. */
+    skeleton?: ColumnSkeleton;
+};
+type TableDataSource<T> = MnSelectableCollectionDataSource<T> & {
+    columns: ColumnDefinition<T>[];
+    defaultSort?: SortState;
+    onRowClick?: (row: T) => void;
+    appearance?: TableAppearance;
+    /** Template rendered on the left side of the toolbar (before the search field). */
+    toolbarLeftTemplate?: TemplateRef<unknown>;
+    /** Template rendered on the right side of the toolbar (after the search field). */
+    toolbarRightTemplate?: TemplateRef<unknown>;
+};
+/** @deprecated Use {@link MnCollectionLabels}. */
+type TableLabels = MnCollectionLabels;
+
+/** Map of column key to its current filter value. */
+type ColumnFilterState = Record<string, string | undefined>;
+declare class MnTable<T = object> extends MnSelectableCollectionBase<T, TableDataSource<T>> {
+    sortChange: EventEmitter<SortState | null>;
+    rowClick: EventEmitter<T>;
+    currentSort: SortState | null;
+    /** Per-column filter values keyed by column key. */
+    columnFilters: ColumnFilterState;
+    protected readonly componentName = "MnTable";
+    protected get trackedToolbarTemplate(): TemplateRef<unknown> | undefined;
+    /** Updates a column filter value and re-applies filtering. */
+    onColumnFilter(columnKey: string, value: string): void;
+    /** Filter options formatted for mn-select for a given column. */
+    getFilterSelectOptions(column: ColumnDefinition<T>): MnSelectOption<string>[];
+    /** Whether any column has filtering enabled. */
+    get hasColumnFilters(): boolean;
+    sort(column: ColumnDefinition<T>): void;
+    onRowClick(row: T): void;
+    /**
+     * Resolves the skeleton placeholder config for a column's cells.
+     * Falls back to a text-shaped bar at 75% width (the previous default); any
+     * fields the column provides override that default.
+     */
+    getColumnSkeletonData(column: ColumnDefinition<T>): Partial<MnSkeletonProps>;
+    getSortIcon(column: ColumnDefinition<T>): string;
+    isSortable(column: ColumnDefinition<T>): boolean;
+    /** Sets sort/filter state seeded from the data source before the first filter pass. */
+    protected beforeInitialFilter(): void;
+    getCellValue(column: ColumnDefinition<T>, row: T): string;
+    /** Returns the small-screen cell value for a column with cellSm defined. */
+    getCellSmValue(column: ColumnDefinition<T>, row: T): string;
+    trackByKey: (_index: number, column: ColumnDefinition<T>) => string;
+    readonly tableClasses = "w-full border-collapse overflow-y-hidden";
+    get totalColumnCount(): number;
+    /**
+     * Resolves table-specific translation keys (column headers/filters) plus the
+     * shared keys handled by the base.
+     */
+    protected resolveTranslationKeys(): void;
+    protected applyFilter(searchForItems: boolean): void;
+    private applySorting;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MnTable<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MnTable<any>, "mn-table", never, {}, { "sortChange": "sortChange"; "rowClick": "rowClick"; }, never, never, true, never>;
+}
+
+/**
+ * Attribute directive that applies responsive-hiding classes to table cells/headers.
+ * Hides the element by default and shows it as `table-cell` at the specified breakpoint.
+ *
+ * Uses a static class map so Tailwind CSS can detect the full class names at build time.
+ *
+ * Usage: `<td [mnHiddenBelow]="column.hiddenBelow">`
+ */
+declare class MnHiddenBelowDirective implements OnChanges {
+    /** The breakpoint below which the element is hidden. */
+    mnHiddenBelow: 'sm' | 'md' | 'lg' | undefined;
+    private readonly el;
+    private readonly renderer;
+    private appliedClasses;
+    /** Static mapping of breakpoints to their full Tailwind class names. */
+    private readonly classMap;
+    ngOnChanges(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MnHiddenBelowDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MnHiddenBelowDirective, "[mnHiddenBelow]", never, { "mnHiddenBelow": { "alias": "mnHiddenBelow"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Attribute directive that hides an element below the given breakpoint and shows it at/above.
+ * Uses `hidden` + `{bp}:inline` so the element is invisible on small screens.
+ *
+ * Usage: `<span [mnShowAbove]="'sm'">`
+ */
+declare class MnShowAboveDirective implements OnChanges {
+    /** The breakpoint at/above which the element becomes visible. */
+    mnShowAbove: 'sm' | 'md' | 'lg' | undefined;
+    private readonly el;
+    private readonly renderer;
+    private appliedClasses;
+    /** Static mapping of breakpoints to their full Tailwind class names. */
+    private readonly classMap;
+    ngOnChanges(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MnShowAboveDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MnShowAboveDirective, "[mnShowAbove]", never, { "mnShowAbove": { "alias": "mnShowAbove"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Attribute directive that shows an element below the given breakpoint and hides it at/above.
+ * Uses `inline` by default + `{bp}:hidden` so the element is only visible on small screens.
+ *
+ * Usage: `<span [mnShowBelow]="'sm'">`
+ */
 declare class MnShowBelowDirective implements OnChanges {
     /** The breakpoint below which the element is visible. */
     mnShowBelow: 'sm' | 'md' | 'lg' | undefined;
@@ -3407,7 +3700,7 @@ declare class MnModalShellComponent<TResult = unknown> implements OnInit, AfterV
     asForm(config: ModalConfig<TResult>): FormModalConfig;
     asConfirmation(config: ModalConfig<TResult>): ConfirmationModalConfig;
     asCustom(config: ModalConfig<TResult>): CustomModalConfig;
-    get hostClasses(): string;
+    private static readonly SWIPE_DISMISS_THRESHOLD;
     /** Whether this modal renders as a bottom sheet on small screens (default: true). */
     get isMobileSheet(): boolean;
     /** Triggers the closing animation. Deferred to avoid NG0100 when called during a CD cycle. */
@@ -3415,11 +3708,14 @@ declare class MnModalShellComponent<TResult = unknown> implements OnInit, AfterV
     onEscapeKey(event: Event): void;
     onBackdropClick(): void;
     onCloseButtonClick(): void;
-    private static readonly SWIPE_DISMISS_THRESHOLD;
+    /** True once a swipe has crossed the dismiss threshold — slides the sheet off-screen
+     *  via the transform transition instead of replaying the slide-up keyframe. */
+    swipeDismissing: boolean;
     /** Current downward drag offset (px) applied to the sheet while swiping. */
     sheetDragY: number;
     /** True while the user is actively dragging the grabber (disables snap transition). */
     isDraggingSheet: boolean;
+    get hostClasses(): string;
     private dragStartY;
     /** Whether the sheet can be dismissed at all (drives whether the swipe is armed). */
     private get canClose();
@@ -3713,132 +4009,124 @@ declare class MnConfirmationBodyComponent<TResult = boolean> implements OnInit {
 declare class MnCustomBodyHostComponent implements OnInit {
     config: CustomModalConfig;
     modalRef: MnModalRef<unknown>;
-    container: ViewContainerRef;
-    private componentRef?;
-    ngOnInit(): void;
-    private loadContent;
-    attachComponent(component: Type<unknown>): void;
-    attachTemplate(template: TemplateRef<unknown>): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MnCustomBodyHostComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MnCustomBodyHostComponent, "mn-custom-body-host", never, { "config": { "alias": "config"; "required": false; }; "modalRef": { "alias": "modalRef"; "required": false; }; }, {}, never, never, true, never>;
-}
-
-type ListAppearance = {
-    /** Show a divider between items. Defaults to true. */
-    dividers?: boolean;
-    /** Highlight item on hover. Defaults to true. */
-    hover?: boolean;
-    /** Use compact (smaller) padding. */
-    compact?: boolean;
-    /** Show a border around the list. */
-    bordered?: boolean;
-};
-type ListDataSource<T> = {
-    dataRows: BehaviorSubject<T[]>;
-    getID: (row: T) => string;
-    /** Template used to render each list item. Receives the item as `$implicit` and `data`. */
-    itemTemplate: TemplateRef<unknown>;
-    emptyMessage: string;
-    emptyTemplate?: TemplateRef<unknown>;
-    isDataLoading: boolean;
-    canSearch: boolean;
-    searchPlaceholder?: string;
-    isInSearch?: (row: T, searchValue: string) => boolean;
-    searchForAdditionalItems?: (searchValue: string) => Promise<T[]>;
-    paginationMode?: 'none' | 'load-more' | 'paginated' | 'client-side-pagination' | 'infinite-scroll';
-    paginationStrategy?: PaginationStrategy;
-    loadAdditionalRows?: () => Promise<T[]>;
-    /** Number of items per page when paginationMode is 'paginated'. Defaults to 10. */
-    pageSize?: number;
-    /** Options for the page-size selector dropdown. Defaults to [5, 10, 25, 50]. */
-    pageSizeOptions?: number[];
-    /** Callback invoked when the user changes the page size via the dropdown. */
-    onPageSizeChange?: (newSize: number) => void;
-    /**
-     * Total number of items on the server.
-     * When set, pagination and infinite-scroll use this instead of filteredItems.length.
-     */
-    totalItems?: number;
-    /**
-     * Callback invoked when the user navigates to a different page.
-     * When provided, the list delegates pagination to the consumer (server-side).
-     */
-    onPageChange?: (page: number) => void;
-    /**
-     * Callback invoked when the user types in the search box (server-side search).
-     * When provided, the list skips client-side filtering and delegates to the consumer.
-     */
-    onServerSearch?: (searchValue: string) => void;
-    /**
-     * Callback invoked when the user scrolls to the bottom in infinite-scroll mode.
-     * When provided, the list delegates loading more rows to the consumer (server-side).
-     */
-    onLoadMore?: () => void;
-    selectionMode?: 'none' | 'single' | 'multi';
-    selectedRows?: BehaviorSubject<T[]>;
-    /** IDs to pre-select when the list initializes. */
-    initialSelectedIds?: string[];
+    container: ViewContainerRef;
+    private componentRef?;
+    ngOnInit(): void;
+    private loadContent;
+    attachComponent(component: Type<unknown>): void;
+    attachTemplate(template: TemplateRef<unknown>): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MnCustomBodyHostComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MnCustomBodyHostComponent, "mn-custom-body-host", never, { "config": { "alias": "config"; "required": false; }; "modalRef": { "alias": "modalRef"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Customizes the loading-skeleton placeholder rendered for each list item.
+ * Either a set of skeleton lines (each a partial {@link MnSkeletonProps}) stacked
+ * vertically, or a `TemplateRef` for a fully custom placeholder. When omitted,
+ * two text-shaped lines (75% and 50% width) are used, matching the previous default.
+ */
+type ListSkeleton = {
+    lines: Partial<MnSkeletonProps>[];
+} | TemplateRef<unknown>;
+type ListAppearance = {
+    /** Show a divider between items. Defaults to true. */
+    dividers?: boolean;
+    /** Highlight item on hover. Defaults to true. */
+    hover?: boolean;
+    /** Use compact (smaller) padding. */
+    compact?: boolean;
+    /** Show a border around the list. */
+    bordered?: boolean;
+};
+type ListDataSource<T> = MnSelectableCollectionDataSource<T> & {
+    /** Template used to render each list item. Receives the item as `$implicit` and `data`. */
+    itemTemplate: TemplateRef<unknown>;
+    /** Customizes the loading-skeleton placeholder shown for each item while data loads. */
+    skeleton?: ListSkeleton;
     onItemClick?: (item: T) => void;
     appearance?: ListAppearance;
     toolbarTemplate?: TemplateRef<unknown>;
-    labels?: ListLabels;
-};
-type ListLabels = {
-    loadMore?: string;
-    rowsPerPage?: string;
 };
+/** @deprecated Use {@link MnCollectionLabels}. */
+type ListLabels = MnCollectionLabels;
 
-declare class MnList<T = unknown> implements OnInit, OnDestroy, DoCheck {
-    dataSource: ListDataSource<T>;
-    selectionChange: EventEmitter<T[]>;
+declare class MnList<T = unknown> extends MnSelectableCollectionBase<T, ListDataSource<T>> {
     itemClick: EventEmitter<T>;
-    filteredItems: T[];
-    paginatedItems: T[];
-    searchValue: string;
-    loadingMoreRows: boolean;
-    selectedIds: Set<string>;
-    currentPage: number;
-    pageSize: number;
-    private cdr;
-    private dataSubscription?;
-    private searchSubject;
-    private searchSubscription?;
-    /** Tracks the previous toolbar template reference for change detection. */
-    private previousToolbarTemplate?;
-    ngDoCheck(): void;
-    get showLoadMore(): boolean;
-    ngOnDestroy(): void;
-    get isPaginated(): boolean;
-    isSelected(item: T): boolean;
-    toggleItem(item: T): void;
-    toggleAll(): void;
-    get allSelected(): boolean;
-    get hasSelection(): boolean;
-    get isMultiSelect(): boolean;
+    protected readonly componentName = "MnList";
+    /** Skeleton lines rendered for each placeholder item, falling back to the default two-bar layout. */
+    get skeletonLines(): Partial<MnSkeletonProps>[];
     onItemClick(item: T): void;
-    /** Whether the list is in server-side paginated mode (always true when paginated or load-more). */
-    get isServerPaginated(): boolean;
-    /** Total number of items, accounting for server-side pagination. */
-    get totalItemCount(): number;
-    get totalPages(): number;
-    ngOnInit(): void;
-    onSearch(searchString: string): void;
-    loadMoreRows(): void;
-    get resolvedPageSizeOptions(): number[];
-    /** Page-size options formatted for mn-select. */
-    get pageSizeSelectOptions(): MnSelectOption<number>[];
-    goToPage(page: number): void;
-    onPageSizeChange(newSize: number): void;
-    get visiblePages(): number[];
-    trackByID: (_index: number, item: T) => string;
-    get skeletonRows(): number[];
-    private applyPagination;
-    private applyFilter;
-    private processLoadedRows;
-    private validateDataSource;
-    private emitSelection;
+    protected get trackedToolbarTemplate(): TemplateRef<unknown> | undefined;
+    protected applyFilter(searchForItems: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MnList<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MnList<any>, "mn-list", never, { "dataSource": { "alias": "dataSource"; "required": false; }; }, { "selectionChange": "selectionChange"; "itemClick": "itemClick"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MnList<any>, "mn-list", never, {}, { "itemClick": "itemClick"; }, never, never, true, never>;
+}
+
+/**
+ * Controls the responsive card layout. Provide **either** `cols` (explicit column
+ * counts per breakpoint) **or** `minCardWidth` (CSS `auto-fit`/`minmax`); when
+ * `minCardWidth` is set it takes precedence and `cols` is ignored.
+ *
+ * Breakpoints match Tailwind defaults: sm 640px, md 768px, lg 1024px, xl 1280px.
+ */
+type GridLayout = {
+    /** Explicit column count per breakpoint. Each falls back to the next-smaller one. */
+    cols?: {
+        base?: number;
+        sm?: number;
+        md?: number;
+        lg?: number;
+        xl?: number;
+    };
+    /** Minimum card width, e.g. '18rem'. Enables auto-fit layout; ignores `cols`. */
+    minCardWidth?: string;
+    /** Gap between cards. Defaults to '1rem'. */
+    gap?: string;
+    /**
+     * Caps the number of cards shown (preview mode, e.g. "first 3"). Intended for
+     * `paginationMode: 'none'`; it slices the visible set and the pager stays hidden.
+     */
+    maxItems?: number;
+};
+/**
+ * Customizes the loading-skeleton placeholder rendered for each card while data
+ * loads. Provide a `TemplateRef` to profile the card's shape (the primary, most
+ * useful form), or a set of stacked skeleton lines. When omitted, a default card
+ * placeholder (image block + two text bars) is rendered.
+ */
+type GridSkeleton = TemplateRef<unknown> | {
+    lines: Partial<MnSkeletonProps>[];
+};
+type GridDataSource<T> = MnCollectionDataSource<T> & {
+    /** Template used to render each card. Receives the item as `$implicit` and `data`. */
+    cardTemplate: TemplateRef<unknown>;
+    /** Customizes the loading-skeleton card shown while data loads. */
+    skeleton?: GridSkeleton;
+    /** Responsive layout configuration. */
+    layout?: GridLayout;
+    onItemClick?: (item: T) => void;
+    toolbarTemplate?: TemplateRef<unknown>;
+};
+
+/**
+ * Responsive card-grid component. Shares the collection chrome (search, every
+ * pagination mode, loading skeleton, empty state, toolbar, i18n) with
+ * {@link import('../mn-list').MnList} and {@link import('../mn-table').MnTable}
+ * via {@link MnCollectionBase}, and lays items out as cards instead of rows.
+ * Selection is intentionally not supported.
+ */
+declare class MnGrid<T = unknown> extends MnCollectionBase<T, GridDataSource<T>> {
+    itemClick: EventEmitter<T>;
+    protected readonly componentName = "MnGrid";
+    /** Whether the grid uses auto-fit (minCardWidth) instead of explicit columns. */
+    get isAutoLayout(): boolean;
+    /** Skeleton lines for the default/lines placeholder; null when a custom template is used. */
+    get skeletonLines(): Partial<MnSkeletonProps>[];
+    protected get trackedToolbarTemplate(): TemplateRef<unknown> | undefined;
+    onItemClick(item: T): void;
+    protected applyFilter(searchForItems: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MnGrid<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MnGrid<any>, "mn-grid", never, {}, { "itemClick": "itemClick"; }, never, never, true, never>;
 }
 
 /**
@@ -4678,45 +4966,6 @@ declare class MnIconAttributes {
     static ɵdir: i0.ɵɵDirectiveDeclaration<MnIconAttributes, "mn-icon[mnIconPistol], mn-icon[mnIconPending]", never, {}, {}, never, never, true, never>;
 }
 
-type MnSkeletonShape = 'rectangle' | 'circle' | 'text';
-type MnSkeletonProps = {
-    shape?: MnSkeletonShape;
-    animated?: boolean;
-    width?: string;
-    height?: string;
-};
-
-declare class MnSkeleton {
-    data: Partial<MnSkeletonProps>;
-    get hostClasses(): string;
-    get width(): string | null;
-    get height(): string | null;
-    get isAnimated(): boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MnSkeleton, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MnSkeleton, "mn-skeleton", never, { "data": { "alias": "data"; "required": false; }; }, {}, never, never, true, never>;
-}
-
-declare const mnSkeletonVariants: tailwind_variants.TVReturnType<{
-    shape: {
-        rectangle: string;
-        circle: string;
-        text: string;
-    };
-}, undefined, "bg-base-300 relative overflow-hidden", {
-    shape: {
-        rectangle: string;
-        circle: string;
-        text: string;
-    };
-}, undefined, tailwind_variants.TVReturnType<{
-    shape: {
-        rectangle: string;
-        circle: string;
-        text: string;
-    };
-}, undefined, "bg-base-300 relative overflow-hidden", unknown, unknown, undefined>>;
-type MnSkeletonVariantProps = VariantProps<typeof mnSkeletonVariants>;
-
 /**
  * Types for mn-lib configuration.
  */
@@ -5193,141 +5442,6 @@ declare abstract class MnHttpService {
     protected toHttpParams(query?: MnQueryParams): HttpParams | undefined;
 }
 
-/**
- * A marker object used in config values to indicate that the value
- * should be resolved via the MnLanguageService.
- *
- * Example in mn-config.json5:
- *   label: { $translate: "form.email.label" }
- */
-type MnTranslatable = {
-    $translate: string;
-    params?: Record<string, string | number>;
-};
-/**
- * A config value that is either a plain value or a translatable marker.
- */
-type MnConfigValue<T = string> = T | MnTranslatable;
-/**
- * A flat key-value map of translations for a single locale.
- * Supports nested keys via dot notation: "form.email.label"
- */
-type MnTranslationMap = Record<string, string>;
-/**
- * All loaded translations keyed by locale code (e.g. "en", "nl", "de").
- */
-type MnTranslations = Record<string, MnTranslationMap>;
-/**
- * Configuration for the language provider.
- */
-type MnLanguageConfig = {
-    /** URL pattern for loading translation files. Use `{locale}` as placeholder. e.g. "assets/i18n/{locale}.json" */
-    urlPattern: string;
-    /** The default/fallback locale. */
-    defaultLocale: string;
-    /** Locales to preload at bootstrap. */
-    preload?: string[];
-    /**
-     * Optional mapping of domain hostnames to locale codes.
-     * When set, the service will use the current domain to determine the initial locale.
-     * Example: { "example.nl": "nl", "example.de": "de", "example.com": "en" }
-     */
-    domainLocaleMap?: Record<string, string>;
-    /** Whether to enable debug logging. */
-    debug?: boolean;
-};
-/**
- * Type guard: checks whether a value is a translatable marker object.
- */
-declare function isTranslatable(value: unknown): value is MnTranslatable;
-
-declare class MnLanguageService {
-    private readonly http;
-    private readonly appRef;
-    private _translations;
-    private _locale$;
-    private _urlPattern;
-    private _debug;
-    /** Observable of the current active locale. */
-    readonly locale$: Observable<string>;
-    /** Current active locale. */
-    get locale(): string;
-    /**
-     * Enable or disable debug logging.
-     */
-    setDebug(enabled: boolean): void;
-    /**
-     * Configure the URL pattern used to fetch translation files.
-     * Use `{locale}` as placeholder, e.g. `"assets/i18n/{locale}.json"`.
-     */
-    configure(urlPattern: string): void;
-    /**
-     * Load translations for a locale from the configured URL pattern.
-     * If translations are already loaded for this locale, this is a no-op.
-     */
-    loadLocale(locale: string): Promise<void>;
-    /**
-     * Switch the active locale. Loads translations if not yet loaded.
-     */
-    setLocale(locale: string): Promise<void>;
-    /**
-     * Register translations for a locale directly from code (no HTTP needed).
-     */
-    registerTranslations(locale: string, translations: MnTranslationMap): void;
-    /**
-     * Translate a key using the current locale, with optional parameter interpolation.
-     * Falls back to the key itself if no translation is found.
-     *
-     * Interpolation replaces `{{paramName}}` with the provided value.
-     */
-    translate(key: string, params?: Record<string, string | number>): string;
-    /**
-     * Helper to retrieve a value from a potentially nested translation map using a dot-notated key.
-     */
-    private getValueFromMap;
-    /**
-     * Shorthand alias for `translate`.
-     */
-    t(key: string, params?: Record<string, string | number>): string;
-    /**
-     * Resolve the effective default locale from a domain-to-locale map.
-     * Matches `window.location.hostname` against the map keys.
-     * Returns the mapped locale, or the provided fallback if no match is found.
-     */
-    resolveLocaleForDomain(domainLocaleMap: Record<string, string> | undefined, fallback: string): string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MnLanguageService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<MnLanguageService>;
-}
-
-/**
- * Provides an APP_INITIALIZER that configures the MnLanguageService and
- * preloads the requested locales during application bootstrap.
- *
- * Usage in app.config.ts:
- *   ...provideMnLanguage({
- *     urlPattern: 'assets/i18n/{locale}.json',
- *     defaultLocale: 'en',
- *     preload: ['en', 'nl'],
- *   })
- */
-declare function provideMnLanguage(config: MnLanguageConfig): Provider[];
-
-/**
- * Pipe that translates a key via MnLanguageService.
- *
- * Usage in templates:
- *   {{ 'form.email.label' | mnTranslate }}
- *   {{ 'greeting' | mnTranslate:{ name: 'World' } }}
- *
- * Note: This pipe is impure so it re-evaluates when the locale changes.
- */
-declare class MnTranslatePipe implements PipeTransform {
-    private readonly lang;
-    transform(key: string, params?: Record<string, string | number>): string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MnTranslatePipe, never>;
-    static ɵpipe: i0.ɵɵPipeDeclaration<MnTranslatePipe, "mnTranslate", true>;
-}
-
 type MnPreviewMessage = {
     type: 'mn-config-update' | 'mn-translations-update';
     config?: Record<string, unknown>;
@@ -5345,5 +5459,5 @@ type MnPreviewMessage = {
  */
 declare function enableMnPreviewMode(configService: MnConfigService, langService: MnLanguageService, allowedOrigins?: string[]): void;
 
-export { API_BASE_URL, ActionStyle, BackdropMode, BaseModalBuilder, CALENDAR_CONFIG, CALENDAR_DATE_FORMATTER, CalendarDayComponent, CalendarEventComponent, CalendarEventDefaultComponent, CalendarEventLayoutService, CalendarMonthComponent, CalendarUtility, CalendarView, CalendarViewComponent, CalendarWeekComponent, CloseMode, ColumnSortType, ConfirmationModalBuilder, ConfirmationTone, CrudService, CustomModalBuilder, DEFAULT_CALENDAR_CONFIG, DEFAULT_MN_ALERT_CONFIG, DefaultCalendarDateFormatter, FieldAppearance, FieldKind, FormLayoutMode, FormModalBuilder, KeyboardMode, MN_ALERT_CONFIG, MN_CALENDAR_COMPONENT_NAME, MN_CALENDAR_CONFIG, MN_CHECKBOX_CONFIG, MN_DATETIME_CONFIG, MN_ICON_MAP, MN_INPUT_FIELD_CONFIG, MN_INSTANCE_ID, MN_LIB_DUAL_HORIZONTAL_IMAGE, MN_MULTI_SELECT_CONFIG, MN_SECTION_PATH, MN_SELECT_CONFIG, MN_TEXTAREA_CONFIG, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnBadge, MnButton, MnCheckbox, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDatetime, MnDualHorizontalImage, MnFormBodyComponent, MnHiddenBelowDirective, MnHttpService, MnIcon, MnIconAttributes, MnInformationCard, MnInputField, MnInstanceDirective, MnLanguageService, MnList, MnModalRef, MnModalService, MnModalShellComponent, MnMultiSelect, MnSectionDirective, MnSelect, MnShowAboveDirective, MnShowBelowDirective, MnSkeleton, MnTabComponent, MnTable, MnTextarea, MnTranslatePipe, MnWizardBodyComponent, ModalBuilder, ModalCloseReason, ModalIntent, ModalKind, ModalSize, NavigationDirection, OptionState, SelectionMode, StepBuilder, StepState, SubmitMode, UpcomingEventRowComponent, UpcomingEventsComponent, ValidationCode, ValidationStatus, WizardFlowMode, WizardModalBuilder, dateTimeAdapter, defaultTextAdapter, enableMnPreviewMode, isTranslatable, mnAlertVariants, mnBadgeVariants, mnButtonVariants, mnCheckboxVariants, mnCheckboxWrapperVariants, mnDatetimeVariants, mnIconVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnSelectVariants, mnSkeletonVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnCalendarConfig, provideMnComponentConfig, provideMnConfig, provideMnLanguage, resolveCalendarConfig };
-export type { AnimationOptions, ApiError, BaseModalConfig, CalendarButton, CalendarConfig, CalendarDateFormatter, CalendarEvent, CalendarEventData, CancellationActionConfig, CheckboxFieldConfig, ColorFieldConfig, ColorPreset, ColumnDay, ColumnDefinition, ColumnFilterOption, ColumnFilterState, ColumnFilterType, ConfirmationActionConfig, ConfirmationModalConfig, CrudConfig, CurrentTimeCalendarEvent, CursorPaginationStrategy, CustomFieldConfig, CustomModalConfig, DateFieldConfig, DatetimeFieldConfig, FailureResult, FieldDataSource, FieldRequiredCondition, FieldValidator, FieldVisibilityCondition, FileFieldConfig, FormFieldConfig, FormFieldGroup, FormModalConfig, FormRow, FormRowField, FormValidator, HourRow, ListAppearance, ListDataSource, ListLabels, MnAlert, MnAlertConfig, MnAlertId, MnAlertKind, MnAlertTemplateContext, MnAlertVariants, MnBadgeTypes, MnBadgeVariants, MnButtonTypes, MnButtonVariants, MnCheckboxErrorMessageData, MnCheckboxErrorMessagesData, MnCheckboxProps, MnCheckboxUIConfig, MnCheckboxVariants, MnCheckboxWrapperVariants, MnConfigFile, MnConfigSettings, MnConfigValue, MnDatetimeErrorMessageData, MnDatetimeErrorMessagesData, MnDatetimeMode, MnDatetimeProps, MnDatetimeUIConfig, MnDatetimeVariants, MnDomAttrs, MnDualHorizontalImageConfig, MnDualHorizontalImageTypes, MnErrorMessageData, MnErrorMessageFn, MnErrorMessagesData, MnIconTypes, MnIconVariants, MnImageType, MnInformationCardBaseData, MnInformationCardData, MnInformationCardVariants, MnInputAdapter, MnInputBaseProps, MnInputDateTimeProps, MnInputFieldProps, MnInputFieldUIConfig, MnInputProps, MnInputType, MnInputVariants, MnLanguageConfig, MnMultiSelectErrorMessageData, MnMultiSelectErrorMessagesData, MnMultiSelectOption, MnMultiSelectProps, MnMultiSelectUIConfig, MnMultiSelectVariants, MnPreviewMessage, MnQueryParams, MnSelectErrorMessageData, MnSelectErrorMessagesData, MnSelectOption, MnSelectProps, MnSelectUIConfig, MnSelectVariants, MnShowInput, MnSkeletonProps, MnSkeletonShape, MnSkeletonVariantProps, MnTabDataSource, MnTabItem, MnTextareaErrorMessageData, MnTextareaErrorMessagesData, MnTextareaProps, MnTextareaUIConfig, MnTextareaVariants, MnTranslatable, MnTranslationMap, MnTranslations, MnValidationErrorArgs, ModalCancelHandler, ModalCloseEvent, ModalConfig, ModalFooterAction, ModalI18nLabels, ModalInputMap, ModalPollingConfig, ModalRef, ModalResultHandler, ModalStepId, MonthItem, MultiSelectFieldConfig, MultiSelectTableFieldConfig, NumberFieldConfig, OffsetPaginationStrategy, PaginationStrategy, PasswordFieldConfig, Primitive, QueryParams, QueryValue, RatingFieldConfig, Result, ResultMeta, SelectFieldConfig, SelectOption, SingleSelectTableFieldConfig, SliderFieldConfig, SortState, StepBodyConfig, StepGuard, StepValidator, SuccessResult, TableAppearance, TableDataSource, TableLabels, TextFieldConfig, TextareaFieldConfig, ValidationResult, WizardBeforeCompleteValidator, WizardModalConfig, WizardResult, WizardStepChangeEvent, WizardStepChangeHandler, WizardStepConfig };
+export { API_BASE_URL, ActionStyle, BackdropMode, BaseModalBuilder, CALENDAR_CONFIG, CALENDAR_DATE_FORMATTER, CalendarDayComponent, CalendarEventComponent, CalendarEventDefaultComponent, CalendarEventLayoutService, CalendarMonthComponent, CalendarUtility, CalendarView, CalendarViewComponent, CalendarWeekComponent, CloseMode, ColumnSortType, ConfirmationModalBuilder, ConfirmationTone, CrudService, CustomModalBuilder, DEFAULT_CALENDAR_CONFIG, DEFAULT_MN_ALERT_CONFIG, DefaultCalendarDateFormatter, FieldAppearance, FieldKind, FormLayoutMode, FormModalBuilder, KeyboardMode, MN_ALERT_CONFIG, MN_CALENDAR_COMPONENT_NAME, MN_CALENDAR_CONFIG, MN_CHECKBOX_CONFIG, MN_DATETIME_CONFIG, MN_ICON_MAP, MN_INPUT_FIELD_CONFIG, MN_INSTANCE_ID, MN_LIB_DUAL_HORIZONTAL_IMAGE, MN_MULTI_SELECT_CONFIG, MN_SECTION_PATH, MN_SELECT_CONFIG, MN_TEXTAREA_CONFIG, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnBadge, MnButton, MnCheckbox, MnCollectionBase, MnCollectionPagination, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDatetime, MnDualHorizontalImage, MnFormBodyComponent, MnGrid, MnHiddenBelowDirective, MnHttpService, MnIcon, MnIconAttributes, MnInformationCard, MnInputField, MnInstanceDirective, MnLanguageService, MnList, MnModalRef, MnModalService, MnModalShellComponent, MnMultiSelect, MnSectionDirective, MnSelect, MnSelectableCollectionBase, MnShowAboveDirective, MnShowBelowDirective, MnSkeleton, MnTabComponent, MnTable, MnTextarea, MnTranslatePipe, MnWizardBodyComponent, ModalBuilder, ModalCloseReason, ModalIntent, ModalKind, ModalSize, NavigationDirection, OptionState, SelectionMode, StepBuilder, StepState, SubmitMode, UpcomingEventRowComponent, UpcomingEventsComponent, ValidationCode, ValidationStatus, WizardFlowMode, WizardModalBuilder, dateTimeAdapter, defaultTextAdapter, enableMnPreviewMode, isTranslatable, mnAlertVariants, mnBadgeVariants, mnButtonVariants, mnCheckboxVariants, mnCheckboxWrapperVariants, mnDatetimeVariants, mnIconVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnSelectVariants, mnSkeletonVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnCalendarConfig, provideMnComponentConfig, provideMnConfig, provideMnLanguage, resolveCalendarConfig };
+export type { AnimationOptions, ApiError, BaseModalConfig, CalendarButton, CalendarConfig, CalendarDateFormatter, CalendarEvent, CalendarEventData, CancellationActionConfig, CheckboxFieldConfig, ColorFieldConfig, ColorPreset, ColumnDay, ColumnDefinition, ColumnFilterOption, ColumnFilterState, ColumnFilterType, ColumnSkeleton, ConfirmationActionConfig, ConfirmationModalConfig, CrudConfig, CurrentTimeCalendarEvent, CursorPaginationStrategy, CustomFieldConfig, CustomModalConfig, DateFieldConfig, DatetimeFieldConfig, FailureResult, FieldDataSource, FieldRequiredCondition, FieldValidator, FieldVisibilityCondition, FileFieldConfig, FormFieldConfig, FormFieldGroup, FormModalConfig, FormRow, FormRowField, FormValidator, GridDataSource, GridLayout, GridSkeleton, HourRow, ListAppearance, ListDataSource, ListLabels, ListSkeleton, MnAlert, MnAlertConfig, MnAlertId, MnAlertKind, MnAlertTemplateContext, MnAlertVariants, MnBadgeTypes, MnBadgeVariants, MnButtonTypes, MnButtonVariants, MnCheckboxErrorMessageData, MnCheckboxErrorMessagesData, MnCheckboxProps, MnCheckboxUIConfig, MnCheckboxVariants, MnCheckboxWrapperVariants, MnCollectionDataSource, MnCollectionLabels, MnConfigFile, MnConfigSettings, MnConfigValue, MnDatetimeErrorMessageData, MnDatetimeErrorMessagesData, MnDatetimeMode, MnDatetimeProps, MnDatetimeUIConfig, MnDatetimeVariants, MnDomAttrs, MnDualHorizontalImageConfig, MnDualHorizontalImageTypes, MnErrorMessageData, MnErrorMessageFn, MnErrorMessagesData, MnIconTypes, MnIconVariants, MnImageType, MnInformationCardBaseData, MnInformationCardData, MnInformationCardVariants, MnInputAdapter, MnInputBaseProps, MnInputDateTimeProps, MnInputFieldProps, MnInputFieldUIConfig, MnInputProps, MnInputType, MnInputVariants, MnLanguageConfig, MnMultiSelectErrorMessageData, MnMultiSelectErrorMessagesData, MnMultiSelectOption, MnMultiSelectProps, MnMultiSelectUIConfig, MnMultiSelectVariants, MnPreviewMessage, MnQueryParams, MnSelectErrorMessageData, MnSelectErrorMessagesData, MnSelectOption, MnSelectProps, MnSelectUIConfig, MnSelectVariants, MnSelectableCollectionDataSource, MnShowInput, MnSkeletonProps, MnSkeletonShape, MnSkeletonVariantProps, MnTabDataSource, MnTabItem, MnTextareaErrorMessageData, MnTextareaErrorMessagesData, MnTextareaProps, MnTextareaUIConfig, MnTextareaVariants, MnTranslatable, MnTranslationMap, MnTranslations, MnValidationErrorArgs, ModalCancelHandler, ModalCloseEvent, ModalConfig, ModalFooterAction, ModalI18nLabels, ModalInputMap, ModalPollingConfig, ModalRef, ModalResultHandler, ModalStepId, MonthItem, MultiSelectFieldConfig, MultiSelectTableFieldConfig, NumberFieldConfig, OffsetPaginationStrategy, PaginationMode, PaginationStrategy, PasswordFieldConfig, Primitive, QueryParams, QueryValue, RatingFieldConfig, Result, ResultMeta, SelectFieldConfig, SelectOption, SingleSelectTableFieldConfig, SliderFieldConfig, SortState, StepBodyConfig, StepGuard, StepValidator, SuccessResult, TableAppearance, TableDataSource, TableLabels, TextFieldConfig, TextareaFieldConfig, ValidationResult, WizardBeforeCompleteValidator, WizardModalConfig, WizardResult, WizardStepChangeEvent, WizardStepChangeHandler, WizardStepConfig };