mn-angular-lib 1.0.169 → 1.0.171

package/fesm2022/mn-angular-lib.mjs

@@ -1052,11 +1052,11 @@ class MnAlertOutletComponent {
             && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnAlertOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnAlertOutletComponent, isStandalone: true, selector: "mn-alert-outlet", inputs: { swipeAxis: "swipeAxis", template: "template" }, ngImport: i0, template: "<div class=\"fixed top-4 left-0 right-0 z-[9999] flex flex-col w-full px-2 sm:px-0 sm:left-auto sm:right-4 sm:max-w-sm\">\n  @for (v of views(); track trackById($index, v)) {\n    <div\n      class=\"mn-alert-item\"\n      [class.dragging]=\"v.dragging\"\n      [class.leaving]=\"v.leaving\"\n      [style.touch-action]=\"touchAction\"\n      [style.transform]=\"itemTransform(v)\"\n      [style.opacity]=\"itemOpacity(v)\"\n      (pointerdown)=\"onPointerDown($event, v)\"\n      (pointermove)=\"onPointerMove($event, v)\"\n      (pointerup)=\"onPointerUp($event, v)\"\n      (pointercancel)=\"onPointerUp($event, v)\"\n    >\n      <div class=\"mn-alert-inner\">\n        @if (template) {\n          <ng-container\n            [ngTemplateOutlet]=\"template\"\n            [ngTemplateOutletContext]=\"contextFor(v.alert)\">\n          </ng-container>\n        } @else {\n          <div [class.extra]=\"v.alert.cssClass\" [class]=\"getAlertClasses(v.alert)\" class=\"relative overflow-hidden\">\n            <div class=\"flex-1 min-w-0 pr-8\">\n              <h4 class=\"font-semibold text-sm\">{{ v.alert.title }}</h4>\n              @if (v.alert.subTitle) {\n                <p class=\"text-sm mt-1 opacity-90 leading-tight\">{{ v.alert.subTitle }}</p>\n              }\n            </div>\n            <button\n              [attr.aria-label]=\"closeLabel\"\n              mnButton\n              [data]=\"{ size: 'md', variant: 'text' }\"\n              (click)=\"dismissAlert(v.alert.id)\"\n              class=\"absolute top-2 right-2 shrink-0 !text-current hover:!bg-current/10\"\n              type=\"button\"\n            >\n              &times;\n            </button>\n            @if (countdownDuration(v); as ms) {\n              <span aria-hidden=\"true\" class=\"mn-alert-progress\">\n                <span [style.animation-duration.ms]=\"ms\" class=\"mn-alert-progress-bar\"></span>\n              </span>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{--mn-alert-exit: .32s}.mn-alert-item{display:grid;grid-template-rows:1fr;margin-bottom:.75rem;touch-action:pan-y;cursor:grab;transition:transform .28s cubic-bezier(.22,1,.36,1),opacity var(--mn-alert-exit) ease,grid-template-rows var(--mn-alert-exit) cubic-bezier(.4,0,.2,1),margin-bottom var(--mn-alert-exit) cubic-bezier(.4,0,.2,1)}.mn-alert-item:last-child{margin-bottom:0}.mn-alert-item.dragging{transition:none;cursor:grabbing;-webkit-user-select:none;user-select:none}.mn-alert-inner{min-height:0}.mn-alert-item.leaving{grid-template-rows:0fr;opacity:0;margin-bottom:0;pointer-events:none}.mn-alert-item.leaving .mn-alert-inner{overflow:hidden}.mn-alert-progress{position:absolute;left:0;right:0;bottom:0;height:3px;overflow:hidden;background-color:color-mix(in srgb,currentColor 18%,transparent);pointer-events:none}.mn-alert-progress-bar{display:block;height:100%;background-color:currentColor;opacity:.55;transform-origin:left center;animation-name:mn-alert-countdown;animation-timing-function:linear;animation-fill-mode:forwards}@keyframes mn-alert-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(prefers-reduced-motion:reduce){.mn-alert-item{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnAlertOutletComponent, isStandalone: true, selector: "mn-alert-outlet", inputs: { swipeAxis: "swipeAxis", template: "template" }, ngImport: i0, template: "<!-- The stack is a polite live region so every toast is announced; an error toast upgrades itself to an alert. -->\n<div aria-live=\"polite\" role=\"status\" class=\"fixed top-4 left-0 right-0 z-[9999] flex flex-col w-full px-2 sm:px-0 sm:left-auto sm:right-4 sm:max-w-sm\">\n  @for (v of views(); track trackById($index, v)) {\n    <div\n      class=\"mn-alert-item\"\n      [attr.role]=\"v.alert.kind === 'error' ? 'alert' : null\"\n      [class.dragging]=\"v.dragging\"\n      [class.leaving]=\"v.leaving\"\n      [style.touch-action]=\"touchAction\"\n      [style.transform]=\"itemTransform(v)\"\n      [style.opacity]=\"itemOpacity(v)\"\n      (pointerdown)=\"onPointerDown($event, v)\"\n      (pointermove)=\"onPointerMove($event, v)\"\n      (pointerup)=\"onPointerUp($event, v)\"\n      (pointercancel)=\"onPointerUp($event, v)\"\n    >\n      <div class=\"mn-alert-inner\">\n        @if (template) {\n          <ng-container\n            [ngTemplateOutlet]=\"template\"\n            [ngTemplateOutletContext]=\"contextFor(v.alert)\">\n          </ng-container>\n        } @else {\n          <div [class.extra]=\"v.alert.cssClass\" [class]=\"getAlertClasses(v.alert)\" class=\"relative overflow-hidden\">\n            <div class=\"flex-1 min-w-0 pr-8\">\n              <h4 class=\"font-semibold text-sm\">{{ v.alert.title }}</h4>\n              @if (v.alert.subTitle) {\n                <p class=\"text-sm mt-1 opacity-90 leading-tight\">{{ v.alert.subTitle }}</p>\n              }\n            </div>\n            <button\n              [attr.aria-label]=\"closeLabel\"\n              mnButton\n              [data]=\"{ size: 'md', variant: 'text' }\"\n              (click)=\"dismissAlert(v.alert.id)\"\n              class=\"absolute top-2 right-2 shrink-0 !text-current hover:!bg-current/10\"\n              type=\"button\"\n            >\n              &times;\n            </button>\n            @if (countdownDuration(v); as ms) {\n              <span aria-hidden=\"true\" class=\"mn-alert-progress\">\n                <span [style.animation-duration.ms]=\"ms\" class=\"mn-alert-progress-bar\"></span>\n              </span>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{--mn-alert-exit: .32s}.mn-alert-item{display:grid;grid-template-rows:1fr;margin-bottom:.75rem;touch-action:pan-y;cursor:grab;transition:transform .28s cubic-bezier(.22,1,.36,1),opacity var(--mn-alert-exit) ease,grid-template-rows var(--mn-alert-exit) cubic-bezier(.4,0,.2,1),margin-bottom var(--mn-alert-exit) cubic-bezier(.4,0,.2,1)}.mn-alert-item:last-child{margin-bottom:0}.mn-alert-item.dragging{transition:none;cursor:grabbing;-webkit-user-select:none;user-select:none}.mn-alert-inner{min-height:0}.mn-alert-item.leaving{grid-template-rows:0fr;opacity:0;margin-bottom:0;pointer-events:none}.mn-alert-item.leaving .mn-alert-inner{overflow:hidden}.mn-alert-progress{position:absolute;left:0;right:0;bottom:0;height:3px;overflow:hidden;background-color:color-mix(in srgb,currentColor 18%,transparent);pointer-events:none}.mn-alert-progress-bar{display:block;height:100%;background-color:currentColor;opacity:.55;transform-origin:left center;animation-name:mn-alert-countdown;animation-timing-function:linear;animation-fill-mode:forwards}@keyframes mn-alert-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(prefers-reduced-motion:reduce){.mn-alert-item{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnAlertOutletComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-alert-outlet', standalone: true, imports: [CommonModule, MnButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fixed top-4 left-0 right-0 z-[9999] flex flex-col w-full px-2 sm:px-0 sm:left-auto sm:right-4 sm:max-w-sm\">\n  @for (v of views(); track trackById($index, v)) {\n    <div\n      class=\"mn-alert-item\"\n      [class.dragging]=\"v.dragging\"\n      [class.leaving]=\"v.leaving\"\n      [style.touch-action]=\"touchAction\"\n      [style.transform]=\"itemTransform(v)\"\n      [style.opacity]=\"itemOpacity(v)\"\n      (pointerdown)=\"onPointerDown($event, v)\"\n      (pointermove)=\"onPointerMove($event, v)\"\n      (pointerup)=\"onPointerUp($event, v)\"\n      (pointercancel)=\"onPointerUp($event, v)\"\n    >\n      <div class=\"mn-alert-inner\">\n        @if (template) {\n          <ng-container\n            [ngTemplateOutlet]=\"template\"\n            [ngTemplateOutletContext]=\"contextFor(v.alert)\">\n          </ng-container>\n        } @else {\n          <div [class.extra]=\"v.alert.cssClass\" [class]=\"getAlertClasses(v.alert)\" class=\"relative overflow-hidden\">\n            <div class=\"flex-1 min-w-0 pr-8\">\n              <h4 class=\"font-semibold text-sm\">{{ v.alert.title }}</h4>\n              @if (v.alert.subTitle) {\n                <p class=\"text-sm mt-1 opacity-90 leading-tight\">{{ v.alert.subTitle }}</p>\n              }\n            </div>\n            <button\n              [attr.aria-label]=\"closeLabel\"\n              mnButton\n              [data]=\"{ size: 'md', variant: 'text' }\"\n              (click)=\"dismissAlert(v.alert.id)\"\n              class=\"absolute top-2 right-2 shrink-0 !text-current hover:!bg-current/10\"\n              type=\"button\"\n            >\n              &times;\n            </button>\n            @if (countdownDuration(v); as ms) {\n              <span aria-hidden=\"true\" class=\"mn-alert-progress\">\n                <span [style.animation-duration.ms]=\"ms\" class=\"mn-alert-progress-bar\"></span>\n              </span>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{--mn-alert-exit: .32s}.mn-alert-item{display:grid;grid-template-rows:1fr;margin-bottom:.75rem;touch-action:pan-y;cursor:grab;transition:transform .28s cubic-bezier(.22,1,.36,1),opacity var(--mn-alert-exit) ease,grid-template-rows var(--mn-alert-exit) cubic-bezier(.4,0,.2,1),margin-bottom var(--mn-alert-exit) cubic-bezier(.4,0,.2,1)}.mn-alert-item:last-child{margin-bottom:0}.mn-alert-item.dragging{transition:none;cursor:grabbing;-webkit-user-select:none;user-select:none}.mn-alert-inner{min-height:0}.mn-alert-item.leaving{grid-template-rows:0fr;opacity:0;margin-bottom:0;pointer-events:none}.mn-alert-item.leaving .mn-alert-inner{overflow:hidden}.mn-alert-progress{position:absolute;left:0;right:0;bottom:0;height:3px;overflow:hidden;background-color:color-mix(in srgb,currentColor 18%,transparent);pointer-events:none}.mn-alert-progress-bar{display:block;height:100%;background-color:currentColor;opacity:.55;transform-origin:left center;animation-name:mn-alert-countdown;animation-timing-function:linear;animation-fill-mode:forwards}@keyframes mn-alert-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(prefers-reduced-motion:reduce){.mn-alert-item{transition:none}}\n"] }]
+            args: [{ selector: 'mn-alert-outlet', standalone: true, imports: [CommonModule, MnButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- The stack is a polite live region so every toast is announced; an error toast upgrades itself to an alert. -->\n<div aria-live=\"polite\" role=\"status\" class=\"fixed top-4 left-0 right-0 z-[9999] flex flex-col w-full px-2 sm:px-0 sm:left-auto sm:right-4 sm:max-w-sm\">\n  @for (v of views(); track trackById($index, v)) {\n    <div\n      class=\"mn-alert-item\"\n      [attr.role]=\"v.alert.kind === 'error' ? 'alert' : null\"\n      [class.dragging]=\"v.dragging\"\n      [class.leaving]=\"v.leaving\"\n      [style.touch-action]=\"touchAction\"\n      [style.transform]=\"itemTransform(v)\"\n      [style.opacity]=\"itemOpacity(v)\"\n      (pointerdown)=\"onPointerDown($event, v)\"\n      (pointermove)=\"onPointerMove($event, v)\"\n      (pointerup)=\"onPointerUp($event, v)\"\n      (pointercancel)=\"onPointerUp($event, v)\"\n    >\n      <div class=\"mn-alert-inner\">\n        @if (template) {\n          <ng-container\n            [ngTemplateOutlet]=\"template\"\n            [ngTemplateOutletContext]=\"contextFor(v.alert)\">\n          </ng-container>\n        } @else {\n          <div [class.extra]=\"v.alert.cssClass\" [class]=\"getAlertClasses(v.alert)\" class=\"relative overflow-hidden\">\n            <div class=\"flex-1 min-w-0 pr-8\">\n              <h4 class=\"font-semibold text-sm\">{{ v.alert.title }}</h4>\n              @if (v.alert.subTitle) {\n                <p class=\"text-sm mt-1 opacity-90 leading-tight\">{{ v.alert.subTitle }}</p>\n              }\n            </div>\n            <button\n              [attr.aria-label]=\"closeLabel\"\n              mnButton\n              [data]=\"{ size: 'md', variant: 'text' }\"\n              (click)=\"dismissAlert(v.alert.id)\"\n              class=\"absolute top-2 right-2 shrink-0 !text-current hover:!bg-current/10\"\n              type=\"button\"\n            >\n              &times;\n            </button>\n            @if (countdownDuration(v); as ms) {\n              <span aria-hidden=\"true\" class=\"mn-alert-progress\">\n                <span [style.animation-duration.ms]=\"ms\" class=\"mn-alert-progress-bar\"></span>\n              </span>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{--mn-alert-exit: .32s}.mn-alert-item{display:grid;grid-template-rows:1fr;margin-bottom:.75rem;touch-action:pan-y;cursor:grab;transition:transform .28s cubic-bezier(.22,1,.36,1),opacity var(--mn-alert-exit) ease,grid-template-rows var(--mn-alert-exit) cubic-bezier(.4,0,.2,1),margin-bottom var(--mn-alert-exit) cubic-bezier(.4,0,.2,1)}.mn-alert-item:last-child{margin-bottom:0}.mn-alert-item.dragging{transition:none;cursor:grabbing;-webkit-user-select:none;user-select:none}.mn-alert-inner{min-height:0}.mn-alert-item.leaving{grid-template-rows:0fr;opacity:0;margin-bottom:0;pointer-events:none}.mn-alert-item.leaving .mn-alert-inner{overflow:hidden}.mn-alert-progress{position:absolute;left:0;right:0;bottom:0;height:3px;overflow:hidden;background-color:color-mix(in srgb,currentColor 18%,transparent);pointer-events:none}.mn-alert-progress-bar{display:block;height:100%;background-color:currentColor;opacity:.55;transform-origin:left center;animation-name:mn-alert-countdown;animation-timing-function:linear;animation-fill-mode:forwards}@keyframes mn-alert-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(prefers-reduced-motion:reduce){.mn-alert-item{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { swipeAxis: [{
                 type: Input
             }], template: [{
@@ -1091,13 +1091,16 @@ const mnBadgeVariants = tv({
         },
     },
     compoundVariants: [
-        // Default (light/transparent)
-        { variant: 'default', color: 'primary', class: 'bg-primary/20 border-primary text-primary' },
-        { variant: 'default', color: 'secondary', class: 'bg-secondary/20 border-secondary text-secondary' },
-        { variant: 'default', color: 'danger', class: 'bg-error/20 border-error text-error' },
-        { variant: 'default', color: 'warning', class: 'bg-warning/20 border-warning text-warning' },
-        { variant: 'default', color: 'success', class: 'bg-success/20 border-success text-success' },
-        { variant: 'default', color: 'accent', class: 'bg-accent/20 border-accent text-accent' },
+        // Default (tinted). A 10% wash with a 40% border, and the text in `--color-<colour>-text`
+        // when the consuming app defines one (the darker/lighter shade it uses for readable coloured
+        // text), falling back to the base colour otherwise. The former 20% wash with the base colour
+        // as text sat at 2–4:1 on both light and dark grounds, under the WCAG AA 4.5:1 minimum.
+        { variant: 'default', color: 'primary', class: 'bg-primary/10 border-primary/40 text-(--color-primary-text,var(--color-primary))' },
+        { variant: 'default', color: 'secondary', class: 'bg-secondary/10 border-secondary/40 text-(--color-secondary-text,var(--color-secondary))' },
+        { variant: 'default', color: 'danger', class: 'bg-error/10 border-error/40 text-(--color-error-text,var(--color-error))' },
+        { variant: 'default', color: 'warning', class: 'bg-warning/10 border-warning/40 text-(--color-warning-text,var(--color-warning))' },
+        { variant: 'default', color: 'success', class: 'bg-success/10 border-success/40 text-(--color-success-text,var(--color-success))' },
+        { variant: 'default', color: 'accent', class: 'bg-accent/10 border-accent/40 text-(--color-accent-text,var(--color-accent))' },
         { variant: 'default', color: 'lightgray', class: 'bg-base-content/10 border-base-content/70 text-base-content/70' },
         // Fill (solid)
         { variant: 'fill', color: 'primary', class: 'bg-primary border-primary text-primary-content' },
@@ -1372,11 +1375,11 @@ class MnErrorMessage {
     errorMessage;
     id;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnErrorMessage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: MnErrorMessage, isStandalone: true, selector: "mn-error-message", inputs: { errorMessage: "errorMessage", id: "id" }, ngImport: i0, template: "<div [id]=\"id + '-error'\" class=\"text-red-500 mt-2 text-sm\">\n  {{ errorMessage }}\n</div>\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: MnErrorMessage, isStandalone: true, selector: "mn-error-message", inputs: { errorMessage: "errorMessage", id: "id" }, ngImport: i0, template: "<div [id]=\"id + '-error'\" role=\"alert\" class=\"text-error mt-2 text-sm\">\n  {{ errorMessage }}\n</div>\n" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnErrorMessage, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-error-message', imports: [], template: "<div [id]=\"id + '-error'\" class=\"text-red-500 mt-2 text-sm\">\n  {{ errorMessage }}\n</div>\n" }]
+            args: [{ selector: 'mn-error-message', imports: [], template: "<div [id]=\"id + '-error'\" role=\"alert\" class=\"text-error mt-2 text-sm\">\n  {{ errorMessage }}\n</div>\n" }]
         }], propDecorators: { errorMessage: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1960,6 +1963,15 @@ class MnInputField {
      * Determines whether to show error messages.
      * Errors are shown when the control is invalid and has been touched or modified.
      */
+    /**
+     * Ids of the rendered error messages, space-separated, for `aria-describedby`. Mirrors the
+     * `{id}-error` / `{id}-{index}-error` ids `mn-error-message` renders in single and show-all mode.
+     */
+    get errorDescribedBy() {
+        return this.props.showAllErrors
+            ? this.errorMessages.map((_, index) => `${this.resolvedId}-${index}-error`).join(' ')
+            : `${this.resolvedId}-error`;
+    }
     get showError() {
         const c = this.control;
         return !!c && c.invalid && (c.touched || c.dirty);
@@ -2065,7 +2077,7 @@ class MnInputField {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnInputField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnInputField, isStandalone: true, selector: "mn-lib-input-field", inputs: { props: "props" }, host: { properties: { "style.display": "props?.fullWidth ? 'block' : null", "style.width": "props?.fullWidth ? '100%' : null" } }, ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  <!-- Label -->\n  @if (uiConfig.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500 \">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input Element -->\n  <input\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"props.type\"\n    [attr.placeholder]=\"uiConfig.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.autocomplete]=\"props.autocomplete || null\"\n    [attr.min]=\"minAttr\"\n    [attr.max]=\"maxAttr\"\n    [ngModel]=\"value\"\n    [ngClass]=\"inputClasses\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (search)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n\n  <!-- Error Messages -->\n  @if (showError) {\n    <!-- Show all errors mode -->\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-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  }\n</div>\n", styles: ["input::-webkit-search-cancel-button{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnInputField, isStandalone: true, selector: "mn-lib-input-field", inputs: { props: "props" }, host: { properties: { "style.display": "props?.fullWidth ? 'block' : null", "style.width": "props?.fullWidth ? '100%' : null" } }, ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  <!-- Label -->\n  @if (uiConfig.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-error\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input Element -->\n  <input\n    [id]=\"resolvedId\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"props.type\"\n    [attr.placeholder]=\"uiConfig.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? errorDescribedBy : null\"\n    [disabled]=\"isDisabled\"\n    [attr.autocomplete]=\"props.autocomplete || null\"\n    [attr.min]=\"minAttr\"\n    [attr.max]=\"maxAttr\"\n    [ngModel]=\"value\"\n    [ngClass]=\"inputClasses\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (search)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n\n  <!-- Error Messages -->\n  @if (showError) {\n    <!-- Show all errors mode -->\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-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  }\n</div>\n", styles: ["input::-webkit-search-cancel-button{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnInputField, decorators: [{
             type: Component,
@@ -2078,7 +2090,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         // real width when fullWidth is requested so 100% has something to fill.
                         '[style.display]': "props?.fullWidth ? 'block' : null",
                         '[style.width]': "props?.fullWidth ? '100%' : null",
-                    }, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  <!-- Label -->\n  @if (uiConfig.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500 \">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input Element -->\n  <input\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"props.type\"\n    [attr.placeholder]=\"uiConfig.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.autocomplete]=\"props.autocomplete || null\"\n    [attr.min]=\"minAttr\"\n    [attr.max]=\"maxAttr\"\n    [ngModel]=\"value\"\n    [ngClass]=\"inputClasses\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (search)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n\n  <!-- Error Messages -->\n  @if (showError) {\n    <!-- Show all errors mode -->\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-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  }\n</div>\n", styles: ["input::-webkit-search-cancel-button{cursor:pointer}\n"] }]
+                    }, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  <!-- Label -->\n  @if (uiConfig.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-error\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input Element -->\n  <input\n    [id]=\"resolvedId\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"props.type\"\n    [attr.placeholder]=\"uiConfig.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? errorDescribedBy : null\"\n    [disabled]=\"isDisabled\"\n    [attr.autocomplete]=\"props.autocomplete || null\"\n    [attr.min]=\"minAttr\"\n    [attr.max]=\"maxAttr\"\n    [ngModel]=\"value\"\n    [ngClass]=\"inputClasses\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (search)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n\n  <!-- Error Messages -->\n  @if (showError) {\n    <!-- Show all errors mode -->\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-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  }\n</div>\n", styles: ["input::-webkit-search-cancel-button{cursor:pointer}\n"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input,
                 args: [{ required: true }]
@@ -2357,6 +2369,15 @@ class MnTextarea {
      * Determines whether to show error messages.
      * Errors are shown when the control is invalid and has been touched or modified.
      */
+    /**
+     * Ids of the rendered error messages, space-separated, for `aria-describedby`. Mirrors the
+     * `{id}-error` / `{id}-{index}-error` ids `mn-error-message` renders in single and show-all mode.
+     */
+    get errorDescribedBy() {
+        return this.props.showAllErrors
+            ? this.errorMessages.map((_, index) => `${this.resolvedId}-${index}-error`).join(' ')
+            : `${this.resolvedId}-error`;
+    }
     get showError() {
         const c = this.control;
         return !!c && c.invalid && (c.touched || c.dirty);
@@ -2454,11 +2475,11 @@ class MnTextarea {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTextarea, isStandalone: true, selector: "mn-lib-textarea", inputs: { props: "props" }, ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  <!-- Label -->\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  <!-- Textarea Element -->\n  <textarea\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [attr.placeholder]=\"uiConfig.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.autocomplete]=\"props.autocomplete || null\"\n    [attr.rows]=\"props.rows ?? null\"\n    [attr.cols]=\"props.cols ?? null\"\n    [ngClass]=\"textareaClasses\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  >{{ value ?? '' }}</textarea>\n\n  <!-- Error Messages -->\n  @if (showError) {\n    <!-- Show all errors mode -->\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n    @if (errorMessage !== null) {\n      <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTextarea, isStandalone: true, selector: "mn-lib-textarea", inputs: { props: "props" }, ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  <!-- Label -->\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-error\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Textarea Element -->\n  <textarea\n    [id]=\"resolvedId\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [attr.name]=\"resolvedName\"\n    [attr.placeholder]=\"uiConfig.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? errorDescribedBy : null\"\n    [disabled]=\"isDisabled\"\n    [attr.autocomplete]=\"props.autocomplete || null\"\n    [attr.rows]=\"props.rows ?? null\"\n    [attr.cols]=\"props.cols ?? null\"\n    [ngClass]=\"textareaClasses\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  >{{ value ?? '' }}</textarea>\n\n  <!-- Error Messages -->\n  @if (showError) {\n    <!-- Show all errors mode -->\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTextarea, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-lib-textarea', standalone: true, imports: [NgClass, MnErrorMessage], template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  <!-- Label -->\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  <!-- Textarea Element -->\n  <textarea\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [attr.placeholder]=\"uiConfig.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.autocomplete]=\"props.autocomplete || null\"\n    [attr.rows]=\"props.rows ?? null\"\n    [attr.cols]=\"props.cols ?? null\"\n    [ngClass]=\"textareaClasses\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  >{{ value ?? '' }}</textarea>\n\n  <!-- Error Messages -->\n  @if (showError) {\n    <!-- Show all errors mode -->\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-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-textarea', standalone: true, imports: [NgClass, MnErrorMessage], template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  <!-- Label -->\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-error\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Textarea Element -->\n  <textarea\n    [id]=\"resolvedId\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [attr.name]=\"resolvedName\"\n    [attr.placeholder]=\"uiConfig.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? errorDescribedBy : null\"\n    [disabled]=\"isDisabled\"\n    [attr.autocomplete]=\"props.autocomplete || null\"\n    [attr.rows]=\"props.rows ?? null\"\n    [attr.cols]=\"props.cols ?? null\"\n    [ngClass]=\"textareaClasses\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  >{{ value ?? '' }}</textarea>\n\n  <!-- Error Messages -->\n  @if (showError) {\n    <!-- Show all errors mode -->\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-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 }]
@@ -3004,11 +3025,11 @@ class MnFileInput {
         return segment || 'image';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnFileInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnFileInput, isStandalone: true, selector: "mn-lib-file-input", inputs: { props: "props" }, outputs: { filesChange: "filesChange", cleared: "cleared" }, ngImport: i0, template: "<!--\n  Drag handling sits on the wrapper so a drop anywhere inside the control counts.\n  onDragEnter/onDragLeave balance out as the drag crosses children, and\n  acceptsDrag() ignores the modes that have no drop target.\n-->\n<div\n  (dragenter)=\"onDragEnter($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.w-full]=\"props.fullWidth !== false && displayMode !== 'compact'\"\n  class=\"flex flex-col\">\n  <!-- Label -->\n  @if (uiConfig.label) {\n    <label [attr.for]=\"resolvedId\" class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\">\n      <p>{{ uiConfig.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Hidden native file input shared by every trigger -->\n  <input\n    #fileInput\n    (change)=\"onFileSelected($event)\"\n    [accept]=\"acceptAttr\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || null\"\n    [attr.multiple]=\"props.multiple || null\"\n    [attr.name]=\"resolvedName\"\n    [disabled]=\"isDisabled\"\n    [id]=\"resolvedId\"\n    class=\"hidden\"\n    type=\"file\"\n  />\n\n  @switch (displayMode) {\n    <!-- Compact: inline button + filename chips -->\n    @case ('compact') {\n      <div class=\"flex flex-wrap items-center gap-2\">\n        <button\n          (click)=\"fileInput.click()\"\n          [disabled]=\"isDisabled\"\n          [ngClass]=\"controlClasses\"\n          class=\"inline-flex items-center gap-2 cursor-pointer hover:bg-base-200\"\n          type=\"button\">\n          <svg lucideUpload [size]=\"18\"></svg>\n          <span class=\"text-sm\">{{ uiConfig.replaceLabel }}</span>\n        </button>\n        @for (item of displayItems(); track itemKey(item)) {\n          <span class=\"inline-flex items-center gap-1 text-sm text-base-content/70\">\n            @if (item.isImage && item.previewUrl) {\n              <img [src]=\"item.previewUrl\" alt=\"\" class=\"h-6 w-6 rounded object-cover\"/>\n            } @else {\n              <svg lucideFile [size]=\"16\" class=\"text-base-content/50\"></svg>\n            }\n            <span class=\"max-w-40 truncate\">{{ item.name }}</span>\n            <button\n              (click)=\"item.existing ? removeExisting(item.index) : removeFile(item.index)\"\n              [attr.aria-label]=\"uiConfig.removeLabel\"\n              class=\"text-base-content/50 hover:text-error cursor-pointer\"\n              type=\"button\">\n              <svg lucideX [size]=\"14\"></svg>\n            </button>\n          </span>\n        }\n      </div>\n    }\n\n    <!-- List: compact rows of file icon + name + size -->\n    @case ('list') {\n    <div class=\"relative flex flex-col\">\n      <button\n        (click)=\"fileInput.click()\"\n        [disabled]=\"isDisabled\"\n        [ngClass]=\"controlClasses\"\n        class=\"flex flex-row items-center justify-center gap-2 cursor-pointer hover:bg-base-200\"\n        type=\"button\">\n        <svg lucideUpload [size]=\"18\"></svg>\n        <span class=\"text-sm\">{{ uiConfig.replaceLabel }}</span>\n      </button>\n      @if (displayItems().length > 0) {\n        <div class=\"mt-2 flex flex-col gap-1\">\n          @for (item of displayItems(); track itemKey(item)) {\n            <div class=\"flex items-center gap-2 rounded-lg bg-base-200 px-3 py-1.5 text-sm\">\n              <svg lucideFile [size]=\"16\" class=\"text-base-content/50\"></svg>\n              <span class=\"flex-1 truncate text-base-content\">{{ item.name }}</span>\n              @if (item.sizeLabel) {\n                <span class=\"text-base-content/50\">{{ item.sizeLabel }}</span>\n              }\n              <button\n                (click)=\"item.existing ? removeExisting(item.index) : removeFile(item.index)\"\n                [attr.aria-label]=\"uiConfig.removeLabel\"\n                class=\"text-base-content/50 hover:text-error cursor-pointer\"\n                type=\"button\">\n                <svg lucideX [size]=\"16\"></svg>\n              </button>\n            </div>\n          }\n        </div>\n      }\n      @if (isDragging()) {\n        <ng-container [ngTemplateOutlet]=\"dropOverlay\"></ng-container>\n      }\n    </div>\n    }\n\n    <!-- Thumbnail: grid of tiles with overlay remove + add tile -->\n    @case ('thumbnail') {\n    <div class=\"relative flex flex-wrap gap-3\">\n        @for (item of displayItems(); track itemKey(item)) {\n          <div class=\"relative h-24 w-24 overflow-hidden rounded-xl border border-base-300 bg-base-100\">\n            @if (item.isImage && item.previewUrl) {\n              <img [src]=\"item.previewUrl\" alt=\"\" class=\"h-full w-full object-cover\"/>\n            } @else {\n              <div class=\"flex h-full w-full flex-col items-center justify-center gap-1 p-1 text-center\">\n                <svg lucideFile [size]=\"22\" class=\"text-base-content/50\"></svg>\n                <span class=\"w-full truncate text-xs text-base-content/60\">{{ item.name }}</span>\n              </div>\n            }\n            <button\n              (click)=\"item.existing ? removeExisting(item.index) : removeFile(item.index)\"\n              [attr.aria-label]=\"uiConfig.removeLabel\"\n              class=\"inline-flex h-6 w-6 items-center justify-center rounded-full cursor-pointer transition-colors absolute top-1 right-1 border-none bg-black/60 text-white hover:bg-black/80\"\n              type=\"button\">\n              <svg lucideX [size]=\"14\"></svg>\n            </button>\n          </div>\n        }\n        @if (props.multiple || displayItems().length === 0) {\n          <button\n            (click)=\"fileInput.click()\"\n            [disabled]=\"isDisabled\"\n            class=\"flex h-24 w-24 flex-col items-center justify-center gap-1 rounded-xl border-2 border-dashed border-base-300 text-base-content/50 hover:border-primary cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed\"\n            type=\"button\">\n            <svg lucideImagePlus [size]=\"22\"></svg>\n          </button>\n        }\n      @if (isDragging()) {\n        <ng-container [ngTemplateOutlet]=\"dropOverlay\"></ng-container>\n      }\n      </div>\n    }\n\n    <!-- Dropzone (default): large dashed area + preview rows -->\n    @default {\n      <button\n        (click)=\"fileInput.click()\"\n        [disabled]=\"isDisabled\"\n        [ngClass]=\"controlClasses\"\n        type=\"button\">\n        <!-- Inert so a drag crossing the icon/hint never reads as leaving the zone -->\n        <span aria-live=\"polite\" class=\"pointer-events-none flex flex-col items-center gap-2\">\n          @if (isDragging()) {\n            <svg [size]=\"28\" class=\"animate-bounce text-primary\" lucideUpload></svg>\n            <span class=\"text-sm font-medium text-primary\">{{ uiConfig.dropActiveHint }}</span>\n          } @else {\n            <svg [size]=\"28\" class=\"text-base-content/40\" lucideImagePlus></svg>\n            <span class=\"text-sm text-base-content/60\">{{ uiConfig.dropzoneHint }}</span>\n          }\n        </span>\n      </button>\n      @if (displayItems().length > 0) {\n        <div class=\"mt-2 flex flex-col gap-2\">\n          @for (item of displayItems(); track itemKey(item)) {\n            <div class=\"flex items-center gap-3 rounded-lg bg-base-200 p-2\">\n              @if (item.isImage && item.previewUrl) {\n                <img [src]=\"item.previewUrl\" alt=\"\" class=\"h-12 w-12 rounded-md object-cover\"/>\n              } @else {\n                <svg lucideFile [size]=\"24\" class=\"text-base-content/50\"></svg>\n              }\n              <span class=\"flex-1 truncate text-sm text-base-content\">{{ item.name }}</span>\n              @if (item.sizeLabel) {\n                <span class=\"text-sm text-base-content/50\">{{ item.sizeLabel }}</span>\n              }\n              <button\n                (click)=\"item.existing ? removeExisting(item.index) : removeFile(item.index)\"\n                [attr.aria-label]=\"uiConfig.removeLabel\"\n                class=\"inline-flex h-8 w-8 items-center justify-center rounded-full cursor-pointer transition-colors text-error hover:bg-error/10\"\n                type=\"button\">\n                <svg lucideTrash2 [size]=\"16\"></svg>\n              </button>\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n\n  <!-- Selection-limit error (accept / maxSize / maxFiles) -->\n  @if (internalError(); as msg) {\n    <mn-error-message [errorMessage]=\"msg\" [id]=\"resolvedId + '-selection'\"></mn-error-message>\n  }\n\n  <!-- Control validation errors -->\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-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 if (errorMessage !== null) {\n      <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n    }\n  }\n</div>\n\n<!--\n  \"Release to drop\" cover for the modes that render their own layout instead of a\n  dropzone. Absolutely positioned so arming it never shifts the layout, and inert\n  so the drag keeps reaching the elements underneath.\n-->\n<ng-template #dropOverlay>\n  <div\n    aria-live=\"polite\"\n    class=\"pointer-events-none absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed border-primary bg-base-100/90 text-center\">\n    <svg [size]=\"24\" class=\"animate-bounce text-primary\" lucideUpload></svg>\n    <span class=\"px-2 text-sm font-medium text-primary\">{{ uiConfig.dropActiveHint }}</span>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }, { kind: "component", type: LucideFile, selector: "svg[lucideFile]" }, { kind: "component", type: LucideImagePlus, selector: "svg[lucideImagePlus]" }, { kind: "component", type: LucideTrash2, selector: "svg[lucideTrash2]" }, { kind: "component", type: LucideUpload, selector: "svg[lucideUpload]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnFileInput, isStandalone: true, selector: "mn-lib-file-input", inputs: { props: "props" }, outputs: { filesChange: "filesChange", cleared: "cleared" }, ngImport: i0, template: "<!--\n  Drag handling sits on the wrapper so a drop anywhere inside the control counts.\n  onDragEnter/onDragLeave balance out as the drag crosses children, and\n  acceptsDrag() ignores the modes that have no drop target.\n-->\n<div\n  (dragenter)=\"onDragEnter($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.w-full]=\"props.fullWidth !== false && displayMode !== 'compact'\"\n  class=\"flex flex-col\">\n  <!-- Label -->\n  @if (uiConfig.label) {\n    <label [attr.for]=\"resolvedId\" class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\">\n      <p>{{ uiConfig.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-error\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Hidden native file input shared by every trigger -->\n  <input\n    #fileInput\n    (change)=\"onFileSelected($event)\"\n    [accept]=\"acceptAttr\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || null\"\n    [attr.multiple]=\"props.multiple || null\"\n    [attr.name]=\"resolvedName\"\n    [disabled]=\"isDisabled\"\n    [id]=\"resolvedId\"\n    [attr.aria-required]=\"isRequired() || null\"\n    class=\"hidden\"\n    type=\"file\"\n  />\n\n  @switch (displayMode) {\n    <!-- Compact: inline button + filename chips -->\n    @case ('compact') {\n      <div class=\"flex flex-wrap items-center gap-2\">\n        <button\n          (click)=\"fileInput.click()\"\n          [disabled]=\"isDisabled\"\n          [ngClass]=\"controlClasses\"\n          class=\"inline-flex items-center gap-2 cursor-pointer hover:bg-base-200\"\n          type=\"button\">\n          <svg lucideUpload [size]=\"18\"></svg>\n          <span class=\"text-sm\">{{ uiConfig.replaceLabel }}</span>\n        </button>\n        @for (item of displayItems(); track itemKey(item)) {\n          <span class=\"inline-flex items-center gap-1 text-sm text-base-content/70\">\n            @if (item.isImage && item.previewUrl) {\n              <img [src]=\"item.previewUrl\" alt=\"\" class=\"h-6 w-6 rounded object-cover\"/>\n            } @else {\n              <svg lucideFile [size]=\"16\" class=\"text-base-content/50\"></svg>\n            }\n            <span class=\"max-w-40 truncate\">{{ item.name }}</span>\n            <button\n              (click)=\"item.existing ? removeExisting(item.index) : removeFile(item.index)\"\n              [attr.aria-label]=\"uiConfig.removeLabel\"\n              class=\"text-base-content/50 hover:text-error cursor-pointer\"\n              type=\"button\">\n              <svg lucideX [size]=\"14\"></svg>\n            </button>\n          </span>\n        }\n      </div>\n    }\n\n    <!-- List: compact rows of file icon + name + size -->\n    @case ('list') {\n    <div class=\"relative flex flex-col\">\n      <button\n        (click)=\"fileInput.click()\"\n        [disabled]=\"isDisabled\"\n        [ngClass]=\"controlClasses\"\n        class=\"flex flex-row items-center justify-center gap-2 cursor-pointer hover:bg-base-200\"\n        type=\"button\">\n        <svg lucideUpload [size]=\"18\"></svg>\n        <span class=\"text-sm\">{{ uiConfig.replaceLabel }}</span>\n      </button>\n      @if (displayItems().length > 0) {\n        <div class=\"mt-2 flex flex-col gap-1\">\n          @for (item of displayItems(); track itemKey(item)) {\n            <div class=\"flex items-center gap-2 rounded-lg bg-base-200 px-3 py-1.5 text-sm\">\n              <svg lucideFile [size]=\"16\" class=\"text-base-content/50\"></svg>\n              <span class=\"flex-1 truncate text-base-content\">{{ item.name }}</span>\n              @if (item.sizeLabel) {\n                <span class=\"text-base-content/50\">{{ item.sizeLabel }}</span>\n              }\n              <button\n                (click)=\"item.existing ? removeExisting(item.index) : removeFile(item.index)\"\n                [attr.aria-label]=\"uiConfig.removeLabel\"\n                class=\"text-base-content/50 hover:text-error cursor-pointer\"\n                type=\"button\">\n                <svg lucideX [size]=\"16\"></svg>\n              </button>\n            </div>\n          }\n        </div>\n      }\n      @if (isDragging()) {\n        <ng-container [ngTemplateOutlet]=\"dropOverlay\"></ng-container>\n      }\n    </div>\n    }\n\n    <!-- Thumbnail: grid of tiles with overlay remove + add tile -->\n    @case ('thumbnail') {\n    <div class=\"relative flex flex-wrap gap-3\">\n        @for (item of displayItems(); track itemKey(item)) {\n          <div class=\"relative h-24 w-24 overflow-hidden rounded-xl border border-base-300 bg-base-100\">\n            @if (item.isImage && item.previewUrl) {\n              <img [src]=\"item.previewUrl\" alt=\"\" class=\"h-full w-full object-cover\"/>\n            } @else {\n              <div class=\"flex h-full w-full flex-col items-center justify-center gap-1 p-1 text-center\">\n                <svg lucideFile [size]=\"22\" class=\"text-base-content/50\"></svg>\n                <span class=\"w-full truncate text-xs text-base-content/60\">{{ item.name }}</span>\n              </div>\n            }\n            <button\n              (click)=\"item.existing ? removeExisting(item.index) : removeFile(item.index)\"\n              [attr.aria-label]=\"uiConfig.removeLabel\"\n              class=\"inline-flex h-6 w-6 items-center justify-center rounded-full cursor-pointer transition-colors absolute top-1 right-1 border-none bg-black/60 text-white hover:bg-black/80\"\n              type=\"button\">\n              <svg lucideX [size]=\"14\"></svg>\n            </button>\n          </div>\n        }\n        @if (props.multiple || displayItems().length === 0) {\n          <button\n            (click)=\"fileInput.click()\"\n            [disabled]=\"isDisabled\"\n            class=\"flex h-24 w-24 flex-col items-center justify-center gap-1 rounded-xl border-2 border-dashed border-base-300 text-base-content/50 hover:border-primary cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed\"\n            type=\"button\">\n            <svg lucideImagePlus [size]=\"22\"></svg>\n          </button>\n        }\n      @if (isDragging()) {\n        <ng-container [ngTemplateOutlet]=\"dropOverlay\"></ng-container>\n      }\n      </div>\n    }\n\n    <!-- Dropzone (default): large dashed area + preview rows -->\n    @default {\n      <button\n        (click)=\"fileInput.click()\"\n        [disabled]=\"isDisabled\"\n        [ngClass]=\"controlClasses\"\n        type=\"button\">\n        <!-- Inert so a drag crossing the icon/hint never reads as leaving the zone -->\n        <span aria-live=\"polite\" class=\"pointer-events-none flex flex-col items-center gap-2\">\n          @if (isDragging()) {\n            <svg [size]=\"28\" class=\"animate-bounce text-primary\" lucideUpload></svg>\n            <span class=\"text-sm font-medium text-primary\">{{ uiConfig.dropActiveHint }}</span>\n          } @else {\n            <svg [size]=\"28\" class=\"text-base-content/40\" lucideImagePlus></svg>\n            <span class=\"text-sm text-base-content/60\">{{ uiConfig.dropzoneHint }}</span>\n          }\n        </span>\n      </button>\n      @if (displayItems().length > 0) {\n        <div class=\"mt-2 flex flex-col gap-2\">\n          @for (item of displayItems(); track itemKey(item)) {\n            <div class=\"flex items-center gap-3 rounded-lg bg-base-200 p-2\">\n              @if (item.isImage && item.previewUrl) {\n                <img [src]=\"item.previewUrl\" alt=\"\" class=\"h-12 w-12 rounded-md object-cover\"/>\n              } @else {\n                <svg lucideFile [size]=\"24\" class=\"text-base-content/50\"></svg>\n              }\n              <span class=\"flex-1 truncate text-sm text-base-content\">{{ item.name }}</span>\n              @if (item.sizeLabel) {\n                <span class=\"text-sm text-base-content/50\">{{ item.sizeLabel }}</span>\n              }\n              <button\n                (click)=\"item.existing ? removeExisting(item.index) : removeFile(item.index)\"\n                [attr.aria-label]=\"uiConfig.removeLabel\"\n                class=\"inline-flex h-8 w-8 items-center justify-center rounded-full cursor-pointer transition-colors text-error hover:bg-error/10\"\n                type=\"button\">\n                <svg lucideTrash2 [size]=\"16\"></svg>\n              </button>\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n\n  <!-- Selection-limit error (accept / maxSize / maxFiles) -->\n  @if (internalError(); as msg) {\n    <mn-error-message [errorMessage]=\"msg\" [id]=\"resolvedId + '-selection'\"></mn-error-message>\n  }\n\n  <!-- Control validation errors -->\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-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 if (errorMessage !== null) {\n      <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n    }\n  }\n</div>\n\n<!--\n  \"Release to drop\" cover for the modes that render their own layout instead of a\n  dropzone. Absolutely positioned so arming it never shifts the layout, and inert\n  so the drag keeps reaching the elements underneath.\n-->\n<ng-template #dropOverlay>\n  <div\n    aria-live=\"polite\"\n    class=\"pointer-events-none absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed border-primary bg-base-100/90 text-center\">\n    <svg [size]=\"24\" class=\"animate-bounce text-primary\" lucideUpload></svg>\n    <span class=\"px-2 text-sm font-medium text-primary\">{{ uiConfig.dropActiveHint }}</span>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }, { kind: "component", type: LucideFile, selector: "svg[lucideFile]" }, { kind: "component", type: LucideImagePlus, selector: "svg[lucideImagePlus]" }, { kind: "component", type: LucideTrash2, selector: "svg[lucideTrash2]" }, { kind: "component", type: LucideUpload, selector: "svg[lucideUpload]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnFileInput, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-lib-file-input', standalone: true, imports: [CommonModule, NgClass, MnErrorMessage, LucideFile, LucideImagePlus, LucideTrash2, LucideUpload, LucideX], template: "<!--\n  Drag handling sits on the wrapper so a drop anywhere inside the control counts.\n  onDragEnter/onDragLeave balance out as the drag crosses children, and\n  acceptsDrag() ignores the modes that have no drop target.\n-->\n<div\n  (dragenter)=\"onDragEnter($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.w-full]=\"props.fullWidth !== false && displayMode !== 'compact'\"\n  class=\"flex flex-col\">\n  <!-- Label -->\n  @if (uiConfig.label) {\n    <label [attr.for]=\"resolvedId\" class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\">\n      <p>{{ uiConfig.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Hidden native file input shared by every trigger -->\n  <input\n    #fileInput\n    (change)=\"onFileSelected($event)\"\n    [accept]=\"acceptAttr\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || null\"\n    [attr.multiple]=\"props.multiple || null\"\n    [attr.name]=\"resolvedName\"\n    [disabled]=\"isDisabled\"\n    [id]=\"resolvedId\"\n    class=\"hidden\"\n    type=\"file\"\n  />\n\n  @switch (displayMode) {\n    <!-- Compact: inline button + filename chips -->\n    @case ('compact') {\n      <div class=\"flex flex-wrap items-center gap-2\">\n        <button\n          (click)=\"fileInput.click()\"\n          [disabled]=\"isDisabled\"\n          [ngClass]=\"controlClasses\"\n          class=\"inline-flex items-center gap-2 cursor-pointer hover:bg-base-200\"\n          type=\"button\">\n          <svg lucideUpload [size]=\"18\"></svg>\n          <span class=\"text-sm\">{{ uiConfig.replaceLabel }}</span>\n        </button>\n        @for (item of displayItems(); track itemKey(item)) {\n          <span class=\"inline-flex items-center gap-1 text-sm text-base-content/70\">\n            @if (item.isImage && item.previewUrl) {\n              <img [src]=\"item.previewUrl\" alt=\"\" class=\"h-6 w-6 rounded object-cover\"/>\n            } @else {\n              <svg lucideFile [size]=\"16\" class=\"text-base-content/50\"></svg>\n            }\n            <span class=\"max-w-40 truncate\">{{ item.name }}</span>\n            <button\n              (click)=\"item.existing ? removeExisting(item.index) : removeFile(item.index)\"\n              [attr.aria-label]=\"uiConfig.removeLabel\"\n              class=\"text-base-content/50 hover:text-error cursor-pointer\"\n              type=\"button\">\n              <svg lucideX [size]=\"14\"></svg>\n            </button>\n          </span>\n        }\n      </div>\n    }\n\n    <!-- List: compact rows of file icon + name + size -->\n    @case ('list') {\n    <div class=\"relative flex flex-col\">\n      <button\n        (click)=\"fileInput.click()\"\n        [disabled]=\"isDisabled\"\n        [ngClass]=\"controlClasses\"\n        class=\"flex flex-row items-center justify-center gap-2 cursor-pointer hover:bg-base-200\"\n        type=\"button\">\n        <svg lucideUpload [size]=\"18\"></svg>\n        <span class=\"text-sm\">{{ uiConfig.replaceLabel }}</span>\n      </button>\n      @if (displayItems().length > 0) {\n        <div class=\"mt-2 flex flex-col gap-1\">\n          @for (item of displayItems(); track itemKey(item)) {\n            <div class=\"flex items-center gap-2 rounded-lg bg-base-200 px-3 py-1.5 text-sm\">\n              <svg lucideFile [size]=\"16\" class=\"text-base-content/50\"></svg>\n              <span class=\"flex-1 truncate text-base-content\">{{ item.name }}</span>\n              @if (item.sizeLabel) {\n                <span class=\"text-base-content/50\">{{ item.sizeLabel }}</span>\n              }\n              <button\n                (click)=\"item.existing ? removeExisting(item.index) : removeFile(item.index)\"\n                [attr.aria-label]=\"uiConfig.removeLabel\"\n                class=\"text-base-content/50 hover:text-error cursor-pointer\"\n                type=\"button\">\n                <svg lucideX [size]=\"16\"></svg>\n              </button>\n            </div>\n          }\n        </div>\n      }\n      @if (isDragging()) {\n        <ng-container [ngTemplateOutlet]=\"dropOverlay\"></ng-container>\n      }\n    </div>\n    }\n\n    <!-- Thumbnail: grid of tiles with overlay remove + add tile -->\n    @case ('thumbnail') {\n    <div class=\"relative flex flex-wrap gap-3\">\n        @for (item of displayItems(); track itemKey(item)) {\n          <div class=\"relative h-24 w-24 overflow-hidden rounded-xl border border-base-300 bg-base-100\">\n            @if (item.isImage && item.previewUrl) {\n              <img [src]=\"item.previewUrl\" alt=\"\" class=\"h-full w-full object-cover\"/>\n            } @else {\n              <div class=\"flex h-full w-full flex-col items-center justify-center gap-1 p-1 text-center\">\n                <svg lucideFile [size]=\"22\" class=\"text-base-content/50\"></svg>\n                <span class=\"w-full truncate text-xs text-base-content/60\">{{ item.name }}</span>\n              </div>\n            }\n            <button\n              (click)=\"item.existing ? removeExisting(item.index) : removeFile(item.index)\"\n              [attr.aria-label]=\"uiConfig.removeLabel\"\n              class=\"inline-flex h-6 w-6 items-center justify-center rounded-full cursor-pointer transition-colors absolute top-1 right-1 border-none bg-black/60 text-white hover:bg-black/80\"\n              type=\"button\">\n              <svg lucideX [size]=\"14\"></svg>\n            </button>\n          </div>\n        }\n        @if (props.multiple || displayItems().length === 0) {\n          <button\n            (click)=\"fileInput.click()\"\n            [disabled]=\"isDisabled\"\n            class=\"flex h-24 w-24 flex-col items-center justify-center gap-1 rounded-xl border-2 border-dashed border-base-300 text-base-content/50 hover:border-primary cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed\"\n            type=\"button\">\n            <svg lucideImagePlus [size]=\"22\"></svg>\n          </button>\n        }\n      @if (isDragging()) {\n        <ng-container [ngTemplateOutlet]=\"dropOverlay\"></ng-container>\n      }\n      </div>\n    }\n\n    <!-- Dropzone (default): large dashed area + preview rows -->\n    @default {\n      <button\n        (click)=\"fileInput.click()\"\n        [disabled]=\"isDisabled\"\n        [ngClass]=\"controlClasses\"\n        type=\"button\">\n        <!-- Inert so a drag crossing the icon/hint never reads as leaving the zone -->\n        <span aria-live=\"polite\" class=\"pointer-events-none flex flex-col items-center gap-2\">\n          @if (isDragging()) {\n            <svg [size]=\"28\" class=\"animate-bounce text-primary\" lucideUpload></svg>\n            <span class=\"text-sm font-medium text-primary\">{{ uiConfig.dropActiveHint }}</span>\n          } @else {\n            <svg [size]=\"28\" class=\"text-base-content/40\" lucideImagePlus></svg>\n            <span class=\"text-sm text-base-content/60\">{{ uiConfig.dropzoneHint }}</span>\n          }\n        </span>\n      </button>\n      @if (displayItems().length > 0) {\n        <div class=\"mt-2 flex flex-col gap-2\">\n          @for (item of displayItems(); track itemKey(item)) {\n            <div class=\"flex items-center gap-3 rounded-lg bg-base-200 p-2\">\n              @if (item.isImage && item.previewUrl) {\n                <img [src]=\"item.previewUrl\" alt=\"\" class=\"h-12 w-12 rounded-md object-cover\"/>\n              } @else {\n                <svg lucideFile [size]=\"24\" class=\"text-base-content/50\"></svg>\n              }\n              <span class=\"flex-1 truncate text-sm text-base-content\">{{ item.name }}</span>\n              @if (item.sizeLabel) {\n                <span class=\"text-sm text-base-content/50\">{{ item.sizeLabel }}</span>\n              }\n              <button\n                (click)=\"item.existing ? removeExisting(item.index) : removeFile(item.index)\"\n                [attr.aria-label]=\"uiConfig.removeLabel\"\n                class=\"inline-flex h-8 w-8 items-center justify-center rounded-full cursor-pointer transition-colors text-error hover:bg-error/10\"\n                type=\"button\">\n                <svg lucideTrash2 [size]=\"16\"></svg>\n              </button>\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n\n  <!-- Selection-limit error (accept / maxSize / maxFiles) -->\n  @if (internalError(); as msg) {\n    <mn-error-message [errorMessage]=\"msg\" [id]=\"resolvedId + '-selection'\"></mn-error-message>\n  }\n\n  <!-- Control validation errors -->\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-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 if (errorMessage !== null) {\n      <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n    }\n  }\n</div>\n\n<!--\n  \"Release to drop\" cover for the modes that render their own layout instead of a\n  dropzone. Absolutely positioned so arming it never shifts the layout, and inert\n  so the drag keeps reaching the elements underneath.\n-->\n<ng-template #dropOverlay>\n  <div\n    aria-live=\"polite\"\n    class=\"pointer-events-none absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed border-primary bg-base-100/90 text-center\">\n    <svg [size]=\"24\" class=\"animate-bounce text-primary\" lucideUpload></svg>\n    <span class=\"px-2 text-sm font-medium text-primary\">{{ uiConfig.dropActiveHint }}</span>\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'mn-lib-file-input', standalone: true, imports: [CommonModule, NgClass, MnErrorMessage, LucideFile, LucideImagePlus, LucideTrash2, LucideUpload, LucideX], template: "<!--\n  Drag handling sits on the wrapper so a drop anywhere inside the control counts.\n  onDragEnter/onDragLeave balance out as the drag crosses children, and\n  acceptsDrag() ignores the modes that have no drop target.\n-->\n<div\n  (dragenter)=\"onDragEnter($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.w-full]=\"props.fullWidth !== false && displayMode !== 'compact'\"\n  class=\"flex flex-col\">\n  <!-- Label -->\n  @if (uiConfig.label) {\n    <label [attr.for]=\"resolvedId\" class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\">\n      <p>{{ uiConfig.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-error\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Hidden native file input shared by every trigger -->\n  <input\n    #fileInput\n    (change)=\"onFileSelected($event)\"\n    [accept]=\"acceptAttr\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || null\"\n    [attr.multiple]=\"props.multiple || null\"\n    [attr.name]=\"resolvedName\"\n    [disabled]=\"isDisabled\"\n    [id]=\"resolvedId\"\n    [attr.aria-required]=\"isRequired() || null\"\n    class=\"hidden\"\n    type=\"file\"\n  />\n\n  @switch (displayMode) {\n    <!-- Compact: inline button + filename chips -->\n    @case ('compact') {\n      <div class=\"flex flex-wrap items-center gap-2\">\n        <button\n          (click)=\"fileInput.click()\"\n          [disabled]=\"isDisabled\"\n          [ngClass]=\"controlClasses\"\n          class=\"inline-flex items-center gap-2 cursor-pointer hover:bg-base-200\"\n          type=\"button\">\n          <svg lucideUpload [size]=\"18\"></svg>\n          <span class=\"text-sm\">{{ uiConfig.replaceLabel }}</span>\n        </button>\n        @for (item of displayItems(); track itemKey(item)) {\n          <span class=\"inline-flex items-center gap-1 text-sm text-base-content/70\">\n            @if (item.isImage && item.previewUrl) {\n              <img [src]=\"item.previewUrl\" alt=\"\" class=\"h-6 w-6 rounded object-cover\"/>\n            } @else {\n              <svg lucideFile [size]=\"16\" class=\"text-base-content/50\"></svg>\n            }\n            <span class=\"max-w-40 truncate\">{{ item.name }}</span>\n            <button\n              (click)=\"item.existing ? removeExisting(item.index) : removeFile(item.index)\"\n              [attr.aria-label]=\"uiConfig.removeLabel\"\n              class=\"text-base-content/50 hover:text-error cursor-pointer\"\n              type=\"button\">\n              <svg lucideX [size]=\"14\"></svg>\n            </button>\n          </span>\n        }\n      </div>\n    }\n\n    <!-- List: compact rows of file icon + name + size -->\n    @case ('list') {\n    <div class=\"relative flex flex-col\">\n      <button\n        (click)=\"fileInput.click()\"\n        [disabled]=\"isDisabled\"\n        [ngClass]=\"controlClasses\"\n        class=\"flex flex-row items-center justify-center gap-2 cursor-pointer hover:bg-base-200\"\n        type=\"button\">\n        <svg lucideUpload [size]=\"18\"></svg>\n        <span class=\"text-sm\">{{ uiConfig.replaceLabel }}</span>\n      </button>\n      @if (displayItems().length > 0) {\n        <div class=\"mt-2 flex flex-col gap-1\">\n          @for (item of displayItems(); track itemKey(item)) {\n            <div class=\"flex items-center gap-2 rounded-lg bg-base-200 px-3 py-1.5 text-sm\">\n              <svg lucideFile [size]=\"16\" class=\"text-base-content/50\"></svg>\n              <span class=\"flex-1 truncate text-base-content\">{{ item.name }}</span>\n              @if (item.sizeLabel) {\n                <span class=\"text-base-content/50\">{{ item.sizeLabel }}</span>\n              }\n              <button\n                (click)=\"item.existing ? removeExisting(item.index) : removeFile(item.index)\"\n                [attr.aria-label]=\"uiConfig.removeLabel\"\n                class=\"text-base-content/50 hover:text-error cursor-pointer\"\n                type=\"button\">\n                <svg lucideX [size]=\"16\"></svg>\n              </button>\n            </div>\n          }\n        </div>\n      }\n      @if (isDragging()) {\n        <ng-container [ngTemplateOutlet]=\"dropOverlay\"></ng-container>\n      }\n    </div>\n    }\n\n    <!-- Thumbnail: grid of tiles with overlay remove + add tile -->\n    @case ('thumbnail') {\n    <div class=\"relative flex flex-wrap gap-3\">\n        @for (item of displayItems(); track itemKey(item)) {\n          <div class=\"relative h-24 w-24 overflow-hidden rounded-xl border border-base-300 bg-base-100\">\n            @if (item.isImage && item.previewUrl) {\n              <img [src]=\"item.previewUrl\" alt=\"\" class=\"h-full w-full object-cover\"/>\n            } @else {\n              <div class=\"flex h-full w-full flex-col items-center justify-center gap-1 p-1 text-center\">\n                <svg lucideFile [size]=\"22\" class=\"text-base-content/50\"></svg>\n                <span class=\"w-full truncate text-xs text-base-content/60\">{{ item.name }}</span>\n              </div>\n            }\n            <button\n              (click)=\"item.existing ? removeExisting(item.index) : removeFile(item.index)\"\n              [attr.aria-label]=\"uiConfig.removeLabel\"\n              class=\"inline-flex h-6 w-6 items-center justify-center rounded-full cursor-pointer transition-colors absolute top-1 right-1 border-none bg-black/60 text-white hover:bg-black/80\"\n              type=\"button\">\n              <svg lucideX [size]=\"14\"></svg>\n            </button>\n          </div>\n        }\n        @if (props.multiple || displayItems().length === 0) {\n          <button\n            (click)=\"fileInput.click()\"\n            [disabled]=\"isDisabled\"\n            class=\"flex h-24 w-24 flex-col items-center justify-center gap-1 rounded-xl border-2 border-dashed border-base-300 text-base-content/50 hover:border-primary cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed\"\n            type=\"button\">\n            <svg lucideImagePlus [size]=\"22\"></svg>\n          </button>\n        }\n      @if (isDragging()) {\n        <ng-container [ngTemplateOutlet]=\"dropOverlay\"></ng-container>\n      }\n      </div>\n    }\n\n    <!-- Dropzone (default): large dashed area + preview rows -->\n    @default {\n      <button\n        (click)=\"fileInput.click()\"\n        [disabled]=\"isDisabled\"\n        [ngClass]=\"controlClasses\"\n        type=\"button\">\n        <!-- Inert so a drag crossing the icon/hint never reads as leaving the zone -->\n        <span aria-live=\"polite\" class=\"pointer-events-none flex flex-col items-center gap-2\">\n          @if (isDragging()) {\n            <svg [size]=\"28\" class=\"animate-bounce text-primary\" lucideUpload></svg>\n            <span class=\"text-sm font-medium text-primary\">{{ uiConfig.dropActiveHint }}</span>\n          } @else {\n            <svg [size]=\"28\" class=\"text-base-content/40\" lucideImagePlus></svg>\n            <span class=\"text-sm text-base-content/60\">{{ uiConfig.dropzoneHint }}</span>\n          }\n        </span>\n      </button>\n      @if (displayItems().length > 0) {\n        <div class=\"mt-2 flex flex-col gap-2\">\n          @for (item of displayItems(); track itemKey(item)) {\n            <div class=\"flex items-center gap-3 rounded-lg bg-base-200 p-2\">\n              @if (item.isImage && item.previewUrl) {\n                <img [src]=\"item.previewUrl\" alt=\"\" class=\"h-12 w-12 rounded-md object-cover\"/>\n              } @else {\n                <svg lucideFile [size]=\"24\" class=\"text-base-content/50\"></svg>\n              }\n              <span class=\"flex-1 truncate text-sm text-base-content\">{{ item.name }}</span>\n              @if (item.sizeLabel) {\n                <span class=\"text-sm text-base-content/50\">{{ item.sizeLabel }}</span>\n              }\n              <button\n                (click)=\"item.existing ? removeExisting(item.index) : removeFile(item.index)\"\n                [attr.aria-label]=\"uiConfig.removeLabel\"\n                class=\"inline-flex h-8 w-8 items-center justify-center rounded-full cursor-pointer transition-colors text-error hover:bg-error/10\"\n                type=\"button\">\n                <svg lucideTrash2 [size]=\"16\"></svg>\n              </button>\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n\n  <!-- Selection-limit error (accept / maxSize / maxFiles) -->\n  @if (internalError(); as msg) {\n    <mn-error-message [errorMessage]=\"msg\" [id]=\"resolvedId + '-selection'\"></mn-error-message>\n  }\n\n  <!-- Control validation errors -->\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-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 if (errorMessage !== null) {\n      <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n    }\n  }\n</div>\n\n<!--\n  \"Release to drop\" cover for the modes that render their own layout instead of a\n  dropzone. Absolutely positioned so arming it never shifts the layout, and inert\n  so the drag keeps reaching the elements underneath.\n-->\n<ng-template #dropOverlay>\n  <div\n    aria-live=\"polite\"\n    class=\"pointer-events-none absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed border-primary bg-base-100/90 text-center\">\n    <svg [size]=\"24\" class=\"animate-bounce text-primary\" lucideUpload></svg>\n    <span class=\"px-2 text-sm font-medium text-primary\">{{ uiConfig.dropActiveHint }}</span>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3214,11 +3235,11 @@ class MnCheckbox {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnCheckbox, isStandalone: true, selector: "mn-lib-checkbox", inputs: { props: "props", checked: "checked" }, outputs: { checkedChange: "checkedChange" }, usesOnChanges: true, ngImport: i0, template: "<div [class.is-fullwidth]=\"props.fullWidth\" class=\"flex flex-col items-start\">\n  <label [attr.for]=\"resolvedId\" [ngClass]=\"wrapperClasses\"\n         class=\"flex flex-row items-center gap-x-2 select-none cursor-pointer\">\n    <input\n      type=\"checkbox\"\n      [id]=\"resolvedId\"\n      [attr.name]=\"resolvedName\"\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      [disabled]=\"isDisabled\"\n      [checked]=\"value\"\n      [ngClass]=\"checkboxClasses\"\n      (change)=\"handleChange($any($event.target).checked)\"\n      (blur)=\"handleBlur()\"\n    />\n    @if (uiConfig.label || props.label) {\n      <span class=\"flex flex-row items-center gap-x-0.5\">\n        <span>{{ uiConfig.label || props.label }}</span>\n        @if (isRequired()) {\n          <span class=\"text-red-500\">*</span>\n        }\n      </span>\n    }\n  </label>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n", styles: [".mn-checkbox{position:relative;display:inline-block;flex-shrink:0;box-sizing:border-box;vertical-align:middle;cursor:pointer;appearance:none;-webkit-appearance:none;border-width:1px;border-style:solid;box-shadow:0 1px #0000001a inset,0 0 #0000 inset,0 0 #0000;transition:background-color .2s,box-shadow .2s}.mn-checkbox:before{content:\"\";display:block;width:100%;height:100%;rotate:45deg;background-color:currentColor;opacity:0;box-shadow:0 3px #ffffff1a inset;clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 80%,70% 80%,70% 100%);transition:clip-path .3s,opacity .1s,rotate .3s,translate .3s;transition-delay:.1s}.mn-checkbox:focus-visible{outline-width:2px;outline-style:solid;outline-offset:2px}.mn-checkbox:checked,.mn-checkbox[aria-checked=true]{box-shadow:0 0 #0000 inset,0 8px 0 -4px #ffffff1a inset,0 1px #0000001a}.mn-checkbox:checked:before,.mn-checkbox[aria-checked=true]:before{opacity:1;clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 0%,70% 0%,70% 100%)}.mn-checkbox:indeterminate:before{opacity:1;rotate:0deg;translate:0 -35%;clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 80%,80% 80%,80% 100%)}.mn-checkbox:disabled{cursor:not-allowed;opacity:.2}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnCheckbox, isStandalone: true, selector: "mn-lib-checkbox", inputs: { props: "props", checked: "checked" }, outputs: { checkedChange: "checkedChange" }, usesOnChanges: true, ngImport: i0, template: "<div [class.is-fullwidth]=\"props.fullWidth\" class=\"flex flex-col items-start\">\n  <label [attr.for]=\"resolvedId\" [ngClass]=\"wrapperClasses\"\n         class=\"flex flex-row items-center gap-x-2 select-none cursor-pointer\">\n    <input\n      type=\"checkbox\"\n      [id]=\"resolvedId\"\n    [attr.aria-required]=\"isRequired() || null\"\n      [attr.name]=\"resolvedName\"\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      [disabled]=\"isDisabled\"\n      [checked]=\"value\"\n      [ngClass]=\"checkboxClasses\"\n      (change)=\"handleChange($any($event.target).checked)\"\n      (blur)=\"handleBlur()\"\n    />\n    @if (uiConfig.label || props.label) {\n      <span class=\"flex flex-row items-center gap-x-0.5\">\n        <span>{{ uiConfig.label || props.label }}</span>\n        @if (isRequired()) {\n          <span class=\"text-error\" aria-hidden=\"true\">*</span>\n        }\n      </span>\n    }\n  </label>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n", styles: [".mn-checkbox{position:relative;display:inline-block;flex-shrink:0;box-sizing:border-box;vertical-align:middle;cursor:pointer;appearance:none;-webkit-appearance:none;border-width:1px;border-style:solid;box-shadow:0 1px #0000001a inset,0 0 #0000 inset,0 0 #0000;transition:background-color .2s,box-shadow .2s}.mn-checkbox:before{content:\"\";display:block;width:100%;height:100%;rotate:45deg;background-color:currentColor;opacity:0;box-shadow:0 3px #ffffff1a inset;clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 80%,70% 80%,70% 100%);transition:clip-path .3s,opacity .1s,rotate .3s,translate .3s;transition-delay:.1s}.mn-checkbox:focus-visible{outline-width:2px;outline-style:solid;outline-offset:2px}.mn-checkbox:checked,.mn-checkbox[aria-checked=true]{box-shadow:0 0 #0000 inset,0 8px 0 -4px #ffffff1a inset,0 1px #0000001a}.mn-checkbox:checked:before,.mn-checkbox[aria-checked=true]:before{opacity:1;clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 0%,70% 0%,70% 100%)}.mn-checkbox:indeterminate:before{opacity:1;rotate:0deg;translate:0 -35%;clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 80%,80% 80%,80% 100%)}.mn-checkbox:disabled{cursor:not-allowed;opacity:.2}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnCheckbox, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-lib-checkbox', standalone: true, imports: [NgClass, MnErrorMessage], template: "<div [class.is-fullwidth]=\"props.fullWidth\" class=\"flex flex-col items-start\">\n  <label [attr.for]=\"resolvedId\" [ngClass]=\"wrapperClasses\"\n         class=\"flex flex-row items-center gap-x-2 select-none cursor-pointer\">\n    <input\n      type=\"checkbox\"\n      [id]=\"resolvedId\"\n      [attr.name]=\"resolvedName\"\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      [disabled]=\"isDisabled\"\n      [checked]=\"value\"\n      [ngClass]=\"checkboxClasses\"\n      (change)=\"handleChange($any($event.target).checked)\"\n      (blur)=\"handleBlur()\"\n    />\n    @if (uiConfig.label || props.label) {\n      <span class=\"flex flex-row items-center gap-x-0.5\">\n        <span>{{ uiConfig.label || props.label }}</span>\n        @if (isRequired()) {\n          <span class=\"text-red-500\">*</span>\n        }\n      </span>\n    }\n  </label>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n", styles: [".mn-checkbox{position:relative;display:inline-block;flex-shrink:0;box-sizing:border-box;vertical-align:middle;cursor:pointer;appearance:none;-webkit-appearance:none;border-width:1px;border-style:solid;box-shadow:0 1px #0000001a inset,0 0 #0000 inset,0 0 #0000;transition:background-color .2s,box-shadow .2s}.mn-checkbox:before{content:\"\";display:block;width:100%;height:100%;rotate:45deg;background-color:currentColor;opacity:0;box-shadow:0 3px #ffffff1a inset;clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 80%,70% 80%,70% 100%);transition:clip-path .3s,opacity .1s,rotate .3s,translate .3s;transition-delay:.1s}.mn-checkbox:focus-visible{outline-width:2px;outline-style:solid;outline-offset:2px}.mn-checkbox:checked,.mn-checkbox[aria-checked=true]{box-shadow:0 0 #0000 inset,0 8px 0 -4px #ffffff1a inset,0 1px #0000001a}.mn-checkbox:checked:before,.mn-checkbox[aria-checked=true]:before{opacity:1;clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 0%,70% 0%,70% 100%)}.mn-checkbox:indeterminate:before{opacity:1;rotate:0deg;translate:0 -35%;clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 80%,80% 80%,80% 100%)}.mn-checkbox:disabled{cursor:not-allowed;opacity:.2}\n"] }]
+            args: [{ selector: 'mn-lib-checkbox', standalone: true, imports: [NgClass, MnErrorMessage], template: "<div [class.is-fullwidth]=\"props.fullWidth\" class=\"flex flex-col items-start\">\n  <label [attr.for]=\"resolvedId\" [ngClass]=\"wrapperClasses\"\n         class=\"flex flex-row items-center gap-x-2 select-none cursor-pointer\">\n    <input\n      type=\"checkbox\"\n      [id]=\"resolvedId\"\n    [attr.aria-required]=\"isRequired() || null\"\n      [attr.name]=\"resolvedName\"\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      [disabled]=\"isDisabled\"\n      [checked]=\"value\"\n      [ngClass]=\"checkboxClasses\"\n      (change)=\"handleChange($any($event.target).checked)\"\n      (blur)=\"handleBlur()\"\n    />\n    @if (uiConfig.label || props.label) {\n      <span class=\"flex flex-row items-center gap-x-0.5\">\n        <span>{{ uiConfig.label || props.label }}</span>\n        @if (isRequired()) {\n          <span class=\"text-error\" aria-hidden=\"true\">*</span>\n        }\n      </span>\n    }\n  </label>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n", styles: [".mn-checkbox{position:relative;display:inline-block;flex-shrink:0;box-sizing:border-box;vertical-align:middle;cursor:pointer;appearance:none;-webkit-appearance:none;border-width:1px;border-style:solid;box-shadow:0 1px #0000001a inset,0 0 #0000 inset,0 0 #0000;transition:background-color .2s,box-shadow .2s}.mn-checkbox:before{content:\"\";display:block;width:100%;height:100%;rotate:45deg;background-color:currentColor;opacity:0;box-shadow:0 3px #ffffff1a inset;clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 80%,70% 80%,70% 100%);transition:clip-path .3s,opacity .1s,rotate .3s,translate .3s;transition-delay:.1s}.mn-checkbox:focus-visible{outline-width:2px;outline-style:solid;outline-offset:2px}.mn-checkbox:checked,.mn-checkbox[aria-checked=true]{box-shadow:0 0 #0000 inset,0 8px 0 -4px #ffffff1a inset,0 1px #0000001a}.mn-checkbox:checked:before,.mn-checkbox[aria-checked=true]:before{opacity:1;clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 0%,70% 0%,70% 100%)}.mn-checkbox:indeterminate:before{opacity:1;rotate:0deg;translate:0 -35%;clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 80%,80% 80%,80% 100%)}.mn-checkbox:disabled{cursor:not-allowed;opacity:.2}\n"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3463,7 +3484,7 @@ class MnDatetime {
         ].join(' ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnDatetime, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnDatetime, isStandalone: true, selector: "mn-lib-datetime", inputs: { props: "props" }, host: { properties: { "style.display": "props?.fullWidth ? 'block' : null", "style.width": "props?.fullWidth ? '100%' : null" } }, 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  @if (iconOnly) {\n    <!--\n      Icon-only variant: a bordered box holding a calendar icon, with the native\n      input layered on top at zero opacity. The box carries the look (border,\n      background, radius, hover, focus ring); the input stays a real, focusable\n      form control that opens the picker on click. `focus-within` on the box\n      surfaces the keyboard focus ring, since the input itself is transparent.\n    -->\n    <div [ngClass]=\"iconBoxClasses\">\n      <svg [size]=\"iconSize\" lucideCalendarDays aria-hidden=\"true\" class=\"pointer-events-none\"></svg>\n      <ng-container [ngTemplateOutlet]=\"inputTemplate\"></ng-container>\n    </div>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"inputTemplate\"></ng-container>\n  }\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-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\n<!-- Single input definition, rendered either bare or inside the icon box above,\n     so both variants share exactly the same bindings and behaviour. -->\n<ng-template #inputTemplate>\n  <input\n    #dateInput\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"resolvedMode\"\n    [attr.placeholder]=\"uiConfig.placeholder || props.placeholder || null\"\n    [attr.aria-label]=\"resolvedAriaLabel\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.min]=\"props.min || null\"\n    [attr.max]=\"props.max || null\"\n    [attr.step]=\"props.step || null\"\n    [value]=\"value ?? ''\"\n    [ngClass]=\"inputClasses\"\n    (click)=\"handleClick(dateInput)\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n</ng-template>\n", styles: ["input::-webkit-calendar-picker-indicator{cursor:pointer}@media(pointer:coarse){input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week]{-webkit-appearance:none;appearance:none;min-width:0;box-sizing:border-box}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }, { kind: "component", type: LucideCalendarDays, selector: "svg[lucideCalendarDays]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnDatetime, isStandalone: true, selector: "mn-lib-datetime", inputs: { props: "props" }, host: { properties: { "style.display": "props?.fullWidth ? 'block' : null", "style.width": "props?.fullWidth ? '100%' : null" } }, 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-error\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  @if (iconOnly) {\n    <!--\n      Icon-only variant: a bordered box holding a calendar icon, with the native\n      input layered on top at zero opacity. The box carries the look (border,\n      background, radius, hover, focus ring); the input stays a real, focusable\n      form control that opens the picker on click. `focus-within` on the box\n      surfaces the keyboard focus ring, since the input itself is transparent.\n    -->\n    <div [ngClass]=\"iconBoxClasses\">\n      <svg [size]=\"iconSize\" lucideCalendarDays aria-hidden=\"true\" class=\"pointer-events-none\"></svg>\n      <ng-container [ngTemplateOutlet]=\"inputTemplate\"></ng-container>\n    </div>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"inputTemplate\"></ng-container>\n  }\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-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\n<!-- Single input definition, rendered either bare or inside the icon box above,\n     so both variants share exactly the same bindings and behaviour. -->\n<ng-template #inputTemplate>\n  <input\n    #dateInput\n    [id]=\"resolvedId\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"resolvedMode\"\n    [attr.placeholder]=\"uiConfig.placeholder || props.placeholder || null\"\n    [attr.aria-label]=\"resolvedAriaLabel\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.min]=\"props.min || null\"\n    [attr.max]=\"props.max || null\"\n    [attr.step]=\"props.step || null\"\n    [value]=\"value ?? ''\"\n    [ngClass]=\"inputClasses\"\n    (click)=\"handleClick(dateInput)\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n</ng-template>\n", styles: ["input::-webkit-calendar-picker-indicator{cursor:pointer}@media(pointer:coarse){input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week]{-webkit-appearance:none;appearance:none;min-width:0;box-sizing:border-box}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }, { kind: "component", type: LucideCalendarDays, selector: "svg[lucideCalendarDays]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnDatetime, decorators: [{
             type: Component,
@@ -3476,7 +3497,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         // when fullWidth is requested so 100% has something to fill.
                         '[style.display]': "props?.fullWidth ? 'block' : null",
                         '[style.width]': "props?.fullWidth ? '100%' : null",
-                    }, 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  @if (iconOnly) {\n    <!--\n      Icon-only variant: a bordered box holding a calendar icon, with the native\n      input layered on top at zero opacity. The box carries the look (border,\n      background, radius, hover, focus ring); the input stays a real, focusable\n      form control that opens the picker on click. `focus-within` on the box\n      surfaces the keyboard focus ring, since the input itself is transparent.\n    -->\n    <div [ngClass]=\"iconBoxClasses\">\n      <svg [size]=\"iconSize\" lucideCalendarDays aria-hidden=\"true\" class=\"pointer-events-none\"></svg>\n      <ng-container [ngTemplateOutlet]=\"inputTemplate\"></ng-container>\n    </div>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"inputTemplate\"></ng-container>\n  }\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-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\n<!-- Single input definition, rendered either bare or inside the icon box above,\n     so both variants share exactly the same bindings and behaviour. -->\n<ng-template #inputTemplate>\n  <input\n    #dateInput\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"resolvedMode\"\n    [attr.placeholder]=\"uiConfig.placeholder || props.placeholder || null\"\n    [attr.aria-label]=\"resolvedAriaLabel\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.min]=\"props.min || null\"\n    [attr.max]=\"props.max || null\"\n    [attr.step]=\"props.step || null\"\n    [value]=\"value ?? ''\"\n    [ngClass]=\"inputClasses\"\n    (click)=\"handleClick(dateInput)\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n</ng-template>\n", styles: ["input::-webkit-calendar-picker-indicator{cursor:pointer}@media(pointer:coarse){input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week]{-webkit-appearance:none;appearance:none;min-width:0;box-sizing:border-box}}\n"] }]
+                    }, 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-error\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  @if (iconOnly) {\n    <!--\n      Icon-only variant: a bordered box holding a calendar icon, with the native\n      input layered on top at zero opacity. The box carries the look (border,\n      background, radius, hover, focus ring); the input stays a real, focusable\n      form control that opens the picker on click. `focus-within` on the box\n      surfaces the keyboard focus ring, since the input itself is transparent.\n    -->\n    <div [ngClass]=\"iconBoxClasses\">\n      <svg [size]=\"iconSize\" lucideCalendarDays aria-hidden=\"true\" class=\"pointer-events-none\"></svg>\n      <ng-container [ngTemplateOutlet]=\"inputTemplate\"></ng-container>\n    </div>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"inputTemplate\"></ng-container>\n  }\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-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\n<!-- Single input definition, rendered either bare or inside the icon box above,\n     so both variants share exactly the same bindings and behaviour. -->\n<ng-template #inputTemplate>\n  <input\n    #dateInput\n    [id]=\"resolvedId\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"resolvedMode\"\n    [attr.placeholder]=\"uiConfig.placeholder || props.placeholder || null\"\n    [attr.aria-label]=\"resolvedAriaLabel\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.min]=\"props.min || null\"\n    [attr.max]=\"props.max || null\"\n    [attr.step]=\"props.step || null\"\n    [value]=\"value ?? ''\"\n    [ngClass]=\"inputClasses\"\n    (click)=\"handleClick(dateInput)\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n</ng-template>\n", styles: ["input::-webkit-calendar-picker-indicator{cursor:pointer}@media(pointer:coarse){input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week]{-webkit-appearance:none;appearance:none;min-width:0;box-sizing:border-box}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input,
                 args: [{ required: true }]
@@ -4486,6 +4507,9 @@ class MnMultiSelect {
         if (this.props.placeholder) {
             this.uiConfig = { ...this.uiConfig, placeholder: this.props.placeholder };
         }
+        if (this.props.ariaLabel) {
+            this.uiConfig = { ...this.uiConfig, ariaLabel: this.props.ariaLabel };
+        }
     }
     // ========== ControlValueAccessor Implementation ==========
     writeValue(val) {
@@ -4913,11 +4937,11 @@ class MnMultiSelect {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnMultiSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnMultiSelect, isStandalone: true, selector: "mn-lib-multi-select", inputs: { props: "props" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()", "window:scroll": "onWindowScrollOrResize()", "window:resize": "onWindowScrollOrResize()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "shieldRef", first: true, predicate: ["shield"], descendants: true }, { propertyName: "sheetRef", first: true, predicate: ["sheet"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    class=\"relative\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? resolvedId + '-listbox' : null\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"handleBlur()\"\n  >\n    <!-- `pr-6` reserves the gutter the caret is absolutely positioned in (right-2 +\n         w-4), so a value can never render underneath it. `min-w-0` lets the chips\n         shrink below their content width, which is what makes truncation possible. -->\n    <div class=\"flex flex-row items-center gap-x-2 flex-wrap min-h-6 min-w-0 pr-6\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-base-content/50\">{{ placeholderLabel }}</span>\n      } @else if (isCollapsed) {\n        <span\n          class=\"inline-flex items-center max-w-full truncate bg-base-200 border border-accent text-base-content text-xs px-2 py-0.5 rounded-md\">\n          {{ collapseSummaryText }}\n        </span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <!-- Only the \u00D7 removes. The chip body deliberately carries no handler, so a click\n               anywhere on it bubbles to the trigger and just opens/closes the panel \u2014 clicking\n               the trigger to dismiss the dropdown must never silently delete a selection. -->\n          <span\n            class=\"inline-flex items-center gap-x-1 max-w-full min-w-0 bg-base-200 border border-accent text-base-content text-xs pl-2 py-0.5 rounded-md\">\n            <span [attr.title]=\"opt.label\" class=\"truncate\">{{ opt.label }}</span>\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary', hover: false }\"\n              type=\"button\"\n              class=\"text-base-content/50 cursor-pointer shrink-0\"\n              (click)=\"removeOption(opt, $event)\"\n              [attr.aria-label]=\"'Remove ' + opt.label\"\n            ><svg lucideX [size]=\"18\"></svg></button>\n          </span>\n        }\n      }\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg [size]=\"16\" class=\"text-base-content/50\" lucideChevronDown></svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    @if (isSheet) {\n      <!-- On mobile the panel is presented as a shared bottom sheet: the sheet chrome\n           (backdrop, grabber, swipe/flick-to-dismiss, slide animation) lives in\n           mn-bottom-sheet; this component only projects the field's content into it.\n           The sheet host is portalled to document.body (see the `sheet` ViewChild) so\n           its `position: fixed` anchors to the viewport, not a transformed ancestor. -->\n      <mn-bottom-sheet\n        #sheet\n        (dismiss)=\"close()\"\n        [ariaLabel]=\"uiConfig.ariaLabel || uiConfig.label || props.label || uiConfig.placeholder || props.placeholder\"\n        [maxHeightVh]=\"80\"\n        [minHeightPx]=\"sheetFloorPx\"\n      >\n        <div\n          [id]=\"resolvedId + '-listbox'\"\n          aria-multiselectable=\"true\"\n          class=\"flex flex-col flex-1 min-h-0 overflow-hidden\"\n          role=\"listbox\"\n        >\n          <!-- The sheet covers its own trigger, so it carries a header to name the field; the\n               way out is the grabber (swipe-to-dismiss) and a backdrop tap. -->\n          <div class=\"px-4 pt-1 pb-2 shrink-0\">\n            <p class=\"text-base font-medium text-base-content truncate\">\n              {{ uiConfig.label || props.label || uiConfig.placeholder || props.placeholder || '' }}\n            </p>\n          </div>\n          <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n        </div>\n      </mn-bottom-sheet>\n    } @else {\n      <!-- A transparent full-viewport shield behind the panel, so \"click anywhere to\n           dismiss\" is literally true. It also *consumes* that click: without it the click\n           reaches whatever sits underneath \u2014 inside a modal that is the modal's own\n           backdrop, so dismissing the dropdown would tear down the whole modal with it.\n           Portalled to document.body for the same reason the panel is. It is aria-hidden\n           and unfocusable: the keyboard equivalent of this click is Escape. -->\n      <div\n        #shield\n        (click)=\"onShieldClick($event)\"\n        [id]=\"resolvedId + '-shield'\"\n        [ngClass]=\"shieldClasses\"\n        aria-hidden=\"true\"\n      ></div>\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        #dropdown\n        (click)=\"$event.stopPropagation()\"\n        [id]=\"resolvedId + '-listbox'\"\n        [ngClass]=\"panelClasses\"\n        [style.left]=\"dropdownStyle.left\"\n        [style.top]=\"dropdownStyle.top\"\n        [style.bottom]=\"dropdownStyle.bottom\"\n        [style.max-height]=\"dropdownStyle.maxHeight\"\n        [style.width]=\"dropdownStyle.width\"\n        aria-multiselectable=\"true\"\n        role=\"listbox\"\n      >\n        <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n      </div>\n    }\n  }\n\n  <!-- The search box + option list, shared verbatim by the sheet and the anchored\n       popover. `isSheet` only tunes spacing/sizing and which element scrolls: in sheet\n       mode the list is the flex scroller; anchored, the popover itself scrolls. -->\n  <ng-template #panelBody>\n    @if (isSearchable) {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        (click)=\"$event.stopPropagation()\"\n        [ngClass]=\"isSheet ? 'px-4 py-2' : 'p-2'\"\n        class=\"border-b border-base-300 shrink-0\"\n      >\n        <mn-lib-input-field\n          (ngModelChange)=\"onSearch($event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          [ngModel]=\"searchTerm\"\n          [props]=\"{\n            id: resolvedId + '-search',\n            type: 'search',\n            placeholder: searchPlaceholderLabel,\n            ariaLabel: searchPlaceholderLabel,\n            fullWidth: true,\n            size: 'sm'\n          }\"\n        ></mn-lib-input-field>\n      </div>\n    }\n    <div [ngClass]=\"isSheet ? 'flex-1 overflow-auto overscroll-contain' : ''\">\n      @for (opt of filteredOptions; track opt.value) {\n        <div\n          (click)=\"toggleOption(opt); $event.stopPropagation()\"\n          (keyup.enter)=\"toggleOption(opt)\"\n          (keyup.space)=\"toggleOption(opt)\"\n          [attr.aria-selected]=\"isSelected(opt)\"\n          [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n          [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n          [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\"\n          class=\"flex items-center gap-x-2 cursor-pointer text-base-content hover:bg-base-200\"\n          role=\"option\"\n          tabindex=\"0\"\n        >\n          <input\n            [checked]=\"isSelected(opt)\"\n            [disabled]=\"opt.disabled || isMaxReached(opt)\"\n            class=\"w-4 h-4 accent-primary pointer-events-none shrink-0\"\n            tabindex=\"-1\"\n            type=\"checkbox\"\n          />\n          <span>{{ opt.label }}</span>\n        </div>\n      }\n      @if (filteredOptions.length === 0) {\n        <div [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\" class=\"text-base-content/50\">\n          {{ noOptionsLabel }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnBottomSheet, selector: "mn-bottom-sheet", inputs: ["showBackdrop", "showGrabber", "dismissible", "minHeightPx", "maxHeightVh", "containerClass", "ariaLabel", "ariaLabelledby", "growWithKeyboard", "dismissGuard"], outputs: ["dismiss"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnMultiSelect, isStandalone: true, selector: "mn-lib-multi-select", inputs: { props: "props" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()", "window:scroll": "onWindowScrollOrResize()", "window:resize": "onWindowScrollOrResize()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "shieldRef", first: true, predicate: ["shield"], descendants: true }, { propertyName: "sheetRef", first: true, predicate: ["sheet"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-error\" aria-hidden=\"true\">*</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    [attr.aria-required]=\"isRequired() || null\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"handleBlur()\"\n  >\n    <!-- `pr-6` reserves the gutter the caret is absolutely positioned in (right-2 +\n         w-4), so a value can never render underneath it. `min-w-0` lets the chips\n         shrink below their content width, which is what makes truncation possible. -->\n    <div class=\"flex flex-row items-center gap-x-2 flex-wrap min-h-6 min-w-0 pr-6\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-base-content/50\">{{ placeholderLabel }}</span>\n      } @else if (isCollapsed) {\n        <span\n          class=\"inline-flex items-center max-w-full truncate bg-base-200 border border-accent text-base-content text-xs px-2 py-0.5 rounded-md\">\n          {{ collapseSummaryText }}\n        </span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <!-- Only the \u00D7 removes. The chip body deliberately carries no handler, so a click\n               anywhere on it bubbles to the trigger and just opens/closes the panel \u2014 clicking\n               the trigger to dismiss the dropdown must never silently delete a selection. -->\n          <span\n            class=\"inline-flex items-center gap-x-1 max-w-full min-w-0 bg-base-200 border border-accent text-base-content text-xs pl-2 py-0.5 rounded-md\">\n            <span [attr.title]=\"opt.label\" class=\"truncate\">{{ opt.label }}</span>\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary', hover: false }\"\n              type=\"button\"\n              class=\"text-base-content/50 cursor-pointer shrink-0\"\n              (click)=\"removeOption(opt, $event)\"\n              [attr.aria-label]=\"'Remove ' + opt.label\"\n            ><svg lucideX [size]=\"18\"></svg></button>\n          </span>\n        }\n      }\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg [size]=\"16\" class=\"text-base-content/50\" lucideChevronDown></svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    @if (isSheet) {\n      <!-- On mobile the panel is presented as a shared bottom sheet: the sheet chrome\n           (backdrop, grabber, swipe/flick-to-dismiss, slide animation) lives in\n           mn-bottom-sheet; this component only projects the field's content into it.\n           The sheet host is portalled to document.body (see the `sheet` ViewChild) so\n           its `position: fixed` anchors to the viewport, not a transformed ancestor. -->\n      <mn-bottom-sheet\n        #sheet\n        (dismiss)=\"close()\"\n        [ariaLabel]=\"uiConfig.ariaLabel || uiConfig.label || props.label || uiConfig.placeholder || props.placeholder\"\n        [maxHeightVh]=\"80\"\n        [minHeightPx]=\"sheetFloorPx\"\n      >\n        <div\n          [id]=\"resolvedId + '-listbox'\"\n          aria-multiselectable=\"true\"\n          class=\"flex flex-col flex-1 min-h-0 overflow-hidden\"\n          role=\"listbox\"\n        >\n          <!-- The sheet covers its own trigger, so it carries a header to name the field; the\n               way out is the grabber (swipe-to-dismiss) and a backdrop tap. -->\n          <div class=\"px-4 pt-1 pb-2 shrink-0\">\n            <p class=\"text-base font-medium text-base-content truncate\">\n              {{ uiConfig.label || props.label || uiConfig.placeholder || props.placeholder || '' }}\n            </p>\n          </div>\n          <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n        </div>\n      </mn-bottom-sheet>\n    } @else {\n      <!-- A transparent full-viewport shield behind the panel, so \"click anywhere to\n           dismiss\" is literally true. It also *consumes* that click: without it the click\n           reaches whatever sits underneath \u2014 inside a modal that is the modal's own\n           backdrop, so dismissing the dropdown would tear down the whole modal with it.\n           Portalled to document.body for the same reason the panel is. It is aria-hidden\n           and unfocusable: the keyboard equivalent of this click is Escape. -->\n      <div\n        #shield\n        (click)=\"onShieldClick($event)\"\n        [id]=\"resolvedId + '-shield'\"\n        [ngClass]=\"shieldClasses\"\n        aria-hidden=\"true\"\n      ></div>\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        #dropdown\n        (click)=\"$event.stopPropagation()\"\n        [id]=\"resolvedId + '-listbox'\"\n        [ngClass]=\"panelClasses\"\n        [style.left]=\"dropdownStyle.left\"\n        [style.top]=\"dropdownStyle.top\"\n        [style.bottom]=\"dropdownStyle.bottom\"\n        [style.max-height]=\"dropdownStyle.maxHeight\"\n        [style.width]=\"dropdownStyle.width\"\n        aria-multiselectable=\"true\"\n        role=\"listbox\"\n      >\n        <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n      </div>\n    }\n  }\n\n  <!-- The search box + option list, shared verbatim by the sheet and the anchored\n       popover. `isSheet` only tunes spacing/sizing and which element scrolls: in sheet\n       mode the list is the flex scroller; anchored, the popover itself scrolls. -->\n  <ng-template #panelBody>\n    @if (isSearchable) {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        (click)=\"$event.stopPropagation()\"\n        [ngClass]=\"isSheet ? 'px-4 py-2' : 'p-2'\"\n        class=\"border-b border-base-300 shrink-0\"\n      >\n        <mn-lib-input-field\n          (ngModelChange)=\"onSearch($event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          [ngModel]=\"searchTerm\"\n          [props]=\"{\n            id: resolvedId + '-search',\n            type: 'search',\n            placeholder: searchPlaceholderLabel,\n            ariaLabel: searchPlaceholderLabel,\n            fullWidth: true,\n            size: 'sm'\n          }\"\n        ></mn-lib-input-field>\n      </div>\n    }\n    <div [ngClass]=\"isSheet ? 'flex-1 overflow-auto overscroll-contain' : ''\">\n      @for (opt of filteredOptions; track opt.value) {\n        <div\n          (click)=\"toggleOption(opt); $event.stopPropagation()\"\n          (keyup.enter)=\"toggleOption(opt)\"\n          (keyup.space)=\"toggleOption(opt)\"\n          [attr.aria-selected]=\"isSelected(opt)\"\n          [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n          [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n          [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\"\n          class=\"flex items-center gap-x-2 cursor-pointer text-base-content hover:bg-base-200\"\n          role=\"option\"\n          tabindex=\"0\"\n        >\n          <input\n            [checked]=\"isSelected(opt)\"\n            [disabled]=\"opt.disabled || isMaxReached(opt)\"\n            class=\"w-4 h-4 accent-primary pointer-events-none shrink-0\"\n            tabindex=\"-1\"\n            type=\"checkbox\"\n          />\n          <span>{{ opt.label }}</span>\n        </div>\n      }\n      @if (filteredOptions.length === 0) {\n        <div [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\" class=\"text-base-content/50\">\n          {{ noOptionsLabel }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnBottomSheet, selector: "mn-bottom-sheet", inputs: ["showBackdrop", "showGrabber", "dismissible", "minHeightPx", "maxHeightVh", "containerClass", "ariaLabel", "ariaLabelledby", "growWithKeyboard", "dismissGuard"], outputs: ["dismiss"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnMultiSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-lib-multi-select', standalone: true, imports: [NgClass, NgTemplateOutlet, FormsModule, MnErrorMessage, MnButton, MnInputField, MnBottomSheet, LucideX, LucideChevronDown], template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    class=\"relative\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? resolvedId + '-listbox' : null\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"handleBlur()\"\n  >\n    <!-- `pr-6` reserves the gutter the caret is absolutely positioned in (right-2 +\n         w-4), so a value can never render underneath it. `min-w-0` lets the chips\n         shrink below their content width, which is what makes truncation possible. -->\n    <div class=\"flex flex-row items-center gap-x-2 flex-wrap min-h-6 min-w-0 pr-6\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-base-content/50\">{{ placeholderLabel }}</span>\n      } @else if (isCollapsed) {\n        <span\n          class=\"inline-flex items-center max-w-full truncate bg-base-200 border border-accent text-base-content text-xs px-2 py-0.5 rounded-md\">\n          {{ collapseSummaryText }}\n        </span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <!-- Only the \u00D7 removes. The chip body deliberately carries no handler, so a click\n               anywhere on it bubbles to the trigger and just opens/closes the panel \u2014 clicking\n               the trigger to dismiss the dropdown must never silently delete a selection. -->\n          <span\n            class=\"inline-flex items-center gap-x-1 max-w-full min-w-0 bg-base-200 border border-accent text-base-content text-xs pl-2 py-0.5 rounded-md\">\n            <span [attr.title]=\"opt.label\" class=\"truncate\">{{ opt.label }}</span>\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary', hover: false }\"\n              type=\"button\"\n              class=\"text-base-content/50 cursor-pointer shrink-0\"\n              (click)=\"removeOption(opt, $event)\"\n              [attr.aria-label]=\"'Remove ' + opt.label\"\n            ><svg lucideX [size]=\"18\"></svg></button>\n          </span>\n        }\n      }\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg [size]=\"16\" class=\"text-base-content/50\" lucideChevronDown></svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    @if (isSheet) {\n      <!-- On mobile the panel is presented as a shared bottom sheet: the sheet chrome\n           (backdrop, grabber, swipe/flick-to-dismiss, slide animation) lives in\n           mn-bottom-sheet; this component only projects the field's content into it.\n           The sheet host is portalled to document.body (see the `sheet` ViewChild) so\n           its `position: fixed` anchors to the viewport, not a transformed ancestor. -->\n      <mn-bottom-sheet\n        #sheet\n        (dismiss)=\"close()\"\n        [ariaLabel]=\"uiConfig.ariaLabel || uiConfig.label || props.label || uiConfig.placeholder || props.placeholder\"\n        [maxHeightVh]=\"80\"\n        [minHeightPx]=\"sheetFloorPx\"\n      >\n        <div\n          [id]=\"resolvedId + '-listbox'\"\n          aria-multiselectable=\"true\"\n          class=\"flex flex-col flex-1 min-h-0 overflow-hidden\"\n          role=\"listbox\"\n        >\n          <!-- The sheet covers its own trigger, so it carries a header to name the field; the\n               way out is the grabber (swipe-to-dismiss) and a backdrop tap. -->\n          <div class=\"px-4 pt-1 pb-2 shrink-0\">\n            <p class=\"text-base font-medium text-base-content truncate\">\n              {{ uiConfig.label || props.label || uiConfig.placeholder || props.placeholder || '' }}\n            </p>\n          </div>\n          <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n        </div>\n      </mn-bottom-sheet>\n    } @else {\n      <!-- A transparent full-viewport shield behind the panel, so \"click anywhere to\n           dismiss\" is literally true. It also *consumes* that click: without it the click\n           reaches whatever sits underneath \u2014 inside a modal that is the modal's own\n           backdrop, so dismissing the dropdown would tear down the whole modal with it.\n           Portalled to document.body for the same reason the panel is. It is aria-hidden\n           and unfocusable: the keyboard equivalent of this click is Escape. -->\n      <div\n        #shield\n        (click)=\"onShieldClick($event)\"\n        [id]=\"resolvedId + '-shield'\"\n        [ngClass]=\"shieldClasses\"\n        aria-hidden=\"true\"\n      ></div>\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        #dropdown\n        (click)=\"$event.stopPropagation()\"\n        [id]=\"resolvedId + '-listbox'\"\n        [ngClass]=\"panelClasses\"\n        [style.left]=\"dropdownStyle.left\"\n        [style.top]=\"dropdownStyle.top\"\n        [style.bottom]=\"dropdownStyle.bottom\"\n        [style.max-height]=\"dropdownStyle.maxHeight\"\n        [style.width]=\"dropdownStyle.width\"\n        aria-multiselectable=\"true\"\n        role=\"listbox\"\n      >\n        <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n      </div>\n    }\n  }\n\n  <!-- The search box + option list, shared verbatim by the sheet and the anchored\n       popover. `isSheet` only tunes spacing/sizing and which element scrolls: in sheet\n       mode the list is the flex scroller; anchored, the popover itself scrolls. -->\n  <ng-template #panelBody>\n    @if (isSearchable) {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        (click)=\"$event.stopPropagation()\"\n        [ngClass]=\"isSheet ? 'px-4 py-2' : 'p-2'\"\n        class=\"border-b border-base-300 shrink-0\"\n      >\n        <mn-lib-input-field\n          (ngModelChange)=\"onSearch($event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          [ngModel]=\"searchTerm\"\n          [props]=\"{\n            id: resolvedId + '-search',\n            type: 'search',\n            placeholder: searchPlaceholderLabel,\n            ariaLabel: searchPlaceholderLabel,\n            fullWidth: true,\n            size: 'sm'\n          }\"\n        ></mn-lib-input-field>\n      </div>\n    }\n    <div [ngClass]=\"isSheet ? 'flex-1 overflow-auto overscroll-contain' : ''\">\n      @for (opt of filteredOptions; track opt.value) {\n        <div\n          (click)=\"toggleOption(opt); $event.stopPropagation()\"\n          (keyup.enter)=\"toggleOption(opt)\"\n          (keyup.space)=\"toggleOption(opt)\"\n          [attr.aria-selected]=\"isSelected(opt)\"\n          [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n          [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n          [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\"\n          class=\"flex items-center gap-x-2 cursor-pointer text-base-content hover:bg-base-200\"\n          role=\"option\"\n          tabindex=\"0\"\n        >\n          <input\n            [checked]=\"isSelected(opt)\"\n            [disabled]=\"opt.disabled || isMaxReached(opt)\"\n            class=\"w-4 h-4 accent-primary pointer-events-none shrink-0\"\n            tabindex=\"-1\"\n            type=\"checkbox\"\n          />\n          <span>{{ opt.label }}</span>\n        </div>\n      }\n      @if (filteredOptions.length === 0) {\n        <div [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\" class=\"text-base-content/50\">\n          {{ noOptionsLabel }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n" }]
+            args: [{ selector: 'mn-lib-multi-select', standalone: true, imports: [NgClass, NgTemplateOutlet, FormsModule, MnErrorMessage, MnButton, MnInputField, MnBottomSheet, LucideX, LucideChevronDown], template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-error\" aria-hidden=\"true\">*</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    [attr.aria-required]=\"isRequired() || null\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"handleBlur()\"\n  >\n    <!-- `pr-6` reserves the gutter the caret is absolutely positioned in (right-2 +\n         w-4), so a value can never render underneath it. `min-w-0` lets the chips\n         shrink below their content width, which is what makes truncation possible. -->\n    <div class=\"flex flex-row items-center gap-x-2 flex-wrap min-h-6 min-w-0 pr-6\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-base-content/50\">{{ placeholderLabel }}</span>\n      } @else if (isCollapsed) {\n        <span\n          class=\"inline-flex items-center max-w-full truncate bg-base-200 border border-accent text-base-content text-xs px-2 py-0.5 rounded-md\">\n          {{ collapseSummaryText }}\n        </span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <!-- Only the \u00D7 removes. The chip body deliberately carries no handler, so a click\n               anywhere on it bubbles to the trigger and just opens/closes the panel \u2014 clicking\n               the trigger to dismiss the dropdown must never silently delete a selection. -->\n          <span\n            class=\"inline-flex items-center gap-x-1 max-w-full min-w-0 bg-base-200 border border-accent text-base-content text-xs pl-2 py-0.5 rounded-md\">\n            <span [attr.title]=\"opt.label\" class=\"truncate\">{{ opt.label }}</span>\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary', hover: false }\"\n              type=\"button\"\n              class=\"text-base-content/50 cursor-pointer shrink-0\"\n              (click)=\"removeOption(opt, $event)\"\n              [attr.aria-label]=\"'Remove ' + opt.label\"\n            ><svg lucideX [size]=\"18\"></svg></button>\n          </span>\n        }\n      }\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg [size]=\"16\" class=\"text-base-content/50\" lucideChevronDown></svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    @if (isSheet) {\n      <!-- On mobile the panel is presented as a shared bottom sheet: the sheet chrome\n           (backdrop, grabber, swipe/flick-to-dismiss, slide animation) lives in\n           mn-bottom-sheet; this component only projects the field's content into it.\n           The sheet host is portalled to document.body (see the `sheet` ViewChild) so\n           its `position: fixed` anchors to the viewport, not a transformed ancestor. -->\n      <mn-bottom-sheet\n        #sheet\n        (dismiss)=\"close()\"\n        [ariaLabel]=\"uiConfig.ariaLabel || uiConfig.label || props.label || uiConfig.placeholder || props.placeholder\"\n        [maxHeightVh]=\"80\"\n        [minHeightPx]=\"sheetFloorPx\"\n      >\n        <div\n          [id]=\"resolvedId + '-listbox'\"\n          aria-multiselectable=\"true\"\n          class=\"flex flex-col flex-1 min-h-0 overflow-hidden\"\n          role=\"listbox\"\n        >\n          <!-- The sheet covers its own trigger, so it carries a header to name the field; the\n               way out is the grabber (swipe-to-dismiss) and a backdrop tap. -->\n          <div class=\"px-4 pt-1 pb-2 shrink-0\">\n            <p class=\"text-base font-medium text-base-content truncate\">\n              {{ uiConfig.label || props.label || uiConfig.placeholder || props.placeholder || '' }}\n            </p>\n          </div>\n          <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n        </div>\n      </mn-bottom-sheet>\n    } @else {\n      <!-- A transparent full-viewport shield behind the panel, so \"click anywhere to\n           dismiss\" is literally true. It also *consumes* that click: without it the click\n           reaches whatever sits underneath \u2014 inside a modal that is the modal's own\n           backdrop, so dismissing the dropdown would tear down the whole modal with it.\n           Portalled to document.body for the same reason the panel is. It is aria-hidden\n           and unfocusable: the keyboard equivalent of this click is Escape. -->\n      <div\n        #shield\n        (click)=\"onShieldClick($event)\"\n        [id]=\"resolvedId + '-shield'\"\n        [ngClass]=\"shieldClasses\"\n        aria-hidden=\"true\"\n      ></div>\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        #dropdown\n        (click)=\"$event.stopPropagation()\"\n        [id]=\"resolvedId + '-listbox'\"\n        [ngClass]=\"panelClasses\"\n        [style.left]=\"dropdownStyle.left\"\n        [style.top]=\"dropdownStyle.top\"\n        [style.bottom]=\"dropdownStyle.bottom\"\n        [style.max-height]=\"dropdownStyle.maxHeight\"\n        [style.width]=\"dropdownStyle.width\"\n        aria-multiselectable=\"true\"\n        role=\"listbox\"\n      >\n        <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n      </div>\n    }\n  }\n\n  <!-- The search box + option list, shared verbatim by the sheet and the anchored\n       popover. `isSheet` only tunes spacing/sizing and which element scrolls: in sheet\n       mode the list is the flex scroller; anchored, the popover itself scrolls. -->\n  <ng-template #panelBody>\n    @if (isSearchable) {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        (click)=\"$event.stopPropagation()\"\n        [ngClass]=\"isSheet ? 'px-4 py-2' : 'p-2'\"\n        class=\"border-b border-base-300 shrink-0\"\n      >\n        <mn-lib-input-field\n          (ngModelChange)=\"onSearch($event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          [ngModel]=\"searchTerm\"\n          [props]=\"{\n            id: resolvedId + '-search',\n            type: 'search',\n            placeholder: searchPlaceholderLabel,\n            ariaLabel: searchPlaceholderLabel,\n            fullWidth: true,\n            size: 'sm'\n          }\"\n        ></mn-lib-input-field>\n      </div>\n    }\n    <div [ngClass]=\"isSheet ? 'flex-1 overflow-auto overscroll-contain' : ''\">\n      @for (opt of filteredOptions; track opt.value) {\n        <div\n          (click)=\"toggleOption(opt); $event.stopPropagation()\"\n          (keyup.enter)=\"toggleOption(opt)\"\n          (keyup.space)=\"toggleOption(opt)\"\n          [attr.aria-selected]=\"isSelected(opt)\"\n          [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n          [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n          [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\"\n          class=\"flex items-center gap-x-2 cursor-pointer text-base-content hover:bg-base-200\"\n          role=\"option\"\n          tabindex=\"0\"\n        >\n          <input\n            [checked]=\"isSelected(opt)\"\n            [disabled]=\"opt.disabled || isMaxReached(opt)\"\n            class=\"w-4 h-4 accent-primary pointer-events-none shrink-0\"\n            tabindex=\"-1\"\n            type=\"checkbox\"\n          />\n          <span>{{ opt.label }}</span>\n        </div>\n      }\n      @if (filteredOptions.length === 0) {\n        <div [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\" class=\"text-base-content/50\">\n          {{ noOptionsLabel }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input,
                 args: [{ required: true }]
@@ -6294,6 +6318,9 @@ class MnSelect {
         if (this.props.placeholder) {
             this.uiConfig = { ...this.uiConfig, placeholder: this.props.placeholder };
         }
+        if (this.props.ariaLabel) {
+            this.uiConfig = { ...this.uiConfig, ariaLabel: this.props.ariaLabel };
+        }
     }
     pickErrorKey(errors) {
         if (this.props.errorPriority) {
@@ -6322,7 +6349,7 @@ class MnSelect {
         return msgDef;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnSelect, isStandalone: true, selector: "mn-lib-select", inputs: { props: "props" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()", "window:scroll": "onWindowScrollOrResize()", "window:resize": "onWindowScrollOrResize()" }, properties: { "style.display": "props?.fullWidth ? 'block' : null", "style.width": "props?.fullWidth ? '100%' : null" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "shieldRef", first: true, predicate: ["shield"], descendants: true }, { propertyName: "sheetRef", first: true, predicate: ["sheet"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div [class.is-fullwidth]=\"props.fullWidth\" class=\"flex flex-col h-full\">\n  @if (uiConfig.label || props.label) {\n    <label [attr.for]=\"resolvedId\" class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    (blur)=\"handleBlur()\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    [attr.aria-controls]=\"isOpen ? resolvedId + '-listbox' : null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-disabled]=\"isDisabled || null\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [class.cursor-not-allowed]=\"isDisabled\"\n    [class.opacity-60]=\"isDisabled\"\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    [tabindex]=\"isDisabled ? -1 : 0\"\n    aria-haspopup=\"listbox\"\n    class=\"relative\"\n    role=\"combobox\"\n  >\n    <!-- `pr-6` reserves the gutter the caret is absolutely positioned in (right-2 + w-4),\n         so the value can never render underneath it. `min-w-0` lets the label shrink below\n         its content width, which is what makes truncation possible. -->\n    <div class=\"flex flex-row items-center min-h-6 min-w-0 pr-6\">\n      <span\n        [attr.title]=\"selectedOption?.label\"\n        [ngClass]=\"selectedOption ? 'text-base-content' : 'text-base-content/50'\"\n        class=\"truncate\"\n      >{{ displayText }}</span>\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg [size]=\"16\" class=\"text-base-content/50\" lucideChevronDown></svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    @if (isSheet) {\n      <!-- On mobile the panel is presented as a shared bottom sheet: the sheet chrome\n           (backdrop, grabber, swipe/flick-to-dismiss, slide animation) lives in\n           mn-bottom-sheet; this component only projects the field's content into it. The\n           sheet host is portalled to document.body (see the `sheet` ViewChild) so its\n           `position: fixed` anchors to the viewport, not a transformed ancestor. -->\n      <mn-bottom-sheet\n        #sheet\n        (dismiss)=\"close()\"\n        [ariaLabel]=\"uiConfig.ariaLabel || uiConfig.label || props.label || uiConfig.placeholder || props.placeholder\"\n        [maxHeightVh]=\"80\"\n        [minHeightPx]=\"sheetFloorPx\"\n      >\n        <div\n          [id]=\"resolvedId + '-listbox'\"\n          class=\"flex flex-col flex-1 min-h-0 overflow-hidden\"\n          role=\"listbox\"\n        >\n          <!-- The sheet covers its own trigger, so it carries a header to name the field; the\n               way out is the grabber (swipe-to-dismiss) and a backdrop tap. -->\n          <div class=\"px-4 pt-1 pb-2 shrink-0\">\n            <p class=\"text-base font-medium text-base-content truncate\">\n              {{ uiConfig.label || props.label || uiConfig.placeholder || props.placeholder || '' }}\n            </p>\n          </div>\n          <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n        </div>\n      </mn-bottom-sheet>\n    } @else {\n      <!-- A transparent full-viewport shield behind the panel, so \"click anywhere to dismiss\"\n           is literally true. It also *consumes* that click: without it the click reaches\n           whatever sits underneath \u2014 inside a modal that is the modal's own backdrop, so\n           dismissing the dropdown would tear down the whole modal with it. Portalled to\n           document.body for the same reason the panel is. It is aria-hidden and unfocusable:\n           the keyboard equivalent of this click is Escape. -->\n      <div\n        #shield\n        (click)=\"onShieldClick($event)\"\n        [id]=\"resolvedId + '-shield'\"\n        [ngClass]=\"shieldClasses\"\n        aria-hidden=\"true\"\n      ></div>\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        #dropdown\n        (click)=\"$event.stopPropagation()\"\n        [id]=\"resolvedId + '-listbox'\"\n        [ngClass]=\"panelClasses\"\n        [style.left]=\"dropdownStyle.left\"\n        [style.top]=\"dropdownStyle.top\"\n        [style.bottom]=\"dropdownStyle.bottom\"\n        [style.max-height]=\"dropdownStyle.maxHeight\"\n        [style.width]=\"dropdownStyle.width\"\n        role=\"listbox\"\n      >\n        <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n      </div>\n    }\n  }\n\n  <!-- The search box + option list, shared verbatim by the sheet and the anchored popover.\n       `isSheet` only tunes spacing/sizing and which element scrolls: in sheet mode the list\n       is the flex scroller; anchored, the popover itself scrolls. -->\n  <ng-template #panelBody>\n    @if (isSearchable) {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        (click)=\"$event.stopPropagation()\"\n        [ngClass]=\"isSheet ? 'px-4 py-2' : 'p-2'\"\n        class=\"border-b border-base-300 shrink-0\"\n      >\n        <mn-lib-input-field\n          (ngModelChange)=\"onSearch($event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          [ngModel]=\"searchTerm\"\n          [props]=\"{\n            id: resolvedId + '-search',\n            type: 'search',\n            placeholder: searchPlaceholderLabel,\n            ariaLabel: searchPlaceholderLabel,\n            fullWidth: true,\n            size: 'sm',\n            autoFocus: !isSheet\n          }\"\n        ></mn-lib-input-field>\n      </div>\n    }\n    <div [ngClass]=\"isSheet ? 'flex-1 overflow-auto overscroll-contain' : ''\">\n      @for (opt of filteredOptions; track opt.value) {\n        <div\n          (click)=\"selectOption(opt); $event.stopPropagation()\"\n          (keyup.enter)=\"selectOption(opt)\"\n          (keyup.space)=\"selectOption(opt)\"\n          [attr.aria-selected]=\"isSelected(opt)\"\n          [class.opacity-50]=\"opt.disabled\"\n          [class.pointer-events-none]=\"opt.disabled\"\n          [ngClass]=\"[isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm', isSelected(opt) ? 'bg-primary/10 font-medium' : '']\"\n          class=\"flex items-center gap-x-2.5 cursor-pointer text-base-content hover:bg-base-200 transition-colors\"\n          role=\"option\"\n          tabindex=\"0\"\n        >\n          <span class=\"truncate min-w-0\">{{ opt.label }}</span>\n          <!-- The current choice's marker. Decorative: the state is conveyed to assistive\n               tech by `aria-selected` on the row. -->\n          @if (isSelected(opt)) {\n            <svg\n              [lucideIcon]=\"checkIcon\"\n              [size]=\"isSheet ? 18 : 16\"\n              aria-hidden=\"true\"\n              class=\"ml-auto shrink-0 text-primary\"\n            ></svg>\n          }\n        </div>\n      }\n      @if (filteredOptions.length === 0) {\n        <div [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\" class=\"text-base-content/50\">\n          {{ noOptionsLabel }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnBottomSheet, selector: "mn-bottom-sheet", inputs: ["showBackdrop", "showGrabber", "dismissible", "minHeightPx", "maxHeightVh", "containerClass", "ariaLabel", "ariaLabelledby", "growWithKeyboard", "dismissGuard"], outputs: ["dismiss"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnSelect, isStandalone: true, selector: "mn-lib-select", inputs: { props: "props" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()", "window:scroll": "onWindowScrollOrResize()", "window:resize": "onWindowScrollOrResize()" }, properties: { "style.display": "props?.fullWidth ? 'block' : null", "style.width": "props?.fullWidth ? '100%' : null" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "shieldRef", first: true, predicate: ["shield"], descendants: true }, { propertyName: "sheetRef", first: true, predicate: ["sheet"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div [class.is-fullwidth]=\"props.fullWidth\" class=\"flex flex-col h-full\">\n  @if (uiConfig.label || props.label) {\n    <label [attr.for]=\"resolvedId\" class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-error\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    (blur)=\"handleBlur()\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    [attr.aria-controls]=\"isOpen ? resolvedId + '-listbox' : null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-disabled]=\"isDisabled || null\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [class.cursor-not-allowed]=\"isDisabled\"\n    [class.opacity-60]=\"isDisabled\"\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    [tabindex]=\"isDisabled ? -1 : 0\"\n    aria-haspopup=\"listbox\"\n    class=\"relative\"\n    role=\"combobox\"\n    [attr.aria-required]=\"isRequired() || null\"\n  >\n    <!-- `pr-6` reserves the gutter the caret is absolutely positioned in (right-2 + w-4),\n         so the value can never render underneath it. `min-w-0` lets the label shrink below\n         its content width, which is what makes truncation possible. -->\n    <div class=\"flex flex-row items-center min-h-6 min-w-0 pr-6\">\n      <span\n        [attr.title]=\"selectedOption?.label\"\n        [ngClass]=\"selectedOption ? 'text-base-content' : 'text-base-content/50'\"\n        class=\"truncate\"\n      >{{ displayText }}</span>\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg [size]=\"16\" class=\"text-base-content/50\" lucideChevronDown></svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    @if (isSheet) {\n      <!-- On mobile the panel is presented as a shared bottom sheet: the sheet chrome\n           (backdrop, grabber, swipe/flick-to-dismiss, slide animation) lives in\n           mn-bottom-sheet; this component only projects the field's content into it. The\n           sheet host is portalled to document.body (see the `sheet` ViewChild) so its\n           `position: fixed` anchors to the viewport, not a transformed ancestor. -->\n      <mn-bottom-sheet\n        #sheet\n        (dismiss)=\"close()\"\n        [ariaLabel]=\"uiConfig.ariaLabel || uiConfig.label || props.label || uiConfig.placeholder || props.placeholder\"\n        [maxHeightVh]=\"80\"\n        [minHeightPx]=\"sheetFloorPx\"\n      >\n        <div\n          [id]=\"resolvedId + '-listbox'\"\n          class=\"flex flex-col flex-1 min-h-0 overflow-hidden\"\n          role=\"listbox\"\n        >\n          <!-- The sheet covers its own trigger, so it carries a header to name the field; the\n               way out is the grabber (swipe-to-dismiss) and a backdrop tap. -->\n          <div class=\"px-4 pt-1 pb-2 shrink-0\">\n            <p class=\"text-base font-medium text-base-content truncate\">\n              {{ uiConfig.label || props.label || uiConfig.placeholder || props.placeholder || '' }}\n            </p>\n          </div>\n          <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n        </div>\n      </mn-bottom-sheet>\n    } @else {\n      <!-- A transparent full-viewport shield behind the panel, so \"click anywhere to dismiss\"\n           is literally true. It also *consumes* that click: without it the click reaches\n           whatever sits underneath \u2014 inside a modal that is the modal's own backdrop, so\n           dismissing the dropdown would tear down the whole modal with it. Portalled to\n           document.body for the same reason the panel is. It is aria-hidden and unfocusable:\n           the keyboard equivalent of this click is Escape. -->\n      <div\n        #shield\n        (click)=\"onShieldClick($event)\"\n        [id]=\"resolvedId + '-shield'\"\n        [ngClass]=\"shieldClasses\"\n        aria-hidden=\"true\"\n      ></div>\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        #dropdown\n        (click)=\"$event.stopPropagation()\"\n        [id]=\"resolvedId + '-listbox'\"\n        [ngClass]=\"panelClasses\"\n        [style.left]=\"dropdownStyle.left\"\n        [style.top]=\"dropdownStyle.top\"\n        [style.bottom]=\"dropdownStyle.bottom\"\n        [style.max-height]=\"dropdownStyle.maxHeight\"\n        [style.width]=\"dropdownStyle.width\"\n        role=\"listbox\"\n      >\n        <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n      </div>\n    }\n  }\n\n  <!-- The search box + option list, shared verbatim by the sheet and the anchored popover.\n       `isSheet` only tunes spacing/sizing and which element scrolls: in sheet mode the list\n       is the flex scroller; anchored, the popover itself scrolls. -->\n  <ng-template #panelBody>\n    @if (isSearchable) {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        (click)=\"$event.stopPropagation()\"\n        [ngClass]=\"isSheet ? 'px-4 py-2' : 'p-2'\"\n        class=\"border-b border-base-300 shrink-0\"\n      >\n        <mn-lib-input-field\n          (ngModelChange)=\"onSearch($event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          [ngModel]=\"searchTerm\"\n          [props]=\"{\n            id: resolvedId + '-search',\n            type: 'search',\n            placeholder: searchPlaceholderLabel,\n            ariaLabel: searchPlaceholderLabel,\n            fullWidth: true,\n            size: 'sm',\n            autoFocus: !isSheet\n          }\"\n        ></mn-lib-input-field>\n      </div>\n    }\n    <div [ngClass]=\"isSheet ? 'flex-1 overflow-auto overscroll-contain' : ''\">\n      @for (opt of filteredOptions; track opt.value) {\n        <div\n          (click)=\"selectOption(opt); $event.stopPropagation()\"\n          (keyup.enter)=\"selectOption(opt)\"\n          (keyup.space)=\"selectOption(opt)\"\n          [attr.aria-selected]=\"isSelected(opt)\"\n          [class.opacity-50]=\"opt.disabled\"\n          [class.pointer-events-none]=\"opt.disabled\"\n          [ngClass]=\"[isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm', isSelected(opt) ? 'bg-primary/10 font-medium' : '']\"\n          class=\"flex items-center gap-x-2.5 cursor-pointer text-base-content hover:bg-base-200 transition-colors\"\n          role=\"option\"\n          tabindex=\"0\"\n        >\n          <span class=\"truncate min-w-0\">{{ opt.label }}</span>\n          <!-- The current choice's marker. Decorative: the state is conveyed to assistive\n               tech by `aria-selected` on the row. -->\n          @if (isSelected(opt)) {\n            <svg\n              [lucideIcon]=\"checkIcon\"\n              [size]=\"isSheet ? 18 : 16\"\n              aria-hidden=\"true\"\n              class=\"ml-auto shrink-0 text-primary\"\n            ></svg>\n          }\n        </div>\n      }\n      @if (filteredOptions.length === 0) {\n        <div [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\" class=\"text-base-content/50\">\n          {{ noOptionsLabel }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnBottomSheet, selector: "mn-bottom-sheet", inputs: ["showBackdrop", "showGrabber", "dismissible", "minHeightPx", "maxHeightVh", "containerClass", "ariaLabel", "ariaLabelledby", "growWithKeyboard", "dismissGuard"], outputs: ["dismiss"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnSelect, decorators: [{
             type: Component,
@@ -6332,7 +6359,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         // to fill the parent. Give the host a real width when fullWidth is requested.
                         '[style.display]': "props?.fullWidth ? 'block' : null",
                         '[style.width]': "props?.fullWidth ? '100%' : null",
-                    }, template: "<div [class.is-fullwidth]=\"props.fullWidth\" class=\"flex flex-col h-full\">\n  @if (uiConfig.label || props.label) {\n    <label [attr.for]=\"resolvedId\" class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    (blur)=\"handleBlur()\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    [attr.aria-controls]=\"isOpen ? resolvedId + '-listbox' : null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-disabled]=\"isDisabled || null\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [class.cursor-not-allowed]=\"isDisabled\"\n    [class.opacity-60]=\"isDisabled\"\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    [tabindex]=\"isDisabled ? -1 : 0\"\n    aria-haspopup=\"listbox\"\n    class=\"relative\"\n    role=\"combobox\"\n  >\n    <!-- `pr-6` reserves the gutter the caret is absolutely positioned in (right-2 + w-4),\n         so the value can never render underneath it. `min-w-0` lets the label shrink below\n         its content width, which is what makes truncation possible. -->\n    <div class=\"flex flex-row items-center min-h-6 min-w-0 pr-6\">\n      <span\n        [attr.title]=\"selectedOption?.label\"\n        [ngClass]=\"selectedOption ? 'text-base-content' : 'text-base-content/50'\"\n        class=\"truncate\"\n      >{{ displayText }}</span>\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg [size]=\"16\" class=\"text-base-content/50\" lucideChevronDown></svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    @if (isSheet) {\n      <!-- On mobile the panel is presented as a shared bottom sheet: the sheet chrome\n           (backdrop, grabber, swipe/flick-to-dismiss, slide animation) lives in\n           mn-bottom-sheet; this component only projects the field's content into it. The\n           sheet host is portalled to document.body (see the `sheet` ViewChild) so its\n           `position: fixed` anchors to the viewport, not a transformed ancestor. -->\n      <mn-bottom-sheet\n        #sheet\n        (dismiss)=\"close()\"\n        [ariaLabel]=\"uiConfig.ariaLabel || uiConfig.label || props.label || uiConfig.placeholder || props.placeholder\"\n        [maxHeightVh]=\"80\"\n        [minHeightPx]=\"sheetFloorPx\"\n      >\n        <div\n          [id]=\"resolvedId + '-listbox'\"\n          class=\"flex flex-col flex-1 min-h-0 overflow-hidden\"\n          role=\"listbox\"\n        >\n          <!-- The sheet covers its own trigger, so it carries a header to name the field; the\n               way out is the grabber (swipe-to-dismiss) and a backdrop tap. -->\n          <div class=\"px-4 pt-1 pb-2 shrink-0\">\n            <p class=\"text-base font-medium text-base-content truncate\">\n              {{ uiConfig.label || props.label || uiConfig.placeholder || props.placeholder || '' }}\n            </p>\n          </div>\n          <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n        </div>\n      </mn-bottom-sheet>\n    } @else {\n      <!-- A transparent full-viewport shield behind the panel, so \"click anywhere to dismiss\"\n           is literally true. It also *consumes* that click: without it the click reaches\n           whatever sits underneath \u2014 inside a modal that is the modal's own backdrop, so\n           dismissing the dropdown would tear down the whole modal with it. Portalled to\n           document.body for the same reason the panel is. It is aria-hidden and unfocusable:\n           the keyboard equivalent of this click is Escape. -->\n      <div\n        #shield\n        (click)=\"onShieldClick($event)\"\n        [id]=\"resolvedId + '-shield'\"\n        [ngClass]=\"shieldClasses\"\n        aria-hidden=\"true\"\n      ></div>\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        #dropdown\n        (click)=\"$event.stopPropagation()\"\n        [id]=\"resolvedId + '-listbox'\"\n        [ngClass]=\"panelClasses\"\n        [style.left]=\"dropdownStyle.left\"\n        [style.top]=\"dropdownStyle.top\"\n        [style.bottom]=\"dropdownStyle.bottom\"\n        [style.max-height]=\"dropdownStyle.maxHeight\"\n        [style.width]=\"dropdownStyle.width\"\n        role=\"listbox\"\n      >\n        <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n      </div>\n    }\n  }\n\n  <!-- The search box + option list, shared verbatim by the sheet and the anchored popover.\n       `isSheet` only tunes spacing/sizing and which element scrolls: in sheet mode the list\n       is the flex scroller; anchored, the popover itself scrolls. -->\n  <ng-template #panelBody>\n    @if (isSearchable) {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        (click)=\"$event.stopPropagation()\"\n        [ngClass]=\"isSheet ? 'px-4 py-2' : 'p-2'\"\n        class=\"border-b border-base-300 shrink-0\"\n      >\n        <mn-lib-input-field\n          (ngModelChange)=\"onSearch($event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          [ngModel]=\"searchTerm\"\n          [props]=\"{\n            id: resolvedId + '-search',\n            type: 'search',\n            placeholder: searchPlaceholderLabel,\n            ariaLabel: searchPlaceholderLabel,\n            fullWidth: true,\n            size: 'sm',\n            autoFocus: !isSheet\n          }\"\n        ></mn-lib-input-field>\n      </div>\n    }\n    <div [ngClass]=\"isSheet ? 'flex-1 overflow-auto overscroll-contain' : ''\">\n      @for (opt of filteredOptions; track opt.value) {\n        <div\n          (click)=\"selectOption(opt); $event.stopPropagation()\"\n          (keyup.enter)=\"selectOption(opt)\"\n          (keyup.space)=\"selectOption(opt)\"\n          [attr.aria-selected]=\"isSelected(opt)\"\n          [class.opacity-50]=\"opt.disabled\"\n          [class.pointer-events-none]=\"opt.disabled\"\n          [ngClass]=\"[isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm', isSelected(opt) ? 'bg-primary/10 font-medium' : '']\"\n          class=\"flex items-center gap-x-2.5 cursor-pointer text-base-content hover:bg-base-200 transition-colors\"\n          role=\"option\"\n          tabindex=\"0\"\n        >\n          <span class=\"truncate min-w-0\">{{ opt.label }}</span>\n          <!-- The current choice's marker. Decorative: the state is conveyed to assistive\n               tech by `aria-selected` on the row. -->\n          @if (isSelected(opt)) {\n            <svg\n              [lucideIcon]=\"checkIcon\"\n              [size]=\"isSheet ? 18 : 16\"\n              aria-hidden=\"true\"\n              class=\"ml-auto shrink-0 text-primary\"\n            ></svg>\n          }\n        </div>\n      }\n      @if (filteredOptions.length === 0) {\n        <div [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\" class=\"text-base-content/50\">\n          {{ noOptionsLabel }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n" }]
+                    }, template: "<div [class.is-fullwidth]=\"props.fullWidth\" class=\"flex flex-col h-full\">\n  @if (uiConfig.label || props.label) {\n    <label [attr.for]=\"resolvedId\" class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-error\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    (blur)=\"handleBlur()\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    [attr.aria-controls]=\"isOpen ? resolvedId + '-listbox' : null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-disabled]=\"isDisabled || null\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [class.cursor-not-allowed]=\"isDisabled\"\n    [class.opacity-60]=\"isDisabled\"\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    [tabindex]=\"isDisabled ? -1 : 0\"\n    aria-haspopup=\"listbox\"\n    class=\"relative\"\n    role=\"combobox\"\n    [attr.aria-required]=\"isRequired() || null\"\n  >\n    <!-- `pr-6` reserves the gutter the caret is absolutely positioned in (right-2 + w-4),\n         so the value can never render underneath it. `min-w-0` lets the label shrink below\n         its content width, which is what makes truncation possible. -->\n    <div class=\"flex flex-row items-center min-h-6 min-w-0 pr-6\">\n      <span\n        [attr.title]=\"selectedOption?.label\"\n        [ngClass]=\"selectedOption ? 'text-base-content' : 'text-base-content/50'\"\n        class=\"truncate\"\n      >{{ displayText }}</span>\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg [size]=\"16\" class=\"text-base-content/50\" lucideChevronDown></svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    @if (isSheet) {\n      <!-- On mobile the panel is presented as a shared bottom sheet: the sheet chrome\n           (backdrop, grabber, swipe/flick-to-dismiss, slide animation) lives in\n           mn-bottom-sheet; this component only projects the field's content into it. The\n           sheet host is portalled to document.body (see the `sheet` ViewChild) so its\n           `position: fixed` anchors to the viewport, not a transformed ancestor. -->\n      <mn-bottom-sheet\n        #sheet\n        (dismiss)=\"close()\"\n        [ariaLabel]=\"uiConfig.ariaLabel || uiConfig.label || props.label || uiConfig.placeholder || props.placeholder\"\n        [maxHeightVh]=\"80\"\n        [minHeightPx]=\"sheetFloorPx\"\n      >\n        <div\n          [id]=\"resolvedId + '-listbox'\"\n          class=\"flex flex-col flex-1 min-h-0 overflow-hidden\"\n          role=\"listbox\"\n        >\n          <!-- The sheet covers its own trigger, so it carries a header to name the field; the\n               way out is the grabber (swipe-to-dismiss) and a backdrop tap. -->\n          <div class=\"px-4 pt-1 pb-2 shrink-0\">\n            <p class=\"text-base font-medium text-base-content truncate\">\n              {{ uiConfig.label || props.label || uiConfig.placeholder || props.placeholder || '' }}\n            </p>\n          </div>\n          <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n        </div>\n      </mn-bottom-sheet>\n    } @else {\n      <!-- A transparent full-viewport shield behind the panel, so \"click anywhere to dismiss\"\n           is literally true. It also *consumes* that click: without it the click reaches\n           whatever sits underneath \u2014 inside a modal that is the modal's own backdrop, so\n           dismissing the dropdown would tear down the whole modal with it. Portalled to\n           document.body for the same reason the panel is. It is aria-hidden and unfocusable:\n           the keyboard equivalent of this click is Escape. -->\n      <div\n        #shield\n        (click)=\"onShieldClick($event)\"\n        [id]=\"resolvedId + '-shield'\"\n        [ngClass]=\"shieldClasses\"\n        aria-hidden=\"true\"\n      ></div>\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        #dropdown\n        (click)=\"$event.stopPropagation()\"\n        [id]=\"resolvedId + '-listbox'\"\n        [ngClass]=\"panelClasses\"\n        [style.left]=\"dropdownStyle.left\"\n        [style.top]=\"dropdownStyle.top\"\n        [style.bottom]=\"dropdownStyle.bottom\"\n        [style.max-height]=\"dropdownStyle.maxHeight\"\n        [style.width]=\"dropdownStyle.width\"\n        role=\"listbox\"\n      >\n        <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n      </div>\n    }\n  }\n\n  <!-- The search box + option list, shared verbatim by the sheet and the anchored popover.\n       `isSheet` only tunes spacing/sizing and which element scrolls: in sheet mode the list\n       is the flex scroller; anchored, the popover itself scrolls. -->\n  <ng-template #panelBody>\n    @if (isSearchable) {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        (click)=\"$event.stopPropagation()\"\n        [ngClass]=\"isSheet ? 'px-4 py-2' : 'p-2'\"\n        class=\"border-b border-base-300 shrink-0\"\n      >\n        <mn-lib-input-field\n          (ngModelChange)=\"onSearch($event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          [ngModel]=\"searchTerm\"\n          [props]=\"{\n            id: resolvedId + '-search',\n            type: 'search',\n            placeholder: searchPlaceholderLabel,\n            ariaLabel: searchPlaceholderLabel,\n            fullWidth: true,\n            size: 'sm',\n            autoFocus: !isSheet\n          }\"\n        ></mn-lib-input-field>\n      </div>\n    }\n    <div [ngClass]=\"isSheet ? 'flex-1 overflow-auto overscroll-contain' : ''\">\n      @for (opt of filteredOptions; track opt.value) {\n        <div\n          (click)=\"selectOption(opt); $event.stopPropagation()\"\n          (keyup.enter)=\"selectOption(opt)\"\n          (keyup.space)=\"selectOption(opt)\"\n          [attr.aria-selected]=\"isSelected(opt)\"\n          [class.opacity-50]=\"opt.disabled\"\n          [class.pointer-events-none]=\"opt.disabled\"\n          [ngClass]=\"[isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm', isSelected(opt) ? 'bg-primary/10 font-medium' : '']\"\n          class=\"flex items-center gap-x-2.5 cursor-pointer text-base-content hover:bg-base-200 transition-colors\"\n          role=\"option\"\n          tabindex=\"0\"\n        >\n          <span class=\"truncate min-w-0\">{{ opt.label }}</span>\n          <!-- The current choice's marker. Decorative: the state is conveyed to assistive\n               tech by `aria-selected` on the row. -->\n          @if (isSelected(opt)) {\n            <svg\n              [lucideIcon]=\"checkIcon\"\n              [size]=\"isSheet ? 18 : 16\"\n              aria-hidden=\"true\"\n              class=\"ml-auto shrink-0 text-primary\"\n            ></svg>\n          }\n        </div>\n      }\n      @if (filteredOptions.length === 0) {\n        <div [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\" class=\"text-base-content/50\">\n          {{ noOptionsLabel }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input,
                 args: [{ required: true }]
@@ -8510,11 +8537,11 @@ class MnCollectionPagination {
         return explicit ?? this.lang.translateIfPresent(key) ?? fallback;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnCollectionPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnCollectionPagination, isStandalone: true, selector: "mn-collection-pagination", inputs: { idPrefix: "idPrefix", isPaginated: "isPaginated", isServerPaginated: "isServerPaginated", showLoadMore: "showLoadMore", loadingMoreRows: "loadingMoreRows", currentPage: "currentPage", pageSize: "pageSize", totalPages: "totalPages", totalItemCount: "totalItemCount", visiblePages: "visiblePages", pageSizeSelectOptions: "pageSizeSelectOptions", labels: "labels" }, outputs: { loadMore: "loadMore", pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<!-- Load more button -->\n@if (showLoadMore) {\n  <div class=\"flex justify-center py-4\">\n    <button\n      (click)=\"loadMore.emit()\"\n      [data]=\"{ size: 'sm', variant: 'outline', color: 'primary' }\"\n      [disabled]=\"loadingMoreRows\"\n      class=\"px-4 py-1.5 text-sm rounded border border-primary-500 text-primary-500 hover:bg-primary-100 transition-colors disabled:opacity-50\"\n      mnButton\n      type=\"button\"\n    >\n      @if (loadingMoreRows) {\n        <span\n          class=\"inline-block w-3 h-3 border-2 border-primary-500 border-t-transparent rounded-full animate-spin mr-2\"></span>\n      }\n      {{ loadMoreLabel }}\n    </button>\n  </div>\n}\n\n<!-- Pagination controls -->\n@if (showPagination) {\n  <div class=\"@container flex items-center justify-between gap-2 px-2 py-3 text-sm text-base-content\">\n    @if (pageSizeSelectOptions.length > 1) {\n      <div class=\"hidden @min-[640px]:flex items-center gap-2\">\n        <span>{{ rowsPerPageLabel }}</span>\n        <mn-lib-select\n          (ngModelChange)=\"pageSizeChange.emit($event)\"\n          [ngModel]=\"pageSize\"\n          [props]=\"{\n            id: idPrefix + '-page-size',\n            options: pageSizeSelectOptions,\n            size: 'sm'\n          }\"\n        ></mn-lib-select>\n      </div>\n    } @else {\n      <div class=\"hidden @min-[640px]:block\"></div>\n    }\n\n    <!-- Narrow viewports state the page position outright: the strip's last-page\n         anchor only appears once the window stops reaching the end, so it can't\n         be relied on to carry the total. -->\n    <span aria-live=\"polite\"\n          class=\"@min-[640px]:hidden text-xs opacity-70 whitespace-nowrap\">{{ pageIndicatorLabel }}</span>\n\n    <div class=\"flex flex-wrap items-center justify-center gap-0.5 @min-[640px]:gap-1\">\n      <span class=\"text-xs mr-2 hidden @min-[640px]:inline\">{{ itemRangeLabel }}</span>\n\n      <button\n        (click)=\"pageChange.emit(1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        [disabled]=\"currentPage === 1\"\n        [attr.aria-label]=\"firstPageLabel\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n        type=\"button\"\n      >\u00AB\n      </button>\n\n      <button\n        (click)=\"pageChange.emit(currentPage - 1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        [disabled]=\"currentPage === 1\"\n        [attr.aria-label]=\"previousPageLabel\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n        type=\"button\"\n      >\u2039\n      </button>\n\n      @for (slot of pageSlots; track $index) {\n        <span [class]=\"slotVisibility(slot)\">\n          @if (slot.page !== null) {\n            <button\n              (click)=\"pageChange.emit(slot.page)\"\n              [attr.aria-current]=\"slot.page === currentPage ? 'page' : null\"\n              [attr.aria-label]=\"pageLabel(slot.page)\"\n              [data]=\"{ size: 'sm', variant: 'text', color: slot.page === currentPage ? 'primary' : 'gray' }\"\n              class=\"px-1.5 @min-[640px]:px-2.5 py-1 rounded underline underline-offset-2 transition-colors text-xs\"\n              mnButton\n              type=\"button\"\n            >{{ slot.page }}\n            </button>\n          } @else {\n            <span aria-hidden=\"true\" class=\"px-0.5 text-xs opacity-50 select-none\">\u2026</span>\n          }\n        </span>\n      }\n\n      <button\n        (click)=\"pageChange.emit(currentPage + 1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        [disabled]=\"currentPage === totalPages\"\n        [attr.aria-label]=\"nextPageLabel\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n        type=\"button\"\n      >\u203A\n      </button>\n\n      <button\n        (click)=\"pageChange.emit(totalPages)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        [disabled]=\"currentPage === totalPages\"\n        [attr.aria-label]=\"lastPageLabel\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n        type=\"button\"\n      >\u00BB\n      </button>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnSelect, selector: "mn-lib-select", inputs: ["props"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnCollectionPagination, isStandalone: true, selector: "mn-collection-pagination", inputs: { idPrefix: "idPrefix", isPaginated: "isPaginated", isServerPaginated: "isServerPaginated", showLoadMore: "showLoadMore", loadingMoreRows: "loadingMoreRows", currentPage: "currentPage", pageSize: "pageSize", totalPages: "totalPages", totalItemCount: "totalItemCount", visiblePages: "visiblePages", pageSizeSelectOptions: "pageSizeSelectOptions", labels: "labels" }, outputs: { loadMore: "loadMore", pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<!-- Load more button -->\n@if (showLoadMore) {\n  <div class=\"flex justify-center py-4\">\n    <button\n      (click)=\"loadMore.emit()\"\n      [data]=\"{ size: 'sm', variant: 'outline', color: 'primary' }\"\n      [disabled]=\"loadingMoreRows\"\n      class=\"px-4 py-1.5 text-sm rounded border border-primary-500 text-primary-500 hover:bg-primary-100 transition-colors disabled:opacity-50\"\n      mnButton\n      type=\"button\"\n    >\n      @if (loadingMoreRows) {\n        <span\n          class=\"inline-block w-3 h-3 border-2 border-primary-500 border-t-transparent rounded-full animate-spin mr-2\"></span>\n      }\n      {{ loadMoreLabel }}\n    </button>\n  </div>\n}\n\n<!-- Pagination controls -->\n@if (showPagination) {\n  <div class=\"@container flex items-center justify-between gap-2 px-2 py-3 text-sm text-base-content\">\n    @if (pageSizeSelectOptions.length > 1) {\n      <div class=\"hidden @min-[640px]:flex items-center gap-2\">\n        <span>{{ rowsPerPageLabel }}</span>\n        <mn-lib-select\n          (ngModelChange)=\"pageSizeChange.emit($event)\"\n          [ngModel]=\"pageSize\"\n          [props]=\"{\n            id: idPrefix + '-page-size',\n            ariaLabel: rowsPerPageLabel,\n            options: pageSizeSelectOptions,\n            size: 'sm'\n          }\"\n        ></mn-lib-select>\n      </div>\n    } @else {\n      <div class=\"hidden @min-[640px]:block\"></div>\n    }\n\n    <!-- Narrow viewports state the page position outright: the strip's last-page\n         anchor only appears once the window stops reaching the end, so it can't\n         be relied on to carry the total. -->\n    <span aria-live=\"polite\"\n          class=\"@min-[640px]:hidden text-xs opacity-70 whitespace-nowrap\">{{ pageIndicatorLabel }}</span>\n\n    <div class=\"flex flex-wrap items-center justify-center gap-0.5 @min-[640px]:gap-1\">\n      <span class=\"text-xs mr-2 hidden @min-[640px]:inline\">{{ itemRangeLabel }}</span>\n\n      <button\n        (click)=\"pageChange.emit(1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        [disabled]=\"currentPage === 1\"\n        [attr.aria-label]=\"firstPageLabel\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n        type=\"button\"\n      >\u00AB\n      </button>\n\n      <button\n        (click)=\"pageChange.emit(currentPage - 1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        [disabled]=\"currentPage === 1\"\n        [attr.aria-label]=\"previousPageLabel\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n        type=\"button\"\n      >\u2039\n      </button>\n\n      @for (slot of pageSlots; track $index) {\n        <span [class]=\"slotVisibility(slot)\">\n          @if (slot.page !== null) {\n            <button\n              (click)=\"pageChange.emit(slot.page)\"\n              [attr.aria-current]=\"slot.page === currentPage ? 'page' : null\"\n              [attr.aria-label]=\"pageLabel(slot.page)\"\n              [data]=\"{ size: 'sm', variant: 'text', color: slot.page === currentPage ? 'primary' : 'gray' }\"\n              class=\"px-1.5 @min-[640px]:px-2.5 py-1 rounded underline underline-offset-2 transition-colors text-xs\"\n              mnButton\n              type=\"button\"\n            >{{ slot.page }}\n            </button>\n          } @else {\n            <span aria-hidden=\"true\" class=\"px-0.5 text-xs opacity-50 select-none\">\u2026</span>\n          }\n        </span>\n      }\n\n      <button\n        (click)=\"pageChange.emit(currentPage + 1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        [disabled]=\"currentPage === totalPages\"\n        [attr.aria-label]=\"nextPageLabel\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n        type=\"button\"\n      >\u203A\n      </button>\n\n      <button\n        (click)=\"pageChange.emit(totalPages)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        [disabled]=\"currentPage === totalPages\"\n        [attr.aria-label]=\"lastPageLabel\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n        type=\"button\"\n      >\u00BB\n      </button>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnSelect, selector: "mn-lib-select", inputs: ["props"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnCollectionPagination, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-collection-pagination', standalone: true, imports: [MnButton, MnSelect, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Load more button -->\n@if (showLoadMore) {\n  <div class=\"flex justify-center py-4\">\n    <button\n      (click)=\"loadMore.emit()\"\n      [data]=\"{ size: 'sm', variant: 'outline', color: 'primary' }\"\n      [disabled]=\"loadingMoreRows\"\n      class=\"px-4 py-1.5 text-sm rounded border border-primary-500 text-primary-500 hover:bg-primary-100 transition-colors disabled:opacity-50\"\n      mnButton\n      type=\"button\"\n    >\n      @if (loadingMoreRows) {\n        <span\n          class=\"inline-block w-3 h-3 border-2 border-primary-500 border-t-transparent rounded-full animate-spin mr-2\"></span>\n      }\n      {{ loadMoreLabel }}\n    </button>\n  </div>\n}\n\n<!-- Pagination controls -->\n@if (showPagination) {\n  <div class=\"@container flex items-center justify-between gap-2 px-2 py-3 text-sm text-base-content\">\n    @if (pageSizeSelectOptions.length > 1) {\n      <div class=\"hidden @min-[640px]:flex items-center gap-2\">\n        <span>{{ rowsPerPageLabel }}</span>\n        <mn-lib-select\n          (ngModelChange)=\"pageSizeChange.emit($event)\"\n          [ngModel]=\"pageSize\"\n          [props]=\"{\n            id: idPrefix + '-page-size',\n            options: pageSizeSelectOptions,\n            size: 'sm'\n          }\"\n        ></mn-lib-select>\n      </div>\n    } @else {\n      <div class=\"hidden @min-[640px]:block\"></div>\n    }\n\n    <!-- Narrow viewports state the page position outright: the strip's last-page\n         anchor only appears once the window stops reaching the end, so it can't\n         be relied on to carry the total. -->\n    <span aria-live=\"polite\"\n          class=\"@min-[640px]:hidden text-xs opacity-70 whitespace-nowrap\">{{ pageIndicatorLabel }}</span>\n\n    <div class=\"flex flex-wrap items-center justify-center gap-0.5 @min-[640px]:gap-1\">\n      <span class=\"text-xs mr-2 hidden @min-[640px]:inline\">{{ itemRangeLabel }}</span>\n\n      <button\n        (click)=\"pageChange.emit(1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        [disabled]=\"currentPage === 1\"\n        [attr.aria-label]=\"firstPageLabel\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n        type=\"button\"\n      >\u00AB\n      </button>\n\n      <button\n        (click)=\"pageChange.emit(currentPage - 1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        [disabled]=\"currentPage === 1\"\n        [attr.aria-label]=\"previousPageLabel\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n        type=\"button\"\n      >\u2039\n      </button>\n\n      @for (slot of pageSlots; track $index) {\n        <span [class]=\"slotVisibility(slot)\">\n          @if (slot.page !== null) {\n            <button\n              (click)=\"pageChange.emit(slot.page)\"\n              [attr.aria-current]=\"slot.page === currentPage ? 'page' : null\"\n              [attr.aria-label]=\"pageLabel(slot.page)\"\n              [data]=\"{ size: 'sm', variant: 'text', color: slot.page === currentPage ? 'primary' : 'gray' }\"\n              class=\"px-1.5 @min-[640px]:px-2.5 py-1 rounded underline underline-offset-2 transition-colors text-xs\"\n              mnButton\n              type=\"button\"\n            >{{ slot.page }}\n            </button>\n          } @else {\n            <span aria-hidden=\"true\" class=\"px-0.5 text-xs opacity-50 select-none\">\u2026</span>\n          }\n        </span>\n      }\n\n      <button\n        (click)=\"pageChange.emit(currentPage + 1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        [disabled]=\"currentPage === totalPages\"\n        [attr.aria-label]=\"nextPageLabel\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n        type=\"button\"\n      >\u203A\n      </button>\n\n      <button\n        (click)=\"pageChange.emit(totalPages)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        [disabled]=\"currentPage === totalPages\"\n        [attr.aria-label]=\"lastPageLabel\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n        type=\"button\"\n      >\u00BB\n      </button>\n    </div>\n  </div>\n}\n" }]
+            args: [{ selector: 'mn-collection-pagination', standalone: true, imports: [MnButton, MnSelect, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Load more button -->\n@if (showLoadMore) {\n  <div class=\"flex justify-center py-4\">\n    <button\n      (click)=\"loadMore.emit()\"\n      [data]=\"{ size: 'sm', variant: 'outline', color: 'primary' }\"\n      [disabled]=\"loadingMoreRows\"\n      class=\"px-4 py-1.5 text-sm rounded border border-primary-500 text-primary-500 hover:bg-primary-100 transition-colors disabled:opacity-50\"\n      mnButton\n      type=\"button\"\n    >\n      @if (loadingMoreRows) {\n        <span\n          class=\"inline-block w-3 h-3 border-2 border-primary-500 border-t-transparent rounded-full animate-spin mr-2\"></span>\n      }\n      {{ loadMoreLabel }}\n    </button>\n  </div>\n}\n\n<!-- Pagination controls -->\n@if (showPagination) {\n  <div class=\"@container flex items-center justify-between gap-2 px-2 py-3 text-sm text-base-content\">\n    @if (pageSizeSelectOptions.length > 1) {\n      <div class=\"hidden @min-[640px]:flex items-center gap-2\">\n        <span>{{ rowsPerPageLabel }}</span>\n        <mn-lib-select\n          (ngModelChange)=\"pageSizeChange.emit($event)\"\n          [ngModel]=\"pageSize\"\n          [props]=\"{\n            id: idPrefix + '-page-size',\n            ariaLabel: rowsPerPageLabel,\n            options: pageSizeSelectOptions,\n            size: 'sm'\n          }\"\n        ></mn-lib-select>\n      </div>\n    } @else {\n      <div class=\"hidden @min-[640px]:block\"></div>\n    }\n\n    <!-- Narrow viewports state the page position outright: the strip's last-page\n         anchor only appears once the window stops reaching the end, so it can't\n         be relied on to carry the total. -->\n    <span aria-live=\"polite\"\n          class=\"@min-[640px]:hidden text-xs opacity-70 whitespace-nowrap\">{{ pageIndicatorLabel }}</span>\n\n    <div class=\"flex flex-wrap items-center justify-center gap-0.5 @min-[640px]:gap-1\">\n      <span class=\"text-xs mr-2 hidden @min-[640px]:inline\">{{ itemRangeLabel }}</span>\n\n      <button\n        (click)=\"pageChange.emit(1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        [disabled]=\"currentPage === 1\"\n        [attr.aria-label]=\"firstPageLabel\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n        type=\"button\"\n      >\u00AB\n      </button>\n\n      <button\n        (click)=\"pageChange.emit(currentPage - 1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        [disabled]=\"currentPage === 1\"\n        [attr.aria-label]=\"previousPageLabel\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n        type=\"button\"\n      >\u2039\n      </button>\n\n      @for (slot of pageSlots; track $index) {\n        <span [class]=\"slotVisibility(slot)\">\n          @if (slot.page !== null) {\n            <button\n              (click)=\"pageChange.emit(slot.page)\"\n              [attr.aria-current]=\"slot.page === currentPage ? 'page' : null\"\n              [attr.aria-label]=\"pageLabel(slot.page)\"\n              [data]=\"{ size: 'sm', variant: 'text', color: slot.page === currentPage ? 'primary' : 'gray' }\"\n              class=\"px-1.5 @min-[640px]:px-2.5 py-1 rounded underline underline-offset-2 transition-colors text-xs\"\n              mnButton\n              type=\"button\"\n            >{{ slot.page }}\n            </button>\n          } @else {\n            <span aria-hidden=\"true\" class=\"px-0.5 text-xs opacity-50 select-none\">\u2026</span>\n          }\n        </span>\n      }\n\n      <button\n        (click)=\"pageChange.emit(currentPage + 1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        [disabled]=\"currentPage === totalPages\"\n        [attr.aria-label]=\"nextPageLabel\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n        type=\"button\"\n      >\u203A\n      </button>\n\n      <button\n        (click)=\"pageChange.emit(totalPages)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        [disabled]=\"currentPage === totalPages\"\n        [attr.aria-label]=\"lastPageLabel\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n        type=\"button\"\n      >\u00BB\n      </button>\n    </div>\n  </div>\n}\n" }]
         }], propDecorators: { idPrefix: [{
                 type: Input
             }], isPaginated: [{
@@ -8789,6 +8816,14 @@ class MnTable extends MnSelectableCollectionBase {
             return '';
         return this.currentSort.direction === 'asc' ? '▲' : '▼';
     }
+    /**
+     * Accessible name for a column's inline filter control: the header text, or the column key when
+     * the header is a template.
+     * @param column - The filtered column.
+     */
+    filterLabel(column) {
+        return typeof column.header === 'string' ? column.header : column.key;
+    }
     isSortable(column) {
         return !!column.sortType && column.sortType !== ColumnSortType.NONE;
     }
@@ -8855,7 +8890,7 @@ class MnTable extends MnSelectableCollectionBase {
     }
     /** Accessible name for the scrollable table region. */
     get tableRegionLabel() {
-        return this.resolveLabel(undefined, 'mnCollection.dataTable', 'Data table');
+        return this.resolveLabel(this.dataSource.ariaLabel, 'mnCollection.dataTable', 'Data table');
     }
     /**
      * Fewer tags once the table is narrow. A tag holding a person's full name takes
@@ -9336,11 +9371,11 @@ class MnTable extends MnSelectableCollectionBase {
         return template.replace('{{label}}', this.selectionLabelFor(row));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTable, isStandalone: true, selector: "mn-table", outputs: { sortChange: "sortChange", rowClick: "rowClick" }, host: { listeners: { "window:resize": "onWindowResize()" }, classAttribute: "block" }, viewQueries: [{ propertyName: "filtersSheet", first: true, predicate: ["filtersSheet"], descendants: true }, { propertyName: "collectionBody", first: true, predicate: ["collectionBody"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Everything that reflows lives inside a @container, so the breakpoints below\n     measure the table's own width rather than the window's. A table in a modal,\n     a sidebar or a narrow grid cell is far narrower than the viewport, and\n     viewport breakpoints would hand it a desktop layout it has no room for. -->\n<div class=\"@container\">\n  <!-- Selection summary: the whole selection, never paged, filtered or sorted. The\n       table below answers \"what could I pick?\", which is why it is searched and paged;\n       this answers \"what did I pick?\", which a paginated list cannot without hiding\n       most of the answer on some other page. -->\n  @if (showSelectionSummary) {\n    <div class=\"flex flex-col gap-2 rounded-md border border-base-300 bg-base-200/50 p-3 mb-3\">\n      <div class=\"flex items-center justify-between gap-2\">\n        <span class=\"text-sm font-medium text-base-content\">{{ selectionSummaryTitle }}</span>\n        <button\n          (click)=\"clearSelection()\"\n          [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n          class=\"gap-1 shrink-0\"\n          mnButton\n          type=\"button\"\n        >\n          <svg [size]=\"14\" lucideX></svg>\n          <span>{{ selectionClearAllLabel }}</span>\n        </button>\n      </div>\n      <!-- Only the first few tags render; the rest collapse behind a \"+N more\" control.\n           The heading's count always states the true total, so this hides tags, never\n           information. Expanded, the list is height-capped and scrolls, so even a\n           selection of hundreds cannot push the table off screen. -->\n      <ul\n        [class.max-h-28]=\"selectionSummaryExpanded\"\n        [class.overflow-y-auto]=\"selectionSummaryExpanded\"\n        class=\"flex flex-wrap gap-1.5 list-none m-0 p-0\"\n      >\n        @for (row of visibleSelectionRows; track dataSource.getID(row)) {\n          <li\n            class=\"inline-flex items-center gap-1 rounded-full bg-base-100 border border-base-300 pl-2.5 pr-1 py-0.5 text-xs text-base-content max-w-full\">\n            <span [attr.title]=\"selectionLabelFor(row)\" class=\"truncate\">{{ selectionLabelFor(row) }}</span>\n            <button\n              (click)=\"removeSelection(row)\"\n              [attr.aria-label]=\"selectionRemoveLabel(row)\"\n              class=\"shrink-0 rounded-full p-0.5 hover:bg-base-300 transition-colors cursor-pointer\"\n              type=\"button\"\n            >\n              <svg [size]=\"12\" lucideX></svg>\n            </button>\n          </li>\n        }\n        @if (hiddenSelectionCount > 0 || selectionSummaryExpanded) {\n          <li>\n            <button\n              (click)=\"toggleSelectionSummary()\"\n              [attr.aria-expanded]=\"selectionSummaryExpanded\"\n              [data]=\"{ variant: 'text', color: 'primary', size: 'sm', borderRadius: 'md', hover: true }\"\n              class=\"text-xs\"\n              mnButton\n              type=\"button\"\n            >\n              {{ selectionSummaryToggleLabel }}\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n  }\n\n  <!-- Toolbar: custom toolbar template + search. Only rendered when it has content,\n       so an unsearchable table without toolbar templates emits no empty spacer. -->\n@if (isSearchable || dataSource.toolbarLeftTemplate || dataSource.toolbarRightTemplate || (hasColumnFilters && filtersCollapsed)) {\n  <div class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center justify-between gap-2 mb-3\">\n    <div class=\"flex items-center gap-2 w-full @min-[420px]:w-auto\">\n    @if (dataSource.toolbarLeftTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n    <div\n      class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center gap-2 w-full @min-[420px]:flex-1 @min-[560px]:flex-none @min-[560px]:w-auto\">\n    @if (isSearchable) {\n      <!-- Enter must not submit a surrounding form: the search box belongs to the\n           table's chrome, not to whatever form the table happens to sit in. -->\n      <mn-lib-input-field\n        (keydown.enter)=\"$event.preventDefault()\"\n        class=\"w-full @min-[420px]:flex-1 @min-[560px]:max-w-64\"\n        [props]=\"{\n            id: 'mn-table-search',\n            type: 'search',\n            label: '',\n            ariaLabel: searchPlaceholderLabel,\n            placeholder: searchPlaceholderLabel,\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n        [ngModel]=\"searchValue\"\n        (ngModelChange)=\"onSearch($event)\"\n      ></mn-lib-input-field>\n    }\n    @if (dataSource.toolbarRightTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarRightTemplate\"></ng-container>\n      </div>\n    }\n    <!-- Small-screen filter toggle: replaces the inline per-column filter row below 640px -->\n    @if (hasColumnFilters && filtersCollapsed) {\n      <button\n        type=\"button\"\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'primary', size: 'md', borderRadius: 'md', hover: true }\"\n        class=\"w-full @min-[420px]:w-auto gap-1.5\"\n        [attr.aria-expanded]=\"filtersPanelOpen\"\n        aria-controls=\"mn-table-filters-panel\"\n        (click)=\"openFiltersPanel()\"\n      >\n        <svg lucideFunnel [size]=\"15\"></svg>\n        <span>{{ filtersButtonLabel }}</span>\n      </button>\n    }\n  </div>\n</div>\n}\n\n<!-- Small-screen filters: full-width fields decoupled from column widths, presented\n     as a bottom sheet so they overlay rather than push the table down. -->\n@if (hasColumnFilters && filtersCollapsed && filtersPanelOpen) {\n  <mn-bottom-sheet\n    #filtersSheet\n    (dismiss)=\"filtersPanelOpen = false\"\n    [ariaLabel]=\"filtersButtonLabel\"\n    [growWithKeyboard]=\"true\"\n    [maxHeightVh]=\"80\"\n  >\n    <div id=\"mn-table-filters-panel\" class=\"flex flex-col gap-3 px-4 pb-4\">\n      <span class=\"text-base font-semibold text-base-content\">{{ filtersButtonLabel }}</span>\n      @for (column of dataSource.columns; track column.key) {\n        @if (column.filterable) {\n          <div class=\"flex flex-col gap-1\">\n            <label\n              class=\"text-xs font-medium text-base-content/70\"\n              [attr.for]=\"'mn-table-filter-panel-' + column.key\"\n            >\n              @if (isTemplateRef(column.header)) {\n                <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n              } @else {\n                {{ column.header }}\n              }\n            </label>\n            <ng-container\n              [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'panel' }\"\n              [ngTemplateOutlet]=\"filterField\"\n            ></ng-container>\n          </div>\n        }\n      }\n      @if (hasActiveFilters) {\n        <button\n          type=\"button\"\n          mnButton\n          [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n          class=\"self-start gap-1\"\n          (click)=\"clearAllFilters()\"\n        >\n          <svg lucideX [size]=\"14\"></svg>\n          <span>{{ clearFiltersButtonLabel }}</span>\n        </button>\n      }\n      <div class=\"mt-1 flex min-[400px]:justify-end\">\n        <button\n          type=\"button\"\n          mnButton\n          [data]=\"{ variant: 'fill', color: 'primary', size: 'md', borderRadius: 'md', hover: true }\"\n          class=\"w-full min-[400px]:w-auto\"\n          (click)=\"closeFiltersPanel()\"\n        >\n          <span>{{ filtersCloseLabel }}</span>\n        </button>\n      </div>\n    </div>\n  </mn-bottom-sheet>\n}\n\n<!-- Table wrapper with horizontal scroll -->\n  <div #collectionBody [attr.aria-label]=\"tableRegionLabel\" [style.min-height.px]=\"bodyMinHeight\"\n     class=\"overflow-x-auto\"\n     role=\"region\">\n  <table [class]=\"tableClasses\">\n    <thead>\n      <tr class=\"bg-base-100\">\n        <!-- Selection checkbox column header -->\n        @if (hasSelection) {\n          <th class=\"w-10 text-center text-sm px-2 py-2\">\n            @if (isMultiSelect) {\n              <mn-lib-checkbox\n                (checkedChange)=\"toggleAll()\"\n                [checked]=\"allSelected\"\n                [props]=\"{ id: 'mn-table-select-all', size: 'sm' }\"\n              ></mn-lib-checkbox>\n            }\n          </th>\n        }\n\n        <!-- Data columns -->\n        @for (column of dataSource.columns; track column.key) {\n          <th\n            [attr.data-column-key]=\"column.key\"\n            [class.truncate]=\"widthsArePinned\"\n            [class.cursor-pointer]=\"isSortable(column)\"\n            [class.select-none]=\"isSortable(column)\"\n            [class.hover:bg-base-200]=\"isSortable(column)\"\n            [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n            [class.text-center]=\"column.align === 'center'\"\n            [class.text-right]=\"column.align === 'right'\"\n            [mnHiddenBelow]=\"column.hiddenBelow\"\n            [style.width]=\"columnWidth(column)\"\n            [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n            class=\"text-sm px-2 py-1 @min-[640px]:px-4 @min-[640px]:py-2 whitespace-nowrap\"\n            (click)=\"sort(column)\"\n          >\n            <span class=\"inline-flex items-center gap-1\">\n              @if (isTemplateRef(column.header)) {\n                <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n              } @else {\n                <span>{{ column.header }}</span>\n              }\n              @if (isSortable(column)) {\n                <span class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n              }\n            </span>\n          </th>\n        }\n\n      </tr>\n\n      <!-- Per-column filter row (wide screens only; collapses into a panel below 640px).\n           `font-normal` on the cells is load-bearing: these are `th` elements, which the\n           browser renders bold, and the filter inputs and selects inside them inherit\n           that. Filter controls are form fields, not headings, and must not look bold.\n           The stacked filter panel renders outside any `th`, so it is unaffected. -->\n      @if (hasColumnFilters && !filtersCollapsed) {\n        <tr class=\"bg-base-100 border-b border-base-300 font-normal\">\n          @if (hasSelection) {\n            <th class=\"px-2 py-1 font-normal\"></th>\n          }\n          @for (column of dataSource.columns; track column.key) {\n            <th\n              class=\"px-4 py-2 font-normal\"\n              [mnHiddenBelow]=\"column.hiddenBelow\"\n            >\n              @if (column.filterable) {\n                <!-- Every filter renders as an ordinary control right under its\n                     header. The rich types used to hide behind a button that opened\n                     a floating panel, which cost a click to discover, a click to\n                     apply, and hid whether a column was even filterable. -->\n                <ng-container\n                  [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'inline' }\"\n                  [ngTemplateOutlet]=\"filterField\"\n                ></ng-container>\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n        @if (isLoadingState) {\n        @for (_ of skeletonRows; track $index) {\n          <tr>\n            @if (hasSelection) {\n              <td class=\"px-2 py-3\">\n                <mn-skeleton [data]=\"{ shape: 'rectangle', width: '1rem', height: '1rem' }\"></mn-skeleton>\n              </td>\n            }\n            @for (column of dataSource.columns; track column.key) {\n              <td class=\"px-4 py-3\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                  [style.width]=\"columnWidth(column)\"\n              >\n                @if (isTemplateRef(column.skeleton)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.skeleton)\"></ng-container>\n                } @else {\n                  <mn-skeleton [data]=\"getColumnSkeletonData(column)\"></mn-skeleton>\n                }\n              </td>\n            }\n          </tr>\n        }\n        } @else if (isErrorState) {\n          <!-- Error state -->\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.errorTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.errorTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-error\">\n                  <p class=\"text-sm\">{{ dataSource.errorMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n      } @else {\n        <!-- Empty state -->\n        @if (filteredItems.length === 0) {\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.emptyTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-base-content/50\">\n                  @if (dataSource.emptyIcon !== null) {\n                    <svg [lucideIcon]=\"dataSource.emptyIcon ?? defaultEmptyIcon\" [size]=\"32\" [strokeWidth]=\"1.5\"></svg>\n                  }\n                  <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n        }\n\n        <!-- Data rows -->\n        @for (row of paginatedItems; track trackByID($index, row); let odd = $odd; let last = $last) {\n          <tr\n            class=\"bg-base-100 transition-colors duration-150 hover:cursor-pointer\"\n            [ngClass]=\"{'bg-primary/10': isSelected(row)}\"\n            [class.bg-base-200]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n            [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n            [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n            [class.border-b]=\"!last\"\n            [class.border-base-300]=\"!last\"\n            [class.border-b-1]=\"last\"\n            [class.border-black]=\"last\"\n            [class.shadow-3xl]=\"last\"\n            (click)=\"onRowClick(row)\"\n          >\n            <!-- Selection checkbox -->\n            @if (hasSelection) {\n              <td (click)=\"$event.stopPropagation()\" class=\"w-10 text-center px-2 py-2\">\n                <mn-lib-checkbox\n                  (checkedChange)=\"toggle(row)\"\n                  [checked]=\"isSelected(row)\"\n                  [props]=\"{ id: 'mn-table-row-' + $index, size: 'sm' }\"\n                ></mn-lib-checkbox>\n              </td>\n            }\n\n            <!-- Data cells -->\n            @for (column of dataSource.columns; track column.key) {\n              <td\n                [attr.title]=\"cellTitle(column, row)\"\n                [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n                [class.text-center]=\"column.align === 'center'\"\n                [class.text-right]=\"column.align === 'right'\"\n                [class.truncate]=\"widthsArePinned\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                [style.width]=\"columnWidth(column)\"\n                class=\"text-xs px-2 py-1 @min-[640px]:px-4 @min-[640px]:py-2\"\n              >\n                @if (column.actions) {\n                  <!-- Actions column: inline command buttons that collapse into a \u22EF menu\n                       once the table is narrower than 450px (container query), for every\n                       row with actions. A row with no visible actions renders nothing.\n                       A row with a single icon-only action never collapses: one icon button\n                       is narrower than the \u22EF trigger it would hide behind, so folding it\n                       only costs a tap. -->\n                  @if (hasRowActions(column, row)) {\n                  <div class=\"inline-flex items-center gap-1\"\n                       [class.justify-end]=\"(column.align ?? 'left') === 'right'\">\n                    @if (collapsesRowActions(column, row)) {\n                      <span class=\"hidden items-center gap-1 @min-[450px]:inline-flex\">\n                        <ng-container [ngTemplateOutletContext]=\"{ column: column, row: row }\"\n                                      [ngTemplateOutlet]=\"actionButtons\"></ng-container>\n                      </span>\n                      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n                      <span class=\"@min-[450px]:hidden\" (click)=\"$event.stopPropagation()\">\n                        <mn-lib-dropdown [datasource]=\"{\n                          id: actionsDropdownId(column, row),\n                          actions: rowDropdownActions(column, row),\n                          menuLabel: $any(column.header),\n                          size: 'sm'\n                        }\"></mn-lib-dropdown>\n                      </span>\n                    } @else {\n                      <span class=\"inline-flex items-center gap-1\">\n                        <ng-container [ngTemplateOutletContext]=\"{ column: column, row: row }\"\n                                      [ngTemplateOutlet]=\"actionButtons\"></ng-container>\n                      </span>\n                    }\n                  </div>\n                  }\n                } @else if (column.cellSm) {\n                  <!-- Default cell: hidden below the cellSm breakpoint -->\n                  <span [mnShowAbove]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellValue(column, row) }}\n                    }\n                  </span>\n                  <!-- Small cell: shown only below the cellSm breakpoint -->\n                  <span [mnShowBelow]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cellSm.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cellSm.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellSmValue(column, row) }}\n                    }\n                  </span>\n                } @else {\n                  @if (isTemplateRef(column.cell)) {\n                    <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                  [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                  } @else {\n                    {{ getCellValue(column, row) }}\n                  }\n                }\n              </td>\n            }\n\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-table\"\n></mn-collection-pagination>\n</div>\n\n<!-- Single source of truth for every filter control, reused by the inline header\n     row and the small-screen panel. `idScope` keeps element ids unique across\n     both placements. -->\n<ng-template #filterField let-column let-idScope=\"idScope\">\n  @switch (filterTypeOf(column)) {\n    @case ('select') {\n      <mn-lib-select\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"textFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getFilterSelectOptions(column),\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-select>\n    }\n    @case ('multi-select') {\n      <mn-lib-multi-select\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"multiFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getFilterMultiSelectOptions(column),\n          placeholder: column.filterPlaceholder ?? '',\n          collapsePlaceholder: filterSelectedLabel,\n          collapseThreshold: 1,\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-multi-select>\n    }\n    @case ('boolean') {\n      <mn-lib-select\n        (ngModelChange)=\"onBooleanFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"booleanFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getBooleanFilterOptions(column),\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-select>\n    }\n    @default {\n      <mn-lib-input-field\n        (keydown.enter)=\"$event.preventDefault()\"\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"textFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          type: 'text',\n          label: '',\n          placeholder: column.filterPlaceholder ?? '',\n          ariaLabel: column.filterPlaceholder ?? '',\n          autocomplete: column.filterAutocomplete ?? undefined,\n          size: 'sm',\n          borderRadius: 'md',\n          fullWidth: true,\n          hover: true\n        }\"\n      ></mn-lib-input-field>\n    }\n  }\n</ng-template>\n\n<!-- Inline action buttons for an actions column, shared by the wide-table layout and\n     (implicitly) mirrored by the \u22EF menu below 450px. -->\n<ng-template #actionButtons let-column=\"column\" let-row=\"row\">\n  @for (action of visibleRowActions(column, row); track $index) {\n    <button\n      mnButton\n      type=\"button\"\n      [data]=\"{\n        size: 'sm',\n        variant: 'text',\n        color: rowActionColor(action, row),\n        disabled: isRowActionDisabled(action, row)\n      }\"\n      class=\"cursor-pointer\"\n      (click)=\"$event.stopPropagation(); runRowAction(action, row)\"\n      [attr.aria-label]=\"rowActionLabel(action, row)\"\n      [attr.title]=\"showActionLabel(column, action, row) ? null : rowActionLabel(action, row)\"\n    >\n      @if (showActionIcon(column, action, row)) {\n        <span class=\"inline-flex items-center shrink-0\">\n          @let icon = rowActionIcon(action, row);\n          @if (isTemplateRef(icon)) {\n            <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n          } @else {\n            <!-- Data icon: sized here to match the sm button's text, so a caller can\n                 declare the action in TypeScript without owning a template. -->\n            <svg [lucideIcon]=\"$any(icon)\" [size]=\"17\"></svg>\n          }\n        </span>\n      }\n      @if (showActionLabel(column, action, row)) {\n        <span>{{ rowActionLabel(action, row) }}</span>\n      }\n    </button>\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MnCheckbox, selector: "mn-lib-checkbox", inputs: ["props", "checked"], outputs: ["checkedChange"] }, { kind: "directive", type: MnHiddenBelowDirective, selector: "[mnHiddenBelow]", inputs: ["mnHiddenBelow"] }, { kind: "directive", type: MnShowAboveDirective, selector: "[mnShowAbove]", inputs: ["mnShowAbove"] }, { kind: "directive", type: MnShowBelowDirective, selector: "[mnShowBelow]", inputs: ["mnShowBelow"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnSelect, selector: "mn-lib-select", inputs: ["props"] }, { kind: "component", type: MnMultiSelect, selector: "mn-lib-multi-select", inputs: ["props"] }, { kind: "component", type: MnDropdown, selector: "mn-lib-dropdown", inputs: ["datasource"] }, { kind: "component", type: MnSkeleton, selector: "mn-skeleton", inputs: ["data"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MnCollectionPagination, selector: "mn-collection-pagination", inputs: ["idPrefix", "isPaginated", "isServerPaginated", "showLoadMore", "loadingMoreRows", "currentPage", "pageSize", "totalPages", "totalItemCount", "visiblePages", "pageSizeSelectOptions", "labels"], outputs: ["loadMore", "pageChange", "pageSizeChange"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnBottomSheet, selector: "mn-bottom-sheet", inputs: ["showBackdrop", "showGrabber", "dismissible", "minHeightPx", "maxHeightVh", "containerClass", "ariaLabel", "ariaLabelledby", "growWithKeyboard", "dismissGuard"], outputs: ["dismiss"] }, { kind: "component", type: LucideFilter, selector: "svg[lucideFunnel], svg[lucideFilter]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTable, isStandalone: true, selector: "mn-table", outputs: { sortChange: "sortChange", rowClick: "rowClick" }, host: { listeners: { "window:resize": "onWindowResize()" }, classAttribute: "block" }, viewQueries: [{ propertyName: "filtersSheet", first: true, predicate: ["filtersSheet"], descendants: true }, { propertyName: "collectionBody", first: true, predicate: ["collectionBody"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Everything that reflows lives inside a @container, so the breakpoints below\n     measure the table's own width rather than the window's. A table in a modal,\n     a sidebar or a narrow grid cell is far narrower than the viewport, and\n     viewport breakpoints would hand it a desktop layout it has no room for. -->\n<div class=\"@container\">\n  <!-- Selection summary: the whole selection, never paged, filtered or sorted. The\n       table below answers \"what could I pick?\", which is why it is searched and paged;\n       this answers \"what did I pick?\", which a paginated list cannot without hiding\n       most of the answer on some other page. -->\n  @if (showSelectionSummary) {\n    <div class=\"flex flex-col gap-2 rounded-md border border-base-300 bg-base-200/50 p-3 mb-3\">\n      <div class=\"flex items-center justify-between gap-2\">\n        <span class=\"text-sm font-medium text-base-content\">{{ selectionSummaryTitle }}</span>\n        <button\n          (click)=\"clearSelection()\"\n          [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n          class=\"gap-1 shrink-0\"\n          mnButton\n          type=\"button\"\n        >\n          <svg [size]=\"14\" lucideX></svg>\n          <span>{{ selectionClearAllLabel }}</span>\n        </button>\n      </div>\n      <!-- Only the first few tags render; the rest collapse behind a \"+N more\" control.\n           The heading's count always states the true total, so this hides tags, never\n           information. Expanded, the list is height-capped and scrolls, so even a\n           selection of hundreds cannot push the table off screen. -->\n      <ul\n        [class.max-h-28]=\"selectionSummaryExpanded\"\n        [class.overflow-y-auto]=\"selectionSummaryExpanded\"\n        class=\"flex flex-wrap gap-1.5 list-none m-0 p-0\"\n      >\n        @for (row of visibleSelectionRows; track dataSource.getID(row)) {\n          <li\n            class=\"inline-flex items-center gap-1 rounded-full bg-base-100 border border-base-300 pl-2.5 pr-1 py-0.5 text-xs text-base-content max-w-full\">\n            <span [attr.title]=\"selectionLabelFor(row)\" class=\"truncate\">{{ selectionLabelFor(row) }}</span>\n            <button\n              (click)=\"removeSelection(row)\"\n              [attr.aria-label]=\"selectionRemoveLabel(row)\"\n              class=\"shrink-0 rounded-full p-0.5 hover:bg-base-300 transition-colors cursor-pointer\"\n              type=\"button\"\n            >\n              <svg [size]=\"12\" lucideX></svg>\n            </button>\n          </li>\n        }\n        @if (hiddenSelectionCount > 0 || selectionSummaryExpanded) {\n          <li>\n            <button\n              (click)=\"toggleSelectionSummary()\"\n              [attr.aria-expanded]=\"selectionSummaryExpanded\"\n              [data]=\"{ variant: 'text', color: 'primary', size: 'sm', borderRadius: 'md', hover: true }\"\n              class=\"text-xs\"\n              mnButton\n              type=\"button\"\n            >\n              {{ selectionSummaryToggleLabel }}\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n  }\n\n  <!-- Toolbar: custom toolbar template + search. Only rendered when it has content,\n       so an unsearchable table without toolbar templates emits no empty spacer. -->\n@if (isSearchable || dataSource.toolbarLeftTemplate || dataSource.toolbarRightTemplate || (hasColumnFilters && filtersCollapsed)) {\n  <div class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center justify-between gap-2 mb-3\">\n    <div class=\"flex items-center gap-2 w-full @min-[420px]:w-auto\">\n    @if (dataSource.toolbarLeftTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n    <div\n      class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center gap-2 w-full @min-[420px]:flex-1 @min-[560px]:flex-none @min-[560px]:w-auto\">\n    @if (isSearchable) {\n      <!-- Enter must not submit a surrounding form: the search box belongs to the\n           table's chrome, not to whatever form the table happens to sit in. -->\n      <mn-lib-input-field\n        (keydown.enter)=\"$event.preventDefault()\"\n        class=\"w-full @min-[420px]:flex-1 @min-[560px]:max-w-64\"\n        [props]=\"{\n            id: 'mn-table-search',\n            type: 'search',\n            label: '',\n            ariaLabel: searchPlaceholderLabel,\n            placeholder: searchPlaceholderLabel,\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n        [ngModel]=\"searchValue\"\n        (ngModelChange)=\"onSearch($event)\"\n      ></mn-lib-input-field>\n    }\n    @if (dataSource.toolbarRightTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarRightTemplate\"></ng-container>\n      </div>\n    }\n    <!-- Small-screen filter toggle: replaces the inline per-column filter row below 640px -->\n    @if (hasColumnFilters && filtersCollapsed) {\n      <button\n        type=\"button\"\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'primary', size: 'md', borderRadius: 'md', hover: true }\"\n        class=\"w-full @min-[420px]:w-auto gap-1.5\"\n        [attr.aria-expanded]=\"filtersPanelOpen\"\n        aria-controls=\"mn-table-filters-panel\"\n        (click)=\"openFiltersPanel()\"\n      >\n        <svg lucideFunnel [size]=\"15\"></svg>\n        <span>{{ filtersButtonLabel }}</span>\n      </button>\n    }\n  </div>\n</div>\n}\n\n<!-- Small-screen filters: full-width fields decoupled from column widths, presented\n     as a bottom sheet so they overlay rather than push the table down. -->\n@if (hasColumnFilters && filtersCollapsed && filtersPanelOpen) {\n  <mn-bottom-sheet\n    #filtersSheet\n    (dismiss)=\"filtersPanelOpen = false\"\n    [ariaLabel]=\"filtersButtonLabel\"\n    [growWithKeyboard]=\"true\"\n    [maxHeightVh]=\"80\"\n  >\n    <div id=\"mn-table-filters-panel\" class=\"flex flex-col gap-3 px-4 pb-4\">\n      <span class=\"text-base font-semibold text-base-content\">{{ filtersButtonLabel }}</span>\n      @for (column of dataSource.columns; track column.key) {\n        @if (column.filterable) {\n          <div class=\"flex flex-col gap-1\">\n            <label\n              class=\"text-xs font-medium text-base-content/70\"\n              [attr.for]=\"'mn-table-filter-panel-' + column.key\"\n            >\n              @if (isTemplateRef(column.header)) {\n                <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n              } @else {\n                {{ column.header }}\n              }\n            </label>\n            <ng-container\n              [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'panel' }\"\n              [ngTemplateOutlet]=\"filterField\"\n            ></ng-container>\n          </div>\n        }\n      }\n      @if (hasActiveFilters) {\n        <button\n          type=\"button\"\n          mnButton\n          [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n          class=\"self-start gap-1\"\n          (click)=\"clearAllFilters()\"\n        >\n          <svg lucideX [size]=\"14\"></svg>\n          <span>{{ clearFiltersButtonLabel }}</span>\n        </button>\n      }\n      <div class=\"mt-1 flex min-[400px]:justify-end\">\n        <button\n          type=\"button\"\n          mnButton\n          [data]=\"{ variant: 'fill', color: 'primary', size: 'md', borderRadius: 'md', hover: true }\"\n          class=\"w-full min-[400px]:w-auto\"\n          (click)=\"closeFiltersPanel()\"\n        >\n          <span>{{ filtersCloseLabel }}</span>\n        </button>\n      </div>\n    </div>\n  </mn-bottom-sheet>\n}\n\n<!-- Table wrapper with horizontal scroll -->\n  <div #collectionBody [attr.aria-label]=\"tableRegionLabel\" [style.min-height.px]=\"bodyMinHeight\"\n     class=\"overflow-x-auto\"\n     role=\"region\">\n  <table [class]=\"tableClasses\">\n    <thead>\n      <tr class=\"bg-base-100\">\n        <!-- Selection checkbox column header -->\n        @if (hasSelection) {\n          <th class=\"w-10 text-center text-sm px-2 py-2\">\n            @if (isMultiSelect) {\n              <mn-lib-checkbox\n                (checkedChange)=\"toggleAll()\"\n                [checked]=\"allSelected\"\n                [props]=\"{ id: 'mn-table-select-all', size: 'sm' }\"\n              ></mn-lib-checkbox>\n            }\n          </th>\n        }\n\n        <!-- Data columns -->\n        @for (column of dataSource.columns; track column.key) {\n          <th\n            [attr.data-column-key]=\"column.key\"\n            [class.truncate]=\"widthsArePinned\"\n            [class.cursor-pointer]=\"isSortable(column)\"\n            [class.select-none]=\"isSortable(column)\"\n            [class.hover:bg-base-200]=\"isSortable(column)\"\n            [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n            [class.text-center]=\"column.align === 'center'\"\n            [class.text-right]=\"column.align === 'right'\"\n            [mnHiddenBelow]=\"column.hiddenBelow\"\n            [style.width]=\"columnWidth(column)\"\n            [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n            class=\"text-sm px-2 py-1 @min-[640px]:px-4 @min-[640px]:py-2 whitespace-nowrap\"\n            (click)=\"sort(column)\"\n          >\n            <!-- The header content is declared once; a sortable column wraps it in a real button so\n                 the sort is reachable by keyboard. The button's click stops there, so the th's own\n                 click (which keeps the cell padding clickable) does not sort a second time. -->\n            <ng-template #headerContent>\n              @if (isTemplateRef(column.header)) {\n                <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n              } @else {\n                <span>{{ column.header }}</span>\n              }\n              @if (isSortable(column)) {\n                <span class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\" aria-hidden=\"true\">{{ getSortIcon(column) }}</span>\n              }\n            </ng-template>\n            @if (isSortable(column)) {\n              <button type=\"button\" class=\"inline-flex items-center gap-1 cursor-pointer\" (click)=\"$event.stopPropagation(); sort(column)\">\n                <ng-container [ngTemplateOutlet]=\"headerContent\"></ng-container>\n              </button>\n            } @else {\n              <span class=\"inline-flex items-center gap-1\">\n                <ng-container [ngTemplateOutlet]=\"headerContent\"></ng-container>\n              </span>\n            }\n          </th>\n        }\n\n      </tr>\n\n      <!-- Per-column filter row (wide screens only; collapses into a panel below 640px).\n           `font-normal` on the cells is load-bearing: these are `th` elements, which the\n           browser renders bold, and the filter inputs and selects inside them inherit\n           that. Filter controls are form fields, not headings, and must not look bold.\n           The stacked filter panel renders outside any `th`, so it is unaffected. -->\n      @if (hasColumnFilters && !filtersCollapsed) {\n        <tr class=\"bg-base-100 border-b border-base-300 font-normal\">\n          @if (hasSelection) {\n            <th class=\"px-2 py-1 font-normal\"></th>\n          }\n          @for (column of dataSource.columns; track column.key) {\n            <th\n              class=\"px-4 py-2 font-normal\"\n              [mnHiddenBelow]=\"column.hiddenBelow\"\n            >\n              @if (column.filterable) {\n                <!-- Every filter renders as an ordinary control right under its\n                     header. The rich types used to hide behind a button that opened\n                     a floating panel, which cost a click to discover, a click to\n                     apply, and hid whether a column was even filterable. -->\n                <ng-container\n                  [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'inline' }\"\n                  [ngTemplateOutlet]=\"filterField\"\n                ></ng-container>\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n        @if (isLoadingState) {\n        @for (_ of skeletonRows; track $index) {\n          <tr>\n            @if (hasSelection) {\n              <td class=\"px-2 py-3\">\n                <mn-skeleton [data]=\"{ shape: 'rectangle', width: '1rem', height: '1rem' }\"></mn-skeleton>\n              </td>\n            }\n            @for (column of dataSource.columns; track column.key) {\n              <td class=\"px-4 py-3\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                  [style.width]=\"columnWidth(column)\"\n              >\n                @if (isTemplateRef(column.skeleton)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.skeleton)\"></ng-container>\n                } @else {\n                  <mn-skeleton [data]=\"getColumnSkeletonData(column)\"></mn-skeleton>\n                }\n              </td>\n            }\n          </tr>\n        }\n        } @else if (isErrorState) {\n          <!-- Error state -->\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.errorTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.errorTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-error\">\n                  <p class=\"text-sm\">{{ dataSource.errorMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n      } @else {\n        <!-- Empty state -->\n        @if (filteredItems.length === 0) {\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.emptyTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-base-content/50\">\n                  @if (dataSource.emptyIcon !== null) {\n                    <svg [lucideIcon]=\"dataSource.emptyIcon ?? defaultEmptyIcon\" [size]=\"32\" [strokeWidth]=\"1.5\"></svg>\n                  }\n                  <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n        }\n\n        <!-- Data rows -->\n        @for (row of paginatedItems; track trackByID($index, row); let odd = $odd; let last = $last) {\n          <tr\n            class=\"bg-base-100 transition-colors duration-150 hover:cursor-pointer\"\n            [ngClass]=\"{'bg-primary/10': isSelected(row)}\"\n            [class.bg-base-200]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n            [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n            [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n            [class.border-b]=\"!last\"\n            [class.border-base-300]=\"!last\"\n            [class.border-b-1]=\"last\"\n            [class.border-black]=\"last\"\n            [class.shadow-3xl]=\"last\"\n            (click)=\"onRowClick(row)\"\n          >\n            <!-- Selection checkbox -->\n            @if (hasSelection) {\n              <td (click)=\"$event.stopPropagation()\" class=\"w-10 text-center px-2 py-2\">\n                <mn-lib-checkbox\n                  (checkedChange)=\"toggle(row)\"\n                  [checked]=\"isSelected(row)\"\n                  [props]=\"{ id: 'mn-table-row-' + $index, size: 'sm' }\"\n                ></mn-lib-checkbox>\n              </td>\n            }\n\n            <!-- Data cells -->\n            @for (column of dataSource.columns; track column.key) {\n              <td\n                [attr.title]=\"cellTitle(column, row)\"\n                [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n                [class.text-center]=\"column.align === 'center'\"\n                [class.text-right]=\"column.align === 'right'\"\n                [class.truncate]=\"widthsArePinned\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                [style.width]=\"columnWidth(column)\"\n                class=\"text-xs px-2 py-1 @min-[640px]:px-4 @min-[640px]:py-2\"\n              >\n                @if (column.actions) {\n                  <!-- Actions column: inline command buttons that collapse into a \u22EF menu\n                       once the table is narrower than 450px (container query), for every\n                       row with actions. A row with no visible actions renders nothing.\n                       A row with a single icon-only action never collapses: one icon button\n                       is narrower than the \u22EF trigger it would hide behind, so folding it\n                       only costs a tap. -->\n                  @if (hasRowActions(column, row)) {\n                  <div class=\"inline-flex items-center gap-1\"\n                       [class.justify-end]=\"(column.align ?? 'left') === 'right'\">\n                    @if (collapsesRowActions(column, row)) {\n                      <span class=\"hidden items-center gap-1 @min-[450px]:inline-flex\">\n                        <ng-container [ngTemplateOutletContext]=\"{ column: column, row: row }\"\n                                      [ngTemplateOutlet]=\"actionButtons\"></ng-container>\n                      </span>\n                      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n                      <span class=\"@min-[450px]:hidden\" (click)=\"$event.stopPropagation()\">\n                        <mn-lib-dropdown [datasource]=\"{\n                          id: actionsDropdownId(column, row),\n                          actions: rowDropdownActions(column, row),\n                          menuLabel: $any(column.header),\n                          size: 'sm'\n                        }\"></mn-lib-dropdown>\n                      </span>\n                    } @else {\n                      <span class=\"inline-flex items-center gap-1\">\n                        <ng-container [ngTemplateOutletContext]=\"{ column: column, row: row }\"\n                                      [ngTemplateOutlet]=\"actionButtons\"></ng-container>\n                      </span>\n                    }\n                  </div>\n                  }\n                } @else if (column.cellSm) {\n                  <!-- Default cell: hidden below the cellSm breakpoint -->\n                  <span [mnShowAbove]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellValue(column, row) }}\n                    }\n                  </span>\n                  <!-- Small cell: shown only below the cellSm breakpoint -->\n                  <span [mnShowBelow]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cellSm.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cellSm.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellSmValue(column, row) }}\n                    }\n                  </span>\n                } @else {\n                  @if (isTemplateRef(column.cell)) {\n                    <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                  [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                  } @else {\n                    {{ getCellValue(column, row) }}\n                  }\n                }\n              </td>\n            }\n\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-table\"\n></mn-collection-pagination>\n</div>\n\n<!-- Single source of truth for every filter control, reused by the inline header\n     row and the small-screen panel. `idScope` keeps element ids unique across\n     both placements. -->\n<ng-template #filterField let-column let-idScope=\"idScope\">\n  @switch (filterTypeOf(column)) {\n    @case ('select') {\n      <mn-lib-select\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"textFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          ariaLabel: filterLabel(column),\n          options: getFilterSelectOptions(column),\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-select>\n    }\n    @case ('multi-select') {\n      <mn-lib-multi-select\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"multiFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          ariaLabel: filterLabel(column),\n          options: getFilterMultiSelectOptions(column),\n          placeholder: column.filterPlaceholder ?? '',\n          collapsePlaceholder: filterSelectedLabel,\n          collapseThreshold: 1,\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-multi-select>\n    }\n    @case ('boolean') {\n      <mn-lib-select\n        (ngModelChange)=\"onBooleanFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"booleanFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          ariaLabel: filterLabel(column),\n          options: getBooleanFilterOptions(column),\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-select>\n    }\n    @default {\n      <mn-lib-input-field\n        (keydown.enter)=\"$event.preventDefault()\"\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"textFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          type: 'text',\n          label: '',\n          placeholder: column.filterPlaceholder ?? '',\n          ariaLabel: column.filterPlaceholder ?? '',\n          autocomplete: column.filterAutocomplete ?? undefined,\n          size: 'sm',\n          borderRadius: 'md',\n          fullWidth: true,\n          hover: true\n        }\"\n      ></mn-lib-input-field>\n    }\n  }\n</ng-template>\n\n<!-- Inline action buttons for an actions column, shared by the wide-table layout and\n     (implicitly) mirrored by the \u22EF menu below 450px. -->\n<ng-template #actionButtons let-column=\"column\" let-row=\"row\">\n  @for (action of visibleRowActions(column, row); track $index) {\n    <button\n      mnButton\n      type=\"button\"\n      [data]=\"{\n        size: 'sm',\n        variant: 'text',\n        color: rowActionColor(action, row),\n        disabled: isRowActionDisabled(action, row)\n      }\"\n      class=\"cursor-pointer\"\n      (click)=\"$event.stopPropagation(); runRowAction(action, row)\"\n      [attr.aria-label]=\"rowActionLabel(action, row)\"\n      [attr.title]=\"showActionLabel(column, action, row) ? null : rowActionLabel(action, row)\"\n    >\n      @if (showActionIcon(column, action, row)) {\n        <span class=\"inline-flex items-center shrink-0\">\n          @let icon = rowActionIcon(action, row);\n          @if (isTemplateRef(icon)) {\n            <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n          } @else {\n            <!-- Data icon: sized here to match the sm button's text, so a caller can\n                 declare the action in TypeScript without owning a template. -->\n            <svg [lucideIcon]=\"$any(icon)\" [size]=\"17\"></svg>\n          }\n        </span>\n      }\n      @if (showActionLabel(column, action, row)) {\n        <span>{{ rowActionLabel(action, row) }}</span>\n      }\n    </button>\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MnCheckbox, selector: "mn-lib-checkbox", inputs: ["props", "checked"], outputs: ["checkedChange"] }, { kind: "directive", type: MnHiddenBelowDirective, selector: "[mnHiddenBelow]", inputs: ["mnHiddenBelow"] }, { kind: "directive", type: MnShowAboveDirective, selector: "[mnShowAbove]", inputs: ["mnShowAbove"] }, { kind: "directive", type: MnShowBelowDirective, selector: "[mnShowBelow]", inputs: ["mnShowBelow"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnSelect, selector: "mn-lib-select", inputs: ["props"] }, { kind: "component", type: MnMultiSelect, selector: "mn-lib-multi-select", inputs: ["props"] }, { kind: "component", type: MnDropdown, selector: "mn-lib-dropdown", inputs: ["datasource"] }, { kind: "component", type: MnSkeleton, selector: "mn-skeleton", inputs: ["data"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MnCollectionPagination, selector: "mn-collection-pagination", inputs: ["idPrefix", "isPaginated", "isServerPaginated", "showLoadMore", "loadingMoreRows", "currentPage", "pageSize", "totalPages", "totalItemCount", "visiblePages", "pageSizeSelectOptions", "labels"], outputs: ["loadMore", "pageChange", "pageSizeChange"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnBottomSheet, selector: "mn-bottom-sheet", inputs: ["showBackdrop", "showGrabber", "dismissible", "minHeightPx", "maxHeightVh", "containerClass", "ariaLabel", "ariaLabelledby", "growWithKeyboard", "dismissGuard"], outputs: ["dismiss"] }, { kind: "component", type: LucideFilter, selector: "svg[lucideFunnel], svg[lucideFilter]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTable, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-table', standalone: true, imports: [NgClass, NgTemplateOutlet, MnCheckbox, MnHiddenBelowDirective, MnShowAboveDirective, MnShowBelowDirective, MnInputField, MnSelect, MnMultiSelect, MnDropdown, MnSkeleton, FormsModule, MnCollectionPagination, MnButton, MnBottomSheet, LucideFilter, LucideX, LucideFunnel, LucideDynamicIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'block' }, template: "<!-- Everything that reflows lives inside a @container, so the breakpoints below\n     measure the table's own width rather than the window's. A table in a modal,\n     a sidebar or a narrow grid cell is far narrower than the viewport, and\n     viewport breakpoints would hand it a desktop layout it has no room for. -->\n<div class=\"@container\">\n  <!-- Selection summary: the whole selection, never paged, filtered or sorted. The\n       table below answers \"what could I pick?\", which is why it is searched and paged;\n       this answers \"what did I pick?\", which a paginated list cannot without hiding\n       most of the answer on some other page. -->\n  @if (showSelectionSummary) {\n    <div class=\"flex flex-col gap-2 rounded-md border border-base-300 bg-base-200/50 p-3 mb-3\">\n      <div class=\"flex items-center justify-between gap-2\">\n        <span class=\"text-sm font-medium text-base-content\">{{ selectionSummaryTitle }}</span>\n        <button\n          (click)=\"clearSelection()\"\n          [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n          class=\"gap-1 shrink-0\"\n          mnButton\n          type=\"button\"\n        >\n          <svg [size]=\"14\" lucideX></svg>\n          <span>{{ selectionClearAllLabel }}</span>\n        </button>\n      </div>\n      <!-- Only the first few tags render; the rest collapse behind a \"+N more\" control.\n           The heading's count always states the true total, so this hides tags, never\n           information. Expanded, the list is height-capped and scrolls, so even a\n           selection of hundreds cannot push the table off screen. -->\n      <ul\n        [class.max-h-28]=\"selectionSummaryExpanded\"\n        [class.overflow-y-auto]=\"selectionSummaryExpanded\"\n        class=\"flex flex-wrap gap-1.5 list-none m-0 p-0\"\n      >\n        @for (row of visibleSelectionRows; track dataSource.getID(row)) {\n          <li\n            class=\"inline-flex items-center gap-1 rounded-full bg-base-100 border border-base-300 pl-2.5 pr-1 py-0.5 text-xs text-base-content max-w-full\">\n            <span [attr.title]=\"selectionLabelFor(row)\" class=\"truncate\">{{ selectionLabelFor(row) }}</span>\n            <button\n              (click)=\"removeSelection(row)\"\n              [attr.aria-label]=\"selectionRemoveLabel(row)\"\n              class=\"shrink-0 rounded-full p-0.5 hover:bg-base-300 transition-colors cursor-pointer\"\n              type=\"button\"\n            >\n              <svg [size]=\"12\" lucideX></svg>\n            </button>\n          </li>\n        }\n        @if (hiddenSelectionCount > 0 || selectionSummaryExpanded) {\n          <li>\n            <button\n              (click)=\"toggleSelectionSummary()\"\n              [attr.aria-expanded]=\"selectionSummaryExpanded\"\n              [data]=\"{ variant: 'text', color: 'primary', size: 'sm', borderRadius: 'md', hover: true }\"\n              class=\"text-xs\"\n              mnButton\n              type=\"button\"\n            >\n              {{ selectionSummaryToggleLabel }}\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n  }\n\n  <!-- Toolbar: custom toolbar template + search. Only rendered when it has content,\n       so an unsearchable table without toolbar templates emits no empty spacer. -->\n@if (isSearchable || dataSource.toolbarLeftTemplate || dataSource.toolbarRightTemplate || (hasColumnFilters && filtersCollapsed)) {\n  <div class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center justify-between gap-2 mb-3\">\n    <div class=\"flex items-center gap-2 w-full @min-[420px]:w-auto\">\n    @if (dataSource.toolbarLeftTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n    <div\n      class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center gap-2 w-full @min-[420px]:flex-1 @min-[560px]:flex-none @min-[560px]:w-auto\">\n    @if (isSearchable) {\n      <!-- Enter must not submit a surrounding form: the search box belongs to the\n           table's chrome, not to whatever form the table happens to sit in. -->\n      <mn-lib-input-field\n        (keydown.enter)=\"$event.preventDefault()\"\n        class=\"w-full @min-[420px]:flex-1 @min-[560px]:max-w-64\"\n        [props]=\"{\n            id: 'mn-table-search',\n            type: 'search',\n            label: '',\n            ariaLabel: searchPlaceholderLabel,\n            placeholder: searchPlaceholderLabel,\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n        [ngModel]=\"searchValue\"\n        (ngModelChange)=\"onSearch($event)\"\n      ></mn-lib-input-field>\n    }\n    @if (dataSource.toolbarRightTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarRightTemplate\"></ng-container>\n      </div>\n    }\n    <!-- Small-screen filter toggle: replaces the inline per-column filter row below 640px -->\n    @if (hasColumnFilters && filtersCollapsed) {\n      <button\n        type=\"button\"\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'primary', size: 'md', borderRadius: 'md', hover: true }\"\n        class=\"w-full @min-[420px]:w-auto gap-1.5\"\n        [attr.aria-expanded]=\"filtersPanelOpen\"\n        aria-controls=\"mn-table-filters-panel\"\n        (click)=\"openFiltersPanel()\"\n      >\n        <svg lucideFunnel [size]=\"15\"></svg>\n        <span>{{ filtersButtonLabel }}</span>\n      </button>\n    }\n  </div>\n</div>\n}\n\n<!-- Small-screen filters: full-width fields decoupled from column widths, presented\n     as a bottom sheet so they overlay rather than push the table down. -->\n@if (hasColumnFilters && filtersCollapsed && filtersPanelOpen) {\n  <mn-bottom-sheet\n    #filtersSheet\n    (dismiss)=\"filtersPanelOpen = false\"\n    [ariaLabel]=\"filtersButtonLabel\"\n    [growWithKeyboard]=\"true\"\n    [maxHeightVh]=\"80\"\n  >\n    <div id=\"mn-table-filters-panel\" class=\"flex flex-col gap-3 px-4 pb-4\">\n      <span class=\"text-base font-semibold text-base-content\">{{ filtersButtonLabel }}</span>\n      @for (column of dataSource.columns; track column.key) {\n        @if (column.filterable) {\n          <div class=\"flex flex-col gap-1\">\n            <label\n              class=\"text-xs font-medium text-base-content/70\"\n              [attr.for]=\"'mn-table-filter-panel-' + column.key\"\n            >\n              @if (isTemplateRef(column.header)) {\n                <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n              } @else {\n                {{ column.header }}\n              }\n            </label>\n            <ng-container\n              [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'panel' }\"\n              [ngTemplateOutlet]=\"filterField\"\n            ></ng-container>\n          </div>\n        }\n      }\n      @if (hasActiveFilters) {\n        <button\n          type=\"button\"\n          mnButton\n          [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n          class=\"self-start gap-1\"\n          (click)=\"clearAllFilters()\"\n        >\n          <svg lucideX [size]=\"14\"></svg>\n          <span>{{ clearFiltersButtonLabel }}</span>\n        </button>\n      }\n      <div class=\"mt-1 flex min-[400px]:justify-end\">\n        <button\n          type=\"button\"\n          mnButton\n          [data]=\"{ variant: 'fill', color: 'primary', size: 'md', borderRadius: 'md', hover: true }\"\n          class=\"w-full min-[400px]:w-auto\"\n          (click)=\"closeFiltersPanel()\"\n        >\n          <span>{{ filtersCloseLabel }}</span>\n        </button>\n      </div>\n    </div>\n  </mn-bottom-sheet>\n}\n\n<!-- Table wrapper with horizontal scroll -->\n  <div #collectionBody [attr.aria-label]=\"tableRegionLabel\" [style.min-height.px]=\"bodyMinHeight\"\n     class=\"overflow-x-auto\"\n     role=\"region\">\n  <table [class]=\"tableClasses\">\n    <thead>\n      <tr class=\"bg-base-100\">\n        <!-- Selection checkbox column header -->\n        @if (hasSelection) {\n          <th class=\"w-10 text-center text-sm px-2 py-2\">\n            @if (isMultiSelect) {\n              <mn-lib-checkbox\n                (checkedChange)=\"toggleAll()\"\n                [checked]=\"allSelected\"\n                [props]=\"{ id: 'mn-table-select-all', size: 'sm' }\"\n              ></mn-lib-checkbox>\n            }\n          </th>\n        }\n\n        <!-- Data columns -->\n        @for (column of dataSource.columns; track column.key) {\n          <th\n            [attr.data-column-key]=\"column.key\"\n            [class.truncate]=\"widthsArePinned\"\n            [class.cursor-pointer]=\"isSortable(column)\"\n            [class.select-none]=\"isSortable(column)\"\n            [class.hover:bg-base-200]=\"isSortable(column)\"\n            [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n            [class.text-center]=\"column.align === 'center'\"\n            [class.text-right]=\"column.align === 'right'\"\n            [mnHiddenBelow]=\"column.hiddenBelow\"\n            [style.width]=\"columnWidth(column)\"\n            [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n            class=\"text-sm px-2 py-1 @min-[640px]:px-4 @min-[640px]:py-2 whitespace-nowrap\"\n            (click)=\"sort(column)\"\n          >\n            <span class=\"inline-flex items-center gap-1\">\n              @if (isTemplateRef(column.header)) {\n                <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n              } @else {\n                <span>{{ column.header }}</span>\n              }\n              @if (isSortable(column)) {\n                <span class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n              }\n            </span>\n          </th>\n        }\n\n      </tr>\n\n      <!-- Per-column filter row (wide screens only; collapses into a panel below 640px).\n           `font-normal` on the cells is load-bearing: these are `th` elements, which the\n           browser renders bold, and the filter inputs and selects inside them inherit\n           that. Filter controls are form fields, not headings, and must not look bold.\n           The stacked filter panel renders outside any `th`, so it is unaffected. -->\n      @if (hasColumnFilters && !filtersCollapsed) {\n        <tr class=\"bg-base-100 border-b border-base-300 font-normal\">\n          @if (hasSelection) {\n            <th class=\"px-2 py-1 font-normal\"></th>\n          }\n          @for (column of dataSource.columns; track column.key) {\n            <th\n              class=\"px-4 py-2 font-normal\"\n              [mnHiddenBelow]=\"column.hiddenBelow\"\n            >\n              @if (column.filterable) {\n                <!-- Every filter renders as an ordinary control right under its\n                     header. The rich types used to hide behind a button that opened\n                     a floating panel, which cost a click to discover, a click to\n                     apply, and hid whether a column was even filterable. -->\n                <ng-container\n                  [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'inline' }\"\n                  [ngTemplateOutlet]=\"filterField\"\n                ></ng-container>\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n        @if (isLoadingState) {\n        @for (_ of skeletonRows; track $index) {\n          <tr>\n            @if (hasSelection) {\n              <td class=\"px-2 py-3\">\n                <mn-skeleton [data]=\"{ shape: 'rectangle', width: '1rem', height: '1rem' }\"></mn-skeleton>\n              </td>\n            }\n            @for (column of dataSource.columns; track column.key) {\n              <td class=\"px-4 py-3\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                  [style.width]=\"columnWidth(column)\"\n              >\n                @if (isTemplateRef(column.skeleton)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.skeleton)\"></ng-container>\n                } @else {\n                  <mn-skeleton [data]=\"getColumnSkeletonData(column)\"></mn-skeleton>\n                }\n              </td>\n            }\n          </tr>\n        }\n        } @else if (isErrorState) {\n          <!-- Error state -->\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.errorTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.errorTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-error\">\n                  <p class=\"text-sm\">{{ dataSource.errorMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n      } @else {\n        <!-- Empty state -->\n        @if (filteredItems.length === 0) {\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.emptyTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-base-content/50\">\n                  @if (dataSource.emptyIcon !== null) {\n                    <svg [lucideIcon]=\"dataSource.emptyIcon ?? defaultEmptyIcon\" [size]=\"32\" [strokeWidth]=\"1.5\"></svg>\n                  }\n                  <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n        }\n\n        <!-- Data rows -->\n        @for (row of paginatedItems; track trackByID($index, row); let odd = $odd; let last = $last) {\n          <tr\n            class=\"bg-base-100 transition-colors duration-150 hover:cursor-pointer\"\n            [ngClass]=\"{'bg-primary/10': isSelected(row)}\"\n            [class.bg-base-200]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n            [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n            [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n            [class.border-b]=\"!last\"\n            [class.border-base-300]=\"!last\"\n            [class.border-b-1]=\"last\"\n            [class.border-black]=\"last\"\n            [class.shadow-3xl]=\"last\"\n            (click)=\"onRowClick(row)\"\n          >\n            <!-- Selection checkbox -->\n            @if (hasSelection) {\n              <td (click)=\"$event.stopPropagation()\" class=\"w-10 text-center px-2 py-2\">\n                <mn-lib-checkbox\n                  (checkedChange)=\"toggle(row)\"\n                  [checked]=\"isSelected(row)\"\n                  [props]=\"{ id: 'mn-table-row-' + $index, size: 'sm' }\"\n                ></mn-lib-checkbox>\n              </td>\n            }\n\n            <!-- Data cells -->\n            @for (column of dataSource.columns; track column.key) {\n              <td\n                [attr.title]=\"cellTitle(column, row)\"\n                [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n                [class.text-center]=\"column.align === 'center'\"\n                [class.text-right]=\"column.align === 'right'\"\n                [class.truncate]=\"widthsArePinned\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                [style.width]=\"columnWidth(column)\"\n                class=\"text-xs px-2 py-1 @min-[640px]:px-4 @min-[640px]:py-2\"\n              >\n                @if (column.actions) {\n                  <!-- Actions column: inline command buttons that collapse into a \u22EF menu\n                       once the table is narrower than 450px (container query), for every\n                       row with actions. A row with no visible actions renders nothing.\n                       A row with a single icon-only action never collapses: one icon button\n                       is narrower than the \u22EF trigger it would hide behind, so folding it\n                       only costs a tap. -->\n                  @if (hasRowActions(column, row)) {\n                  <div class=\"inline-flex items-center gap-1\"\n                       [class.justify-end]=\"(column.align ?? 'left') === 'right'\">\n                    @if (collapsesRowActions(column, row)) {\n                      <span class=\"hidden items-center gap-1 @min-[450px]:inline-flex\">\n                        <ng-container [ngTemplateOutletContext]=\"{ column: column, row: row }\"\n                                      [ngTemplateOutlet]=\"actionButtons\"></ng-container>\n                      </span>\n                      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n                      <span class=\"@min-[450px]:hidden\" (click)=\"$event.stopPropagation()\">\n                        <mn-lib-dropdown [datasource]=\"{\n                          id: actionsDropdownId(column, row),\n                          actions: rowDropdownActions(column, row),\n                          menuLabel: $any(column.header),\n                          size: 'sm'\n                        }\"></mn-lib-dropdown>\n                      </span>\n                    } @else {\n                      <span class=\"inline-flex items-center gap-1\">\n                        <ng-container [ngTemplateOutletContext]=\"{ column: column, row: row }\"\n                                      [ngTemplateOutlet]=\"actionButtons\"></ng-container>\n                      </span>\n                    }\n                  </div>\n                  }\n                } @else if (column.cellSm) {\n                  <!-- Default cell: hidden below the cellSm breakpoint -->\n                  <span [mnShowAbove]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellValue(column, row) }}\n                    }\n                  </span>\n                  <!-- Small cell: shown only below the cellSm breakpoint -->\n                  <span [mnShowBelow]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cellSm.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cellSm.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellSmValue(column, row) }}\n                    }\n                  </span>\n                } @else {\n                  @if (isTemplateRef(column.cell)) {\n                    <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                  [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                  } @else {\n                    {{ getCellValue(column, row) }}\n                  }\n                }\n              </td>\n            }\n\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-table\"\n></mn-collection-pagination>\n</div>\n\n<!-- Single source of truth for every filter control, reused by the inline header\n     row and the small-screen panel. `idScope` keeps element ids unique across\n     both placements. -->\n<ng-template #filterField let-column let-idScope=\"idScope\">\n  @switch (filterTypeOf(column)) {\n    @case ('select') {\n      <mn-lib-select\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"textFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getFilterSelectOptions(column),\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-select>\n    }\n    @case ('multi-select') {\n      <mn-lib-multi-select\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"multiFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getFilterMultiSelectOptions(column),\n          placeholder: column.filterPlaceholder ?? '',\n          collapsePlaceholder: filterSelectedLabel,\n          collapseThreshold: 1,\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-multi-select>\n    }\n    @case ('boolean') {\n      <mn-lib-select\n        (ngModelChange)=\"onBooleanFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"booleanFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          options: getBooleanFilterOptions(column),\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-select>\n    }\n    @default {\n      <mn-lib-input-field\n        (keydown.enter)=\"$event.preventDefault()\"\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"textFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          type: 'text',\n          label: '',\n          placeholder: column.filterPlaceholder ?? '',\n          ariaLabel: column.filterPlaceholder ?? '',\n          autocomplete: column.filterAutocomplete ?? undefined,\n          size: 'sm',\n          borderRadius: 'md',\n          fullWidth: true,\n          hover: true\n        }\"\n      ></mn-lib-input-field>\n    }\n  }\n</ng-template>\n\n<!-- Inline action buttons for an actions column, shared by the wide-table layout and\n     (implicitly) mirrored by the \u22EF menu below 450px. -->\n<ng-template #actionButtons let-column=\"column\" let-row=\"row\">\n  @for (action of visibleRowActions(column, row); track $index) {\n    <button\n      mnButton\n      type=\"button\"\n      [data]=\"{\n        size: 'sm',\n        variant: 'text',\n        color: rowActionColor(action, row),\n        disabled: isRowActionDisabled(action, row)\n      }\"\n      class=\"cursor-pointer\"\n      (click)=\"$event.stopPropagation(); runRowAction(action, row)\"\n      [attr.aria-label]=\"rowActionLabel(action, row)\"\n      [attr.title]=\"showActionLabel(column, action, row) ? null : rowActionLabel(action, row)\"\n    >\n      @if (showActionIcon(column, action, row)) {\n        <span class=\"inline-flex items-center shrink-0\">\n          @let icon = rowActionIcon(action, row);\n          @if (isTemplateRef(icon)) {\n            <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n          } @else {\n            <!-- Data icon: sized here to match the sm button's text, so a caller can\n                 declare the action in TypeScript without owning a template. -->\n            <svg [lucideIcon]=\"$any(icon)\" [size]=\"17\"></svg>\n          }\n        </span>\n      }\n      @if (showActionLabel(column, action, row)) {\n        <span>{{ rowActionLabel(action, row) }}</span>\n      }\n    </button>\n  }\n</ng-template>\n" }]
+            args: [{ selector: 'mn-table', standalone: true, imports: [NgClass, NgTemplateOutlet, MnCheckbox, MnHiddenBelowDirective, MnShowAboveDirective, MnShowBelowDirective, MnInputField, MnSelect, MnMultiSelect, MnDropdown, MnSkeleton, FormsModule, MnCollectionPagination, MnButton, MnBottomSheet, LucideFilter, LucideX, LucideFunnel, LucideDynamicIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'block' }, template: "<!-- Everything that reflows lives inside a @container, so the breakpoints below\n     measure the table's own width rather than the window's. A table in a modal,\n     a sidebar or a narrow grid cell is far narrower than the viewport, and\n     viewport breakpoints would hand it a desktop layout it has no room for. -->\n<div class=\"@container\">\n  <!-- Selection summary: the whole selection, never paged, filtered or sorted. The\n       table below answers \"what could I pick?\", which is why it is searched and paged;\n       this answers \"what did I pick?\", which a paginated list cannot without hiding\n       most of the answer on some other page. -->\n  @if (showSelectionSummary) {\n    <div class=\"flex flex-col gap-2 rounded-md border border-base-300 bg-base-200/50 p-3 mb-3\">\n      <div class=\"flex items-center justify-between gap-2\">\n        <span class=\"text-sm font-medium text-base-content\">{{ selectionSummaryTitle }}</span>\n        <button\n          (click)=\"clearSelection()\"\n          [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n          class=\"gap-1 shrink-0\"\n          mnButton\n          type=\"button\"\n        >\n          <svg [size]=\"14\" lucideX></svg>\n          <span>{{ selectionClearAllLabel }}</span>\n        </button>\n      </div>\n      <!-- Only the first few tags render; the rest collapse behind a \"+N more\" control.\n           The heading's count always states the true total, so this hides tags, never\n           information. Expanded, the list is height-capped and scrolls, so even a\n           selection of hundreds cannot push the table off screen. -->\n      <ul\n        [class.max-h-28]=\"selectionSummaryExpanded\"\n        [class.overflow-y-auto]=\"selectionSummaryExpanded\"\n        class=\"flex flex-wrap gap-1.5 list-none m-0 p-0\"\n      >\n        @for (row of visibleSelectionRows; track dataSource.getID(row)) {\n          <li\n            class=\"inline-flex items-center gap-1 rounded-full bg-base-100 border border-base-300 pl-2.5 pr-1 py-0.5 text-xs text-base-content max-w-full\">\n            <span [attr.title]=\"selectionLabelFor(row)\" class=\"truncate\">{{ selectionLabelFor(row) }}</span>\n            <button\n              (click)=\"removeSelection(row)\"\n              [attr.aria-label]=\"selectionRemoveLabel(row)\"\n              class=\"shrink-0 rounded-full p-0.5 hover:bg-base-300 transition-colors cursor-pointer\"\n              type=\"button\"\n            >\n              <svg [size]=\"12\" lucideX></svg>\n            </button>\n          </li>\n        }\n        @if (hiddenSelectionCount > 0 || selectionSummaryExpanded) {\n          <li>\n            <button\n              (click)=\"toggleSelectionSummary()\"\n              [attr.aria-expanded]=\"selectionSummaryExpanded\"\n              [data]=\"{ variant: 'text', color: 'primary', size: 'sm', borderRadius: 'md', hover: true }\"\n              class=\"text-xs\"\n              mnButton\n              type=\"button\"\n            >\n              {{ selectionSummaryToggleLabel }}\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n  }\n\n  <!-- Toolbar: custom toolbar template + search. Only rendered when it has content,\n       so an unsearchable table without toolbar templates emits no empty spacer. -->\n@if (isSearchable || dataSource.toolbarLeftTemplate || dataSource.toolbarRightTemplate || (hasColumnFilters && filtersCollapsed)) {\n  <div class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center justify-between gap-2 mb-3\">\n    <div class=\"flex items-center gap-2 w-full @min-[420px]:w-auto\">\n    @if (dataSource.toolbarLeftTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n    <div\n      class=\"flex flex-col @min-[420px]:flex-row @min-[420px]:items-center gap-2 w-full @min-[420px]:flex-1 @min-[560px]:flex-none @min-[560px]:w-auto\">\n    @if (isSearchable) {\n      <!-- Enter must not submit a surrounding form: the search box belongs to the\n           table's chrome, not to whatever form the table happens to sit in. -->\n      <mn-lib-input-field\n        (keydown.enter)=\"$event.preventDefault()\"\n        class=\"w-full @min-[420px]:flex-1 @min-[560px]:max-w-64\"\n        [props]=\"{\n            id: 'mn-table-search',\n            type: 'search',\n            label: '',\n            ariaLabel: searchPlaceholderLabel,\n            placeholder: searchPlaceholderLabel,\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n        [ngModel]=\"searchValue\"\n        (ngModelChange)=\"onSearch($event)\"\n      ></mn-lib-input-field>\n    }\n    @if (dataSource.toolbarRightTemplate) {\n      <div class=\"flex flex-col w-full @min-[420px]:w-auto @min-[420px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarRightTemplate\"></ng-container>\n      </div>\n    }\n    <!-- Small-screen filter toggle: replaces the inline per-column filter row below 640px -->\n    @if (hasColumnFilters && filtersCollapsed) {\n      <button\n        type=\"button\"\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'primary', size: 'md', borderRadius: 'md', hover: true }\"\n        class=\"w-full @min-[420px]:w-auto gap-1.5\"\n        [attr.aria-expanded]=\"filtersPanelOpen\"\n        aria-controls=\"mn-table-filters-panel\"\n        (click)=\"openFiltersPanel()\"\n      >\n        <svg lucideFunnel [size]=\"15\"></svg>\n        <span>{{ filtersButtonLabel }}</span>\n      </button>\n    }\n  </div>\n</div>\n}\n\n<!-- Small-screen filters: full-width fields decoupled from column widths, presented\n     as a bottom sheet so they overlay rather than push the table down. -->\n@if (hasColumnFilters && filtersCollapsed && filtersPanelOpen) {\n  <mn-bottom-sheet\n    #filtersSheet\n    (dismiss)=\"filtersPanelOpen = false\"\n    [ariaLabel]=\"filtersButtonLabel\"\n    [growWithKeyboard]=\"true\"\n    [maxHeightVh]=\"80\"\n  >\n    <div id=\"mn-table-filters-panel\" class=\"flex flex-col gap-3 px-4 pb-4\">\n      <span class=\"text-base font-semibold text-base-content\">{{ filtersButtonLabel }}</span>\n      @for (column of dataSource.columns; track column.key) {\n        @if (column.filterable) {\n          <div class=\"flex flex-col gap-1\">\n            <label\n              class=\"text-xs font-medium text-base-content/70\"\n              [attr.for]=\"'mn-table-filter-panel-' + column.key\"\n            >\n              @if (isTemplateRef(column.header)) {\n                <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n              } @else {\n                {{ column.header }}\n              }\n            </label>\n            <ng-container\n              [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'panel' }\"\n              [ngTemplateOutlet]=\"filterField\"\n            ></ng-container>\n          </div>\n        }\n      }\n      @if (hasActiveFilters) {\n        <button\n          type=\"button\"\n          mnButton\n          [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n          class=\"self-start gap-1\"\n          (click)=\"clearAllFilters()\"\n        >\n          <svg lucideX [size]=\"14\"></svg>\n          <span>{{ clearFiltersButtonLabel }}</span>\n        </button>\n      }\n      <div class=\"mt-1 flex min-[400px]:justify-end\">\n        <button\n          type=\"button\"\n          mnButton\n          [data]=\"{ variant: 'fill', color: 'primary', size: 'md', borderRadius: 'md', hover: true }\"\n          class=\"w-full min-[400px]:w-auto\"\n          (click)=\"closeFiltersPanel()\"\n        >\n          <span>{{ filtersCloseLabel }}</span>\n        </button>\n      </div>\n    </div>\n  </mn-bottom-sheet>\n}\n\n<!-- Table wrapper with horizontal scroll -->\n  <div #collectionBody [attr.aria-label]=\"tableRegionLabel\" [style.min-height.px]=\"bodyMinHeight\"\n     class=\"overflow-x-auto\"\n     role=\"region\">\n  <table [class]=\"tableClasses\">\n    <thead>\n      <tr class=\"bg-base-100\">\n        <!-- Selection checkbox column header -->\n        @if (hasSelection) {\n          <th class=\"w-10 text-center text-sm px-2 py-2\">\n            @if (isMultiSelect) {\n              <mn-lib-checkbox\n                (checkedChange)=\"toggleAll()\"\n                [checked]=\"allSelected\"\n                [props]=\"{ id: 'mn-table-select-all', size: 'sm' }\"\n              ></mn-lib-checkbox>\n            }\n          </th>\n        }\n\n        <!-- Data columns -->\n        @for (column of dataSource.columns; track column.key) {\n          <th\n            [attr.data-column-key]=\"column.key\"\n            [class.truncate]=\"widthsArePinned\"\n            [class.cursor-pointer]=\"isSortable(column)\"\n            [class.select-none]=\"isSortable(column)\"\n            [class.hover:bg-base-200]=\"isSortable(column)\"\n            [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n            [class.text-center]=\"column.align === 'center'\"\n            [class.text-right]=\"column.align === 'right'\"\n            [mnHiddenBelow]=\"column.hiddenBelow\"\n            [style.width]=\"columnWidth(column)\"\n            [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n            class=\"text-sm px-2 py-1 @min-[640px]:px-4 @min-[640px]:py-2 whitespace-nowrap\"\n            (click)=\"sort(column)\"\n          >\n            <!-- The header content is declared once; a sortable column wraps it in a real button so\n                 the sort is reachable by keyboard. The button's click stops there, so the th's own\n                 click (which keeps the cell padding clickable) does not sort a second time. -->\n            <ng-template #headerContent>\n              @if (isTemplateRef(column.header)) {\n                <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n              } @else {\n                <span>{{ column.header }}</span>\n              }\n              @if (isSortable(column)) {\n                <span class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\" aria-hidden=\"true\">{{ getSortIcon(column) }}</span>\n              }\n            </ng-template>\n            @if (isSortable(column)) {\n              <button type=\"button\" class=\"inline-flex items-center gap-1 cursor-pointer\" (click)=\"$event.stopPropagation(); sort(column)\">\n                <ng-container [ngTemplateOutlet]=\"headerContent\"></ng-container>\n              </button>\n            } @else {\n              <span class=\"inline-flex items-center gap-1\">\n                <ng-container [ngTemplateOutlet]=\"headerContent\"></ng-container>\n              </span>\n            }\n          </th>\n        }\n\n      </tr>\n\n      <!-- Per-column filter row (wide screens only; collapses into a panel below 640px).\n           `font-normal` on the cells is load-bearing: these are `th` elements, which the\n           browser renders bold, and the filter inputs and selects inside them inherit\n           that. Filter controls are form fields, not headings, and must not look bold.\n           The stacked filter panel renders outside any `th`, so it is unaffected. -->\n      @if (hasColumnFilters && !filtersCollapsed) {\n        <tr class=\"bg-base-100 border-b border-base-300 font-normal\">\n          @if (hasSelection) {\n            <th class=\"px-2 py-1 font-normal\"></th>\n          }\n          @for (column of dataSource.columns; track column.key) {\n            <th\n              class=\"px-4 py-2 font-normal\"\n              [mnHiddenBelow]=\"column.hiddenBelow\"\n            >\n              @if (column.filterable) {\n                <!-- Every filter renders as an ordinary control right under its\n                     header. The rich types used to hide behind a button that opened\n                     a floating panel, which cost a click to discover, a click to\n                     apply, and hid whether a column was even filterable. -->\n                <ng-container\n                  [ngTemplateOutletContext]=\"{ $implicit: column, idScope: 'inline' }\"\n                  [ngTemplateOutlet]=\"filterField\"\n                ></ng-container>\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n        @if (isLoadingState) {\n        @for (_ of skeletonRows; track $index) {\n          <tr>\n            @if (hasSelection) {\n              <td class=\"px-2 py-3\">\n                <mn-skeleton [data]=\"{ shape: 'rectangle', width: '1rem', height: '1rem' }\"></mn-skeleton>\n              </td>\n            }\n            @for (column of dataSource.columns; track column.key) {\n              <td class=\"px-4 py-3\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                  [style.width]=\"columnWidth(column)\"\n              >\n                @if (isTemplateRef(column.skeleton)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.skeleton)\"></ng-container>\n                } @else {\n                  <mn-skeleton [data]=\"getColumnSkeletonData(column)\"></mn-skeleton>\n                }\n              </td>\n            }\n          </tr>\n        }\n        } @else if (isErrorState) {\n          <!-- Error state -->\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.errorTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.errorTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-error\">\n                  <p class=\"text-sm\">{{ dataSource.errorMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n      } @else {\n        <!-- Empty state -->\n        @if (filteredItems.length === 0) {\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.emptyTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-base-content/50\">\n                  @if (dataSource.emptyIcon !== null) {\n                    <svg [lucideIcon]=\"dataSource.emptyIcon ?? defaultEmptyIcon\" [size]=\"32\" [strokeWidth]=\"1.5\"></svg>\n                  }\n                  <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n        }\n\n        <!-- Data rows -->\n        @for (row of paginatedItems; track trackByID($index, row); let odd = $odd; let last = $last) {\n          <tr\n            class=\"bg-base-100 transition-colors duration-150 hover:cursor-pointer\"\n            [ngClass]=\"{'bg-primary/10': isSelected(row)}\"\n            [class.bg-base-200]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n            [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n            [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n            [class.border-b]=\"!last\"\n            [class.border-base-300]=\"!last\"\n            [class.border-b-1]=\"last\"\n            [class.border-black]=\"last\"\n            [class.shadow-3xl]=\"last\"\n            (click)=\"onRowClick(row)\"\n          >\n            <!-- Selection checkbox -->\n            @if (hasSelection) {\n              <td (click)=\"$event.stopPropagation()\" class=\"w-10 text-center px-2 py-2\">\n                <mn-lib-checkbox\n                  (checkedChange)=\"toggle(row)\"\n                  [checked]=\"isSelected(row)\"\n                  [props]=\"{ id: 'mn-table-row-' + $index, size: 'sm' }\"\n                ></mn-lib-checkbox>\n              </td>\n            }\n\n            <!-- Data cells -->\n            @for (column of dataSource.columns; track column.key) {\n              <td\n                [attr.title]=\"cellTitle(column, row)\"\n                [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n                [class.text-center]=\"column.align === 'center'\"\n                [class.text-right]=\"column.align === 'right'\"\n                [class.truncate]=\"widthsArePinned\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                [style.width]=\"columnWidth(column)\"\n                class=\"text-xs px-2 py-1 @min-[640px]:px-4 @min-[640px]:py-2\"\n              >\n                @if (column.actions) {\n                  <!-- Actions column: inline command buttons that collapse into a \u22EF menu\n                       once the table is narrower than 450px (container query), for every\n                       row with actions. A row with no visible actions renders nothing.\n                       A row with a single icon-only action never collapses: one icon button\n                       is narrower than the \u22EF trigger it would hide behind, so folding it\n                       only costs a tap. -->\n                  @if (hasRowActions(column, row)) {\n                  <div class=\"inline-flex items-center gap-1\"\n                       [class.justify-end]=\"(column.align ?? 'left') === 'right'\">\n                    @if (collapsesRowActions(column, row)) {\n                      <span class=\"hidden items-center gap-1 @min-[450px]:inline-flex\">\n                        <ng-container [ngTemplateOutletContext]=\"{ column: column, row: row }\"\n                                      [ngTemplateOutlet]=\"actionButtons\"></ng-container>\n                      </span>\n                      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n                      <span class=\"@min-[450px]:hidden\" (click)=\"$event.stopPropagation()\">\n                        <mn-lib-dropdown [datasource]=\"{\n                          id: actionsDropdownId(column, row),\n                          actions: rowDropdownActions(column, row),\n                          menuLabel: $any(column.header),\n                          size: 'sm'\n                        }\"></mn-lib-dropdown>\n                      </span>\n                    } @else {\n                      <span class=\"inline-flex items-center gap-1\">\n                        <ng-container [ngTemplateOutletContext]=\"{ column: column, row: row }\"\n                                      [ngTemplateOutlet]=\"actionButtons\"></ng-container>\n                      </span>\n                    }\n                  </div>\n                  }\n                } @else if (column.cellSm) {\n                  <!-- Default cell: hidden below the cellSm breakpoint -->\n                  <span [mnShowAbove]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellValue(column, row) }}\n                    }\n                  </span>\n                  <!-- Small cell: shown only below the cellSm breakpoint -->\n                  <span [mnShowBelow]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cellSm.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cellSm.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellSmValue(column, row) }}\n                    }\n                  </span>\n                } @else {\n                  @if (isTemplateRef(column.cell)) {\n                    <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                  [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                  } @else {\n                    {{ getCellValue(column, row) }}\n                  }\n                }\n              </td>\n            }\n\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-table\"\n></mn-collection-pagination>\n</div>\n\n<!-- Single source of truth for every filter control, reused by the inline header\n     row and the small-screen panel. `idScope` keeps element ids unique across\n     both placements. -->\n<ng-template #filterField let-column let-idScope=\"idScope\">\n  @switch (filterTypeOf(column)) {\n    @case ('select') {\n      <mn-lib-select\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"textFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          ariaLabel: filterLabel(column),\n          options: getFilterSelectOptions(column),\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-select>\n    }\n    @case ('multi-select') {\n      <mn-lib-multi-select\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"multiFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          ariaLabel: filterLabel(column),\n          options: getFilterMultiSelectOptions(column),\n          placeholder: column.filterPlaceholder ?? '',\n          collapsePlaceholder: filterSelectedLabel,\n          collapseThreshold: 1,\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-multi-select>\n    }\n    @case ('boolean') {\n      <mn-lib-select\n        (ngModelChange)=\"onBooleanFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"booleanFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          ariaLabel: filterLabel(column),\n          options: getBooleanFilterOptions(column),\n          size: 'sm',\n          fullWidth: true\n        }\"\n      ></mn-lib-select>\n    }\n    @default {\n      <mn-lib-input-field\n        (keydown.enter)=\"$event.preventDefault()\"\n        (ngModelChange)=\"onColumnFilter(column, $event)\"\n        [disabled]=\"column.filterDisabled ?? false\"\n        [ngModel]=\"textFilterValue(column)\"\n        [props]=\"{\n          id: 'mn-table-filter-' + idScope + '-' + column.key,\n          type: 'text',\n          label: '',\n          placeholder: column.filterPlaceholder ?? '',\n          ariaLabel: column.filterPlaceholder ?? '',\n          autocomplete: column.filterAutocomplete ?? undefined,\n          size: 'sm',\n          borderRadius: 'md',\n          fullWidth: true,\n          hover: true\n        }\"\n      ></mn-lib-input-field>\n    }\n  }\n</ng-template>\n\n<!-- Inline action buttons for an actions column, shared by the wide-table layout and\n     (implicitly) mirrored by the \u22EF menu below 450px. -->\n<ng-template #actionButtons let-column=\"column\" let-row=\"row\">\n  @for (action of visibleRowActions(column, row); track $index) {\n    <button\n      mnButton\n      type=\"button\"\n      [data]=\"{\n        size: 'sm',\n        variant: 'text',\n        color: rowActionColor(action, row),\n        disabled: isRowActionDisabled(action, row)\n      }\"\n      class=\"cursor-pointer\"\n      (click)=\"$event.stopPropagation(); runRowAction(action, row)\"\n      [attr.aria-label]=\"rowActionLabel(action, row)\"\n      [attr.title]=\"showActionLabel(column, action, row) ? null : rowActionLabel(action, row)\"\n    >\n      @if (showActionIcon(column, action, row)) {\n        <span class=\"inline-flex items-center shrink-0\">\n          @let icon = rowActionIcon(action, row);\n          @if (isTemplateRef(icon)) {\n            <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n          } @else {\n            <!-- Data icon: sized here to match the sm button's text, so a caller can\n                 declare the action in TypeScript without owning a template. -->\n            <svg [lucideIcon]=\"$any(icon)\" [size]=\"17\"></svg>\n          }\n        </span>\n      }\n      @if (showActionLabel(column, action, row)) {\n        <span>{{ rowActionLabel(action, row) }}</span>\n      }\n    </button>\n  }\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { sortChange: [{
                 type: Output
             }], rowClick: [{
@@ -11231,7 +11266,7 @@ class MnModalShellComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnModalShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnModalShellComponent, isStandalone: true, selector: "mn-modal-shell", inputs: { config: "config", modalRef: "modalRef" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" }, properties: { "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "wizardBody", first: true, predicate: MnWizardBodyComponent, descendants: true, isSignal: true }, { propertyName: "bottomSheet", first: true, predicate: MnBottomSheet, descendants: true, isSignal: true }], ngImport: i0, template: "@if (showBackdrop) {\n  <!-- The backdrop is a visual overlay \u2014 keyboard dismiss is handled at component level via Escape key -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n@if (showMobileSheet) {\n  <!-- Mobile: the shared bottom sheet owns the anchoring, grabber, swipe/flick-to-dismiss\n       and slide animation. The shell keeps its own backdrop (so the sheet renders none),\n       and its close animation delegates to the sheet's startClosing(). `modal-container`\n       is kept as a class hook so the host app's keyboard-lift CSS still matches. -->\n  <mn-bottom-sheet\n    (dismiss)=\"onSheetDismiss()\"\n    [ariaLabelledby]=\"config.title ? 'mn-modal-title' : undefined\"\n    [containerClass]=\"'modal-container'\"\n    [dismissGuard]=\"sheetDismissGuard\"\n    [dismissible]=\"canClose\"\n    [growWithKeyboard]=\"true\"\n    [maxHeightVh]=\"92\"\n    [showBackdrop]=\"false\"\n  >\n    <ng-container [ngTemplateOutlet]=\"modalBody\"></ng-container>\n  </mn-bottom-sheet>\n} @else {\n  <!--\n    Desktop centered dialog. The container deliberately does NOT stop click propagation.\n    The backdrop is a *sibling* element (absolutely positioned behind this one), never an\n    ancestor, so clicks in here can't reach `onBackdropClick()` anyway. Swallowing them\n    instead broke every \"click outside me\" handler inside a modal.\n  -->\n  <div\n    [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n    [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n    [ngClass]=\"containerSizeClass\"\n    [style.height]=\"containerHeightStyle\"\n    aria-modal=\"true\"\n    class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n  >\n    <ng-container [ngTemplateOutlet]=\"modalBody\"></ng-container>\n  </div>\n}\n\n<ng-template #modalBody>\n  <div [class.border-b]=\"config.kind !== ModalKind.WIZARD\"\n       [class.border-base-300]=\"config.kind !== ModalKind.WIZARD\"\n       class=\"flex items-center justify-between p-6\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <!-- On small screens the wizard's step labels (under the progress circles) are hidden,\n             so surface the active step name here as \"Title - Step\" instead. -->\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\"\n            id=\"mn-modal-title\">{{ config.title }}@if (config.kind === ModalKind.WIZARD && wizardStepTitle()) {\n          <span class=\"sm:hidden font-normal text-base-content/60\"> - {{ wizardStepTitle() }}</span>\n        }</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <div [class]=\"showMobileSheet ? 'hidden sm:flex' : ''\">\n        <button\n          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'gray', hover: true, borderRadius: 'md' }\"\n          type=\"button\"\n          class=\"w-8 h-8\"\n          (click)=\"onCloseButtonClick()\"\n          [attr.aria-label]=\"closeModalLabel\"\n        >\n          <svg lucideX [size]=\"18\"></svg>\n        </button>\n      </div>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  @if (config.kind === ModalKind.WIZARD) {\n    <!-- Wizard manages its own internal scrolling so the steps header and footer\n         stay fixed while only the step body scrolls. No padding/scroll here. -->\n    <div class=\"flex-auto min-h-0 overflow-hidden flex flex-col\">\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"$any(modalRef)\"\n        class=\"flex-auto min-h-0 flex flex-col\"\n      ></mn-wizard-body>\n    </div>\n  } @else {\n    <div class=\"flex-1 overflow-y-auto px-6 pt-6\">\n      @if (config.kind === ModalKind.FORM) {\n        <mn-form-body\n          [config]=\"asForm(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block h-full\"\n        ></mn-form-body>\n      }\n\n      @if (config.kind === ModalKind.CONFIRMATION) {\n        <mn-confirmation-body\n          [config]=\"asConfirmation(config)\"\n          [modalRef]=\"$any(modalRef)\"\n        ></mn-confirmation-body>\n      }\n\n      @if (config.kind === ModalKind.CUSTOM) {\n        <mn-custom-body-host\n          [config]=\"asCustom(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block pb-6\"\n        ></mn-custom-body-host>\n      }\n    </div>\n  }\n\n  <!-- Custom Footer Actions (not for wizard modals, they render their own) -->\n  @if (hasCustomFooterActions && config.kind !== ModalKind.WIZARD) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      <mn-footer-actions\n        [actions]=\"config.footerActions || []\"\n        [showIcons]=\"config.showActionIcons !== false\"\n        (actionClick)=\"onFooterAction($event)\"\n      ></mn-footer-actions>\n    </div>\n  }\n</ng-template>\n", styles: [":host{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(.mobile-sheet){align-items:flex-end}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}@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)}}: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(prefers-reduced-motion:reduce){:host,:host .modal-backdrop,:host .modal-container{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MnWizardBodyComponent, selector: "mn-wizard-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnConfirmationBodyComponent, selector: "mn-confirmation-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFooterActionsComponent, selector: "mn-footer-actions", inputs: ["actions", "showIcons"], outputs: ["actionClick"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnBottomSheet, selector: "mn-bottom-sheet", inputs: ["showBackdrop", "showGrabber", "dismissible", "minHeightPx", "maxHeightVh", "containerClass", "ariaLabel", "ariaLabelledby", "growWithKeyboard", "dismissGuard"], outputs: ["dismiss"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnModalShellComponent, isStandalone: true, selector: "mn-modal-shell", inputs: { config: "config", modalRef: "modalRef" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" }, properties: { "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "wizardBody", first: true, predicate: MnWizardBodyComponent, descendants: true, isSignal: true }, { propertyName: "bottomSheet", first: true, predicate: MnBottomSheet, descendants: true, isSignal: true }], ngImport: i0, template: "@if (showBackdrop) {\n  <!-- The backdrop is a visual overlay \u2014 keyboard dismiss is handled at component level via Escape key -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n@if (showMobileSheet) {\n  <!-- Mobile: the shared bottom sheet owns the anchoring, grabber, swipe/flick-to-dismiss\n       and slide animation. The shell keeps its own backdrop (so the sheet renders none),\n       and its close animation delegates to the sheet's startClosing(). `modal-container`\n       is kept as a class hook so the host app's keyboard-lift CSS still matches. -->\n  <mn-bottom-sheet\n    (dismiss)=\"onSheetDismiss()\"\n    [ariaLabelledby]=\"config.title ? 'mn-modal-title' : undefined\"\n    [containerClass]=\"'modal-container'\"\n    [dismissGuard]=\"sheetDismissGuard\"\n    [dismissible]=\"canClose\"\n    [growWithKeyboard]=\"true\"\n    [maxHeightVh]=\"92\"\n    [showBackdrop]=\"false\"\n  >\n    <ng-container [ngTemplateOutlet]=\"modalBody\"></ng-container>\n  </mn-bottom-sheet>\n} @else {\n  <!--\n    Desktop centered dialog. The container deliberately does NOT stop click propagation.\n    The backdrop is a *sibling* element (absolutely positioned behind this one), never an\n    ancestor, so clicks in here can't reach `onBackdropClick()` anyway. Swallowing them\n    instead broke every \"click outside me\" handler inside a modal.\n  -->\n  <div\n    [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n    [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n    [ngClass]=\"containerSizeClass\"\n    [style.height]=\"containerHeightStyle\"\n    aria-modal=\"true\"\n    class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] max-w-[calc(100vw-2rem)] overflow-hidden flex flex-col\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n  >\n    <ng-container [ngTemplateOutlet]=\"modalBody\"></ng-container>\n  </div>\n}\n\n<ng-template #modalBody>\n  <div [class.border-b]=\"config.kind !== ModalKind.WIZARD\"\n       [class.border-base-300]=\"config.kind !== ModalKind.WIZARD\"\n       class=\"flex items-center justify-between p-6\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <!-- On small screens the wizard's step labels (under the progress circles) are hidden,\n             so surface the active step name here as \"Title - Step\" instead. -->\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\"\n            id=\"mn-modal-title\">{{ config.title }}@if (config.kind === ModalKind.WIZARD && wizardStepTitle()) {\n          <span class=\"sm:hidden font-normal text-base-content/60\"> - {{ wizardStepTitle() }}</span>\n        }</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <div [class]=\"showMobileSheet ? 'hidden sm:flex' : ''\">\n        <button\n          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'gray', hover: true, borderRadius: 'md' }\"\n          type=\"button\"\n          class=\"w-8 h-8\"\n          (click)=\"onCloseButtonClick()\"\n          [attr.aria-label]=\"closeModalLabel\"\n        >\n          <svg lucideX [size]=\"18\"></svg>\n        </button>\n      </div>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  @if (config.kind === ModalKind.WIZARD) {\n    <!-- Wizard manages its own internal scrolling so the steps header and footer\n         stay fixed while only the step body scrolls. No padding/scroll here. -->\n    <div class=\"flex-auto min-h-0 overflow-hidden flex flex-col\">\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"$any(modalRef)\"\n        class=\"flex-auto min-h-0 flex flex-col\"\n      ></mn-wizard-body>\n    </div>\n  } @else {\n    <div class=\"flex-1 overflow-y-auto px-6 pt-6\">\n      @if (config.kind === ModalKind.FORM) {\n        <mn-form-body\n          [config]=\"asForm(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block h-full\"\n        ></mn-form-body>\n      }\n\n      @if (config.kind === ModalKind.CONFIRMATION) {\n        <mn-confirmation-body\n          [config]=\"asConfirmation(config)\"\n          [modalRef]=\"$any(modalRef)\"\n        ></mn-confirmation-body>\n      }\n\n      @if (config.kind === ModalKind.CUSTOM) {\n        <mn-custom-body-host\n          [config]=\"asCustom(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block pb-6\"\n        ></mn-custom-body-host>\n      }\n    </div>\n  }\n\n  <!-- Custom Footer Actions (not for wizard modals, they render their own) -->\n  @if (hasCustomFooterActions && config.kind !== ModalKind.WIZARD) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      <mn-footer-actions\n        [actions]=\"config.footerActions || []\"\n        [showIcons]=\"config.showActionIcons !== false\"\n        (actionClick)=\"onFooterAction($event)\"\n      ></mn-footer-actions>\n    </div>\n  }\n</ng-template>\n", styles: [":host{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(.mobile-sheet){align-items:flex-end}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}@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)}}: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(prefers-reduced-motion:reduce){:host,:host .modal-backdrop,:host .modal-container{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MnWizardBodyComponent, selector: "mn-wizard-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnConfirmationBodyComponent, selector: "mn-confirmation-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFooterActionsComponent, selector: "mn-footer-actions", inputs: ["actions", "showIcons"], outputs: ["actionClick"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnBottomSheet, selector: "mn-bottom-sheet", inputs: ["showBackdrop", "showGrabber", "dismissible", "minHeightPx", "maxHeightVh", "containerClass", "ariaLabel", "ariaLabelledby", "growWithKeyboard", "dismissGuard"], outputs: ["dismiss"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnModalShellComponent, decorators: [{
             type: Component,
@@ -11245,7 +11280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         MnButton,
                         MnBottomSheet,
                         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@if (showMobileSheet) {\n  <!-- Mobile: the shared bottom sheet owns the anchoring, grabber, swipe/flick-to-dismiss\n       and slide animation. The shell keeps its own backdrop (so the sheet renders none),\n       and its close animation delegates to the sheet's startClosing(). `modal-container`\n       is kept as a class hook so the host app's keyboard-lift CSS still matches. -->\n  <mn-bottom-sheet\n    (dismiss)=\"onSheetDismiss()\"\n    [ariaLabelledby]=\"config.title ? 'mn-modal-title' : undefined\"\n    [containerClass]=\"'modal-container'\"\n    [dismissGuard]=\"sheetDismissGuard\"\n    [dismissible]=\"canClose\"\n    [growWithKeyboard]=\"true\"\n    [maxHeightVh]=\"92\"\n    [showBackdrop]=\"false\"\n  >\n    <ng-container [ngTemplateOutlet]=\"modalBody\"></ng-container>\n  </mn-bottom-sheet>\n} @else {\n  <!--\n    Desktop centered dialog. The container deliberately does NOT stop click propagation.\n    The backdrop is a *sibling* element (absolutely positioned behind this one), never an\n    ancestor, so clicks in here can't reach `onBackdropClick()` anyway. Swallowing them\n    instead broke every \"click outside me\" handler inside a modal.\n  -->\n  <div\n    [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n    [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n    [ngClass]=\"containerSizeClass\"\n    [style.height]=\"containerHeightStyle\"\n    aria-modal=\"true\"\n    class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n  >\n    <ng-container [ngTemplateOutlet]=\"modalBody\"></ng-container>\n  </div>\n}\n\n<ng-template #modalBody>\n  <div [class.border-b]=\"config.kind !== ModalKind.WIZARD\"\n       [class.border-base-300]=\"config.kind !== ModalKind.WIZARD\"\n       class=\"flex items-center justify-between p-6\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <!-- On small screens the wizard's step labels (under the progress circles) are hidden,\n             so surface the active step name here as \"Title - Step\" instead. -->\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\"\n            id=\"mn-modal-title\">{{ config.title }}@if (config.kind === ModalKind.WIZARD && wizardStepTitle()) {\n          <span class=\"sm:hidden font-normal text-base-content/60\"> - {{ wizardStepTitle() }}</span>\n        }</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <div [class]=\"showMobileSheet ? 'hidden sm:flex' : ''\">\n        <button\n          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'gray', hover: true, borderRadius: 'md' }\"\n          type=\"button\"\n          class=\"w-8 h-8\"\n          (click)=\"onCloseButtonClick()\"\n          [attr.aria-label]=\"closeModalLabel\"\n        >\n          <svg lucideX [size]=\"18\"></svg>\n        </button>\n      </div>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  @if (config.kind === ModalKind.WIZARD) {\n    <!-- Wizard manages its own internal scrolling so the steps header and footer\n         stay fixed while only the step body scrolls. No padding/scroll here. -->\n    <div class=\"flex-auto min-h-0 overflow-hidden flex flex-col\">\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"$any(modalRef)\"\n        class=\"flex-auto min-h-0 flex flex-col\"\n      ></mn-wizard-body>\n    </div>\n  } @else {\n    <div class=\"flex-1 overflow-y-auto px-6 pt-6\">\n      @if (config.kind === ModalKind.FORM) {\n        <mn-form-body\n          [config]=\"asForm(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block h-full\"\n        ></mn-form-body>\n      }\n\n      @if (config.kind === ModalKind.CONFIRMATION) {\n        <mn-confirmation-body\n          [config]=\"asConfirmation(config)\"\n          [modalRef]=\"$any(modalRef)\"\n        ></mn-confirmation-body>\n      }\n\n      @if (config.kind === ModalKind.CUSTOM) {\n        <mn-custom-body-host\n          [config]=\"asCustom(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block pb-6\"\n        ></mn-custom-body-host>\n      }\n    </div>\n  }\n\n  <!-- Custom Footer Actions (not for wizard modals, they render their own) -->\n  @if (hasCustomFooterActions && config.kind !== ModalKind.WIZARD) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      <mn-footer-actions\n        [actions]=\"config.footerActions || []\"\n        [showIcons]=\"config.showActionIcons !== false\"\n        (actionClick)=\"onFooterAction($event)\"\n      ></mn-footer-actions>\n    </div>\n  }\n</ng-template>\n", styles: [":host{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(.mobile-sheet){align-items:flex-end}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}@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)}}: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(prefers-reduced-motion:reduce){:host,:host .modal-backdrop,:host .modal-container{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}\n"] }]
+                    ], template: "@if (showBackdrop) {\n  <!-- The backdrop is a visual overlay \u2014 keyboard dismiss is handled at component level via Escape key -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n@if (showMobileSheet) {\n  <!-- Mobile: the shared bottom sheet owns the anchoring, grabber, swipe/flick-to-dismiss\n       and slide animation. The shell keeps its own backdrop (so the sheet renders none),\n       and its close animation delegates to the sheet's startClosing(). `modal-container`\n       is kept as a class hook so the host app's keyboard-lift CSS still matches. -->\n  <mn-bottom-sheet\n    (dismiss)=\"onSheetDismiss()\"\n    [ariaLabelledby]=\"config.title ? 'mn-modal-title' : undefined\"\n    [containerClass]=\"'modal-container'\"\n    [dismissGuard]=\"sheetDismissGuard\"\n    [dismissible]=\"canClose\"\n    [growWithKeyboard]=\"true\"\n    [maxHeightVh]=\"92\"\n    [showBackdrop]=\"false\"\n  >\n    <ng-container [ngTemplateOutlet]=\"modalBody\"></ng-container>\n  </mn-bottom-sheet>\n} @else {\n  <!--\n    Desktop centered dialog. The container deliberately does NOT stop click propagation.\n    The backdrop is a *sibling* element (absolutely positioned behind this one), never an\n    ancestor, so clicks in here can't reach `onBackdropClick()` anyway. Swallowing them\n    instead broke every \"click outside me\" handler inside a modal.\n  -->\n  <div\n    [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n    [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n    [ngClass]=\"containerSizeClass\"\n    [style.height]=\"containerHeightStyle\"\n    aria-modal=\"true\"\n    class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] max-w-[calc(100vw-2rem)] overflow-hidden flex flex-col\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n  >\n    <ng-container [ngTemplateOutlet]=\"modalBody\"></ng-container>\n  </div>\n}\n\n<ng-template #modalBody>\n  <div [class.border-b]=\"config.kind !== ModalKind.WIZARD\"\n       [class.border-base-300]=\"config.kind !== ModalKind.WIZARD\"\n       class=\"flex items-center justify-between p-6\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <!-- On small screens the wizard's step labels (under the progress circles) are hidden,\n             so surface the active step name here as \"Title - Step\" instead. -->\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\"\n            id=\"mn-modal-title\">{{ config.title }}@if (config.kind === ModalKind.WIZARD && wizardStepTitle()) {\n          <span class=\"sm:hidden font-normal text-base-content/60\"> - {{ wizardStepTitle() }}</span>\n        }</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <div [class]=\"showMobileSheet ? 'hidden sm:flex' : ''\">\n        <button\n          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'gray', hover: true, borderRadius: 'md' }\"\n          type=\"button\"\n          class=\"w-8 h-8\"\n          (click)=\"onCloseButtonClick()\"\n          [attr.aria-label]=\"closeModalLabel\"\n        >\n          <svg lucideX [size]=\"18\"></svg>\n        </button>\n      </div>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  @if (config.kind === ModalKind.WIZARD) {\n    <!-- Wizard manages its own internal scrolling so the steps header and footer\n         stay fixed while only the step body scrolls. No padding/scroll here. -->\n    <div class=\"flex-auto min-h-0 overflow-hidden flex flex-col\">\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"$any(modalRef)\"\n        class=\"flex-auto min-h-0 flex flex-col\"\n      ></mn-wizard-body>\n    </div>\n  } @else {\n    <div class=\"flex-1 overflow-y-auto px-6 pt-6\">\n      @if (config.kind === ModalKind.FORM) {\n        <mn-form-body\n          [config]=\"asForm(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block h-full\"\n        ></mn-form-body>\n      }\n\n      @if (config.kind === ModalKind.CONFIRMATION) {\n        <mn-confirmation-body\n          [config]=\"asConfirmation(config)\"\n          [modalRef]=\"$any(modalRef)\"\n        ></mn-confirmation-body>\n      }\n\n      @if (config.kind === ModalKind.CUSTOM) {\n        <mn-custom-body-host\n          [config]=\"asCustom(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block pb-6\"\n        ></mn-custom-body-host>\n      }\n    </div>\n  }\n\n  <!-- Custom Footer Actions (not for wizard modals, they render their own) -->\n  @if (hasCustomFooterActions && config.kind !== ModalKind.WIZARD) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      <mn-footer-actions\n        [actions]=\"config.footerActions || []\"\n        [showIcons]=\"config.showActionIcons !== false\"\n        (actionClick)=\"onFooterAction($event)\"\n      ></mn-footer-actions>\n    </div>\n  }\n</ng-template>\n", styles: [":host{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(.mobile-sheet){align-items:flex-end}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}@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)}}: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(prefers-reduced-motion:reduce){:host,:host .modal-backdrop,:host .modal-container{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], modalRef: [{
@@ -13121,6 +13156,26 @@ class MnTabComponent {
         // Place the indicator on the default tab without a slide-in from zero.
         this.updateIndicator(false);
     }
+    /** Wrapper geometry (`scrollWidth:clientWidth`) at the last fade evaluation. */
+    lastFadeGeometry = '';
+    /**
+     * Re-evaluates the edge fade when the wrapper's scrollable extent changes without its box
+     * changing. {@link resizeObserver} only sees border-box changes, and the tab row is a
+     * block-level flex container that keeps its parent's width while its tabs overflow inside it,
+     * so tabs that arrive after init (permission-gated tabs, badge counts, skeleton → loaded) grow
+     * `scrollWidth` without firing it; until a resize or scroll the fade stayed off. Two property
+     * reads per pass; the repaint only runs when they moved.
+     */
+    ngAfterViewChecked() {
+        const el = this.scrollContainer?.nativeElement;
+        if (!el)
+            return;
+        const geometry = `${el.scrollWidth}:${el.clientWidth}`;
+        if (geometry === this.lastFadeGeometry)
+            return;
+        this.lastFadeGeometry = geometry;
+        this.updateEdgeFades();
+    }
     ngOnDestroy() {
         this.destroyed = true;
         this.queryParamsSub?.unsubscribe();