mn-angular-lib 1.0.83 → 1.0.85

package/fesm2022/mn-angular-lib.mjs

@@ -1652,7 +1652,7 @@ const mnInformationCardVariants = tv({
     base: '',
     variants: {
         bottomBorder: {
-            true: 'border-b border-b-2 border-brand-500',
+            true: 'border-b border-b-2 border-primary-500',
         },
         shadow: {
             true: 'shadow-xl',
@@ -2660,11 +2660,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)", "window:scroll": "onWindowScrollOrResize()", "window:resize": "onWindowScrollOrResize()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true }], 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    <div class=\"flex flex-row items-center gap-x-2 flex-wrap min-h-6\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-base-content/50\">{{ uiConfig.placeholder || props.placeholder || 'Select...' }}</span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <span class=\"inline-flex items-center gap-x-1 bg-base-200 border border-accent text-base-content text-xs pl-2 py-0.5 rounded-md cursor-pointer\"\n            (click)=\"removeOption(opt, $event)\">\n            {{ opt.label }}\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\"\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 class=\"w-4 h-4 text-base-content/50\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 12\">\n        <path fill=\"currentColor\" d=\"M6 8L1 3h10z\"/>\n      </svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n    <div\n      [id]=\"resolvedId + '-listbox'\"\n      aria-multiselectable=\"true\"\n      role=\"listbox\"\n      class=\"fixed z-9999 bg-base-100 border border-base-300 rounded-md shadow-lg max-h-60 overflow-auto\"\n      [style.top]=\"dropdownStyle.top\"\n      [style.left]=\"dropdownStyle.left\"\n      [style.width]=\"dropdownStyle.width\"\n      (click)=\"$event.stopPropagation()\"\n    >\n        @if (props.searchable) {\n          <div class=\"p-2 border-b border-base-300\">\n            <input\n              type=\"text\"\n              class=\"w-full p-1.5 text-sm border border-base-300 rounded-md outline-none focus:border-brand-500 bg-base-200 text-base-content placeholder-base-content/50\"\n              [placeholder]=\"props.searchPlaceholder || 'Search...'\"\n              [value]=\"searchTerm\"\n              (input)=\"onSearch(($any($event.target)).value)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </div>\n        }\n        @for (opt of filteredOptions; track opt.value) {\n          <div\n            (keyup.enter)=\"toggleOption(opt)\"\n            (keyup.space)=\"toggleOption(opt)\"\n            [attr.aria-selected]=\"isSelected(opt)\"\n            class=\"flex items-center gap-x-2 px-3 py-2 text-sm cursor-pointer text-base-content hover:bg-base-200\"\n            [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n            [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n            (click)=\"toggleOption(opt); $event.stopPropagation()\"\n            role=\"option\"\n            tabindex=\"0\"\n          >\n            <input\n              type=\"checkbox\"\n              class=\"w-4 h-4 accent-[var(--color-primary)] pointer-events-none\"\n              [checked]=\"isSelected(opt)\"\n              [disabled]=\"opt.disabled || isMaxReached(opt)\"\n              tabindex=\"-1\"\n            />\n            <span>{{ opt.label }}</span>\n          </div>\n        }\n        @if (filteredOptions.length === 0) {\n          <div class=\"px-3 py-2 text-sm text-base-content/50\">{{ uiConfig.noOptionsFound || 'No options found' }}</div>\n        }\n    </div>\n  }\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"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnMultiSelect, isStandalone: true, selector: "mn-lib-multi-select", inputs: { props: "props" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:scroll": "onWindowScrollOrResize()", "window:resize": "onWindowScrollOrResize()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true }], 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    <div class=\"flex flex-row items-center gap-x-2 flex-wrap min-h-6\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-base-content/50\">{{ uiConfig.placeholder || props.placeholder || 'Select...' }}</span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <span class=\"inline-flex items-center gap-x-1 bg-base-200 border border-accent text-base-content text-xs pl-2 py-0.5 rounded-md cursor-pointer\"\n            (click)=\"removeOption(opt, $event)\">\n            {{ opt.label }}\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\"\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 class=\"w-4 h-4 text-base-content/50\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 12\">\n        <path fill=\"currentColor\" d=\"M6 8L1 3h10z\"/>\n      </svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n    <div\n      [id]=\"resolvedId + '-listbox'\"\n      aria-multiselectable=\"true\"\n      role=\"listbox\"\n      class=\"fixed z-9999 bg-base-100 border border-base-300 rounded-md shadow-lg max-h-60 overflow-auto\"\n      [style.top]=\"dropdownStyle.top\"\n      [style.left]=\"dropdownStyle.left\"\n      [style.width]=\"dropdownStyle.width\"\n      (click)=\"$event.stopPropagation()\"\n    >\n        @if (props.searchable) {\n          <div class=\"p-2 border-b border-base-300\">\n            <input\n              type=\"text\"\n              class=\"w-full p-1.5 text-sm border border-base-300 rounded-md outline-none focus:border-primary-500 bg-base-200 text-base-content placeholder-base-content/50\"\n              [placeholder]=\"props.searchPlaceholder || 'Search...'\"\n              [value]=\"searchTerm\"\n              (input)=\"onSearch(($any($event.target)).value)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </div>\n        }\n        @for (opt of filteredOptions; track opt.value) {\n          <div\n            (keyup.enter)=\"toggleOption(opt)\"\n            (keyup.space)=\"toggleOption(opt)\"\n            [attr.aria-selected]=\"isSelected(opt)\"\n            class=\"flex items-center gap-x-2 px-3 py-2 text-sm cursor-pointer text-base-content hover:bg-base-200\"\n            [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n            [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n            (click)=\"toggleOption(opt); $event.stopPropagation()\"\n            role=\"option\"\n            tabindex=\"0\"\n          >\n            <input\n              type=\"checkbox\"\n              class=\"w-4 h-4 accent-primary pointer-events-none\"\n              [checked]=\"isSelected(opt)\"\n              [disabled]=\"opt.disabled || isMaxReached(opt)\"\n              tabindex=\"-1\"\n            />\n            <span>{{ opt.label }}</span>\n          </div>\n        }\n        @if (filteredOptions.length === 0) {\n          <div class=\"px-3 py-2 text-sm text-base-content/50\">{{ uiConfig.noOptionsFound || 'No options found' }}</div>\n        }\n    </div>\n  }\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"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnMultiSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-lib-multi-select', standalone: true, imports: [NgClass, MnErrorMessage, MnButton, LucideX], 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    <div class=\"flex flex-row items-center gap-x-2 flex-wrap min-h-6\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-base-content/50\">{{ uiConfig.placeholder || props.placeholder || 'Select...' }}</span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <span class=\"inline-flex items-center gap-x-1 bg-base-200 border border-accent text-base-content text-xs pl-2 py-0.5 rounded-md cursor-pointer\"\n            (click)=\"removeOption(opt, $event)\">\n            {{ opt.label }}\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\"\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 class=\"w-4 h-4 text-base-content/50\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 12\">\n        <path fill=\"currentColor\" d=\"M6 8L1 3h10z\"/>\n      </svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n    <div\n      [id]=\"resolvedId + '-listbox'\"\n      aria-multiselectable=\"true\"\n      role=\"listbox\"\n      class=\"fixed z-9999 bg-base-100 border border-base-300 rounded-md shadow-lg max-h-60 overflow-auto\"\n      [style.top]=\"dropdownStyle.top\"\n      [style.left]=\"dropdownStyle.left\"\n      [style.width]=\"dropdownStyle.width\"\n      (click)=\"$event.stopPropagation()\"\n    >\n        @if (props.searchable) {\n          <div class=\"p-2 border-b border-base-300\">\n            <input\n              type=\"text\"\n              class=\"w-full p-1.5 text-sm border border-base-300 rounded-md outline-none focus:border-brand-500 bg-base-200 text-base-content placeholder-base-content/50\"\n              [placeholder]=\"props.searchPlaceholder || 'Search...'\"\n              [value]=\"searchTerm\"\n              (input)=\"onSearch(($any($event.target)).value)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </div>\n        }\n        @for (opt of filteredOptions; track opt.value) {\n          <div\n            (keyup.enter)=\"toggleOption(opt)\"\n            (keyup.space)=\"toggleOption(opt)\"\n            [attr.aria-selected]=\"isSelected(opt)\"\n            class=\"flex items-center gap-x-2 px-3 py-2 text-sm cursor-pointer text-base-content hover:bg-base-200\"\n            [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n            [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n            (click)=\"toggleOption(opt); $event.stopPropagation()\"\n            role=\"option\"\n            tabindex=\"0\"\n          >\n            <input\n              type=\"checkbox\"\n              class=\"w-4 h-4 accent-[var(--color-primary)] pointer-events-none\"\n              [checked]=\"isSelected(opt)\"\n              [disabled]=\"opt.disabled || isMaxReached(opt)\"\n              tabindex=\"-1\"\n            />\n            <span>{{ opt.label }}</span>\n          </div>\n        }\n        @if (filteredOptions.length === 0) {\n          <div class=\"px-3 py-2 text-sm text-base-content/50\">{{ uiConfig.noOptionsFound || 'No options found' }}</div>\n        }\n    </div>\n  }\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, MnErrorMessage, MnButton, LucideX], 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    <div class=\"flex flex-row items-center gap-x-2 flex-wrap min-h-6\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-base-content/50\">{{ uiConfig.placeholder || props.placeholder || 'Select...' }}</span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <span class=\"inline-flex items-center gap-x-1 bg-base-200 border border-accent text-base-content text-xs pl-2 py-0.5 rounded-md cursor-pointer\"\n            (click)=\"removeOption(opt, $event)\">\n            {{ opt.label }}\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\"\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 class=\"w-4 h-4 text-base-content/50\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 12\">\n        <path fill=\"currentColor\" d=\"M6 8L1 3h10z\"/>\n      </svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n    <div\n      [id]=\"resolvedId + '-listbox'\"\n      aria-multiselectable=\"true\"\n      role=\"listbox\"\n      class=\"fixed z-9999 bg-base-100 border border-base-300 rounded-md shadow-lg max-h-60 overflow-auto\"\n      [style.top]=\"dropdownStyle.top\"\n      [style.left]=\"dropdownStyle.left\"\n      [style.width]=\"dropdownStyle.width\"\n      (click)=\"$event.stopPropagation()\"\n    >\n        @if (props.searchable) {\n          <div class=\"p-2 border-b border-base-300\">\n            <input\n              type=\"text\"\n              class=\"w-full p-1.5 text-sm border border-base-300 rounded-md outline-none focus:border-primary-500 bg-base-200 text-base-content placeholder-base-content/50\"\n              [placeholder]=\"props.searchPlaceholder || 'Search...'\"\n              [value]=\"searchTerm\"\n              (input)=\"onSearch(($any($event.target)).value)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </div>\n        }\n        @for (opt of filteredOptions; track opt.value) {\n          <div\n            (keyup.enter)=\"toggleOption(opt)\"\n            (keyup.space)=\"toggleOption(opt)\"\n            [attr.aria-selected]=\"isSelected(opt)\"\n            class=\"flex items-center gap-x-2 px-3 py-2 text-sm cursor-pointer text-base-content hover:bg-base-200\"\n            [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n            [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n            (click)=\"toggleOption(opt); $event.stopPropagation()\"\n            role=\"option\"\n            tabindex=\"0\"\n          >\n            <input\n              type=\"checkbox\"\n              class=\"w-4 h-4 accent-primary pointer-events-none\"\n              [checked]=\"isSelected(opt)\"\n              [disabled]=\"opt.disabled || isMaxReached(opt)\"\n              tabindex=\"-1\"\n            />\n            <span>{{ opt.label }}</span>\n          </div>\n        }\n        @if (filteredOptions.length === 0) {\n          <div class=\"px-3 py-2 text-sm text-base-content/50\">{{ uiConfig.noOptionsFound || 'No options found' }}</div>\n        }\n    </div>\n  }\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 }]
@@ -4387,11 +4387,11 @@ class MnCollectionPagination {
         return this.isPaginated && (this.totalPages > 1 || this.isServerPaginated);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnCollectionPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnCollectionPagination, isStandalone: true, selector: "mn-collection-pagination", inputs: { idPrefix: "idPrefix", isPaginated: "isPaginated", isServerPaginated: "isServerPaginated", showLoadMore: "showLoadMore", loadingMoreRows: "loadingMoreRows", currentPage: "currentPage", pageSize: "pageSize", totalPages: "totalPages", totalItemCount: "totalItemCount", visiblePages: "visiblePages", pageSizeSelectOptions: "pageSizeSelectOptions", labels: "labels" }, outputs: { loadMore: "loadMore", pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<!-- Load more button -->\n@if (showLoadMore) {\n  <div class=\"flex justify-center py-4\">\n    <button\n      (click)=\"loadMore.emit()\"\n      [data]=\"{ size: 'sm', variant: 'outline', color: 'primary' }\"\n      [disabled]=\"loadingMoreRows\"\n      class=\"px-4 py-1.5 text-sm rounded border border-brand-500 text-brand-500 hover:bg-brand-100 transition-colors disabled:opacity-50\"\n      mnButton\n    >\n      @if (loadingMoreRows) {\n        <span\n          class=\"inline-block w-3 h-3 border-2 border-brand-500 border-t-transparent rounded-full animate-spin mr-2\"></span>\n      }\n      {{ labels?.loadMore || 'Load more' }}\n    </button>\n  </div>\n}\n\n<!-- Pagination controls -->\n@if (showPagination) {\n  <div class=\"flex items-center justify-center md:justify-between px-2 py-3 text-sm text-base-content\">\n    <div class=\"hidden md:flex items-center gap-2\">\n      <span>{{ labels?.rowsPerPage || 'Items per page:' }}</span>\n      <mn-lib-select\n        (ngModelChange)=\"pageSizeChange.emit($event)\"\n        [ngModel]=\"pageSize\"\n        [props]=\"{\n          id: idPrefix + '-page-size',\n          options: pageSizeSelectOptions,\n          size: 'sm'\n        }\"\n      ></mn-lib-select>\n    </div>\n\n    <div class=\"flex items-center gap-1\">\n      <span class=\"text-xs mr-2 hidden md:inline\">{{ (currentPage - 1) * pageSize + 1 }}\n        \u2013 {{ currentPage * pageSize > totalItemCount ? totalItemCount : currentPage * pageSize }}\n        of {{ totalItemCount }}</span>\n\n      <button\n        (click)=\"pageChange.emit(1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        [disabled]=\"currentPage === 1\"\n        aria-label=\"First page\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n      >\u00AB\n      </button>\n\n      <button\n        (click)=\"pageChange.emit(currentPage - 1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        [disabled]=\"currentPage === 1\"\n        aria-label=\"Previous page\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n      >\u2039\n      </button>\n\n      @for (page of visiblePages; track page) {\n        <button\n          (click)=\"pageChange.emit(page)\"\n          [attr.aria-current]=\"page === currentPage ? 'page' : null\"\n          [attr.aria-label]=\"'Page ' + page\"\n          [data]=\"{ size: 'sm', variant: 'text', color: page === currentPage ? 'primary' : 'gray' }\"\n          class=\"px-2.5 py-1 rounded underline underline-offset-2 transition-colors text-xs\"\n          mnButton\n        >{{ page }}\n        </button>\n      }\n\n      <button\n        (click)=\"pageChange.emit(currentPage + 1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        [disabled]=\"currentPage === totalPages\"\n        aria-label=\"Next page\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n      >\u203A\n      </button>\n\n      <button\n        (click)=\"pageChange.emit(totalPages)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        [disabled]=\"currentPage === totalPages\"\n        aria-label=\"Last page\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n      >\u00BB\n      </button>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnSelect, selector: "mn-lib-select", inputs: ["props"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnCollectionPagination, isStandalone: true, selector: "mn-collection-pagination", inputs: { idPrefix: "idPrefix", isPaginated: "isPaginated", isServerPaginated: "isServerPaginated", showLoadMore: "showLoadMore", loadingMoreRows: "loadingMoreRows", currentPage: "currentPage", pageSize: "pageSize", totalPages: "totalPages", totalItemCount: "totalItemCount", visiblePages: "visiblePages", pageSizeSelectOptions: "pageSizeSelectOptions", labels: "labels" }, outputs: { loadMore: "loadMore", pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<!-- Load more button -->\n@if (showLoadMore) {\n  <div class=\"flex justify-center py-4\">\n    <button\n      (click)=\"loadMore.emit()\"\n      [data]=\"{ size: 'sm', variant: 'outline', color: 'primary' }\"\n      [disabled]=\"loadingMoreRows\"\n      class=\"px-4 py-1.5 text-sm rounded border border-primary-500 text-primary-500 hover:bg-primary-100 transition-colors disabled:opacity-50\"\n      mnButton\n    >\n      @if (loadingMoreRows) {\n        <span\n          class=\"inline-block w-3 h-3 border-2 border-primary-500 border-t-transparent rounded-full animate-spin mr-2\"></span>\n      }\n      {{ labels?.loadMore || 'Load more' }}\n    </button>\n  </div>\n}\n\n<!-- Pagination controls -->\n@if (showPagination) {\n  <div class=\"flex items-center justify-center md:justify-between px-2 py-3 text-sm text-base-content\">\n    <div class=\"hidden md:flex items-center gap-2\">\n      <span>{{ labels?.rowsPerPage || 'Items per page:' }}</span>\n      <mn-lib-select\n        (ngModelChange)=\"pageSizeChange.emit($event)\"\n        [ngModel]=\"pageSize\"\n        [props]=\"{\n          id: idPrefix + '-page-size',\n          options: pageSizeSelectOptions,\n          size: 'sm'\n        }\"\n      ></mn-lib-select>\n    </div>\n\n    <div class=\"flex items-center gap-1\">\n      <span class=\"text-xs mr-2 hidden md:inline\">{{ (currentPage - 1) * pageSize + 1 }}\n        \u2013 {{ currentPage * pageSize > totalItemCount ? totalItemCount : currentPage * pageSize }}\n        of {{ totalItemCount }}</span>\n\n      <button\n        (click)=\"pageChange.emit(1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        [disabled]=\"currentPage === 1\"\n        aria-label=\"First page\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n      >\u00AB\n      </button>\n\n      <button\n        (click)=\"pageChange.emit(currentPage - 1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        [disabled]=\"currentPage === 1\"\n        aria-label=\"Previous page\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n      >\u2039\n      </button>\n\n      @for (page of visiblePages; track page) {\n        <button\n          (click)=\"pageChange.emit(page)\"\n          [attr.aria-current]=\"page === currentPage ? 'page' : null\"\n          [attr.aria-label]=\"'Page ' + page\"\n          [data]=\"{ size: 'sm', variant: 'text', color: page === currentPage ? 'primary' : 'gray' }\"\n          class=\"px-2.5 py-1 rounded underline underline-offset-2 transition-colors text-xs\"\n          mnButton\n        >{{ page }}\n        </button>\n      }\n\n      <button\n        (click)=\"pageChange.emit(currentPage + 1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        [disabled]=\"currentPage === totalPages\"\n        aria-label=\"Next page\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n      >\u203A\n      </button>\n\n      <button\n        (click)=\"pageChange.emit(totalPages)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        [disabled]=\"currentPage === totalPages\"\n        aria-label=\"Last page\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n      >\u00BB\n      </button>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnSelect, selector: "mn-lib-select", inputs: ["props"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnCollectionPagination, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-collection-pagination', standalone: true, imports: [MnButton, MnSelect, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Load more button -->\n@if (showLoadMore) {\n  <div class=\"flex justify-center py-4\">\n    <button\n      (click)=\"loadMore.emit()\"\n      [data]=\"{ size: 'sm', variant: 'outline', color: 'primary' }\"\n      [disabled]=\"loadingMoreRows\"\n      class=\"px-4 py-1.5 text-sm rounded border border-brand-500 text-brand-500 hover:bg-brand-100 transition-colors disabled:opacity-50\"\n      mnButton\n    >\n      @if (loadingMoreRows) {\n        <span\n          class=\"inline-block w-3 h-3 border-2 border-brand-500 border-t-transparent rounded-full animate-spin mr-2\"></span>\n      }\n      {{ labels?.loadMore || 'Load more' }}\n    </button>\n  </div>\n}\n\n<!-- Pagination controls -->\n@if (showPagination) {\n  <div class=\"flex items-center justify-center md:justify-between px-2 py-3 text-sm text-base-content\">\n    <div class=\"hidden md:flex items-center gap-2\">\n      <span>{{ labels?.rowsPerPage || 'Items per page:' }}</span>\n      <mn-lib-select\n        (ngModelChange)=\"pageSizeChange.emit($event)\"\n        [ngModel]=\"pageSize\"\n        [props]=\"{\n          id: idPrefix + '-page-size',\n          options: pageSizeSelectOptions,\n          size: 'sm'\n        }\"\n      ></mn-lib-select>\n    </div>\n\n    <div class=\"flex items-center gap-1\">\n      <span class=\"text-xs mr-2 hidden md:inline\">{{ (currentPage - 1) * pageSize + 1 }}\n        \u2013 {{ currentPage * pageSize > totalItemCount ? totalItemCount : currentPage * pageSize }}\n        of {{ totalItemCount }}</span>\n\n      <button\n        (click)=\"pageChange.emit(1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        [disabled]=\"currentPage === 1\"\n        aria-label=\"First page\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n      >\u00AB\n      </button>\n\n      <button\n        (click)=\"pageChange.emit(currentPage - 1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        [disabled]=\"currentPage === 1\"\n        aria-label=\"Previous page\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n      >\u2039\n      </button>\n\n      @for (page of visiblePages; track page) {\n        <button\n          (click)=\"pageChange.emit(page)\"\n          [attr.aria-current]=\"page === currentPage ? 'page' : null\"\n          [attr.aria-label]=\"'Page ' + page\"\n          [data]=\"{ size: 'sm', variant: 'text', color: page === currentPage ? 'primary' : 'gray' }\"\n          class=\"px-2.5 py-1 rounded underline underline-offset-2 transition-colors text-xs\"\n          mnButton\n        >{{ page }}\n        </button>\n      }\n\n      <button\n        (click)=\"pageChange.emit(currentPage + 1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        [disabled]=\"currentPage === totalPages\"\n        aria-label=\"Next page\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n      >\u203A\n      </button>\n\n      <button\n        (click)=\"pageChange.emit(totalPages)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        [disabled]=\"currentPage === totalPages\"\n        aria-label=\"Last page\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n      >\u00BB\n      </button>\n    </div>\n  </div>\n}\n" }]
+            args: [{ selector: 'mn-collection-pagination', standalone: true, imports: [MnButton, MnSelect, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Load more button -->\n@if (showLoadMore) {\n  <div class=\"flex justify-center py-4\">\n    <button\n      (click)=\"loadMore.emit()\"\n      [data]=\"{ size: 'sm', variant: 'outline', color: 'primary' }\"\n      [disabled]=\"loadingMoreRows\"\n      class=\"px-4 py-1.5 text-sm rounded border border-primary-500 text-primary-500 hover:bg-primary-100 transition-colors disabled:opacity-50\"\n      mnButton\n    >\n      @if (loadingMoreRows) {\n        <span\n          class=\"inline-block w-3 h-3 border-2 border-primary-500 border-t-transparent rounded-full animate-spin mr-2\"></span>\n      }\n      {{ labels?.loadMore || 'Load more' }}\n    </button>\n  </div>\n}\n\n<!-- Pagination controls -->\n@if (showPagination) {\n  <div class=\"flex items-center justify-center md:justify-between px-2 py-3 text-sm text-base-content\">\n    <div class=\"hidden md:flex items-center gap-2\">\n      <span>{{ labels?.rowsPerPage || 'Items per page:' }}</span>\n      <mn-lib-select\n        (ngModelChange)=\"pageSizeChange.emit($event)\"\n        [ngModel]=\"pageSize\"\n        [props]=\"{\n          id: idPrefix + '-page-size',\n          options: pageSizeSelectOptions,\n          size: 'sm'\n        }\"\n      ></mn-lib-select>\n    </div>\n\n    <div class=\"flex items-center gap-1\">\n      <span class=\"text-xs mr-2 hidden md:inline\">{{ (currentPage - 1) * pageSize + 1 }}\n        \u2013 {{ currentPage * pageSize > totalItemCount ? totalItemCount : currentPage * pageSize }}\n        of {{ totalItemCount }}</span>\n\n      <button\n        (click)=\"pageChange.emit(1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        [disabled]=\"currentPage === 1\"\n        aria-label=\"First page\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n      >\u00AB\n      </button>\n\n      <button\n        (click)=\"pageChange.emit(currentPage - 1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        [disabled]=\"currentPage === 1\"\n        aria-label=\"Previous page\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n      >\u2039\n      </button>\n\n      @for (page of visiblePages; track page) {\n        <button\n          (click)=\"pageChange.emit(page)\"\n          [attr.aria-current]=\"page === currentPage ? 'page' : null\"\n          [attr.aria-label]=\"'Page ' + page\"\n          [data]=\"{ size: 'sm', variant: 'text', color: page === currentPage ? 'primary' : 'gray' }\"\n          class=\"px-2.5 py-1 rounded underline underline-offset-2 transition-colors text-xs\"\n          mnButton\n        >{{ page }}\n        </button>\n      }\n\n      <button\n        (click)=\"pageChange.emit(currentPage + 1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        [disabled]=\"currentPage === totalPages\"\n        aria-label=\"Next page\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n      >\u203A\n      </button>\n\n      <button\n        (click)=\"pageChange.emit(totalPages)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        [disabled]=\"currentPage === totalPages\"\n        aria-label=\"Last page\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n      >\u00BB\n      </button>\n    </div>\n  </div>\n}\n" }]
         }], propDecorators: { idPrefix: [{
                 type: Input
             }], isPaginated: [{
@@ -6054,9 +6054,9 @@ class MnModalShellComponent {
     }
     static SWIPE_DISMISS_THRESHOLD = 150;
     /** Upper bound for the close wait if no animation/transition end event fires
-     *  (e.g. an animation was suppressed). Longer than the slowest close path
-     *  (mobile slide-down 0.25s, swipe glide 0.3s) so it never preempts. */
-    static CLOSE_FALLBACK_MS = 450;
+     *  (e.g. an animation was suppressed). Must stay longer than the slowest close
+     *  path (mobile sheet slide-down 0.45s, swipe glide 0.3s) so it never preempts. */
+    static CLOSE_FALLBACK_MS = 700;
     /** Whether this modal renders as a bottom sheet on small screens (default: true). */
     get isMobileSheet() {
         return this.config.mobileBottomSheet !== false;
@@ -6075,6 +6075,12 @@ class MnModalShellComponent {
         return new Promise(resolve => {
             setTimeout(() => {
                 this.isClosing = true;
+                // @HostBinding('class') updates are flushed when the host view is checked
+                // (appRef.tick), not by a bare detectChanges() on this dynamically-created
+                // root component. Relying on CD alone means the `.closing` class — and thus
+                // the slide-down animation — never lands in a zoneless app and is timing-
+                // fragile elsewhere. Apply it directly so the close animation is reliable.
+                this.el.nativeElement.classList.add('closing');
                 this.cdr.detectChanges();
                 if (this.prefersReducedMotion()) {
                     resolve();
@@ -6327,7 +6333,7 @@ class MnModalShellComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnModalShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnModalShellComponent, isStandalone: true, selector: "mn-modal-shell", inputs: { config: "config", modalRef: "modalRef" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" }, properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "@if (showBackdrop) {\n  <!-- The backdrop is a visual overlay \u2014 keyboard dismiss is handled at component level via Escape key -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<div\n  class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n  [class.sheet-dragging]=\"isDraggingSheet\"\n  [ngClass]=\"containerSizeClass\"\n  [style.height]=\"containerHeightStyle\"\n  [style.transform]=\"sheetDragY ? 'translateY(' + sheetDragY + 'px)' : null\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n  [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n  tabindex=\"-1\"\n  (click)=\"$event.stopPropagation()\"\n>\n  @if (isMobileSheet) {\n    <!-- Drag handle for swipe-to-dismiss, visible only on mobile bottom sheets -->\n    <div\n    (pointercancel)=\"onSheetPointerUp()\"\n    (pointerdown)=\"onSheetPointerDown($event)\"\n    (pointermove)=\"onSheetPointerMove($event)\"\n    (pointerup)=\"onSheetPointerUp()\"\n      class=\"sm:hidden flex justify-center pt-2 pb-1 touch-none cursor-grab\"\n    >\n      <div class=\"h-1.5 w-10 rounded-full bg-base-300\"></div>\n    </div>\n  }\n\n  <!-- On mobile the whole header doubles as a swipe-to-dismiss surface (drags that\n       start on the close button are ignored). The grabber above is the visual cue. -->\n  <div [class.border-b]=\"config.kind !== ModalKind.WIZARD\"\n       [class.border-base-300]=\"config.kind !== ModalKind.WIZARD\"\n       (pointercancel)=\"onSheetPointerUp()\"\n       (pointerdown)=\"onSheetPointerDown($event)\"\n       (pointermove)=\"onSheetPointerMove($event)\"\n       (pointerup)=\"onSheetPointerUp()\"\n       [class.cursor-grab]=\"isMobileSheet\"\n       [class.sm:cursor-auto]=\"isMobileSheet\"\n       [class.sm:touch-auto]=\"isMobileSheet\"\n       [class.touch-none]=\"isMobileSheet\"\n       class=\"flex items-center justify-between p-6\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\" id=\"mn-modal-title\">{{ config.title }}</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <div [class]=\"isMobileSheet ? 'hidden sm:flex' : ''\">\n        <button\n          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'gray', hover: true, borderRadius: 'md' }\"\n          type=\"button\"\n          class=\"w-8 h-8\"\n          (click)=\"onCloseButtonClick()\"\n          aria-label=\"Close modal\"\n        >\n          <svg lucideX [size]=\"18\"></svg>\n        </button>\n      </div>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  @if (config.kind === ModalKind.WIZARD) {\n    <!-- Wizard manages its own internal scrolling so the steps header and footer\n         stay fixed while only the step body scrolls. No padding/scroll here. -->\n    <div class=\"flex-auto min-h-0 overflow-hidden flex flex-col\">\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"$any(modalRef)\"\n        class=\"flex-auto min-h-0 flex flex-col\"\n      ></mn-wizard-body>\n    </div>\n  } @else {\n    <div class=\"flex-1 overflow-y-auto px-6 pt-6\">\n      @if (config.kind === ModalKind.FORM) {\n        <mn-form-body\n          [config]=\"asForm(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block h-full\"\n        ></mn-form-body>\n      }\n\n      @if (config.kind === ModalKind.CONFIRMATION) {\n        <mn-confirmation-body\n          [config]=\"asConfirmation(config)\"\n          [modalRef]=\"$any(modalRef)\"\n        ></mn-confirmation-body>\n      }\n\n      @if (config.kind === ModalKind.CUSTOM) {\n        <mn-custom-body-host\n          [config]=\"asCustom(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block pb-6\"\n        ></mn-custom-body-host>\n      }\n    </div>\n  }\n\n  <!-- Custom Footer Actions (not for wizard modals, they render their own) -->\n  @if (hasCustomFooterActions && config.kind !== ModalKind.WIZARD) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      <mn-footer-actions\n        [actions]=\"config.footerActions || []\"\n        (actionClick)=\"onFooterAction($event)\"\n      ></mn-footer-actions>\n    </div>\n  }\n</div>\n", styles: [":host{--mn-sheet-ease: cubic-bezier(.32, .72, 0, 1);position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}.modal-container{transition:transform .35s var(--mn-sheet-ease)}.modal-container.sheet-dragging{transition:none}:host(.swipe-dismissing) .modal-container,:host(.swipe-dismissing).closing .modal-container{animation:none!important;transition:transform .3s var(--mn-sheet-ease)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slideUpIn{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes slideUpOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}:host(.anim-slide) .modal-container{animation:slideIn .2s ease-in-out}:host(.anim-fade) .modal-container{animation:fadeIn .2s ease-in-out}:host(.anim-zoom) .modal-container{animation:zoomIn .2s ease-in-out}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}@media(max-width:639.98px){:host(.mobile-sheet){align-items:flex-end}:host(.mobile-sheet) .modal-container{width:100%;max-width:100%;max-height:92vh;border-radius:1rem 1rem 0 0;animation:slideUpIn .35s var(--mn-sheet-ease)}:host(.mobile-sheet).anim-slide .modal-container,:host(.mobile-sheet).anim-fade .modal-container,:host(.mobile-sheet).anim-zoom .modal-container{animation:slideUpIn .35s var(--mn-sheet-ease)}:host(.mobile-sheet).closing .modal-container,:host(.mobile-sheet).closing.anim-slide .modal-container,:host(.mobile-sheet).closing.anim-fade .modal-container,:host(.mobile-sheet).closing.anim-zoom .modal-container{animation:slideUpOut .25s var(--mn-sheet-ease) forwards}}@media(prefers-reduced-motion:reduce){:host .modal-backdrop,:host .modal-container{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnWizardBodyComponent, selector: "mn-wizard-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnConfirmationBodyComponent, selector: "mn-confirmation-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFooterActionsComponent, selector: "mn-footer-actions", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnModalShellComponent, isStandalone: true, selector: "mn-modal-shell", inputs: { config: "config", modalRef: "modalRef" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" }, properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "@if (showBackdrop) {\n  <!-- The backdrop is a visual overlay \u2014 keyboard dismiss is handled at component level via Escape key -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<div\n  class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n  [class.sheet-dragging]=\"isDraggingSheet\"\n  [ngClass]=\"containerSizeClass\"\n  [style.height]=\"containerHeightStyle\"\n  [style.transform]=\"sheetDragY ? 'translateY(' + sheetDragY + 'px)' : null\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n  [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n  tabindex=\"-1\"\n  (click)=\"$event.stopPropagation()\"\n>\n  @if (isMobileSheet) {\n    <!-- Drag handle for swipe-to-dismiss, visible only on mobile bottom sheets -->\n    <div\n    (pointercancel)=\"onSheetPointerUp()\"\n    (pointerdown)=\"onSheetPointerDown($event)\"\n    (pointermove)=\"onSheetPointerMove($event)\"\n    (pointerup)=\"onSheetPointerUp()\"\n      class=\"sm:hidden flex justify-center pt-2 pb-1 touch-none cursor-grab\"\n    >\n      <div class=\"h-1.5 w-10 rounded-full bg-base-300\"></div>\n    </div>\n  }\n\n  <!-- On mobile the whole header doubles as a swipe-to-dismiss surface (drags that\n       start on the close button are ignored). The grabber above is the visual cue. -->\n  <div [class.border-b]=\"config.kind !== ModalKind.WIZARD\"\n       [class.border-base-300]=\"config.kind !== ModalKind.WIZARD\"\n       (pointercancel)=\"onSheetPointerUp()\"\n       (pointerdown)=\"onSheetPointerDown($event)\"\n       (pointermove)=\"onSheetPointerMove($event)\"\n       (pointerup)=\"onSheetPointerUp()\"\n       [class.cursor-grab]=\"isMobileSheet\"\n       [class.sm:cursor-auto]=\"isMobileSheet\"\n       [class.sm:touch-auto]=\"isMobileSheet\"\n       [class.touch-none]=\"isMobileSheet\"\n       class=\"flex items-center justify-between p-6\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\" id=\"mn-modal-title\">{{ config.title }}</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <div [class]=\"isMobileSheet ? 'hidden sm:flex' : ''\">\n        <button\n          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'gray', hover: true, borderRadius: 'md' }\"\n          type=\"button\"\n          class=\"w-8 h-8\"\n          (click)=\"onCloseButtonClick()\"\n          aria-label=\"Close modal\"\n        >\n          <svg lucideX [size]=\"18\"></svg>\n        </button>\n      </div>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  @if (config.kind === ModalKind.WIZARD) {\n    <!-- Wizard manages its own internal scrolling so the steps header and footer\n         stay fixed while only the step body scrolls. No padding/scroll here. -->\n    <div class=\"flex-auto min-h-0 overflow-hidden flex flex-col\">\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"$any(modalRef)\"\n        class=\"flex-auto min-h-0 flex flex-col\"\n      ></mn-wizard-body>\n    </div>\n  } @else {\n    <div class=\"flex-1 overflow-y-auto px-6 pt-6\">\n      @if (config.kind === ModalKind.FORM) {\n        <mn-form-body\n          [config]=\"asForm(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block h-full\"\n        ></mn-form-body>\n      }\n\n      @if (config.kind === ModalKind.CONFIRMATION) {\n        <mn-confirmation-body\n          [config]=\"asConfirmation(config)\"\n          [modalRef]=\"$any(modalRef)\"\n        ></mn-confirmation-body>\n      }\n\n      @if (config.kind === ModalKind.CUSTOM) {\n        <mn-custom-body-host\n          [config]=\"asCustom(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block pb-6\"\n        ></mn-custom-body-host>\n      }\n    </div>\n  }\n\n  <!-- Custom Footer Actions (not for wizard modals, they render their own) -->\n  @if (hasCustomFooterActions && config.kind !== ModalKind.WIZARD) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      <mn-footer-actions\n        [actions]=\"config.footerActions || []\"\n        (actionClick)=\"onFooterAction($event)\"\n      ></mn-footer-actions>\n    </div>\n  }\n</div>\n", styles: [":host{--mn-sheet-ease: cubic-bezier(.32, .72, 0, 1);position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}.modal-container{transition:transform .35s var(--mn-sheet-ease)}.modal-container.sheet-dragging{transition:none}:host(.swipe-dismissing) .modal-container,:host(.swipe-dismissing).closing .modal-container{animation:none!important;transition:transform .3s var(--mn-sheet-ease)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slideUpIn{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}:host(.anim-slide) .modal-container{animation:slideIn .2s ease-in-out}:host(.anim-fade) .modal-container{animation:fadeIn .2s ease-in-out}:host(.anim-zoom) .modal-container{animation:zoomIn .2s ease-in-out}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}@media(max-width:639.98px){:host(.mobile-sheet){align-items:flex-end}:host(.mobile-sheet) .modal-container{width:100%;max-width:100%;max-height:92vh;border-radius:1rem 1rem 0 0;animation:slideUpIn .45s var(--mn-sheet-ease)}:host(.mobile-sheet).anim-slide .modal-container,:host(.mobile-sheet).anim-fade .modal-container,:host(.mobile-sheet).anim-zoom .modal-container{animation:slideUpIn .45s var(--mn-sheet-ease)}:host(.mobile-sheet).closing .modal-container,:host(.mobile-sheet).closing.anim-slide .modal-container,:host(.mobile-sheet).closing.anim-fade .modal-container,:host(.mobile-sheet).closing.anim-zoom .modal-container{animation:none!important;transform:translateY(100%);opacity:0;transition:transform .45s var(--mn-sheet-ease),opacity .45s var(--mn-sheet-ease)}}@media(prefers-reduced-motion:reduce){:host .modal-backdrop,:host .modal-container{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnWizardBodyComponent, selector: "mn-wizard-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnConfirmationBodyComponent, selector: "mn-confirmation-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFooterActionsComponent, selector: "mn-footer-actions", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnModalShellComponent, decorators: [{
             type: Component,
@@ -6340,7 +6346,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         MnFooterActionsComponent,
                         MnButton,
                         LucideX,
-                    ], template: "@if (showBackdrop) {\n  <!-- The backdrop is a visual overlay \u2014 keyboard dismiss is handled at component level via Escape key -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<div\n  class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n  [class.sheet-dragging]=\"isDraggingSheet\"\n  [ngClass]=\"containerSizeClass\"\n  [style.height]=\"containerHeightStyle\"\n  [style.transform]=\"sheetDragY ? 'translateY(' + sheetDragY + 'px)' : null\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n  [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n  tabindex=\"-1\"\n  (click)=\"$event.stopPropagation()\"\n>\n  @if (isMobileSheet) {\n    <!-- Drag handle for swipe-to-dismiss, visible only on mobile bottom sheets -->\n    <div\n    (pointercancel)=\"onSheetPointerUp()\"\n    (pointerdown)=\"onSheetPointerDown($event)\"\n    (pointermove)=\"onSheetPointerMove($event)\"\n    (pointerup)=\"onSheetPointerUp()\"\n      class=\"sm:hidden flex justify-center pt-2 pb-1 touch-none cursor-grab\"\n    >\n      <div class=\"h-1.5 w-10 rounded-full bg-base-300\"></div>\n    </div>\n  }\n\n  <!-- On mobile the whole header doubles as a swipe-to-dismiss surface (drags that\n       start on the close button are ignored). The grabber above is the visual cue. -->\n  <div [class.border-b]=\"config.kind !== ModalKind.WIZARD\"\n       [class.border-base-300]=\"config.kind !== ModalKind.WIZARD\"\n       (pointercancel)=\"onSheetPointerUp()\"\n       (pointerdown)=\"onSheetPointerDown($event)\"\n       (pointermove)=\"onSheetPointerMove($event)\"\n       (pointerup)=\"onSheetPointerUp()\"\n       [class.cursor-grab]=\"isMobileSheet\"\n       [class.sm:cursor-auto]=\"isMobileSheet\"\n       [class.sm:touch-auto]=\"isMobileSheet\"\n       [class.touch-none]=\"isMobileSheet\"\n       class=\"flex items-center justify-between p-6\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\" id=\"mn-modal-title\">{{ config.title }}</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <div [class]=\"isMobileSheet ? 'hidden sm:flex' : ''\">\n        <button\n          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'gray', hover: true, borderRadius: 'md' }\"\n          type=\"button\"\n          class=\"w-8 h-8\"\n          (click)=\"onCloseButtonClick()\"\n          aria-label=\"Close modal\"\n        >\n          <svg lucideX [size]=\"18\"></svg>\n        </button>\n      </div>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  @if (config.kind === ModalKind.WIZARD) {\n    <!-- Wizard manages its own internal scrolling so the steps header and footer\n         stay fixed while only the step body scrolls. No padding/scroll here. -->\n    <div class=\"flex-auto min-h-0 overflow-hidden flex flex-col\">\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"$any(modalRef)\"\n        class=\"flex-auto min-h-0 flex flex-col\"\n      ></mn-wizard-body>\n    </div>\n  } @else {\n    <div class=\"flex-1 overflow-y-auto px-6 pt-6\">\n      @if (config.kind === ModalKind.FORM) {\n        <mn-form-body\n          [config]=\"asForm(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block h-full\"\n        ></mn-form-body>\n      }\n\n      @if (config.kind === ModalKind.CONFIRMATION) {\n        <mn-confirmation-body\n          [config]=\"asConfirmation(config)\"\n          [modalRef]=\"$any(modalRef)\"\n        ></mn-confirmation-body>\n      }\n\n      @if (config.kind === ModalKind.CUSTOM) {\n        <mn-custom-body-host\n          [config]=\"asCustom(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block pb-6\"\n        ></mn-custom-body-host>\n      }\n    </div>\n  }\n\n  <!-- Custom Footer Actions (not for wizard modals, they render their own) -->\n  @if (hasCustomFooterActions && config.kind !== ModalKind.WIZARD) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      <mn-footer-actions\n        [actions]=\"config.footerActions || []\"\n        (actionClick)=\"onFooterAction($event)\"\n      ></mn-footer-actions>\n    </div>\n  }\n</div>\n", styles: [":host{--mn-sheet-ease: cubic-bezier(.32, .72, 0, 1);position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}.modal-container{transition:transform .35s var(--mn-sheet-ease)}.modal-container.sheet-dragging{transition:none}:host(.swipe-dismissing) .modal-container,:host(.swipe-dismissing).closing .modal-container{animation:none!important;transition:transform .3s var(--mn-sheet-ease)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slideUpIn{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes slideUpOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}:host(.anim-slide) .modal-container{animation:slideIn .2s ease-in-out}:host(.anim-fade) .modal-container{animation:fadeIn .2s ease-in-out}:host(.anim-zoom) .modal-container{animation:zoomIn .2s ease-in-out}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}@media(max-width:639.98px){:host(.mobile-sheet){align-items:flex-end}:host(.mobile-sheet) .modal-container{width:100%;max-width:100%;max-height:92vh;border-radius:1rem 1rem 0 0;animation:slideUpIn .35s var(--mn-sheet-ease)}:host(.mobile-sheet).anim-slide .modal-container,:host(.mobile-sheet).anim-fade .modal-container,:host(.mobile-sheet).anim-zoom .modal-container{animation:slideUpIn .35s var(--mn-sheet-ease)}:host(.mobile-sheet).closing .modal-container,:host(.mobile-sheet).closing.anim-slide .modal-container,:host(.mobile-sheet).closing.anim-fade .modal-container,:host(.mobile-sheet).closing.anim-zoom .modal-container{animation:slideUpOut .25s var(--mn-sheet-ease) forwards}}@media(prefers-reduced-motion:reduce){:host .modal-backdrop,:host .modal-container{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}\n"] }]
+                    ], template: "@if (showBackdrop) {\n  <!-- The backdrop is a visual overlay \u2014 keyboard dismiss is handled at component level via Escape key -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<div\n  class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n  [class.sheet-dragging]=\"isDraggingSheet\"\n  [ngClass]=\"containerSizeClass\"\n  [style.height]=\"containerHeightStyle\"\n  [style.transform]=\"sheetDragY ? 'translateY(' + sheetDragY + 'px)' : null\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n  [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n  tabindex=\"-1\"\n  (click)=\"$event.stopPropagation()\"\n>\n  @if (isMobileSheet) {\n    <!-- Drag handle for swipe-to-dismiss, visible only on mobile bottom sheets -->\n    <div\n    (pointercancel)=\"onSheetPointerUp()\"\n    (pointerdown)=\"onSheetPointerDown($event)\"\n    (pointermove)=\"onSheetPointerMove($event)\"\n    (pointerup)=\"onSheetPointerUp()\"\n      class=\"sm:hidden flex justify-center pt-2 pb-1 touch-none cursor-grab\"\n    >\n      <div class=\"h-1.5 w-10 rounded-full bg-base-300\"></div>\n    </div>\n  }\n\n  <!-- On mobile the whole header doubles as a swipe-to-dismiss surface (drags that\n       start on the close button are ignored). The grabber above is the visual cue. -->\n  <div [class.border-b]=\"config.kind !== ModalKind.WIZARD\"\n       [class.border-base-300]=\"config.kind !== ModalKind.WIZARD\"\n       (pointercancel)=\"onSheetPointerUp()\"\n       (pointerdown)=\"onSheetPointerDown($event)\"\n       (pointermove)=\"onSheetPointerMove($event)\"\n       (pointerup)=\"onSheetPointerUp()\"\n       [class.cursor-grab]=\"isMobileSheet\"\n       [class.sm:cursor-auto]=\"isMobileSheet\"\n       [class.sm:touch-auto]=\"isMobileSheet\"\n       [class.touch-none]=\"isMobileSheet\"\n       class=\"flex items-center justify-between p-6\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\" id=\"mn-modal-title\">{{ config.title }}</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <div [class]=\"isMobileSheet ? 'hidden sm:flex' : ''\">\n        <button\n          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'gray', hover: true, borderRadius: 'md' }\"\n          type=\"button\"\n          class=\"w-8 h-8\"\n          (click)=\"onCloseButtonClick()\"\n          aria-label=\"Close modal\"\n        >\n          <svg lucideX [size]=\"18\"></svg>\n        </button>\n      </div>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  @if (config.kind === ModalKind.WIZARD) {\n    <!-- Wizard manages its own internal scrolling so the steps header and footer\n         stay fixed while only the step body scrolls. No padding/scroll here. -->\n    <div class=\"flex-auto min-h-0 overflow-hidden flex flex-col\">\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"$any(modalRef)\"\n        class=\"flex-auto min-h-0 flex flex-col\"\n      ></mn-wizard-body>\n    </div>\n  } @else {\n    <div class=\"flex-1 overflow-y-auto px-6 pt-6\">\n      @if (config.kind === ModalKind.FORM) {\n        <mn-form-body\n          [config]=\"asForm(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block h-full\"\n        ></mn-form-body>\n      }\n\n      @if (config.kind === ModalKind.CONFIRMATION) {\n        <mn-confirmation-body\n          [config]=\"asConfirmation(config)\"\n          [modalRef]=\"$any(modalRef)\"\n        ></mn-confirmation-body>\n      }\n\n      @if (config.kind === ModalKind.CUSTOM) {\n        <mn-custom-body-host\n          [config]=\"asCustom(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block pb-6\"\n        ></mn-custom-body-host>\n      }\n    </div>\n  }\n\n  <!-- Custom Footer Actions (not for wizard modals, they render their own) -->\n  @if (hasCustomFooterActions && config.kind !== ModalKind.WIZARD) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      <mn-footer-actions\n        [actions]=\"config.footerActions || []\"\n        (actionClick)=\"onFooterAction($event)\"\n      ></mn-footer-actions>\n    </div>\n  }\n</div>\n", styles: [":host{--mn-sheet-ease: cubic-bezier(.32, .72, 0, 1);position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}.modal-container{transition:transform .35s var(--mn-sheet-ease)}.modal-container.sheet-dragging{transition:none}:host(.swipe-dismissing) .modal-container,:host(.swipe-dismissing).closing .modal-container{animation:none!important;transition:transform .3s var(--mn-sheet-ease)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slideUpIn{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}:host(.anim-slide) .modal-container{animation:slideIn .2s ease-in-out}:host(.anim-fade) .modal-container{animation:fadeIn .2s ease-in-out}:host(.anim-zoom) .modal-container{animation:zoomIn .2s ease-in-out}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}@media(max-width:639.98px){:host(.mobile-sheet){align-items:flex-end}:host(.mobile-sheet) .modal-container{width:100%;max-width:100%;max-height:92vh;border-radius:1rem 1rem 0 0;animation:slideUpIn .45s var(--mn-sheet-ease)}:host(.mobile-sheet).anim-slide .modal-container,:host(.mobile-sheet).anim-fade .modal-container,:host(.mobile-sheet).anim-zoom .modal-container{animation:slideUpIn .45s var(--mn-sheet-ease)}:host(.mobile-sheet).closing .modal-container,:host(.mobile-sheet).closing.anim-slide .modal-container,:host(.mobile-sheet).closing.anim-fade .modal-container,:host(.mobile-sheet).closing.anim-zoom .modal-container{animation:none!important;transform:translateY(100%);opacity:0;transition:transform .45s var(--mn-sheet-ease),opacity .45s var(--mn-sheet-ease)}}@media(prefers-reduced-motion:reduce){:host .modal-backdrop,:host .modal-container{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], modalRef: [{
@@ -6440,11 +6446,11 @@ class MnList extends MnSelectableCollectionBase {
         }
     }
     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: search + custom toolbar template -->\n<div class=\"flex flex-row items-center justify-end gap-2 mb-3\">\n  @if (dataSource.canSearch) {\n    <div>\n      <input\n        type=\"text\"\n        class=\"input input-sm rounded border border-base-300 bg-base-200 px-3 py-1.5 text-sm text-base-content placeholder-base-content/50 focus:outline-none focus:border-brand-500 w-full max-w-xs\"\n        [placeholder]=\"dataSource.searchPlaceholder ?? 'Search...'\"\n        (input)=\"onSearch($any($event.target).value)\"\n        aria-label=\"Search list\"\n      />\n    </div>\n  }\n  @if (dataSource.toolbarTemplate) {\n    <ng-container [ngTemplateOutlet]=\"dataSource.toolbarTemplate\"></ng-container>\n  }\n</div>\n\n<!-- List wrapper -->\n<div\n  #collectionBody\n  [style.min-height.px]=\"lockedMinHeight || null\"\n  class=\"w-full\"\n  [class.border]=\"dataSource.appearance?.bordered\"\n  [class.border-base-300]=\"dataSource.appearance?.bordered\"\n  [class.rounded]=\"dataSource.appearance?.bordered\"\n  role=\"list\"\n  aria-label=\"Data list\"\n>\n  <!-- Loading state -->\n  @if (dataSource.isDataLoading) {\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 {\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            <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: "component", type: MnCheckbox, selector: "mn-lib-checkbox", inputs: ["props", "checked"], outputs: ["checkedChange"] }, { 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"] }], 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: search + custom toolbar template -->\n<div class=\"flex flex-row items-center justify-end gap-2 mb-3\">\n  @if (dataSource.canSearch) {\n    <div>\n      <input\n        type=\"text\"\n        class=\"input input-sm rounded border border-base-300 bg-base-200 px-3 py-1.5 text-sm text-base-content placeholder-base-content/50 focus:outline-none focus:border-primary-500 w-full max-w-xs\"\n        [placeholder]=\"dataSource.searchPlaceholder ?? 'Search...'\"\n        (input)=\"onSearch($any($event.target).value)\"\n        aria-label=\"Search list\"\n      />\n    </div>\n  }\n  @if (dataSource.toolbarTemplate) {\n    <ng-container [ngTemplateOutlet]=\"dataSource.toolbarTemplate\"></ng-container>\n  }\n</div>\n\n<!-- List wrapper -->\n<div\n  #collectionBody\n  [style.min-height.px]=\"lockedMinHeight || null\"\n  class=\"w-full\"\n  [class.border]=\"dataSource.appearance?.bordered\"\n  [class.border-base-300]=\"dataSource.appearance?.bordered\"\n  [class.rounded]=\"dataSource.appearance?.bordered\"\n  role=\"list\"\n  aria-label=\"Data list\"\n>\n  <!-- Loading state -->\n  @if (dataSource.isDataLoading) {\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 {\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            <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: "component", type: MnCheckbox, selector: "mn-lib-checkbox", inputs: ["props", "checked"], outputs: ["checkedChange"] }, { 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"] }], 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, MnCheckbox, MnSkeleton, MnCollectionPagination], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Toolbar: search + custom toolbar template -->\n<div class=\"flex flex-row items-center justify-end gap-2 mb-3\">\n  @if (dataSource.canSearch) {\n    <div>\n      <input\n        type=\"text\"\n        class=\"input input-sm rounded border border-base-300 bg-base-200 px-3 py-1.5 text-sm text-base-content placeholder-base-content/50 focus:outline-none focus:border-brand-500 w-full max-w-xs\"\n        [placeholder]=\"dataSource.searchPlaceholder ?? 'Search...'\"\n        (input)=\"onSearch($any($event.target).value)\"\n        aria-label=\"Search list\"\n      />\n    </div>\n  }\n  @if (dataSource.toolbarTemplate) {\n    <ng-container [ngTemplateOutlet]=\"dataSource.toolbarTemplate\"></ng-container>\n  }\n</div>\n\n<!-- List wrapper -->\n<div\n  #collectionBody\n  [style.min-height.px]=\"lockedMinHeight || null\"\n  class=\"w-full\"\n  [class.border]=\"dataSource.appearance?.bordered\"\n  [class.border-base-300]=\"dataSource.appearance?.bordered\"\n  [class.rounded]=\"dataSource.appearance?.bordered\"\n  role=\"list\"\n  aria-label=\"Data list\"\n>\n  <!-- Loading state -->\n  @if (dataSource.isDataLoading) {\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 {\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            <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, MnCheckbox, MnSkeleton, MnCollectionPagination], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Toolbar: search + custom toolbar template -->\n<div class=\"flex flex-row items-center justify-end gap-2 mb-3\">\n  @if (dataSource.canSearch) {\n    <div>\n      <input\n        type=\"text\"\n        class=\"input input-sm rounded border border-base-300 bg-base-200 px-3 py-1.5 text-sm text-base-content placeholder-base-content/50 focus:outline-none focus:border-primary-500 w-full max-w-xs\"\n        [placeholder]=\"dataSource.searchPlaceholder ?? 'Search...'\"\n        (input)=\"onSearch($any($event.target).value)\"\n        aria-label=\"Search list\"\n      />\n    </div>\n  }\n  @if (dataSource.toolbarTemplate) {\n    <ng-container [ngTemplateOutlet]=\"dataSource.toolbarTemplate\"></ng-container>\n  }\n</div>\n\n<!-- List wrapper -->\n<div\n  #collectionBody\n  [style.min-height.px]=\"lockedMinHeight || null\"\n  class=\"w-full\"\n  [class.border]=\"dataSource.appearance?.bordered\"\n  [class.border-base-300]=\"dataSource.appearance?.bordered\"\n  [class.rounded]=\"dataSource.appearance?.bordered\"\n  role=\"list\"\n  aria-label=\"Data list\"\n>\n  <!-- Loading state -->\n  @if (dataSource.isDataLoading) {\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 {\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            <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Select all (multi-select) -->\n    @if (isMultiSelect && filteredItems.length > 0) {\n      <div class=\"flex items-center gap-2 px-4 py-2 bg-base-200 text-sm\">\n        <mn-lib-checkbox\n          (checkedChange)=\"toggleAll()\"\n          [checked]=\"allSelected\"\n          [props]=\"{ id: 'mn-list-select-all', label: 'Select all', size: 'sm' }\"\n        ></mn-lib-checkbox>\n      </div>\n      @if (dataSource.appearance?.dividers !== false) {\n        <div class=\"border-b border-base-300\"></div>\n      }\n    }\n\n    <!-- Data items -->\n    @for (item of paginatedItems; track trackByID($index, item); let odd = $odd; let last = $last) {\n      <div\n        class=\"flex items-center gap-2 bg-base-100 transition-colors duration-150\"\n        [ngClass]=\"{'bg-primary/10': isSelected(item)}\"\n        [class.bg-base-200]=\"!isSelected(item) && odd && dataSource.appearance?.dividers !== false\"\n        [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n        [class.cursor-pointer]=\"!!dataSource.onItemClick\"\n        [class.px-4]=\"true\"\n        [class.py-3]=\"!dataSource.appearance?.compact\"\n        [class.py-2]=\"dataSource.appearance?.compact\"\n        role=\"listitem\"\n        (keyup.enter)=\"onItemClick(item)\"\n        (click)=\"onItemClick(item)\"\n        [attr.tabindex]=\"dataSource.onItemClick ? 0 : null\"\n      >\n        <!-- Selection checkbox -->\n        @if (hasSelection) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <div (click)=\"$event.stopPropagation()\" class=\"shrink-0\">\n            <mn-lib-checkbox\n              (checkedChange)=\"toggle(item)\"\n              [checked]=\"isSelected(item)\"\n              [props]=\"{ id: 'mn-list-item-' + $index, size: 'sm' }\"\n            ></mn-lib-checkbox>\n          </div>\n        }\n\n        <!-- Item content via template -->\n        <div class=\"flex-1 min-w-0\">\n          <ng-container\n            [ngTemplateOutlet]=\"dataSource.itemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, data: item }\"\n          ></ng-container>\n        </div>\n      </div>\n      @if (!last && (dataSource.appearance?.dividers !== false)) {\n        <div class=\"border-b border-base-300\"></div>\n      }\n    }\n  }\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-list\"\n></mn-collection-pagination>\n" }]
         }], propDecorators: { itemClick: [{
                 type: Output
             }], collectionBody: [{