mn-angular-lib 1.0.136 → 1.0.138

package/fesm2022/mn-angular-lib.mjs

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, inject, HostBinding, Input, Component, ChangeDetectionStrategy, ApplicationRef, APP_INITIALIZER, Pipe, signal, DestroyRef, Optional, SkipSelf, Attribute, Directive, ElementRef, EventEmitter, computed, Output, input, output, Injector, viewChildren, linkedSignal, afterNextRender, Renderer2, ChangeDetectorRef, HostListener, ViewChild, ViewContainerRef, forwardRef, afterEveryRender, TemplateRef, ViewChildren, viewChild, EnvironmentInjector, createComponent, isSignal } from '@angular/core';
+import { InjectionToken, Injectable, inject, HostBinding, Input, Component, ApplicationRef, APP_INITIALIZER, Pipe, ChangeDetectionStrategy, signal, DestroyRef, Optional, SkipSelf, Attribute, Directive, ElementRef, EventEmitter, computed, Output, input, output, Injector, viewChildren, linkedSignal, afterNextRender, Renderer2, ChangeDetectorRef, HostListener, ViewChild, ViewContainerRef, forwardRef, afterEveryRender, TemplateRef, ViewChildren, viewChild, EnvironmentInjector, createComponent, isSignal, effect, untracked, ViewEncapsulation } from '@angular/core';
 export { TemplateRef, Type } from '@angular/core';
 import { BehaviorSubject, firstValueFrom, skip, Subject, debounceTime, of, takeUntil, map, catchError } from 'rxjs';
 import * as i1 from '@angular/common';
 import { CommonModule, NgClass, NgOptimizedImage, NgTemplateOutlet } from '@angular/common';
 import { tv } from 'tailwind-variants';
+import { HttpClient, HttpErrorResponse, HttpStatusCode, HttpParams } from '@angular/common/http';
 import * as i1$1 from '@angular/forms';
 import { NgControl, Validators, FormsModule, NG_VALUE_ACCESSOR, FormBuilder, ReactiveFormsModule } from '@angular/forms';
-import { HttpClient, HttpErrorResponse, HttpStatusCode, HttpParams } from '@angular/common/http';
 import JSON5 from 'json5';
 import { LucideFile, LucideImagePlus, LucideTrash2, LucideUpload, LucideX, LucideCalendarDays, LucideChevronLeft, LucideChevronRight, LucideChevronDown, LucideArrowLeft, LucideArrowRight, LucideCheck, LucideInbox, LucideFilter, LucideDynamicIcon, LucideFunnel, LucideTriangleAlert, LucideCircleAlert } from '@lucide/angular';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -442,7 +442,243 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 args: ['attr.tabindex']
             }] } });
 
+/**
+ * Type guard: checks whether a value is a translatable marker object.
+ */
+function isTranslatable(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        typeof value['$translate'] === 'string');
+}
+
+class MnLanguageService {
+    http = inject(HttpClient);
+    appRef = inject(ApplicationRef);
+    _translations = {};
+    _locale$ = new BehaviorSubject('en');
+    _urlPattern = null;
+    _debug = false;
+    /** Observable of the current active locale. */
+    locale$ = this._locale$.asObservable();
+    /** Current active locale. */
+    get locale() {
+        return this._locale$.value;
+    }
+    /**
+     * Enable or disable debug logging.
+     */
+    setDebug(enabled) {
+        this._debug = enabled;
+        if (enabled) {
+            console.log(`[MnLanguage] Debug mode enabled`);
+        }
+    }
+    /**
+     * Configure the URL pattern used to fetch translation files.
+     * Use `{locale}` as placeholder, e.g. `"assets/i18n/{locale}.json"`.
+     */
+    configure(urlPattern) {
+        if (this._debug) {
+            console.log(`[MnLanguage] Configured urlPattern: ${urlPattern}`);
+        }
+        this._urlPattern = urlPattern;
+    }
+    /**
+     * Load translations for a locale from the configured URL pattern.
+     * If translations are already loaded for this locale, this is a no-op.
+     */
+    async loadLocale(locale) {
+        if (this._translations[locale])
+            return;
+        if (!this._urlPattern) {
+            console.warn(`[MnLanguage] No URL pattern configured. Call configure() or use provideMnLanguage().`);
+            return;
+        }
+        const url = this._urlPattern.replace('{locale}', locale);
+        if (this._debug) {
+            console.log(`[MnLanguage] Loading locale "${locale}" from ${url}`);
+        }
+        try {
+            const map = await firstValueFrom(this.http.get(url));
+            this._translations[locale] = map ?? {};
+            if (this._debug) {
+                console.log(`[MnLanguage] Loaded locale "${locale}"`, this._translations[locale]);
+            }
+        }
+        catch (err) {
+            console.warn(`[MnLanguage] Failed to load translations from ${url}`, err);
+            this._translations[locale] = {};
+        }
+    }
+    /**
+     * Switch the active locale. Loads translations if not yet loaded.
+     */
+    async setLocale(locale) {
+        if (this._debug) {
+            console.log(`[MnLanguage] Setting locale to "${locale}"`);
+        }
+        await this.loadLocale(locale);
+        this._locale$.next(locale);
+        this.appRef.tick();
+    }
+    /**
+     * Register translations for a locale directly from code (no HTTP needed).
+     */
+    registerTranslations(locale, translations) {
+        this._translations[locale] = {
+            ...(this._translations[locale] ?? {}),
+            ...translations,
+        };
+    }
+    /**
+     * 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, params) {
+        const map = this._translations[this.locale] ?? {};
+        let value = this.getValueFromMap(map, key);
+        if (value === undefined) {
+            if (this._debug) {
+                console.warn(`[MnLanguage] Missing translation for key: "${key}" in locale: "${this.locale}"`);
+            }
+            return key;
+        }
+        if (params) {
+            for (const [paramKey, paramValue] of Object.entries(params)) {
+                value = value.replace(new RegExp(`\\{\\{${paramKey}\\}\\}`, 'g'), String(paramValue));
+            }
+        }
+        return value;
+    }
+    /**
+     * Helper to retrieve a value from a potentially nested translation map using a dot-notated key.
+     */
+    getValueFromMap(map, key) {
+        if (map[key] !== undefined)
+            return map[key];
+        const parts = key.split('.');
+        let current = map;
+        for (const part of parts) {
+            if (current === null || typeof current !== 'object')
+                return undefined;
+            current = current[part];
+        }
+        return typeof current === 'string' ? current : undefined;
+    }
+    /**
+     * Translate a key **only if it is defined**, returning `undefined` otherwise.
+     *
+     * {@link translate} deliberately returns the key itself when it is missing, which
+     * makes it unusable for a library's own default labels: a consumer that never
+     * defined `mnCollection.rowsPerPage` would see that raw string in their UI. This
+     * lets a caller try a conventional key and fall back to a readable English default
+     * when the app has not translated it, so components ship translatable strings
+     * without forcing every consumer to define them.
+     *
+     * @param key The dot-notated translation key.
+     * @param params Optional `{{name}}` interpolation values.
+     * @returns The translation, or `undefined` when the key is not defined.
+     */
+    translateIfPresent(key, params) {
+        const map = this._translations[this.locale] ?? {};
+        if (this.getValueFromMap(map, key) === undefined)
+            return undefined;
+        return this.translate(key, params);
+    }
+    /**
+     * Shorthand alias for `translate`.
+     */
+    t(key, params) {
+        return this.translate(key, params);
+    }
+    /**
+     * 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, fallback) {
+        if (!domainLocaleMap || typeof window === 'undefined')
+            return fallback;
+        const hostname = window.location.hostname;
+        return domainLocaleMap[hostname] ?? fallback;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnLanguageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnLanguageService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnLanguageService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * 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'],
+ *   })
+ */
+function provideMnLanguage(config) {
+    return [
+        {
+            provide: APP_INITIALIZER,
+            multi: true,
+            useFactory: (svc) => async () => {
+                if (config.debug) {
+                    svc.setDebug(true);
+                }
+                svc.configure(config.urlPattern);
+                const effectiveLocale = svc.resolveLocaleForDomain(config.domainLocaleMap, config.defaultLocale);
+                const localesToLoad = config.preload ?? [effectiveLocale];
+                await Promise.all(localesToLoad.map(l => svc.loadLocale(l)));
+                await svc.setLocale(effectiveLocale);
+            },
+            deps: [MnLanguageService],
+        },
+    ];
+}
+
+/**
+ * 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.
+ */
+class MnTranslatePipe {
+    lang = inject(MnLanguageService);
+    transform(key, params) {
+        return this.lang.translate(key, params);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTranslatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: MnTranslatePipe, isStandalone: true, name: "mnTranslate", pure: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTranslatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'mnTranslate',
+                    standalone: true,
+                    pure: false,
+                }]
+        }] });
+
 class MnAlertOutletComponent {
+    lang = inject(MnLanguageService);
+    /**
+     * Accessible name for this control. Resolved through the conventional
+     * `mnAlert.close` key so an app can translate it, falling back to English when the
+     * key is not defined rather than leaking the raw key into the UI.
+     */
+    get closeLabel() {
+        return this.lang.translateIfPresent('mnAlert.close') ?? 'Close';
+    }
     template;
     store = inject(MnAlertStore);
     alerts$ = this.store.alerts$;
@@ -462,11 +698,11 @@ class MnAlertOutletComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnAlertOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnAlertOutletComponent, isStandalone: true, selector: "mn-alert-outlet", inputs: { template: "template" }, ngImport: i0, template: "@if (alerts$ | async; as alerts) {\n  <div class=\"fixed top-4 left-0 right-0 z-[9999] flex flex-col gap-3 w-full px-2 sm:px-0 sm:left-auto sm:right-4 sm:max-w-sm\">\n    @for (a of alerts; track trackById($index, a)) {\n      @if (template) {\n        <ng-container\n          [ngTemplateOutlet]=\"template\"\n          [ngTemplateOutletContext]=\"contextFor(a)\">\n        </ng-container>\n      } @else {\n        <div [class]=\"getAlertClasses(a)\" [class.extra]=\"a.cssClass\" class=\"relative\">\n          <div class=\"flex-1 min-w-0 pr-8\">\n            <h4 class=\"font-semibold text-sm\">{{ a.title }}</h4>\n            @if (a.subTitle) {\n              <p class=\"text-sm mt-1 opacity-90 leading-tight\">{{ a.subTitle }}</p>\n            }\n          </div>\n          <button\n            mnButton\n            [data]=\"{ size: 'md', variant: 'text' }\"\n            (click)=\"dismissAlert(a.id)\"\n            class=\"absolute top-2 right-2 shrink-0 !text-current hover:!bg-current/10\"\n            aria-label=\"Close\"\n          >\n            &times;\n          </button>\n        </div>\n      }\n    }\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnAlertOutletComponent, isStandalone: true, selector: "mn-alert-outlet", inputs: { template: "template" }, ngImport: i0, template: "@if (alerts$ | async; as alerts) {\n  <div class=\"fixed top-4 left-0 right-0 z-[9999] flex flex-col gap-3 w-full px-2 sm:px-0 sm:left-auto sm:right-4 sm:max-w-sm\">\n    @for (a of alerts; track trackById($index, a)) {\n      @if (template) {\n        <ng-container\n          [ngTemplateOutlet]=\"template\"\n          [ngTemplateOutletContext]=\"contextFor(a)\">\n        </ng-container>\n      } @else {\n        <div [class]=\"getAlertClasses(a)\" [class.extra]=\"a.cssClass\" class=\"relative\">\n          <div class=\"flex-1 min-w-0 pr-8\">\n            <h4 class=\"font-semibold text-sm\">{{ a.title }}</h4>\n            @if (a.subTitle) {\n              <p class=\"text-sm mt-1 opacity-90 leading-tight\">{{ a.subTitle }}</p>\n            }\n          </div>\n          <button\n            [attr.aria-label]=\"closeLabel\"\n            mnButton\n            [data]=\"{ size: 'md', variant: 'text' }\"\n            (click)=\"dismissAlert(a.id)\"\n            class=\"absolute top-2 right-2 shrink-0 !text-current hover:!bg-current/10\"\n            type=\"button\"\n          >\n            &times;\n          </button>\n        </div>\n      }\n    }\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnAlertOutletComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-alert-outlet', standalone: true, imports: [CommonModule, MnButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (alerts$ | async; as alerts) {\n  <div class=\"fixed top-4 left-0 right-0 z-[9999] flex flex-col gap-3 w-full px-2 sm:px-0 sm:left-auto sm:right-4 sm:max-w-sm\">\n    @for (a of alerts; track trackById($index, a)) {\n      @if (template) {\n        <ng-container\n          [ngTemplateOutlet]=\"template\"\n          [ngTemplateOutletContext]=\"contextFor(a)\">\n        </ng-container>\n      } @else {\n        <div [class]=\"getAlertClasses(a)\" [class.extra]=\"a.cssClass\" class=\"relative\">\n          <div class=\"flex-1 min-w-0 pr-8\">\n            <h4 class=\"font-semibold text-sm\">{{ a.title }}</h4>\n            @if (a.subTitle) {\n              <p class=\"text-sm mt-1 opacity-90 leading-tight\">{{ a.subTitle }}</p>\n            }\n          </div>\n          <button\n            mnButton\n            [data]=\"{ size: 'md', variant: 'text' }\"\n            (click)=\"dismissAlert(a.id)\"\n            class=\"absolute top-2 right-2 shrink-0 !text-current hover:!bg-current/10\"\n            aria-label=\"Close\"\n          >\n            &times;\n          </button>\n        </div>\n      }\n    }\n  </div>\n}\n" }]
+            args: [{ selector: 'mn-alert-outlet', standalone: true, imports: [CommonModule, MnButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (alerts$ | async; as alerts) {\n  <div class=\"fixed top-4 left-0 right-0 z-[9999] flex flex-col gap-3 w-full px-2 sm:px-0 sm:left-auto sm:right-4 sm:max-w-sm\">\n    @for (a of alerts; track trackById($index, a)) {\n      @if (template) {\n        <ng-container\n          [ngTemplateOutlet]=\"template\"\n          [ngTemplateOutletContext]=\"contextFor(a)\">\n        </ng-container>\n      } @else {\n        <div [class]=\"getAlertClasses(a)\" [class.extra]=\"a.cssClass\" class=\"relative\">\n          <div class=\"flex-1 min-w-0 pr-8\">\n            <h4 class=\"font-semibold text-sm\">{{ a.title }}</h4>\n            @if (a.subTitle) {\n              <p class=\"text-sm mt-1 opacity-90 leading-tight\">{{ a.subTitle }}</p>\n            }\n          </div>\n          <button\n            [attr.aria-label]=\"closeLabel\"\n            mnButton\n            [data]=\"{ size: 'md', variant: 'text' }\"\n            (click)=\"dismissAlert(a.id)\"\n            class=\"absolute top-2 right-2 shrink-0 !text-current hover:!bg-current/10\"\n            type=\"button\"\n          >\n            &times;\n          </button>\n        </div>\n      }\n    }\n  </div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { template: [{
                 type: Input
             }] } });
@@ -769,240 +1005,33 @@ const mnInputFieldVariants = tv({
             true: 'opacity-50 cursor-not-allowed',
         },
     },
-    defaultVariants: {
-        size: 'md',
-        borderRadius: 'md',
-        hover: true,
-    }
-});
-
-class MnErrorMessage {
-    errorMessage;
-    id;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnErrorMessage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: MnErrorMessage, isStandalone: true, selector: "mn-error-message", inputs: { errorMessage: "errorMessage", id: "id" }, ngImport: i0, template: "<div [id]=\"id + '-error'\" class=\"text-red-500 mt-2 text-sm\">\n  {{ errorMessage }}\n</div>\n" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnErrorMessage, decorators: [{
-            type: Component,
-            args: [{ selector: 'mn-error-message', imports: [], template: "<div [id]=\"id + '-error'\" class=\"text-red-500 mt-2 text-sm\">\n  {{ errorMessage }}\n</div>\n" }]
-        }], propDecorators: { errorMessage: [{
-                type: Input,
-                args: [{ required: true }]
-            }], id: [{
-                type: Input,
-                args: [{ required: true }]
-            }] } });
-
-/**
- * Types for mn-lib configuration.
- */
-
-/**
- * Type guard: checks whether a value is a translatable marker object.
- */
-function isTranslatable(value) {
-    return (typeof value === 'object' &&
-        value !== null &&
-        typeof value['$translate'] === 'string');
-}
-
-class MnLanguageService {
-    http = inject(HttpClient);
-    appRef = inject(ApplicationRef);
-    _translations = {};
-    _locale$ = new BehaviorSubject('en');
-    _urlPattern = null;
-    _debug = false;
-    /** Observable of the current active locale. */
-    locale$ = this._locale$.asObservable();
-    /** Current active locale. */
-    get locale() {
-        return this._locale$.value;
-    }
-    /**
-     * Enable or disable debug logging.
-     */
-    setDebug(enabled) {
-        this._debug = enabled;
-        if (enabled) {
-            console.log(`[MnLanguage] Debug mode enabled`);
-        }
-    }
-    /**
-     * Configure the URL pattern used to fetch translation files.
-     * Use `{locale}` as placeholder, e.g. `"assets/i18n/{locale}.json"`.
-     */
-    configure(urlPattern) {
-        if (this._debug) {
-            console.log(`[MnLanguage] Configured urlPattern: ${urlPattern}`);
-        }
-        this._urlPattern = urlPattern;
-    }
-    /**
-     * Load translations for a locale from the configured URL pattern.
-     * If translations are already loaded for this locale, this is a no-op.
-     */
-    async loadLocale(locale) {
-        if (this._translations[locale])
-            return;
-        if (!this._urlPattern) {
-            console.warn(`[MnLanguage] No URL pattern configured. Call configure() or use provideMnLanguage().`);
-            return;
-        }
-        const url = this._urlPattern.replace('{locale}', locale);
-        if (this._debug) {
-            console.log(`[MnLanguage] Loading locale "${locale}" from ${url}`);
-        }
-        try {
-            const map = await firstValueFrom(this.http.get(url));
-            this._translations[locale] = map ?? {};
-            if (this._debug) {
-                console.log(`[MnLanguage] Loaded locale "${locale}"`, this._translations[locale]);
-            }
-        }
-        catch (err) {
-            console.warn(`[MnLanguage] Failed to load translations from ${url}`, err);
-            this._translations[locale] = {};
-        }
-    }
-    /**
-     * Switch the active locale. Loads translations if not yet loaded.
-     */
-    async setLocale(locale) {
-        if (this._debug) {
-            console.log(`[MnLanguage] Setting locale to "${locale}"`);
-        }
-        await this.loadLocale(locale);
-        this._locale$.next(locale);
-        this.appRef.tick();
-    }
-    /**
-     * Register translations for a locale directly from code (no HTTP needed).
-     */
-    registerTranslations(locale, translations) {
-        this._translations[locale] = {
-            ...(this._translations[locale] ?? {}),
-            ...translations,
-        };
-    }
-    /**
-     * 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, params) {
-        const map = this._translations[this.locale] ?? {};
-        let value = this.getValueFromMap(map, key);
-        if (value === undefined) {
-            if (this._debug) {
-                console.warn(`[MnLanguage] Missing translation for key: "${key}" in locale: "${this.locale}"`);
-            }
-            return key;
-        }
-        if (params) {
-            for (const [paramKey, paramValue] of Object.entries(params)) {
-                value = value.replace(new RegExp(`\\{\\{${paramKey}\\}\\}`, 'g'), String(paramValue));
-            }
-        }
-        return value;
-    }
-    /**
-     * Helper to retrieve a value from a potentially nested translation map using a dot-notated key.
-     */
-    getValueFromMap(map, key) {
-        if (map[key] !== undefined)
-            return map[key];
-        const parts = key.split('.');
-        let current = map;
-        for (const part of parts) {
-            if (current === null || typeof current !== 'object')
-                return undefined;
-            current = current[part];
-        }
-        return typeof current === 'string' ? current : undefined;
-    }
-    /**
-     * Shorthand alias for `translate`.
-     */
-    t(key, params) {
-        return this.translate(key, params);
-    }
-    /**
-     * 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, fallback) {
-        if (!domainLocaleMap || typeof window === 'undefined')
-            return fallback;
-        const hostname = window.location.hostname;
-        return domainLocaleMap[hostname] ?? fallback;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnLanguageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnLanguageService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnLanguageService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-/**
- * 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'],
- *   })
- */
-function provideMnLanguage(config) {
-    return [
-        {
-            provide: APP_INITIALIZER,
-            multi: true,
-            useFactory: (svc) => async () => {
-                if (config.debug) {
-                    svc.setDebug(true);
-                }
-                svc.configure(config.urlPattern);
-                const effectiveLocale = svc.resolveLocaleForDomain(config.domainLocaleMap, config.defaultLocale);
-                const localesToLoad = config.preload ?? [effectiveLocale];
-                await Promise.all(localesToLoad.map(l => svc.loadLocale(l)));
-                await svc.setLocale(effectiveLocale);
-            },
-            deps: [MnLanguageService],
-        },
-    ];
+    defaultVariants: {
+        size: 'md',
+        borderRadius: 'md',
+        hover: true,
+    }
+});
+
+class MnErrorMessage {
+    errorMessage;
+    id;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnErrorMessage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: MnErrorMessage, isStandalone: true, selector: "mn-error-message", inputs: { errorMessage: "errorMessage", id: "id" }, ngImport: i0, template: "<div [id]=\"id + '-error'\" class=\"text-red-500 mt-2 text-sm\">\n  {{ errorMessage }}\n</div>\n" });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnErrorMessage, decorators: [{
+            type: Component,
+            args: [{ selector: 'mn-error-message', imports: [], template: "<div [id]=\"id + '-error'\" class=\"text-red-500 mt-2 text-sm\">\n  {{ errorMessage }}\n</div>\n" }]
+        }], propDecorators: { errorMessage: [{
+                type: Input,
+                args: [{ required: true }]
+            }], id: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
 
 /**
- * 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.
+ * Types for mn-lib configuration.
  */
-class MnTranslatePipe {
-    lang = inject(MnLanguageService);
-    transform(key, params) {
-        return this.lang.translate(key, params);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTranslatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: MnTranslatePipe, isStandalone: true, name: "mnTranslate", pure: false });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTranslatePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'mnTranslate',
-                    standalone: true,
-                    pure: false,
-                }]
-        }] });
 
 function isPlainObject(value) {
     return (typeof value === 'object' &&
@@ -5626,6 +5655,28 @@ class MnCollectionBase {
     onRowsChanged() {
         // no-op by default
     }
+    /**
+     * Resolves a label three ways, in order: the consumer's explicit key, a
+     * conventional `mnCollection.*` key when the app defines one, and finally a
+     * readable English default.
+     *
+     * The middle step is what makes the components translatable out of the box: an
+     * app that adds the `mnCollection` namespace to its locale files gets every
+     * table, list and grid translated at once, with no per-call-site wiring across
+     * dozens of data sources. An app that does not keeps today's English text rather
+     * than leaking raw keys into the UI.
+     *
+     * @param consumerKey The data source's own translation key, if it set one.
+     * @param defaultKey The conventional key this label falls back to.
+     * @param fallback The English text used when neither key resolves.
+     * @param params Optional interpolation values.
+     * @returns The resolved label.
+     */
+    resolveLabel(consumerKey, defaultKey, fallback, params) {
+        if (consumerKey)
+            return this.lang.t(consumerKey, params);
+        return this.lang.translateIfPresent(defaultKey, params) ?? fallback;
+    }
     /**
      * Resolves translation keys to display strings via {@link MnLanguageService}.
      * Subclasses override to resolve their own keys; call `super` to keep these.
@@ -5794,12 +5845,6 @@ class MnSelectableCollectionBase extends MnCollectionBase {
      * its ids matched a loaded row yet. See {@link beforeInitialFilter}.
      */
     pendingInitialEmit = false;
-    /**
-     * The ids that arrived pre-selected, kept apart from {@link selectedIds} so
-     * {@link prioritizeInitialSelection} has a set that does **not** move as the user
-     * clicks. Null when the collection opened with nothing selected.
-     */
-    pinnedSelectionIds = null;
     /**
      * Every selected row, in selection order, for the summary. Ids whose row was
      * never seen are skipped rather than rendered as a bare id.
@@ -5819,7 +5864,21 @@ class MnSelectableCollectionBase extends MnCollectionBase {
     }
     /** How many tags to show before collapsing the remainder. */
     get selectionSummaryLimit() {
-        return this.dataSource.selectionSummaryLimit ?? 8;
+        return this.dataSource.selectionSummaryLimit ?? this.defaultSelectionSummaryLimit;
+    }
+    /**
+     * Tag count the summary collapses at when the data source names no limit.
+     *
+     * Subclasses that know their own width narrow this: the same eight tags that
+     * read as a compact header on a wide table become seven stacked lines in a phone
+     * sheet, pushing the rows they describe off screen. Overridden by
+     * {@link MnCollectionDataSource.selectionSummaryLimit}.
+     */
+    // Deliberately an accessor, not a readonly field: MnTable overrides it with a
+    // width-dependent getter, and TypeScript cannot override a property with one.
+    // eslint-disable-next-line @typescript-eslint/class-literal-property-style
+    get defaultSelectionSummaryLimit() {
+        return 8;
     }
     /**
      * The tags to render: the first {@link selectionSummaryLimit} rows, or all of them
@@ -5924,34 +5983,6 @@ class MnSelectableCollectionBase extends MnCollectionBase {
     defaultSelectionLabel(_row) {
         return null;
     }
-    /**
-     * Reorders rows so the ones that were already selected when the collection
-     * opened come first, preserving the incoming order within each group.
-     *
-     * Deliberately keyed on the *initial* selection rather than the live one: pinning
-     * what the user is currently ticking would make a row jump to the top the instant
-     * it is clicked, moving the next row under the pointer mid-click. Freezing the set
-     * answers the actual question — "what was already chosen?" — and leaves the list
-     * still while it is being worked with. A row deselected during the session keeps
-     * its place for the same reason.
-     *
-     * Callers apply this only when no explicit sort is active, so a sorted column
-     * always wins.
-     * @param items The rows in their current order.
-     * @returns The rows with the initially-selected ones hoisted to the top.
-     */
-    prioritizeInitialSelection(items) {
-        const pinned = this.pinnedSelectionIds;
-        if (!pinned?.size)
-            return items;
-        const selected = [];
-        const rest = [];
-        for (const item of items) {
-            (pinned.has(this.dataSource.getID(item)) ? selected : rest).push(item);
-        }
-        // Nothing to hoist (e.g. the pinned rows are on another server-side page).
-        return selected.length === 0 ? items : [...selected, ...rest];
-    }
     /** Seeds selection from `initialSelectedIds` before the first filter pass. */
     beforeInitialFilter() {
         super.beforeInitialFilter();
@@ -5960,7 +5991,6 @@ class MnSelectableCollectionBase extends MnCollectionBase {
         for (const id of this.dataSource.initialSelectedIds) {
             this.selectedIds.add(id);
         }
-        this.pinnedSelectionIds = new Set(this.dataSource.initialSelectedIds);
         for (const row of this.dataSource.initialSelectedRows ?? []) {
             this.selectedRowsById.set(this.dataSource.getID(row), row);
         }
@@ -6023,6 +6053,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * reacts to the outputs.
  */
 class MnCollectionPagination {
+    lang = inject(MnLanguageService);
     /** Prefix for the page-size select's id, keeping it unique per host. */
     idPrefix = 'mn-collection';
     isPaginated = false;
@@ -6076,25 +6107,25 @@ class MnCollectionPagination {
         }
         return slots;
     }
-    /** Wrapper classes for a slot: anchors and their gaps are md+ only. */
-    slotVisibility(slot) {
-        return slot.anchor ? 'hidden md:inline-flex' : 'inline-flex';
-    }
     /** e.g. `Page 5 of 50`. */
     get pageIndicatorLabel() {
-        return this.fill(this.labels?.pageIndicator || 'Page {{current}} of {{total}}', {
+        return this.fill(this.label(this.labels?.pageIndicator, 'mnCollection.pageIndicator', 'Page {{current}} of {{total}}'), {
             current: this.currentPage,
             total: this.totalPages,
         });
     }
     /** e.g. `41–50 of 250`. */
     get itemRangeLabel() {
-        return this.fill(this.labels?.itemRange || '{{start}}–{{end}} of {{total}}', {
+        return this.fill(this.label(this.labels?.itemRange, 'mnCollection.itemRange', '{{start}}–{{end}} of {{total}}'), {
             start: this.rangeStart,
             end: this.rangeEnd,
             total: this.totalItemCount,
         });
     }
+    /** "Items per page" label beside the page-size selector. */
+    get rowsPerPageLabel() {
+        return this.label(this.labels?.rowsPerPage, 'mnCollection.rowsPerPage', 'Items per page:');
+    }
     /**
      * Substitutes `{{name}}` placeholders, matching the interpolation syntax used
      * by MnLanguageService so the same translation strings work either way.
@@ -6102,12 +6133,75 @@ class MnCollectionPagination {
     fill(template, params) {
         return Object.entries(params).reduce((result, [key, value]) => result.replace(new RegExp(`\\{\\{${key}\\}\\}`, 'g'), String(value)), template);
     }
+    /** Label for the load-more button. */
+    get loadMoreLabel() {
+        return this.label(this.labels?.loadMore, 'mnCollection.loadMore', 'Load more');
+    }
+    /** Accessible label for the first-page control. */
+    get firstPageLabel() {
+        return this.label(undefined, 'mnCollection.firstPage', 'First page');
+    }
+    /** Accessible label for the previous-page control. */
+    get previousPageLabel() {
+        return this.label(undefined, 'mnCollection.previousPage', 'Previous page');
+    }
+    /** Accessible label for the next-page control. */
+    get nextPageLabel() {
+        return this.label(undefined, 'mnCollection.nextPage', 'Next page');
+    }
+    /** Accessible label for the last-page control. */
+    get lastPageLabel() {
+        return this.label(undefined, 'mnCollection.lastPage', 'Last page');
+    }
+    /**
+     * Wrapper classes for one slot in the page strip, shrinking it in two steps as
+     * the footer narrows. Container queries, so the measurement is the footer's own
+     * width — the same strip is wide on a page and cramped in a modal.
+     *
+     * The first/last anchors and their gaps drop below 640px, where « and » already
+     * jump to either end. Below 380px every number except the current one drops too:
+     * the strip would otherwise wrap onto a second line and push the footer over the
+     * table, and the "Page 3 of 9" readout beside it already says where the user is.
+     * The arrows survive both steps, so navigation never depends on a number.
+     */
+    slotVisibility(slot) {
+        if (slot.anchor)
+            return 'hidden @min-[640px]:inline-flex';
+        return slot.page === this.currentPage ? 'inline-flex' : 'hidden @min-[380px]:inline-flex';
+    }
+    /**
+     * Accessible label for a page-number button.
+     * @param page The page the button jumps to.
+     * @returns The label, naming the page.
+     */
+    pageLabel(page) {
+        const template = this.label(undefined, 'mnCollection.page', 'Page {{page}}');
+        return template.replace('{{page}}', String(page));
+    }
+    /**
+     * Resolves a label three ways, in order: the consumer's explicit text, the
+     * conventional `mnCollection.*` key when the app defines one, and finally a
+     * readable English default.
+     *
+     * Mirrors `MnCollectionBase.resolveLabel`; this component is presentational and
+     * does not extend that base, but its chrome must be just as translatable — the
+     * page-size label and the item-range readout are on screen for every paged
+     * collection in the app.
+     *
+     * @param explicit The label the host passed in, if any.
+     * @param key The conventional translation key to try.
+     * @param fallback The English text used when neither resolves.
+     * @returns The resolved label.
+     */
+    label(explicit, key, fallback) {
+        return explicit ?? this.lang.translateIfPresent(key) ?? fallback;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnCollectionPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnCollectionPagination, isStandalone: true, selector: "mn-collection-pagination", inputs: { idPrefix: "idPrefix", isPaginated: "isPaginated", isServerPaginated: "isServerPaginated", showLoadMore: "showLoadMore", loadingMoreRows: "loadingMoreRows", currentPage: "currentPage", pageSize: "pageSize", totalPages: "totalPages", totalItemCount: "totalItemCount", visiblePages: "visiblePages", pageSizeSelectOptions: "pageSizeSelectOptions", labels: "labels" }, outputs: { loadMore: "loadMore", pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<!-- Load more button -->\n@if (showLoadMore) {\n  <div class=\"flex justify-center py-4\">\n    <button\n      (click)=\"loadMore.emit()\"\n      [data]=\"{ size: 'sm', variant: 'outline', color: 'primary' }\"\n      [disabled]=\"loadingMoreRows\"\n      class=\"px-4 py-1.5 text-sm rounded border border-primary-500 text-primary-500 hover:bg-primary-100 transition-colors disabled:opacity-50\"\n      mnButton\n      type=\"button\"\n    >\n      @if (loadingMoreRows) {\n        <span\n          class=\"inline-block w-3 h-3 border-2 border-primary-500 border-t-transparent rounded-full animate-spin mr-2\"></span>\n      }\n      {{ labels?.loadMore || 'Load more' }}\n    </button>\n  </div>\n}\n\n<!-- Pagination controls -->\n@if (showPagination) {\n  <div class=\"flex items-center justify-between gap-2 px-2 py-3 text-sm text-base-content\">\n    @if (pageSizeSelectOptions.length > 1) {\n      <div class=\"hidden md:flex items-center gap-2\">\n        <span>{{ labels?.rowsPerPage || 'Items per page:' }}</span>\n        <mn-lib-select\n          (ngModelChange)=\"pageSizeChange.emit($event)\"\n          [ngModel]=\"pageSize\"\n          [props]=\"{\n            id: idPrefix + '-page-size',\n            options: pageSizeSelectOptions,\n            size: 'sm'\n          }\"\n        ></mn-lib-select>\n      </div>\n    } @else {\n      <div class=\"hidden md:block\"></div>\n    }\n\n    <!-- Narrow viewports state the page position outright: the strip's last-page\n         anchor only appears once the window stops reaching the end, so it can't\n         be relied on to carry the total. -->\n    <span aria-live=\"polite\" class=\"md:hidden text-xs opacity-70 whitespace-nowrap\">{{ pageIndicatorLabel }}</span>\n\n    <div class=\"flex flex-wrap items-center justify-center gap-0.5 md:gap-1\">\n      <span class=\"text-xs mr-2 hidden md:inline\">{{ itemRangeLabel }}</span>\n\n      <button\n        (click)=\"pageChange.emit(1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        [disabled]=\"currentPage === 1\"\n        aria-label=\"First page\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n        type=\"button\"\n      >\u00AB\n      </button>\n\n      <button\n        (click)=\"pageChange.emit(currentPage - 1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        [disabled]=\"currentPage === 1\"\n        aria-label=\"Previous page\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n        type=\"button\"\n      >\u2039\n      </button>\n\n      @for (slot of pageSlots; track $index) {\n        <span [class]=\"slotVisibility(slot)\">\n          @if (slot.page !== null) {\n            <button\n              (click)=\"pageChange.emit(slot.page)\"\n              [attr.aria-current]=\"slot.page === currentPage ? 'page' : null\"\n              [attr.aria-label]=\"'Page ' + slot.page\"\n              [data]=\"{ size: 'sm', variant: 'text', color: slot.page === currentPage ? 'primary' : 'gray' }\"\n              class=\"px-1.5 md:px-2.5 py-1 rounded underline underline-offset-2 transition-colors text-xs\"\n              mnButton\n              type=\"button\"\n            >{{ slot.page }}\n            </button>\n          } @else {\n            <span aria-hidden=\"true\" class=\"px-0.5 text-xs opacity-50 select-none\">\u2026</span>\n          }\n        </span>\n      }\n\n      <button\n        (click)=\"pageChange.emit(currentPage + 1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        [disabled]=\"currentPage === totalPages\"\n        aria-label=\"Next page\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n        type=\"button\"\n      >\u203A\n      </button>\n\n      <button\n        (click)=\"pageChange.emit(totalPages)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        [disabled]=\"currentPage === totalPages\"\n        aria-label=\"Last page\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n        type=\"button\"\n      >\u00BB\n      </button>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnSelect, selector: "mn-lib-select", inputs: ["props"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnCollectionPagination, isStandalone: true, selector: "mn-collection-pagination", inputs: { idPrefix: "idPrefix", isPaginated: "isPaginated", isServerPaginated: "isServerPaginated", showLoadMore: "showLoadMore", loadingMoreRows: "loadingMoreRows", currentPage: "currentPage", pageSize: "pageSize", totalPages: "totalPages", totalItemCount: "totalItemCount", visiblePages: "visiblePages", pageSizeSelectOptions: "pageSizeSelectOptions", labels: "labels" }, outputs: { loadMore: "loadMore", pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<!-- Load more button -->\n@if (showLoadMore) {\n  <div class=\"flex justify-center py-4\">\n    <button\n      (click)=\"loadMore.emit()\"\n      [data]=\"{ size: 'sm', variant: 'outline', color: 'primary' }\"\n      [disabled]=\"loadingMoreRows\"\n      class=\"px-4 py-1.5 text-sm rounded border border-primary-500 text-primary-500 hover:bg-primary-100 transition-colors disabled:opacity-50\"\n      mnButton\n      type=\"button\"\n    >\n      @if (loadingMoreRows) {\n        <span\n          class=\"inline-block w-3 h-3 border-2 border-primary-500 border-t-transparent rounded-full animate-spin mr-2\"></span>\n      }\n      {{ loadMoreLabel }}\n    </button>\n  </div>\n}\n\n<!-- Pagination controls -->\n@if (showPagination) {\n  <div class=\"@container flex items-center justify-between gap-2 px-2 py-3 text-sm text-base-content\">\n    @if (pageSizeSelectOptions.length > 1) {\n      <div class=\"hidden @min-[640px]:flex items-center gap-2\">\n        <span>{{ rowsPerPageLabel }}</span>\n        <mn-lib-select\n          (ngModelChange)=\"pageSizeChange.emit($event)\"\n          [ngModel]=\"pageSize\"\n          [props]=\"{\n            id: idPrefix + '-page-size',\n            options: pageSizeSelectOptions,\n            size: 'sm'\n          }\"\n        ></mn-lib-select>\n      </div>\n    } @else {\n      <div class=\"hidden @min-[640px]:block\"></div>\n    }\n\n    <!-- Narrow viewports state the page position outright: the strip's last-page\n         anchor only appears once the window stops reaching the end, so it can't\n         be relied on to carry the total. -->\n    <span aria-live=\"polite\"\n          class=\"@min-[640px]:hidden text-xs opacity-70 whitespace-nowrap\">{{ pageIndicatorLabel }}</span>\n\n    <div class=\"flex flex-wrap items-center justify-center gap-0.5 @min-[640px]:gap-1\">\n      <span class=\"text-xs mr-2 hidden @min-[640px]:inline\">{{ itemRangeLabel }}</span>\n\n      <button\n        (click)=\"pageChange.emit(1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        [disabled]=\"currentPage === 1\"\n        [attr.aria-label]=\"firstPageLabel\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n        type=\"button\"\n      >\u00AB\n      </button>\n\n      <button\n        (click)=\"pageChange.emit(currentPage - 1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        [disabled]=\"currentPage === 1\"\n        [attr.aria-label]=\"previousPageLabel\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n        type=\"button\"\n      >\u2039\n      </button>\n\n      @for (slot of pageSlots; track $index) {\n        <span [class]=\"slotVisibility(slot)\">\n          @if (slot.page !== null) {\n            <button\n              (click)=\"pageChange.emit(slot.page)\"\n              [attr.aria-current]=\"slot.page === currentPage ? 'page' : null\"\n              [attr.aria-label]=\"pageLabel(slot.page)\"\n              [data]=\"{ size: 'sm', variant: 'text', color: slot.page === currentPage ? 'primary' : 'gray' }\"\n              class=\"px-1.5 @min-[640px]:px-2.5 py-1 rounded underline underline-offset-2 transition-colors text-xs\"\n              mnButton\n              type=\"button\"\n            >{{ slot.page }}\n            </button>\n          } @else {\n            <span aria-hidden=\"true\" class=\"px-0.5 text-xs opacity-50 select-none\">\u2026</span>\n          }\n        </span>\n      }\n\n      <button\n        (click)=\"pageChange.emit(currentPage + 1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        [disabled]=\"currentPage === totalPages\"\n        [attr.aria-label]=\"nextPageLabel\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n        type=\"button\"\n      >\u203A\n      </button>\n\n      <button\n        (click)=\"pageChange.emit(totalPages)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        [disabled]=\"currentPage === totalPages\"\n        [attr.aria-label]=\"lastPageLabel\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n        type=\"button\"\n      >\u00BB\n      </button>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnSelect, selector: "mn-lib-select", inputs: ["props"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnCollectionPagination, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-collection-pagination', standalone: true, imports: [MnButton, MnSelect, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Load more button -->\n@if (showLoadMore) {\n  <div class=\"flex justify-center py-4\">\n    <button\n      (click)=\"loadMore.emit()\"\n      [data]=\"{ size: 'sm', variant: 'outline', color: 'primary' }\"\n      [disabled]=\"loadingMoreRows\"\n      class=\"px-4 py-1.5 text-sm rounded border border-primary-500 text-primary-500 hover:bg-primary-100 transition-colors disabled:opacity-50\"\n      mnButton\n      type=\"button\"\n    >\n      @if (loadingMoreRows) {\n        <span\n          class=\"inline-block w-3 h-3 border-2 border-primary-500 border-t-transparent rounded-full animate-spin mr-2\"></span>\n      }\n      {{ labels?.loadMore || 'Load more' }}\n    </button>\n  </div>\n}\n\n<!-- Pagination controls -->\n@if (showPagination) {\n  <div class=\"flex items-center justify-between gap-2 px-2 py-3 text-sm text-base-content\">\n    @if (pageSizeSelectOptions.length > 1) {\n      <div class=\"hidden md:flex items-center gap-2\">\n        <span>{{ labels?.rowsPerPage || 'Items per page:' }}</span>\n        <mn-lib-select\n          (ngModelChange)=\"pageSizeChange.emit($event)\"\n          [ngModel]=\"pageSize\"\n          [props]=\"{\n            id: idPrefix + '-page-size',\n            options: pageSizeSelectOptions,\n            size: 'sm'\n          }\"\n        ></mn-lib-select>\n      </div>\n    } @else {\n      <div class=\"hidden md:block\"></div>\n    }\n\n    <!-- Narrow viewports state the page position outright: the strip's last-page\n         anchor only appears once the window stops reaching the end, so it can't\n         be relied on to carry the total. -->\n    <span aria-live=\"polite\" class=\"md:hidden text-xs opacity-70 whitespace-nowrap\">{{ pageIndicatorLabel }}</span>\n\n    <div class=\"flex flex-wrap items-center justify-center gap-0.5 md:gap-1\">\n      <span class=\"text-xs mr-2 hidden md:inline\">{{ itemRangeLabel }}</span>\n\n      <button\n        (click)=\"pageChange.emit(1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        [disabled]=\"currentPage === 1\"\n        aria-label=\"First page\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n        type=\"button\"\n      >\u00AB\n      </button>\n\n      <button\n        (click)=\"pageChange.emit(currentPage - 1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        [disabled]=\"currentPage === 1\"\n        aria-label=\"Previous page\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n        type=\"button\"\n      >\u2039\n      </button>\n\n      @for (slot of pageSlots; track $index) {\n        <span [class]=\"slotVisibility(slot)\">\n          @if (slot.page !== null) {\n            <button\n              (click)=\"pageChange.emit(slot.page)\"\n              [attr.aria-current]=\"slot.page === currentPage ? 'page' : null\"\n              [attr.aria-label]=\"'Page ' + slot.page\"\n              [data]=\"{ size: 'sm', variant: 'text', color: slot.page === currentPage ? 'primary' : 'gray' }\"\n              class=\"px-1.5 md:px-2.5 py-1 rounded underline underline-offset-2 transition-colors text-xs\"\n              mnButton\n              type=\"button\"\n            >{{ slot.page }}\n            </button>\n          } @else {\n            <span aria-hidden=\"true\" class=\"px-0.5 text-xs opacity-50 select-none\">\u2026</span>\n          }\n        </span>\n      }\n\n      <button\n        (click)=\"pageChange.emit(currentPage + 1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        [disabled]=\"currentPage === totalPages\"\n        aria-label=\"Next page\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n        type=\"button\"\n      >\u203A\n      </button>\n\n      <button\n        (click)=\"pageChange.emit(totalPages)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        [disabled]=\"currentPage === totalPages\"\n        aria-label=\"Last page\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n        type=\"button\"\n      >\u00BB\n      </button>\n    </div>\n  </div>\n}\n" }]
+            args: [{ selector: 'mn-collection-pagination', standalone: true, imports: [MnButton, MnSelect, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Load more button -->\n@if (showLoadMore) {\n  <div class=\"flex justify-center py-4\">\n    <button\n      (click)=\"loadMore.emit()\"\n      [data]=\"{ size: 'sm', variant: 'outline', color: 'primary' }\"\n      [disabled]=\"loadingMoreRows\"\n      class=\"px-4 py-1.5 text-sm rounded border border-primary-500 text-primary-500 hover:bg-primary-100 transition-colors disabled:opacity-50\"\n      mnButton\n      type=\"button\"\n    >\n      @if (loadingMoreRows) {\n        <span\n          class=\"inline-block w-3 h-3 border-2 border-primary-500 border-t-transparent rounded-full animate-spin mr-2\"></span>\n      }\n      {{ loadMoreLabel }}\n    </button>\n  </div>\n}\n\n<!-- Pagination controls -->\n@if (showPagination) {\n  <div class=\"@container flex items-center justify-between gap-2 px-2 py-3 text-sm text-base-content\">\n    @if (pageSizeSelectOptions.length > 1) {\n      <div class=\"hidden @min-[640px]:flex items-center gap-2\">\n        <span>{{ rowsPerPageLabel }}</span>\n        <mn-lib-select\n          (ngModelChange)=\"pageSizeChange.emit($event)\"\n          [ngModel]=\"pageSize\"\n          [props]=\"{\n            id: idPrefix + '-page-size',\n            options: pageSizeSelectOptions,\n            size: 'sm'\n          }\"\n        ></mn-lib-select>\n      </div>\n    } @else {\n      <div class=\"hidden @min-[640px]:block\"></div>\n    }\n\n    <!-- Narrow viewports state the page position outright: the strip's last-page\n         anchor only appears once the window stops reaching the end, so it can't\n         be relied on to carry the total. -->\n    <span aria-live=\"polite\"\n          class=\"@min-[640px]:hidden text-xs opacity-70 whitespace-nowrap\">{{ pageIndicatorLabel }}</span>\n\n    <div class=\"flex flex-wrap items-center justify-center gap-0.5 @min-[640px]:gap-1\">\n      <span class=\"text-xs mr-2 hidden @min-[640px]:inline\">{{ itemRangeLabel }}</span>\n\n      <button\n        (click)=\"pageChange.emit(1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        [disabled]=\"currentPage === 1\"\n        [attr.aria-label]=\"firstPageLabel\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n        type=\"button\"\n      >\u00AB\n      </button>\n\n      <button\n        (click)=\"pageChange.emit(currentPage - 1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        [disabled]=\"currentPage === 1\"\n        [attr.aria-label]=\"previousPageLabel\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n        type=\"button\"\n      >\u2039\n      </button>\n\n      @for (slot of pageSlots; track $index) {\n        <span [class]=\"slotVisibility(slot)\">\n          @if (slot.page !== null) {\n            <button\n              (click)=\"pageChange.emit(slot.page)\"\n              [attr.aria-current]=\"slot.page === currentPage ? 'page' : null\"\n              [attr.aria-label]=\"pageLabel(slot.page)\"\n              [data]=\"{ size: 'sm', variant: 'text', color: slot.page === currentPage ? 'primary' : 'gray' }\"\n              class=\"px-1.5 @min-[640px]:px-2.5 py-1 rounded underline underline-offset-2 transition-colors text-xs\"\n              mnButton\n              type=\"button\"\n            >{{ slot.page }}\n            </button>\n          } @else {\n            <span aria-hidden=\"true\" class=\"px-0.5 text-xs opacity-50 select-none\">\u2026</span>\n          }\n        </span>\n      }\n\n      <button\n        (click)=\"pageChange.emit(currentPage + 1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        [disabled]=\"currentPage === totalPages\"\n        [attr.aria-label]=\"nextPageLabel\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n        type=\"button\"\n      >\u203A\n      </button>\n\n      <button\n        (click)=\"pageChange.emit(totalPages)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        [disabled]=\"currentPage === totalPages\"\n        [attr.aria-label]=\"lastPageLabel\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n        type=\"button\"\n      >\u00BB\n      </button>\n    </div>\n  </div>\n}\n" }]
         }], propDecorators: { idPrefix: [{
                 type: Input
             }], isPaginated: [{
@@ -6233,22 +6327,16 @@ class MnTable extends MnSelectableCollectionBase {
     getFilterMultiSelectOptions(column) {
         return (column.filterOptions ?? []).map(opt => ({ label: opt.label, value: String(opt.value) }));
     }
-    /** Any / Yes / No options for a boolean column filter. */
-    getBooleanFilterOptions(column) {
-        const labels = this.dataSource.filterLabels;
-        return [
-            { label: column.filterPlaceholder ?? labels?.any ?? 'Any', value: '' },
-            { label: labels?.yes ?? 'Yes', value: 'true' },
-            { label: labels?.no ?? 'No', value: 'false' },
-        ];
+    /** Label for the small-screen filters toggle button. */
+    get filtersButtonLabel() {
+        return this.resolveLabel(this.dataSource.filtersLabelKey, 'mnCollection.filters', this.dataSource.filtersLabel ?? 'Filters');
     }
-    /** Filter options formatted for mn-select for a given column. */
-    getFilterSelectOptions(column) {
-        const placeholder = column.filterPlaceholder ?? 'All';
-        return [
-            { label: placeholder, value: '' },
-            ...(column.filterOptions ?? []).map(opt => ({ label: opt.label, value: String(opt.value) })),
-        ];
+    /**
+     * Summary a multi-select filter collapses to once more than one option is picked.
+     * Resolved with the `{count}` token intact for mn-multi-select to fill in.
+     */
+    get filterSelectedLabel() {
+        return this.resolveLabel(this.dataSource.filterLabels?.selectedKey, 'mnCollection.filterSelected', this.dataSource.filterLabels?.selected ?? '{count} selected');
     }
     /** Current text/select filter value for a column. */
     textFilterValue(column) {
@@ -6281,20 +6369,20 @@ class MnTable extends MnSelectableCollectionBase {
     get hasColumnFilters() {
         return this.dataSource.columns.some(c => c.filterable);
     }
-    /** Label for the small-screen filters toggle button. */
-    get filtersButtonLabel() {
-        return this.dataSource.filtersLabel ?? 'Filters';
-    }
-    /**
-     * Summary a multi-select filter collapses to once more than one option is picked.
-     * Resolved with the `{count}` token intact for mn-multi-select to fill in.
-     */
-    get filterSelectedLabel() {
-        return this.dataSource.filterLabels?.selected ?? '{count} selected';
-    }
     /** Label for the "clear all filters" action in the small-screen panel. */
     get clearFiltersButtonLabel() {
-        return this.dataSource.clearFiltersLabel ?? 'Clear all';
+        return this.resolveLabel(this.dataSource.clearFiltersLabelKey, 'mnCollection.clearAll', this.dataSource.clearFiltersLabel ?? 'Clear all');
+    }
+    /** Heading for the selection summary, with the count filled in. */
+    get selectionSummaryTitle() {
+        const labels = this.dataSource.selectionSummaryLabels;
+        const template = this.resolveLabel(labels?.titleKey, 'mnCollection.selectedCount', labels?.title ?? 'Selected ({{count}})');
+        return template.replace('{{count}}', String(this.selectedIds.size));
+    }
+    /** Label for the summary's clear-everything action. */
+    get selectionClearAllLabel() {
+        const labels = this.dataSource.selectionSummaryLabels;
+        return this.resolveLabel(labels?.clearAllKey, 'mnCollection.clearAll', labels?.clearAll ?? 'Clear all');
     }
     /** Opens/closes the stacked filter panel shown on small screens. */
     toggleFiltersPanel() {
@@ -6427,31 +6515,35 @@ class MnTable extends MnSelectableCollectionBase {
     }
     /** Page size to use at/above the `md` breakpoint (consumer's pageSize, or the user's selection). */
     desktopPageSize = 10;
-    /** Heading for the selection summary, with the count filled in. */
-    get selectionSummaryTitle() {
-        const template = this.dataSource.selectionSummaryLabels?.title ?? 'Selected ({{count}})';
-        return template.replace('{{count}}', String(this.selectedIds.size));
-    }
-    /** Label for the summary's clear-everything action. */
-    get selectionClearAllLabel() {
-        return this.dataSource.selectionSummaryLabels?.clearAll ?? 'Clear all';
-    }
     /** Label for the summary's expand/collapse control. */
     get selectionSummaryToggleLabel() {
         const labels = this.dataSource.selectionSummaryLabels;
-        if (this.selectionSummaryExpanded)
-            return labels?.showLess ?? 'Show less';
-        const template = labels?.showMore ?? '+{{count}} more';
+        if (this.selectionSummaryExpanded) {
+            return this.resolveLabel(labels?.showLessKey, 'mnCollection.showLess', labels?.showLess ?? 'Show less');
+        }
+        const template = this.resolveLabel(labels?.showMoreKey, 'mnCollection.showMore', labels?.showMore ?? '+{{count}} more');
         return template.replace('{{count}}', String(this.hiddenSelectionCount));
     }
+    /** Placeholder and accessible name for the search box. */
+    get searchPlaceholderLabel() {
+        return this.resolveLabel(this.dataSource.searchPlaceholderKey, 'mnCollection.search', this.dataSource.searchPlaceholder ?? 'Search...');
+    }
+    /** Accessible name for the scrollable table region. */
+    get tableRegionLabel() {
+        return this.resolveLabel(undefined, 'mnCollection.dataTable', 'Data table');
+    }
     /**
-     * Accessible label for a tag's remove button.
-     * @param row The row the tag stands for.
-     * @returns The label, naming the row so screen readers announce which one goes.
+     * Fewer tags once the table is narrow. A tag holding a person's full name takes
+     * a whole line at phone width, so the eight that read as a compact header on a
+     * wide table become eight stacked lines in a modal sheet — the summary then
+     * occupies more of the screen than the rows it is summarising.
+     *
+     * Reuses {@link filtersCollapsed} rather than measuring again: it is already
+     * maintained on every resize and means exactly "this table is under 640px".
+     * The heading still states the true total, so the hidden tags cost no information.
      */
-    selectionRemoveLabel(row) {
-        const template = this.dataSource.selectionSummaryLabels?.remove ?? 'Remove {{label}}';
-        return template.replace('{{label}}', this.selectionLabelFor(row));
+    get defaultSelectionSummaryLimit() {
+        return this.filtersCollapsed ? 5 : 8;
     }
     /** Tracks the desktop page size when the user picks one (selector only shows at >= md). */
     onPageSizeChange(newSize) {
@@ -6471,6 +6563,18 @@ class MnTable extends MnSelectableCollectionBase {
     get widthsArePinned() {
         return this.layoutMode === 'fixed' || (this.layoutMode === 'stable' && this.widthsPinned);
     }
+    /** Any / Yes / No options for a boolean column filter. */
+    getBooleanFilterOptions(column) {
+        const labels = this.dataSource.filterLabels;
+        return [
+            {
+                label: column.filterPlaceholder ?? this.resolveLabel(labels?.anyKey, 'mnCollection.filterAny', labels?.any ?? 'Any'),
+                value: ''
+            },
+            { label: this.resolveLabel(labels?.yesKey, 'mnCollection.filterYes', labels?.yes ?? 'Yes'), value: 'true' },
+            { label: this.resolveLabel(labels?.noKey, 'mnCollection.filterNo', labels?.no ?? 'No'), value: 'false' },
+        ];
+    }
     /**
      * The width to render for a column: the consumer's own declared width always
      * wins, then a width pinned by the `stable` layout, otherwise none.
@@ -6547,11 +6651,6 @@ class MnTable extends MnSelectableCollectionBase {
             }
         }
         items = this.applySorting(items);
-        // With no column sorted, the order carries no meaning the user chose, so spend
-        // it on showing what is already selected. A sorted column always wins.
-        if (!this.currentSort) {
-            items = this.prioritizeInitialSelection(items);
-        }
         this.filteredItems = items;
         this.applyPagination();
         if (searchForItems) {
@@ -6800,12 +6899,30 @@ class MnTable extends MnSelectableCollectionBase {
             }
         });
     }
+    /** Filter options formatted for mn-select for a given column. */
+    getFilterSelectOptions(column) {
+        const placeholder = column.filterPlaceholder ?? this.resolveLabel(undefined, 'mnCollection.filterAll', 'All');
+        return [
+            { label: placeholder, value: '' },
+            ...(column.filterOptions ?? []).map(opt => ({ label: opt.label, value: String(opt.value) })),
+        ];
+    }
+    /**
+     * Accessible label for a tag's remove button.
+     * @param row The row the tag stands for.
+     * @returns The label, naming the row so screen readers announce which one goes.
+     */
+    selectionRemoveLabel(row) {
+        const labels = this.dataSource.selectionSummaryLabels;
+        const template = this.resolveLabel(labels?.removeKey, 'mnCollection.removeSelected', labels?.remove ?? 'Remove {{label}}');
+        return template.replace('{{label}}', this.selectionLabelFor(row));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTable, isStandalone: true, selector: "mn-table", outputs: { sortChange: "sortChange", rowClick: "rowClick" }, host: { listeners: { "window:resize": "onWindowResize()" }, classAttribute: "block" }, viewQueries: [{ propertyName: "collectionBody", first: true, predicate: ["collectionBody"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Everything that reflows lives inside a @container, so the breakpoints below\n     measure the table's own width rather than the window's. A table in a modal,\n     a sidebar or a narrow grid cell is far narrower than the viewport, and\n     viewport breakpoints would hand it a desktop layout it has no room for. -->\n<div class=\"@container\">\n  <!-- Selection summary: the whole selection, never paged, filtered or sorted. The\n       table below answers \"what could I pick?\", which is why it is searched and paged;\n       this answers \"what did I pick?\", which a paginated list cannot without hiding\n       most of the answer on some other page. -->\n  @if (showSelectionSummary) {\n    <div class=\"flex flex-col gap-2 rounded-md border border-base-300 bg-base-200/50 p-3 mb-3\">\n      <div class=\"flex items-center justify-between gap-2\">\n        <span class=\"text-sm font-medium text-base-content\">{{ selectionSummaryTitle }}</span>\n        <button\n          (click)=\"clearSelection()\"\n          [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n          class=\"gap-1 shrink-0\"\n          mnButton\n          type=\"button\"\n        >\n          <svg [size]=\"14\" lucideX></svg>\n          <span>{{ selectionClearAllLabel }}</span>\n        </button>\n      </div>\n      <!-- Only the first few tags render; the rest collapse behind a \"+N more\" control.\n           The heading's count always states the true total, so this hides tags, never\n           information. Expanded, the list is height-capped and scrolls, so even a\n           selection of hundreds cannot push the table off screen. -->\n      <ul\n        [class.max-h-28]=\"selectionSummaryExpanded\"\n        [class.overflow-y-auto]=\"selectionSummaryExpanded\"\n        class=\"flex flex-wrap gap-1.5 list-none m-0 p-0\"\n      >\n        @for (row of visibleSelectionRows; track dataSource.getID(row)) {\n          <li\n            class=\"inline-flex items-center gap-1 rounded-full bg-base-100 border border-base-300 pl-2.5 pr-1 py-0.5 text-xs text-base-content max-w-full\">\n            <span [attr.title]=\"selectionLabelFor(row)\" class=\"truncate\">{{ selectionLabelFor(row) }}</span>\n            <button\n              (click)=\"removeSelection(row)\"\n              [attr.aria-label]=\"selectionRemoveLabel(row)\"\n              class=\"shrink-0 rounded-full p-0.5 hover:bg-base-300 transition-colors cursor-pointer\"\n              type=\"button\"\n            >\n              <svg [size]=\"12\" lucideX></svg>\n            </button>\n          </li>\n        }\n        @if (hiddenSelectionCount > 0 || selectionSummaryExpanded) {\n          <li>\n            <button\n              (click)=\"toggleSelectionSummary()\"\n              [attr.aria-expanded]=\"selectionSummaryExpanded\"\n              [data]=\"{ variant: 'text', color: 'primary', size: 'sm', borderRadius: 'md', hover: true }\"\n              class=\"text-xs\"\n              mnButton\n              type=\"button\"\n            >\n              {{ selectionSummaryToggleLabel }}\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n  }\n\n  <!-- Toolbar: custom toolbar template + search. Only rendered when it has content,\n       so an unsearchable table without toolbar templates emits no empty spacer. -->\n@if (dataSource.canSearch || dataSource.toolbarLeftTemplate || dataSource.toolbarRightTemplate || (hasColumnFilters && filtersCollapsed)) {\n  <div class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center justify-between gap-2 mb-3\">\n    <div class=\"flex items-center gap-2 w-full @min-[420px]:w-auto\">\n    @if (dataSource.toolbarLeftTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n    <div\n      class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center gap-2 w-full @min-[420px]:flex-1 @min-[560px]:flex-none @min-[560px]:w-auto\">\n    @if (dataSource.canSearch) {\n      <mn-lib-input-field\n        class=\"w-full @min-[420px]:flex-1 @min-[560px]:max-w-64\"\n        [props]=\"{\n            id: 'mn-table-search',\n            type: 'search',\n            label: '',\n            ariaLabel: dataSource.searchPlaceholder ?? 'Search...',\n            placeholder: dataSource.searchPlaceholder ?? 'Search...',\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n        [ngModel]=\"searchValue\"\n        (ngModelChange)=\"onSearch($event)\"\n      ></mn-lib-input-field>\n    }\n    @if (dataSource.toolbarRightTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarRightTemplate\"></ng-container>\n      </div>\n    }\n    <!-- Small-screen filter toggle: replaces the inline per-column filter row below 640px -->\n    @if (hasColumnFilters && filtersCollapsed) {\n      <button\n        type=\"button\"\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'primary', size: 'md', borderRadius: 'md', hover: true }\"\n        class=\"w-full @min-[420px]:w-auto gap-1.5\"\n        [attr.aria-expanded]=\"filtersPanelOpen\"\n        aria-controls=\"mn-table-filters-panel\"\n        (click)=\"toggleFiltersPanel()\"\n      >\n        <svg lucideFunnel [size]=\"15\"></svg>\n        <span>{{ filtersButtonLabel }}</span>\n      </button>\n    }\n  </div>\n</div>\n}\n\n<!-- Small-screen filter panel: stacked, full-width fields decoupled from column widths -->\n@if (hasColumnFilters && filtersCollapsed) {\n  <div\n    id=\"mn-table-filters-panel\"\n    class=\"grid transition-all duration-200 ease-out motion-reduce:transition-none\"\n    [style.grid-template-rows]=\"filtersPanelOpen ? '1fr' : '0fr'\"\n  >\n    <div class=\"overflow-hidden\" [attr.inert]=\"filtersPanelOpen ? null : ''\">\n      <div class=\"flex flex-col gap-3 rounded-md border border-base-300 bg-base-100 p-3 mb-3\">\n        @for (column of dataSource.columns; track column.key) {\n          @if (column.filterable) {\n            <div class=\"flex flex-col gap-1\">\n              <label\n                class=\"text-xs font-medium text-base-content/70\"\n                [attr.for]=\"'mn-table-filter-' + column.key\"\n              >\n                @if (isTemplateRef(column.header)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n                } @else {\n                  {{ column.header }}\n                }\n              </label>\n              <ng-container\n                [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'panel' }\"\n                [ngTemplateOutlet]=\"filterField\"\n              ></ng-container>\n            </div>\n          }\n        }\n        @if (hasActiveFilters) {\n          <button\n            type=\"button\"\n            mnButton\n            [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n            class=\"self-start gap-1\"\n            (click)=\"clearAllFilters()\"\n          >\n            <svg lucideX [size]=\"14\"></svg>\n            <span>{{ clearFiltersButtonLabel }}</span>\n          </button>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Table wrapper with horizontal scroll -->\n  <div #collectionBody [style.min-height.px]=\"bodyMinHeight\" aria-label=\"Data table\"\n     class=\"overflow-x-auto\"\n     role=\"region\">\n  <table [class]=\"tableClasses\">\n    <thead>\n      <tr class=\"bg-base-100\">\n        <!-- Selection checkbox column header -->\n        @if (hasSelection) {\n          <th class=\"w-10 text-center text-sm px-2 py-2\">\n            @if (isMultiSelect) {\n              <mn-lib-checkbox\n                (checkedChange)=\"toggleAll()\"\n                [checked]=\"allSelected\"\n                [props]=\"{ id: 'mn-table-select-all', size: 'sm' }\"\n              ></mn-lib-checkbox>\n            }\n          </th>\n        }\n\n        <!-- Data columns -->\n        @for (column of dataSource.columns; track column.key) {\n          <th\n            [attr.data-column-key]=\"column.key\"\n            [class.truncate]=\"widthsArePinned\"\n            [class.cursor-pointer]=\"isSortable(column)\"\n            [class.select-none]=\"isSortable(column)\"\n            [class.hover:bg-base-200]=\"isSortable(column)\"\n            [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n            [class.text-center]=\"column.align === 'center'\"\n            [class.text-right]=\"column.align === 'right'\"\n            [mnHiddenBelow]=\"column.hiddenBelow\"\n            [style.width]=\"columnWidth(column)\"\n            [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n            class=\"text-sm px-2 py-1 @min-[640px]:px-4 @min-[640px]:py-2 whitespace-nowrap\"\n            (click)=\"sort(column)\"\n          >\n            <span class=\"inline-flex items-center gap-1\">\n              @if (isTemplateRef(column.header)) {\n                <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n              } @else {\n                <span>{{ column.header }}</span>\n              }\n              @if (isSortable(column)) {\n                <span class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n              }\n            </span>\n          </th>\n        }\n\n      </tr>\n\n      <!-- Per-column filter row (wide screens only; collapses into a panel below 640px).\n           `font-normal` on the cells is load-bearing: these are `th` elements, which the\n           browser renders bold, and the filter inputs and selects inside them inherit\n           that. Filter controls are form fields, not headings, and must not look bold.\n           The stacked filter panel renders outside any `th`, so it is unaffected. -->\n      @if (hasColumnFilters && !filtersCollapsed) {\n        <tr class=\"bg-base-100 border-b border-base-300 font-normal\">\n          @if (hasSelection) {\n            <th class=\"px-2 py-1 font-normal\"></th>\n          }\n          @for (column of dataSource.columns; track column.key) {\n            <th\n              class=\"px-4 py-2 font-normal\"\n              [mnHiddenBelow]=\"column.hiddenBelow\"\n            >\n              @if (column.filterable) {\n                <!-- Every filter renders as an ordinary control right under its\n                     header. The rich types used to hide behind a button that opened\n                     a floating panel, which cost a click to discover, a click to\n                     apply, and hid whether a column was even filterable. -->\n                <ng-container\n                  [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'inline' }\"\n                  [ngTemplateOutlet]=\"filterField\"\n                ></ng-container>\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n        @if (isLoadingState) {\n        @for (_ of skeletonRows; track $index) {\n          <tr>\n            @if (hasSelection) {\n              <td class=\"px-2 py-3\">\n                <mn-skeleton [data]=\"{ shape: 'rectangle', width: '1rem', height: '1rem' }\"></mn-skeleton>\n              </td>\n            }\n            @for (column of dataSource.columns; track column.key) {\n              <td class=\"px-4 py-3\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                  [style.width]=\"columnWidth(column)\"\n              >\n                @if (isTemplateRef(column.skeleton)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.skeleton)\"></ng-container>\n                } @else {\n                  <mn-skeleton [data]=\"getColumnSkeletonData(column)\"></mn-skeleton>\n                }\n              </td>\n            }\n          </tr>\n        }\n        } @else if (isErrorState) {\n          <!-- Error state -->\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.errorTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.errorTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-error\">\n                  <p class=\"text-sm\">{{ dataSource.errorMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n      } @else {\n        <!-- Empty state -->\n        @if (filteredItems.length === 0) {\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.emptyTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-base-content/50\">\n                  @if (dataSource.emptyIcon !== null) {\n                    <svg [lucideIcon]=\"dataSource.emptyIcon ?? defaultEmptyIcon\" [size]=\"32\" [strokeWidth]=\"1.5\"></svg>\n                  }\n                  <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n        }\n\n        <!-- Data rows -->\n        @for (row of paginatedItems; track trackByID($index, row); let odd = $odd; let last = $last) {\n          <tr\n            class=\"bg-base-100 transition-colors duration-150 hover:cursor-pointer\"\n            [ngClass]=\"{'bg-primary/10': isSelected(row)}\"\n            [class.bg-base-200]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n            [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n            [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n            [class.border-b]=\"!last\"\n            [class.border-base-300]=\"!last\"\n            [class.border-b-1]=\"last\"\n            [class.border-black]=\"last\"\n            [class.shadow-3xl]=\"last\"\n            (click)=\"onRowClick(row)\"\n          >\n            <!-- Selection checkbox -->\n            @if (hasSelection) {\n              <td (click)=\"$event.stopPropagation()\" class=\"w-10 text-center px-2 py-2\">\n                <mn-lib-checkbox\n                  (checkedChange)=\"toggle(row)\"\n                  [checked]=\"isSelected(row)\"\n                  [props]=\"{ id: 'mn-table-row-' + $index, size: 'sm' }\"\n                ></mn-lib-checkbox>\n              </td>\n            }\n\n            <!-- Data cells -->\n            @for (column of dataSource.columns; track column.key) {\n              <td\n                [attr.title]=\"cellTitle(column, row)\"\n                [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n                [class.text-center]=\"column.align === 'center'\"\n                [class.text-right]=\"column.align === 'right'\"\n                [class.truncate]=\"widthsArePinned\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                [style.width]=\"columnWidth(column)\"\n                class=\"text-xs px-2 py-1 @min-[640px]:px-4 @min-[640px]:py-2\"\n              >\n                @if (column.cellSm) {\n                  <!-- Default cell: hidden below the cellSm breakpoint -->\n                  <span [mnShowAbove]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellValue(column, row) }}\n                    }\n                  </span>\n                  <!-- Small cell: shown only below the cellSm breakpoint -->\n                  <span [mnShowBelow]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cellSm.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cellSm.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellSmValue(column, row) }}\n                    }\n                  </span>\n                } @else {\n                  @if (isTemplateRef(column.cell)) {\n                    <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                  [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                  } @else {\n                    {{ getCellValue(column, row) }}\n                  }\n                }\n              </td>\n            }\n\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-table\"\n></mn-collection-pagination>\n</div>\n\n<!-- Single source of truth for every filter control, reused by the inline header\n     row and the small-screen panel. `idScope` keeps element ids unique across\n     both placements. -->\n<ng-template #filterField let-column let-idScope=\"idScope\">\n  @switch (filterTypeOf(column)) {\n    @case ('select') {\n      <mn-lib-select\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"textFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getFilterSelectOptions(column),\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-select>\n    }\n    @case ('multi-select') {\n      <mn-lib-multi-select\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"multiFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getFilterMultiSelectOptions(column),\n          placeholder: column.filterPlaceholder ?? '',\n          collapsePlaceholder: filterSelectedLabel,\n          collapseThreshold: 1,\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-multi-select>\n    }\n    @case ('boolean') {\n      <mn-lib-select\n        (ngModelChange)=\"onBooleanFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"booleanFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getBooleanFilterOptions(column),\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-select>\n    }\n    @default {\n      <mn-lib-input-field\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"textFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          type: 'text',\n          label: '',\n          placeholder: column.filterPlaceholder ?? '',\n          ariaLabel: column.filterPlaceholder ?? '',\n          autocomplete: column.filterAutocomplete ?? undefined,\n          size: 'sm',\n          borderRadius: 'md',\n          fullWidth: true,\n          hover: true\n        }\"\n      ></mn-lib-input-field>\n    }\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MnCheckbox, selector: "mn-lib-checkbox", inputs: ["props", "checked"], outputs: ["checkedChange"] }, { kind: "directive", type: MnHiddenBelowDirective, selector: "[mnHiddenBelow]", inputs: ["mnHiddenBelow"] }, { kind: "directive", type: MnShowAboveDirective, selector: "[mnShowAbove]", inputs: ["mnShowAbove"] }, { kind: "directive", type: MnShowBelowDirective, selector: "[mnShowBelow]", inputs: ["mnShowBelow"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnSelect, selector: "mn-lib-select", inputs: ["props"] }, { kind: "component", type: MnMultiSelect, selector: "mn-lib-multi-select", inputs: ["props"] }, { kind: "component", type: MnSkeleton, selector: "mn-skeleton", inputs: ["data"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MnCollectionPagination, selector: "mn-collection-pagination", inputs: ["idPrefix", "isPaginated", "isServerPaginated", "showLoadMore", "loadingMoreRows", "currentPage", "pageSize", "totalPages", "totalItemCount", "visiblePages", "pageSizeSelectOptions", "labels"], outputs: ["loadMore", "pageChange", "pageSizeChange"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: LucideFilter, selector: "svg[lucideFunnel], svg[lucideFilter]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTable, isStandalone: true, selector: "mn-table", outputs: { sortChange: "sortChange", rowClick: "rowClick" }, host: { listeners: { "window:resize": "onWindowResize()" }, classAttribute: "block" }, viewQueries: [{ propertyName: "collectionBody", first: true, predicate: ["collectionBody"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Everything that reflows lives inside a @container, so the breakpoints below\n     measure the table's own width rather than the window's. A table in a modal,\n     a sidebar or a narrow grid cell is far narrower than the viewport, and\n     viewport breakpoints would hand it a desktop layout it has no room for. -->\n<div class=\"@container\">\n  <!-- Selection summary: the whole selection, never paged, filtered or sorted. The\n       table below answers \"what could I pick?\", which is why it is searched and paged;\n       this answers \"what did I pick?\", which a paginated list cannot without hiding\n       most of the answer on some other page. -->\n  @if (showSelectionSummary) {\n    <div class=\"flex flex-col gap-2 rounded-md border border-base-300 bg-base-200/50 p-3 mb-3\">\n      <div class=\"flex items-center justify-between gap-2\">\n        <span class=\"text-sm font-medium text-base-content\">{{ selectionSummaryTitle }}</span>\n        <button\n          (click)=\"clearSelection()\"\n          [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n          class=\"gap-1 shrink-0\"\n          mnButton\n          type=\"button\"\n        >\n          <svg [size]=\"14\" lucideX></svg>\n          <span>{{ selectionClearAllLabel }}</span>\n        </button>\n      </div>\n      <!-- Only the first few tags render; the rest collapse behind a \"+N more\" control.\n           The heading's count always states the true total, so this hides tags, never\n           information. Expanded, the list is height-capped and scrolls, so even a\n           selection of hundreds cannot push the table off screen. -->\n      <ul\n        [class.max-h-28]=\"selectionSummaryExpanded\"\n        [class.overflow-y-auto]=\"selectionSummaryExpanded\"\n        class=\"flex flex-wrap gap-1.5 list-none m-0 p-0\"\n      >\n        @for (row of visibleSelectionRows; track dataSource.getID(row)) {\n          <li\n            class=\"inline-flex items-center gap-1 rounded-full bg-base-100 border border-base-300 pl-2.5 pr-1 py-0.5 text-xs text-base-content max-w-full\">\n            <span [attr.title]=\"selectionLabelFor(row)\" class=\"truncate\">{{ selectionLabelFor(row) }}</span>\n            <button\n              (click)=\"removeSelection(row)\"\n              [attr.aria-label]=\"selectionRemoveLabel(row)\"\n              class=\"shrink-0 rounded-full p-0.5 hover:bg-base-300 transition-colors cursor-pointer\"\n              type=\"button\"\n            >\n              <svg [size]=\"12\" lucideX></svg>\n            </button>\n          </li>\n        }\n        @if (hiddenSelectionCount > 0 || selectionSummaryExpanded) {\n          <li>\n            <button\n              (click)=\"toggleSelectionSummary()\"\n              [attr.aria-expanded]=\"selectionSummaryExpanded\"\n              [data]=\"{ variant: 'text', color: 'primary', size: 'sm', borderRadius: 'md', hover: true }\"\n              class=\"text-xs\"\n              mnButton\n              type=\"button\"\n            >\n              {{ selectionSummaryToggleLabel }}\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n  }\n\n  <!-- Toolbar: custom toolbar template + search. Only rendered when it has content,\n       so an unsearchable table without toolbar templates emits no empty spacer. -->\n@if (dataSource.canSearch || dataSource.toolbarLeftTemplate || dataSource.toolbarRightTemplate || (hasColumnFilters && filtersCollapsed)) {\n  <div class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center justify-between gap-2 mb-3\">\n    <div class=\"flex items-center gap-2 w-full @min-[420px]:w-auto\">\n    @if (dataSource.toolbarLeftTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n    <div\n      class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center gap-2 w-full @min-[420px]:flex-1 @min-[560px]:flex-none @min-[560px]:w-auto\">\n    @if (dataSource.canSearch) {\n      <!-- Enter must not submit a surrounding form: the search box belongs to the\n           table's chrome, not to whatever form the table happens to sit in. -->\n      <mn-lib-input-field\n        (keydown.enter)=\"$event.preventDefault()\"\n        class=\"w-full @min-[420px]:flex-1 @min-[560px]:max-w-64\"\n        [props]=\"{\n            id: 'mn-table-search',\n            type: 'search',\n            label: '',\n            ariaLabel: searchPlaceholderLabel,\n            placeholder: searchPlaceholderLabel,\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n        [ngModel]=\"searchValue\"\n        (ngModelChange)=\"onSearch($event)\"\n      ></mn-lib-input-field>\n    }\n    @if (dataSource.toolbarRightTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarRightTemplate\"></ng-container>\n      </div>\n    }\n    <!-- Small-screen filter toggle: replaces the inline per-column filter row below 640px -->\n    @if (hasColumnFilters && filtersCollapsed) {\n      <button\n        type=\"button\"\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'primary', size: 'md', borderRadius: 'md', hover: true }\"\n        class=\"w-full @min-[420px]:w-auto gap-1.5\"\n        [attr.aria-expanded]=\"filtersPanelOpen\"\n        aria-controls=\"mn-table-filters-panel\"\n        (click)=\"toggleFiltersPanel()\"\n      >\n        <svg lucideFunnel [size]=\"15\"></svg>\n        <span>{{ filtersButtonLabel }}</span>\n      </button>\n    }\n  </div>\n</div>\n}\n\n<!-- Small-screen filter panel: stacked, full-width fields decoupled from column widths -->\n@if (hasColumnFilters && filtersCollapsed) {\n  <div\n    id=\"mn-table-filters-panel\"\n    class=\"grid transition-all duration-200 ease-out motion-reduce:transition-none\"\n    [style.grid-template-rows]=\"filtersPanelOpen ? '1fr' : '0fr'\"\n  >\n    <div class=\"overflow-hidden\" [attr.inert]=\"filtersPanelOpen ? null : ''\">\n      <div class=\"flex flex-col gap-3 rounded-md border border-base-300 bg-base-100 p-3 mb-3\">\n        @for (column of dataSource.columns; track column.key) {\n          @if (column.filterable) {\n            <div class=\"flex flex-col gap-1\">\n              <label\n                class=\"text-xs font-medium text-base-content/70\"\n                [attr.for]=\"'mn-table-filter-' + column.key\"\n              >\n                @if (isTemplateRef(column.header)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n                } @else {\n                  {{ column.header }}\n                }\n              </label>\n              <ng-container\n                [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'panel' }\"\n                [ngTemplateOutlet]=\"filterField\"\n              ></ng-container>\n            </div>\n          }\n        }\n        @if (hasActiveFilters) {\n          <button\n            type=\"button\"\n            mnButton\n            [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n            class=\"self-start gap-1\"\n            (click)=\"clearAllFilters()\"\n          >\n            <svg lucideX [size]=\"14\"></svg>\n            <span>{{ clearFiltersButtonLabel }}</span>\n          </button>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Table wrapper with horizontal scroll -->\n  <div #collectionBody [attr.aria-label]=\"tableRegionLabel\" [style.min-height.px]=\"bodyMinHeight\"\n     class=\"overflow-x-auto\"\n     role=\"region\">\n  <table [class]=\"tableClasses\">\n    <thead>\n      <tr class=\"bg-base-100\">\n        <!-- Selection checkbox column header -->\n        @if (hasSelection) {\n          <th class=\"w-10 text-center text-sm px-2 py-2\">\n            @if (isMultiSelect) {\n              <mn-lib-checkbox\n                (checkedChange)=\"toggleAll()\"\n                [checked]=\"allSelected\"\n                [props]=\"{ id: 'mn-table-select-all', size: 'sm' }\"\n              ></mn-lib-checkbox>\n            }\n          </th>\n        }\n\n        <!-- Data columns -->\n        @for (column of dataSource.columns; track column.key) {\n          <th\n            [attr.data-column-key]=\"column.key\"\n            [class.truncate]=\"widthsArePinned\"\n            [class.cursor-pointer]=\"isSortable(column)\"\n            [class.select-none]=\"isSortable(column)\"\n            [class.hover:bg-base-200]=\"isSortable(column)\"\n            [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n            [class.text-center]=\"column.align === 'center'\"\n            [class.text-right]=\"column.align === 'right'\"\n            [mnHiddenBelow]=\"column.hiddenBelow\"\n            [style.width]=\"columnWidth(column)\"\n            [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n            class=\"text-sm px-2 py-1 @min-[640px]:px-4 @min-[640px]:py-2 whitespace-nowrap\"\n            (click)=\"sort(column)\"\n          >\n            <span class=\"inline-flex items-center gap-1\">\n              @if (isTemplateRef(column.header)) {\n                <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n              } @else {\n                <span>{{ column.header }}</span>\n              }\n              @if (isSortable(column)) {\n                <span class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n              }\n            </span>\n          </th>\n        }\n\n      </tr>\n\n      <!-- Per-column filter row (wide screens only; collapses into a panel below 640px).\n           `font-normal` on the cells is load-bearing: these are `th` elements, which the\n           browser renders bold, and the filter inputs and selects inside them inherit\n           that. Filter controls are form fields, not headings, and must not look bold.\n           The stacked filter panel renders outside any `th`, so it is unaffected. -->\n      @if (hasColumnFilters && !filtersCollapsed) {\n        <tr class=\"bg-base-100 border-b border-base-300 font-normal\">\n          @if (hasSelection) {\n            <th class=\"px-2 py-1 font-normal\"></th>\n          }\n          @for (column of dataSource.columns; track column.key) {\n            <th\n              class=\"px-4 py-2 font-normal\"\n              [mnHiddenBelow]=\"column.hiddenBelow\"\n            >\n              @if (column.filterable) {\n                <!-- Every filter renders as an ordinary control right under its\n                     header. The rich types used to hide behind a button that opened\n                     a floating panel, which cost a click to discover, a click to\n                     apply, and hid whether a column was even filterable. -->\n                <ng-container\n                  [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'inline' }\"\n                  [ngTemplateOutlet]=\"filterField\"\n                ></ng-container>\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n        @if (isLoadingState) {\n        @for (_ of skeletonRows; track $index) {\n          <tr>\n            @if (hasSelection) {\n              <td class=\"px-2 py-3\">\n                <mn-skeleton [data]=\"{ shape: 'rectangle', width: '1rem', height: '1rem' }\"></mn-skeleton>\n              </td>\n            }\n            @for (column of dataSource.columns; track column.key) {\n              <td class=\"px-4 py-3\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                  [style.width]=\"columnWidth(column)\"\n              >\n                @if (isTemplateRef(column.skeleton)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.skeleton)\"></ng-container>\n                } @else {\n                  <mn-skeleton [data]=\"getColumnSkeletonData(column)\"></mn-skeleton>\n                }\n              </td>\n            }\n          </tr>\n        }\n        } @else if (isErrorState) {\n          <!-- Error state -->\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.errorTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.errorTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-error\">\n                  <p class=\"text-sm\">{{ dataSource.errorMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n      } @else {\n        <!-- Empty state -->\n        @if (filteredItems.length === 0) {\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.emptyTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-base-content/50\">\n                  @if (dataSource.emptyIcon !== null) {\n                    <svg [lucideIcon]=\"dataSource.emptyIcon ?? defaultEmptyIcon\" [size]=\"32\" [strokeWidth]=\"1.5\"></svg>\n                  }\n                  <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n        }\n\n        <!-- Data rows -->\n        @for (row of paginatedItems; track trackByID($index, row); let odd = $odd; let last = $last) {\n          <tr\n            class=\"bg-base-100 transition-colors duration-150 hover:cursor-pointer\"\n            [ngClass]=\"{'bg-primary/10': isSelected(row)}\"\n            [class.bg-base-200]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n            [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n            [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n            [class.border-b]=\"!last\"\n            [class.border-base-300]=\"!last\"\n            [class.border-b-1]=\"last\"\n            [class.border-black]=\"last\"\n            [class.shadow-3xl]=\"last\"\n            (click)=\"onRowClick(row)\"\n          >\n            <!-- Selection checkbox -->\n            @if (hasSelection) {\n              <td (click)=\"$event.stopPropagation()\" class=\"w-10 text-center px-2 py-2\">\n                <mn-lib-checkbox\n                  (checkedChange)=\"toggle(row)\"\n                  [checked]=\"isSelected(row)\"\n                  [props]=\"{ id: 'mn-table-row-' + $index, size: 'sm' }\"\n                ></mn-lib-checkbox>\n              </td>\n            }\n\n            <!-- Data cells -->\n            @for (column of dataSource.columns; track column.key) {\n              <td\n                [attr.title]=\"cellTitle(column, row)\"\n                [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n                [class.text-center]=\"column.align === 'center'\"\n                [class.text-right]=\"column.align === 'right'\"\n                [class.truncate]=\"widthsArePinned\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                [style.width]=\"columnWidth(column)\"\n                class=\"text-xs px-2 py-1 @min-[640px]:px-4 @min-[640px]:py-2\"\n              >\n                @if (column.cellSm) {\n                  <!-- Default cell: hidden below the cellSm breakpoint -->\n                  <span [mnShowAbove]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellValue(column, row) }}\n                    }\n                  </span>\n                  <!-- Small cell: shown only below the cellSm breakpoint -->\n                  <span [mnShowBelow]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cellSm.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cellSm.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellSmValue(column, row) }}\n                    }\n                  </span>\n                } @else {\n                  @if (isTemplateRef(column.cell)) {\n                    <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                  [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                  } @else {\n                    {{ getCellValue(column, row) }}\n                  }\n                }\n              </td>\n            }\n\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-table\"\n></mn-collection-pagination>\n</div>\n\n<!-- Single source of truth for every filter control, reused by the inline header\n     row and the small-screen panel. `idScope` keeps element ids unique across\n     both placements. -->\n<ng-template #filterField let-column let-idScope=\"idScope\">\n  @switch (filterTypeOf(column)) {\n    @case ('select') {\n      <mn-lib-select\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"textFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getFilterSelectOptions(column),\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-select>\n    }\n    @case ('multi-select') {\n      <mn-lib-multi-select\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"multiFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getFilterMultiSelectOptions(column),\n          placeholder: column.filterPlaceholder ?? '',\n          collapsePlaceholder: filterSelectedLabel,\n          collapseThreshold: 1,\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-multi-select>\n    }\n    @case ('boolean') {\n      <mn-lib-select\n        (ngModelChange)=\"onBooleanFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"booleanFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getBooleanFilterOptions(column),\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-select>\n    }\n    @default {\n      <mn-lib-input-field\n        (keydown.enter)=\"$event.preventDefault()\"\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"textFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          type: 'text',\n          label: '',\n          placeholder: column.filterPlaceholder ?? '',\n          ariaLabel: column.filterPlaceholder ?? '',\n          autocomplete: column.filterAutocomplete ?? undefined,\n          size: 'sm',\n          borderRadius: 'md',\n          fullWidth: true,\n          hover: true\n        }\"\n      ></mn-lib-input-field>\n    }\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MnCheckbox, selector: "mn-lib-checkbox", inputs: ["props", "checked"], outputs: ["checkedChange"] }, { kind: "directive", type: MnHiddenBelowDirective, selector: "[mnHiddenBelow]", inputs: ["mnHiddenBelow"] }, { kind: "directive", type: MnShowAboveDirective, selector: "[mnShowAbove]", inputs: ["mnShowAbove"] }, { kind: "directive", type: MnShowBelowDirective, selector: "[mnShowBelow]", inputs: ["mnShowBelow"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnSelect, selector: "mn-lib-select", inputs: ["props"] }, { kind: "component", type: MnMultiSelect, selector: "mn-lib-multi-select", inputs: ["props"] }, { kind: "component", type: MnSkeleton, selector: "mn-skeleton", inputs: ["data"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MnCollectionPagination, selector: "mn-collection-pagination", inputs: ["idPrefix", "isPaginated", "isServerPaginated", "showLoadMore", "loadingMoreRows", "currentPage", "pageSize", "totalPages", "totalItemCount", "visiblePages", "pageSizeSelectOptions", "labels"], outputs: ["loadMore", "pageChange", "pageSizeChange"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: LucideFilter, selector: "svg[lucideFunnel], svg[lucideFilter]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTable, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-table', standalone: true, imports: [NgClass, NgTemplateOutlet, MnCheckbox, MnHiddenBelowDirective, MnShowAboveDirective, MnShowBelowDirective, MnInputField, MnSelect, MnMultiSelect, MnSkeleton, FormsModule, MnCollectionPagination, MnButton, LucideFilter, LucideX, LucideFunnel, LucideDynamicIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'block' }, template: "<!-- Everything that reflows lives inside a @container, so the breakpoints below\n     measure the table's own width rather than the window's. A table in a modal,\n     a sidebar or a narrow grid cell is far narrower than the viewport, and\n     viewport breakpoints would hand it a desktop layout it has no room for. -->\n<div class=\"@container\">\n  <!-- Selection summary: the whole selection, never paged, filtered or sorted. The\n       table below answers \"what could I pick?\", which is why it is searched and paged;\n       this answers \"what did I pick?\", which a paginated list cannot without hiding\n       most of the answer on some other page. -->\n  @if (showSelectionSummary) {\n    <div class=\"flex flex-col gap-2 rounded-md border border-base-300 bg-base-200/50 p-3 mb-3\">\n      <div class=\"flex items-center justify-between gap-2\">\n        <span class=\"text-sm font-medium text-base-content\">{{ selectionSummaryTitle }}</span>\n        <button\n          (click)=\"clearSelection()\"\n          [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n          class=\"gap-1 shrink-0\"\n          mnButton\n          type=\"button\"\n        >\n          <svg [size]=\"14\" lucideX></svg>\n          <span>{{ selectionClearAllLabel }}</span>\n        </button>\n      </div>\n      <!-- Only the first few tags render; the rest collapse behind a \"+N more\" control.\n           The heading's count always states the true total, so this hides tags, never\n           information. Expanded, the list is height-capped and scrolls, so even a\n           selection of hundreds cannot push the table off screen. -->\n      <ul\n        [class.max-h-28]=\"selectionSummaryExpanded\"\n        [class.overflow-y-auto]=\"selectionSummaryExpanded\"\n        class=\"flex flex-wrap gap-1.5 list-none m-0 p-0\"\n      >\n        @for (row of visibleSelectionRows; track dataSource.getID(row)) {\n          <li\n            class=\"inline-flex items-center gap-1 rounded-full bg-base-100 border border-base-300 pl-2.5 pr-1 py-0.5 text-xs text-base-content max-w-full\">\n            <span [attr.title]=\"selectionLabelFor(row)\" class=\"truncate\">{{ selectionLabelFor(row) }}</span>\n            <button\n              (click)=\"removeSelection(row)\"\n              [attr.aria-label]=\"selectionRemoveLabel(row)\"\n              class=\"shrink-0 rounded-full p-0.5 hover:bg-base-300 transition-colors cursor-pointer\"\n              type=\"button\"\n            >\n              <svg [size]=\"12\" lucideX></svg>\n            </button>\n          </li>\n        }\n        @if (hiddenSelectionCount > 0 || selectionSummaryExpanded) {\n          <li>\n            <button\n              (click)=\"toggleSelectionSummary()\"\n              [attr.aria-expanded]=\"selectionSummaryExpanded\"\n              [data]=\"{ variant: 'text', color: 'primary', size: 'sm', borderRadius: 'md', hover: true }\"\n              class=\"text-xs\"\n              mnButton\n              type=\"button\"\n            >\n              {{ selectionSummaryToggleLabel }}\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n  }\n\n  <!-- Toolbar: custom toolbar template + search. Only rendered when it has content,\n       so an unsearchable table without toolbar templates emits no empty spacer. -->\n@if (dataSource.canSearch || dataSource.toolbarLeftTemplate || dataSource.toolbarRightTemplate || (hasColumnFilters && filtersCollapsed)) {\n  <div class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center justify-between gap-2 mb-3\">\n    <div class=\"flex items-center gap-2 w-full @min-[420px]:w-auto\">\n    @if (dataSource.toolbarLeftTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n    <div\n      class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center gap-2 w-full @min-[420px]:flex-1 @min-[560px]:flex-none @min-[560px]:w-auto\">\n    @if (dataSource.canSearch) {\n      <mn-lib-input-field\n        class=\"w-full @min-[420px]:flex-1 @min-[560px]:max-w-64\"\n        [props]=\"{\n            id: 'mn-table-search',\n            type: 'search',\n            label: '',\n            ariaLabel: dataSource.searchPlaceholder ?? 'Search...',\n            placeholder: dataSource.searchPlaceholder ?? 'Search...',\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n        [ngModel]=\"searchValue\"\n        (ngModelChange)=\"onSearch($event)\"\n      ></mn-lib-input-field>\n    }\n    @if (dataSource.toolbarRightTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarRightTemplate\"></ng-container>\n      </div>\n    }\n    <!-- Small-screen filter toggle: replaces the inline per-column filter row below 640px -->\n    @if (hasColumnFilters && filtersCollapsed) {\n      <button\n        type=\"button\"\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'primary', size: 'md', borderRadius: 'md', hover: true }\"\n        class=\"w-full @min-[420px]:w-auto gap-1.5\"\n        [attr.aria-expanded]=\"filtersPanelOpen\"\n        aria-controls=\"mn-table-filters-panel\"\n        (click)=\"toggleFiltersPanel()\"\n      >\n        <svg lucideFunnel [size]=\"15\"></svg>\n        <span>{{ filtersButtonLabel }}</span>\n      </button>\n    }\n  </div>\n</div>\n}\n\n<!-- Small-screen filter panel: stacked, full-width fields decoupled from column widths -->\n@if (hasColumnFilters && filtersCollapsed) {\n  <div\n    id=\"mn-table-filters-panel\"\n    class=\"grid transition-all duration-200 ease-out motion-reduce:transition-none\"\n    [style.grid-template-rows]=\"filtersPanelOpen ? '1fr' : '0fr'\"\n  >\n    <div class=\"overflow-hidden\" [attr.inert]=\"filtersPanelOpen ? null : ''\">\n      <div class=\"flex flex-col gap-3 rounded-md border border-base-300 bg-base-100 p-3 mb-3\">\n        @for (column of dataSource.columns; track column.key) {\n          @if (column.filterable) {\n            <div class=\"flex flex-col gap-1\">\n              <label\n                class=\"text-xs font-medium text-base-content/70\"\n                [attr.for]=\"'mn-table-filter-' + column.key\"\n              >\n                @if (isTemplateRef(column.header)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n                } @else {\n                  {{ column.header }}\n                }\n              </label>\n              <ng-container\n                [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'panel' }\"\n                [ngTemplateOutlet]=\"filterField\"\n              ></ng-container>\n            </div>\n          }\n        }\n        @if (hasActiveFilters) {\n          <button\n            type=\"button\"\n            mnButton\n            [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n            class=\"self-start gap-1\"\n            (click)=\"clearAllFilters()\"\n          >\n            <svg lucideX [size]=\"14\"></svg>\n            <span>{{ clearFiltersButtonLabel }}</span>\n          </button>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Table wrapper with horizontal scroll -->\n  <div #collectionBody [style.min-height.px]=\"bodyMinHeight\" aria-label=\"Data table\"\n     class=\"overflow-x-auto\"\n     role=\"region\">\n  <table [class]=\"tableClasses\">\n    <thead>\n      <tr class=\"bg-base-100\">\n        <!-- Selection checkbox column header -->\n        @if (hasSelection) {\n          <th class=\"w-10 text-center text-sm px-2 py-2\">\n            @if (isMultiSelect) {\n              <mn-lib-checkbox\n                (checkedChange)=\"toggleAll()\"\n                [checked]=\"allSelected\"\n                [props]=\"{ id: 'mn-table-select-all', size: 'sm' }\"\n              ></mn-lib-checkbox>\n            }\n          </th>\n        }\n\n        <!-- Data columns -->\n        @for (column of dataSource.columns; track column.key) {\n          <th\n            [attr.data-column-key]=\"column.key\"\n            [class.truncate]=\"widthsArePinned\"\n            [class.cursor-pointer]=\"isSortable(column)\"\n            [class.select-none]=\"isSortable(column)\"\n            [class.hover:bg-base-200]=\"isSortable(column)\"\n            [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n            [class.text-center]=\"column.align === 'center'\"\n            [class.text-right]=\"column.align === 'right'\"\n            [mnHiddenBelow]=\"column.hiddenBelow\"\n            [style.width]=\"columnWidth(column)\"\n            [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n            class=\"text-sm px-2 py-1 @min-[640px]:px-4 @min-[640px]:py-2 whitespace-nowrap\"\n            (click)=\"sort(column)\"\n          >\n            <span class=\"inline-flex items-center gap-1\">\n              @if (isTemplateRef(column.header)) {\n                <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n              } @else {\n                <span>{{ column.header }}</span>\n              }\n              @if (isSortable(column)) {\n                <span class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n              }\n            </span>\n          </th>\n        }\n\n      </tr>\n\n      <!-- Per-column filter row (wide screens only; collapses into a panel below 640px).\n           `font-normal` on the cells is load-bearing: these are `th` elements, which the\n           browser renders bold, and the filter inputs and selects inside them inherit\n           that. Filter controls are form fields, not headings, and must not look bold.\n           The stacked filter panel renders outside any `th`, so it is unaffected. -->\n      @if (hasColumnFilters && !filtersCollapsed) {\n        <tr class=\"bg-base-100 border-b border-base-300 font-normal\">\n          @if (hasSelection) {\n            <th class=\"px-2 py-1 font-normal\"></th>\n          }\n          @for (column of dataSource.columns; track column.key) {\n            <th\n              class=\"px-4 py-2 font-normal\"\n              [mnHiddenBelow]=\"column.hiddenBelow\"\n            >\n              @if (column.filterable) {\n                <!-- Every filter renders as an ordinary control right under its\n                     header. The rich types used to hide behind a button that opened\n                     a floating panel, which cost a click to discover, a click to\n                     apply, and hid whether a column was even filterable. -->\n                <ng-container\n                  [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'inline' }\"\n                  [ngTemplateOutlet]=\"filterField\"\n                ></ng-container>\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n        @if (isLoadingState) {\n        @for (_ of skeletonRows; track $index) {\n          <tr>\n            @if (hasSelection) {\n              <td class=\"px-2 py-3\">\n                <mn-skeleton [data]=\"{ shape: 'rectangle', width: '1rem', height: '1rem' }\"></mn-skeleton>\n              </td>\n            }\n            @for (column of dataSource.columns; track column.key) {\n              <td class=\"px-4 py-3\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                  [style.width]=\"columnWidth(column)\"\n              >\n                @if (isTemplateRef(column.skeleton)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.skeleton)\"></ng-container>\n                } @else {\n                  <mn-skeleton [data]=\"getColumnSkeletonData(column)\"></mn-skeleton>\n                }\n              </td>\n            }\n          </tr>\n        }\n        } @else if (isErrorState) {\n          <!-- Error state -->\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.errorTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.errorTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-error\">\n                  <p class=\"text-sm\">{{ dataSource.errorMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n      } @else {\n        <!-- Empty state -->\n        @if (filteredItems.length === 0) {\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.emptyTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-base-content/50\">\n                  @if (dataSource.emptyIcon !== null) {\n                    <svg [lucideIcon]=\"dataSource.emptyIcon ?? defaultEmptyIcon\" [size]=\"32\" [strokeWidth]=\"1.5\"></svg>\n                  }\n                  <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n        }\n\n        <!-- Data rows -->\n        @for (row of paginatedItems; track trackByID($index, row); let odd = $odd; let last = $last) {\n          <tr\n            class=\"bg-base-100 transition-colors duration-150 hover:cursor-pointer\"\n            [ngClass]=\"{'bg-primary/10': isSelected(row)}\"\n            [class.bg-base-200]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n            [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n            [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n            [class.border-b]=\"!last\"\n            [class.border-base-300]=\"!last\"\n            [class.border-b-1]=\"last\"\n            [class.border-black]=\"last\"\n            [class.shadow-3xl]=\"last\"\n            (click)=\"onRowClick(row)\"\n          >\n            <!-- Selection checkbox -->\n            @if (hasSelection) {\n              <td (click)=\"$event.stopPropagation()\" class=\"w-10 text-center px-2 py-2\">\n                <mn-lib-checkbox\n                  (checkedChange)=\"toggle(row)\"\n                  [checked]=\"isSelected(row)\"\n                  [props]=\"{ id: 'mn-table-row-' + $index, size: 'sm' }\"\n                ></mn-lib-checkbox>\n              </td>\n            }\n\n            <!-- Data cells -->\n            @for (column of dataSource.columns; track column.key) {\n              <td\n                [attr.title]=\"cellTitle(column, row)\"\n                [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n                [class.text-center]=\"column.align === 'center'\"\n                [class.text-right]=\"column.align === 'right'\"\n                [class.truncate]=\"widthsArePinned\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                [style.width]=\"columnWidth(column)\"\n                class=\"text-xs px-2 py-1 @min-[640px]:px-4 @min-[640px]:py-2\"\n              >\n                @if (column.cellSm) {\n                  <!-- Default cell: hidden below the cellSm breakpoint -->\n                  <span [mnShowAbove]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellValue(column, row) }}\n                    }\n                  </span>\n                  <!-- Small cell: shown only below the cellSm breakpoint -->\n                  <span [mnShowBelow]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cellSm.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cellSm.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellSmValue(column, row) }}\n                    }\n                  </span>\n                } @else {\n                  @if (isTemplateRef(column.cell)) {\n                    <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                  [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                  } @else {\n                    {{ getCellValue(column, row) }}\n                  }\n                }\n              </td>\n            }\n\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-table\"\n></mn-collection-pagination>\n</div>\n\n<!-- Single source of truth for every filter control, reused by the inline header\n     row and the small-screen panel. `idScope` keeps element ids unique across\n     both placements. -->\n<ng-template #filterField let-column let-idScope=\"idScope\">\n  @switch (filterTypeOf(column)) {\n    @case ('select') {\n      <mn-lib-select\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"textFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getFilterSelectOptions(column),\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-select>\n    }\n    @case ('multi-select') {\n      <mn-lib-multi-select\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"multiFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getFilterMultiSelectOptions(column),\n          placeholder: column.filterPlaceholder ?? '',\n          collapsePlaceholder: filterSelectedLabel,\n          collapseThreshold: 1,\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-multi-select>\n    }\n    @case ('boolean') {\n      <mn-lib-select\n        (ngModelChange)=\"onBooleanFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"booleanFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getBooleanFilterOptions(column),\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-select>\n    }\n    @default {\n      <mn-lib-input-field\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"textFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          type: 'text',\n          label: '',\n          placeholder: column.filterPlaceholder ?? '',\n          ariaLabel: column.filterPlaceholder ?? '',\n          autocomplete: column.filterAutocomplete ?? undefined,\n          size: 'sm',\n          borderRadius: 'md',\n          fullWidth: true,\n          hover: true\n        }\"\n      ></mn-lib-input-field>\n    }\n  }\n</ng-template>\n" }]
+            args: [{ selector: 'mn-table', standalone: true, imports: [NgClass, NgTemplateOutlet, MnCheckbox, MnHiddenBelowDirective, MnShowAboveDirective, MnShowBelowDirective, MnInputField, MnSelect, MnMultiSelect, MnSkeleton, FormsModule, MnCollectionPagination, MnButton, LucideFilter, LucideX, LucideFunnel, LucideDynamicIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'block' }, template: "<!-- Everything that reflows lives inside a @container, so the breakpoints below\n     measure the table's own width rather than the window's. A table in a modal,\n     a sidebar or a narrow grid cell is far narrower than the viewport, and\n     viewport breakpoints would hand it a desktop layout it has no room for. -->\n<div class=\"@container\">\n  <!-- Selection summary: the whole selection, never paged, filtered or sorted. The\n       table below answers \"what could I pick?\", which is why it is searched and paged;\n       this answers \"what did I pick?\", which a paginated list cannot without hiding\n       most of the answer on some other page. -->\n  @if (showSelectionSummary) {\n    <div class=\"flex flex-col gap-2 rounded-md border border-base-300 bg-base-200/50 p-3 mb-3\">\n      <div class=\"flex items-center justify-between gap-2\">\n        <span class=\"text-sm font-medium text-base-content\">{{ selectionSummaryTitle }}</span>\n        <button\n          (click)=\"clearSelection()\"\n          [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n          class=\"gap-1 shrink-0\"\n          mnButton\n          type=\"button\"\n        >\n          <svg [size]=\"14\" lucideX></svg>\n          <span>{{ selectionClearAllLabel }}</span>\n        </button>\n      </div>\n      <!-- Only the first few tags render; the rest collapse behind a \"+N more\" control.\n           The heading's count always states the true total, so this hides tags, never\n           information. Expanded, the list is height-capped and scrolls, so even a\n           selection of hundreds cannot push the table off screen. -->\n      <ul\n        [class.max-h-28]=\"selectionSummaryExpanded\"\n        [class.overflow-y-auto]=\"selectionSummaryExpanded\"\n        class=\"flex flex-wrap gap-1.5 list-none m-0 p-0\"\n      >\n        @for (row of visibleSelectionRows; track dataSource.getID(row)) {\n          <li\n            class=\"inline-flex items-center gap-1 rounded-full bg-base-100 border border-base-300 pl-2.5 pr-1 py-0.5 text-xs text-base-content max-w-full\">\n            <span [attr.title]=\"selectionLabelFor(row)\" class=\"truncate\">{{ selectionLabelFor(row) }}</span>\n            <button\n              (click)=\"removeSelection(row)\"\n              [attr.aria-label]=\"selectionRemoveLabel(row)\"\n              class=\"shrink-0 rounded-full p-0.5 hover:bg-base-300 transition-colors cursor-pointer\"\n              type=\"button\"\n            >\n              <svg [size]=\"12\" lucideX></svg>\n            </button>\n          </li>\n        }\n        @if (hiddenSelectionCount > 0 || selectionSummaryExpanded) {\n          <li>\n            <button\n              (click)=\"toggleSelectionSummary()\"\n              [attr.aria-expanded]=\"selectionSummaryExpanded\"\n              [data]=\"{ variant: 'text', color: 'primary', size: 'sm', borderRadius: 'md', hover: true }\"\n              class=\"text-xs\"\n              mnButton\n              type=\"button\"\n            >\n              {{ selectionSummaryToggleLabel }}\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n  }\n\n  <!-- Toolbar: custom toolbar template + search. Only rendered when it has content,\n       so an unsearchable table without toolbar templates emits no empty spacer. -->\n@if (dataSource.canSearch || dataSource.toolbarLeftTemplate || dataSource.toolbarRightTemplate || (hasColumnFilters && filtersCollapsed)) {\n  <div class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center justify-between gap-2 mb-3\">\n    <div class=\"flex items-center gap-2 w-full @min-[420px]:w-auto\">\n    @if (dataSource.toolbarLeftTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n    <div\n      class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center gap-2 w-full @min-[420px]:flex-1 @min-[560px]:flex-none @min-[560px]:w-auto\">\n    @if (dataSource.canSearch) {\n      <!-- Enter must not submit a surrounding form: the search box belongs to the\n           table's chrome, not to whatever form the table happens to sit in. -->\n      <mn-lib-input-field\n        (keydown.enter)=\"$event.preventDefault()\"\n        class=\"w-full @min-[420px]:flex-1 @min-[560px]:max-w-64\"\n        [props]=\"{\n            id: 'mn-table-search',\n            type: 'search',\n            label: '',\n            ariaLabel: searchPlaceholderLabel,\n            placeholder: searchPlaceholderLabel,\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n        [ngModel]=\"searchValue\"\n        (ngModelChange)=\"onSearch($event)\"\n      ></mn-lib-input-field>\n    }\n    @if (dataSource.toolbarRightTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarRightTemplate\"></ng-container>\n      </div>\n    }\n    <!-- Small-screen filter toggle: replaces the inline per-column filter row below 640px -->\n    @if (hasColumnFilters && filtersCollapsed) {\n      <button\n        type=\"button\"\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'primary', size: 'md', borderRadius: 'md', hover: true }\"\n        class=\"w-full @min-[420px]:w-auto gap-1.5\"\n        [attr.aria-expanded]=\"filtersPanelOpen\"\n        aria-controls=\"mn-table-filters-panel\"\n        (click)=\"toggleFiltersPanel()\"\n      >\n        <svg lucideFunnel [size]=\"15\"></svg>\n        <span>{{ filtersButtonLabel }}</span>\n      </button>\n    }\n  </div>\n</div>\n}\n\n<!-- Small-screen filter panel: stacked, full-width fields decoupled from column widths -->\n@if (hasColumnFilters && filtersCollapsed) {\n  <div\n    id=\"mn-table-filters-panel\"\n    class=\"grid transition-all duration-200 ease-out motion-reduce:transition-none\"\n    [style.grid-template-rows]=\"filtersPanelOpen ? '1fr' : '0fr'\"\n  >\n    <div class=\"overflow-hidden\" [attr.inert]=\"filtersPanelOpen ? null : ''\">\n      <div class=\"flex flex-col gap-3 rounded-md border border-base-300 bg-base-100 p-3 mb-3\">\n        @for (column of dataSource.columns; track column.key) {\n          @if (column.filterable) {\n            <div class=\"flex flex-col gap-1\">\n              <label\n                class=\"text-xs font-medium text-base-content/70\"\n                [attr.for]=\"'mn-table-filter-' + column.key\"\n              >\n                @if (isTemplateRef(column.header)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n                } @else {\n                  {{ column.header }}\n                }\n              </label>\n              <ng-container\n                [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'panel' }\"\n                [ngTemplateOutlet]=\"filterField\"\n              ></ng-container>\n            </div>\n          }\n        }\n        @if (hasActiveFilters) {\n          <button\n            type=\"button\"\n            mnButton\n            [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n            class=\"self-start gap-1\"\n            (click)=\"clearAllFilters()\"\n          >\n            <svg lucideX [size]=\"14\"></svg>\n            <span>{{ clearFiltersButtonLabel }}</span>\n          </button>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Table wrapper with horizontal scroll -->\n  <div #collectionBody [attr.aria-label]=\"tableRegionLabel\" [style.min-height.px]=\"bodyMinHeight\"\n     class=\"overflow-x-auto\"\n     role=\"region\">\n  <table [class]=\"tableClasses\">\n    <thead>\n      <tr class=\"bg-base-100\">\n        <!-- Selection checkbox column header -->\n        @if (hasSelection) {\n          <th class=\"w-10 text-center text-sm px-2 py-2\">\n            @if (isMultiSelect) {\n              <mn-lib-checkbox\n                (checkedChange)=\"toggleAll()\"\n                [checked]=\"allSelected\"\n                [props]=\"{ id: 'mn-table-select-all', size: 'sm' }\"\n              ></mn-lib-checkbox>\n            }\n          </th>\n        }\n\n        <!-- Data columns -->\n        @for (column of dataSource.columns; track column.key) {\n          <th\n            [attr.data-column-key]=\"column.key\"\n            [class.truncate]=\"widthsArePinned\"\n            [class.cursor-pointer]=\"isSortable(column)\"\n            [class.select-none]=\"isSortable(column)\"\n            [class.hover:bg-base-200]=\"isSortable(column)\"\n            [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n            [class.text-center]=\"column.align === 'center'\"\n            [class.text-right]=\"column.align === 'right'\"\n            [mnHiddenBelow]=\"column.hiddenBelow\"\n            [style.width]=\"columnWidth(column)\"\n            [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n            class=\"text-sm px-2 py-1 @min-[640px]:px-4 @min-[640px]:py-2 whitespace-nowrap\"\n            (click)=\"sort(column)\"\n          >\n            <span class=\"inline-flex items-center gap-1\">\n              @if (isTemplateRef(column.header)) {\n                <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n              } @else {\n                <span>{{ column.header }}</span>\n              }\n              @if (isSortable(column)) {\n                <span class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n              }\n            </span>\n          </th>\n        }\n\n      </tr>\n\n      <!-- Per-column filter row (wide screens only; collapses into a panel below 640px).\n           `font-normal` on the cells is load-bearing: these are `th` elements, which the\n           browser renders bold, and the filter inputs and selects inside them inherit\n           that. Filter controls are form fields, not headings, and must not look bold.\n           The stacked filter panel renders outside any `th`, so it is unaffected. -->\n      @if (hasColumnFilters && !filtersCollapsed) {\n        <tr class=\"bg-base-100 border-b border-base-300 font-normal\">\n          @if (hasSelection) {\n            <th class=\"px-2 py-1 font-normal\"></th>\n          }\n          @for (column of dataSource.columns; track column.key) {\n            <th\n              class=\"px-4 py-2 font-normal\"\n              [mnHiddenBelow]=\"column.hiddenBelow\"\n            >\n              @if (column.filterable) {\n                <!-- Every filter renders as an ordinary control right under its\n                     header. The rich types used to hide behind a button that opened\n                     a floating panel, which cost a click to discover, a click to\n                     apply, and hid whether a column was even filterable. -->\n                <ng-container\n                  [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'inline' }\"\n                  [ngTemplateOutlet]=\"filterField\"\n                ></ng-container>\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n        @if (isLoadingState) {\n        @for (_ of skeletonRows; track $index) {\n          <tr>\n            @if (hasSelection) {\n              <td class=\"px-2 py-3\">\n                <mn-skeleton [data]=\"{ shape: 'rectangle', width: '1rem', height: '1rem' }\"></mn-skeleton>\n              </td>\n            }\n            @for (column of dataSource.columns; track column.key) {\n              <td class=\"px-4 py-3\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                  [style.width]=\"columnWidth(column)\"\n              >\n                @if (isTemplateRef(column.skeleton)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.skeleton)\"></ng-container>\n                } @else {\n                  <mn-skeleton [data]=\"getColumnSkeletonData(column)\"></mn-skeleton>\n                }\n              </td>\n            }\n          </tr>\n        }\n        } @else if (isErrorState) {\n          <!-- Error state -->\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.errorTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.errorTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-error\">\n                  <p class=\"text-sm\">{{ dataSource.errorMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n      } @else {\n        <!-- Empty state -->\n        @if (filteredItems.length === 0) {\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.emptyTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-base-content/50\">\n                  @if (dataSource.emptyIcon !== null) {\n                    <svg [lucideIcon]=\"dataSource.emptyIcon ?? defaultEmptyIcon\" [size]=\"32\" [strokeWidth]=\"1.5\"></svg>\n                  }\n                  <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n        }\n\n        <!-- Data rows -->\n        @for (row of paginatedItems; track trackByID($index, row); let odd = $odd; let last = $last) {\n          <tr\n            class=\"bg-base-100 transition-colors duration-150 hover:cursor-pointer\"\n            [ngClass]=\"{'bg-primary/10': isSelected(row)}\"\n            [class.bg-base-200]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n            [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n            [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n            [class.border-b]=\"!last\"\n            [class.border-base-300]=\"!last\"\n            [class.border-b-1]=\"last\"\n            [class.border-black]=\"last\"\n            [class.shadow-3xl]=\"last\"\n            (click)=\"onRowClick(row)\"\n          >\n            <!-- Selection checkbox -->\n            @if (hasSelection) {\n              <td (click)=\"$event.stopPropagation()\" class=\"w-10 text-center px-2 py-2\">\n                <mn-lib-checkbox\n                  (checkedChange)=\"toggle(row)\"\n                  [checked]=\"isSelected(row)\"\n                  [props]=\"{ id: 'mn-table-row-' + $index, size: 'sm' }\"\n                ></mn-lib-checkbox>\n              </td>\n            }\n\n            <!-- Data cells -->\n            @for (column of dataSource.columns; track column.key) {\n              <td\n                [attr.title]=\"cellTitle(column, row)\"\n                [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n                [class.text-center]=\"column.align === 'center'\"\n                [class.text-right]=\"column.align === 'right'\"\n                [class.truncate]=\"widthsArePinned\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                [style.width]=\"columnWidth(column)\"\n                class=\"text-xs px-2 py-1 @min-[640px]:px-4 @min-[640px]:py-2\"\n              >\n                @if (column.cellSm) {\n                  <!-- Default cell: hidden below the cellSm breakpoint -->\n                  <span [mnShowAbove]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellValue(column, row) }}\n                    }\n                  </span>\n                  <!-- Small cell: shown only below the cellSm breakpoint -->\n                  <span [mnShowBelow]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cellSm.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cellSm.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellSmValue(column, row) }}\n                    }\n                  </span>\n                } @else {\n                  @if (isTemplateRef(column.cell)) {\n                    <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                  [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                  } @else {\n                    {{ getCellValue(column, row) }}\n                  }\n                }\n              </td>\n            }\n\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-table\"\n></mn-collection-pagination>\n</div>\n\n<!-- Single source of truth for every filter control, reused by the inline header\n     row and the small-screen panel. `idScope` keeps element ids unique across\n     both placements. -->\n<ng-template #filterField let-column let-idScope=\"idScope\">\n  @switch (filterTypeOf(column)) {\n    @case ('select') {\n      <mn-lib-select\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"textFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getFilterSelectOptions(column),\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-select>\n    }\n    @case ('multi-select') {\n      <mn-lib-multi-select\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"multiFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getFilterMultiSelectOptions(column),\n          placeholder: column.filterPlaceholder ?? '',\n          collapsePlaceholder: filterSelectedLabel,\n          collapseThreshold: 1,\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-multi-select>\n    }\n    @case ('boolean') {\n      <mn-lib-select\n        (ngModelChange)=\"onBooleanFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"booleanFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getBooleanFilterOptions(column),\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-select>\n    }\n    @default {\n      <mn-lib-input-field\n        (keydown.enter)=\"$event.preventDefault()\"\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"textFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          type: 'text',\n          label: '',\n          placeholder: column.filterPlaceholder ?? '',\n          ariaLabel: column.filterPlaceholder ?? '',\n          autocomplete: column.filterAutocomplete ?? undefined,\n          size: 'sm',\n          borderRadius: 'md',\n          fullWidth: true,\n          hover: true\n        }\"\n      ></mn-lib-input-field>\n    }\n  }\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { sortChange: [{
                 type: Output
             }], rowClick: [{
@@ -7336,6 +7453,11 @@ class MnFormBodyComponent {
                 // sight, which is exactly what the summary exists to prevent. Set
                 // `selectionSummary: false` on the data source to opt a field out.
                 ds.selectionSummary ??= true;
+                // A modal is too short to make a rows-per-page choice meaningful, and the
+                // selector costs a row of footer the sheet cannot spare. Pinning the options
+                // to the single configured size hides it through the paginator's existing
+                // "more than one option" rule rather than adding a second way to hide it.
+                ds.pageSizeOptions = [ds.pageSize ?? 10];
                 // Pre-select rows from the form's initial value
                 const control = this.form.get(field.key);
                 if (control && Array.isArray(control.value) && control.value.length > 0) {
@@ -8128,11 +8250,11 @@ class MnWizardBodyComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnWizardBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnWizardBodyComponent, isStandalone: true, selector: "mn-wizard-body", inputs: { config: "config", modalRef: "modalRef" }, viewQueries: [{ propertyName: "stepScroller", first: true, predicate: ["stepScroller"], descendants: true }, { propertyName: "formBodies", predicate: MnFormBodyComponent, descendants: true }, { propertyName: "stepWrappers", predicate: ["stepWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col flex-auto min-h-0\">\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"$any(config)\"\n      [modalRef]=\"$any(modalRef)\"\n      class=\"block flex-none px-6 pt-6\"\n    ></mn-custom-body-host>\n  }\n\n  <!-- Steps header \u2014 fixed (does not scroll with the step body) -->\n  <div class=\"flex-none px-6 pt-2 pb-4 border-b border-base-300 bg-base-100\">\n    <div class=\"relative flex items-start\">\n      <!-- Background line spanning from first circle center to last circle center -->\n      <div\n        [style.left]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n        [style.right]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n        class=\"absolute top-3.75 h-1 bg-base-300 z-0\"\n      ></div>\n\n      <!-- Progress fill line -->\n      @if (visibleSteps.length > 1) {\n        <div\n          [style.left]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n          [style.width]=\"'calc(' + (currentProgressIndex / (visibleSteps.length - 1)) * (100 - 100 / visibleSteps.length) + '%)'\"\n          class=\"absolute top-3.75 h-1 bg-success z-1 transition-all duration-500\"\n        ></div>\n      }\n\n      @for (step of visibleSteps; track step.id; let i = $index; ) {\n        <div\n          (keyup.enter)=\"isFreeFlow ? goToStep(step) : null\"\n          (click)=\"isFreeFlow ? goToStep(step) : null\"\n          [attr.tabindex]=\"isFreeFlow && canNavigateToStep(step) ? 0 : null\"\n          [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n          class=\"relative flex flex-col items-center gap-1 z-10 w-0 flex-1\"\n        >\n          <div\n            [ngClass]=\"{\n              'bg-primary text-primary-content': step.id === currentStepId,\n              'bg-success text-success-content': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n              'bg-base-200 text-base-content/50': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n            }\"\n            class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n          >{{ i + 1 }}\n          </div>\n          <div\n            [ngClass]=\"{\n              'text-base-content font-semibold': step.id === currentStepId,\n              'text-base-content/50': step.id !== currentStepId\n            }\"\n            class=\"text-xs text-center whitespace-nowrap hidden sm:block\"\n          >{{ step.title }}\n          </div>\n\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Step body \u2014 the only scrolling region in the wizard, shared by every step -->\n  <div #stepScroller class=\"flex-auto min-h-0 overflow-y-auto px-6 py-6\">\n    <div [style.min-height]=\"measuredMinHeight ? measuredMinHeight + 'px' : null\" class=\"min-h-48\">\n    @for (step of config.steps; track step.id) {\n      <div #stepWrapper [style.display]=\"step.id === currentStepId ? 'block' : 'none'\">\n        <h3 class=\"text-lg font-semibold text-base-content mb-4\">{{ step.title }}</h3>\n        <div class=\"text-base-content/80\">\n          <!-- Form step -->\n          @if (stepFormConfigs[step.id]) {\n            <mn-form-body\n              [config]=\"stepFormConfigs[step.id]\"\n              [modalRef]=\"$any(modalRef)\"\n              [hideFooter]=\"true\"\n              [hideCustomBody]=\"true\"\n            ></mn-form-body>\n          }\n\n          <!-- Text body -->\n          @if (!stepFormConfigs[step.id] && isTextBody(step)) {\n            <div>\n              {{ step.body }}\n            </div>\n          }\n\n          <!-- Component / template body -->\n          @if (stepBodyConfigs[step.id]) {\n            <mn-custom-body-host\n              [config]=\"stepBodyConfigs[step.id]\"\n              [modalRef]=\"$any(modalRef)\"\n            ></mn-custom-body-host>\n          }\n        </div>\n      </div>\n    }\n    </div>\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) \u2014 fixed, above the footer -->\n  @if (wizardErrors && (wizardErrors | keyvalue).length > 0) {\n    <div class=\"flex flex-col gap-1 mx-6 mb-2 px-2 py-2 bg-red-50 rounded-md\">\n      @for (err of wizardErrors | keyvalue; track err.key) {\n        <div class=\"text-red-500 text-sm\">\n          {{ err.value }}\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Footer \u2014 fixed (does not scroll with the step body) -->\n  <div class=\"flex-none flex gap-3 px-6 pt-4 pb-6 border-t border-base-300 bg-base-100\">\n    @if (!currentStep?.hideBack) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (click)=\"back()\"\n      >\n        @if (backIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\n        }\n        {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n      </button>\n    }\n\n    <!-- Custom footer actions -->\n    @if (config.footerActions) {\n      <mn-footer-actions\n        [actions]=\"config.footerActions\"\n        [showIcons]=\"showActionIcons\"\n        (actionClick)=\"handleFooterAction($any($event))\"\n      ></mn-footer-actions>\n    } @else {\n      <div class=\"flex-1\"></div>\n    }\n\n    @if (!isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid }\"\n        (click)=\"next()\"\n      >\n        {{ currentStep?.nextLabel || labels.next }}\n        @if (nextIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"ml-2\"></svg>\n        }\n      </button>\n    }\n\n    @if (isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid || isCompleting }\"\n        [disabled]=\"!isCurrentStepValid || isCompleting\"\n        (click)=\"complete()\"\n      >\n        @if (completeIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\n        }\n        {{ currentStep?.nextLabel || (isCompleting ? labels.completing : labels.complete) }}\n      </button>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFooterActionsComponent, selector: "mn-footer-actions", inputs: ["actions", "showIcons"], outputs: ["actionClick"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnWizardBodyComponent, isStandalone: true, selector: "mn-wizard-body", inputs: { config: "config", modalRef: "modalRef" }, viewQueries: [{ propertyName: "stepScroller", first: true, predicate: ["stepScroller"], descendants: true }, { propertyName: "formBodies", predicate: MnFormBodyComponent, descendants: true }, { propertyName: "stepWrappers", predicate: ["stepWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col flex-auto min-h-0\">\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"$any(config)\"\n      [modalRef]=\"$any(modalRef)\"\n      class=\"block flex-none px-6 pt-6\"\n    ></mn-custom-body-host>\n  }\n\n  <!-- Steps header \u2014 fixed (does not scroll with the step body) -->\n  <div class=\"flex-none px-6 pt-2 pb-4 border-b border-base-300 bg-base-100\">\n    <div class=\"relative flex items-start\">\n      <!-- Background line spanning from first circle center to last circle center -->\n      <div\n        [style.left]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n        [style.right]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n        class=\"absolute top-3.75 h-1 bg-base-300 z-0\"\n      ></div>\n\n      <!-- Progress fill line -->\n      @if (visibleSteps.length > 1) {\n        <div\n          [style.left]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n          [style.width]=\"'calc(' + (currentProgressIndex / (visibleSteps.length - 1)) * (100 - 100 / visibleSteps.length) + '%)'\"\n          class=\"absolute top-3.75 h-1 bg-success z-1 transition-all duration-500\"\n        ></div>\n      }\n\n      @for (step of visibleSteps; track step.id; let i = $index; ) {\n        <div\n          (keyup.enter)=\"isFreeFlow ? goToStep(step) : null\"\n          (click)=\"isFreeFlow ? goToStep(step) : null\"\n          [attr.tabindex]=\"isFreeFlow && canNavigateToStep(step) ? 0 : null\"\n          [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n          class=\"relative flex flex-col items-center gap-1 z-10 w-0 flex-1\"\n        >\n          <div\n            [ngClass]=\"{\n              'bg-primary text-primary-content': step.id === currentStepId,\n              'bg-success text-success-content': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n              'bg-base-200 text-base-content/50': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n            }\"\n            class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n          >{{ i + 1 }}\n          </div>\n          <div\n            [ngClass]=\"{\n              'text-base-content font-semibold': step.id === currentStepId,\n              'text-base-content/50': step.id !== currentStepId\n            }\"\n            class=\"text-xs text-center whitespace-nowrap hidden sm:block\"\n          >{{ step.title }}\n          </div>\n\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Step body \u2014 the only scrolling region in the wizard, shared by every step -->\n  <div #stepScroller class=\"flex-auto min-h-0 overflow-y-auto px-6 py-6\">\n    <div [style.min-height]=\"measuredMinHeight ? measuredMinHeight + 'px' : null\" class=\"min-h-48\">\n    @for (step of config.steps; track step.id) {\n      <div #stepWrapper [style.display]=\"step.id === currentStepId ? 'block' : 'none'\">\n        <h3 class=\"text-lg font-semibold text-base-content mb-4\">{{ step.title }}</h3>\n        <div class=\"text-base-content/80\">\n          <!-- Form step -->\n          @if (stepFormConfigs[step.id]) {\n            <mn-form-body\n              [config]=\"stepFormConfigs[step.id]\"\n              [modalRef]=\"$any(modalRef)\"\n              [hideFooter]=\"true\"\n              [hideCustomBody]=\"true\"\n            ></mn-form-body>\n          }\n\n          <!-- Text body -->\n          @if (!stepFormConfigs[step.id] && isTextBody(step)) {\n            <div>\n              {{ step.body }}\n            </div>\n          }\n\n          <!-- Component / template body -->\n          @if (stepBodyConfigs[step.id]) {\n            <mn-custom-body-host\n              [config]=\"stepBodyConfigs[step.id]\"\n              [modalRef]=\"$any(modalRef)\"\n            ></mn-custom-body-host>\n          }\n        </div>\n      </div>\n    }\n    </div>\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) \u2014 fixed, above the footer -->\n  @if (wizardErrors && (wizardErrors | keyvalue).length > 0) {\n    <div class=\"flex flex-col gap-1 mx-6 mb-2 px-2 py-2 bg-red-50 rounded-md\">\n      @for (err of wizardErrors | keyvalue; track err.key) {\n        <div class=\"text-red-500 text-sm\">\n          {{ err.value }}\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Footer \u2014 fixed (does not scroll with the step body) -->\n  <div class=\"flex-none flex gap-3 px-6 pt-4 pb-6 border-t border-base-300 bg-base-100\">\n    @if (!currentStep?.hideBack) {\n      <button\n        type=\"button\"\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (click)=\"back()\"\n      >\n        @if (backIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\n        }\n        {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n      </button>\n    }\n\n    <!-- Custom footer actions -->\n    @if (config.footerActions) {\n      <mn-footer-actions\n        [actions]=\"config.footerActions\"\n        [showIcons]=\"showActionIcons\"\n        (actionClick)=\"handleFooterAction($any($event))\"\n      ></mn-footer-actions>\n    } @else {\n      <div class=\"flex-1\"></div>\n    }\n\n    @if (!isLastStep) {\n      <button\n        type=\"button\"\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid }\"\n        (click)=\"next()\"\n      >\n        {{ currentStep?.nextLabel || labels.next }}\n        @if (nextIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"ml-2\"></svg>\n        }\n      </button>\n    }\n\n    @if (isLastStep) {\n      <button\n        type=\"button\"\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid || isCompleting }\"\n        [disabled]=\"!isCurrentStepValid || isCompleting\"\n        (click)=\"complete()\"\n      >\n        @if (completeIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\n        }\n        {{ currentStep?.nextLabel || (isCompleting ? labels.completing : labels.complete) }}\n      </button>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFooterActionsComponent, selector: "mn-footer-actions", inputs: ["actions", "showIcons"], outputs: ["actionClick"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnWizardBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-wizard-body', standalone: true, imports: [CommonModule, ReactiveFormsModule, MnButton, MnFormBodyComponent, MnCustomBodyHostComponent, MnFooterActionsComponent, LucideDynamicIcon], template: "<div class=\"flex flex-col flex-auto min-h-0\">\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"$any(config)\"\n      [modalRef]=\"$any(modalRef)\"\n      class=\"block flex-none px-6 pt-6\"\n    ></mn-custom-body-host>\n  }\n\n  <!-- Steps header \u2014 fixed (does not scroll with the step body) -->\n  <div class=\"flex-none px-6 pt-2 pb-4 border-b border-base-300 bg-base-100\">\n    <div class=\"relative flex items-start\">\n      <!-- Background line spanning from first circle center to last circle center -->\n      <div\n        [style.left]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n        [style.right]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n        class=\"absolute top-3.75 h-1 bg-base-300 z-0\"\n      ></div>\n\n      <!-- Progress fill line -->\n      @if (visibleSteps.length > 1) {\n        <div\n          [style.left]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n          [style.width]=\"'calc(' + (currentProgressIndex / (visibleSteps.length - 1)) * (100 - 100 / visibleSteps.length) + '%)'\"\n          class=\"absolute top-3.75 h-1 bg-success z-1 transition-all duration-500\"\n        ></div>\n      }\n\n      @for (step of visibleSteps; track step.id; let i = $index; ) {\n        <div\n          (keyup.enter)=\"isFreeFlow ? goToStep(step) : null\"\n          (click)=\"isFreeFlow ? goToStep(step) : null\"\n          [attr.tabindex]=\"isFreeFlow && canNavigateToStep(step) ? 0 : null\"\n          [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n          class=\"relative flex flex-col items-center gap-1 z-10 w-0 flex-1\"\n        >\n          <div\n            [ngClass]=\"{\n              'bg-primary text-primary-content': step.id === currentStepId,\n              'bg-success text-success-content': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n              'bg-base-200 text-base-content/50': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n            }\"\n            class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n          >{{ i + 1 }}\n          </div>\n          <div\n            [ngClass]=\"{\n              'text-base-content font-semibold': step.id === currentStepId,\n              'text-base-content/50': step.id !== currentStepId\n            }\"\n            class=\"text-xs text-center whitespace-nowrap hidden sm:block\"\n          >{{ step.title }}\n          </div>\n\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Step body \u2014 the only scrolling region in the wizard, shared by every step -->\n  <div #stepScroller class=\"flex-auto min-h-0 overflow-y-auto px-6 py-6\">\n    <div [style.min-height]=\"measuredMinHeight ? measuredMinHeight + 'px' : null\" class=\"min-h-48\">\n    @for (step of config.steps; track step.id) {\n      <div #stepWrapper [style.display]=\"step.id === currentStepId ? 'block' : 'none'\">\n        <h3 class=\"text-lg font-semibold text-base-content mb-4\">{{ step.title }}</h3>\n        <div class=\"text-base-content/80\">\n          <!-- Form step -->\n          @if (stepFormConfigs[step.id]) {\n            <mn-form-body\n              [config]=\"stepFormConfigs[step.id]\"\n              [modalRef]=\"$any(modalRef)\"\n              [hideFooter]=\"true\"\n              [hideCustomBody]=\"true\"\n            ></mn-form-body>\n          }\n\n          <!-- Text body -->\n          @if (!stepFormConfigs[step.id] && isTextBody(step)) {\n            <div>\n              {{ step.body }}\n            </div>\n          }\n\n          <!-- Component / template body -->\n          @if (stepBodyConfigs[step.id]) {\n            <mn-custom-body-host\n              [config]=\"stepBodyConfigs[step.id]\"\n              [modalRef]=\"$any(modalRef)\"\n            ></mn-custom-body-host>\n          }\n        </div>\n      </div>\n    }\n    </div>\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) \u2014 fixed, above the footer -->\n  @if (wizardErrors && (wizardErrors | keyvalue).length > 0) {\n    <div class=\"flex flex-col gap-1 mx-6 mb-2 px-2 py-2 bg-red-50 rounded-md\">\n      @for (err of wizardErrors | keyvalue; track err.key) {\n        <div class=\"text-red-500 text-sm\">\n          {{ err.value }}\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Footer \u2014 fixed (does not scroll with the step body) -->\n  <div class=\"flex-none flex gap-3 px-6 pt-4 pb-6 border-t border-base-300 bg-base-100\">\n    @if (!currentStep?.hideBack) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (click)=\"back()\"\n      >\n        @if (backIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\n        }\n        {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n      </button>\n    }\n\n    <!-- Custom footer actions -->\n    @if (config.footerActions) {\n      <mn-footer-actions\n        [actions]=\"config.footerActions\"\n        [showIcons]=\"showActionIcons\"\n        (actionClick)=\"handleFooterAction($any($event))\"\n      ></mn-footer-actions>\n    } @else {\n      <div class=\"flex-1\"></div>\n    }\n\n    @if (!isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid }\"\n        (click)=\"next()\"\n      >\n        {{ currentStep?.nextLabel || labels.next }}\n        @if (nextIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"ml-2\"></svg>\n        }\n      </button>\n    }\n\n    @if (isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid || isCompleting }\"\n        [disabled]=\"!isCurrentStepValid || isCompleting\"\n        (click)=\"complete()\"\n      >\n        @if (completeIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\n        }\n        {{ currentStep?.nextLabel || (isCompleting ? labels.completing : labels.complete) }}\n      </button>\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'mn-wizard-body', standalone: true, imports: [CommonModule, ReactiveFormsModule, MnButton, MnFormBodyComponent, MnCustomBodyHostComponent, MnFooterActionsComponent, LucideDynamicIcon], template: "<div class=\"flex flex-col flex-auto min-h-0\">\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"$any(config)\"\n      [modalRef]=\"$any(modalRef)\"\n      class=\"block flex-none px-6 pt-6\"\n    ></mn-custom-body-host>\n  }\n\n  <!-- Steps header \u2014 fixed (does not scroll with the step body) -->\n  <div class=\"flex-none px-6 pt-2 pb-4 border-b border-base-300 bg-base-100\">\n    <div class=\"relative flex items-start\">\n      <!-- Background line spanning from first circle center to last circle center -->\n      <div\n        [style.left]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n        [style.right]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n        class=\"absolute top-3.75 h-1 bg-base-300 z-0\"\n      ></div>\n\n      <!-- Progress fill line -->\n      @if (visibleSteps.length > 1) {\n        <div\n          [style.left]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n          [style.width]=\"'calc(' + (currentProgressIndex / (visibleSteps.length - 1)) * (100 - 100 / visibleSteps.length) + '%)'\"\n          class=\"absolute top-3.75 h-1 bg-success z-1 transition-all duration-500\"\n        ></div>\n      }\n\n      @for (step of visibleSteps; track step.id; let i = $index; ) {\n        <div\n          (keyup.enter)=\"isFreeFlow ? goToStep(step) : null\"\n          (click)=\"isFreeFlow ? goToStep(step) : null\"\n          [attr.tabindex]=\"isFreeFlow && canNavigateToStep(step) ? 0 : null\"\n          [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n          class=\"relative flex flex-col items-center gap-1 z-10 w-0 flex-1\"\n        >\n          <div\n            [ngClass]=\"{\n              'bg-primary text-primary-content': step.id === currentStepId,\n              'bg-success text-success-content': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n              'bg-base-200 text-base-content/50': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n            }\"\n            class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n          >{{ i + 1 }}\n          </div>\n          <div\n            [ngClass]=\"{\n              'text-base-content font-semibold': step.id === currentStepId,\n              'text-base-content/50': step.id !== currentStepId\n            }\"\n            class=\"text-xs text-center whitespace-nowrap hidden sm:block\"\n          >{{ step.title }}\n          </div>\n\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Step body \u2014 the only scrolling region in the wizard, shared by every step -->\n  <div #stepScroller class=\"flex-auto min-h-0 overflow-y-auto px-6 py-6\">\n    <div [style.min-height]=\"measuredMinHeight ? measuredMinHeight + 'px' : null\" class=\"min-h-48\">\n    @for (step of config.steps; track step.id) {\n      <div #stepWrapper [style.display]=\"step.id === currentStepId ? 'block' : 'none'\">\n        <h3 class=\"text-lg font-semibold text-base-content mb-4\">{{ step.title }}</h3>\n        <div class=\"text-base-content/80\">\n          <!-- Form step -->\n          @if (stepFormConfigs[step.id]) {\n            <mn-form-body\n              [config]=\"stepFormConfigs[step.id]\"\n              [modalRef]=\"$any(modalRef)\"\n              [hideFooter]=\"true\"\n              [hideCustomBody]=\"true\"\n            ></mn-form-body>\n          }\n\n          <!-- Text body -->\n          @if (!stepFormConfigs[step.id] && isTextBody(step)) {\n            <div>\n              {{ step.body }}\n            </div>\n          }\n\n          <!-- Component / template body -->\n          @if (stepBodyConfigs[step.id]) {\n            <mn-custom-body-host\n              [config]=\"stepBodyConfigs[step.id]\"\n              [modalRef]=\"$any(modalRef)\"\n            ></mn-custom-body-host>\n          }\n        </div>\n      </div>\n    }\n    </div>\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) \u2014 fixed, above the footer -->\n  @if (wizardErrors && (wizardErrors | keyvalue).length > 0) {\n    <div class=\"flex flex-col gap-1 mx-6 mb-2 px-2 py-2 bg-red-50 rounded-md\">\n      @for (err of wizardErrors | keyvalue; track err.key) {\n        <div class=\"text-red-500 text-sm\">\n          {{ err.value }}\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Footer \u2014 fixed (does not scroll with the step body) -->\n  <div class=\"flex-none flex gap-3 px-6 pt-4 pb-6 border-t border-base-300 bg-base-100\">\n    @if (!currentStep?.hideBack) {\n      <button\n        type=\"button\"\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (click)=\"back()\"\n      >\n        @if (backIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\n        }\n        {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n      </button>\n    }\n\n    <!-- Custom footer actions -->\n    @if (config.footerActions) {\n      <mn-footer-actions\n        [actions]=\"config.footerActions\"\n        [showIcons]=\"showActionIcons\"\n        (actionClick)=\"handleFooterAction($any($event))\"\n      ></mn-footer-actions>\n    } @else {\n      <div class=\"flex-1\"></div>\n    }\n\n    @if (!isLastStep) {\n      <button\n        type=\"button\"\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid }\"\n        (click)=\"next()\"\n      >\n        {{ currentStep?.nextLabel || labels.next }}\n        @if (nextIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"ml-2\"></svg>\n        }\n      </button>\n    }\n\n    @if (isLastStep) {\n      <button\n        type=\"button\"\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid || isCompleting }\"\n        [disabled]=\"!isCurrentStepValid || isCompleting\"\n        (click)=\"complete()\"\n      >\n        @if (completeIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\n        }\n        {{ currentStep?.nextLabel || (isCompleting ? labels.completing : labels.complete) }}\n      </button>\n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { config: [{
                 type: Input
             }], modalRef: [{
@@ -8264,11 +8386,11 @@ class MnConfirmationBodyComponent {
         return this.config.cancel?.icon ?? MN_MODAL_ACTION_ICONS.cancel;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnConfirmationBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnConfirmationBodyComponent, isStandalone: true, selector: "mn-confirmation-body", inputs: { config: "config", modalRef: "modalRef" }, viewQueries: [{ propertyName: "formBody", first: true, predicate: MnFormBodyComponent, descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-6\" [ngClass]=\"toneClass\">\n  <!-- Custom Content (Component or Template) -->\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"$any(config)\"\n      [modalRef]=\"$any(modalRef)\"\n    ></mn-custom-body-host>\n  }\n\n  <div class=\"flex flex-col items-center text-center gap-6\">\n    @if (config.tone === 'warning' || config.tone === 'danger') {\n      <div\n        class=\"w-12 h-12 rounded-full flex items-center justify-center\"\n        [ngClass]=\"{\n          'bg-blue-100 text-blue-500': config.tone !== 'warning' && config.tone !== 'danger',\n          'bg-amber-100 text-amber-500': config.tone === 'warning',\n          'bg-red-100 text-red-500': config.tone === 'danger'\n        }\">\n        @if (config.tone === 'warning') {\n          <svg [size]=\"24\" lucideTriangleAlert></svg>\n        }\n        @if (config.tone === 'danger') {\n          <svg [size]=\"24\" lucideCircleAlert></svg>\n        }\n      </div>\n    }\n\n    @if (config.message) {\n      <div class=\"text-base text-base-content/80 leading-relaxed max-w-[28rem]\">\n        {{ config.message }}\n      </div>\n    }\n  </div>\n\n  <!-- Form Fields / Rows -->\n  @if (hasFormFields) {\n    <mn-form-body\n      [config]=\"$any(config)\"\n      [modalRef]=\"$any(modalRef)\"\n      [hideFooter]=\"true\"\n      [hideCustomBody]=\"true\"\n      (formStatusChange)=\"onFormStatusChange($event)\"\n    ></mn-form-body>\n  }\n\n  <div class=\"flex gap-3 w-full pb-6 sticky bottom-0 bg-base-100 z-10\">\n    <button\n      mnButton\n      [data]=\"{\n        variant: getButtonVariant(cancelStyle),\n        color: getButtonColor(cancelStyle)\n      }\"\n      (click)=\"cancel()\"\n    >\n      @if (cancelIcon; as icon) {\n        <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\n      }\n      {{ cancelLabel }}\n    </button>\n\n    <div class=\"flex-1\"></div>\n\n    <button\n      mnButton\n      [data]=\"{\n        variant: getButtonVariant(confirmStyle),\n        color: getButtonColor(confirmStyle),\n        disabled: isConfirmDisabled\n      }\"\n      [disabled]=\"isConfirmDisabled\"\n      (click)=\"confirm()\"\n    >\n      @if (confirmIcon; as icon) {\n        <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\n      }\n      {{ confirmLabel }}\n    </button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "component", type: LucideTriangleAlert, selector: "svg[lucideTriangleAlert], svg[lucideAlertTriangle]" }, { kind: "component", type: LucideCircleAlert, selector: "svg[lucideCircleAlert], svg[lucideAlertCircle]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnConfirmationBodyComponent, isStandalone: true, selector: "mn-confirmation-body", inputs: { config: "config", modalRef: "modalRef" }, viewQueries: [{ propertyName: "formBody", first: true, predicate: MnFormBodyComponent, descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-6\" [ngClass]=\"toneClass\">\n  <!-- Custom Content (Component or Template) -->\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"$any(config)\"\n      [modalRef]=\"$any(modalRef)\"\n    ></mn-custom-body-host>\n  }\n\n  <div class=\"flex flex-col items-center text-center gap-6\">\n    @if (config.tone === 'warning' || config.tone === 'danger') {\n      <div\n        class=\"w-12 h-12 rounded-full flex items-center justify-center\"\n        [ngClass]=\"{\n          'bg-blue-100 text-blue-500': config.tone !== 'warning' && config.tone !== 'danger',\n          'bg-amber-100 text-amber-500': config.tone === 'warning',\n          'bg-red-100 text-red-500': config.tone === 'danger'\n        }\">\n        @if (config.tone === 'warning') {\n          <svg [size]=\"24\" lucideTriangleAlert></svg>\n        }\n        @if (config.tone === 'danger') {\n          <svg [size]=\"24\" lucideCircleAlert></svg>\n        }\n      </div>\n    }\n\n    @if (config.message) {\n      <div class=\"text-base text-base-content/80 leading-relaxed max-w-[28rem]\">\n        {{ config.message }}\n      </div>\n    }\n  </div>\n\n  <!-- Form Fields / Rows -->\n  @if (hasFormFields) {\n    <mn-form-body\n      [config]=\"$any(config)\"\n      [modalRef]=\"$any(modalRef)\"\n      [hideFooter]=\"true\"\n      [hideCustomBody]=\"true\"\n      (formStatusChange)=\"onFormStatusChange($event)\"\n    ></mn-form-body>\n  }\n\n  <div class=\"flex gap-3 w-full pb-6 sticky bottom-0 bg-base-100 z-10\">\n    <button\n      type=\"button\"\n      mnButton\n      [data]=\"{\n        variant: getButtonVariant(cancelStyle),\n        color: getButtonColor(cancelStyle)\n      }\"\n      (click)=\"cancel()\"\n    >\n      @if (cancelIcon; as icon) {\n        <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\n      }\n      {{ cancelLabel }}\n    </button>\n\n    <div class=\"flex-1\"></div>\n\n    <button\n      type=\"button\"\n      mnButton\n      [data]=\"{\n        variant: getButtonVariant(confirmStyle),\n        color: getButtonColor(confirmStyle),\n        disabled: isConfirmDisabled\n      }\"\n      [disabled]=\"isConfirmDisabled\"\n      (click)=\"confirm()\"\n    >\n      @if (confirmIcon; as icon) {\n        <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\n      }\n      {{ confirmLabel }}\n    </button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "component", type: LucideTriangleAlert, selector: "svg[lucideTriangleAlert], svg[lucideAlertTriangle]" }, { kind: "component", type: LucideCircleAlert, selector: "svg[lucideCircleAlert], svg[lucideAlertCircle]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnConfirmationBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-confirmation-body', standalone: true, imports: [CommonModule, MnButton, MnFormBodyComponent, MnCustomBodyHostComponent, ReactiveFormsModule, LucideDynamicIcon, LucideTriangleAlert, LucideCircleAlert], template: "<div class=\"flex flex-col gap-6\" [ngClass]=\"toneClass\">\n  <!-- Custom Content (Component or Template) -->\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"$any(config)\"\n      [modalRef]=\"$any(modalRef)\"\n    ></mn-custom-body-host>\n  }\n\n  <div class=\"flex flex-col items-center text-center gap-6\">\n    @if (config.tone === 'warning' || config.tone === 'danger') {\n      <div\n        class=\"w-12 h-12 rounded-full flex items-center justify-center\"\n        [ngClass]=\"{\n          'bg-blue-100 text-blue-500': config.tone !== 'warning' && config.tone !== 'danger',\n          'bg-amber-100 text-amber-500': config.tone === 'warning',\n          'bg-red-100 text-red-500': config.tone === 'danger'\n        }\">\n        @if (config.tone === 'warning') {\n          <svg [size]=\"24\" lucideTriangleAlert></svg>\n        }\n        @if (config.tone === 'danger') {\n          <svg [size]=\"24\" lucideCircleAlert></svg>\n        }\n      </div>\n    }\n\n    @if (config.message) {\n      <div class=\"text-base text-base-content/80 leading-relaxed max-w-[28rem]\">\n        {{ config.message }}\n      </div>\n    }\n  </div>\n\n  <!-- Form Fields / Rows -->\n  @if (hasFormFields) {\n    <mn-form-body\n      [config]=\"$any(config)\"\n      [modalRef]=\"$any(modalRef)\"\n      [hideFooter]=\"true\"\n      [hideCustomBody]=\"true\"\n      (formStatusChange)=\"onFormStatusChange($event)\"\n    ></mn-form-body>\n  }\n\n  <div class=\"flex gap-3 w-full pb-6 sticky bottom-0 bg-base-100 z-10\">\n    <button\n      mnButton\n      [data]=\"{\n        variant: getButtonVariant(cancelStyle),\n        color: getButtonColor(cancelStyle)\n      }\"\n      (click)=\"cancel()\"\n    >\n      @if (cancelIcon; as icon) {\n        <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\n      }\n      {{ cancelLabel }}\n    </button>\n\n    <div class=\"flex-1\"></div>\n\n    <button\n      mnButton\n      [data]=\"{\n        variant: getButtonVariant(confirmStyle),\n        color: getButtonColor(confirmStyle),\n        disabled: isConfirmDisabled\n      }\"\n      [disabled]=\"isConfirmDisabled\"\n      (click)=\"confirm()\"\n    >\n      @if (confirmIcon; as icon) {\n        <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\n      }\n      {{ confirmLabel }}\n    </button>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'mn-confirmation-body', standalone: true, imports: [CommonModule, MnButton, MnFormBodyComponent, MnCustomBodyHostComponent, ReactiveFormsModule, LucideDynamicIcon, LucideTriangleAlert, LucideCircleAlert], template: "<div class=\"flex flex-col gap-6\" [ngClass]=\"toneClass\">\n  <!-- Custom Content (Component or Template) -->\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"$any(config)\"\n      [modalRef]=\"$any(modalRef)\"\n    ></mn-custom-body-host>\n  }\n\n  <div class=\"flex flex-col items-center text-center gap-6\">\n    @if (config.tone === 'warning' || config.tone === 'danger') {\n      <div\n        class=\"w-12 h-12 rounded-full flex items-center justify-center\"\n        [ngClass]=\"{\n          'bg-blue-100 text-blue-500': config.tone !== 'warning' && config.tone !== 'danger',\n          'bg-amber-100 text-amber-500': config.tone === 'warning',\n          'bg-red-100 text-red-500': config.tone === 'danger'\n        }\">\n        @if (config.tone === 'warning') {\n          <svg [size]=\"24\" lucideTriangleAlert></svg>\n        }\n        @if (config.tone === 'danger') {\n          <svg [size]=\"24\" lucideCircleAlert></svg>\n        }\n      </div>\n    }\n\n    @if (config.message) {\n      <div class=\"text-base text-base-content/80 leading-relaxed max-w-[28rem]\">\n        {{ config.message }}\n      </div>\n    }\n  </div>\n\n  <!-- Form Fields / Rows -->\n  @if (hasFormFields) {\n    <mn-form-body\n      [config]=\"$any(config)\"\n      [modalRef]=\"$any(modalRef)\"\n      [hideFooter]=\"true\"\n      [hideCustomBody]=\"true\"\n      (formStatusChange)=\"onFormStatusChange($event)\"\n    ></mn-form-body>\n  }\n\n  <div class=\"flex gap-3 w-full pb-6 sticky bottom-0 bg-base-100 z-10\">\n    <button\n      type=\"button\"\n      mnButton\n      [data]=\"{\n        variant: getButtonVariant(cancelStyle),\n        color: getButtonColor(cancelStyle)\n      }\"\n      (click)=\"cancel()\"\n    >\n      @if (cancelIcon; as icon) {\n        <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\n      }\n      {{ cancelLabel }}\n    </button>\n\n    <div class=\"flex-1\"></div>\n\n    <button\n      type=\"button\"\n      mnButton\n      [data]=\"{\n        variant: getButtonVariant(confirmStyle),\n        color: getButtonColor(confirmStyle),\n        disabled: isConfirmDisabled\n      }\"\n      [disabled]=\"isConfirmDisabled\"\n      (click)=\"confirm()\"\n    >\n      @if (confirmIcon; as icon) {\n        <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\n      }\n      {{ confirmLabel }}\n    </button>\n  </div>\n</div>\n" }]
         }], propDecorators: { config: [{
                 type: Input
             }], modalRef: [{
@@ -8279,6 +8401,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }] } });
 
 class MnModalShellComponent {
+    lang = inject(MnLanguageService);
+    /**
+     * Accessible name for this control. Resolved through the conventional
+     * `mnModal.close` key so an app can translate it, falling back to English when the
+     * key is not defined rather than leaking the raw key into the UI.
+     */
+    get closeModalLabel() {
+        return this.lang.translateIfPresent('mnModal.close') ?? 'Close modal';
+    }
     el = inject(ElementRef);
     cdr = inject(ChangeDetectorRef);
     /** Downward release speed (px/ms) above which a short drag still dismisses — a "flick".
@@ -8699,7 +8830,7 @@ class MnModalShellComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnModalShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnModalShellComponent, isStandalone: true, selector: "mn-modal-shell", inputs: { config: "config", modalRef: "modalRef" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" }, properties: { "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "wizardBody", first: true, predicate: MnWizardBodyComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (showBackdrop) {\n  <!-- The backdrop is a visual overlay \u2014 keyboard dismiss is handled at component level via Escape key -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n<!--\n  The container deliberately does NOT stop click propagation. The backdrop is a\n  *sibling* element (absolutely positioned behind this one), never an ancestor, so\n  clicks in here can't reach `onBackdropClick()` anyway. Swallowing them instead\n  broke every \"click outside me\" handler inside a modal \u2014 component-level\n  `document:click` listeners (the multi-select panel, the table filter popover)\n  never fired, so those overlays stayed open.\n-->\n<div\n  class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n  [class.sheet-dragging]=\"isDraggingSheet\"\n  [ngClass]=\"containerSizeClass\"\n  [style.height]=\"containerHeightStyle\"\n  [style.transform]=\"sheetDragY ? 'translateY(' + sheetDragY + 'px)' : null\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n  [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n  tabindex=\"-1\"\n>\n  @if (isMobileSheet) {\n    <!-- Drag handle for swipe-to-dismiss, visible only on mobile bottom sheets -->\n    <div\n    (pointercancel)=\"onSheetPointerUp()\"\n    (pointerdown)=\"onSheetPointerDown($event)\"\n    (pointermove)=\"onSheetPointerMove($event)\"\n    (pointerup)=\"onSheetPointerUp()\"\n      class=\"sm:hidden flex justify-center pt-2 pb-1 touch-none cursor-grab\"\n    >\n      <div class=\"h-1.5 w-10 rounded-full bg-base-300\"></div>\n    </div>\n  }\n\n  <!-- On mobile the whole header doubles as a swipe-to-dismiss surface (drags that\n       start on the close button are ignored). The grabber above is the visual cue. -->\n  <div [class.border-b]=\"config.kind !== ModalKind.WIZARD\"\n       [class.border-base-300]=\"config.kind !== ModalKind.WIZARD\"\n       (pointercancel)=\"onSheetPointerUp()\"\n       (pointerdown)=\"onSheetPointerDown($event)\"\n       (pointermove)=\"onSheetPointerMove($event)\"\n       (pointerup)=\"onSheetPointerUp()\"\n       [class.cursor-grab]=\"isMobileSheet\"\n       [class.sm:cursor-auto]=\"isMobileSheet\"\n       [class.sm:touch-auto]=\"isMobileSheet\"\n       [class.touch-none]=\"isMobileSheet\"\n       class=\"flex items-center justify-between p-6\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <!-- On small screens the wizard's step labels (under the progress circles) are hidden,\n             so surface the active step name here as \"Title - Step\" instead. -->\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\"\n            id=\"mn-modal-title\">{{ config.title }}@if (config.kind === ModalKind.WIZARD && wizardStepTitle()) {\n          <span class=\"sm:hidden font-normal text-base-content/60\"> - {{ wizardStepTitle() }}</span>\n        }</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <div [class]=\"isMobileSheet ? 'hidden sm:flex' : ''\">\n        <button\n          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'gray', hover: true, borderRadius: 'md' }\"\n          type=\"button\"\n          class=\"w-8 h-8\"\n          (click)=\"onCloseButtonClick()\"\n          aria-label=\"Close modal\"\n        >\n          <svg lucideX [size]=\"18\"></svg>\n        </button>\n      </div>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  @if (config.kind === ModalKind.WIZARD) {\n    <!-- Wizard manages its own internal scrolling so the steps header and footer\n         stay fixed while only the step body scrolls. No padding/scroll here. -->\n    <div class=\"flex-auto min-h-0 overflow-hidden flex flex-col\">\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"$any(modalRef)\"\n        class=\"flex-auto min-h-0 flex flex-col\"\n      ></mn-wizard-body>\n    </div>\n  } @else {\n    <div class=\"flex-1 overflow-y-auto px-6 pt-6\">\n      @if (config.kind === ModalKind.FORM) {\n        <mn-form-body\n          [config]=\"asForm(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block h-full\"\n        ></mn-form-body>\n      }\n\n      @if (config.kind === ModalKind.CONFIRMATION) {\n        <mn-confirmation-body\n          [config]=\"asConfirmation(config)\"\n          [modalRef]=\"$any(modalRef)\"\n        ></mn-confirmation-body>\n      }\n\n      @if (config.kind === ModalKind.CUSTOM) {\n        <mn-custom-body-host\n          [config]=\"asCustom(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block pb-6\"\n        ></mn-custom-body-host>\n      }\n    </div>\n  }\n\n  <!-- Custom Footer Actions (not for wizard modals, they render their own) -->\n  @if (hasCustomFooterActions && config.kind !== ModalKind.WIZARD) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      <mn-footer-actions\n        [actions]=\"config.footerActions || []\"\n        [showIcons]=\"config.showActionIcons !== false\"\n        (actionClick)=\"onFooterAction($event)\"\n      ></mn-footer-actions>\n    </div>\n  }\n</div>\n", styles: [":host{--mn-sheet-ease: cubic-bezier(.32, .72, 0, 1);position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}.modal-container{transition:transform .35s var(--mn-sheet-ease),min-height .25s var(--mn-sheet-ease)}.modal-container.sheet-dragging{transition:none}:host(.swipe-dismissing) .modal-container,:host(.swipe-dismissing).closing .modal-container{animation:none!important;transition:transform .3s var(--mn-sheet-ease)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slideUpIn{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}:host(.anim-slide) .modal-container{animation:slideIn .2s ease-in-out}:host(.anim-fade) .modal-container{animation:fadeIn .2s ease-in-out}:host(.anim-zoom) .modal-container{animation:zoomIn .2s ease-in-out}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}@media(max-width:639.98px){:host(.mobile-sheet){align-items:flex-end}:host(.mobile-sheet) .modal-container{width:100%;max-width:100%;min-height:0;max-height:92vh;padding-bottom:env(safe-area-inset-bottom);border-radius:1rem 1rem 0 0;animation:slideUpIn .45s var(--mn-sheet-ease)}:host-context(.mn-keyboard-open).mobile-sheet .modal-container{min-height:92vh}:host(.mobile-sheet).anim-slide .modal-container,:host(.mobile-sheet).anim-fade .modal-container,:host(.mobile-sheet).anim-zoom .modal-container{animation:slideUpIn .45s var(--mn-sheet-ease)}:host(.mobile-sheet).closing .modal-container,:host(.mobile-sheet).closing.anim-slide .modal-container,:host(.mobile-sheet).closing.anim-fade .modal-container,:host(.mobile-sheet).closing.anim-zoom .modal-container{animation:none!important;transform:translateY(100%);opacity:0;transition:transform .45s var(--mn-sheet-ease),opacity .45s var(--mn-sheet-ease)}}@media(prefers-reduced-motion:reduce){:host,:host .modal-backdrop,:host .modal-container{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnWizardBodyComponent, selector: "mn-wizard-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnConfirmationBodyComponent, selector: "mn-confirmation-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFooterActionsComponent, selector: "mn-footer-actions", inputs: ["actions", "showIcons"], outputs: ["actionClick"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnModalShellComponent, isStandalone: true, selector: "mn-modal-shell", inputs: { config: "config", modalRef: "modalRef" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" }, properties: { "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "wizardBody", first: true, predicate: MnWizardBodyComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (showBackdrop) {\n  <!-- The backdrop is a visual overlay \u2014 keyboard dismiss is handled at component level via Escape key -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n<!--\n  The container deliberately does NOT stop click propagation. The backdrop is a\n  *sibling* element (absolutely positioned behind this one), never an ancestor, so\n  clicks in here can't reach `onBackdropClick()` anyway. Swallowing them instead\n  broke every \"click outside me\" handler inside a modal \u2014 component-level\n  `document:click` listeners (the multi-select panel, the table filter popover)\n  never fired, so those overlays stayed open.\n-->\n<div\n  class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n  [class.sheet-dragging]=\"isDraggingSheet\"\n  [ngClass]=\"containerSizeClass\"\n  [style.height]=\"containerHeightStyle\"\n  [style.transform]=\"sheetDragY ? 'translateY(' + sheetDragY + 'px)' : null\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n  [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n  tabindex=\"-1\"\n>\n  @if (isMobileSheet) {\n    <!-- Drag handle for swipe-to-dismiss, visible only on mobile bottom sheets -->\n    <div\n    (pointercancel)=\"onSheetPointerUp()\"\n    (pointerdown)=\"onSheetPointerDown($event)\"\n    (pointermove)=\"onSheetPointerMove($event)\"\n    (pointerup)=\"onSheetPointerUp()\"\n      class=\"sm:hidden flex justify-center pt-2 pb-1 touch-none cursor-grab\"\n    >\n      <div class=\"h-1.5 w-10 rounded-full bg-base-300\"></div>\n    </div>\n  }\n\n  <!-- On mobile the whole header doubles as a swipe-to-dismiss surface (drags that\n       start on the close button are ignored). The grabber above is the visual cue. -->\n  <div [class.border-b]=\"config.kind !== ModalKind.WIZARD\"\n       [class.border-base-300]=\"config.kind !== ModalKind.WIZARD\"\n       (pointercancel)=\"onSheetPointerUp()\"\n       (pointerdown)=\"onSheetPointerDown($event)\"\n       (pointermove)=\"onSheetPointerMove($event)\"\n       (pointerup)=\"onSheetPointerUp()\"\n       [class.cursor-grab]=\"isMobileSheet\"\n       [class.sm:cursor-auto]=\"isMobileSheet\"\n       [class.sm:touch-auto]=\"isMobileSheet\"\n       [class.touch-none]=\"isMobileSheet\"\n       class=\"flex items-center justify-between p-6\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <!-- On small screens the wizard's step labels (under the progress circles) are hidden,\n             so surface the active step name here as \"Title - Step\" instead. -->\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\"\n            id=\"mn-modal-title\">{{ config.title }}@if (config.kind === ModalKind.WIZARD && wizardStepTitle()) {\n          <span class=\"sm:hidden font-normal text-base-content/60\"> - {{ wizardStepTitle() }}</span>\n        }</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <div [class]=\"isMobileSheet ? 'hidden sm:flex' : ''\">\n        <button\n          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'gray', hover: true, borderRadius: 'md' }\"\n          type=\"button\"\n          class=\"w-8 h-8\"\n          (click)=\"onCloseButtonClick()\"\n          [attr.aria-label]=\"closeModalLabel\"\n        >\n          <svg lucideX [size]=\"18\"></svg>\n        </button>\n      </div>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  @if (config.kind === ModalKind.WIZARD) {\n    <!-- Wizard manages its own internal scrolling so the steps header and footer\n         stay fixed while only the step body scrolls. No padding/scroll here. -->\n    <div class=\"flex-auto min-h-0 overflow-hidden flex flex-col\">\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"$any(modalRef)\"\n        class=\"flex-auto min-h-0 flex flex-col\"\n      ></mn-wizard-body>\n    </div>\n  } @else {\n    <div class=\"flex-1 overflow-y-auto px-6 pt-6\">\n      @if (config.kind === ModalKind.FORM) {\n        <mn-form-body\n          [config]=\"asForm(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block h-full\"\n        ></mn-form-body>\n      }\n\n      @if (config.kind === ModalKind.CONFIRMATION) {\n        <mn-confirmation-body\n          [config]=\"asConfirmation(config)\"\n          [modalRef]=\"$any(modalRef)\"\n        ></mn-confirmation-body>\n      }\n\n      @if (config.kind === ModalKind.CUSTOM) {\n        <mn-custom-body-host\n          [config]=\"asCustom(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block pb-6\"\n        ></mn-custom-body-host>\n      }\n    </div>\n  }\n\n  <!-- Custom Footer Actions (not for wizard modals, they render their own) -->\n  @if (hasCustomFooterActions && config.kind !== ModalKind.WIZARD) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      <mn-footer-actions\n        [actions]=\"config.footerActions || []\"\n        [showIcons]=\"config.showActionIcons !== false\"\n        (actionClick)=\"onFooterAction($event)\"\n      ></mn-footer-actions>\n    </div>\n  }\n</div>\n", styles: [":host{--mn-sheet-ease: cubic-bezier(.32, .72, 0, 1);position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}.modal-container{transition:transform .35s var(--mn-sheet-ease),min-height .25s var(--mn-sheet-ease)}.modal-container.sheet-dragging{transition:none}:host(.swipe-dismissing) .modal-container,:host(.swipe-dismissing).closing .modal-container{animation:none!important;transition:transform .3s var(--mn-sheet-ease)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slideUpIn{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}:host(.anim-slide) .modal-container{animation:slideIn .2s ease-in-out}:host(.anim-fade) .modal-container{animation:fadeIn .2s ease-in-out}:host(.anim-zoom) .modal-container{animation:zoomIn .2s ease-in-out}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}@media(max-width:639.98px){:host(.mobile-sheet){align-items:flex-end}:host(.mobile-sheet) .modal-container{width:100%;max-width:100%;min-height:0;max-height:92vh;padding-bottom:env(safe-area-inset-bottom);border-radius:1rem 1rem 0 0;animation:slideUpIn .45s var(--mn-sheet-ease)}:host-context(.mn-keyboard-open).mobile-sheet .modal-container{min-height:92vh}:host(.mobile-sheet).anim-slide .modal-container,:host(.mobile-sheet).anim-fade .modal-container,:host(.mobile-sheet).anim-zoom .modal-container{animation:slideUpIn .45s var(--mn-sheet-ease)}:host(.mobile-sheet).closing .modal-container,:host(.mobile-sheet).closing.anim-slide .modal-container,:host(.mobile-sheet).closing.anim-fade .modal-container,:host(.mobile-sheet).closing.anim-zoom .modal-container{animation:none!important;transform:translateY(100%);opacity:0;transition:transform .45s var(--mn-sheet-ease),opacity .45s var(--mn-sheet-ease)}}@media(prefers-reduced-motion:reduce){:host,:host .modal-backdrop,:host .modal-container{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnWizardBodyComponent, selector: "mn-wizard-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnConfirmationBodyComponent, selector: "mn-confirmation-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFooterActionsComponent, selector: "mn-footer-actions", inputs: ["actions", "showIcons"], outputs: ["actionClick"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnModalShellComponent, decorators: [{
             type: Component,
@@ -8712,7 +8843,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         MnFooterActionsComponent,
                         MnButton,
                         LucideX,
-                    ], template: "@if (showBackdrop) {\n  <!-- The backdrop is a visual overlay \u2014 keyboard dismiss is handled at component level via Escape key -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n<!--\n  The container deliberately does NOT stop click propagation. The backdrop is a\n  *sibling* element (absolutely positioned behind this one), never an ancestor, so\n  clicks in here can't reach `onBackdropClick()` anyway. Swallowing them instead\n  broke every \"click outside me\" handler inside a modal \u2014 component-level\n  `document:click` listeners (the multi-select panel, the table filter popover)\n  never fired, so those overlays stayed open.\n-->\n<div\n  class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n  [class.sheet-dragging]=\"isDraggingSheet\"\n  [ngClass]=\"containerSizeClass\"\n  [style.height]=\"containerHeightStyle\"\n  [style.transform]=\"sheetDragY ? 'translateY(' + sheetDragY + 'px)' : null\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n  [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n  tabindex=\"-1\"\n>\n  @if (isMobileSheet) {\n    <!-- Drag handle for swipe-to-dismiss, visible only on mobile bottom sheets -->\n    <div\n    (pointercancel)=\"onSheetPointerUp()\"\n    (pointerdown)=\"onSheetPointerDown($event)\"\n    (pointermove)=\"onSheetPointerMove($event)\"\n    (pointerup)=\"onSheetPointerUp()\"\n      class=\"sm:hidden flex justify-center pt-2 pb-1 touch-none cursor-grab\"\n    >\n      <div class=\"h-1.5 w-10 rounded-full bg-base-300\"></div>\n    </div>\n  }\n\n  <!-- On mobile the whole header doubles as a swipe-to-dismiss surface (drags that\n       start on the close button are ignored). The grabber above is the visual cue. -->\n  <div [class.border-b]=\"config.kind !== ModalKind.WIZARD\"\n       [class.border-base-300]=\"config.kind !== ModalKind.WIZARD\"\n       (pointercancel)=\"onSheetPointerUp()\"\n       (pointerdown)=\"onSheetPointerDown($event)\"\n       (pointermove)=\"onSheetPointerMove($event)\"\n       (pointerup)=\"onSheetPointerUp()\"\n       [class.cursor-grab]=\"isMobileSheet\"\n       [class.sm:cursor-auto]=\"isMobileSheet\"\n       [class.sm:touch-auto]=\"isMobileSheet\"\n       [class.touch-none]=\"isMobileSheet\"\n       class=\"flex items-center justify-between p-6\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <!-- On small screens the wizard's step labels (under the progress circles) are hidden,\n             so surface the active step name here as \"Title - Step\" instead. -->\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\"\n            id=\"mn-modal-title\">{{ config.title }}@if (config.kind === ModalKind.WIZARD && wizardStepTitle()) {\n          <span class=\"sm:hidden font-normal text-base-content/60\"> - {{ wizardStepTitle() }}</span>\n        }</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <div [class]=\"isMobileSheet ? 'hidden sm:flex' : ''\">\n        <button\n          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'gray', hover: true, borderRadius: 'md' }\"\n          type=\"button\"\n          class=\"w-8 h-8\"\n          (click)=\"onCloseButtonClick()\"\n          aria-label=\"Close modal\"\n        >\n          <svg lucideX [size]=\"18\"></svg>\n        </button>\n      </div>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  @if (config.kind === ModalKind.WIZARD) {\n    <!-- Wizard manages its own internal scrolling so the steps header and footer\n         stay fixed while only the step body scrolls. No padding/scroll here. -->\n    <div class=\"flex-auto min-h-0 overflow-hidden flex flex-col\">\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"$any(modalRef)\"\n        class=\"flex-auto min-h-0 flex flex-col\"\n      ></mn-wizard-body>\n    </div>\n  } @else {\n    <div class=\"flex-1 overflow-y-auto px-6 pt-6\">\n      @if (config.kind === ModalKind.FORM) {\n        <mn-form-body\n          [config]=\"asForm(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block h-full\"\n        ></mn-form-body>\n      }\n\n      @if (config.kind === ModalKind.CONFIRMATION) {\n        <mn-confirmation-body\n          [config]=\"asConfirmation(config)\"\n          [modalRef]=\"$any(modalRef)\"\n        ></mn-confirmation-body>\n      }\n\n      @if (config.kind === ModalKind.CUSTOM) {\n        <mn-custom-body-host\n          [config]=\"asCustom(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block pb-6\"\n        ></mn-custom-body-host>\n      }\n    </div>\n  }\n\n  <!-- Custom Footer Actions (not for wizard modals, they render their own) -->\n  @if (hasCustomFooterActions && config.kind !== ModalKind.WIZARD) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      <mn-footer-actions\n        [actions]=\"config.footerActions || []\"\n        [showIcons]=\"config.showActionIcons !== false\"\n        (actionClick)=\"onFooterAction($event)\"\n      ></mn-footer-actions>\n    </div>\n  }\n</div>\n", styles: [":host{--mn-sheet-ease: cubic-bezier(.32, .72, 0, 1);position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}.modal-container{transition:transform .35s var(--mn-sheet-ease),min-height .25s var(--mn-sheet-ease)}.modal-container.sheet-dragging{transition:none}:host(.swipe-dismissing) .modal-container,:host(.swipe-dismissing).closing .modal-container{animation:none!important;transition:transform .3s var(--mn-sheet-ease)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slideUpIn{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}:host(.anim-slide) .modal-container{animation:slideIn .2s ease-in-out}:host(.anim-fade) .modal-container{animation:fadeIn .2s ease-in-out}:host(.anim-zoom) .modal-container{animation:zoomIn .2s ease-in-out}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}@media(max-width:639.98px){:host(.mobile-sheet){align-items:flex-end}:host(.mobile-sheet) .modal-container{width:100%;max-width:100%;min-height:0;max-height:92vh;padding-bottom:env(safe-area-inset-bottom);border-radius:1rem 1rem 0 0;animation:slideUpIn .45s var(--mn-sheet-ease)}:host-context(.mn-keyboard-open).mobile-sheet .modal-container{min-height:92vh}:host(.mobile-sheet).anim-slide .modal-container,:host(.mobile-sheet).anim-fade .modal-container,:host(.mobile-sheet).anim-zoom .modal-container{animation:slideUpIn .45s var(--mn-sheet-ease)}:host(.mobile-sheet).closing .modal-container,:host(.mobile-sheet).closing.anim-slide .modal-container,:host(.mobile-sheet).closing.anim-fade .modal-container,:host(.mobile-sheet).closing.anim-zoom .modal-container{animation:none!important;transform:translateY(100%);opacity:0;transition:transform .45s var(--mn-sheet-ease),opacity .45s var(--mn-sheet-ease)}}@media(prefers-reduced-motion:reduce){:host,:host .modal-backdrop,:host .modal-container{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}\n"] }]
+                    ], template: "@if (showBackdrop) {\n  <!-- The backdrop is a visual overlay \u2014 keyboard dismiss is handled at component level via Escape key -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n<!--\n  The container deliberately does NOT stop click propagation. The backdrop is a\n  *sibling* element (absolutely positioned behind this one), never an ancestor, so\n  clicks in here can't reach `onBackdropClick()` anyway. Swallowing them instead\n  broke every \"click outside me\" handler inside a modal \u2014 component-level\n  `document:click` listeners (the multi-select panel, the table filter popover)\n  never fired, so those overlays stayed open.\n-->\n<div\n  class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n  [class.sheet-dragging]=\"isDraggingSheet\"\n  [ngClass]=\"containerSizeClass\"\n  [style.height]=\"containerHeightStyle\"\n  [style.transform]=\"sheetDragY ? 'translateY(' + sheetDragY + 'px)' : null\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n  [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n  tabindex=\"-1\"\n>\n  @if (isMobileSheet) {\n    <!-- Drag handle for swipe-to-dismiss, visible only on mobile bottom sheets -->\n    <div\n    (pointercancel)=\"onSheetPointerUp()\"\n    (pointerdown)=\"onSheetPointerDown($event)\"\n    (pointermove)=\"onSheetPointerMove($event)\"\n    (pointerup)=\"onSheetPointerUp()\"\n      class=\"sm:hidden flex justify-center pt-2 pb-1 touch-none cursor-grab\"\n    >\n      <div class=\"h-1.5 w-10 rounded-full bg-base-300\"></div>\n    </div>\n  }\n\n  <!-- On mobile the whole header doubles as a swipe-to-dismiss surface (drags that\n       start on the close button are ignored). The grabber above is the visual cue. -->\n  <div [class.border-b]=\"config.kind !== ModalKind.WIZARD\"\n       [class.border-base-300]=\"config.kind !== ModalKind.WIZARD\"\n       (pointercancel)=\"onSheetPointerUp()\"\n       (pointerdown)=\"onSheetPointerDown($event)\"\n       (pointermove)=\"onSheetPointerMove($event)\"\n       (pointerup)=\"onSheetPointerUp()\"\n       [class.cursor-grab]=\"isMobileSheet\"\n       [class.sm:cursor-auto]=\"isMobileSheet\"\n       [class.sm:touch-auto]=\"isMobileSheet\"\n       [class.touch-none]=\"isMobileSheet\"\n       class=\"flex items-center justify-between p-6\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <!-- On small screens the wizard's step labels (under the progress circles) are hidden,\n             so surface the active step name here as \"Title - Step\" instead. -->\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\"\n            id=\"mn-modal-title\">{{ config.title }}@if (config.kind === ModalKind.WIZARD && wizardStepTitle()) {\n          <span class=\"sm:hidden font-normal text-base-content/60\"> - {{ wizardStepTitle() }}</span>\n        }</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <div [class]=\"isMobileSheet ? 'hidden sm:flex' : ''\">\n        <button\n          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'gray', hover: true, borderRadius: 'md' }\"\n          type=\"button\"\n          class=\"w-8 h-8\"\n          (click)=\"onCloseButtonClick()\"\n          [attr.aria-label]=\"closeModalLabel\"\n        >\n          <svg lucideX [size]=\"18\"></svg>\n        </button>\n      </div>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  @if (config.kind === ModalKind.WIZARD) {\n    <!-- Wizard manages its own internal scrolling so the steps header and footer\n         stay fixed while only the step body scrolls. No padding/scroll here. -->\n    <div class=\"flex-auto min-h-0 overflow-hidden flex flex-col\">\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"$any(modalRef)\"\n        class=\"flex-auto min-h-0 flex flex-col\"\n      ></mn-wizard-body>\n    </div>\n  } @else {\n    <div class=\"flex-1 overflow-y-auto px-6 pt-6\">\n      @if (config.kind === ModalKind.FORM) {\n        <mn-form-body\n          [config]=\"asForm(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block h-full\"\n        ></mn-form-body>\n      }\n\n      @if (config.kind === ModalKind.CONFIRMATION) {\n        <mn-confirmation-body\n          [config]=\"asConfirmation(config)\"\n          [modalRef]=\"$any(modalRef)\"\n        ></mn-confirmation-body>\n      }\n\n      @if (config.kind === ModalKind.CUSTOM) {\n        <mn-custom-body-host\n          [config]=\"asCustom(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block pb-6\"\n        ></mn-custom-body-host>\n      }\n    </div>\n  }\n\n  <!-- Custom Footer Actions (not for wizard modals, they render their own) -->\n  @if (hasCustomFooterActions && config.kind !== ModalKind.WIZARD) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      <mn-footer-actions\n        [actions]=\"config.footerActions || []\"\n        [showIcons]=\"config.showActionIcons !== false\"\n        (actionClick)=\"onFooterAction($event)\"\n      ></mn-footer-actions>\n    </div>\n  }\n</div>\n", styles: [":host{--mn-sheet-ease: cubic-bezier(.32, .72, 0, 1);position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}.modal-container{transition:transform .35s var(--mn-sheet-ease),min-height .25s var(--mn-sheet-ease)}.modal-container.sheet-dragging{transition:none}:host(.swipe-dismissing) .modal-container,:host(.swipe-dismissing).closing .modal-container{animation:none!important;transition:transform .3s var(--mn-sheet-ease)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slideUpIn{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}:host(.anim-slide) .modal-container{animation:slideIn .2s ease-in-out}:host(.anim-fade) .modal-container{animation:fadeIn .2s ease-in-out}:host(.anim-zoom) .modal-container{animation:zoomIn .2s ease-in-out}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}@media(max-width:639.98px){:host(.mobile-sheet){align-items:flex-end}:host(.mobile-sheet) .modal-container{width:100%;max-width:100%;min-height:0;max-height:92vh;padding-bottom:env(safe-area-inset-bottom);border-radius:1rem 1rem 0 0;animation:slideUpIn .45s var(--mn-sheet-ease)}:host-context(.mn-keyboard-open).mobile-sheet .modal-container{min-height:92vh}:host(.mobile-sheet).anim-slide .modal-container,:host(.mobile-sheet).anim-fade .modal-container,:host(.mobile-sheet).anim-zoom .modal-container{animation:slideUpIn .45s var(--mn-sheet-ease)}:host(.mobile-sheet).closing .modal-container,:host(.mobile-sheet).closing.anim-slide .modal-container,:host(.mobile-sheet).closing.anim-fade .modal-container,:host(.mobile-sheet).closing.anim-zoom .modal-container{animation:none!important;transform:translateY(100%);opacity:0;transition:transform .45s var(--mn-sheet-ease),opacity .45s var(--mn-sheet-ease)}}@media(prefers-reduced-motion:reduce){:host,:host .modal-backdrop,:host .modal-container{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], modalRef: [{
@@ -8825,12 +8956,16 @@ class MnList extends MnSelectableCollectionBase {
             this.loadMoreRows();
         }
     }
+    /** Accessible name for the scrollable list region. */
+    get listRegionLabel() {
+        return this.resolveLabel(undefined, 'mnCollection.dataList', 'Data list');
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnList, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnList, isStandalone: true, selector: "mn-list", outputs: { itemClick: "itemClick" }, viewQueries: [{ propertyName: "collectionBody", first: true, predicate: ["collectionBody"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Toolbar: left template, then search + right template. Below 375px each group\n     takes its own full-width row; from 375px up the left group sits at the start\n     and the search group at the end. Structure and classes mirror mn-table so all\n     collections behave identically at every width. -->\n@if (\n  dataSource.canSearch ||\n  dataSource.toolbarLeftTemplate ||\n  dataSource.toolbarRightTemplate ||\n  dataSource.toolbarTemplate\n) {\n  <div class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center justify-between gap-2 mb-3\">\n    <div class=\"flex items-center gap-2 w-full min-[375px]:w-auto\">\n      @if (dataSource.toolbarLeftTemplate) {\n        <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n          <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n        </div>\n      }\n    </div>\n    <div\n      class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center gap-2 w-full min-[375px]:flex-1 min-[480px]:flex-none min-[480px]:w-auto\">\n      @if (dataSource.canSearch) {\n        <mn-lib-input-field\n          (ngModelChange)=\"onSearch($event)\"\n          [ngModel]=\"searchValue\"\n          [props]=\"{\n            id: 'mn-list-search',\n            type: 'search',\n            label: '',\n            ariaLabel: dataSource.searchPlaceholder ?? 'Search...',\n            placeholder: dataSource.searchPlaceholder ?? 'Search...',\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n          class=\"w-full min-[375px]:flex-1 min-[480px]:max-w-64\"\n        ></mn-lib-input-field>\n      }\n      <!-- `toolbarTemplate` is the deprecated name for this slot; honouring it here\n           keeps existing callers rendering exactly where they used to. -->\n      @if (dataSource.toolbarRightTemplate ?? dataSource.toolbarTemplate; as rightTemplate) {\n        <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n          <ng-container [ngTemplateOutlet]=\"rightTemplate\"></ng-container>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n<!-- List wrapper -->\n<div\n  #collectionBody\n  [style.min-height.px]=\"bodyMinHeight\"\n  class=\"w-full\"\n  [class.border]=\"dataSource.appearance?.bordered\"\n  [class.border-base-300]=\"dataSource.appearance?.bordered\"\n  [class.rounded]=\"dataSource.appearance?.bordered\"\n  role=\"list\"\n  aria-label=\"Data list\"\n>\n  <!-- Loading state -->\n  @if (isLoadingState) {\n    @for (_ of skeletonRows; track $index) {\n      <div [class.py-2]=\"dataSource.appearance?.compact\" class=\"px-4 py-3\" role=\"listitem\">\n        @if (isTemplateRef(dataSource.skeleton)) {\n          <ng-container [ngTemplateOutlet]=\"$any(dataSource.skeleton)\"></ng-container>\n        } @else {\n          <div class=\"flex flex-col gap-1\">\n            @for (line of skeletonLines; track $index) {\n              <mn-skeleton [data]=\"line\"></mn-skeleton>\n            }\n          </div>\n        }\n      </div>\n      @if (!$last && (dataSource.appearance?.dividers !== false)) {\n        <div class=\"border-b border-base-300\"></div>\n      }\n    }\n  } @else if (isErrorState) {\n    <!-- Error state -->\n    <div class=\"text-center text-xs py-8\" role=\"listitem\">\n      @if (dataSource.errorTemplate) {\n        <ng-container [ngTemplateOutlet]=\"dataSource.errorTemplate\"></ng-container>\n      } @else {\n        <div class=\"flex flex-col items-center gap-2 text-error\">\n          <p class=\"text-sm\">{{ dataSource.errorMessage }}</p>\n        </div>\n      }\n    </div>\n  } @else {\n    <!-- Empty state -->\n    @if (filteredItems.length === 0) {\n      <div class=\"text-center text-xs py-8\" role=\"listitem\">\n        @if (dataSource.emptyTemplate) {\n          <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n        } @else {\n          <div class=\"flex flex-col items-center gap-2 text-base-content/50\">\n            @if (dataSource.emptyIcon !== null) {\n              <svg [lucideIcon]=\"dataSource.emptyIcon ?? defaultEmptyIcon\" [size]=\"32\" [strokeWidth]=\"1.5\"></svg>\n            }\n            <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Select all (multi-select) -->\n    @if (isMultiSelect && filteredItems.length > 0) {\n      <div class=\"flex items-center gap-2 px-4 py-2 bg-base-200 text-sm\">\n        <mn-lib-checkbox\n          (checkedChange)=\"toggleAll()\"\n          [checked]=\"allSelected\"\n          [props]=\"{ id: 'mn-list-select-all', label: 'Select all', size: 'sm' }\"\n        ></mn-lib-checkbox>\n      </div>\n      @if (dataSource.appearance?.dividers !== false) {\n        <div class=\"border-b border-base-300\"></div>\n      }\n    }\n\n    <!-- Data items -->\n    @for (item of paginatedItems; track trackByID($index, item); let odd = $odd; let last = $last) {\n      <div\n        class=\"flex items-center gap-2 bg-base-100 transition-colors duration-150\"\n        [ngClass]=\"{'bg-primary/10': isSelected(item)}\"\n        [class.bg-base-200]=\"!isSelected(item) && odd && dataSource.appearance?.dividers !== false\"\n        [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n        [class.cursor-pointer]=\"!!dataSource.onItemClick\"\n        [class.px-4]=\"true\"\n        [class.py-3]=\"!dataSource.appearance?.compact\"\n        [class.py-2]=\"dataSource.appearance?.compact\"\n        role=\"listitem\"\n        (keyup.enter)=\"onItemClick(item)\"\n        (click)=\"onItemClick(item)\"\n        [attr.tabindex]=\"dataSource.onItemClick ? 0 : null\"\n      >\n        <!-- Selection checkbox -->\n        @if (hasSelection) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <div (click)=\"$event.stopPropagation()\" class=\"shrink-0\">\n            <mn-lib-checkbox\n              (checkedChange)=\"toggle(item)\"\n              [checked]=\"isSelected(item)\"\n              [props]=\"{ id: 'mn-list-item-' + $index, size: 'sm' }\"\n            ></mn-lib-checkbox>\n          </div>\n        }\n\n        <!-- Item content via template -->\n        <div class=\"flex-1 min-w-0\">\n          <ng-container\n            [ngTemplateOutlet]=\"dataSource.itemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, data: item }\"\n          ></ng-container>\n        </div>\n      </div>\n      @if (!last && (dataSource.appearance?.dividers !== false)) {\n        <div class=\"border-b border-base-300\"></div>\n      }\n    }\n  }\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-list\"\n></mn-collection-pagination>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MnCheckbox, selector: "mn-lib-checkbox", inputs: ["props", "checked"], outputs: ["checkedChange"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnSkeleton, selector: "mn-skeleton", inputs: ["data"] }, { kind: "component", type: MnCollectionPagination, selector: "mn-collection-pagination", inputs: ["idPrefix", "isPaginated", "isServerPaginated", "showLoadMore", "loadingMoreRows", "currentPage", "pageSize", "totalPages", "totalItemCount", "visiblePages", "pageSizeSelectOptions", "labels"], outputs: ["loadMore", "pageChange", "pageSizeChange"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnList, isStandalone: true, selector: "mn-list", outputs: { itemClick: "itemClick" }, viewQueries: [{ propertyName: "collectionBody", first: true, predicate: ["collectionBody"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Toolbar: left template, then search + right template. Below 375px each group\n     takes its own full-width row; from 375px up the left group sits at the start\n     and the search group at the end. Structure and classes mirror mn-table so all\n     collections behave identically at every width. -->\n@if (\n  dataSource.canSearch ||\n  dataSource.toolbarLeftTemplate ||\n  dataSource.toolbarRightTemplate ||\n  dataSource.toolbarTemplate\n) {\n  <div class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center justify-between gap-2 mb-3\">\n    <div class=\"flex items-center gap-2 w-full min-[375px]:w-auto\">\n      @if (dataSource.toolbarLeftTemplate) {\n        <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n          <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n        </div>\n      }\n    </div>\n    <div\n      class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center gap-2 w-full min-[375px]:flex-1 min-[480px]:flex-none min-[480px]:w-auto\">\n      @if (dataSource.canSearch) {\n        <!-- Enter must not submit a surrounding form: the search box is the\n             collection's own chrome, not a field of whatever form it sits in. -->\n        <mn-lib-input-field\n          (keydown.enter)=\"$event.preventDefault()\"\n          (ngModelChange)=\"onSearch($event)\"\n          [ngModel]=\"searchValue\"\n          [props]=\"{\n            id: 'mn-list-search',\n            type: 'search',\n            label: '',\n            ariaLabel: dataSource.searchPlaceholder ?? 'Search...',\n            placeholder: dataSource.searchPlaceholder ?? 'Search...',\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n          class=\"w-full min-[375px]:flex-1 min-[480px]:max-w-64\"\n        ></mn-lib-input-field>\n      }\n      <!-- `toolbarTemplate` is the deprecated name for this slot; honouring it here\n           keeps existing callers rendering exactly where they used to. -->\n      @if (dataSource.toolbarRightTemplate ?? dataSource.toolbarTemplate; as rightTemplate) {\n        <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n          <ng-container [ngTemplateOutlet]=\"rightTemplate\"></ng-container>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n<!-- List wrapper -->\n<div\n  #collectionBody\n  [style.min-height.px]=\"bodyMinHeight\"\n  class=\"w-full\"\n  [class.border]=\"dataSource.appearance?.bordered\"\n  [class.border-base-300]=\"dataSource.appearance?.bordered\"\n  [class.rounded]=\"dataSource.appearance?.bordered\"\n  role=\"list\"\n  [attr.aria-label]=\"listRegionLabel\"\n>\n  <!-- Loading state -->\n  @if (isLoadingState) {\n    @for (_ of skeletonRows; track $index) {\n      <div [class.py-2]=\"dataSource.appearance?.compact\" class=\"px-4 py-3\" role=\"listitem\">\n        @if (isTemplateRef(dataSource.skeleton)) {\n          <ng-container [ngTemplateOutlet]=\"$any(dataSource.skeleton)\"></ng-container>\n        } @else {\n          <div class=\"flex flex-col gap-1\">\n            @for (line of skeletonLines; track $index) {\n              <mn-skeleton [data]=\"line\"></mn-skeleton>\n            }\n          </div>\n        }\n      </div>\n      @if (!$last && (dataSource.appearance?.dividers !== false)) {\n        <div class=\"border-b border-base-300\"></div>\n      }\n    }\n  } @else if (isErrorState) {\n    <!-- Error state -->\n    <div class=\"text-center text-xs py-8\" role=\"listitem\">\n      @if (dataSource.errorTemplate) {\n        <ng-container [ngTemplateOutlet]=\"dataSource.errorTemplate\"></ng-container>\n      } @else {\n        <div class=\"flex flex-col items-center gap-2 text-error\">\n          <p class=\"text-sm\">{{ dataSource.errorMessage }}</p>\n        </div>\n      }\n    </div>\n  } @else {\n    <!-- Empty state -->\n    @if (filteredItems.length === 0) {\n      <div class=\"text-center text-xs py-8\" role=\"listitem\">\n        @if (dataSource.emptyTemplate) {\n          <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n        } @else {\n          <div class=\"flex flex-col items-center gap-2 text-base-content/50\">\n            @if (dataSource.emptyIcon !== null) {\n              <svg [lucideIcon]=\"dataSource.emptyIcon ?? defaultEmptyIcon\" [size]=\"32\" [strokeWidth]=\"1.5\"></svg>\n            }\n            <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Select all (multi-select) -->\n    @if (isMultiSelect && filteredItems.length > 0) {\n      <div class=\"flex items-center gap-2 px-4 py-2 bg-base-200 text-sm\">\n        <mn-lib-checkbox\n          (checkedChange)=\"toggleAll()\"\n          [checked]=\"allSelected\"\n          [props]=\"{ id: 'mn-list-select-all', label: 'Select all', size: 'sm' }\"\n        ></mn-lib-checkbox>\n      </div>\n      @if (dataSource.appearance?.dividers !== false) {\n        <div class=\"border-b border-base-300\"></div>\n      }\n    }\n\n    <!-- Data items -->\n    @for (item of paginatedItems; track trackByID($index, item); let odd = $odd; let last = $last) {\n      <div\n        class=\"flex items-center gap-2 bg-base-100 transition-colors duration-150\"\n        [ngClass]=\"{'bg-primary/10': isSelected(item)}\"\n        [class.bg-base-200]=\"!isSelected(item) && odd && dataSource.appearance?.dividers !== false\"\n        [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n        [class.cursor-pointer]=\"!!dataSource.onItemClick\"\n        [class.px-4]=\"true\"\n        [class.py-3]=\"!dataSource.appearance?.compact\"\n        [class.py-2]=\"dataSource.appearance?.compact\"\n        role=\"listitem\"\n        (keyup.enter)=\"onItemClick(item)\"\n        (click)=\"onItemClick(item)\"\n        [attr.tabindex]=\"dataSource.onItemClick ? 0 : null\"\n      >\n        <!-- Selection checkbox -->\n        @if (hasSelection) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <div (click)=\"$event.stopPropagation()\" class=\"shrink-0\">\n            <mn-lib-checkbox\n              (checkedChange)=\"toggle(item)\"\n              [checked]=\"isSelected(item)\"\n              [props]=\"{ id: 'mn-list-item-' + $index, size: 'sm' }\"\n            ></mn-lib-checkbox>\n          </div>\n        }\n\n        <!-- Item content via template -->\n        <div class=\"flex-1 min-w-0\">\n          <ng-container\n            [ngTemplateOutlet]=\"dataSource.itemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, data: item }\"\n          ></ng-container>\n        </div>\n      </div>\n      @if (!last && (dataSource.appearance?.dividers !== false)) {\n        <div class=\"border-b border-base-300\"></div>\n      }\n    }\n  }\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-list\"\n></mn-collection-pagination>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MnCheckbox, selector: "mn-lib-checkbox", inputs: ["props", "checked"], outputs: ["checkedChange"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnSkeleton, selector: "mn-skeleton", inputs: ["data"] }, { kind: "component", type: MnCollectionPagination, selector: "mn-collection-pagination", inputs: ["idPrefix", "isPaginated", "isServerPaginated", "showLoadMore", "loadingMoreRows", "currentPage", "pageSize", "totalPages", "totalItemCount", "visiblePages", "pageSizeSelectOptions", "labels"], outputs: ["loadMore", "pageChange", "pageSizeChange"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnList, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-list', standalone: true, imports: [NgClass, NgTemplateOutlet, FormsModule, MnCheckbox, MnInputField, MnSkeleton, MnCollectionPagination, LucideDynamicIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Toolbar: left template, then search + right template. Below 375px each group\n     takes its own full-width row; from 375px up the left group sits at the start\n     and the search group at the end. Structure and classes mirror mn-table so all\n     collections behave identically at every width. -->\n@if (\n  dataSource.canSearch ||\n  dataSource.toolbarLeftTemplate ||\n  dataSource.toolbarRightTemplate ||\n  dataSource.toolbarTemplate\n) {\n  <div class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center justify-between gap-2 mb-3\">\n    <div class=\"flex items-center gap-2 w-full min-[375px]:w-auto\">\n      @if (dataSource.toolbarLeftTemplate) {\n        <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n          <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n        </div>\n      }\n    </div>\n    <div\n      class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center gap-2 w-full min-[375px]:flex-1 min-[480px]:flex-none min-[480px]:w-auto\">\n      @if (dataSource.canSearch) {\n        <mn-lib-input-field\n          (ngModelChange)=\"onSearch($event)\"\n          [ngModel]=\"searchValue\"\n          [props]=\"{\n            id: 'mn-list-search',\n            type: 'search',\n            label: '',\n            ariaLabel: dataSource.searchPlaceholder ?? 'Search...',\n            placeholder: dataSource.searchPlaceholder ?? 'Search...',\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n          class=\"w-full min-[375px]:flex-1 min-[480px]:max-w-64\"\n        ></mn-lib-input-field>\n      }\n      <!-- `toolbarTemplate` is the deprecated name for this slot; honouring it here\n           keeps existing callers rendering exactly where they used to. -->\n      @if (dataSource.toolbarRightTemplate ?? dataSource.toolbarTemplate; as rightTemplate) {\n        <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n          <ng-container [ngTemplateOutlet]=\"rightTemplate\"></ng-container>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n<!-- List wrapper -->\n<div\n  #collectionBody\n  [style.min-height.px]=\"bodyMinHeight\"\n  class=\"w-full\"\n  [class.border]=\"dataSource.appearance?.bordered\"\n  [class.border-base-300]=\"dataSource.appearance?.bordered\"\n  [class.rounded]=\"dataSource.appearance?.bordered\"\n  role=\"list\"\n  aria-label=\"Data list\"\n>\n  <!-- Loading state -->\n  @if (isLoadingState) {\n    @for (_ of skeletonRows; track $index) {\n      <div [class.py-2]=\"dataSource.appearance?.compact\" class=\"px-4 py-3\" role=\"listitem\">\n        @if (isTemplateRef(dataSource.skeleton)) {\n          <ng-container [ngTemplateOutlet]=\"$any(dataSource.skeleton)\"></ng-container>\n        } @else {\n          <div class=\"flex flex-col gap-1\">\n            @for (line of skeletonLines; track $index) {\n              <mn-skeleton [data]=\"line\"></mn-skeleton>\n            }\n          </div>\n        }\n      </div>\n      @if (!$last && (dataSource.appearance?.dividers !== false)) {\n        <div class=\"border-b border-base-300\"></div>\n      }\n    }\n  } @else if (isErrorState) {\n    <!-- Error state -->\n    <div class=\"text-center text-xs py-8\" role=\"listitem\">\n      @if (dataSource.errorTemplate) {\n        <ng-container [ngTemplateOutlet]=\"dataSource.errorTemplate\"></ng-container>\n      } @else {\n        <div class=\"flex flex-col items-center gap-2 text-error\">\n          <p class=\"text-sm\">{{ dataSource.errorMessage }}</p>\n        </div>\n      }\n    </div>\n  } @else {\n    <!-- Empty state -->\n    @if (filteredItems.length === 0) {\n      <div class=\"text-center text-xs py-8\" role=\"listitem\">\n        @if (dataSource.emptyTemplate) {\n          <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n        } @else {\n          <div class=\"flex flex-col items-center gap-2 text-base-content/50\">\n            @if (dataSource.emptyIcon !== null) {\n              <svg [lucideIcon]=\"dataSource.emptyIcon ?? defaultEmptyIcon\" [size]=\"32\" [strokeWidth]=\"1.5\"></svg>\n            }\n            <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Select all (multi-select) -->\n    @if (isMultiSelect && filteredItems.length > 0) {\n      <div class=\"flex items-center gap-2 px-4 py-2 bg-base-200 text-sm\">\n        <mn-lib-checkbox\n          (checkedChange)=\"toggleAll()\"\n          [checked]=\"allSelected\"\n          [props]=\"{ id: 'mn-list-select-all', label: 'Select all', size: 'sm' }\"\n        ></mn-lib-checkbox>\n      </div>\n      @if (dataSource.appearance?.dividers !== false) {\n        <div class=\"border-b border-base-300\"></div>\n      }\n    }\n\n    <!-- Data items -->\n    @for (item of paginatedItems; track trackByID($index, item); let odd = $odd; let last = $last) {\n      <div\n        class=\"flex items-center gap-2 bg-base-100 transition-colors duration-150\"\n        [ngClass]=\"{'bg-primary/10': isSelected(item)}\"\n        [class.bg-base-200]=\"!isSelected(item) && odd && dataSource.appearance?.dividers !== false\"\n        [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n        [class.cursor-pointer]=\"!!dataSource.onItemClick\"\n        [class.px-4]=\"true\"\n        [class.py-3]=\"!dataSource.appearance?.compact\"\n        [class.py-2]=\"dataSource.appearance?.compact\"\n        role=\"listitem\"\n        (keyup.enter)=\"onItemClick(item)\"\n        (click)=\"onItemClick(item)\"\n        [attr.tabindex]=\"dataSource.onItemClick ? 0 : null\"\n      >\n        <!-- Selection checkbox -->\n        @if (hasSelection) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <div (click)=\"$event.stopPropagation()\" class=\"shrink-0\">\n            <mn-lib-checkbox\n              (checkedChange)=\"toggle(item)\"\n              [checked]=\"isSelected(item)\"\n              [props]=\"{ id: 'mn-list-item-' + $index, size: 'sm' }\"\n            ></mn-lib-checkbox>\n          </div>\n        }\n\n        <!-- Item content via template -->\n        <div class=\"flex-1 min-w-0\">\n          <ng-container\n            [ngTemplateOutlet]=\"dataSource.itemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, data: item }\"\n          ></ng-container>\n        </div>\n      </div>\n      @if (!last && (dataSource.appearance?.dividers !== false)) {\n        <div class=\"border-b border-base-300\"></div>\n      }\n    }\n  }\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-list\"\n></mn-collection-pagination>\n" }]
+            args: [{ selector: 'mn-list', standalone: true, imports: [NgClass, NgTemplateOutlet, FormsModule, MnCheckbox, MnInputField, MnSkeleton, MnCollectionPagination, LucideDynamicIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Toolbar: left template, then search + right template. Below 375px each group\n     takes its own full-width row; from 375px up the left group sits at the start\n     and the search group at the end. Structure and classes mirror mn-table so all\n     collections behave identically at every width. -->\n@if (\n  dataSource.canSearch ||\n  dataSource.toolbarLeftTemplate ||\n  dataSource.toolbarRightTemplate ||\n  dataSource.toolbarTemplate\n) {\n  <div class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center justify-between gap-2 mb-3\">\n    <div class=\"flex items-center gap-2 w-full min-[375px]:w-auto\">\n      @if (dataSource.toolbarLeftTemplate) {\n        <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n          <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n        </div>\n      }\n    </div>\n    <div\n      class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center gap-2 w-full min-[375px]:flex-1 min-[480px]:flex-none min-[480px]:w-auto\">\n      @if (dataSource.canSearch) {\n        <!-- Enter must not submit a surrounding form: the search box is the\n             collection's own chrome, not a field of whatever form it sits in. -->\n        <mn-lib-input-field\n          (keydown.enter)=\"$event.preventDefault()\"\n          (ngModelChange)=\"onSearch($event)\"\n          [ngModel]=\"searchValue\"\n          [props]=\"{\n            id: 'mn-list-search',\n            type: 'search',\n            label: '',\n            ariaLabel: dataSource.searchPlaceholder ?? 'Search...',\n            placeholder: dataSource.searchPlaceholder ?? 'Search...',\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n          class=\"w-full min-[375px]:flex-1 min-[480px]:max-w-64\"\n        ></mn-lib-input-field>\n      }\n      <!-- `toolbarTemplate` is the deprecated name for this slot; honouring it here\n           keeps existing callers rendering exactly where they used to. -->\n      @if (dataSource.toolbarRightTemplate ?? dataSource.toolbarTemplate; as rightTemplate) {\n        <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n          <ng-container [ngTemplateOutlet]=\"rightTemplate\"></ng-container>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n<!-- List wrapper -->\n<div\n  #collectionBody\n  [style.min-height.px]=\"bodyMinHeight\"\n  class=\"w-full\"\n  [class.border]=\"dataSource.appearance?.bordered\"\n  [class.border-base-300]=\"dataSource.appearance?.bordered\"\n  [class.rounded]=\"dataSource.appearance?.bordered\"\n  role=\"list\"\n  [attr.aria-label]=\"listRegionLabel\"\n>\n  <!-- Loading state -->\n  @if (isLoadingState) {\n    @for (_ of skeletonRows; track $index) {\n      <div [class.py-2]=\"dataSource.appearance?.compact\" class=\"px-4 py-3\" role=\"listitem\">\n        @if (isTemplateRef(dataSource.skeleton)) {\n          <ng-container [ngTemplateOutlet]=\"$any(dataSource.skeleton)\"></ng-container>\n        } @else {\n          <div class=\"flex flex-col gap-1\">\n            @for (line of skeletonLines; track $index) {\n              <mn-skeleton [data]=\"line\"></mn-skeleton>\n            }\n          </div>\n        }\n      </div>\n      @if (!$last && (dataSource.appearance?.dividers !== false)) {\n        <div class=\"border-b border-base-300\"></div>\n      }\n    }\n  } @else if (isErrorState) {\n    <!-- Error state -->\n    <div class=\"text-center text-xs py-8\" role=\"listitem\">\n      @if (dataSource.errorTemplate) {\n        <ng-container [ngTemplateOutlet]=\"dataSource.errorTemplate\"></ng-container>\n      } @else {\n        <div class=\"flex flex-col items-center gap-2 text-error\">\n          <p class=\"text-sm\">{{ dataSource.errorMessage }}</p>\n        </div>\n      }\n    </div>\n  } @else {\n    <!-- Empty state -->\n    @if (filteredItems.length === 0) {\n      <div class=\"text-center text-xs py-8\" role=\"listitem\">\n        @if (dataSource.emptyTemplate) {\n          <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n        } @else {\n          <div class=\"flex flex-col items-center gap-2 text-base-content/50\">\n            @if (dataSource.emptyIcon !== null) {\n              <svg [lucideIcon]=\"dataSource.emptyIcon ?? defaultEmptyIcon\" [size]=\"32\" [strokeWidth]=\"1.5\"></svg>\n            }\n            <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Select all (multi-select) -->\n    @if (isMultiSelect && filteredItems.length > 0) {\n      <div class=\"flex items-center gap-2 px-4 py-2 bg-base-200 text-sm\">\n        <mn-lib-checkbox\n          (checkedChange)=\"toggleAll()\"\n          [checked]=\"allSelected\"\n          [props]=\"{ id: 'mn-list-select-all', label: 'Select all', size: 'sm' }\"\n        ></mn-lib-checkbox>\n      </div>\n      @if (dataSource.appearance?.dividers !== false) {\n        <div class=\"border-b border-base-300\"></div>\n      }\n    }\n\n    <!-- Data items -->\n    @for (item of paginatedItems; track trackByID($index, item); let odd = $odd; let last = $last) {\n      <div\n        class=\"flex items-center gap-2 bg-base-100 transition-colors duration-150\"\n        [ngClass]=\"{'bg-primary/10': isSelected(item)}\"\n        [class.bg-base-200]=\"!isSelected(item) && odd && dataSource.appearance?.dividers !== false\"\n        [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n        [class.cursor-pointer]=\"!!dataSource.onItemClick\"\n        [class.px-4]=\"true\"\n        [class.py-3]=\"!dataSource.appearance?.compact\"\n        [class.py-2]=\"dataSource.appearance?.compact\"\n        role=\"listitem\"\n        (keyup.enter)=\"onItemClick(item)\"\n        (click)=\"onItemClick(item)\"\n        [attr.tabindex]=\"dataSource.onItemClick ? 0 : null\"\n      >\n        <!-- Selection checkbox -->\n        @if (hasSelection) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <div (click)=\"$event.stopPropagation()\" class=\"shrink-0\">\n            <mn-lib-checkbox\n              (checkedChange)=\"toggle(item)\"\n              [checked]=\"isSelected(item)\"\n              [props]=\"{ id: 'mn-list-item-' + $index, size: 'sm' }\"\n            ></mn-lib-checkbox>\n          </div>\n        }\n\n        <!-- Item content via template -->\n        <div class=\"flex-1 min-w-0\">\n          <ng-container\n            [ngTemplateOutlet]=\"dataSource.itemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, data: item }\"\n          ></ng-container>\n        </div>\n      </div>\n      @if (!last && (dataSource.appearance?.dividers !== false)) {\n        <div class=\"border-b border-base-300\"></div>\n      }\n    }\n  }\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-list\"\n></mn-collection-pagination>\n" }]
         }], propDecorators: { itemClick: [{
                 type: Output
             }], collectionBody: [{
@@ -8976,12 +9111,20 @@ class MnGrid extends MnCollectionBase {
             this.loadMoreRows();
         }
     }
+    /** Accessible name for the scrollable grid region. */
+    get gridRegionLabel() {
+        return this.resolveLabel(undefined, 'mnCollection.cardGrid', 'Card grid');
+    }
+    /** Accessible name for the loading placeholder. */
+    get loadingLabel() {
+        return this.resolveLabel(undefined, 'mnCollection.loading', 'Loading');
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnGrid, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnGrid, isStandalone: true, selector: "mn-grid", outputs: { itemClick: "itemClick" }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "collectionBody", first: true, predicate: ["collectionBody"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Toolbar: left template, then search + right template. Below 375px each group\n     takes its own full-width row; from 375px up the left group sits at the start\n     and the search group at the end. Structure and classes mirror mn-table so all\n     collections behave identically at every width. -->\n@if (\n  dataSource.canSearch ||\n  dataSource.toolbarLeftTemplate ||\n  dataSource.toolbarRightTemplate ||\n  dataSource.toolbarTemplate\n) {\n  <div class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center justify-between gap-2 mb-3\">\n    <div class=\"flex items-center gap-2 w-full min-[375px]:w-auto\">\n      @if (dataSource.toolbarLeftTemplate) {\n        <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n          <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n        </div>\n      }\n    </div>\n    <div\n      class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center gap-2 w-full min-[375px]:flex-1 min-[480px]:flex-none min-[480px]:w-auto\">\n      @if (dataSource.canSearch) {\n        <mn-lib-input-field\n          (ngModelChange)=\"onSearch($event)\"\n          [ngModel]=\"searchValue\"\n          [props]=\"{\n            id: 'mn-grid-search',\n            type: 'search',\n            label: '',\n            ariaLabel: dataSource.searchPlaceholder ?? 'Search...',\n            placeholder: dataSource.searchPlaceholder ?? 'Search...',\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n          class=\"w-full min-[375px]:flex-1 min-[480px]:max-w-64\"\n        ></mn-lib-input-field>\n      }\n      <!-- `toolbarTemplate` is the deprecated name for this slot; honouring it here\n           keeps existing callers rendering exactly where they used to. -->\n      @if (dataSource.toolbarRightTemplate ?? dataSource.toolbarTemplate; as rightTemplate) {\n        <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n          <ng-container [ngTemplateOutlet]=\"rightTemplate\"></ng-container>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n<!-- Body: skeleton/data swap region. Wrapper holds its height during a server reload. -->\n<div #collectionBody [style.min-height.px]=\"bodyMinHeight\">\n<!-- Loading state -->\n  @if (isLoadingState) {\n  <div\n    [class]=\"gridClasses\"\n    [style.gap]=\"gridGap\"\n    [style.grid-template-columns]=\"autoTemplateColumns\"\n    aria-busy=\"true\"\n    aria-label=\"Loading\"\n    role=\"list\"\n  >\n    @for (_ of skeletonRows; track $index) {\n      <div role=\"listitem\">\n        @if (isTemplateRef(dataSource.skeleton)) {\n          <ng-container [ngTemplateOutlet]=\"$any(dataSource.skeleton)\"></ng-container>\n        } @else {\n          <div class=\"flex flex-col gap-2 p-4 border border-base-300 rounded-lg\">\n            @for (line of skeletonLines; track $index) {\n              <mn-skeleton [data]=\"line\"></mn-skeleton>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n  } @else if (isErrorState) {\n    <!-- Error state -->\n    @if (dataSource.errorTemplate) {\n      <ng-container [ngTemplateOutlet]=\"dataSource.errorTemplate\"></ng-container>\n    } @else {\n      <div\n        class=\"flex items-center justify-center min-h-[6rem] py-8 rounded-xl border border-dashed border-error/30 bg-base-100\">\n        <p class=\"text-sm text-error\">{{ dataSource.errorMessage }}</p>\n      </div>\n    }\n} @else {\n  <!-- Empty state: a caller-provided template/component (rendered unwrapped, full\n       control over its own layout) or, when none is given, the default text. -->\n  @if (filteredItems.length === 0) {\n    @if (dataSource.emptyTemplate) {\n      <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n    } @else {\n      <div\n        class=\"flex flex-col items-center justify-center gap-2 min-h-[6rem] py-8 rounded-xl border border-dashed border-base-content/15 bg-base-100 text-base-content/40\">\n        @if (dataSource.emptyIcon !== null) {\n          <svg [lucideIcon]=\"dataSource.emptyIcon ?? defaultEmptyIcon\" [size]=\"32\" [strokeWidth]=\"1.5\"></svg>\n        }\n        <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n      </div>\n    }\n  } @else {\n    <!-- Card grid -->\n    <div\n    [class]=\"gridClasses\"\n    [style.gap]=\"gridGap\"\n    [style.grid-template-columns]=\"autoTemplateColumns\"\n      aria-label=\"Card grid\"\n      role=\"list\"\n    >\n      @for (item of paginatedItems; track trackByID($index, item)) {\n        <div\n          (click)=\"onItemClick(item)\"\n          (keyup.enter)=\"onItemClick(item)\"\n          [attr.tabindex]=\"dataSource.onItemClick ? 0 : null\"\n          [class.cursor-pointer]=\"!!dataSource.onItemClick\"\n          class=\"transition-colors duration-150\"\n          role=\"listitem\"\n        >\n          <ng-container\n            [ngTemplateOutletContext]=\"{ $implicit: item, data: item }\"\n            [ngTemplateOutlet]=\"dataSource.cardTemplate\"\n          ></ng-container>\n        </div>\n      }\n    </div>\n  }\n}\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-grid\"\n></mn-collection-pagination>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MnSkeleton, selector: "mn-skeleton", inputs: ["data"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnCollectionPagination, selector: "mn-collection-pagination", inputs: ["idPrefix", "isPaginated", "isServerPaginated", "showLoadMore", "loadingMoreRows", "currentPage", "pageSize", "totalPages", "totalItemCount", "visiblePages", "pageSizeSelectOptions", "labels"], outputs: ["loadMore", "pageChange", "pageSizeChange"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnGrid, isStandalone: true, selector: "mn-grid", outputs: { itemClick: "itemClick" }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "collectionBody", first: true, predicate: ["collectionBody"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Toolbar: left template, then search + right template. Below 375px each group\n     takes its own full-width row; from 375px up the left group sits at the start\n     and the search group at the end. Structure and classes mirror mn-table so all\n     collections behave identically at every width. -->\n@if (\n  dataSource.canSearch ||\n  dataSource.toolbarLeftTemplate ||\n  dataSource.toolbarRightTemplate ||\n  dataSource.toolbarTemplate\n) {\n  <div class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center justify-between gap-2 mb-3\">\n    <div class=\"flex items-center gap-2 w-full min-[375px]:w-auto\">\n      @if (dataSource.toolbarLeftTemplate) {\n        <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n          <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n        </div>\n      }\n    </div>\n    <div\n      class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center gap-2 w-full min-[375px]:flex-1 min-[480px]:flex-none min-[480px]:w-auto\">\n      @if (dataSource.canSearch) {\n        <!-- Enter must not submit a surrounding form: the search box is the\n             collection's own chrome, not a field of whatever form it sits in. -->\n        <mn-lib-input-field\n          (keydown.enter)=\"$event.preventDefault()\"\n          (ngModelChange)=\"onSearch($event)\"\n          [ngModel]=\"searchValue\"\n          [props]=\"{\n            id: 'mn-grid-search',\n            type: 'search',\n            label: '',\n            ariaLabel: dataSource.searchPlaceholder ?? 'Search...',\n            placeholder: dataSource.searchPlaceholder ?? 'Search...',\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n          class=\"w-full min-[375px]:flex-1 min-[480px]:max-w-64\"\n        ></mn-lib-input-field>\n      }\n      <!-- `toolbarTemplate` is the deprecated name for this slot; honouring it here\n           keeps existing callers rendering exactly where they used to. -->\n      @if (dataSource.toolbarRightTemplate ?? dataSource.toolbarTemplate; as rightTemplate) {\n        <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n          <ng-container [ngTemplateOutlet]=\"rightTemplate\"></ng-container>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n<!-- Body: skeleton/data swap region. Wrapper holds its height during a server reload. -->\n<div #collectionBody [style.min-height.px]=\"bodyMinHeight\">\n<!-- Loading state -->\n  @if (isLoadingState) {\n  <div\n    [class]=\"gridClasses\"\n    [style.gap]=\"gridGap\"\n    [style.grid-template-columns]=\"autoTemplateColumns\"\n    aria-busy=\"true\"\n    [attr.aria-label]=\"loadingLabel\"\n    role=\"list\"\n  >\n    @for (_ of skeletonRows; track $index) {\n      <div role=\"listitem\">\n        @if (isTemplateRef(dataSource.skeleton)) {\n          <ng-container [ngTemplateOutlet]=\"$any(dataSource.skeleton)\"></ng-container>\n        } @else {\n          <div class=\"flex flex-col gap-2 p-4 border border-base-300 rounded-lg\">\n            @for (line of skeletonLines; track $index) {\n              <mn-skeleton [data]=\"line\"></mn-skeleton>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n  } @else if (isErrorState) {\n    <!-- Error state -->\n    @if (dataSource.errorTemplate) {\n      <ng-container [ngTemplateOutlet]=\"dataSource.errorTemplate\"></ng-container>\n    } @else {\n      <div\n        class=\"flex items-center justify-center min-h-[6rem] py-8 rounded-xl border border-dashed border-error/30 bg-base-100\">\n        <p class=\"text-sm text-error\">{{ dataSource.errorMessage }}</p>\n      </div>\n    }\n} @else {\n  <!-- Empty state: a caller-provided template/component (rendered unwrapped, full\n       control over its own layout) or, when none is given, the default text. -->\n  @if (filteredItems.length === 0) {\n    @if (dataSource.emptyTemplate) {\n      <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n    } @else {\n      <div\n        class=\"flex flex-col items-center justify-center gap-2 min-h-[6rem] py-8 rounded-xl border border-dashed border-base-content/15 bg-base-100 text-base-content/40\">\n        @if (dataSource.emptyIcon !== null) {\n          <svg [lucideIcon]=\"dataSource.emptyIcon ?? defaultEmptyIcon\" [size]=\"32\" [strokeWidth]=\"1.5\"></svg>\n        }\n        <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n      </div>\n    }\n  } @else {\n    <!-- Card grid -->\n    <div\n    [class]=\"gridClasses\"\n    [style.gap]=\"gridGap\"\n    [style.grid-template-columns]=\"autoTemplateColumns\"\n    [attr.aria-label]=\"gridRegionLabel\"\n      role=\"list\"\n    >\n      @for (item of paginatedItems; track trackByID($index, item)) {\n        <div\n          (click)=\"onItemClick(item)\"\n          (keyup.enter)=\"onItemClick(item)\"\n          [attr.tabindex]=\"dataSource.onItemClick ? 0 : null\"\n          [class.cursor-pointer]=\"!!dataSource.onItemClick\"\n          class=\"transition-colors duration-150\"\n          role=\"listitem\"\n        >\n          <ng-container\n            [ngTemplateOutletContext]=\"{ $implicit: item, data: item }\"\n            [ngTemplateOutlet]=\"dataSource.cardTemplate\"\n          ></ng-container>\n        </div>\n      }\n    </div>\n  }\n}\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-grid\"\n></mn-collection-pagination>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MnSkeleton, selector: "mn-skeleton", inputs: ["data"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnCollectionPagination, selector: "mn-collection-pagination", inputs: ["idPrefix", "isPaginated", "isServerPaginated", "showLoadMore", "loadingMoreRows", "currentPage", "pageSize", "totalPages", "totalItemCount", "visiblePages", "pageSizeSelectOptions", "labels"], outputs: ["loadMore", "pageChange", "pageSizeChange"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnGrid, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-grid', standalone: true, imports: [NgTemplateOutlet, FormsModule, MnSkeleton, MnInputField, MnCollectionPagination, LucideDynamicIcon], host: { class: 'block' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Toolbar: left template, then search + right template. Below 375px each group\n     takes its own full-width row; from 375px up the left group sits at the start\n     and the search group at the end. Structure and classes mirror mn-table so all\n     collections behave identically at every width. -->\n@if (\n  dataSource.canSearch ||\n  dataSource.toolbarLeftTemplate ||\n  dataSource.toolbarRightTemplate ||\n  dataSource.toolbarTemplate\n) {\n  <div class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center justify-between gap-2 mb-3\">\n    <div class=\"flex items-center gap-2 w-full min-[375px]:w-auto\">\n      @if (dataSource.toolbarLeftTemplate) {\n        <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n          <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n        </div>\n      }\n    </div>\n    <div\n      class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center gap-2 w-full min-[375px]:flex-1 min-[480px]:flex-none min-[480px]:w-auto\">\n      @if (dataSource.canSearch) {\n        <mn-lib-input-field\n          (ngModelChange)=\"onSearch($event)\"\n          [ngModel]=\"searchValue\"\n          [props]=\"{\n            id: 'mn-grid-search',\n            type: 'search',\n            label: '',\n            ariaLabel: dataSource.searchPlaceholder ?? 'Search...',\n            placeholder: dataSource.searchPlaceholder ?? 'Search...',\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n          class=\"w-full min-[375px]:flex-1 min-[480px]:max-w-64\"\n        ></mn-lib-input-field>\n      }\n      <!-- `toolbarTemplate` is the deprecated name for this slot; honouring it here\n           keeps existing callers rendering exactly where they used to. -->\n      @if (dataSource.toolbarRightTemplate ?? dataSource.toolbarTemplate; as rightTemplate) {\n        <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n          <ng-container [ngTemplateOutlet]=\"rightTemplate\"></ng-container>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n<!-- Body: skeleton/data swap region. Wrapper holds its height during a server reload. -->\n<div #collectionBody [style.min-height.px]=\"bodyMinHeight\">\n<!-- Loading state -->\n  @if (isLoadingState) {\n  <div\n    [class]=\"gridClasses\"\n    [style.gap]=\"gridGap\"\n    [style.grid-template-columns]=\"autoTemplateColumns\"\n    aria-busy=\"true\"\n    aria-label=\"Loading\"\n    role=\"list\"\n  >\n    @for (_ of skeletonRows; track $index) {\n      <div role=\"listitem\">\n        @if (isTemplateRef(dataSource.skeleton)) {\n          <ng-container [ngTemplateOutlet]=\"$any(dataSource.skeleton)\"></ng-container>\n        } @else {\n          <div class=\"flex flex-col gap-2 p-4 border border-base-300 rounded-lg\">\n            @for (line of skeletonLines; track $index) {\n              <mn-skeleton [data]=\"line\"></mn-skeleton>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n  } @else if (isErrorState) {\n    <!-- Error state -->\n    @if (dataSource.errorTemplate) {\n      <ng-container [ngTemplateOutlet]=\"dataSource.errorTemplate\"></ng-container>\n    } @else {\n      <div\n        class=\"flex items-center justify-center min-h-[6rem] py-8 rounded-xl border border-dashed border-error/30 bg-base-100\">\n        <p class=\"text-sm text-error\">{{ dataSource.errorMessage }}</p>\n      </div>\n    }\n} @else {\n  <!-- Empty state: a caller-provided template/component (rendered unwrapped, full\n       control over its own layout) or, when none is given, the default text. -->\n  @if (filteredItems.length === 0) {\n    @if (dataSource.emptyTemplate) {\n      <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n    } @else {\n      <div\n        class=\"flex flex-col items-center justify-center gap-2 min-h-[6rem] py-8 rounded-xl border border-dashed border-base-content/15 bg-base-100 text-base-content/40\">\n        @if (dataSource.emptyIcon !== null) {\n          <svg [lucideIcon]=\"dataSource.emptyIcon ?? defaultEmptyIcon\" [size]=\"32\" [strokeWidth]=\"1.5\"></svg>\n        }\n        <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n      </div>\n    }\n  } @else {\n    <!-- Card grid -->\n    <div\n    [class]=\"gridClasses\"\n    [style.gap]=\"gridGap\"\n    [style.grid-template-columns]=\"autoTemplateColumns\"\n      aria-label=\"Card grid\"\n      role=\"list\"\n    >\n      @for (item of paginatedItems; track trackByID($index, item)) {\n        <div\n          (click)=\"onItemClick(item)\"\n          (keyup.enter)=\"onItemClick(item)\"\n          [attr.tabindex]=\"dataSource.onItemClick ? 0 : null\"\n          [class.cursor-pointer]=\"!!dataSource.onItemClick\"\n          class=\"transition-colors duration-150\"\n          role=\"listitem\"\n        >\n          <ng-container\n            [ngTemplateOutletContext]=\"{ $implicit: item, data: item }\"\n            [ngTemplateOutlet]=\"dataSource.cardTemplate\"\n          ></ng-container>\n        </div>\n      }\n    </div>\n  }\n}\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-grid\"\n></mn-collection-pagination>\n" }]
+            args: [{ selector: 'mn-grid', standalone: true, imports: [NgTemplateOutlet, FormsModule, MnSkeleton, MnInputField, MnCollectionPagination, LucideDynamicIcon], host: { class: 'block' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Toolbar: left template, then search + right template. Below 375px each group\n     takes its own full-width row; from 375px up the left group sits at the start\n     and the search group at the end. Structure and classes mirror mn-table so all\n     collections behave identically at every width. -->\n@if (\n  dataSource.canSearch ||\n  dataSource.toolbarLeftTemplate ||\n  dataSource.toolbarRightTemplate ||\n  dataSource.toolbarTemplate\n) {\n  <div class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center justify-between gap-2 mb-3\">\n    <div class=\"flex items-center gap-2 w-full min-[375px]:w-auto\">\n      @if (dataSource.toolbarLeftTemplate) {\n        <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n          <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n        </div>\n      }\n    </div>\n    <div\n      class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center gap-2 w-full min-[375px]:flex-1 min-[480px]:flex-none min-[480px]:w-auto\">\n      @if (dataSource.canSearch) {\n        <!-- Enter must not submit a surrounding form: the search box is the\n             collection's own chrome, not a field of whatever form it sits in. -->\n        <mn-lib-input-field\n          (keydown.enter)=\"$event.preventDefault()\"\n          (ngModelChange)=\"onSearch($event)\"\n          [ngModel]=\"searchValue\"\n          [props]=\"{\n            id: 'mn-grid-search',\n            type: 'search',\n            label: '',\n            ariaLabel: dataSource.searchPlaceholder ?? 'Search...',\n            placeholder: dataSource.searchPlaceholder ?? 'Search...',\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n          class=\"w-full min-[375px]:flex-1 min-[480px]:max-w-64\"\n        ></mn-lib-input-field>\n      }\n      <!-- `toolbarTemplate` is the deprecated name for this slot; honouring it here\n           keeps existing callers rendering exactly where they used to. -->\n      @if (dataSource.toolbarRightTemplate ?? dataSource.toolbarTemplate; as rightTemplate) {\n        <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n          <ng-container [ngTemplateOutlet]=\"rightTemplate\"></ng-container>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n<!-- Body: skeleton/data swap region. Wrapper holds its height during a server reload. -->\n<div #collectionBody [style.min-height.px]=\"bodyMinHeight\">\n<!-- Loading state -->\n  @if (isLoadingState) {\n  <div\n    [class]=\"gridClasses\"\n    [style.gap]=\"gridGap\"\n    [style.grid-template-columns]=\"autoTemplateColumns\"\n    aria-busy=\"true\"\n    [attr.aria-label]=\"loadingLabel\"\n    role=\"list\"\n  >\n    @for (_ of skeletonRows; track $index) {\n      <div role=\"listitem\">\n        @if (isTemplateRef(dataSource.skeleton)) {\n          <ng-container [ngTemplateOutlet]=\"$any(dataSource.skeleton)\"></ng-container>\n        } @else {\n          <div class=\"flex flex-col gap-2 p-4 border border-base-300 rounded-lg\">\n            @for (line of skeletonLines; track $index) {\n              <mn-skeleton [data]=\"line\"></mn-skeleton>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n  } @else if (isErrorState) {\n    <!-- Error state -->\n    @if (dataSource.errorTemplate) {\n      <ng-container [ngTemplateOutlet]=\"dataSource.errorTemplate\"></ng-container>\n    } @else {\n      <div\n        class=\"flex items-center justify-center min-h-[6rem] py-8 rounded-xl border border-dashed border-error/30 bg-base-100\">\n        <p class=\"text-sm text-error\">{{ dataSource.errorMessage }}</p>\n      </div>\n    }\n} @else {\n  <!-- Empty state: a caller-provided template/component (rendered unwrapped, full\n       control over its own layout) or, when none is given, the default text. -->\n  @if (filteredItems.length === 0) {\n    @if (dataSource.emptyTemplate) {\n      <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n    } @else {\n      <div\n        class=\"flex flex-col items-center justify-center gap-2 min-h-[6rem] py-8 rounded-xl border border-dashed border-base-content/15 bg-base-100 text-base-content/40\">\n        @if (dataSource.emptyIcon !== null) {\n          <svg [lucideIcon]=\"dataSource.emptyIcon ?? defaultEmptyIcon\" [size]=\"32\" [strokeWidth]=\"1.5\"></svg>\n        }\n        <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n      </div>\n    }\n  } @else {\n    <!-- Card grid -->\n    <div\n    [class]=\"gridClasses\"\n    [style.gap]=\"gridGap\"\n    [style.grid-template-columns]=\"autoTemplateColumns\"\n    [attr.aria-label]=\"gridRegionLabel\"\n      role=\"list\"\n    >\n      @for (item of paginatedItems; track trackByID($index, item)) {\n        <div\n          (click)=\"onItemClick(item)\"\n          (keyup.enter)=\"onItemClick(item)\"\n          [attr.tabindex]=\"dataSource.onItemClick ? 0 : null\"\n          [class.cursor-pointer]=\"!!dataSource.onItemClick\"\n          class=\"transition-colors duration-150\"\n          role=\"listitem\"\n        >\n          <ng-container\n            [ngTemplateOutletContext]=\"{ $implicit: item, data: item }\"\n            [ngTemplateOutlet]=\"dataSource.cardTemplate\"\n          ></ng-container>\n        </div>\n      }\n    </div>\n  }\n}\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-grid\"\n></mn-collection-pagination>\n" }]
         }], propDecorators: { itemClick: [{
                 type: Output
             }], collectionBody: [{
@@ -9182,6 +9325,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * events on that day. Clicking a cell emits `dayClicked`.
  */
 class CalendarMonthComponent {
+    lang = inject(MnLanguageService);
+    /**
+     * Accessible name for this control. Resolved through the conventional
+     * `mnCalendar.monthView` key so an app can translate it, falling back to English when the
+     * key is not defined rather than leaking the raw key into the UI.
+     */
+    get monthViewLabel() {
+        return this.lang.translateIfPresent('mnCalendar.monthView') ?? 'Month view';
+    }
     /** The date whose month is displayed. */
     focusDay;
     /** Observable that emits the full event list whenever it changes. */
@@ -9283,11 +9435,11 @@ class CalendarMonthComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarMonthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarMonthComponent, isStandalone: true, selector: "mn-calendar-month", inputs: { focusDay: "focusDay", eventsChanged: "eventsChanged", focusDayChanged: "focusDayChanged", config: "config" }, outputs: { dayClicked: "dayClicked" }, ngImport: i0, template: "<!-- Month grid. Cells are grouped by space rather than boxed by borders, in\n     keeping with the date-selector-bar: no rules, soft rounded cells, a hover\n     wash, and today marked by a tinted number alone (no circle). -->\n<!-- Rows are a compact fixed height rather than stretched to fill the container:\n     a month with few events shouldn't leave each cell mostly empty. The panel\n     scrolls if the grid is taller than the space it's given. -->\n<div class=\"w-full flex flex-col\" role=\"grid\" aria-label=\"Month view\">\n  <div class=\"grid grid-cols-7 pb-2\">\n    @for (day of weekdayLabels; track day) {\n      <div class=\"pl-2 text-left text-[11px] font-semibold uppercase tracking-wide opacity-45\" role=\"columnheader\">{{ day }}</div>\n    }\n  </div>\n  <div class=\"grid grid-cols-7 gap-1 auto-rows-[minmax(92px,auto)]\">\n    @for (item of monthItems; track item.date.getTime()) {\n      <div\n        class=\"flex flex-col gap-1 min-h-0 overflow-hidden rounded-xl p-1.5 cursor-pointer transition-colors hover:bg-base-200 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-primary motion-reduce:transition-none\"\n        [class.opacity-40]=\"!item.isCurrentMonth\"\n        (keyup.enter)=\"onDayClick(item.date)\"\n        (click)=\"onDayClick(item.date)\"\n        tabindex=\"0\"\n        role=\"gridcell\"\n        [attr.aria-label]=\"item.date.toDateString()\">\n        <span class=\"text-[13px] font-bold leading-none tabular-nums\" [class.text-primary]=\"item.isToday\">{{ item.dayNumber }}</span>\n        <div class=\"flex flex-col gap-0.5 min-h-0\">\n          @for (event of item.events.slice(0, 3); track $index) {\n            <div\n              class=\"flex items-center overflow-hidden rounded-md border-l-[3px] px-1.5 py-0.5 text-[11px] leading-tight\"\n              [style.background-color]=\"event.color.secondaryColor\"\n              [style.border-left-color]=\"event.color.primaryColor\"\n              [style.color]=\"event.color.primaryColor\"\n              [title]=\"event.title\">\n              <span class=\"truncate font-semibold\">{{ event.title }}</span>\n            </div>\n          }\n          <!-- Overflow indicator. Styled as a pill that lights up on hover so it\n               reads as actionable; the whole cell already navigates to the Day\n               view for this date on click / Enter, where every event is listed. -->\n          @if (item.events.length > 3) {\n            <span class=\"mt-0.5 inline-flex w-fit items-center rounded-md px-1.5 py-0.5 text-[10.5px] font-semibold opacity-60 transition-colors hover:bg-base-300 hover:opacity-100 motion-reduce:transition-none\">\n              +{{ item.events.length - 3 }} {{ moreEventsLabel }}\n            </span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarMonthComponent, isStandalone: true, selector: "mn-calendar-month", inputs: { focusDay: "focusDay", eventsChanged: "eventsChanged", focusDayChanged: "focusDayChanged", config: "config" }, outputs: { dayClicked: "dayClicked" }, ngImport: i0, template: "<!-- Month grid. Cells are grouped by space rather than boxed by borders, in\n     keeping with the date-selector-bar: no rules, soft rounded cells, a hover\n     wash, and today marked by a tinted number alone (no circle). -->\n<!-- Rows are a compact fixed height rather than stretched to fill the container:\n     a month with few events shouldn't leave each cell mostly empty. The panel\n     scrolls if the grid is taller than the space it's given. -->\n<div [attr.aria-label]=\"monthViewLabel\" class=\"w-full flex flex-col\" role=\"grid\">\n  <div class=\"grid grid-cols-7 pb-2\">\n    @for (day of weekdayLabels; track day) {\n      <div class=\"pl-2 text-left text-[11px] font-semibold uppercase tracking-wide opacity-45\" role=\"columnheader\">{{ day }}</div>\n    }\n  </div>\n  <div class=\"grid grid-cols-7 gap-1 auto-rows-[minmax(92px,auto)]\">\n    @for (item of monthItems; track item.date.getTime()) {\n      <div\n        class=\"flex flex-col gap-1 min-h-0 overflow-hidden rounded-xl p-1.5 cursor-pointer transition-colors hover:bg-base-200 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-primary motion-reduce:transition-none\"\n        [class.opacity-40]=\"!item.isCurrentMonth\"\n        (keyup.enter)=\"onDayClick(item.date)\"\n        (click)=\"onDayClick(item.date)\"\n        tabindex=\"0\"\n        role=\"gridcell\"\n        [attr.aria-label]=\"item.date.toDateString()\">\n        <span class=\"text-[13px] font-bold leading-none tabular-nums\" [class.text-primary]=\"item.isToday\">{{ item.dayNumber }}</span>\n        <div class=\"flex flex-col gap-0.5 min-h-0\">\n          @for (event of item.events.slice(0, 3); track $index) {\n            <div\n              class=\"flex items-center overflow-hidden rounded-md border-l-[3px] px-1.5 py-0.5 text-[11px] leading-tight\"\n              [style.background-color]=\"event.color.secondaryColor\"\n              [style.border-left-color]=\"event.color.primaryColor\"\n              [style.color]=\"event.color.primaryColor\"\n              [title]=\"event.title\">\n              <span class=\"truncate font-semibold\">{{ event.title }}</span>\n            </div>\n          }\n          <!-- Overflow indicator. Styled as a pill that lights up on hover so it\n               reads as actionable; the whole cell already navigates to the Day\n               view for this date on click / Enter, where every event is listed. -->\n          @if (item.events.length > 3) {\n            <span class=\"mt-0.5 inline-flex w-fit items-center rounded-md px-1.5 py-0.5 text-[10.5px] font-semibold opacity-60 transition-colors hover:bg-base-300 hover:opacity-100 motion-reduce:transition-none\">\n              +{{ item.events.length - 3 }} {{ moreEventsLabel }}\n            </span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarMonthComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-calendar-month', standalone: true, imports: [CommonModule], template: "<!-- Month grid. Cells are grouped by space rather than boxed by borders, in\n     keeping with the date-selector-bar: no rules, soft rounded cells, a hover\n     wash, and today marked by a tinted number alone (no circle). -->\n<!-- Rows are a compact fixed height rather than stretched to fill the container:\n     a month with few events shouldn't leave each cell mostly empty. The panel\n     scrolls if the grid is taller than the space it's given. -->\n<div class=\"w-full flex flex-col\" role=\"grid\" aria-label=\"Month view\">\n  <div class=\"grid grid-cols-7 pb-2\">\n    @for (day of weekdayLabels; track day) {\n      <div class=\"pl-2 text-left text-[11px] font-semibold uppercase tracking-wide opacity-45\" role=\"columnheader\">{{ day }}</div>\n    }\n  </div>\n  <div class=\"grid grid-cols-7 gap-1 auto-rows-[minmax(92px,auto)]\">\n    @for (item of monthItems; track item.date.getTime()) {\n      <div\n        class=\"flex flex-col gap-1 min-h-0 overflow-hidden rounded-xl p-1.5 cursor-pointer transition-colors hover:bg-base-200 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-primary motion-reduce:transition-none\"\n        [class.opacity-40]=\"!item.isCurrentMonth\"\n        (keyup.enter)=\"onDayClick(item.date)\"\n        (click)=\"onDayClick(item.date)\"\n        tabindex=\"0\"\n        role=\"gridcell\"\n        [attr.aria-label]=\"item.date.toDateString()\">\n        <span class=\"text-[13px] font-bold leading-none tabular-nums\" [class.text-primary]=\"item.isToday\">{{ item.dayNumber }}</span>\n        <div class=\"flex flex-col gap-0.5 min-h-0\">\n          @for (event of item.events.slice(0, 3); track $index) {\n            <div\n              class=\"flex items-center overflow-hidden rounded-md border-l-[3px] px-1.5 py-0.5 text-[11px] leading-tight\"\n              [style.background-color]=\"event.color.secondaryColor\"\n              [style.border-left-color]=\"event.color.primaryColor\"\n              [style.color]=\"event.color.primaryColor\"\n              [title]=\"event.title\">\n              <span class=\"truncate font-semibold\">{{ event.title }}</span>\n            </div>\n          }\n          <!-- Overflow indicator. Styled as a pill that lights up on hover so it\n               reads as actionable; the whole cell already navigates to the Day\n               view for this date on click / Enter, where every event is listed. -->\n          @if (item.events.length > 3) {\n            <span class=\"mt-0.5 inline-flex w-fit items-center rounded-md px-1.5 py-0.5 text-[10.5px] font-semibold opacity-60 transition-colors hover:bg-base-300 hover:opacity-100 motion-reduce:transition-none\">\n              +{{ item.events.length - 3 }} {{ moreEventsLabel }}\n            </span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'mn-calendar-month', standalone: true, imports: [CommonModule], template: "<!-- Month grid. Cells are grouped by space rather than boxed by borders, in\n     keeping with the date-selector-bar: no rules, soft rounded cells, a hover\n     wash, and today marked by a tinted number alone (no circle). -->\n<!-- Rows are a compact fixed height rather than stretched to fill the container:\n     a month with few events shouldn't leave each cell mostly empty. The panel\n     scrolls if the grid is taller than the space it's given. -->\n<div [attr.aria-label]=\"monthViewLabel\" class=\"w-full flex flex-col\" role=\"grid\">\n  <div class=\"grid grid-cols-7 pb-2\">\n    @for (day of weekdayLabels; track day) {\n      <div class=\"pl-2 text-left text-[11px] font-semibold uppercase tracking-wide opacity-45\" role=\"columnheader\">{{ day }}</div>\n    }\n  </div>\n  <div class=\"grid grid-cols-7 gap-1 auto-rows-[minmax(92px,auto)]\">\n    @for (item of monthItems; track item.date.getTime()) {\n      <div\n        class=\"flex flex-col gap-1 min-h-0 overflow-hidden rounded-xl p-1.5 cursor-pointer transition-colors hover:bg-base-200 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-primary motion-reduce:transition-none\"\n        [class.opacity-40]=\"!item.isCurrentMonth\"\n        (keyup.enter)=\"onDayClick(item.date)\"\n        (click)=\"onDayClick(item.date)\"\n        tabindex=\"0\"\n        role=\"gridcell\"\n        [attr.aria-label]=\"item.date.toDateString()\">\n        <span class=\"text-[13px] font-bold leading-none tabular-nums\" [class.text-primary]=\"item.isToday\">{{ item.dayNumber }}</span>\n        <div class=\"flex flex-col gap-0.5 min-h-0\">\n          @for (event of item.events.slice(0, 3); track $index) {\n            <div\n              class=\"flex items-center overflow-hidden rounded-md border-l-[3px] px-1.5 py-0.5 text-[11px] leading-tight\"\n              [style.background-color]=\"event.color.secondaryColor\"\n              [style.border-left-color]=\"event.color.primaryColor\"\n              [style.color]=\"event.color.primaryColor\"\n              [title]=\"event.title\">\n              <span class=\"truncate font-semibold\">{{ event.title }}</span>\n            </div>\n          }\n          <!-- Overflow indicator. Styled as a pill that lights up on hover so it\n               reads as actionable; the whole cell already navigates to the Day\n               view for this date on click / Enter, where every event is listed. -->\n          @if (item.events.length > 3) {\n            <span class=\"mt-0.5 inline-flex w-fit items-center rounded-md px-1.5 py-0.5 text-[10.5px] font-semibold opacity-60 transition-colors hover:bg-base-300 hover:opacity-100 motion-reduce:transition-none\">\n              +{{ item.events.length - 3 }} {{ moreEventsLabel }}\n            </span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { focusDay: [{
                 type: Input
             }], eventsChanged: [{
@@ -9577,6 +9729,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * so they appear side-by-side rather than stacked.
  */
 class CalendarWeekComponent {
+    lang = inject(MnLanguageService);
+    /**
+     * Accessible name for this control. Resolved through the conventional
+     * `mnCalendar.weekView` key so an app can translate it, falling back to English when the
+     * key is not defined rather than leaking the raw key into the UI.
+     */
+    get weekViewLabel() {
+        return this.lang.translateIfPresent('mnCalendar.weekView') ?? 'Week view';
+    }
     layoutService = inject(CalendarEventLayoutService);
     cdr = inject(ChangeDetectorRef);
     /** The date around which the week is centred. */
@@ -9780,11 +9941,11 @@ class CalendarWeekComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarWeekComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarWeekComponent, isStandalone: true, selector: "mn-calendar-week", inputs: { focusDay: "focusDay", eventsChanged: "eventsChanged", focusDayChanged: "focusDayChanged", config: "config", calendarEventComponent: "calendarEventComponent" }, outputs: { eventClicked: "eventClicked" }, providers: [CalendarEventLayoutService], ngImport: i0, template: "<!-- Week grid. Hour rules are quiet hairlines; today's column header is a tinted\n     number (no fill); the current time is a line carrying a small time bubble.\n     Dynamic row/column placement stays inline \u2014 the layout maths lives in TS. -->\n<div class=\"w-full h-full flex flex-col overflow-hidden\" role=\"grid\" aria-label=\"Week view\">\n  <div class=\"grid\" [style.grid-template-columns]=\"'60px ' + gridTemplateColumns\">\n    <div></div>\n    @for (col of columns; track col.dayName; let i = $index) {\n      <div class=\"py-2 px-1 text-center\"\n        [style.grid-column]=\"getHeaderColumn(i)\"\n        role=\"columnheader\">\n        <span class=\"block text-[11px] font-semibold uppercase tracking-wide opacity-50\">{{ col.dayName }}</span>\n        <span class=\"text-lg font-bold tabular-nums\" [class.text-primary]=\"col.isToday\">{{ col.dayNumber }}</span>\n      </div>\n    }\n  </div>\n  <div class=\"grid grid-cols-[60px_1fr] flex-1 min-h-0 overflow-hidden items-stretch\">\n    <div class=\"grid h-full min-h-0\" [style.grid-template-rows]=\"'repeat(' + totalRows + ', minmax(1.5rem, 1fr))'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"flex items-start justify-end min-h-0 overflow-hidden pr-2 text-[11px] tabular-nums opacity-50\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\">\n          {{ row.hourLabel }}\n        </div>\n      }\n    </div>\n    <div class=\"grid relative auto-rows-fr h-full min-h-0\"\n      [style.grid-template-rows]=\"'repeat(' + totalRows + ', minmax(1.5rem, 1fr))'\"\n      [style.grid-template-columns]=\"gridTemplateColumns\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"border-t border-base-200 pointer-events-none min-h-0\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\"\n          [style.grid-column]=\"'1 / -1'\">\n        </div>\n      }\n      @if (currentTimeRow > 0 && currentTimeCol) {\n        <div class=\"relative z-[2] pointer-events-none\"\n          [style.grid-row]=\"currentTimeRow\"\n          [style.grid-column]=\"currentTimeCol\">\n          <div class=\"absolute -left-1 -top-1 h-2 w-2 rounded-full bg-error\"></div>\n          <div class=\"h-0.5 w-full bg-error\"></div>\n          <div class=\"absolute left-0 top-0 -translate-x-2 -translate-y-1/2 rounded-full bg-error px-1.5 py-0.5 text-[10px] font-bold tabular-nums text-error-content shadow\">{{ currentTimeLabel }}</div>\n        </div>\n      }\n      @for (event of displayEvents; track $index) {\n        <div class=\"z-[1] min-h-0 overflow-hidden rounded-lg p-0.5 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary\"\n          [style.grid-row]=\"getEventRow(event)\"\n          [style.grid-column]=\"getEventColumn(event)\"\n             (click)=\"onEventClick(event)\"\n             (keyup.enter)=\"onEventClick(event)\"\n             tabindex=\"0\">\n          <mn-calendar-event [customComponent]=\"calendarEventComponent\" [event]=\"event\"></mn-calendar-event>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CalendarEventComponent, selector: "mn-calendar-event", inputs: ["event", "customComponent"], outputs: ["eventClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarWeekComponent, isStandalone: true, selector: "mn-calendar-week", inputs: { focusDay: "focusDay", eventsChanged: "eventsChanged", focusDayChanged: "focusDayChanged", config: "config", calendarEventComponent: "calendarEventComponent" }, outputs: { eventClicked: "eventClicked" }, providers: [CalendarEventLayoutService], ngImport: i0, template: "<!-- Week grid. Hour rules are quiet hairlines; today's column header is a tinted\n     number (no fill); the current time is a line carrying a small time bubble.\n     Dynamic row/column placement stays inline \u2014 the layout maths lives in TS. -->\n<div [attr.aria-label]=\"weekViewLabel\" class=\"w-full h-full flex flex-col overflow-hidden\" role=\"grid\">\n  <div class=\"grid\" [style.grid-template-columns]=\"'60px ' + gridTemplateColumns\">\n    <div></div>\n    @for (col of columns; track col.dayName; let i = $index) {\n      <div class=\"py-2 px-1 text-center\"\n        [style.grid-column]=\"getHeaderColumn(i)\"\n        role=\"columnheader\">\n        <span class=\"block text-[11px] font-semibold uppercase tracking-wide opacity-50\">{{ col.dayName }}</span>\n        <span class=\"text-lg font-bold tabular-nums\" [class.text-primary]=\"col.isToday\">{{ col.dayNumber }}</span>\n      </div>\n    }\n  </div>\n  <div class=\"grid grid-cols-[60px_1fr] flex-1 min-h-0 overflow-hidden items-stretch\">\n    <div class=\"grid h-full min-h-0\" [style.grid-template-rows]=\"'repeat(' + totalRows + ', minmax(1.5rem, 1fr))'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"flex items-start justify-end min-h-0 overflow-hidden pr-2 text-[11px] tabular-nums opacity-50\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\">\n          {{ row.hourLabel }}\n        </div>\n      }\n    </div>\n    <div class=\"grid relative auto-rows-fr h-full min-h-0\"\n      [style.grid-template-rows]=\"'repeat(' + totalRows + ', minmax(1.5rem, 1fr))'\"\n      [style.grid-template-columns]=\"gridTemplateColumns\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"border-t border-base-200 pointer-events-none min-h-0\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\"\n          [style.grid-column]=\"'1 / -1'\">\n        </div>\n      }\n      @if (currentTimeRow > 0 && currentTimeCol) {\n        <div class=\"relative z-[2] pointer-events-none\"\n          [style.grid-row]=\"currentTimeRow\"\n          [style.grid-column]=\"currentTimeCol\">\n          <div class=\"absolute -left-1 -top-1 h-2 w-2 rounded-full bg-error\"></div>\n          <div class=\"h-0.5 w-full bg-error\"></div>\n          <div class=\"absolute left-0 top-0 -translate-x-2 -translate-y-1/2 rounded-full bg-error px-1.5 py-0.5 text-[10px] font-bold tabular-nums text-error-content shadow\">{{ currentTimeLabel }}</div>\n        </div>\n      }\n      @for (event of displayEvents; track $index) {\n        <div class=\"z-[1] min-h-0 overflow-hidden rounded-lg p-0.5 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary\"\n          [style.grid-row]=\"getEventRow(event)\"\n          [style.grid-column]=\"getEventColumn(event)\"\n             (click)=\"onEventClick(event)\"\n             (keyup.enter)=\"onEventClick(event)\"\n             tabindex=\"0\">\n          <mn-calendar-event [customComponent]=\"calendarEventComponent\" [event]=\"event\"></mn-calendar-event>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CalendarEventComponent, selector: "mn-calendar-event", inputs: ["event", "customComponent"], outputs: ["eventClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarWeekComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-calendar-week', standalone: true, imports: [CommonModule, CalendarEventComponent], providers: [CalendarEventLayoutService], template: "<!-- Week grid. Hour rules are quiet hairlines; today's column header is a tinted\n     number (no fill); the current time is a line carrying a small time bubble.\n     Dynamic row/column placement stays inline \u2014 the layout maths lives in TS. -->\n<div class=\"w-full h-full flex flex-col overflow-hidden\" role=\"grid\" aria-label=\"Week view\">\n  <div class=\"grid\" [style.grid-template-columns]=\"'60px ' + gridTemplateColumns\">\n    <div></div>\n    @for (col of columns; track col.dayName; let i = $index) {\n      <div class=\"py-2 px-1 text-center\"\n        [style.grid-column]=\"getHeaderColumn(i)\"\n        role=\"columnheader\">\n        <span class=\"block text-[11px] font-semibold uppercase tracking-wide opacity-50\">{{ col.dayName }}</span>\n        <span class=\"text-lg font-bold tabular-nums\" [class.text-primary]=\"col.isToday\">{{ col.dayNumber }}</span>\n      </div>\n    }\n  </div>\n  <div class=\"grid grid-cols-[60px_1fr] flex-1 min-h-0 overflow-hidden items-stretch\">\n    <div class=\"grid h-full min-h-0\" [style.grid-template-rows]=\"'repeat(' + totalRows + ', minmax(1.5rem, 1fr))'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"flex items-start justify-end min-h-0 overflow-hidden pr-2 text-[11px] tabular-nums opacity-50\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\">\n          {{ row.hourLabel }}\n        </div>\n      }\n    </div>\n    <div class=\"grid relative auto-rows-fr h-full min-h-0\"\n      [style.grid-template-rows]=\"'repeat(' + totalRows + ', minmax(1.5rem, 1fr))'\"\n      [style.grid-template-columns]=\"gridTemplateColumns\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"border-t border-base-200 pointer-events-none min-h-0\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\"\n          [style.grid-column]=\"'1 / -1'\">\n        </div>\n      }\n      @if (currentTimeRow > 0 && currentTimeCol) {\n        <div class=\"relative z-[2] pointer-events-none\"\n          [style.grid-row]=\"currentTimeRow\"\n          [style.grid-column]=\"currentTimeCol\">\n          <div class=\"absolute -left-1 -top-1 h-2 w-2 rounded-full bg-error\"></div>\n          <div class=\"h-0.5 w-full bg-error\"></div>\n          <div class=\"absolute left-0 top-0 -translate-x-2 -translate-y-1/2 rounded-full bg-error px-1.5 py-0.5 text-[10px] font-bold tabular-nums text-error-content shadow\">{{ currentTimeLabel }}</div>\n        </div>\n      }\n      @for (event of displayEvents; track $index) {\n        <div class=\"z-[1] min-h-0 overflow-hidden rounded-lg p-0.5 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary\"\n          [style.grid-row]=\"getEventRow(event)\"\n          [style.grid-column]=\"getEventColumn(event)\"\n             (click)=\"onEventClick(event)\"\n             (keyup.enter)=\"onEventClick(event)\"\n             tabindex=\"0\">\n          <mn-calendar-event [customComponent]=\"calendarEventComponent\" [event]=\"event\"></mn-calendar-event>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'mn-calendar-week', standalone: true, imports: [CommonModule, CalendarEventComponent], providers: [CalendarEventLayoutService], template: "<!-- Week grid. Hour rules are quiet hairlines; today's column header is a tinted\n     number (no fill); the current time is a line carrying a small time bubble.\n     Dynamic row/column placement stays inline \u2014 the layout maths lives in TS. -->\n<div [attr.aria-label]=\"weekViewLabel\" class=\"w-full h-full flex flex-col overflow-hidden\" role=\"grid\">\n  <div class=\"grid\" [style.grid-template-columns]=\"'60px ' + gridTemplateColumns\">\n    <div></div>\n    @for (col of columns; track col.dayName; let i = $index) {\n      <div class=\"py-2 px-1 text-center\"\n        [style.grid-column]=\"getHeaderColumn(i)\"\n        role=\"columnheader\">\n        <span class=\"block text-[11px] font-semibold uppercase tracking-wide opacity-50\">{{ col.dayName }}</span>\n        <span class=\"text-lg font-bold tabular-nums\" [class.text-primary]=\"col.isToday\">{{ col.dayNumber }}</span>\n      </div>\n    }\n  </div>\n  <div class=\"grid grid-cols-[60px_1fr] flex-1 min-h-0 overflow-hidden items-stretch\">\n    <div class=\"grid h-full min-h-0\" [style.grid-template-rows]=\"'repeat(' + totalRows + ', minmax(1.5rem, 1fr))'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"flex items-start justify-end min-h-0 overflow-hidden pr-2 text-[11px] tabular-nums opacity-50\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\">\n          {{ row.hourLabel }}\n        </div>\n      }\n    </div>\n    <div class=\"grid relative auto-rows-fr h-full min-h-0\"\n      [style.grid-template-rows]=\"'repeat(' + totalRows + ', minmax(1.5rem, 1fr))'\"\n      [style.grid-template-columns]=\"gridTemplateColumns\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"border-t border-base-200 pointer-events-none min-h-0\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\"\n          [style.grid-column]=\"'1 / -1'\">\n        </div>\n      }\n      @if (currentTimeRow > 0 && currentTimeCol) {\n        <div class=\"relative z-[2] pointer-events-none\"\n          [style.grid-row]=\"currentTimeRow\"\n          [style.grid-column]=\"currentTimeCol\">\n          <div class=\"absolute -left-1 -top-1 h-2 w-2 rounded-full bg-error\"></div>\n          <div class=\"h-0.5 w-full bg-error\"></div>\n          <div class=\"absolute left-0 top-0 -translate-x-2 -translate-y-1/2 rounded-full bg-error px-1.5 py-0.5 text-[10px] font-bold tabular-nums text-error-content shadow\">{{ currentTimeLabel }}</div>\n        </div>\n      }\n      @for (event of displayEvents; track $index) {\n        <div class=\"z-[1] min-h-0 overflow-hidden rounded-lg p-0.5 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary\"\n          [style.grid-row]=\"getEventRow(event)\"\n          [style.grid-column]=\"getEventColumn(event)\"\n             (click)=\"onEventClick(event)\"\n             (keyup.enter)=\"onEventClick(event)\"\n             tabindex=\"0\">\n          <mn-calendar-event [customComponent]=\"calendarEventComponent\" [event]=\"event\"></mn-calendar-event>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { focusDay: [{
                 type: Input
             }], eventsChanged: [{
@@ -9806,6 +9967,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * {@link CalendarEventLayoutService}.
  */
 class CalendarDayComponent {
+    lang = inject(MnLanguageService);
+    /**
+     * Accessible name for this control. Resolved through the conventional
+     * `mnCalendar.dayView` key so an app can translate it, falling back to English when the
+     * key is not defined rather than leaking the raw key into the UI.
+     */
+    get dayViewLabel() {
+        return this.lang.translateIfPresent('mnCalendar.dayView') ?? 'Day view';
+    }
     layoutService = inject(CalendarEventLayoutService);
     cdr = inject(ChangeDetectorRef);
     /** The date to display. */
@@ -9951,11 +10121,11 @@ class CalendarDayComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarDayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarDayComponent, isStandalone: true, selector: "mn-calendar-day", inputs: { focusDay: "focusDay", eventsChanged: "eventsChanged", focusDayChanged: "focusDayChanged", config: "config", calendarEventComponent: "calendarEventComponent" }, outputs: { eventClicked: "eventClicked" }, providers: [CalendarEventLayoutService], ngImport: i0, template: "<!-- Day grid. One column, its header centered over that column (the toolbar\n     already names the date). Today's number is tinted, not filled; the now-line\n     carries a time bubble that overhangs into the gutter. -->\n<div class=\"w-full h-full flex flex-col overflow-hidden\" role=\"grid\" aria-label=\"Day view\">\n  <div class=\"grid grid-cols-[60px_1fr]\">\n    <div></div>\n    <div class=\"flex items-center justify-center gap-2 py-2 px-1\" role=\"columnheader\">\n      <span class=\"text-[11px] font-semibold uppercase tracking-wide opacity-50\">{{ dayName }}</span>\n      <span class=\"text-base font-bold tabular-nums\" [class.text-primary]=\"isToday\">{{ focusDay.getDate() }}</span>\n    </div>\n  </div>\n  <div class=\"grid grid-cols-[60px_1fr] flex-1 min-h-0 overflow-hidden items-stretch\">\n    <div class=\"grid h-full min-h-0\" [style.grid-template-rows]=\"'repeat(' + totalRows + ', minmax(1.5rem, 1fr))'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"flex items-start justify-end min-h-0 overflow-hidden pr-2 text-[11px] tabular-nums opacity-50\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\">\n          {{ row.hourLabel }}\n        </div>\n      }\n    </div>\n    <div class=\"grid relative auto-rows-fr h-full min-h-0\"\n      [style.grid-template-rows]=\"'repeat(' + totalRows + ', minmax(1.5rem, 1fr))'\"\n      [style.grid-template-columns]=\"'repeat(' + totalColumns + ', 1fr)'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"border-t border-base-200 pointer-events-none min-h-0\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\"\n          [style.grid-column]=\"'1 / -1'\">\n        </div>\n      }\n      @if (currentTimeRow > 0 && isToday) {\n        <div class=\"relative z-[2] pointer-events-none\"\n          [style.grid-row]=\"currentTimeRow\"\n          [style.grid-column]=\"'1 / -1'\">\n          <div class=\"absolute -left-1 -top-1 h-2 w-2 rounded-full bg-error\"></div>\n          <div class=\"h-0.5 w-full bg-error\"></div>\n          <div class=\"absolute left-0 top-0 -translate-x-2 -translate-y-1/2 rounded-full bg-error px-1.5 py-0.5 text-[10px] font-bold tabular-nums text-error-content shadow\">{{ currentTimeLabel }}</div>\n        </div>\n      }\n      @for (event of displayEvents; track $index) {\n        <div class=\"z-[1] min-h-0 overflow-hidden rounded-lg p-0.5 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary\"\n          [style.grid-row]=\"getEventRow(event)\"\n          [style.grid-column]=\"getEventColumn(event)\"\n             (click)=\"onEventClick(event)\"\n             (keyup.enter)=\"onEventClick(event)\"\n             tabindex=\"0\">\n          <mn-calendar-event [customComponent]=\"calendarEventComponent\" [event]=\"event\"></mn-calendar-event>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CalendarEventComponent, selector: "mn-calendar-event", inputs: ["event", "customComponent"], outputs: ["eventClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarDayComponent, isStandalone: true, selector: "mn-calendar-day", inputs: { focusDay: "focusDay", eventsChanged: "eventsChanged", focusDayChanged: "focusDayChanged", config: "config", calendarEventComponent: "calendarEventComponent" }, outputs: { eventClicked: "eventClicked" }, providers: [CalendarEventLayoutService], ngImport: i0, template: "<!-- Day grid. One column, its header centered over that column (the toolbar\n     already names the date). Today's number is tinted, not filled; the now-line\n     carries a time bubble that overhangs into the gutter. -->\n<div [attr.aria-label]=\"dayViewLabel\" class=\"w-full h-full flex flex-col overflow-hidden\" role=\"grid\">\n  <div class=\"grid grid-cols-[60px_1fr]\">\n    <div></div>\n    <div class=\"flex items-center justify-center gap-2 py-2 px-1\" role=\"columnheader\">\n      <span class=\"text-[11px] font-semibold uppercase tracking-wide opacity-50\">{{ dayName }}</span>\n      <span class=\"text-base font-bold tabular-nums\" [class.text-primary]=\"isToday\">{{ focusDay.getDate() }}</span>\n    </div>\n  </div>\n  <div class=\"grid grid-cols-[60px_1fr] flex-1 min-h-0 overflow-hidden items-stretch\">\n    <div class=\"grid h-full min-h-0\" [style.grid-template-rows]=\"'repeat(' + totalRows + ', minmax(1.5rem, 1fr))'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"flex items-start justify-end min-h-0 overflow-hidden pr-2 text-[11px] tabular-nums opacity-50\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\">\n          {{ row.hourLabel }}\n        </div>\n      }\n    </div>\n    <div class=\"grid relative auto-rows-fr h-full min-h-0\"\n      [style.grid-template-rows]=\"'repeat(' + totalRows + ', minmax(1.5rem, 1fr))'\"\n      [style.grid-template-columns]=\"'repeat(' + totalColumns + ', 1fr)'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"border-t border-base-200 pointer-events-none min-h-0\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\"\n          [style.grid-column]=\"'1 / -1'\">\n        </div>\n      }\n      @if (currentTimeRow > 0 && isToday) {\n        <div class=\"relative z-[2] pointer-events-none\"\n          [style.grid-row]=\"currentTimeRow\"\n          [style.grid-column]=\"'1 / -1'\">\n          <div class=\"absolute -left-1 -top-1 h-2 w-2 rounded-full bg-error\"></div>\n          <div class=\"h-0.5 w-full bg-error\"></div>\n          <div class=\"absolute left-0 top-0 -translate-x-2 -translate-y-1/2 rounded-full bg-error px-1.5 py-0.5 text-[10px] font-bold tabular-nums text-error-content shadow\">{{ currentTimeLabel }}</div>\n        </div>\n      }\n      @for (event of displayEvents; track $index) {\n        <div class=\"z-[1] min-h-0 overflow-hidden rounded-lg p-0.5 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary\"\n          [style.grid-row]=\"getEventRow(event)\"\n          [style.grid-column]=\"getEventColumn(event)\"\n             (click)=\"onEventClick(event)\"\n             (keyup.enter)=\"onEventClick(event)\"\n             tabindex=\"0\">\n          <mn-calendar-event [customComponent]=\"calendarEventComponent\" [event]=\"event\"></mn-calendar-event>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CalendarEventComponent, selector: "mn-calendar-event", inputs: ["event", "customComponent"], outputs: ["eventClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarDayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-calendar-day', standalone: true, imports: [CommonModule, CalendarEventComponent], providers: [CalendarEventLayoutService], template: "<!-- Day grid. One column, its header centered over that column (the toolbar\n     already names the date). Today's number is tinted, not filled; the now-line\n     carries a time bubble that overhangs into the gutter. -->\n<div class=\"w-full h-full flex flex-col overflow-hidden\" role=\"grid\" aria-label=\"Day view\">\n  <div class=\"grid grid-cols-[60px_1fr]\">\n    <div></div>\n    <div class=\"flex items-center justify-center gap-2 py-2 px-1\" role=\"columnheader\">\n      <span class=\"text-[11px] font-semibold uppercase tracking-wide opacity-50\">{{ dayName }}</span>\n      <span class=\"text-base font-bold tabular-nums\" [class.text-primary]=\"isToday\">{{ focusDay.getDate() }}</span>\n    </div>\n  </div>\n  <div class=\"grid grid-cols-[60px_1fr] flex-1 min-h-0 overflow-hidden items-stretch\">\n    <div class=\"grid h-full min-h-0\" [style.grid-template-rows]=\"'repeat(' + totalRows + ', minmax(1.5rem, 1fr))'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"flex items-start justify-end min-h-0 overflow-hidden pr-2 text-[11px] tabular-nums opacity-50\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\">\n          {{ row.hourLabel }}\n        </div>\n      }\n    </div>\n    <div class=\"grid relative auto-rows-fr h-full min-h-0\"\n      [style.grid-template-rows]=\"'repeat(' + totalRows + ', minmax(1.5rem, 1fr))'\"\n      [style.grid-template-columns]=\"'repeat(' + totalColumns + ', 1fr)'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"border-t border-base-200 pointer-events-none min-h-0\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\"\n          [style.grid-column]=\"'1 / -1'\">\n        </div>\n      }\n      @if (currentTimeRow > 0 && isToday) {\n        <div class=\"relative z-[2] pointer-events-none\"\n          [style.grid-row]=\"currentTimeRow\"\n          [style.grid-column]=\"'1 / -1'\">\n          <div class=\"absolute -left-1 -top-1 h-2 w-2 rounded-full bg-error\"></div>\n          <div class=\"h-0.5 w-full bg-error\"></div>\n          <div class=\"absolute left-0 top-0 -translate-x-2 -translate-y-1/2 rounded-full bg-error px-1.5 py-0.5 text-[10px] font-bold tabular-nums text-error-content shadow\">{{ currentTimeLabel }}</div>\n        </div>\n      }\n      @for (event of displayEvents; track $index) {\n        <div class=\"z-[1] min-h-0 overflow-hidden rounded-lg p-0.5 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary\"\n          [style.grid-row]=\"getEventRow(event)\"\n          [style.grid-column]=\"getEventColumn(event)\"\n             (click)=\"onEventClick(event)\"\n             (keyup.enter)=\"onEventClick(event)\"\n             tabindex=\"0\">\n          <mn-calendar-event [customComponent]=\"calendarEventComponent\" [event]=\"event\"></mn-calendar-event>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'mn-calendar-day', standalone: true, imports: [CommonModule, CalendarEventComponent], providers: [CalendarEventLayoutService], template: "<!-- Day grid. One column, its header centered over that column (the toolbar\n     already names the date). Today's number is tinted, not filled; the now-line\n     carries a time bubble that overhangs into the gutter. -->\n<div [attr.aria-label]=\"dayViewLabel\" class=\"w-full h-full flex flex-col overflow-hidden\" role=\"grid\">\n  <div class=\"grid grid-cols-[60px_1fr]\">\n    <div></div>\n    <div class=\"flex items-center justify-center gap-2 py-2 px-1\" role=\"columnheader\">\n      <span class=\"text-[11px] font-semibold uppercase tracking-wide opacity-50\">{{ dayName }}</span>\n      <span class=\"text-base font-bold tabular-nums\" [class.text-primary]=\"isToday\">{{ focusDay.getDate() }}</span>\n    </div>\n  </div>\n  <div class=\"grid grid-cols-[60px_1fr] flex-1 min-h-0 overflow-hidden items-stretch\">\n    <div class=\"grid h-full min-h-0\" [style.grid-template-rows]=\"'repeat(' + totalRows + ', minmax(1.5rem, 1fr))'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"flex items-start justify-end min-h-0 overflow-hidden pr-2 text-[11px] tabular-nums opacity-50\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\">\n          {{ row.hourLabel }}\n        </div>\n      }\n    </div>\n    <div class=\"grid relative auto-rows-fr h-full min-h-0\"\n      [style.grid-template-rows]=\"'repeat(' + totalRows + ', minmax(1.5rem, 1fr))'\"\n      [style.grid-template-columns]=\"'repeat(' + totalColumns + ', 1fr)'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"border-t border-base-200 pointer-events-none min-h-0\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\"\n          [style.grid-column]=\"'1 / -1'\">\n        </div>\n      }\n      @if (currentTimeRow > 0 && isToday) {\n        <div class=\"relative z-[2] pointer-events-none\"\n          [style.grid-row]=\"currentTimeRow\"\n          [style.grid-column]=\"'1 / -1'\">\n          <div class=\"absolute -left-1 -top-1 h-2 w-2 rounded-full bg-error\"></div>\n          <div class=\"h-0.5 w-full bg-error\"></div>\n          <div class=\"absolute left-0 top-0 -translate-x-2 -translate-y-1/2 rounded-full bg-error px-1.5 py-0.5 text-[10px] font-bold tabular-nums text-error-content shadow\">{{ currentTimeLabel }}</div>\n        </div>\n      }\n      @for (event of displayEvents; track $index) {\n        <div class=\"z-[1] min-h-0 overflow-hidden rounded-lg p-0.5 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary\"\n          [style.grid-row]=\"getEventRow(event)\"\n          [style.grid-column]=\"getEventColumn(event)\"\n             (click)=\"onEventClick(event)\"\n             (keyup.enter)=\"onEventClick(event)\"\n             tabindex=\"0\">\n          <mn-calendar-event [customComponent]=\"calendarEventComponent\" [event]=\"event\"></mn-calendar-event>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { focusDay: [{
                 type: Input
             }], eventsChanged: [{
@@ -10009,6 +10179,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * (events whose end time is in the future), sorted by start time.
  */
 class UpcomingEventsComponent {
+    lang = inject(MnLanguageService);
+    /**
+     * Accessible name for this control. Resolved through the conventional
+     * `mnCalendar.upcomingEvents` key so an app can translate it, falling back to English when the
+     * key is not defined rather than leaking the raw key into the UI.
+     */
+    get upcomingEventsLabel() {
+        return this.lang.translateIfPresent('mnCalendar.upcomingEvents') ?? 'Upcoming events';
+    }
     /** Observable that emits the full event list whenever it changes. */
     eventsChanged;
     /** Resolved calendar configuration passed from the parent view. */
@@ -10054,11 +10233,11 @@ class UpcomingEventsComponent {
         return event.id;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UpcomingEventsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: UpcomingEventsComponent, isStandalone: true, selector: "mn-upcoming-events", inputs: { eventsChanged: "eventsChanged", config: "config" }, outputs: { eventClicked: "eventClicked" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"p-4\" role=\"complementary\" aria-label=\"Upcoming events\">\n  <div class=\"mb-3 flex items-center gap-2\">\n    <h3 class=\"text-sm font-bold tracking-wide\">{{ title }}</h3>\n    @if (upcomingEvents.length) {\n      <span class=\"text-xs font-semibold tabular-nums opacity-45\">{{ upcomingEvents.length }}</span>\n    }\n  </div>\n  @for (event of upcomingEvents; track $index) {\n    <mn-upcoming-event-row\n      [event]=\"event\"\n      (eventClicked)=\"eventClicked.emit($event)\">\n    </mn-upcoming-event-row>\n  }\n  @if (upcomingEvents.length === 0) {\n    <div class=\"text-sm opacity-50\">{{ noEventsMessage }}</div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UpcomingEventRowComponent, selector: "mn-upcoming-event-row", inputs: ["event"], outputs: ["eventClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: UpcomingEventsComponent, isStandalone: true, selector: "mn-upcoming-events", inputs: { eventsChanged: "eventsChanged", config: "config" }, outputs: { eventClicked: "eventClicked" }, usesOnChanges: true, ngImport: i0, template: "<div [attr.aria-label]=\"upcomingEventsLabel\" class=\"p-4\" role=\"complementary\">\n  <div class=\"mb-3 flex items-center gap-2\">\n    <h3 class=\"text-sm font-bold tracking-wide\">{{ title }}</h3>\n    @if (upcomingEvents.length) {\n      <span class=\"text-xs font-semibold tabular-nums opacity-45\">{{ upcomingEvents.length }}</span>\n    }\n  </div>\n  @for (event of upcomingEvents; track $index) {\n    <mn-upcoming-event-row\n      [event]=\"event\"\n      (eventClicked)=\"eventClicked.emit($event)\">\n    </mn-upcoming-event-row>\n  }\n  @if (upcomingEvents.length === 0) {\n    <div class=\"text-sm opacity-50\">{{ noEventsMessage }}</div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UpcomingEventRowComponent, selector: "mn-upcoming-event-row", inputs: ["event"], outputs: ["eventClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UpcomingEventsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-upcoming-events', standalone: true, imports: [CommonModule, UpcomingEventRowComponent], template: "<div class=\"p-4\" role=\"complementary\" aria-label=\"Upcoming events\">\n  <div class=\"mb-3 flex items-center gap-2\">\n    <h3 class=\"text-sm font-bold tracking-wide\">{{ title }}</h3>\n    @if (upcomingEvents.length) {\n      <span class=\"text-xs font-semibold tabular-nums opacity-45\">{{ upcomingEvents.length }}</span>\n    }\n  </div>\n  @for (event of upcomingEvents; track $index) {\n    <mn-upcoming-event-row\n      [event]=\"event\"\n      (eventClicked)=\"eventClicked.emit($event)\">\n    </mn-upcoming-event-row>\n  }\n  @if (upcomingEvents.length === 0) {\n    <div class=\"text-sm opacity-50\">{{ noEventsMessage }}</div>\n  }\n</div>\n" }]
+            args: [{ selector: 'mn-upcoming-events', standalone: true, imports: [CommonModule, UpcomingEventRowComponent], template: "<div [attr.aria-label]=\"upcomingEventsLabel\" class=\"p-4\" role=\"complementary\">\n  <div class=\"mb-3 flex items-center gap-2\">\n    <h3 class=\"text-sm font-bold tracking-wide\">{{ title }}</h3>\n    @if (upcomingEvents.length) {\n      <span class=\"text-xs font-semibold tabular-nums opacity-45\">{{ upcomingEvents.length }}</span>\n    }\n  </div>\n  @for (event of upcomingEvents; track $index) {\n    <mn-upcoming-event-row\n      [event]=\"event\"\n      (eventClicked)=\"eventClicked.emit($event)\">\n    </mn-upcoming-event-row>\n  }\n  @if (upcomingEvents.length === 0) {\n    <div class=\"text-sm opacity-50\">{{ noEventsMessage }}</div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { eventsChanged: [{
                 type: Input
             }], config: [{
@@ -10094,6 +10273,14 @@ let instanceCounter = 0;
  * ```
  */
 class CalendarViewComponent {
+    /**
+     * Accessible name for this control. Resolved through the conventional
+     * `mnCalendar.calendarView` key so an app can translate it, falling back to English when the
+     * key is not defined rather than leaking the raw key into the UI.
+     */
+    get calendarViewLabel() {
+        return this.lang.translateIfPresent('mnCalendar.calendarView') ?? 'Calendar view';
+    }
     /** Whether to show the action button in the toolbar. */
     showButton = false;
     /** Label text for the action button. */
@@ -10305,7 +10492,7 @@ class CalendarViewComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarViewComponent, isStandalone: true, selector: "mn-calendar-view", inputs: { showButton: "showButton", buttonTitle: "buttonTitle", buttons: "buttons", CalendarEventComponent: "CalendarEventComponent", NewCalendarItemsEvent: "NewCalendarItemsEvent" }, outputs: { RequestNewCalendarItemsEvent: "RequestNewCalendarItemsEvent", CalendarItemClickedEvent: "CalendarItemClickedEvent", ButtonClickedEvent: "ButtonClickedEvent" }, host: { listeners: { "window:resize": "onResize()" } }, providers: [
             provideMnCalendarConfig(DEFAULT_CALENDAR_CONFIG),
-        ], ngImport: i0, template: "<div class=\"w-full h-full flex flex-col\" role=\"application\" aria-label=\"Calendar\">\n\n  <!-- Toolbar has one layout below the desktop (`lg`) width and one at it. Below\n       `lg`: a controls row (Today anchored left, the right-hand cluster anchored\n       right) with the \u2039 date \u203A nav centred on its own row beneath \u2014 the same\n       shape from phone through tablet, so nothing wraps into a lopsided diagonal.\n       At `lg`, where the upcoming-events sidebar also appears, the nav folds up\n       inline after Today and the whole toolbar becomes a single row. The one JS\n       breakpoint (`mobileBreakpoint`) governs the phone controls \u2014 icon-only\n       picker, hidden view-switcher, forced day view \u2014 not the toolbar's shape. -->\n  <div class=\"flex flex-wrap items-center gap-x-3 gap-y-2 py-3\">\n\n    <button (click)=\"goToToday()\"\n            [data]=\"{ variant: 'outline', size: 'md', color: 'primary' }\"\n            class=\"shrink-0\"\n            mnButton\n            type=\"button\">\n      {{ config.todayLabel }}\n    </button>\n\n    <!-- Stepping through time. The arrows sit either side of the date they move,\n         so the control and the thing it controls read as one unit. Below `lg` it\n         sits centred on its own row (basis-full, ordered last) \u2014 a period header\n         above the grid, tight rather than flinging the arrows to the row's edges.\n         At `lg` it folds inline right after Today, taking a stable min-width so\n         the arrows don't jitter as the label's length changes. -->\n    <div class=\"flex basis-full order-last justify-center items-center gap-1\n                lg:basis-auto lg:order-none lg:justify-start\">\n      <button (click)=\"navigate(-1)\"\n              [attr.aria-label]=\"config.previousLabel\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronLeft></svg>\n      </button>\n\n      <h2 aria-live=\"polite\"\n          class=\"text-center text-base font-semibold whitespace-nowrap px-1 lg:min-w-56\">\n        {{ periodLabel }}\n      </h2>\n\n      <button (click)=\"navigate(1)\"\n              [attr.aria-label]=\"config.nextLabel\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronRight></svg>\n      </button>\n    </div>\n\n    <!-- Right-hand controls travel together as one cluster with `ml-auto`, so they\n         hold to the right of the row on every width \u2014 and when space runs short the\n         whole group wraps to a new line as a unit rather than stranding a lone\n         button. On desktop the cluster lands above the upcoming-events sidebar,\n         using that otherwise-empty space. -->\n    <div class=\"ml-auto flex items-center gap-2\">\n      <!-- On mobile the picker collapses to its icon-only variant. -->\n      <mn-lib-datetime (ngModelChange)=\"onPickDate($event)\"\n                       [ngModel]=\"focusDayString\"\n                       [props]=\"{ id: panelId + '-date', mode: 'date', placeholder: config.pickDateLabel, size: 'md', borderRadius: 'lg', hover: true, iconOnly: isMobileView }\"\n                       class=\"block\"></mn-lib-datetime>\n\n      <!-- View switcher (month / week / day) \u2014 hidden on mobile, which is forced to day view. -->\n      @if (!isMobileView) {\n        <div aria-label=\"Calendar view\" class=\"flex border border-base-300 rounded-md overflow-hidden\" role=\"tablist\">\n          @for (view of viewOptions; track view.value) {\n            <button\n              (click)=\"switchView(view.value)\"\n              [attr.aria-controls]=\"panelId\"\n              [attr.aria-selected]=\"currentView === view.value\"\n              [data]=\"{ size: 'md', variant: currentView === view.value ? 'fill' : 'text', color: 'primary' }\"\n              mnButton\n              role=\"tab\"\n              type=\"button\">\n              {{ view.label }}\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Action buttons (custom buttons + optional showButton CTA). -->\n      @if (buttons.length || showButton) {\n        @for (btn of buttons; track btn.label) {\n          <button (click)=\"btn.onClick()\" [data]=\"btn.buttonData || {}\" mnButton type=\"button\">\n            {{ btn.label }}\n          </button>\n        }\n        @if (showButton) {\n          <button (click)=\"ButtonClickedEvent.emit()\" [data]=\"{}\" mnButton type=\"button\">\n            {{ buttonTitle }}\n          </button>\n        }\n      }\n    </div>\n\n  </div>\n\n  <div class=\"grid grid-cols-1 lg:grid-cols-[1fr_220px] gap-3 flex-1 min-h-0\">\n    <div [id]=\"panelId\" class=\"min-w-0 min-h-0 overflow-hidden overflow-y-auto\" role=\"tabpanel\">\n      @if (currentView === CalendarView.MONTH) {\n        <mn-calendar-month\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          (dayClicked)=\"onMonthDayClick($event)\">\n        </mn-calendar-month>\n      }\n      @if (currentView === CalendarView.WEEK) {\n        <mn-calendar-week\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-week>\n      }\n      @if (currentView === CalendarView.DAY) {\n        <mn-calendar-day\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-day>\n      }\n    </div>\n    <div class=\"hidden lg:block border-l border-base-300 overflow-auto\">\n      <mn-upcoming-events\n        [eventsChanged]=\"internalEventsChanged\"\n        [config]=\"config\"\n        (eventClicked)=\"onEventClick($event)\">\n      </mn-upcoming-events>\n    </div>\n  </div>\n\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CalendarMonthComponent, selector: "mn-calendar-month", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config"], outputs: ["dayClicked"] }, { kind: "component", type: CalendarWeekComponent, selector: "mn-calendar-week", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config", "calendarEventComponent"], outputs: ["eventClicked"] }, { kind: "component", type: CalendarDayComponent, selector: "mn-calendar-day", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config", "calendarEventComponent"], outputs: ["eventClicked"] }, { kind: "component", type: UpcomingEventsComponent, selector: "mn-upcoming-events", inputs: ["eventsChanged", "config"], outputs: ["eventClicked"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnDatetime, selector: "mn-lib-datetime", inputs: ["props"] }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }] });
+        ], ngImport: i0, template: "<div class=\"w-full h-full flex flex-col\" role=\"application\" aria-label=\"Calendar\">\n\n  <!-- Toolbar has one layout below the desktop (`lg`) width and one at it. Below\n       `lg`: a controls row (Today anchored left, the right-hand cluster anchored\n       right) with the \u2039 date \u203A nav centred on its own row beneath \u2014 the same\n       shape from phone through tablet, so nothing wraps into a lopsided diagonal.\n       At `lg`, where the upcoming-events sidebar also appears, the nav folds up\n       inline after Today and the whole toolbar becomes a single row. The one JS\n       breakpoint (`mobileBreakpoint`) governs the phone controls \u2014 icon-only\n       picker, hidden view-switcher, forced day view \u2014 not the toolbar's shape. -->\n  <div class=\"flex flex-wrap items-center gap-x-3 gap-y-2 py-3\">\n\n    <button (click)=\"goToToday()\"\n            [data]=\"{ variant: 'outline', size: 'md', color: 'primary' }\"\n            class=\"shrink-0\"\n            mnButton\n            type=\"button\">\n      {{ config.todayLabel }}\n    </button>\n\n    <!-- Stepping through time. The arrows sit either side of the date they move,\n         so the control and the thing it controls read as one unit. Below `lg` it\n         sits centred on its own row (basis-full, ordered last) \u2014 a period header\n         above the grid, tight rather than flinging the arrows to the row's edges.\n         At `lg` it folds inline right after Today, taking a stable min-width so\n         the arrows don't jitter as the label's length changes. -->\n    <div class=\"flex basis-full order-last justify-center items-center gap-1\n                lg:basis-auto lg:order-none lg:justify-start\">\n      <button (click)=\"navigate(-1)\"\n              [attr.aria-label]=\"config.previousLabel\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronLeft></svg>\n      </button>\n\n      <h2 aria-live=\"polite\"\n          class=\"text-center text-base font-semibold whitespace-nowrap px-1 lg:min-w-56\">\n        {{ periodLabel }}\n      </h2>\n\n      <button (click)=\"navigate(1)\"\n              [attr.aria-label]=\"config.nextLabel\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronRight></svg>\n      </button>\n    </div>\n\n    <!-- Right-hand controls travel together as one cluster with `ml-auto`, so they\n         hold to the right of the row on every width \u2014 and when space runs short the\n         whole group wraps to a new line as a unit rather than stranding a lone\n         button. On desktop the cluster lands above the upcoming-events sidebar,\n         using that otherwise-empty space. -->\n    <div class=\"ml-auto flex items-center gap-2\">\n      <!-- On mobile the picker collapses to its icon-only variant. -->\n      <mn-lib-datetime (ngModelChange)=\"onPickDate($event)\"\n                       [ngModel]=\"focusDayString\"\n                       [props]=\"{ id: panelId + '-date', mode: 'date', placeholder: config.pickDateLabel, size: 'md', borderRadius: 'lg', hover: true, iconOnly: isMobileView }\"\n                       class=\"block\"></mn-lib-datetime>\n\n      <!-- View switcher (month / week / day) \u2014 hidden on mobile, which is forced to day view. -->\n      @if (!isMobileView) {\n        <div [attr.aria-label]=\"calendarViewLabel\" class=\"flex border border-base-300 rounded-md overflow-hidden\"\n             role=\"tablist\">\n          @for (view of viewOptions; track view.value) {\n            <button\n              (click)=\"switchView(view.value)\"\n              [attr.aria-controls]=\"panelId\"\n              [attr.aria-selected]=\"currentView === view.value\"\n              [data]=\"{ size: 'md', variant: currentView === view.value ? 'fill' : 'text', color: 'primary' }\"\n              mnButton\n              role=\"tab\"\n              type=\"button\">\n              {{ view.label }}\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Action buttons (custom buttons + optional showButton CTA). -->\n      @if (buttons.length || showButton) {\n        @for (btn of buttons; track btn.label) {\n          <button (click)=\"btn.onClick()\" [data]=\"btn.buttonData || {}\" mnButton type=\"button\">\n            {{ btn.label }}\n          </button>\n        }\n        @if (showButton) {\n          <button (click)=\"ButtonClickedEvent.emit()\" [data]=\"{}\" mnButton type=\"button\">\n            {{ buttonTitle }}\n          </button>\n        }\n      }\n    </div>\n\n  </div>\n\n  <div class=\"grid grid-cols-1 lg:grid-cols-[1fr_220px] gap-3 flex-1 min-h-0\">\n    <div [id]=\"panelId\" class=\"min-w-0 min-h-0 overflow-hidden overflow-y-auto\" role=\"tabpanel\">\n      @if (currentView === CalendarView.MONTH) {\n        <mn-calendar-month\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          (dayClicked)=\"onMonthDayClick($event)\">\n        </mn-calendar-month>\n      }\n      @if (currentView === CalendarView.WEEK) {\n        <mn-calendar-week\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-week>\n      }\n      @if (currentView === CalendarView.DAY) {\n        <mn-calendar-day\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-day>\n      }\n    </div>\n    <div class=\"hidden lg:block border-l border-base-300 overflow-auto\">\n      <mn-upcoming-events\n        [eventsChanged]=\"internalEventsChanged\"\n        [config]=\"config\"\n        (eventClicked)=\"onEventClick($event)\">\n      </mn-upcoming-events>\n    </div>\n  </div>\n\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CalendarMonthComponent, selector: "mn-calendar-month", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config"], outputs: ["dayClicked"] }, { kind: "component", type: CalendarWeekComponent, selector: "mn-calendar-week", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config", "calendarEventComponent"], outputs: ["eventClicked"] }, { kind: "component", type: CalendarDayComponent, selector: "mn-calendar-day", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config", "calendarEventComponent"], outputs: ["eventClicked"] }, { kind: "component", type: UpcomingEventsComponent, selector: "mn-upcoming-events", inputs: ["eventsChanged", "config"], outputs: ["eventClicked"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnDatetime, selector: "mn-lib-datetime", inputs: ["props"] }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarViewComponent, decorators: [{
             type: Component,
@@ -10322,7 +10509,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         LucideChevronRight
                     ], providers: [
                         provideMnCalendarConfig(DEFAULT_CALENDAR_CONFIG),
-                    ], template: "<div class=\"w-full h-full flex flex-col\" role=\"application\" aria-label=\"Calendar\">\n\n  <!-- Toolbar has one layout below the desktop (`lg`) width and one at it. Below\n       `lg`: a controls row (Today anchored left, the right-hand cluster anchored\n       right) with the \u2039 date \u203A nav centred on its own row beneath \u2014 the same\n       shape from phone through tablet, so nothing wraps into a lopsided diagonal.\n       At `lg`, where the upcoming-events sidebar also appears, the nav folds up\n       inline after Today and the whole toolbar becomes a single row. The one JS\n       breakpoint (`mobileBreakpoint`) governs the phone controls \u2014 icon-only\n       picker, hidden view-switcher, forced day view \u2014 not the toolbar's shape. -->\n  <div class=\"flex flex-wrap items-center gap-x-3 gap-y-2 py-3\">\n\n    <button (click)=\"goToToday()\"\n            [data]=\"{ variant: 'outline', size: 'md', color: 'primary' }\"\n            class=\"shrink-0\"\n            mnButton\n            type=\"button\">\n      {{ config.todayLabel }}\n    </button>\n\n    <!-- Stepping through time. The arrows sit either side of the date they move,\n         so the control and the thing it controls read as one unit. Below `lg` it\n         sits centred on its own row (basis-full, ordered last) \u2014 a period header\n         above the grid, tight rather than flinging the arrows to the row's edges.\n         At `lg` it folds inline right after Today, taking a stable min-width so\n         the arrows don't jitter as the label's length changes. -->\n    <div class=\"flex basis-full order-last justify-center items-center gap-1\n                lg:basis-auto lg:order-none lg:justify-start\">\n      <button (click)=\"navigate(-1)\"\n              [attr.aria-label]=\"config.previousLabel\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronLeft></svg>\n      </button>\n\n      <h2 aria-live=\"polite\"\n          class=\"text-center text-base font-semibold whitespace-nowrap px-1 lg:min-w-56\">\n        {{ periodLabel }}\n      </h2>\n\n      <button (click)=\"navigate(1)\"\n              [attr.aria-label]=\"config.nextLabel\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronRight></svg>\n      </button>\n    </div>\n\n    <!-- Right-hand controls travel together as one cluster with `ml-auto`, so they\n         hold to the right of the row on every width \u2014 and when space runs short the\n         whole group wraps to a new line as a unit rather than stranding a lone\n         button. On desktop the cluster lands above the upcoming-events sidebar,\n         using that otherwise-empty space. -->\n    <div class=\"ml-auto flex items-center gap-2\">\n      <!-- On mobile the picker collapses to its icon-only variant. -->\n      <mn-lib-datetime (ngModelChange)=\"onPickDate($event)\"\n                       [ngModel]=\"focusDayString\"\n                       [props]=\"{ id: panelId + '-date', mode: 'date', placeholder: config.pickDateLabel, size: 'md', borderRadius: 'lg', hover: true, iconOnly: isMobileView }\"\n                       class=\"block\"></mn-lib-datetime>\n\n      <!-- View switcher (month / week / day) \u2014 hidden on mobile, which is forced to day view. -->\n      @if (!isMobileView) {\n        <div aria-label=\"Calendar view\" class=\"flex border border-base-300 rounded-md overflow-hidden\" role=\"tablist\">\n          @for (view of viewOptions; track view.value) {\n            <button\n              (click)=\"switchView(view.value)\"\n              [attr.aria-controls]=\"panelId\"\n              [attr.aria-selected]=\"currentView === view.value\"\n              [data]=\"{ size: 'md', variant: currentView === view.value ? 'fill' : 'text', color: 'primary' }\"\n              mnButton\n              role=\"tab\"\n              type=\"button\">\n              {{ view.label }}\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Action buttons (custom buttons + optional showButton CTA). -->\n      @if (buttons.length || showButton) {\n        @for (btn of buttons; track btn.label) {\n          <button (click)=\"btn.onClick()\" [data]=\"btn.buttonData || {}\" mnButton type=\"button\">\n            {{ btn.label }}\n          </button>\n        }\n        @if (showButton) {\n          <button (click)=\"ButtonClickedEvent.emit()\" [data]=\"{}\" mnButton type=\"button\">\n            {{ buttonTitle }}\n          </button>\n        }\n      }\n    </div>\n\n  </div>\n\n  <div class=\"grid grid-cols-1 lg:grid-cols-[1fr_220px] gap-3 flex-1 min-h-0\">\n    <div [id]=\"panelId\" class=\"min-w-0 min-h-0 overflow-hidden overflow-y-auto\" role=\"tabpanel\">\n      @if (currentView === CalendarView.MONTH) {\n        <mn-calendar-month\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          (dayClicked)=\"onMonthDayClick($event)\">\n        </mn-calendar-month>\n      }\n      @if (currentView === CalendarView.WEEK) {\n        <mn-calendar-week\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-week>\n      }\n      @if (currentView === CalendarView.DAY) {\n        <mn-calendar-day\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-day>\n      }\n    </div>\n    <div class=\"hidden lg:block border-l border-base-300 overflow-auto\">\n      <mn-upcoming-events\n        [eventsChanged]=\"internalEventsChanged\"\n        [config]=\"config\"\n        (eventClicked)=\"onEventClick($event)\">\n      </mn-upcoming-events>\n    </div>\n  </div>\n\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}\n"] }]
+                    ], template: "<div class=\"w-full h-full flex flex-col\" role=\"application\" aria-label=\"Calendar\">\n\n  <!-- Toolbar has one layout below the desktop (`lg`) width and one at it. Below\n       `lg`: a controls row (Today anchored left, the right-hand cluster anchored\n       right) with the \u2039 date \u203A nav centred on its own row beneath \u2014 the same\n       shape from phone through tablet, so nothing wraps into a lopsided diagonal.\n       At `lg`, where the upcoming-events sidebar also appears, the nav folds up\n       inline after Today and the whole toolbar becomes a single row. The one JS\n       breakpoint (`mobileBreakpoint`) governs the phone controls \u2014 icon-only\n       picker, hidden view-switcher, forced day view \u2014 not the toolbar's shape. -->\n  <div class=\"flex flex-wrap items-center gap-x-3 gap-y-2 py-3\">\n\n    <button (click)=\"goToToday()\"\n            [data]=\"{ variant: 'outline', size: 'md', color: 'primary' }\"\n            class=\"shrink-0\"\n            mnButton\n            type=\"button\">\n      {{ config.todayLabel }}\n    </button>\n\n    <!-- Stepping through time. The arrows sit either side of the date they move,\n         so the control and the thing it controls read as one unit. Below `lg` it\n         sits centred on its own row (basis-full, ordered last) \u2014 a period header\n         above the grid, tight rather than flinging the arrows to the row's edges.\n         At `lg` it folds inline right after Today, taking a stable min-width so\n         the arrows don't jitter as the label's length changes. -->\n    <div class=\"flex basis-full order-last justify-center items-center gap-1\n                lg:basis-auto lg:order-none lg:justify-start\">\n      <button (click)=\"navigate(-1)\"\n              [attr.aria-label]=\"config.previousLabel\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronLeft></svg>\n      </button>\n\n      <h2 aria-live=\"polite\"\n          class=\"text-center text-base font-semibold whitespace-nowrap px-1 lg:min-w-56\">\n        {{ periodLabel }}\n      </h2>\n\n      <button (click)=\"navigate(1)\"\n              [attr.aria-label]=\"config.nextLabel\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronRight></svg>\n      </button>\n    </div>\n\n    <!-- Right-hand controls travel together as one cluster with `ml-auto`, so they\n         hold to the right of the row on every width \u2014 and when space runs short the\n         whole group wraps to a new line as a unit rather than stranding a lone\n         button. On desktop the cluster lands above the upcoming-events sidebar,\n         using that otherwise-empty space. -->\n    <div class=\"ml-auto flex items-center gap-2\">\n      <!-- On mobile the picker collapses to its icon-only variant. -->\n      <mn-lib-datetime (ngModelChange)=\"onPickDate($event)\"\n                       [ngModel]=\"focusDayString\"\n                       [props]=\"{ id: panelId + '-date', mode: 'date', placeholder: config.pickDateLabel, size: 'md', borderRadius: 'lg', hover: true, iconOnly: isMobileView }\"\n                       class=\"block\"></mn-lib-datetime>\n\n      <!-- View switcher (month / week / day) \u2014 hidden on mobile, which is forced to day view. -->\n      @if (!isMobileView) {\n        <div [attr.aria-label]=\"calendarViewLabel\" class=\"flex border border-base-300 rounded-md overflow-hidden\"\n             role=\"tablist\">\n          @for (view of viewOptions; track view.value) {\n            <button\n              (click)=\"switchView(view.value)\"\n              [attr.aria-controls]=\"panelId\"\n              [attr.aria-selected]=\"currentView === view.value\"\n              [data]=\"{ size: 'md', variant: currentView === view.value ? 'fill' : 'text', color: 'primary' }\"\n              mnButton\n              role=\"tab\"\n              type=\"button\">\n              {{ view.label }}\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Action buttons (custom buttons + optional showButton CTA). -->\n      @if (buttons.length || showButton) {\n        @for (btn of buttons; track btn.label) {\n          <button (click)=\"btn.onClick()\" [data]=\"btn.buttonData || {}\" mnButton type=\"button\">\n            {{ btn.label }}\n          </button>\n        }\n        @if (showButton) {\n          <button (click)=\"ButtonClickedEvent.emit()\" [data]=\"{}\" mnButton type=\"button\">\n            {{ buttonTitle }}\n          </button>\n        }\n      }\n    </div>\n\n  </div>\n\n  <div class=\"grid grid-cols-1 lg:grid-cols-[1fr_220px] gap-3 flex-1 min-h-0\">\n    <div [id]=\"panelId\" class=\"min-w-0 min-h-0 overflow-hidden overflow-y-auto\" role=\"tabpanel\">\n      @if (currentView === CalendarView.MONTH) {\n        <mn-calendar-month\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          (dayClicked)=\"onMonthDayClick($event)\">\n        </mn-calendar-month>\n      }\n      @if (currentView === CalendarView.WEEK) {\n        <mn-calendar-week\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-week>\n      }\n      @if (currentView === CalendarView.DAY) {\n        <mn-calendar-day\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-day>\n      }\n    </div>\n    <div class=\"hidden lg:block border-l border-base-300 overflow-auto\">\n      <mn-upcoming-events\n        [eventsChanged]=\"internalEventsChanged\"\n        [config]=\"config\"\n        (eventClicked)=\"onEventClick($event)\">\n      </mn-upcoming-events>\n    </div>\n  </div>\n\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { showButton: [{
                 type: Input
             }], buttonTitle: [{
@@ -10355,6 +10542,12 @@ const DEFAULT_SKELETON_TAB_COUNT = 3;
 class MnTabComponent {
     /** The horizontally-scrolling wrapper the edge fade is painted onto. */
     scrollContainer;
+    /** The tab row; queried for the active tab so the indicator can measure it. */
+    tabList;
+    /** The shared underline that slides to the active tab. */
+    indicator;
+    /** Pending indicator remeasure, cancelled on destroy so a post-destroy frame can't read a detached ref. */
+    indicatorFrame;
     /** How far the fade reaches in from each overflowing edge. */
     static FADE = '2rem';
     /** Data source containing tab items and default active index. */
@@ -10418,14 +10611,23 @@ class MnTabComponent {
         const el = this.scrollContainer?.nativeElement;
         if (!el)
             return;
-        this.resizeObserver = new ResizeObserver(() => this.updateEdgeFades());
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateEdgeFades();
+            // Tabs may have reflowed (viewport change, justified widths); snap the
+            // indicator to the new geometry — animating a resize tick reads as jank.
+            this.updateIndicator(false);
+        });
         this.resizeObserver.observe(el);
         if (el.firstElementChild)
             this.resizeObserver.observe(el.firstElementChild);
         this.updateEdgeFades();
+        // Place the indicator on the default tab without a slide-in from zero.
+        this.updateIndicator(false);
     }
     ngOnDestroy() {
         this.resizeObserver?.disconnect();
+        if (this.indicatorFrame !== undefined)
+            cancelAnimationFrame(this.indicatorFrame);
     }
     /**
      * Paints a fade over whichever edge has tabs scrolled out of view — a soft
@@ -10465,6 +10667,52 @@ class MnTabComponent {
         item.onClick?.();
         this.currentActive = item;
         this.activeChange.emit(item);
+        // Slide the underline to the new tab. Measure on the next frame, after
+        // change detection has applied the active tab's `font-bold` (which widens
+        // it) so the indicator lands on the final, bolded geometry.
+        this.scheduleIndicator(true);
+    }
+    /**
+     * Moves the shared underline to the active tab. When `animate` is false the
+     * move is snapped (no slide) by disabling the transition for one reflow —
+     * used on init, async selection and resize, where a slide would read as jank.
+     * @param animate - Whether the move should slide (true) or snap (false).
+     */
+    updateIndicator(animate) {
+        const bar = this.indicator?.nativeElement;
+        const list = this.tabList?.nativeElement;
+        if (!bar || !list)
+            return;
+        const active = list.querySelector('[role="tab"][aria-selected="true"]');
+        if (!active) {
+            bar.style.opacity = '0';
+            return;
+        }
+        if (!animate)
+            bar.style.transition = 'none';
+        bar.style.opacity = '1';
+        bar.style.width = `${active.offsetWidth}px`;
+        bar.style.transform = `translateX(${active.offsetLeft}px)`;
+        if (!animate) {
+            // Force a reflow so the snapped values apply before the transition is
+            // restored, then hand animation back to the CSS class.
+            void bar.offsetWidth;
+            bar.style.transition = '';
+        }
+    }
+    /**
+     * Remeasures the indicator on the next animation frame, so the read happens
+     * after layout reflects the latest active-tab classes. Coalesces bursts and
+     * is cancellable on destroy.
+     * @param animate - Whether the resulting move should slide.
+     */
+    scheduleIndicator(animate) {
+        if (this.indicatorFrame !== undefined)
+            cancelAnimationFrame(this.indicatorFrame);
+        this.indicatorFrame = requestAnimationFrame(() => {
+            this.indicatorFrame = undefined;
+            this.updateIndicator(animate);
+        });
     }
     /**
      * Returns the resolved badge value for a tab item, supporting both plain numbers and Signal<number>.
@@ -10483,7 +10731,10 @@ class MnTabComponent {
     syncActiveTab() {
         const items = this.dataSource?.items;
         if (!items || items.length === 0) {
-            this.currentActive = undefined;
+            if (this.currentActive !== undefined) {
+                this.currentActive = undefined;
+                this.scheduleIndicator(false);
+            }
             return;
         }
         if (this.currentActive && items.includes(this.currentActive)) {
@@ -10492,16 +10743,24 @@ class MnTabComponent {
         const defaultIndex = this.dataSource.defaultActive;
         const index = defaultIndex >= 0 && defaultIndex < items.length ? defaultIndex : 0;
         this.currentActive = items[index];
+        // Selection resolved from data (not a user click): snap, don't slide.
+        this.scheduleIndicator(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTabComponent, isStandalone: true, selector: "mn-tab", inputs: { dataSource: "dataSource", scrollable: "scrollable", justified: "justified" }, outputs: { activeChange: "activeChange" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }], ngImport: i0, template: "<div class=\"mb-10\">\n  <div\n    #scrollContainer\n    (scroll)=\"updateEdgeFades()\"\n    class=\"flex justify-start scrollbar-hide\"\n    [class.overflow-x-auto]=\"scrollable\"\n    [class.overflow-y-hidden]=\"scrollable\"\n  >\n    <div\n      role=\"tablist\"\n      class=\"tabs flex flex-nowrap -mb-[1px] border-b border-base-300\"\n      [class.w-full]=\"justified\"\n    >\n      @if (isLoadingState) {\n        @for (i of skeletonTabs; track i) {\n          <div\n            [class.flex-1]=\"justified\"\n            class=\"tab px-4 py-2 border-b-2 border-transparent flex items-center justify-center\"\n          >\n            <mn-skeleton [data]=\"{ shape: 'rectangle', width: '4.5rem', height: '1rem' }\"></mn-skeleton>\n          </div>\n        }\n      } @else {\n        @for (item of dataSource.items; track item.label) {\n          <div\n            (click)=\"setActive(item)\"\n            (keyup.enter)=\"setActive(item)\"\n            (keyup.space)=\"setActive(item)\"\n            [attr.aria-selected]=\"currentActive === item\"\n            [class.border-primary]=\"currentActive === item\"\n            [class.border-transparent]=\"currentActive !== item\"\n            [class.hover:after:scale-x-100]=\"currentActive !== item\"\n            [class.flex-1]=\"justified\"\n            [class.font-bold]=\"currentActive === item\"\n            [class.text-base-content]=\"currentActive !== item\"\n            [class.text-primary]=\"currentActive === item\"\n            class=\"tab relative px-4 py-2 border-b-2 cursor-pointer select-none transition-colors whitespace-nowrap text-center flex items-center gap-2 after:content-[''] after:absolute after:inset-x-0 after:-bottom-[2px] after:h-[2px] after:bg-primary/60 after:origin-center after:scale-x-0 after:transition-transform after:duration-300 after:ease-out\"\n            role=\"tab\"\n            tabindex=\"0\"\n          >\n            {{ item.label | mnTranslate }}\n            @let badge = getBadge(item);\n            @if (badge && badge > 0) {\n              <span [data]=\"{ size: 'sm', color: 'accent', variant: 'fill' }\" mnBadge>{{ badge }}</span>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MnBadge, selector: "span[mnBadge]", inputs: ["data"] }, { kind: "component", type: MnSkeleton, selector: "mn-skeleton", inputs: ["data"] }, { kind: "pipe", type: MnTranslatePipe, name: "mnTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTabComponent, isStandalone: true, selector: "mn-tab", inputs: { dataSource: "dataSource", scrollable: "scrollable", justified: "justified" }, outputs: { activeChange: "activeChange" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "tabList", first: true, predicate: ["tabList"], descendants: true }, { propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true }], ngImport: i0, template: "<div class=\"mb-10\">\n  <div\n    #scrollContainer\n    (scroll)=\"updateEdgeFades()\"\n    class=\"flex justify-start scrollbar-hide\"\n    [class.overflow-x-auto]=\"scrollable\"\n    [class.overflow-y-hidden]=\"scrollable\"\n  >\n    <div\n      #tabList\n      role=\"tablist\"\n      class=\"tabs relative flex flex-nowrap -mb-[1px] border-b border-base-300\"\n      [class.w-full]=\"justified\"\n    >\n      <!--\n        Shared sliding indicator: a single underline that travels to the active\n        tab, rather than each tab flipping its own border on/off (which snaps).\n        Pinned to left-0/top-auto so offsetLeft maps 1:1 regardless of the\n        flex justify-content or the justified full-width layout; position and\n        width are measured and set from TS. Sits on the same baseline as the\n        hover ::after so hover \u2192 select reads as one continuous underline.\n      -->\n      <div\n        #indicator\n        aria-hidden=\"true\"\n        class=\"pointer-events-none absolute left-0 top-auto bottom-0 h-[2px] w-0 bg-primary opacity-0 transition-[transform,width] duration-300 ease-out motion-reduce:transition-none\"\n      ></div>\n      @if (isLoadingState) {\n        @for (i of skeletonTabs; track i) {\n          <div\n            [class.flex-1]=\"justified\"\n            class=\"tab px-4 py-2 border-b-2 border-transparent flex items-center justify-center\"\n          >\n            <mn-skeleton [data]=\"{ shape: 'rectangle', width: '4.5rem', height: '1rem' }\"></mn-skeleton>\n          </div>\n        }\n      } @else {\n        @for (item of dataSource.items; track item.label) {\n          <div\n            (click)=\"setActive(item)\"\n            (keyup.enter)=\"setActive(item)\"\n            (keyup.space)=\"setActive(item)\"\n            [attr.aria-selected]=\"currentActive === item\"\n            [class.hover:after:scale-x-100]=\"currentActive !== item\"\n            [class.flex-1]=\"justified\"\n            [class.font-bold]=\"currentActive === item\"\n            [class.text-base-content]=\"currentActive !== item\"\n            [class.text-primary]=\"currentActive === item\"\n            class=\"tab relative px-4 py-2 border-b-2 border-transparent cursor-pointer select-none transition-colors whitespace-nowrap text-center flex items-center gap-2 after:content-[''] after:absolute after:inset-x-0 after:-bottom-[2px] after:h-[2px] after:bg-primary/60 after:origin-center after:scale-x-0 after:transition-transform after:duration-300 after:ease-out\"\n            role=\"tab\"\n            tabindex=\"0\"\n          >\n            {{ item.label | mnTranslate }}\n            @let badge = getBadge(item);\n            @if (badge && badge > 0) {\n              <span [data]=\"{ size: 'sm', color: 'accent', variant: 'fill' }\" mnBadge>{{ badge }}</span>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MnBadge, selector: "span[mnBadge]", inputs: ["data"] }, { kind: "component", type: MnSkeleton, selector: "mn-skeleton", inputs: ["data"] }, { kind: "pipe", type: MnTranslatePipe, name: "mnTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-tab', standalone: true, imports: [MnTranslatePipe, CommonModule, MnBadge, MnSkeleton], template: "<div class=\"mb-10\">\n  <div\n    #scrollContainer\n    (scroll)=\"updateEdgeFades()\"\n    class=\"flex justify-start scrollbar-hide\"\n    [class.overflow-x-auto]=\"scrollable\"\n    [class.overflow-y-hidden]=\"scrollable\"\n  >\n    <div\n      role=\"tablist\"\n      class=\"tabs flex flex-nowrap -mb-[1px] border-b border-base-300\"\n      [class.w-full]=\"justified\"\n    >\n      @if (isLoadingState) {\n        @for (i of skeletonTabs; track i) {\n          <div\n            [class.flex-1]=\"justified\"\n            class=\"tab px-4 py-2 border-b-2 border-transparent flex items-center justify-center\"\n          >\n            <mn-skeleton [data]=\"{ shape: 'rectangle', width: '4.5rem', height: '1rem' }\"></mn-skeleton>\n          </div>\n        }\n      } @else {\n        @for (item of dataSource.items; track item.label) {\n          <div\n            (click)=\"setActive(item)\"\n            (keyup.enter)=\"setActive(item)\"\n            (keyup.space)=\"setActive(item)\"\n            [attr.aria-selected]=\"currentActive === item\"\n            [class.border-primary]=\"currentActive === item\"\n            [class.border-transparent]=\"currentActive !== item\"\n            [class.hover:after:scale-x-100]=\"currentActive !== item\"\n            [class.flex-1]=\"justified\"\n            [class.font-bold]=\"currentActive === item\"\n            [class.text-base-content]=\"currentActive !== item\"\n            [class.text-primary]=\"currentActive === item\"\n            class=\"tab relative px-4 py-2 border-b-2 cursor-pointer select-none transition-colors whitespace-nowrap text-center flex items-center gap-2 after:content-[''] after:absolute after:inset-x-0 after:-bottom-[2px] after:h-[2px] after:bg-primary/60 after:origin-center after:scale-x-0 after:transition-transform after:duration-300 after:ease-out\"\n            role=\"tab\"\n            tabindex=\"0\"\n          >\n            {{ item.label | mnTranslate }}\n            @let badge = getBadge(item);\n            @if (badge && badge > 0) {\n              <span [data]=\"{ size: 'sm', color: 'accent', variant: 'fill' }\" mnBadge>{{ badge }}</span>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'mn-tab', standalone: true, imports: [MnTranslatePipe, CommonModule, MnBadge, MnSkeleton], template: "<div class=\"mb-10\">\n  <div\n    #scrollContainer\n    (scroll)=\"updateEdgeFades()\"\n    class=\"flex justify-start scrollbar-hide\"\n    [class.overflow-x-auto]=\"scrollable\"\n    [class.overflow-y-hidden]=\"scrollable\"\n  >\n    <div\n      #tabList\n      role=\"tablist\"\n      class=\"tabs relative flex flex-nowrap -mb-[1px] border-b border-base-300\"\n      [class.w-full]=\"justified\"\n    >\n      <!--\n        Shared sliding indicator: a single underline that travels to the active\n        tab, rather than each tab flipping its own border on/off (which snaps).\n        Pinned to left-0/top-auto so offsetLeft maps 1:1 regardless of the\n        flex justify-content or the justified full-width layout; position and\n        width are measured and set from TS. Sits on the same baseline as the\n        hover ::after so hover \u2192 select reads as one continuous underline.\n      -->\n      <div\n        #indicator\n        aria-hidden=\"true\"\n        class=\"pointer-events-none absolute left-0 top-auto bottom-0 h-[2px] w-0 bg-primary opacity-0 transition-[transform,width] duration-300 ease-out motion-reduce:transition-none\"\n      ></div>\n      @if (isLoadingState) {\n        @for (i of skeletonTabs; track i) {\n          <div\n            [class.flex-1]=\"justified\"\n            class=\"tab px-4 py-2 border-b-2 border-transparent flex items-center justify-center\"\n          >\n            <mn-skeleton [data]=\"{ shape: 'rectangle', width: '4.5rem', height: '1rem' }\"></mn-skeleton>\n          </div>\n        }\n      } @else {\n        @for (item of dataSource.items; track item.label) {\n          <div\n            (click)=\"setActive(item)\"\n            (keyup.enter)=\"setActive(item)\"\n            (keyup.space)=\"setActive(item)\"\n            [attr.aria-selected]=\"currentActive === item\"\n            [class.hover:after:scale-x-100]=\"currentActive !== item\"\n            [class.flex-1]=\"justified\"\n            [class.font-bold]=\"currentActive === item\"\n            [class.text-base-content]=\"currentActive !== item\"\n            [class.text-primary]=\"currentActive === item\"\n            class=\"tab relative px-4 py-2 border-b-2 border-transparent cursor-pointer select-none transition-colors whitespace-nowrap text-center flex items-center gap-2 after:content-[''] after:absolute after:inset-x-0 after:-bottom-[2px] after:h-[2px] after:bg-primary/60 after:origin-center after:scale-x-0 after:transition-transform after:duration-300 after:ease-out\"\n            role=\"tab\"\n            tabindex=\"0\"\n          >\n            {{ item.label | mnTranslate }}\n            @let badge = getBadge(item);\n            @if (badge && badge > 0) {\n              <span [data]=\"{ size: 'sm', color: 'accent', variant: 'fill' }\" mnBadge>{{ badge }}</span>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { scrollContainer: [{
                 type: ViewChild,
                 args: ['scrollContainer']
+            }], tabList: [{
+                type: ViewChild,
+                args: ['tabList']
+            }], indicator: [{
+                type: ViewChild,
+                args: ['indicator']
             }], dataSource: [{
                 type: Input
             }], scrollable: [{
@@ -10512,6 +10771,263 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 type: Output
             }] } });
 
+/**
+ * Toolbar the editor renders when the consumer does not supply one. Deliberately
+ * small: it covers written prose, so there is no colour picker, no font picker
+ * and no image embedding (an image needs an upload and storage path the editor
+ * knows nothing about).
+ */
+const DEFAULT_TOOLBAR = [
+    [{ header: [2, 3, false] }],
+    ['bold', 'italic', 'underline', 'strike'],
+    [{ list: 'ordered' }, { list: 'bullet' }],
+    ['blockquote', 'code-block'],
+    ['link'],
+    ['clean'],
+];
+/** Where each control sits in the toolbar Quill builds. */
+const CONTROL_SELECTORS = {
+    textStyle: '.ql-header .ql-picker-label',
+    bold: 'button.ql-bold',
+    italic: 'button.ql-italic',
+    underline: 'button.ql-underline',
+    strike: 'button.ql-strike',
+    orderedList: 'button.ql-list[value="ordered"]',
+    bulletList: 'button.ql-list[value="bullet"]',
+    blockquote: 'button.ql-blockquote',
+    codeBlock: 'button.ql-code-block',
+    link: 'button.ql-link',
+    clean: 'button.ql-clean',
+};
+/** Hover labels used when the consumer supplies neither a label nor a key. */
+const DEFAULT_LABELS = {
+    textStyle: 'Text style',
+    bold: 'Bold',
+    italic: 'Italic',
+    underline: 'Underline',
+    strike: 'Strikethrough',
+    orderedList: 'Numbered list',
+    bulletList: 'Bulleted list',
+    blockquote: 'Quote',
+    codeBlock: 'Code block',
+    link: 'Link',
+    clean: 'Clear formatting',
+};
+/** Quill's document when it holds no text; treated as an empty value. */
+const EMPTY_DOCUMENT = '<p><br></p>';
+/**
+ * Thin wrapper around the {@link Quill} rich-text editor.
+ *
+ * Quill is used **directly** rather than through an Angular wrapper package: the
+ * wrapper libraries carry peer-dependency ranges that lag behind Angular's
+ * release train, and none of them add anything this component needs.
+ *
+ * Consumers must install `quill` themselves (it is an optional peer dependency)
+ * and load its snow theme, e.g. `node_modules/quill/dist/quill.snow.css` in the
+ * `styles` array of `angular.json`. Only the chrome around that theme — radius,
+ * borders, height limits and the toolbar tooltips — belongs to this component;
+ * recolouring Quill's own palette to an app theme stays with the app, because
+ * the same `.ql-snow` markup is normally reused to render stored HTML in places
+ * where no editor is mounted.
+ *
+ * Quill itself is pulled in with a dynamic `import()` when the editor mounts.
+ * This component sits in the library's single entry point, which apps import
+ * eagerly, so a static import would put the whole editor engine in every app's
+ * initial bundle — including the pages that never open one.
+ *
+ * Zoneless notes: nothing here relies on an implicit change-detection tick. The
+ * editor is created inside {@link afterNextRender} (the host element only exists
+ * after the first render pass) and every value that flows back out is written to
+ * a signal or emitted through an `output`, both of which schedule change
+ * detection themselves. No `setTimeout`, no manual `detectChanges`.
+ *
+ * The produced HTML is **not** trusted: sanitise it before rendering it anywhere.
+ *
+ * @example
+ * ```html
+ * <mn-rich-text-editor
+ *   [content]="draft()"
+ *   [placeholder]="'minutes.placeholder' | mnTranslate"
+ *   [labelKeys]="{ bold: 'editor.bold', italic: 'editor.italic' }"
+ *   (contentChange)="draft.set($event)">
+ * </mn-rich-text-editor>
+ * ```
+ */
+class MnRichTextEditor {
+    /**
+     * The initial HTML content. Later changes are applied only when they differ
+     * from what the editor currently holds, so a parent echoing the emitted value
+     * back never moves the caret.
+     */
+    content = input('', ...(ngDevMode ? [{ debugName: "content" }] : []));
+    /** Placeholder shown while the editor is empty. */
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /** Accessible label for the editing surface. */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /** Toolbar layout, in Quill's own format. Defaults to a prose-oriented set. */
+    toolbar = input(DEFAULT_TOOLBAR, ...(ngDevMode ? [{ debugName: "toolbar" }] : []));
+    /** Literal hover labels per toolbar control. */
+    labels = input({}, ...(ngDevMode ? [{ debugName: "labels" }] : []));
+    /** Translation keys per toolbar control; takes precedence over `labels`. */
+    labelKeys = input({}, ...(ngDevMode ? [{ debugName: "labelKeys" }] : []));
+    /**
+     * Utilities applied to the wrapper, for sizing the writing surface. Overriding
+     * this replaces the default height limits, so pass both bounds when you do.
+     */
+    editorClass = input('[&_.ql-editor]:max-h-104 [&_.ql-editor]:min-h-72 [&_.ql-editor]:overflow-y-auto', ...(ngDevMode ? [{ debugName: "editorClass" }] : []));
+    /** Emits the editor's HTML on every user edit. */
+    contentChange = output();
+    /**
+     * Chrome around Quill's snow theme: the field's radius, border and surface.
+     *
+     * Descendant variants rather than a stylesheet — the utilities come from the
+     * consuming app's Tailwind build (which scans this bundle), so they follow the
+     * app's theme tokens the same way the rest of the library does.
+     */
+    chromeClass = '[&_.ql-container.ql-snow]:rounded-b-xl [&_.ql-container.ql-snow]:border-base-300 ' +
+        '[&_.ql-container.ql-snow]:bg-base-100 [&_.ql-container.ql-snow]:text-base ' +
+        '[&_.ql-toolbar.ql-snow]:rounded-t-xl [&_.ql-toolbar.ql-snow]:border-base-300 ' +
+        '[&_.ql-toolbar.ql-snow]:bg-base-100';
+    /** Host element, used to keep DOM queries inside this component. */
+    host = inject(ElementRef);
+    /** Language service, used to resolve the toolbar labels from keys. */
+    lang = inject(MnLanguageService);
+    /** The container Quill mounts into. */
+    editorHost = viewChild.required('editorHost');
+    /** The live editor instance, or null before Quill has loaded. */
+    quill = null;
+    /** Whether the component is gone, so a late Quill load knows to stop. */
+    destroyed = false;
+    /** The last HTML this component emitted, used to skip redundant writes. */
+    lastEmitted = signal('', ...(ngDevMode ? [{ debugName: "lastEmitted" }] : []));
+    constructor() {
+        afterNextRender(() => void this.createEditor());
+        // Push a changed `content` input into a live editor. `lastEmitted` is read
+        // `untracked` on purpose: it must gate the write (skip when the incoming HTML
+        // already matches what we hold) WITHOUT making the effect depend on it. If it
+        // were tracked, every keystroke (which updates `lastEmitted`) would re-run the
+        // effect and re-paste the now-stale `content` seed — wiping the user's typing
+        // and resetting the caret after any wholesale reseed.
+        effect(() => {
+            const incoming = this.content();
+            if (!this.quill || incoming === untracked(this.lastEmitted))
+                return;
+            this.setEditorHtml(incoming);
+        });
+    }
+    /** Drops the editor reference so the instance can be garbage collected. */
+    ngOnDestroy() {
+        this.destroyed = true;
+        this.quill = null;
+    }
+    /** Moves focus into the editing surface. */
+    focusEditor() {
+        this.quill?.focus();
+        if (!this.quill) {
+            this.host.nativeElement.querySelector('.ql-editor')?.focus();
+        }
+    }
+    /**
+     * Loads Quill, builds the instance and wires its change handler.
+     *
+     * Nothing awaits this beyond the component itself: the surface appears once
+     * the engine has loaded, and until then the `content` effect is a no-op that
+     * the seeding below makes good.
+     */
+    async createEditor() {
+        const { default: QuillEditor } = await import('quill');
+        if (this.destroyed)
+            return;
+        const container = this.editorHost().nativeElement;
+        this.quill = new QuillEditor(container, {
+            theme: 'snow',
+            placeholder: this.placeholder(),
+            modules: { toolbar: this.toolbar() },
+        });
+        const label = this.ariaLabel();
+        if (label) {
+            this.quill.root.setAttribute('aria-label', label);
+        }
+        this.applyToolbarLabels();
+        this.setEditorHtml(this.content());
+        this.quill.on('text-change', () => this.emitCurrentHtml());
+    }
+    /**
+     * Gives each toolbar control a hover label, so hovering explains what the
+     * style does. Set on the Quill-generated DOM after init; a control the current
+     * toolbar does not render is simply skipped.
+     */
+    applyToolbarLabels() {
+        const toolbar = this.host.nativeElement.querySelector('.ql-toolbar');
+        if (!toolbar)
+            return;
+        const labels = this.labels();
+        const keys = this.labelKeys();
+        for (const [control, selector] of Object.entries(CONTROL_SELECTORS)) {
+            const element = toolbar.querySelector(selector);
+            if (!element)
+                continue;
+            element.classList.add('mn-rte-tooltip');
+            element.setAttribute('data-tip', this.resolveLabel(control, labels, keys));
+        }
+    }
+    /**
+     * Picks the hover label for one control.
+     * @param control The control being labelled.
+     * @param labels Literal labels supplied by the consumer.
+     * @param keys Translation keys supplied by the consumer.
+     * @returns The translated key, the literal label, or the built-in default.
+     */
+    resolveLabel(control, labels, keys) {
+        const key = keys[control];
+        if (key) {
+            // `t()` echoes the key back when the consumer has no translation for it;
+            // that is a miss, not a label, so fall through to the remaining sources.
+            const translated = this.lang.t(key);
+            if (translated !== key)
+                return translated;
+        }
+        return labels[control] ?? DEFAULT_LABELS[control];
+    }
+    /**
+     * Replaces the editor content with stored HTML. Quill parses it into its own
+     * document model, which silently drops anything it has no format for — a
+     * useful extra filter on top of the consumer's sanitiser.
+     * @param html The HTML to load into the editor.
+     */
+    setEditorHtml(html) {
+        if (!this.quill)
+            return;
+        // `dangerouslyPasteHTML` is Quill's documented name for "parse this HTML".
+        this.quill.clipboard.dangerouslyPasteHTML(html ?? '', 'silent');
+        this.lastEmitted.set(this.readHtml());
+    }
+    /** Emits the editor's current HTML, normalising Quill's "empty" document. */
+    emitCurrentHtml() {
+        const html = this.readHtml();
+        this.lastEmitted.set(html);
+        this.contentChange.emit(html);
+    }
+    /**
+     * Reads the editor's HTML.
+     * @returns The current HTML, or an empty string when the editor is blank.
+     */
+    readHtml() {
+        if (!this.quill)
+            return '';
+        // Quill leaves an empty paragraph behind after a clear; treat that as empty
+        // so an untouched editor does not count as authored content.
+        const html = this.quill.root.innerHTML;
+        return html === EMPTY_DOCUMENT ? '' : html;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnRichTextEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.3", type: MnRichTextEditor, isStandalone: true, selector: "mn-rich-text-editor", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, labelKeys: { classPropertyName: "labelKeys", publicName: "labelKeys", isSignal: true, isRequired: false, transformFunction: null }, editorClass: { classPropertyName: "editorClass", publicName: "editorClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentChange: "contentChange" }, viewQueries: [{ propertyName: "editorHost", first: true, predicate: ["editorHost"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mn-rich-text-editor {{ chromeClass }} {{ editorClass() }}\">\n  <div #editorHost></div>\n</div>\n", styles: [".mn-rich-text-editor .mn-rte-tooltip{position:relative}.mn-rich-text-editor .mn-rte-tooltip[data-tip]:after{content:attr(data-tip);position:absolute;bottom:100%;left:50%;translate:-50% -.375rem;padding:.25rem .5rem;border-radius:.375rem;background-color:var(--color-secondary);color:var(--color-secondary-content);font-size:.75rem;line-height:1rem;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:50}.mn-rich-text-editor .mn-rte-tooltip[data-tip]:hover:after,.mn-rich-text-editor .mn-rte-tooltip[data-tip]:focus-visible:after{opacity:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnRichTextEditor, decorators: [{
+            type: Component,
+            args: [{ selector: 'mn-rich-text-editor', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mn-rich-text-editor {{ chromeClass }} {{ editorClass() }}\">\n  <div #editorHost></div>\n</div>\n", styles: [".mn-rich-text-editor .mn-rte-tooltip{position:relative}.mn-rich-text-editor .mn-rte-tooltip[data-tip]:after{content:attr(data-tip);position:absolute;bottom:100%;left:50%;translate:-50% -.375rem;padding:.25rem .5rem;border-radius:.375rem;background-color:var(--color-secondary);color:var(--color-secondary-content);font-size:.75rem;line-height:1rem;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:50}.mn-rich-text-editor .mn-rte-tooltip[data-tip]:hover:after,.mn-rich-text-editor .mn-rte-tooltip[data-tip]:focus-visible:after{opacity:1}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], toolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], labelKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKeys", required: false }] }], editorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "editorClass", required: false }] }], contentChange: [{ type: i0.Output, args: ["contentChange"] }], editorHost: [{ type: i0.ViewChild, args: ['editorHost', { isSignal: true }] }] } });
+
 const mnIconVariants = tv({
     base: 'inline-flex shrink-0',
     variants: {
@@ -11134,5 +11650,5 @@ function enableMnPreviewMode(configService, langService, allowedOrigins) {
  * Generated bundle index. Do not edit.
  */
 
-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_HAPTICS, MN_ICON_MAP, MN_INPUT_FIELD_CONFIG, MN_INSTANCE_ID, MN_LIB_DUAL_HORIZONTAL_IMAGE, MN_MODAL_ACTION_ICONS, MN_MULTI_SELECT_CONFIG, MN_SECTION_PATH, MN_SELECT_CONFIG, MN_TEXTAREA_CONFIG, MODAL_ACTION_ICON_SIZE, MODAL_ACTION_ICON_SIZE_SM, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnBadge, MnButton, MnCheckbox, MnCollectionBase, MnCollectionPagination, MnCollectionState, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDateSelectorBar, MnDatetime, MnDualHorizontalImage, MnFileInput, 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, defaultFilterPredicate, defaultIconForStyle, defaultTextAdapter, emptyFilterValue, enableMnPreviewMode, isFilterValueActive, isTranslatable, matchesColumnFilter, mnAlertVariants, mnBadgeVariants, mnButtonVariants, mnCheckboxVariants, mnCheckboxWrapperVariants, mnDatetimeVariants, mnFileInputVariants, mnIconVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnSelectVariants, mnSkeletonVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnCalendarConfig, provideMnComponentConfig, provideMnConfig, provideMnLanguage, resolveCalendarConfig, resolveFilterableValue };
+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_HAPTICS, MN_ICON_MAP, MN_INPUT_FIELD_CONFIG, MN_INSTANCE_ID, MN_LIB_DUAL_HORIZONTAL_IMAGE, MN_MODAL_ACTION_ICONS, MN_MULTI_SELECT_CONFIG, MN_SECTION_PATH, MN_SELECT_CONFIG, MN_TEXTAREA_CONFIG, MODAL_ACTION_ICON_SIZE, MODAL_ACTION_ICON_SIZE_SM, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnBadge, MnButton, MnCheckbox, MnCollectionBase, MnCollectionPagination, MnCollectionState, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDateSelectorBar, MnDatetime, MnDualHorizontalImage, MnFileInput, MnFormBodyComponent, MnGrid, MnHiddenBelowDirective, MnHttpService, MnIcon, MnIconAttributes, MnInformationCard, MnInputField, MnInstanceDirective, MnLanguageService, MnList, MnModalRef, MnModalService, MnModalShellComponent, MnMultiSelect, MnRichTextEditor, 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, defaultFilterPredicate, defaultIconForStyle, defaultTextAdapter, emptyFilterValue, enableMnPreviewMode, isFilterValueActive, isTranslatable, matchesColumnFilter, mnAlertVariants, mnBadgeVariants, mnButtonVariants, mnCheckboxVariants, mnCheckboxWrapperVariants, mnDatetimeVariants, mnFileInputVariants, mnIconVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnSelectVariants, mnSkeletonVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnCalendarConfig, provideMnComponentConfig, provideMnConfig, provideMnLanguage, resolveCalendarConfig, resolveFilterableValue };
 //# sourceMappingURL=mn-angular-lib.mjs.map