mn-angular-lib 1.0.161 → 1.0.163

package/fesm2022/mn-angular-lib.mjs

@@ -483,6 +483,19 @@ function isTranslatable(value) {
         typeof value['$translate'] === 'string');
 }
 
+/**
+ * Key suffix per CLDR plural category.
+ *
+ * Only `one` earns a suffix: every locale shipped so far (`en`, `nl`) has exactly the two
+ * categories `one` and `other`, and `other` keeps the bare key. A locale with `few`/`many`
+ * (Polish, Russian, Arabic) resolves those to the plural until an entry is added here —
+ * adding one is the whole change, since the lookup is category-driven already.
+ */
+const PLURAL_SUFFIX = {
+    one: 'One',
+};
+/** Params key whose presence turns a translation into a plural-aware lookup. */
+const COUNT_PARAM = 'count';
 class MnLanguageService {
     http = inject(HttpClient);
     appRef = inject(ApplicationRef);
@@ -490,6 +503,11 @@ class MnLanguageService {
     _locale$ = new BehaviorSubject('en');
     _urlPattern = null;
     _debug = false;
+    /**
+     * `Intl.PluralRules` per locale. Cached because {@link translate} runs on every change
+     * detection through the impure `mnTranslate` pipe, and constructing one is not cheap.
+     */
+    _pluralRules = new Map();
     /** Observable of the current active locale. */
     locale$ = this._locale$.asObservable();
     /** Current active locale. */
@@ -567,10 +585,22 @@ class MnLanguageService {
      * Falls back to the key itself if no translation is found.
      *
      * Interpolation replaces `{{paramName}}` with the provided value.
+     *
+     * A `count` param additionally selects the wording that agrees with it: the key is
+     * resolved against its CLDR plural category first (`key` + `One`/`Two`/`Few`/`Many`/
+     * `Zero`), falling back to `key` when that sibling is undefined. Nothing has to opt in —
+     * a key with no sibling behaves exactly as before.
+     *
+     * ```ts
+     * // 'shift.asked'    → '{{count}} members are notified'
+     * // 'shift.askedOne' → '{{count}} member is notified'
+     * lang.translate('shift.asked', { count: 3 }); // 3 members are notified
+     * lang.translate('shift.asked', { count: 1 }); // 1 member is notified
+     * ```
      */
     translate(key, params) {
         const map = this._translations[this.locale] ?? {};
-        let value = this.getValueFromMap(map, key);
+        let value = this.getValueFromMap(map, this.resolvePluralKey(map, key, params));
         if (value === undefined) {
             if (this._debug) {
                 console.warn(`[MnLanguage] Missing translation for key: "${key}" in locale: "${this.locale}"`);
@@ -584,12 +614,64 @@ class MnLanguageService {
         }
         return value;
     }
+    /**
+     * Picks the wording that agrees with a `count` param.
+     *
+     * A key carrying a count resolves against its CLDR plural category first, so
+     * `askedMessage` + `askedMessageOne` render "3 leden krijgen bericht" and "1 lid krijgt
+     * bericht" off the same call. Both languages change the verb as well as the noun, which
+     * is why each form is a whole sentence under its own key rather than a swapped noun.
+     *
+     * Falls back to `key` whenever the sibling is undefined, so a key that never needed a
+     * plural — or an app that has not written one yet — behaves exactly as it did before.
+     * @param map The active locale's translations.
+     * @param key The dot-notated translation key.
+     * @param params The interpolation values, inspected for `count`.
+     * @returns The key to look up: the plural sibling, or `key` itself.
+     */
+    resolvePluralKey(map, key, params) {
+        const raw = params?.[COUNT_PARAM];
+        if (raw === undefined)
+            return key;
+        // A count off a JSON payload arrives as a string often enough that comparing it
+        // strictly would silently pick the plural for a count of one.
+        const count = Number(raw);
+        if (!Number.isFinite(count))
+            return key;
+        const suffix = PLURAL_SUFFIX[this.pluralCategory(count)];
+        if (suffix === undefined)
+            return key;
+        const variant = key + suffix;
+        return this.getValueFromMap(map, variant) !== undefined ? variant : key;
+    }
+    /**
+     * The CLDR plural category of a count in the active locale.
+     * @param count The count being quoted.
+     * @returns The category, falling back to English rules for an unusable locale.
+     */
+    pluralCategory(count) {
+        if (!this._pluralRules.has(this.locale)) {
+            try {
+                this._pluralRules.set(this.locale, new Intl.PluralRules(this.locale));
+            }
+            catch {
+                // An unknown or malformed locale tag: fall back rather than break every string.
+                this._pluralRules.set(this.locale, null);
+            }
+        }
+        const rules = this._pluralRules.get(this.locale);
+        if (!rules)
+            return count === 1 ? 'one' : 'other';
+        return rules.select(count);
+    }
     /**
      * 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];
+        // A flattened bundle holds the dotted key verbatim; a nested one is walked below.
+        const direct = map[key];
+        if (typeof direct === 'string')
+            return direct;
         const parts = key.split('.');
         let current = map;
         for (const part of parts) {
@@ -4671,9 +4753,47 @@ class MnMultiSelect {
      */
     get collapseSummaryText() {
         const allSelectedTemplate = this.allSelected ? this.props.allSelectedPlaceholder : undefined;
-        const template = allSelectedTemplate ?? this.props.collapsePlaceholder ?? '{count} selected';
+        const template = allSelectedTemplate ??
+            this.props.collapsePlaceholder ??
+            this.resolveLabel(undefined, 'mnMultiSelect.selectedCount', '{count} selected');
         return template.replace(/\{count}/g, String(this.selectedOptions.length));
     }
+    /** Trigger text shown while nothing is selected. */
+    get placeholderLabel() {
+        return this.resolveLabel(this.props.placeholder, 'mnMultiSelect.placeholder', 'Select...', this.uiConfig.placeholder);
+    }
+    /**
+     * Placeholder and accessible name of the dropdown's search input.
+     *
+     * Search auto-enables at `searchThreshold` options, so this box appears without any
+     * call site opting in — which is exactly why it must be translatable without one.
+     */
+    get searchPlaceholderLabel() {
+        return this.resolveLabel(this.props.searchPlaceholder, 'mnMultiSelect.search', 'Search...', this.uiConfig.searchPlaceholder);
+    }
+    /** Empty text shown when the search filters every option away. */
+    get noOptionsLabel() {
+        return this.resolveLabel(undefined, 'mnMultiSelect.noOptions', 'No options found', this.uiConfig.noOptionsFound);
+    }
+    /**
+     * Resolves one of the component's own labels, preferring what the caller gave it
+     * and falling back through the config layer, a conventional translation key and
+     * finally a readable English default.
+     *
+     * Mirrors `MnCollectionBase.resolveLabel`. Every string this component puts on
+     * screen that is not caller data goes through here: without the key step a
+     * consumer could only translate these by repeating the same literal at every call
+     * site, which is how "Search..." ends up in English on an otherwise Dutch page.
+     *
+     * @param explicit The label the caller passed through `props`, if any.
+     * @param key The conventional translation key to try next.
+     * @param fallback The English text used when neither resolves.
+     * @param configured The value the config layer resolved, if any.
+     * @returns The resolved label.
+     */
+    resolveLabel(explicit, key, fallback, configured) {
+        return explicit ?? configured ?? this.lang.translateIfPresent(key) ?? fallback;
+    }
     handleBlur() {
         this.onTouched();
     }
@@ -4746,11 +4866,11 @@ class MnMultiSelect {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnMultiSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnMultiSelect, isStandalone: true, selector: "mn-lib-multi-select", inputs: { props: "props" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()", "window:scroll": "onWindowScrollOrResize()", "window:resize": "onWindowScrollOrResize()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "shieldRef", first: true, predicate: ["shield"], descendants: true }, { propertyName: "sheetRef", first: true, predicate: ["sheet"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    class=\"relative\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? resolvedId + '-listbox' : null\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"handleBlur()\"\n  >\n    <!-- `pr-6` reserves the gutter the caret is absolutely positioned in (right-2 +\n         w-4), so a value can never render underneath it. `min-w-0` lets the chips\n         shrink below their content width, which is what makes truncation possible. -->\n    <div class=\"flex flex-row items-center gap-x-2 flex-wrap min-h-6 min-w-0 pr-6\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-base-content/50\">{{ uiConfig.placeholder || props.placeholder || 'Select...' }}</span>\n      } @else if (isCollapsed) {\n        <span\n          class=\"inline-flex items-center max-w-full truncate bg-base-200 border border-accent text-base-content text-xs px-2 py-0.5 rounded-md\">\n          {{ collapseSummaryText }}\n        </span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <!-- Only the \u00D7 removes. The chip body deliberately carries no handler, so a click\n               anywhere on it bubbles to the trigger and just opens/closes the panel \u2014 clicking\n               the trigger to dismiss the dropdown must never silently delete a selection. -->\n          <span\n            class=\"inline-flex items-center gap-x-1 max-w-full min-w-0 bg-base-200 border border-accent text-base-content text-xs pl-2 py-0.5 rounded-md\">\n            <span [attr.title]=\"opt.label\" class=\"truncate\">{{ opt.label }}</span>\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary', hover: false }\"\n              type=\"button\"\n              class=\"text-base-content/50 cursor-pointer shrink-0\"\n              (click)=\"removeOption(opt, $event)\"\n              [attr.aria-label]=\"'Remove ' + opt.label\"\n            ><svg lucideX [size]=\"18\"></svg></button>\n          </span>\n        }\n      }\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg [size]=\"16\" class=\"text-base-content/50\" lucideChevronDown></svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    @if (isSheet) {\n      <!-- On mobile the panel is presented as a shared bottom sheet: the sheet chrome\n           (backdrop, grabber, swipe/flick-to-dismiss, slide animation) lives in\n           mn-bottom-sheet; this component only projects the field's content into it.\n           The sheet host is portalled to document.body (see the `sheet` ViewChild) so\n           its `position: fixed` anchors to the viewport, not a transformed ancestor. -->\n      <mn-bottom-sheet\n        #sheet\n        (dismiss)=\"close()\"\n        [ariaLabel]=\"uiConfig.ariaLabel || uiConfig.label || props.label || uiConfig.placeholder || props.placeholder\"\n        [maxHeightVh]=\"80\"\n        [minHeightPx]=\"sheetFloorPx\"\n      >\n        <div\n          [id]=\"resolvedId + '-listbox'\"\n          aria-multiselectable=\"true\"\n          class=\"flex flex-col flex-1 min-h-0 overflow-hidden\"\n          role=\"listbox\"\n        >\n          <!-- The sheet covers its own trigger, so it carries a header to name the field; the\n               way out is the grabber (swipe-to-dismiss) and a backdrop tap. -->\n          <div class=\"px-4 pt-1 pb-2 shrink-0\">\n            <p class=\"text-base font-medium text-base-content truncate\">\n              {{ uiConfig.label || props.label || uiConfig.placeholder || props.placeholder || '' }}\n            </p>\n          </div>\n          <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n        </div>\n      </mn-bottom-sheet>\n    } @else {\n      <!-- A transparent full-viewport shield behind the panel, so \"click anywhere to\n           dismiss\" is literally true. It also *consumes* that click: without it the click\n           reaches whatever sits underneath \u2014 inside a modal that is the modal's own\n           backdrop, so dismissing the dropdown would tear down the whole modal with it.\n           Portalled to document.body for the same reason the panel is. It is aria-hidden\n           and unfocusable: the keyboard equivalent of this click is Escape. -->\n      <div\n        #shield\n        (click)=\"onShieldClick($event)\"\n        [id]=\"resolvedId + '-shield'\"\n        [ngClass]=\"shieldClasses\"\n        aria-hidden=\"true\"\n      ></div>\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        #dropdown\n        (click)=\"$event.stopPropagation()\"\n        [id]=\"resolvedId + '-listbox'\"\n        [ngClass]=\"panelClasses\"\n        [style.left]=\"dropdownStyle.left\"\n        [style.top]=\"dropdownStyle.top\"\n        [style.width]=\"dropdownStyle.width\"\n        aria-multiselectable=\"true\"\n        role=\"listbox\"\n      >\n        <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n      </div>\n    }\n  }\n\n  <!-- The search box + option list, shared verbatim by the sheet and the anchored\n       popover. `isSheet` only tunes spacing/sizing and which element scrolls: in sheet\n       mode the list is the flex scroller; anchored, the popover itself scrolls. -->\n  <ng-template #panelBody>\n    @if (isSearchable) {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        (click)=\"$event.stopPropagation()\"\n        [ngClass]=\"isSheet ? 'px-4 py-2' : 'p-2'\"\n        class=\"border-b border-base-300 shrink-0\"\n      >\n        <mn-lib-input-field\n          (ngModelChange)=\"onSearch($event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          [ngModel]=\"searchTerm\"\n          [props]=\"{\n            id: resolvedId + '-search',\n            type: 'search',\n            placeholder: props.searchPlaceholder || 'Search...',\n            ariaLabel: props.searchPlaceholder || 'Search...',\n            fullWidth: true,\n            size: 'sm'\n          }\"\n        ></mn-lib-input-field>\n      </div>\n    }\n    <div [ngClass]=\"isSheet ? 'flex-1 overflow-auto overscroll-contain' : ''\">\n      @for (opt of filteredOptions; track opt.value) {\n        <div\n          (click)=\"toggleOption(opt); $event.stopPropagation()\"\n          (keyup.enter)=\"toggleOption(opt)\"\n          (keyup.space)=\"toggleOption(opt)\"\n          [attr.aria-selected]=\"isSelected(opt)\"\n          [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n          [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n          [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\"\n          class=\"flex items-center gap-x-2 cursor-pointer text-base-content hover:bg-base-200\"\n          role=\"option\"\n          tabindex=\"0\"\n        >\n          <input\n            [checked]=\"isSelected(opt)\"\n            [disabled]=\"opt.disabled || isMaxReached(opt)\"\n            class=\"w-4 h-4 accent-primary pointer-events-none shrink-0\"\n            tabindex=\"-1\"\n            type=\"checkbox\"\n          />\n          <span>{{ opt.label }}</span>\n        </div>\n      }\n      @if (filteredOptions.length === 0) {\n        <div [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\" class=\"text-base-content/50\">\n          {{ uiConfig.noOptionsFound || 'No options found' }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\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: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnBottomSheet, selector: "mn-bottom-sheet", inputs: ["showBackdrop", "showGrabber", "dismissible", "minHeightPx", "maxHeightVh", "containerClass", "ariaLabel", "ariaLabelledby", "growWithKeyboard", "dismissGuard"], outputs: ["dismiss"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnMultiSelect, isStandalone: true, selector: "mn-lib-multi-select", inputs: { props: "props" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()", "window:scroll": "onWindowScrollOrResize()", "window:resize": "onWindowScrollOrResize()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "shieldRef", first: true, predicate: ["shield"], descendants: true }, { propertyName: "sheetRef", first: true, predicate: ["sheet"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    class=\"relative\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? resolvedId + '-listbox' : null\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"handleBlur()\"\n  >\n    <!-- `pr-6` reserves the gutter the caret is absolutely positioned in (right-2 +\n         w-4), so a value can never render underneath it. `min-w-0` lets the chips\n         shrink below their content width, which is what makes truncation possible. -->\n    <div class=\"flex flex-row items-center gap-x-2 flex-wrap min-h-6 min-w-0 pr-6\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-base-content/50\">{{ placeholderLabel }}</span>\n      } @else if (isCollapsed) {\n        <span\n          class=\"inline-flex items-center max-w-full truncate bg-base-200 border border-accent text-base-content text-xs px-2 py-0.5 rounded-md\">\n          {{ collapseSummaryText }}\n        </span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <!-- Only the \u00D7 removes. The chip body deliberately carries no handler, so a click\n               anywhere on it bubbles to the trigger and just opens/closes the panel \u2014 clicking\n               the trigger to dismiss the dropdown must never silently delete a selection. -->\n          <span\n            class=\"inline-flex items-center gap-x-1 max-w-full min-w-0 bg-base-200 border border-accent text-base-content text-xs pl-2 py-0.5 rounded-md\">\n            <span [attr.title]=\"opt.label\" class=\"truncate\">{{ opt.label }}</span>\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary', hover: false }\"\n              type=\"button\"\n              class=\"text-base-content/50 cursor-pointer shrink-0\"\n              (click)=\"removeOption(opt, $event)\"\n              [attr.aria-label]=\"'Remove ' + opt.label\"\n            ><svg lucideX [size]=\"18\"></svg></button>\n          </span>\n        }\n      }\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg [size]=\"16\" class=\"text-base-content/50\" lucideChevronDown></svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    @if (isSheet) {\n      <!-- On mobile the panel is presented as a shared bottom sheet: the sheet chrome\n           (backdrop, grabber, swipe/flick-to-dismiss, slide animation) lives in\n           mn-bottom-sheet; this component only projects the field's content into it.\n           The sheet host is portalled to document.body (see the `sheet` ViewChild) so\n           its `position: fixed` anchors to the viewport, not a transformed ancestor. -->\n      <mn-bottom-sheet\n        #sheet\n        (dismiss)=\"close()\"\n        [ariaLabel]=\"uiConfig.ariaLabel || uiConfig.label || props.label || uiConfig.placeholder || props.placeholder\"\n        [maxHeightVh]=\"80\"\n        [minHeightPx]=\"sheetFloorPx\"\n      >\n        <div\n          [id]=\"resolvedId + '-listbox'\"\n          aria-multiselectable=\"true\"\n          class=\"flex flex-col flex-1 min-h-0 overflow-hidden\"\n          role=\"listbox\"\n        >\n          <!-- The sheet covers its own trigger, so it carries a header to name the field; the\n               way out is the grabber (swipe-to-dismiss) and a backdrop tap. -->\n          <div class=\"px-4 pt-1 pb-2 shrink-0\">\n            <p class=\"text-base font-medium text-base-content truncate\">\n              {{ uiConfig.label || props.label || uiConfig.placeholder || props.placeholder || '' }}\n            </p>\n          </div>\n          <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n        </div>\n      </mn-bottom-sheet>\n    } @else {\n      <!-- A transparent full-viewport shield behind the panel, so \"click anywhere to\n           dismiss\" is literally true. It also *consumes* that click: without it the click\n           reaches whatever sits underneath \u2014 inside a modal that is the modal's own\n           backdrop, so dismissing the dropdown would tear down the whole modal with it.\n           Portalled to document.body for the same reason the panel is. It is aria-hidden\n           and unfocusable: the keyboard equivalent of this click is Escape. -->\n      <div\n        #shield\n        (click)=\"onShieldClick($event)\"\n        [id]=\"resolvedId + '-shield'\"\n        [ngClass]=\"shieldClasses\"\n        aria-hidden=\"true\"\n      ></div>\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        #dropdown\n        (click)=\"$event.stopPropagation()\"\n        [id]=\"resolvedId + '-listbox'\"\n        [ngClass]=\"panelClasses\"\n        [style.left]=\"dropdownStyle.left\"\n        [style.top]=\"dropdownStyle.top\"\n        [style.width]=\"dropdownStyle.width\"\n        aria-multiselectable=\"true\"\n        role=\"listbox\"\n      >\n        <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n      </div>\n    }\n  }\n\n  <!-- The search box + option list, shared verbatim by the sheet and the anchored\n       popover. `isSheet` only tunes spacing/sizing and which element scrolls: in sheet\n       mode the list is the flex scroller; anchored, the popover itself scrolls. -->\n  <ng-template #panelBody>\n    @if (isSearchable) {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        (click)=\"$event.stopPropagation()\"\n        [ngClass]=\"isSheet ? 'px-4 py-2' : 'p-2'\"\n        class=\"border-b border-base-300 shrink-0\"\n      >\n        <mn-lib-input-field\n          (ngModelChange)=\"onSearch($event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          [ngModel]=\"searchTerm\"\n          [props]=\"{\n            id: resolvedId + '-search',\n            type: 'search',\n            placeholder: searchPlaceholderLabel,\n            ariaLabel: searchPlaceholderLabel,\n            fullWidth: true,\n            size: 'sm'\n          }\"\n        ></mn-lib-input-field>\n      </div>\n    }\n    <div [ngClass]=\"isSheet ? 'flex-1 overflow-auto overscroll-contain' : ''\">\n      @for (opt of filteredOptions; track opt.value) {\n        <div\n          (click)=\"toggleOption(opt); $event.stopPropagation()\"\n          (keyup.enter)=\"toggleOption(opt)\"\n          (keyup.space)=\"toggleOption(opt)\"\n          [attr.aria-selected]=\"isSelected(opt)\"\n          [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n          [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n          [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\"\n          class=\"flex items-center gap-x-2 cursor-pointer text-base-content hover:bg-base-200\"\n          role=\"option\"\n          tabindex=\"0\"\n        >\n          <input\n            [checked]=\"isSelected(opt)\"\n            [disabled]=\"opt.disabled || isMaxReached(opt)\"\n            class=\"w-4 h-4 accent-primary pointer-events-none shrink-0\"\n            tabindex=\"-1\"\n            type=\"checkbox\"\n          />\n          <span>{{ opt.label }}</span>\n        </div>\n      }\n      @if (filteredOptions.length === 0) {\n        <div [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\" class=\"text-base-content/50\">\n          {{ noOptionsLabel }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\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: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnBottomSheet, selector: "mn-bottom-sheet", inputs: ["showBackdrop", "showGrabber", "dismissible", "minHeightPx", "maxHeightVh", "containerClass", "ariaLabel", "ariaLabelledby", "growWithKeyboard", "dismissGuard"], outputs: ["dismiss"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnMultiSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-lib-multi-select', standalone: true, imports: [NgClass, NgTemplateOutlet, FormsModule, MnErrorMessage, MnButton, MnInputField, MnBottomSheet, LucideX, LucideChevronDown], template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    class=\"relative\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? resolvedId + '-listbox' : null\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"handleBlur()\"\n  >\n    <!-- `pr-6` reserves the gutter the caret is absolutely positioned in (right-2 +\n         w-4), so a value can never render underneath it. `min-w-0` lets the chips\n         shrink below their content width, which is what makes truncation possible. -->\n    <div class=\"flex flex-row items-center gap-x-2 flex-wrap min-h-6 min-w-0 pr-6\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-base-content/50\">{{ uiConfig.placeholder || props.placeholder || 'Select...' }}</span>\n      } @else if (isCollapsed) {\n        <span\n          class=\"inline-flex items-center max-w-full truncate bg-base-200 border border-accent text-base-content text-xs px-2 py-0.5 rounded-md\">\n          {{ collapseSummaryText }}\n        </span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <!-- Only the \u00D7 removes. The chip body deliberately carries no handler, so a click\n               anywhere on it bubbles to the trigger and just opens/closes the panel \u2014 clicking\n               the trigger to dismiss the dropdown must never silently delete a selection. -->\n          <span\n            class=\"inline-flex items-center gap-x-1 max-w-full min-w-0 bg-base-200 border border-accent text-base-content text-xs pl-2 py-0.5 rounded-md\">\n            <span [attr.title]=\"opt.label\" class=\"truncate\">{{ opt.label }}</span>\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary', hover: false }\"\n              type=\"button\"\n              class=\"text-base-content/50 cursor-pointer shrink-0\"\n              (click)=\"removeOption(opt, $event)\"\n              [attr.aria-label]=\"'Remove ' + opt.label\"\n            ><svg lucideX [size]=\"18\"></svg></button>\n          </span>\n        }\n      }\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg [size]=\"16\" class=\"text-base-content/50\" lucideChevronDown></svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    @if (isSheet) {\n      <!-- On mobile the panel is presented as a shared bottom sheet: the sheet chrome\n           (backdrop, grabber, swipe/flick-to-dismiss, slide animation) lives in\n           mn-bottom-sheet; this component only projects the field's content into it.\n           The sheet host is portalled to document.body (see the `sheet` ViewChild) so\n           its `position: fixed` anchors to the viewport, not a transformed ancestor. -->\n      <mn-bottom-sheet\n        #sheet\n        (dismiss)=\"close()\"\n        [ariaLabel]=\"uiConfig.ariaLabel || uiConfig.label || props.label || uiConfig.placeholder || props.placeholder\"\n        [maxHeightVh]=\"80\"\n        [minHeightPx]=\"sheetFloorPx\"\n      >\n        <div\n          [id]=\"resolvedId + '-listbox'\"\n          aria-multiselectable=\"true\"\n          class=\"flex flex-col flex-1 min-h-0 overflow-hidden\"\n          role=\"listbox\"\n        >\n          <!-- The sheet covers its own trigger, so it carries a header to name the field; the\n               way out is the grabber (swipe-to-dismiss) and a backdrop tap. -->\n          <div class=\"px-4 pt-1 pb-2 shrink-0\">\n            <p class=\"text-base font-medium text-base-content truncate\">\n              {{ uiConfig.label || props.label || uiConfig.placeholder || props.placeholder || '' }}\n            </p>\n          </div>\n          <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n        </div>\n      </mn-bottom-sheet>\n    } @else {\n      <!-- A transparent full-viewport shield behind the panel, so \"click anywhere to\n           dismiss\" is literally true. It also *consumes* that click: without it the click\n           reaches whatever sits underneath \u2014 inside a modal that is the modal's own\n           backdrop, so dismissing the dropdown would tear down the whole modal with it.\n           Portalled to document.body for the same reason the panel is. It is aria-hidden\n           and unfocusable: the keyboard equivalent of this click is Escape. -->\n      <div\n        #shield\n        (click)=\"onShieldClick($event)\"\n        [id]=\"resolvedId + '-shield'\"\n        [ngClass]=\"shieldClasses\"\n        aria-hidden=\"true\"\n      ></div>\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        #dropdown\n        (click)=\"$event.stopPropagation()\"\n        [id]=\"resolvedId + '-listbox'\"\n        [ngClass]=\"panelClasses\"\n        [style.left]=\"dropdownStyle.left\"\n        [style.top]=\"dropdownStyle.top\"\n        [style.width]=\"dropdownStyle.width\"\n        aria-multiselectable=\"true\"\n        role=\"listbox\"\n      >\n        <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n      </div>\n    }\n  }\n\n  <!-- The search box + option list, shared verbatim by the sheet and the anchored\n       popover. `isSheet` only tunes spacing/sizing and which element scrolls: in sheet\n       mode the list is the flex scroller; anchored, the popover itself scrolls. -->\n  <ng-template #panelBody>\n    @if (isSearchable) {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        (click)=\"$event.stopPropagation()\"\n        [ngClass]=\"isSheet ? 'px-4 py-2' : 'p-2'\"\n        class=\"border-b border-base-300 shrink-0\"\n      >\n        <mn-lib-input-field\n          (ngModelChange)=\"onSearch($event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          [ngModel]=\"searchTerm\"\n          [props]=\"{\n            id: resolvedId + '-search',\n            type: 'search',\n            placeholder: props.searchPlaceholder || 'Search...',\n            ariaLabel: props.searchPlaceholder || 'Search...',\n            fullWidth: true,\n            size: 'sm'\n          }\"\n        ></mn-lib-input-field>\n      </div>\n    }\n    <div [ngClass]=\"isSheet ? 'flex-1 overflow-auto overscroll-contain' : ''\">\n      @for (opt of filteredOptions; track opt.value) {\n        <div\n          (click)=\"toggleOption(opt); $event.stopPropagation()\"\n          (keyup.enter)=\"toggleOption(opt)\"\n          (keyup.space)=\"toggleOption(opt)\"\n          [attr.aria-selected]=\"isSelected(opt)\"\n          [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n          [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n          [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\"\n          class=\"flex items-center gap-x-2 cursor-pointer text-base-content hover:bg-base-200\"\n          role=\"option\"\n          tabindex=\"0\"\n        >\n          <input\n            [checked]=\"isSelected(opt)\"\n            [disabled]=\"opt.disabled || isMaxReached(opt)\"\n            class=\"w-4 h-4 accent-primary pointer-events-none shrink-0\"\n            tabindex=\"-1\"\n            type=\"checkbox\"\n          />\n          <span>{{ opt.label }}</span>\n        </div>\n      }\n      @if (filteredOptions.length === 0) {\n        <div [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\" class=\"text-base-content/50\">\n          {{ uiConfig.noOptionsFound || 'No options found' }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n" }]
+            args: [{ selector: 'mn-lib-multi-select', standalone: true, imports: [NgClass, NgTemplateOutlet, FormsModule, MnErrorMessage, MnButton, MnInputField, MnBottomSheet, LucideX, LucideChevronDown], template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    class=\"relative\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? resolvedId + '-listbox' : null\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"handleBlur()\"\n  >\n    <!-- `pr-6` reserves the gutter the caret is absolutely positioned in (right-2 +\n         w-4), so a value can never render underneath it. `min-w-0` lets the chips\n         shrink below their content width, which is what makes truncation possible. -->\n    <div class=\"flex flex-row items-center gap-x-2 flex-wrap min-h-6 min-w-0 pr-6\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-base-content/50\">{{ placeholderLabel }}</span>\n      } @else if (isCollapsed) {\n        <span\n          class=\"inline-flex items-center max-w-full truncate bg-base-200 border border-accent text-base-content text-xs px-2 py-0.5 rounded-md\">\n          {{ collapseSummaryText }}\n        </span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <!-- Only the \u00D7 removes. The chip body deliberately carries no handler, so a click\n               anywhere on it bubbles to the trigger and just opens/closes the panel \u2014 clicking\n               the trigger to dismiss the dropdown must never silently delete a selection. -->\n          <span\n            class=\"inline-flex items-center gap-x-1 max-w-full min-w-0 bg-base-200 border border-accent text-base-content text-xs pl-2 py-0.5 rounded-md\">\n            <span [attr.title]=\"opt.label\" class=\"truncate\">{{ opt.label }}</span>\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary', hover: false }\"\n              type=\"button\"\n              class=\"text-base-content/50 cursor-pointer shrink-0\"\n              (click)=\"removeOption(opt, $event)\"\n              [attr.aria-label]=\"'Remove ' + opt.label\"\n            ><svg lucideX [size]=\"18\"></svg></button>\n          </span>\n        }\n      }\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg [size]=\"16\" class=\"text-base-content/50\" lucideChevronDown></svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    @if (isSheet) {\n      <!-- On mobile the panel is presented as a shared bottom sheet: the sheet chrome\n           (backdrop, grabber, swipe/flick-to-dismiss, slide animation) lives in\n           mn-bottom-sheet; this component only projects the field's content into it.\n           The sheet host is portalled to document.body (see the `sheet` ViewChild) so\n           its `position: fixed` anchors to the viewport, not a transformed ancestor. -->\n      <mn-bottom-sheet\n        #sheet\n        (dismiss)=\"close()\"\n        [ariaLabel]=\"uiConfig.ariaLabel || uiConfig.label || props.label || uiConfig.placeholder || props.placeholder\"\n        [maxHeightVh]=\"80\"\n        [minHeightPx]=\"sheetFloorPx\"\n      >\n        <div\n          [id]=\"resolvedId + '-listbox'\"\n          aria-multiselectable=\"true\"\n          class=\"flex flex-col flex-1 min-h-0 overflow-hidden\"\n          role=\"listbox\"\n        >\n          <!-- The sheet covers its own trigger, so it carries a header to name the field; the\n               way out is the grabber (swipe-to-dismiss) and a backdrop tap. -->\n          <div class=\"px-4 pt-1 pb-2 shrink-0\">\n            <p class=\"text-base font-medium text-base-content truncate\">\n              {{ uiConfig.label || props.label || uiConfig.placeholder || props.placeholder || '' }}\n            </p>\n          </div>\n          <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n        </div>\n      </mn-bottom-sheet>\n    } @else {\n      <!-- A transparent full-viewport shield behind the panel, so \"click anywhere to\n           dismiss\" is literally true. It also *consumes* that click: without it the click\n           reaches whatever sits underneath \u2014 inside a modal that is the modal's own\n           backdrop, so dismissing the dropdown would tear down the whole modal with it.\n           Portalled to document.body for the same reason the panel is. It is aria-hidden\n           and unfocusable: the keyboard equivalent of this click is Escape. -->\n      <div\n        #shield\n        (click)=\"onShieldClick($event)\"\n        [id]=\"resolvedId + '-shield'\"\n        [ngClass]=\"shieldClasses\"\n        aria-hidden=\"true\"\n      ></div>\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        #dropdown\n        (click)=\"$event.stopPropagation()\"\n        [id]=\"resolvedId + '-listbox'\"\n        [ngClass]=\"panelClasses\"\n        [style.left]=\"dropdownStyle.left\"\n        [style.top]=\"dropdownStyle.top\"\n        [style.width]=\"dropdownStyle.width\"\n        aria-multiselectable=\"true\"\n        role=\"listbox\"\n      >\n        <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n      </div>\n    }\n  }\n\n  <!-- The search box + option list, shared verbatim by the sheet and the anchored\n       popover. `isSheet` only tunes spacing/sizing and which element scrolls: in sheet\n       mode the list is the flex scroller; anchored, the popover itself scrolls. -->\n  <ng-template #panelBody>\n    @if (isSearchable) {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        (click)=\"$event.stopPropagation()\"\n        [ngClass]=\"isSheet ? 'px-4 py-2' : 'p-2'\"\n        class=\"border-b border-base-300 shrink-0\"\n      >\n        <mn-lib-input-field\n          (ngModelChange)=\"onSearch($event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          [ngModel]=\"searchTerm\"\n          [props]=\"{\n            id: resolvedId + '-search',\n            type: 'search',\n            placeholder: searchPlaceholderLabel,\n            ariaLabel: searchPlaceholderLabel,\n            fullWidth: true,\n            size: 'sm'\n          }\"\n        ></mn-lib-input-field>\n      </div>\n    }\n    <div [ngClass]=\"isSheet ? 'flex-1 overflow-auto overscroll-contain' : ''\">\n      @for (opt of filteredOptions; track opt.value) {\n        <div\n          (click)=\"toggleOption(opt); $event.stopPropagation()\"\n          (keyup.enter)=\"toggleOption(opt)\"\n          (keyup.space)=\"toggleOption(opt)\"\n          [attr.aria-selected]=\"isSelected(opt)\"\n          [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n          [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n          [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\"\n          class=\"flex items-center gap-x-2 cursor-pointer text-base-content hover:bg-base-200\"\n          role=\"option\"\n          tabindex=\"0\"\n        >\n          <input\n            [checked]=\"isSelected(opt)\"\n            [disabled]=\"opt.disabled || isMaxReached(opt)\"\n            class=\"w-4 h-4 accent-primary pointer-events-none shrink-0\"\n            tabindex=\"-1\"\n            type=\"checkbox\"\n          />\n          <span>{{ opt.label }}</span>\n        </div>\n      }\n      @if (filteredOptions.length === 0) {\n        <div [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\" class=\"text-base-content/50\">\n          {{ noOptionsLabel }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input,
                 args: [{ required: true }]
@@ -5599,18 +5719,89 @@ const mnSelectVariants = tv({
 });
 
 const MN_SELECT_CONFIG = new InjectionToken('MN_SELECT_CONFIG');
+/**
+ * A single-value picker. The trigger opens a `role="listbox"` of {@link MnSelectOption}s;
+ * choosing one sets the value and closes — this is the value-picker twin of the ⋯
+ * command menu mn-dropdown, so it *is* a ControlValueAccessor.
+ *
+ * Presentation mirrors mn-multi-select: one custom field trigger at every size, an
+ * anchored popover on desktop and the shared {@link MnBottomSheet} on mobile (< 640px) —
+ * the same sheet mn-dropdown itself wraps. Both the popover and the sheet host are
+ * portalled to `document.body` so their `position: fixed` anchors to the viewport rather
+ * than any transformed/filtered ancestor (a table cell, a card) — the same root-cause fix
+ * the multi-select applies.
+ */
 class MnSelect {
     ngControl = inject(NgControl, { optional: true, self: true });
     props;
     /** Currently selected value */
     selectedValue = null;
+    isOpen = false;
     isDisabled = false;
+    searchTerm = '';
     uiConfig = {};
     configService = inject(MnConfigService);
     sectionPath = inject(MN_SECTION_PATH, { optional: true }) ?? [];
     explicitInstanceId = inject(MN_INSTANCE_ID, { optional: true });
+    elRef = inject(ElementRef);
     lang = inject(MnLanguageService);
     destroyRef = inject(DestroyRef);
+    renderer = inject(Renderer2);
+    cdr = inject(ChangeDetectorRef);
+    /** Lucide data for the trailing check shown on the selected row. */
+    checkIcon = LucideCheck.icon;
+    /** Reference to the trigger element for positioning the dropdown. */
+    triggerRef;
+    /** Layout classes for the anchored popover panel. The mobile sheet is rendered by
+     *  mn-bottom-sheet instead, so it no longer needs a branch here. */
+    panelClasses = 'fixed z-9999 bg-base-100 border border-base-300 rounded-md shadow-lg max-h-60 overflow-auto';
+    /** Layout classes for the invisible click shield rendered under the anchored panel.
+     *  One step below the panel's z-index so the panel itself stays clickable, and above
+     *  any modal/drawer chrome (which tops out well under 9998). */
+    shieldClasses = 'fixed inset-0 z-9998';
+    /** Option count at which the search input auto-enables when `searchable` is unset. */
+    static DEFAULT_SEARCH_THRESHOLD = 8;
+    /** Tailwind's `sm` breakpoint — below this the panel renders as a bottom sheet.
+     *  Kept in step with the same constant in mn-bottom-sheet / mn-multi-select. */
+    static SHEET_MAX_WIDTH = 639.98;
+    /** The anchored popover panel currently moved into `document.body`, if any. */
+    movedPanel = null;
+    /** The click shield currently moved into `document.body`, if any. */
+    movedShield = null;
+    /** The bottom-sheet host, for outside-click tests. The sheet owns its own placement. */
+    sheetHost = null;
+    /** Whether the viewport is currently narrow enough for the sheet layout. */
+    isNarrowViewport = false;
+    /** Live breakpoint match, so rotating the device re-evaluates the layout. */
+    sheetMedia = null;
+    /** The listener registered on `sheetMedia`, retained for teardown. */
+    sheetMediaListener = null;
+    /** `document.body`'s inline `overflow` before the sheet locked it, restored on close. */
+    previousBodyOverflow = null;
+    /**
+     * The sheet's height (px) captured the moment it opened, before any search. Re-applied
+     * as a `min-height` floor so filtering the option list shorter cannot shrink the sheet
+     * mid-type. Null while anchored or closed, so the popover and desktop path are untouched.
+     */
+    sheetFloorPx = null;
+    /**
+     * Watches the trigger while the panel is open. The panel lives in `document.body`, so it
+     * survives its own trigger being hidden by an ancestor — a wizard step or a tab switched
+     * away with `display: none`. When the trigger stops being visible the panel goes with it.
+     */
+    visibilityObserver = null;
+    /**
+     * Capture-phase scroll listener installed while open. `window:scroll` only fires for the
+     * document scroller, so scrolling an inner container (a modal body, a scrollable card)
+     * would otherwise leave the portalled panel floating at its stale coordinates.
+     */
+    scrollCapture = null;
+    /** Dropdown position calculated from the trigger's bounding rect. */
+    dropdownStyle = { top: '0px', left: '0px', width: '0px' };
+    onChange = () => {
+    };
+    onTouched = () => {
+    };
     builtInErrorMessages = {
         required: 'Please select an option',
     };
@@ -5618,12 +5809,80 @@ class MnSelect {
         if (this.ngControl)
             this.ngControl.valueAccessor = this;
     }
-    get selectedOption() {
-        return this.props.options.find(o => o.value === this.selectedValue);
+    /**
+     * The dropdown panel element, queried while it is rendered by the `@if` block. The setter
+     * relocates the panel to `document.body` so that its `position: fixed` coordinates resolve
+     * against the viewport rather than any transformed/filtered ancestor (which would otherwise
+     * become the containing block and push the panel to the middle of the screen — also broken
+     * on iOS). Cleanup is handled when the query clears on close/destroy.
+     */
+    set dropdownRef(ref) {
+        this.movedPanel = this.portal(ref?.nativeElement ?? null, this.movedPanel);
+    }
+    /**
+     * The click shield sitting under the anchored panel, portalled alongside it for the same
+     * reason: `position: fixed` must resolve against the viewport, not a transformed ancestor.
+     */
+    set shieldRef(ref) {
+        this.movedShield = this.portal(ref?.nativeElement ?? null, this.movedShield);
+    }
+    /**
+     * The bottom-sheet host, kept as a reference for outside-click tests. The sheet relocates
+     * itself to `document.body`, so nothing is moved here. On open its container height is
+     * captured as the sheet's `min-height` floor.
+     */
+    set sheetRef(ref) {
+        const el = ref?.nativeElement ?? null;
+        this.sheetHost = el;
+        if (el) {
+            this.captureSheetFloor(el);
+        }
+        else {
+            this.sheetFloorPx = null;
+        }
     }
     get control() {
         return this.ngControl?.control ?? null;
     }
+    get selectedOption() {
+        return this.props.options.find(o => o.value === this.selectedValue);
+    }
+    /** The label shown in the trigger: the selected option, else the placeholder. */
+    get displayText() {
+        return this.selectedOption?.label ?? this.placeholderLabel;
+    }
+    /** Trigger text shown while no option is selected. */
+    get placeholderLabel() {
+        return this.resolveLabel(this.props.placeholder, 'mnSelect.placeholder', 'Select...', this.uiConfig.placeholder);
+    }
+    /** Placeholder and accessible name of the dropdown's search input. */
+    get searchPlaceholderLabel() {
+        return this.resolveLabel(this.props.searchPlaceholder, 'mnSelect.search', 'Search...', this.uiConfig.searchPlaceholder);
+    }
+    /** Empty text shown when the search filters every option away. */
+    get noOptionsLabel() {
+        return this.resolveLabel(undefined, 'mnSelect.noOptions', 'No options found', this.uiConfig.noOptionsFound);
+    }
+    /**
+     * Resolves one of the component's own labels, preferring what the caller gave it
+     * and falling back through the config layer, a conventional translation key and
+     * finally a readable English default.
+     *
+     * Mirrors `MnCollectionBase.resolveLabel` and its twin in `MnMultiSelect`. Without
+     * the key step a consumer could only translate these by repeating the same literal
+     * at every call site, and the search box in particular auto-enables on option
+     * count — it appears without anyone asking for it, so it must be translatable
+     * without anyone asking either.
+     *
+     * @param explicit The label the caller passed through `props`, if any.
+     * @param key The conventional translation key to try next.
+     * @param fallback The English text used when neither resolves.
+     * @param configured The value the config layer resolved, if any.
+     * @returns The resolved label.
+     */
+    resolveLabel(explicit, key, fallback, configured) {
+        return explicit ?? configured ?? this.lang.translateIfPresent(key) ?? fallback;
+    }
     get showError() {
         const c = this.control;
         return !!c && c.invalid && (c.touched || c.dirty);
@@ -5634,7 +5893,6 @@ class MnSelect {
             return [];
         return Object.keys(errors).map(key => this.resolveErrorMessageForKey(key, errors));
     }
-    // ========== ControlValueAccessor Implementation ==========
     get errorMessage() {
         const errors = this.control?.errors;
         if (!errors)
@@ -5648,7 +5906,7 @@ class MnSelect {
     get resolvedName() {
         return this.props?.name ?? null;
     }
-    get selectClasses() {
+    get triggerClasses() {
         return mnSelectVariants({
             size: this.props.size,
             borderRadius: this.props.borderRadius,
@@ -5656,16 +5914,47 @@ class MnSelect {
             fullWidth: this.props.fullWidth,
         });
     }
-    // ========== Select Logic ==========
+    /** Whether the panel should currently render as a bottom sheet. */
+    get isSheet() {
+        return this.props.mobileSheet !== false && this.isNarrowViewport;
+    }
+    /**
+     * Whether the search input is shown: the explicit `searchable` prop when set, otherwise
+     * auto-enabled once the option count reaches the threshold.
+     */
+    get isSearchable() {
+        if (this.props.searchable !== undefined)
+            return this.props.searchable;
+        const threshold = this.props.searchThreshold ?? MnSelect.DEFAULT_SEARCH_THRESHOLD;
+        return this.props.options.length >= threshold;
+    }
+    get filteredOptions() {
+        if (!this.searchTerm)
+            return this.props.options;
+        const lower = this.searchTerm.toLowerCase();
+        return this.props.options.filter(o => o.label.toLowerCase().includes(lower));
+    }
+    // ========== Lifecycle ==========
     ngOnInit() {
         this.resolveConfig();
+        this.startWatchingViewport();
         const sub = this.lang.locale$.pipe(skip(1)).subscribe(() => {
             this.resolveConfig();
         });
-        this.destroyRef.onDestroy(() => sub.unsubscribe());
+        this.destroyRef.onDestroy(() => {
+            sub.unsubscribe();
+            this.stopWatchingTrigger();
+            this.stopWatchingViewport();
+            this.unlockBodyScroll();
+            // Guarantee the portalled elements never outlive the component.
+            this.movedPanel = this.portal(null, this.movedPanel);
+            this.movedShield = this.portal(null, this.movedShield);
+            this.sheetHost = null;
+        });
     }
+    // ========== ControlValueAccessor Implementation ==========
     writeValue(val) {
-        // Treat empty string as null so the placeholder is shown and the control stays properly invalid
+        // Treat empty string as null so the placeholder is shown and the control stays properly invalid.
         this.selectedValue = (val === '' || val == null) ? null : val;
     }
     registerOnChange(fn) {
@@ -5677,42 +5966,258 @@ class MnSelect {
     setDisabledState(isDisabled) {
         this.isDisabled = isDisabled;
     }
-    // ========== Error Handling ==========
-    /** Returns the index of an option, used as the <option> value attribute */
-    optionIndex(option) {
-        return String(this.props.options.indexOf(option));
-    }
-    /** Handles native select change event */
-    onSelectChange(event) {
-        const target = event.target;
-        const index = parseInt(target.value, 10);
-        if (isNaN(index) || index < 0 || index >= this.props.options.length) {
-            this.selectedValue = null;
-            this.onChange(null);
+    // ========== Dropdown Logic ==========
+    toggle() {
+        if (this.isDisabled)
+            return;
+        if (this.isOpen) {
+            this.close();
             return;
         }
-        const option = this.props.options[index];
+        this.isOpen = true;
+        if (this.isSheet) {
+            // A sheet is anchored to the viewport, so it needs no trigger tracking — only a
+            // scroll lock so the page behind it stays put while the list is scrolled.
+            this.lockBodyScroll();
+            return;
+        }
+        this.updateDropdownPosition();
+        this.startWatchingTrigger();
+    }
+    /** Selects an option, notifies the form and closes — a single choice ends the interaction. */
+    selectOption(option) {
         if (option.disabled)
             return;
         this.selectedValue = option.value;
         this.onChange(this.selectedValue);
+        this.close();
     }
     isSelected(option) {
         return this.selectedValue === option.value;
     }
+    onSearch(term) {
+        this.searchTerm = term ?? '';
+    }
+    /**
+     * The single close path. Every trigger (outside click, Escape, scroll, resize, the trigger
+     * being hidden, a choice) funnels through here so the open-only listeners are always torn
+     * down with the panel and never leak.
+     */
+    close() {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this.searchTerm = '';
+        this.stopWatchingTrigger();
+        this.unlockBodyScroll();
+    }
     handleBlur() {
         this.onTouched();
     }
+    /**
+     * Dismisses the anchored panel from a shield click, and stops the event there.
+     *
+     * Swallowing it is the point: the shield spans the viewport, so the click would otherwise
+     * land on whatever the panel was floating over. Inside a modal that is the modal's own
+     * backdrop, and "close the dropdown" would double as "throw away the modal". A first click
+     * that only dismisses the overlay is also how native selects and menus behave.
+     */
+    onShieldClick(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.close();
+    }
+    onDocumentClick(event) {
+        const target = event.target;
+        // The panel lives at the body root once open, so it is not a descendant of the host
+        // element — treat clicks inside the portalled panel as "inside" too.
+        const insideHost = !!target && this.elRef.nativeElement.contains(target);
+        const insidePanel = !!target && !!this.movedPanel && this.movedPanel.contains(target);
+        // In sheet mode the backdrop tap is handled by mn-bottom-sheet's own (dismiss); the
+        // sheet host counts as "inside" here so this listener never double-fires the close.
+        const insideSheet = !!target && !!this.sheetHost && this.sheetHost.contains(target);
+        if (!insideHost && !insidePanel && !insideSheet) {
+            this.close();
+        }
+    }
+    /** Closes the dropdown on Escape for keyboard accessibility. */
+    onEscape() {
+        this.close();
+    }
+    /**
+     * Closes the dropdown when the page or a scrollable parent is scrolled.
+     *
+     * Skipped for a sheet: it is anchored to the viewport, not to the trigger, so it has no
+     * stale position to escape. Crucially, opening the soft keyboard fires a `resize` on
+     * Android — closing on that would dismiss the sheet the instant search is focused. A
+     * genuine layout switch is handled by the `matchMedia` listener instead.
+     */
+    onWindowScrollOrResize() {
+        if (this.isSheet)
+            return;
+        this.close();
+    }
     isRequired() {
         if (!this.control)
             return false;
         return this.control.hasValidator(Validators.required);
     }
-    onChange = () => {
-    };
-    onTouched = () => {
-    };
-    // ========== Resolved Properties ==========
+    // ========== Viewport / breakpoint watching ==========
+    /**
+     * Tracks the sheet breakpoint through `matchMedia` rather than reading `innerWidth` once,
+     * so rotating the device switches layout instead of leaving a panel positioned for the
+     * previous orientation. An open panel is closed on the switch — its anchored coordinates
+     * and its sheet layout are not interchangeable.
+     */
+    startWatchingViewport() {
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
+            return;
+        this.sheetMedia = window.matchMedia(`(max-width: ${MnSelect.SHEET_MAX_WIDTH}px)`);
+        this.isNarrowViewport = this.sheetMedia.matches;
+        this.sheetMediaListener = (event) => {
+            this.isNarrowViewport = event.matches;
+            this.close();
+            // The listener fires outside Angular, so a zoneless app needs an explicit nudge.
+            this.cdr.markForCheck();
+        };
+        this.sheetMedia.addEventListener('change', this.sheetMediaListener);
+    }
+    /** Tears down the breakpoint listener. Idempotent. */
+    stopWatchingViewport() {
+        if (this.sheetMedia && this.sheetMediaListener) {
+            this.sheetMedia.removeEventListener('change', this.sheetMediaListener);
+        }
+        this.sheetMedia = null;
+        this.sheetMediaListener = null;
+    }
+    // ========== Body scroll lock (sheet only) ==========
+    /**
+     * Freezes the page behind an open sheet. The previous inline value is captured and restored
+     * verbatim so a surrounding modal that set its own lock is left intact.
+     */
+    lockBodyScroll() {
+        if (this.previousBodyOverflow !== null)
+            return;
+        this.previousBodyOverflow = document.body.style.overflow;
+        this.renderer.setStyle(document.body, 'overflow', 'hidden');
+    }
+    /** Restores the pre-lock `overflow`. Idempotent. */
+    unlockBodyScroll() {
+        if (this.previousBodyOverflow === null)
+            return;
+        if (this.previousBodyOverflow) {
+            this.renderer.setStyle(document.body, 'overflow', this.previousBodyOverflow);
+        }
+        else {
+            this.renderer.removeStyle(document.body, 'overflow');
+        }
+        this.previousBodyOverflow = null;
+    }
+    // ========== Positioning ==========
+    /** Calculates the fixed position for the dropdown based on the trigger element. */
+    updateDropdownPosition() {
+        if (!this.triggerRef)
+            return;
+        const rect = this.triggerRef.nativeElement.getBoundingClientRect();
+        this.dropdownStyle = {
+            top: `${rect.bottom}px`,
+            left: `${rect.left}px`,
+            width: `${rect.width}px`,
+        };
+    }
+    /**
+     * Starts the open-only watchers: an `IntersectionObserver` on the trigger (closes the panel
+     * as soon as the trigger stops being rendered/visible) and a capture-phase `scroll` listener
+     * (closes it when any ancestor scroller moves under it). Scrolls that originate inside the
+     * panel's own option list are ignored.
+     */
+    startWatchingTrigger() {
+        this.stopWatchingTrigger();
+        const trigger = this.triggerRef?.nativeElement;
+        if (trigger && typeof IntersectionObserver !== 'undefined') {
+            this.visibilityObserver = new IntersectionObserver(entries => {
+                if (!entries.some(entry => !entry.isIntersecting))
+                    return;
+                this.close();
+                // The observer fires outside Angular, so a zoneless app needs an explicit nudge.
+                this.cdr.markForCheck();
+            });
+            this.visibilityObserver.observe(trigger);
+        }
+        this.scrollCapture = (event) => {
+            const target = event.target;
+            if (target && this.movedPanel && (this.movedPanel === target || this.movedPanel.contains(target))) {
+                return;
+            }
+            this.close();
+            this.cdr.markForCheck();
+        };
+        document.addEventListener('scroll', this.scrollCapture, true);
+    }
+    /** Tears down the watchers installed by `startWatchingTrigger`. Idempotent. */
+    stopWatchingTrigger() {
+        this.visibilityObserver?.disconnect();
+        this.visibilityObserver = null;
+        if (this.scrollCapture) {
+            document.removeEventListener('scroll', this.scrollCapture, true);
+            this.scrollCapture = null;
+        }
+    }
+    // ========== Sheet height floor ==========
+    /**
+     * Records the sheet's opened height as its `min-height` floor. Measured on the next frame
+     * so the read reflects the fully-rendered, unfiltered list (the search box is empty on
+     * open) and never forces a reflow mid change-detection. The floor equals the content height
+     * at that instant, so applying it triggers no resize — it only stops a later, shorter
+     * filtered list from pulling the sheet down.
+     *
+     * `hostEl` is the portalled mn-bottom-sheet host (`display: contents`), so the height is
+     * read from its `.mn-sheet-container` child rather than the host itself.
+     */
+    captureSheetFloor(hostEl) {
+        const measure = () => {
+            const container = hostEl.querySelector('.mn-sheet-container');
+            return container?.offsetHeight ?? hostEl.offsetHeight;
+        };
+        if (typeof requestAnimationFrame !== 'function') {
+            this.sheetFloorPx = measure();
+            return;
+        }
+        requestAnimationFrame(() => {
+            // The sheet may have closed before the frame ran; don't strand a stale floor.
+            if (!this.isOpen || this.sheetHost !== hostEl)
+                return;
+            this.sheetFloorPx = measure();
+            this.cdr.markForCheck();
+        });
+    }
+    // ========== Portal helper (see mn-multi-select for the full rationale) ==========
+    /**
+     * Move an overlay element to `document.body` when it appears, and detach it when the query
+     * clears. Appending to the body root makes the element immune to ancestor
+     * `transform`/`filter`/`will-change`, so `position: fixed` anchors to the viewport — without
+     * this the panel lands mid-screen (and breaks outright on iOS).
+     *
+     * Returns the element now portalled, so the caller can store it. Idempotent and safe to
+     * call with `null`.
+     */
+    portal(el, current) {
+        if (el) {
+            if (current === el)
+                return current;
+            this.renderer.appendChild(document.body, el);
+            return el;
+        }
+        if (current) {
+            // Angular's view teardown may already have removed it; only detach if still attached.
+            const parent = current.parentNode;
+            if (parent) {
+                this.renderer.removeChild(parent, current);
+            }
+        }
+        return null;
+    }
+    // ========== Config / Error Handling ==========
     resolveConfig() {
         const instanceId = this.explicitInstanceId || `mn-select-${this.props.id}`;
         this.uiConfig = this.configService.resolve('mn-select', this.sectionPath, instanceId);
@@ -5750,20 +6255,44 @@ class MnSelect {
         return msgDef;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnSelect, isStandalone: true, selector: "mn-lib-select", inputs: { props: "props" }, host: { properties: { "style.display": "props?.fullWidth ? 'block' : null", "style.width": "props?.fullWidth ? '100%' : null" } }, ngImport: i0, template: "<div [class.is-fullwidth]=\"props.fullWidth\" class=\"flex flex-col h-full\">\n  @if (uiConfig.label || props.label) {\n    <label [attr.for]=\"resolvedId\" class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <select\n    (blur)=\"handleBlur()\"\n    (change)=\"onSelectChange($event)\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [disabled]=\"isDisabled\"\n    [id]=\"resolvedId\"\n    [name]=\"resolvedName\"\n    [ngClass]=\"selectClasses\"\n  >\n    @if (props.placeholder || uiConfig.placeholder) {\n      <option [selected]=\"selectedValue === null\" [value]=\"''\" disabled>\n        {{ uiConfig.placeholder || props.placeholder }}\n      </option>\n    }\n    @for (opt of props.options; track opt.value) {\n      <option\n        [disabled]=\"opt.disabled\"\n        [selected]=\"isSelected(opt)\"\n        [value]=\"optionIndex(opt)\"\n      >{{ opt.label }}\n      </option>\n    }\n  </select>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnSelect, isStandalone: true, selector: "mn-lib-select", inputs: { props: "props" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()", "window:scroll": "onWindowScrollOrResize()", "window:resize": "onWindowScrollOrResize()" }, properties: { "style.display": "props?.fullWidth ? 'block' : null", "style.width": "props?.fullWidth ? '100%' : null" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "shieldRef", first: true, predicate: ["shield"], descendants: true }, { propertyName: "sheetRef", first: true, predicate: ["sheet"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div [class.is-fullwidth]=\"props.fullWidth\" class=\"flex flex-col h-full\">\n  @if (uiConfig.label || props.label) {\n    <label [attr.for]=\"resolvedId\" class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    (blur)=\"handleBlur()\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    [attr.aria-controls]=\"isOpen ? resolvedId + '-listbox' : null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-disabled]=\"isDisabled || null\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [class.cursor-not-allowed]=\"isDisabled\"\n    [class.opacity-60]=\"isDisabled\"\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    [tabindex]=\"isDisabled ? -1 : 0\"\n    aria-haspopup=\"listbox\"\n    class=\"relative\"\n    role=\"combobox\"\n  >\n    <!-- `pr-6` reserves the gutter the caret is absolutely positioned in (right-2 + w-4),\n         so the value can never render underneath it. `min-w-0` lets the label shrink below\n         its content width, which is what makes truncation possible. -->\n    <div class=\"flex flex-row items-center min-h-6 min-w-0 pr-6\">\n      <span\n        [attr.title]=\"selectedOption?.label\"\n        [ngClass]=\"selectedOption ? 'text-base-content' : 'text-base-content/50'\"\n        class=\"truncate\"\n      >{{ displayText }}</span>\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg [size]=\"16\" class=\"text-base-content/50\" lucideChevronDown></svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    @if (isSheet) {\n      <!-- On mobile the panel is presented as a shared bottom sheet: the sheet chrome\n           (backdrop, grabber, swipe/flick-to-dismiss, slide animation) lives in\n           mn-bottom-sheet; this component only projects the field's content into it. The\n           sheet host is portalled to document.body (see the `sheet` ViewChild) so its\n           `position: fixed` anchors to the viewport, not a transformed ancestor. -->\n      <mn-bottom-sheet\n        #sheet\n        (dismiss)=\"close()\"\n        [ariaLabel]=\"uiConfig.ariaLabel || uiConfig.label || props.label || uiConfig.placeholder || props.placeholder\"\n        [maxHeightVh]=\"80\"\n        [minHeightPx]=\"sheetFloorPx\"\n      >\n        <div\n          [id]=\"resolvedId + '-listbox'\"\n          class=\"flex flex-col flex-1 min-h-0 overflow-hidden\"\n          role=\"listbox\"\n        >\n          <!-- The sheet covers its own trigger, so it carries a header to name the field; the\n               way out is the grabber (swipe-to-dismiss) and a backdrop tap. -->\n          <div class=\"px-4 pt-1 pb-2 shrink-0\">\n            <p class=\"text-base font-medium text-base-content truncate\">\n              {{ uiConfig.label || props.label || uiConfig.placeholder || props.placeholder || '' }}\n            </p>\n          </div>\n          <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n        </div>\n      </mn-bottom-sheet>\n    } @else {\n      <!-- A transparent full-viewport shield behind the panel, so \"click anywhere to dismiss\"\n           is literally true. It also *consumes* that click: without it the click reaches\n           whatever sits underneath \u2014 inside a modal that is the modal's own backdrop, so\n           dismissing the dropdown would tear down the whole modal with it. Portalled to\n           document.body for the same reason the panel is. It is aria-hidden and unfocusable:\n           the keyboard equivalent of this click is Escape. -->\n      <div\n        #shield\n        (click)=\"onShieldClick($event)\"\n        [id]=\"resolvedId + '-shield'\"\n        [ngClass]=\"shieldClasses\"\n        aria-hidden=\"true\"\n      ></div>\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        #dropdown\n        (click)=\"$event.stopPropagation()\"\n        [id]=\"resolvedId + '-listbox'\"\n        [ngClass]=\"panelClasses\"\n        [style.left]=\"dropdownStyle.left\"\n        [style.top]=\"dropdownStyle.top\"\n        [style.width]=\"dropdownStyle.width\"\n        role=\"listbox\"\n      >\n        <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n      </div>\n    }\n  }\n\n  <!-- The search box + option list, shared verbatim by the sheet and the anchored popover.\n       `isSheet` only tunes spacing/sizing and which element scrolls: in sheet mode the list\n       is the flex scroller; anchored, the popover itself scrolls. -->\n  <ng-template #panelBody>\n    @if (isSearchable) {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        (click)=\"$event.stopPropagation()\"\n        [ngClass]=\"isSheet ? 'px-4 py-2' : 'p-2'\"\n        class=\"border-b border-base-300 shrink-0\"\n      >\n        <mn-lib-input-field\n          (ngModelChange)=\"onSearch($event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          [ngModel]=\"searchTerm\"\n          [props]=\"{\n            id: resolvedId + '-search',\n            type: 'search',\n            placeholder: searchPlaceholderLabel,\n            ariaLabel: searchPlaceholderLabel,\n            fullWidth: true,\n            size: 'sm',\n            autoFocus: !isSheet\n          }\"\n        ></mn-lib-input-field>\n      </div>\n    }\n    <div [ngClass]=\"isSheet ? 'flex-1 overflow-auto overscroll-contain' : ''\">\n      @for (opt of filteredOptions; track opt.value) {\n        <div\n          (click)=\"selectOption(opt); $event.stopPropagation()\"\n          (keyup.enter)=\"selectOption(opt)\"\n          (keyup.space)=\"selectOption(opt)\"\n          [attr.aria-selected]=\"isSelected(opt)\"\n          [class.opacity-50]=\"opt.disabled\"\n          [class.pointer-events-none]=\"opt.disabled\"\n          [ngClass]=\"[isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm', isSelected(opt) ? 'bg-primary/10 font-medium' : '']\"\n          class=\"flex items-center gap-x-2.5 cursor-pointer text-base-content hover:bg-base-200 transition-colors\"\n          role=\"option\"\n          tabindex=\"0\"\n        >\n          <span class=\"truncate min-w-0\">{{ opt.label }}</span>\n          <!-- The current choice's marker. Decorative: the state is conveyed to assistive\n               tech by `aria-selected` on the row. -->\n          @if (isSelected(opt)) {\n            <svg\n              [lucideIcon]=\"checkIcon\"\n              [size]=\"isSheet ? 18 : 16\"\n              aria-hidden=\"true\"\n              class=\"ml-auto shrink-0 text-primary\"\n            ></svg>\n          }\n        </div>\n      }\n      @if (filteredOptions.length === 0) {\n        <div [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\" class=\"text-base-content/50\">\n          {{ noOptionsLabel }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n", 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: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnBottomSheet, selector: "mn-bottom-sheet", inputs: ["showBackdrop", "showGrabber", "dismissible", "minHeightPx", "maxHeightVh", "containerClass", "ariaLabel", "ariaLabelledby", "growWithKeyboard", "dismissGuard"], outputs: ["dismiss"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-lib-select', standalone: true, imports: [NgClass, MnErrorMessage], host: {
+            args: [{ selector: 'mn-lib-select', standalone: true, imports: [NgClass, NgTemplateOutlet, FormsModule, MnErrorMessage, MnInputField, MnBottomSheet, LucideDynamicIcon, LucideChevronDown], host: {
                         // Without an explicit host width the inline host collapses to its content size, so
-                        // the control's `w-full` (width:100%) resolves against a content-sized box and fails
+                        // the trigger's `w-full` (width:100%) resolves against a content-sized box and fails
                         // to fill the parent. Give the host a real width when fullWidth is requested.
                         '[style.display]': "props?.fullWidth ? 'block' : null",
                         '[style.width]': "props?.fullWidth ? '100%' : null",
-                    }, template: "<div [class.is-fullwidth]=\"props.fullWidth\" class=\"flex flex-col h-full\">\n  @if (uiConfig.label || props.label) {\n    <label [attr.for]=\"resolvedId\" class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <select\n    (blur)=\"handleBlur()\"\n    (change)=\"onSelectChange($event)\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [disabled]=\"isDisabled\"\n    [id]=\"resolvedId\"\n    [name]=\"resolvedName\"\n    [ngClass]=\"selectClasses\"\n  >\n    @if (props.placeholder || uiConfig.placeholder) {\n      <option [selected]=\"selectedValue === null\" [value]=\"''\" disabled>\n        {{ uiConfig.placeholder || props.placeholder }}\n      </option>\n    }\n    @for (opt of props.options; track opt.value) {\n      <option\n        [disabled]=\"opt.disabled\"\n        [selected]=\"isSelected(opt)\"\n        [value]=\"optionIndex(opt)\"\n      >{{ opt.label }}\n      </option>\n    }\n  </select>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n" }]
+                    }, template: "<div [class.is-fullwidth]=\"props.fullWidth\" class=\"flex flex-col h-full\">\n  @if (uiConfig.label || props.label) {\n    <label [attr.for]=\"resolvedId\" class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    (blur)=\"handleBlur()\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    [attr.aria-controls]=\"isOpen ? resolvedId + '-listbox' : null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-disabled]=\"isDisabled || null\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [class.cursor-not-allowed]=\"isDisabled\"\n    [class.opacity-60]=\"isDisabled\"\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    [tabindex]=\"isDisabled ? -1 : 0\"\n    aria-haspopup=\"listbox\"\n    class=\"relative\"\n    role=\"combobox\"\n  >\n    <!-- `pr-6` reserves the gutter the caret is absolutely positioned in (right-2 + w-4),\n         so the value can never render underneath it. `min-w-0` lets the label shrink below\n         its content width, which is what makes truncation possible. -->\n    <div class=\"flex flex-row items-center min-h-6 min-w-0 pr-6\">\n      <span\n        [attr.title]=\"selectedOption?.label\"\n        [ngClass]=\"selectedOption ? 'text-base-content' : 'text-base-content/50'\"\n        class=\"truncate\"\n      >{{ displayText }}</span>\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg [size]=\"16\" class=\"text-base-content/50\" lucideChevronDown></svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    @if (isSheet) {\n      <!-- On mobile the panel is presented as a shared bottom sheet: the sheet chrome\n           (backdrop, grabber, swipe/flick-to-dismiss, slide animation) lives in\n           mn-bottom-sheet; this component only projects the field's content into it. The\n           sheet host is portalled to document.body (see the `sheet` ViewChild) so its\n           `position: fixed` anchors to the viewport, not a transformed ancestor. -->\n      <mn-bottom-sheet\n        #sheet\n        (dismiss)=\"close()\"\n        [ariaLabel]=\"uiConfig.ariaLabel || uiConfig.label || props.label || uiConfig.placeholder || props.placeholder\"\n        [maxHeightVh]=\"80\"\n        [minHeightPx]=\"sheetFloorPx\"\n      >\n        <div\n          [id]=\"resolvedId + '-listbox'\"\n          class=\"flex flex-col flex-1 min-h-0 overflow-hidden\"\n          role=\"listbox\"\n        >\n          <!-- The sheet covers its own trigger, so it carries a header to name the field; the\n               way out is the grabber (swipe-to-dismiss) and a backdrop tap. -->\n          <div class=\"px-4 pt-1 pb-2 shrink-0\">\n            <p class=\"text-base font-medium text-base-content truncate\">\n              {{ uiConfig.label || props.label || uiConfig.placeholder || props.placeholder || '' }}\n            </p>\n          </div>\n          <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n        </div>\n      </mn-bottom-sheet>\n    } @else {\n      <!-- A transparent full-viewport shield behind the panel, so \"click anywhere to dismiss\"\n           is literally true. It also *consumes* that click: without it the click reaches\n           whatever sits underneath \u2014 inside a modal that is the modal's own backdrop, so\n           dismissing the dropdown would tear down the whole modal with it. Portalled to\n           document.body for the same reason the panel is. It is aria-hidden and unfocusable:\n           the keyboard equivalent of this click is Escape. -->\n      <div\n        #shield\n        (click)=\"onShieldClick($event)\"\n        [id]=\"resolvedId + '-shield'\"\n        [ngClass]=\"shieldClasses\"\n        aria-hidden=\"true\"\n      ></div>\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        #dropdown\n        (click)=\"$event.stopPropagation()\"\n        [id]=\"resolvedId + '-listbox'\"\n        [ngClass]=\"panelClasses\"\n        [style.left]=\"dropdownStyle.left\"\n        [style.top]=\"dropdownStyle.top\"\n        [style.width]=\"dropdownStyle.width\"\n        role=\"listbox\"\n      >\n        <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n      </div>\n    }\n  }\n\n  <!-- The search box + option list, shared verbatim by the sheet and the anchored popover.\n       `isSheet` only tunes spacing/sizing and which element scrolls: in sheet mode the list\n       is the flex scroller; anchored, the popover itself scrolls. -->\n  <ng-template #panelBody>\n    @if (isSearchable) {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        (click)=\"$event.stopPropagation()\"\n        [ngClass]=\"isSheet ? 'px-4 py-2' : 'p-2'\"\n        class=\"border-b border-base-300 shrink-0\"\n      >\n        <mn-lib-input-field\n          (ngModelChange)=\"onSearch($event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          [ngModel]=\"searchTerm\"\n          [props]=\"{\n            id: resolvedId + '-search',\n            type: 'search',\n            placeholder: searchPlaceholderLabel,\n            ariaLabel: searchPlaceholderLabel,\n            fullWidth: true,\n            size: 'sm',\n            autoFocus: !isSheet\n          }\"\n        ></mn-lib-input-field>\n      </div>\n    }\n    <div [ngClass]=\"isSheet ? 'flex-1 overflow-auto overscroll-contain' : ''\">\n      @for (opt of filteredOptions; track opt.value) {\n        <div\n          (click)=\"selectOption(opt); $event.stopPropagation()\"\n          (keyup.enter)=\"selectOption(opt)\"\n          (keyup.space)=\"selectOption(opt)\"\n          [attr.aria-selected]=\"isSelected(opt)\"\n          [class.opacity-50]=\"opt.disabled\"\n          [class.pointer-events-none]=\"opt.disabled\"\n          [ngClass]=\"[isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm', isSelected(opt) ? 'bg-primary/10 font-medium' : '']\"\n          class=\"flex items-center gap-x-2.5 cursor-pointer text-base-content hover:bg-base-200 transition-colors\"\n          role=\"option\"\n          tabindex=\"0\"\n        >\n          <span class=\"truncate min-w-0\">{{ opt.label }}</span>\n          <!-- The current choice's marker. Decorative: the state is conveyed to assistive\n               tech by `aria-selected` on the row. -->\n          @if (isSelected(opt)) {\n            <svg\n              [lucideIcon]=\"checkIcon\"\n              [size]=\"isSheet ? 18 : 16\"\n              aria-hidden=\"true\"\n              class=\"ml-auto shrink-0 text-primary\"\n            ></svg>\n          }\n        </div>\n      }\n      @if (filteredOptions.length === 0) {\n        <div [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\" class=\"text-base-content/50\">\n          {{ noOptionsLabel }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input,
                 args: [{ required: true }]
+            }], triggerRef: [{
+                type: ViewChild,
+                args: ['trigger', { static: false }]
+            }], dropdownRef: [{
+                type: ViewChild,
+                args: ['dropdown', { static: false }]
+            }], shieldRef: [{
+                type: ViewChild,
+                args: ['shield', { static: false }]
+            }], sheetRef: [{
+                type: ViewChild,
+                args: ['sheet', { static: false, read: ElementRef }]
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }], onWindowScrollOrResize: [{
+                type: HostListener,
+                args: ['window:scroll', []]
+            }, {
+                type: HostListener,
+                args: ['window:resize', []]
             }] } });
 
 // =========================
@@ -10731,12 +11260,16 @@ class MnList extends MnSelectableCollectionBase {
     get listRegionLabel() {
         return this.resolveLabel(undefined, 'mnCollection.dataList', 'Data list');
     }
+    /** Label on the header checkbox that selects or clears every visible row. */
+    get selectAllLabel() {
+        return this.resolveLabel(undefined, 'mnCollection.selectAll', 'Select all');
+    }
     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        <!-- 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 });
+    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: selectAllLabel, 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        <!-- 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" }]
+            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: selectAllLabel, 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: [{
@@ -13220,19 +13753,44 @@ class MnBreadcrumbs {
     crumbClick = new EventEmitter();
     /** Emits when the fallback "Back" control is activated. */
     back = new EventEmitter();
-    /** Default translation key / literal for the Back control's label. */
-    static DEFAULT_BACK_LABEL = 'back';
+    /** Conventional key an app defines to translate the Back control's label. */
+    static BACK_LABEL_KEY = 'mnBreadcrumbs.back';
+    /** Conventional key an app defines to name the navigation landmark. */
+    static NAV_LABEL_KEY = 'mnBreadcrumbs.label';
+    /** Resolves this component's own labels against the app's bundle. */
+    lang = inject(MnLanguageService);
     /** Resolved tailwind-variants slot functions for the current size. */
     get styles() {
         return mnBreadcrumbsVariants({ size: this.data.size });
     }
+    /**
+     * Accessible name of the `<nav>` landmark.
+     *
+     * A landmark's name is announced verbatim, so leaving it as a hardcoded English
+     * "Breadcrumb" put one English word into every page of a translated app — in the
+     * one place only screen-reader users hear.
+     */
+    get navLabel() {
+        return this.lang.translateIfPresent(MnBreadcrumbs.NAV_LABEL_KEY) ?? 'Breadcrumb';
+    }
     /** Whether a linkable trail should render (vs the Back fallback). */
     get hasTrail() {
         return (this.data.items?.length ?? 0) > 0;
     }
-    /** Label for the Back control — the configured key/literal, or the default. */
+    /**
+     * Text of the Back control, already translated.
+     *
+     * `data.backLabel` is a key (or a literal, which `translate` passes through
+     * unchanged). Without one this falls back to the conventional key and then to
+     * English — never to a raw key: the old default was the bare key `'back'`, which
+     * the template's translate pipe echoed as lowercase "back" in every app that had
+     * not happened to define it.
+     */
     get backLabel() {
-        return this.data.backLabel ?? MnBreadcrumbs.DEFAULT_BACK_LABEL;
+        if (this.data.backLabel) {
+            return this.lang.translate(this.data.backLabel);
+        }
+        return this.lang.translateIfPresent(MnBreadcrumbs.BACK_LABEL_KEY) ?? 'Back';
     }
     /** The last crumb is the current page and is rendered as plain text. */
     isCurrent(index) {
@@ -13254,11 +13812,11 @@ class MnBreadcrumbs {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnBreadcrumbs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnBreadcrumbs, isStandalone: true, selector: "mn-breadcrumbs", inputs: { data: "data" }, outputs: { crumbClick: "crumbClick", back: "back" }, ngImport: i0, template: "<nav aria-label=\"Breadcrumb\" [class]=\"styles.root()\">\n  @if (hasTrail) {\n    <ol [class]=\"styles.list()\">\n      @for (item of data.items; track $index; let first = $first) {\n        @if (!first) {\n          <li aria-hidden=\"true\" [class]=\"styles.separator()\">\n            <svg [size]=\"14\" lucideChevronRight></svg>\n          </li>\n        }\n        <li class=\"inline-flex items-center\">\n          @if (isCurrent($index)) {\n            <span aria-current=\"page\" [class]=\"styles.current()\">{{ item.label | mnTranslate }}</span>\n          } @else if (item.href) {\n            <a [attr.href]=\"item.href\" [class]=\"styles.link()\" (click)=\"onCrumb(item)\">{{ item.label | mnTranslate }}</a>\n          } @else {\n            <button type=\"button\" [class]=\"styles.link()\" (click)=\"onCrumb(item)\">{{ item.label | mnTranslate }}</button>\n          }\n        </li>\n      }\n    </ol>\n  } @else if (data.backHref) {\n    <a [attr.href]=\"data.backHref\" [class]=\"styles.back()\" (click)=\"onBack()\">\n      <svg [size]=\"16\" lucideChevronLeft></svg>\n      {{ backLabel | mnTranslate }}\n    </a>\n  } @else {\n    <button type=\"button\" [class]=\"styles.back()\" (click)=\"onBack()\">\n      <svg [size]=\"16\" lucideChevronLeft></svg>\n      {{ backLabel | mnTranslate }}\n    </button>\n  }\n</nav>\n", dependencies: [{ kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "pipe", type: MnTranslatePipe, name: "mnTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnBreadcrumbs, isStandalone: true, selector: "mn-breadcrumbs", inputs: { data: "data" }, outputs: { crumbClick: "crumbClick", back: "back" }, ngImport: i0, template: "<nav [attr.aria-label]=\"navLabel\" [class]=\"styles.root()\">\n  @if (hasTrail) {\n    <ol [class]=\"styles.list()\">\n      @for (item of data.items; track $index; let first = $first) {\n        @if (!first) {\n          <li aria-hidden=\"true\" [class]=\"styles.separator()\">\n            <svg [size]=\"14\" lucideChevronRight></svg>\n          </li>\n        }\n        <li class=\"inline-flex items-center\">\n          @if (isCurrent($index)) {\n            <span aria-current=\"page\" [class]=\"styles.current()\">{{ item.label | mnTranslate }}</span>\n          } @else if (item.href) {\n            <a [attr.href]=\"item.href\" [class]=\"styles.link()\" (click)=\"onCrumb(item)\">{{ item.label | mnTranslate }}</a>\n          } @else {\n            <button type=\"button\" [class]=\"styles.link()\" (click)=\"onCrumb(item)\">{{ item.label | mnTranslate }}</button>\n          }\n        </li>\n      }\n    </ol>\n  } @else if (data.backHref) {\n    <a [attr.href]=\"data.backHref\" [class]=\"styles.back()\" (click)=\"onBack()\">\n      <svg [size]=\"16\" lucideChevronLeft></svg>\n      {{ backLabel }}\n    </a>\n  } @else {\n    <button type=\"button\" [class]=\"styles.back()\" (click)=\"onBack()\">\n      <svg [size]=\"16\" lucideChevronLeft></svg>\n      {{ backLabel }}\n    </button>\n  }\n</nav>\n", dependencies: [{ kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "pipe", type: MnTranslatePipe, name: "mnTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnBreadcrumbs, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-breadcrumbs', standalone: true, imports: [MnTranslatePipe, LucideChevronLeft, LucideChevronRight], template: "<nav aria-label=\"Breadcrumb\" [class]=\"styles.root()\">\n  @if (hasTrail) {\n    <ol [class]=\"styles.list()\">\n      @for (item of data.items; track $index; let first = $first) {\n        @if (!first) {\n          <li aria-hidden=\"true\" [class]=\"styles.separator()\">\n            <svg [size]=\"14\" lucideChevronRight></svg>\n          </li>\n        }\n        <li class=\"inline-flex items-center\">\n          @if (isCurrent($index)) {\n            <span aria-current=\"page\" [class]=\"styles.current()\">{{ item.label | mnTranslate }}</span>\n          } @else if (item.href) {\n            <a [attr.href]=\"item.href\" [class]=\"styles.link()\" (click)=\"onCrumb(item)\">{{ item.label | mnTranslate }}</a>\n          } @else {\n            <button type=\"button\" [class]=\"styles.link()\" (click)=\"onCrumb(item)\">{{ item.label | mnTranslate }}</button>\n          }\n        </li>\n      }\n    </ol>\n  } @else if (data.backHref) {\n    <a [attr.href]=\"data.backHref\" [class]=\"styles.back()\" (click)=\"onBack()\">\n      <svg [size]=\"16\" lucideChevronLeft></svg>\n      {{ backLabel | mnTranslate }}\n    </a>\n  } @else {\n    <button type=\"button\" [class]=\"styles.back()\" (click)=\"onBack()\">\n      <svg [size]=\"16\" lucideChevronLeft></svg>\n      {{ backLabel | mnTranslate }}\n    </button>\n  }\n</nav>\n" }]
+            args: [{ selector: 'mn-breadcrumbs', standalone: true, imports: [MnTranslatePipe, LucideChevronLeft, LucideChevronRight], template: "<nav [attr.aria-label]=\"navLabel\" [class]=\"styles.root()\">\n  @if (hasTrail) {\n    <ol [class]=\"styles.list()\">\n      @for (item of data.items; track $index; let first = $first) {\n        @if (!first) {\n          <li aria-hidden=\"true\" [class]=\"styles.separator()\">\n            <svg [size]=\"14\" lucideChevronRight></svg>\n          </li>\n        }\n        <li class=\"inline-flex items-center\">\n          @if (isCurrent($index)) {\n            <span aria-current=\"page\" [class]=\"styles.current()\">{{ item.label | mnTranslate }}</span>\n          } @else if (item.href) {\n            <a [attr.href]=\"item.href\" [class]=\"styles.link()\" (click)=\"onCrumb(item)\">{{ item.label | mnTranslate }}</a>\n          } @else {\n            <button type=\"button\" [class]=\"styles.link()\" (click)=\"onCrumb(item)\">{{ item.label | mnTranslate }}</button>\n          }\n        </li>\n      }\n    </ol>\n  } @else if (data.backHref) {\n    <a [attr.href]=\"data.backHref\" [class]=\"styles.back()\" (click)=\"onBack()\">\n      <svg [size]=\"16\" lucideChevronLeft></svg>\n      {{ backLabel }}\n    </a>\n  } @else {\n    <button type=\"button\" [class]=\"styles.back()\" (click)=\"onBack()\">\n      <svg [size]=\"16\" lucideChevronLeft></svg>\n      {{ backLabel }}\n    </button>\n  }\n</nav>\n" }]
         }], propDecorators: { data: [{
                 type: Input
             }], crumbClick: [{