mn-angular-lib 1.0.155 → 1.0.157

package/fesm2022/mn-angular-lib.mjs

@@ -11,6 +11,7 @@ import * as i1$1 from '@angular/forms';
 import { NgControl, Validators, FormsModule, NG_VALUE_ACCESSOR, FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import JSON5 from 'json5';
 import { LucideFile, LucideImagePlus, LucideTrash2, LucideUpload, LucideX, LucideCalendarDays, LucideChevronLeft, LucideChevronRight, LucideChevronDown, LucideEllipsisVertical, LucideSearchX, LucideDynamicIcon, LucideArrowLeft, LucideArrowRight, LucideCheck, LucideInbox, LucideFilter, LucideFunnel, LucideTriangleAlert, LucideCircleAlert } from '@lucide/angular';
+import { Router, ActivatedRoute } from '@angular/router';
 import { DomSanitizer } from '@angular/platform-browser';
 
 // projects/mn-angular-lib/src/lib/mn-mn-alert/mn-mn-alert.tokens.ts
@@ -5460,11 +5461,11 @@ class MnKeyboard {
         this.valueChange.emit(clamped);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnKeyboard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnKeyboard, isStandalone: true, selector: "mn-keyboard", inputs: { value: "value", layout: "layout", presentation: "presentation", labels: "labels", uppercase: "uppercase", allowSpace: "allowSpace", showSubmit: "showSubmit", submitDisabled: "submitDisabled", maxLength: "maxLength", sheetMaxHeightVh: "sheetMaxHeightVh" }, outputs: { valueChange: "valueChange", submitted: "submitted", dismissed: "dismissed" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<!-- The key block. Rendered directly for `inline`, or projected into the sheet below. -->\n<ng-template #keys>\n  <div [attr.aria-label]=\"labels.keyboard || null\" class=\"mn-keyboard-keys flex flex-col gap-2 p-3\" role=\"group\">\n    @for (row of rows; track $index) {\n      <div class=\"flex justify-center gap-2\">\n        @for (key of row; track key) {\n          <button\n            (click)=\"press(key)\"\n            class=\"mn-keyboard-key flex-1 rounded-lg bg-base-200 py-4 text-xl font-semibold text-base-content transition-colors hover:bg-base-300 active:bg-base-300\"\n            type=\"button\"\n          >\n            {{ key }}\n          </button>\n        }\n      </div>\n    }\n\n    <div class=\"flex justify-center gap-2\">\n      <button\n        (click)=\"backspace()\"\n        [attr.aria-label]=\"labels.backspace\"\n        class=\"mn-keyboard-key mn-keyboard-key-action flex-1 rounded-lg bg-base-200 py-4 text-base font-medium text-base-content transition-colors hover:bg-base-300\"\n        type=\"button\"\n      >\n        {{ labels.backspace }}\n      </button>\n\n      @if (spaceVisible) {\n        <button\n          (click)=\"pressSpace()\"\n          [attr.aria-label]=\"labels.space\"\n          class=\"mn-keyboard-key mn-keyboard-key-space flex-1 rounded-lg bg-base-200 py-4 text-base font-medium text-base-content transition-colors hover:bg-base-300\"\n          style=\"flex-grow: 3\"\n          type=\"button\"\n        >\n          {{ labels.space }}\n        </button>\n      }\n\n      <button\n        (click)=\"clear()\"\n        [attr.aria-label]=\"labels.clear\"\n        class=\"mn-keyboard-key mn-keyboard-key-action flex-1 rounded-lg bg-base-200 py-4 text-base font-medium text-base-content transition-colors hover:bg-base-300\"\n        type=\"button\"\n      >\n        {{ labels.clear }}\n      </button>\n\n      @if (showSubmit) {\n        <button\n          (click)=\"submit()\"\n          [attr.aria-label]=\"labels.submit\"\n          [disabled]=\"submitDisabled\"\n          class=\"mn-keyboard-key mn-keyboard-key-submit flex-1 rounded-lg bg-primary py-4 text-base font-semibold text-primary-content transition-colors hover:opacity-90 disabled:opacity-50\"\n          style=\"flex-grow: 2\"\n          type=\"button\"\n        >\n          {{ labels.submit }}\n        </button>\n      }\n    </div>\n  </div>\n</ng-template>\n\n@if (presentation === 'sheet') {\n  <mn-bottom-sheet\n    (dismiss)=\"onDismiss()\"\n    [ariaLabel]=\"labels.keyboard || undefined\"\n    [maxHeightVh]=\"sheetMaxHeightVh\"\n  >\n    <ng-container [ngTemplateOutlet]=\"keys\"></ng-container>\n  </mn-bottom-sheet>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"keys\"></ng-container>\n}\n", styles: [":host{display:block}.mn-keyboard-key{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation}\n"], dependencies: [{ kind: "component", type: MnBottomSheet, selector: "mn-bottom-sheet", inputs: ["showBackdrop", "showGrabber", "dismissible", "minHeightPx", "maxHeightVh", "containerClass", "ariaLabel", "ariaLabelledby", "growWithKeyboard", "dismissGuard"], outputs: ["dismiss"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnKeyboard, isStandalone: true, selector: "mn-keyboard", inputs: { value: "value", layout: "layout", presentation: "presentation", labels: "labels", uppercase: "uppercase", allowSpace: "allowSpace", showSubmit: "showSubmit", submitDisabled: "submitDisabled", maxLength: "maxLength", sheetMaxHeightVh: "sheetMaxHeightVh" }, outputs: { valueChange: "valueChange", submitted: "submitted", dismissed: "dismissed" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<!-- The key block. Rendered directly for `inline`, or projected into the sheet below. -->\n<ng-template #keys>\n  <div [attr.aria-label]=\"labels.keyboard || null\" class=\"mn-keyboard-keys flex flex-col gap-2 p-3\" role=\"group\">\n    @for (row of rows; track $index) {\n      <div class=\"flex justify-center gap-2\">\n        @for (key of row; track key) {\n          <button\n            (click)=\"press(key)\"\n            class=\"mn-keyboard-key flex-1 rounded-lg border border-base-300 bg-base-100 py-4 text-xl font-semibold text-base-content shadow-sm transition-colors hover:bg-base-200 active:bg-base-300\"\n            type=\"button\"\n          >\n            {{ key }}\n          </button>\n        }\n      </div>\n    }\n\n    <div class=\"flex justify-center gap-2\">\n      <button\n        (click)=\"backspace()\"\n        [attr.aria-label]=\"labels.backspace\"\n        class=\"mn-keyboard-key mn-keyboard-key-action flex-1 rounded-lg border border-base-300 bg-base-200 py-4 text-base font-medium text-base-content shadow-sm transition-colors hover:bg-base-300\"\n        type=\"button\"\n      >\n        {{ labels.backspace }}\n      </button>\n\n      @if (spaceVisible) {\n        <button\n          (click)=\"pressSpace()\"\n          [attr.aria-label]=\"labels.space\"\n          class=\"mn-keyboard-key mn-keyboard-key-space flex-1 rounded-lg border border-base-300 bg-base-200 py-4 text-base font-medium text-base-content shadow-sm transition-colors hover:bg-base-300\"\n          style=\"flex-grow: 3\"\n          type=\"button\"\n        >\n          {{ labels.space }}\n        </button>\n      }\n\n      <button\n        (click)=\"clear()\"\n        [attr.aria-label]=\"labels.clear\"\n        class=\"mn-keyboard-key mn-keyboard-key-action flex-1 rounded-lg border border-base-300 bg-base-200 py-4 text-base font-medium text-base-content shadow-sm transition-colors hover:bg-base-300\"\n        type=\"button\"\n      >\n        {{ labels.clear }}\n      </button>\n\n      @if (showSubmit) {\n        <button\n          (click)=\"submit()\"\n          [attr.aria-label]=\"labels.submit\"\n          [disabled]=\"submitDisabled\"\n          class=\"mn-keyboard-key mn-keyboard-key-submit flex-1 rounded-lg bg-primary py-4 text-base font-semibold text-primary-content shadow-sm transition-colors hover:opacity-90 disabled:opacity-50\"\n          style=\"flex-grow: 2\"\n          type=\"button\"\n        >\n          {{ labels.submit }}\n        </button>\n      }\n    </div>\n  </div>\n</ng-template>\n\n@if (presentation === 'sheet') {\n  <mn-bottom-sheet\n    (dismiss)=\"onDismiss()\"\n    [ariaLabel]=\"labels.keyboard || undefined\"\n    [maxHeightVh]=\"sheetMaxHeightVh\"\n  >\n    <ng-container [ngTemplateOutlet]=\"keys\"></ng-container>\n  </mn-bottom-sheet>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"keys\"></ng-container>\n}\n", styles: [":host{display:block}.mn-keyboard-key{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation}\n"], dependencies: [{ kind: "component", type: MnBottomSheet, selector: "mn-bottom-sheet", inputs: ["showBackdrop", "showGrabber", "dismissible", "minHeightPx", "maxHeightVh", "containerClass", "ariaLabel", "ariaLabelledby", "growWithKeyboard", "dismissGuard"], outputs: ["dismiss"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnKeyboard, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-keyboard', standalone: true, imports: [MnBottomSheet, NgTemplateOutlet], template: "<!-- The key block. Rendered directly for `inline`, or projected into the sheet below. -->\n<ng-template #keys>\n  <div [attr.aria-label]=\"labels.keyboard || null\" class=\"mn-keyboard-keys flex flex-col gap-2 p-3\" role=\"group\">\n    @for (row of rows; track $index) {\n      <div class=\"flex justify-center gap-2\">\n        @for (key of row; track key) {\n          <button\n            (click)=\"press(key)\"\n            class=\"mn-keyboard-key flex-1 rounded-lg bg-base-200 py-4 text-xl font-semibold text-base-content transition-colors hover:bg-base-300 active:bg-base-300\"\n            type=\"button\"\n          >\n            {{ key }}\n          </button>\n        }\n      </div>\n    }\n\n    <div class=\"flex justify-center gap-2\">\n      <button\n        (click)=\"backspace()\"\n        [attr.aria-label]=\"labels.backspace\"\n        class=\"mn-keyboard-key mn-keyboard-key-action flex-1 rounded-lg bg-base-200 py-4 text-base font-medium text-base-content transition-colors hover:bg-base-300\"\n        type=\"button\"\n      >\n        {{ labels.backspace }}\n      </button>\n\n      @if (spaceVisible) {\n        <button\n          (click)=\"pressSpace()\"\n          [attr.aria-label]=\"labels.space\"\n          class=\"mn-keyboard-key mn-keyboard-key-space flex-1 rounded-lg bg-base-200 py-4 text-base font-medium text-base-content transition-colors hover:bg-base-300\"\n          style=\"flex-grow: 3\"\n          type=\"button\"\n        >\n          {{ labels.space }}\n        </button>\n      }\n\n      <button\n        (click)=\"clear()\"\n        [attr.aria-label]=\"labels.clear\"\n        class=\"mn-keyboard-key mn-keyboard-key-action flex-1 rounded-lg bg-base-200 py-4 text-base font-medium text-base-content transition-colors hover:bg-base-300\"\n        type=\"button\"\n      >\n        {{ labels.clear }}\n      </button>\n\n      @if (showSubmit) {\n        <button\n          (click)=\"submit()\"\n          [attr.aria-label]=\"labels.submit\"\n          [disabled]=\"submitDisabled\"\n          class=\"mn-keyboard-key mn-keyboard-key-submit flex-1 rounded-lg bg-primary py-4 text-base font-semibold text-primary-content transition-colors hover:opacity-90 disabled:opacity-50\"\n          style=\"flex-grow: 2\"\n          type=\"button\"\n        >\n          {{ labels.submit }}\n        </button>\n      }\n    </div>\n  </div>\n</ng-template>\n\n@if (presentation === 'sheet') {\n  <mn-bottom-sheet\n    (dismiss)=\"onDismiss()\"\n    [ariaLabel]=\"labels.keyboard || undefined\"\n    [maxHeightVh]=\"sheetMaxHeightVh\"\n  >\n    <ng-container [ngTemplateOutlet]=\"keys\"></ng-container>\n  </mn-bottom-sheet>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"keys\"></ng-container>\n}\n", styles: [":host{display:block}.mn-keyboard-key{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation}\n"] }]
+            args: [{ selector: 'mn-keyboard', standalone: true, imports: [MnBottomSheet, NgTemplateOutlet], template: "<!-- The key block. Rendered directly for `inline`, or projected into the sheet below. -->\n<ng-template #keys>\n  <div [attr.aria-label]=\"labels.keyboard || null\" class=\"mn-keyboard-keys flex flex-col gap-2 p-3\" role=\"group\">\n    @for (row of rows; track $index) {\n      <div class=\"flex justify-center gap-2\">\n        @for (key of row; track key) {\n          <button\n            (click)=\"press(key)\"\n            class=\"mn-keyboard-key flex-1 rounded-lg border border-base-300 bg-base-100 py-4 text-xl font-semibold text-base-content shadow-sm transition-colors hover:bg-base-200 active:bg-base-300\"\n            type=\"button\"\n          >\n            {{ key }}\n          </button>\n        }\n      </div>\n    }\n\n    <div class=\"flex justify-center gap-2\">\n      <button\n        (click)=\"backspace()\"\n        [attr.aria-label]=\"labels.backspace\"\n        class=\"mn-keyboard-key mn-keyboard-key-action flex-1 rounded-lg border border-base-300 bg-base-200 py-4 text-base font-medium text-base-content shadow-sm transition-colors hover:bg-base-300\"\n        type=\"button\"\n      >\n        {{ labels.backspace }}\n      </button>\n\n      @if (spaceVisible) {\n        <button\n          (click)=\"pressSpace()\"\n          [attr.aria-label]=\"labels.space\"\n          class=\"mn-keyboard-key mn-keyboard-key-space flex-1 rounded-lg border border-base-300 bg-base-200 py-4 text-base font-medium text-base-content shadow-sm transition-colors hover:bg-base-300\"\n          style=\"flex-grow: 3\"\n          type=\"button\"\n        >\n          {{ labels.space }}\n        </button>\n      }\n\n      <button\n        (click)=\"clear()\"\n        [attr.aria-label]=\"labels.clear\"\n        class=\"mn-keyboard-key mn-keyboard-key-action flex-1 rounded-lg border border-base-300 bg-base-200 py-4 text-base font-medium text-base-content shadow-sm transition-colors hover:bg-base-300\"\n        type=\"button\"\n      >\n        {{ labels.clear }}\n      </button>\n\n      @if (showSubmit) {\n        <button\n          (click)=\"submit()\"\n          [attr.aria-label]=\"labels.submit\"\n          [disabled]=\"submitDisabled\"\n          class=\"mn-keyboard-key mn-keyboard-key-submit flex-1 rounded-lg bg-primary py-4 text-base font-semibold text-primary-content shadow-sm transition-colors hover:opacity-90 disabled:opacity-50\"\n          style=\"flex-grow: 2\"\n          type=\"button\"\n        >\n          {{ labels.submit }}\n        </button>\n      }\n    </div>\n  </div>\n</ng-template>\n\n@if (presentation === 'sheet') {\n  <mn-bottom-sheet\n    (dismiss)=\"onDismiss()\"\n    [ariaLabel]=\"labels.keyboard || undefined\"\n    [maxHeightVh]=\"sheetMaxHeightVh\"\n  >\n    <ng-container [ngTemplateOutlet]=\"keys\"></ng-container>\n  </mn-bottom-sheet>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"keys\"></ng-container>\n}\n", styles: [":host{display:block}.mn-keyboard-key{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], layout: [{
@@ -8701,6 +8702,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 
 class MnFormBodyComponent {
     fb = inject(FormBuilder);
+    /**
+     * Change detector used to announce state this component mutates outside an Angular
+     * event handler — after an `await`, or from an RxJS subscription. Consuming apps run
+     * zoneless, where such a write notifies nothing: the view is never marked dirty, so it
+     * keeps rendering the stale value and `checkNoChanges` then reports it as NG0100
+     * (e.g. the submit button staying disabled on "Submitting..." after a failed submit).
+     * Every async mutation of {@link isSubmitting}, {@link fieldLoading}, {@link fieldOptions}
+     * and {@link formErrors} must be followed by `markForCheck()`.
+     */
+    cdr = inject(ChangeDetectorRef);
     config;
     modalRef;
     hideFooter = false;
@@ -9131,6 +9142,7 @@ class MnFormBodyComponent {
     }
     async loadFieldOptions(key, dataSource, formValue) {
         this.fieldLoading[key] = true;
+        this.cdr.markForCheck();
         try {
             this.fieldOptions[key] = await dataSource.load(formValue);
         }
@@ -9139,7 +9151,10 @@ class MnFormBodyComponent {
             this.fieldOptions[key] = [];
         }
         finally {
+            // Resolved after an `await`, so nothing has told Angular the spinner can go and the
+            // options have arrived. Without this the field renders "Loading options..." forever.
             this.fieldLoading[key] = false;
+            this.cdr.markForCheck();
         }
     }
     // =========================
@@ -9280,6 +9295,10 @@ class MnFormBodyComponent {
             this.reloadDependentDataSources(formValue);
             // Emit status change
             this.formStatusChange.emit(this.form.status);
+            // `valueChanges` can fire from outside an Angular event handler (a CVA writing on
+            // init, or a caller patching the form), and the callbacks above rewrite visibility,
+            // required-state and cross-field errors that the template reads.
+            this.cdr.markForCheck();
         });
     }
     previousFormValue = {};
@@ -9343,8 +9362,11 @@ class MnFormBodyComponent {
             this.modalRef.close(formValue);
         }
         catch (error) {
-            // Always allow retry on error, regardless of submit mode
+            // Always allow retry on error, regardless of submit mode. This runs after an `await`,
+            // so it must announce itself: otherwise the button stays disabled on "Submitting..."
+            // and the user can never retry the action that just failed.
             this.isSubmitting = false;
+            this.cdr.markForCheck();
             console.error('Form submission error:', error);
         }
     }
@@ -10991,6 +11013,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  */
 class CalendarMonthComponent {
     lang = inject(MnLanguageService);
+    cdr = inject(ChangeDetectorRef);
     /**
      * Accessible name for this control. Resolved through the conventional
      * `mnCalendar.monthView` key so an app can translate it, falling back to English when the
@@ -11026,16 +11049,22 @@ class CalendarMonthComponent {
         this.weekdayLabels = resolved.shortDayNames;
         this.moreEventsLabel = resolved.moreEventsLabel;
         this.buildMonth();
+        // Both subscriptions mark the view: the grid is rebuilt into plain fields, so in a zoneless
+        // app nothing else tells Angular this component has to be re-rendered. Without it a month
+        // whose events arrive from a stream — a fetch, a parent seeding its list — stays blank until
+        // some unrelated interaction happens to trigger change detection.
         if (this.eventsChanged) {
             this.eventsChanged.pipe(takeUntil(this.destroy$)).subscribe(events => {
                 this.events = events;
                 this.buildMonth();
+                this.cdr.markForCheck();
             });
         }
         if (this.focusDayChanged) {
             this.focusDayChanged.pipe(takeUntil(this.destroy$)).subscribe(date => {
                 this.focusDay = date;
                 this.buildMonth();
+                this.cdr.markForCheck();
             });
         }
     }
@@ -11845,6 +11874,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  */
 class UpcomingEventsComponent {
     lang = inject(MnLanguageService);
+    cdr = inject(ChangeDetectorRef);
     /**
      * Accessible name for this control. Resolved through the conventional
      * `mnCalendar.upcomingEvents` key so an app can translate it, falling back to English when the
@@ -11879,6 +11909,9 @@ class UpcomingEventsComponent {
         const resolved = this.config ? resolveCalendarConfig(this.config) : { ...DEFAULT_CALENDAR_CONFIG };
         this.title = resolved.upcomingEventsTitle;
         this.noEventsMessage = resolved.noUpcomingEvents;
+        // Marked because the list is a plain field: in a zoneless app a stream emission is not by
+        // itself a reason for Angular to re-render, so the sidebar would keep showing the events it
+        // was first given.
         if (this.eventsChanged) {
             this.eventsChanged.pipe(takeUntil(this.destroy$)).subscribe(events => {
                 const now = new Date();
@@ -11886,6 +11919,7 @@ class UpcomingEventsComponent {
                     .filter(e => e.endTime > now)
                     .sort((a, b) => a.startTime.getTime() - b.startTime.getTime())
                     .slice(0, 10);
+                this.cdr.markForCheck();
             });
         }
     }
@@ -11979,6 +12013,7 @@ class CalendarViewComponent {
     mnConfigRef;
     destroyRef = inject(DestroyRef);
     lang = inject(MnLanguageService);
+    cdr = inject(ChangeDetectorRef);
     constructor() {
         const mnConfig = inject(MN_CALENDAR_CONFIG, { optional: true });
         const legacyConfig = inject(CALENDAR_CONFIG, { optional: true });
@@ -11993,9 +12028,12 @@ class CalendarViewComponent {
     }
     ngOnInit() {
         this.rebuildFromConfig();
-        // Re-resolve config when locale changes (supports $translate in mn-config).
+        // Re-resolve config when locale changes (supports $translate in mn-config). Marked because
+        // the labels it rebuilds are plain fields: a locale switch arrives on a stream, which in a
+        // zoneless app is not by itself a reason for Angular to re-render the toolbar.
         const sub = this.lang.locale$.pipe(skip(1)).subscribe(() => {
             this.rebuildFromConfig();
+            this.cdr.markForCheck();
         });
         this.destroyRef.onDestroy(() => sub.unsubscribe());
         this.checkMobileView();
@@ -12200,11 +12238,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 
 /** Fallback number of skeleton tabs when no items are known and no count is given. */
 const DEFAULT_SKELETON_TAB_COUNT = 3;
+/** Query parameter the active tab is mirrored in unless the data source names another. */
+const DEFAULT_TAB_URL_PARAM = 'tab';
+/** Key used for a label that slugs to nothing (e.g. punctuation only). */
+const FALLBACK_TAB_URL_KEY = 'tab';
+/**
+ * Slugs a tab label into the value it takes in the URL: the last segment of a
+ * translation key, kebab-cased. `matches.hub.tab.entrants` → `entrants`,
+ * `members.tabMembers` → `tab-members`.
+ * @param label - The tab's label or translation key.
+ */
+function tabUrlKey(label) {
+    const segment = label.split('.').pop() ?? label;
+    const slug = segment
+        .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+        .replace(/[^a-zA-Z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '')
+        .toLowerCase();
+    return slug || FALLBACK_TAB_URL_KEY;
+}
 /**
  * Tab component that renders a horizontal tab bar.
  * Supports translation keys for labels via MnTranslatePipe.
+ *
+ * The active tab is mirrored in the URL query string by default, so a reload,
+ * a back button or a shared link lands on the same tab; see
+ * {@link MnTabDataSource.urlParam} to rename that parameter or switch it off.
  */
 class MnTabComponent {
+    /**
+     * Router the active tab is written to. Optional: a tab bar used outside a
+     * routed application still works, it just has no URL to mirror into.
+     */
+    router = inject(Router, { optional: true });
+    /** Route the tab value is read back from; absent for the same reason as {@link router}. */
+    route = inject(ActivatedRoute, { optional: true });
+    /** Watches the URL so a deep link, a back button or an in-app link moves the tab bar. */
+    queryParamsSub;
+    /**
+     * URL keys of the current items, memoised on the items array so a slug is
+     * computed once per tab set rather than on every change-detection pass.
+     */
+    urlKeyCache;
+    /** URL key of {@link currentActive}, so a rebuilt tab set can be recognised as the same tab. */
+    currentKey;
+    /**
+     * Key of a selection whose URL write has not landed yet. Navigation is
+     * asynchronous, so a consumer that rebuilds its tabs in response to the click
+     * can be resolved against a URL that still names the previous tab; until the
+     * write completes, this is the truth about what the user picked.
+     */
+    pendingKey;
+    /** Set on destroy so a deferred restore can't announce a tab nobody is showing. */
+    destroyed = false;
     /** The horizontally-scrolling wrapper the edge fade is painted onto. */
     scrollContainer;
     /** The tab row; queried for the active tab so the indicator can measure it. */
@@ -12268,6 +12354,16 @@ class MnTabComponent {
             (this.dataSource.items.length || DEFAULT_SKELETON_TAB_COUNT);
         return Array.from({ length: count }, (_, index) => index);
     }
+    constructor() {
+        // The URL is a second source of truth for the selection: a deep link, an
+        // in-app link into another tab of the page already on screen, or the back
+        // button all change it without a click landing on this component.
+        this.queryParamsSub = this.route?.queryParamMap.subscribe((params) => {
+            const param = this.urlParam();
+            if (param)
+                this.activateUrlKey(params.get(param));
+        });
+    }
     /**
      * Re-resolves the active tab on every change-detection pass.
      *
@@ -12307,6 +12403,8 @@ class MnTabComponent {
         this.updateIndicator(false);
     }
     ngOnDestroy() {
+        this.destroyed = true;
+        this.queryParamsSub?.unsubscribe();
         this.resizeObserver?.disconnect();
         if (this.indicatorFrame !== undefined)
             cancelAnimationFrame(this.indicatorFrame);
@@ -12340,16 +12438,28 @@ class MnTabComponent {
         el.style.setProperty('-webkit-mask-image', mask);
     }
     /**
-     * Sets the given tab item as active, invoking deactivate/activate callbacks.
+     * Sets the given tab item as active, invoking deactivate/activate callbacks,
+     * and records the selection in the URL so it survives a reload or a share.
      * @param item - The tab item to activate.
      */
     setActive(item) {
         if (this.currentActive === item) {
             return;
         }
+        this.activate(item);
+        this.writeUrl(item);
+    }
+    /**
+     * Moves the selection to `item` and tells the consumer about it: the
+     * deactivate/activate/emit sequence a click produces, shared by the click
+     * path and the URL-driven ones (deep link, back button), which owe the
+     * consumer the same notifications.
+     * @param item - The tab item to activate.
+     */
+    activate(item) {
         this.currentActive?.onDeactivate?.();
         item.onClick?.();
-        this.currentActive = item;
+        this.select(item);
         this.activeChange.emit(item);
         // Slide the underline to the new tab. Measure on the next frame, after
         // change detection has applied the active tab's `font-bold` (which widens
@@ -12425,14 +12535,16 @@ class MnTabComponent {
     }
     /**
      * Ensures {@link currentActive} references a tab that still exists in the data
-     * source, falling back to the configured default tab when the current
-     * selection is missing or stale (e.g. after the items array is replaced).
+     * source, preferring the tab named in the URL and falling back to the
+     * configured default tab when the current selection is missing or stale
+     * (e.g. after the items array is replaced).
      */
     syncActiveTab() {
         const items = this.dataSource?.items;
         if (!items || items.length === 0) {
             if (this.currentActive !== undefined) {
                 this.currentActive = undefined;
+                this.currentKey = undefined;
                 this.scheduleIndicator(false);
             }
             return;
@@ -12442,9 +12554,131 @@ class MnTabComponent {
         }
         const defaultIndex = this.dataSource.defaultActive;
         const index = defaultIndex >= 0 && defaultIndex < items.length ? defaultIndex : 0;
-        this.currentActive = items[index];
+        const fallback = items[index];
+        const restored = this.itemFromUrl(items);
+        const previousKey = this.currentKey;
+        this.select(restored ?? fallback);
         // Selection resolved from data (not a user click): snap, don't slide.
         this.scheduleIndicator(false);
+        if (restored && restored !== fallback && this.currentKey !== previousKey) {
+            // The URL asks for a tab the consumer has not rendered, so this selection
+            // has to be announced like a click's would be — but only the first time,
+            // or a consumer that rebuilds its items array would re-run the tab's
+            // callbacks on every rebuild. Deferred out of the change-detection pass
+            // that resolved it: the consumer will flip its own state in response, and
+            // doing that mid-pass writes to bindings that have already been checked.
+            queueMicrotask(() => this.announceRestored(restored));
+        }
+    }
+    /**
+     * Records `item` as the selection, remembering its URL key so the same tab is
+     * recognised after the consumer rebuilds the items array.
+     * @param item - The newly selected tab.
+     */
+    select(item) {
+        const items = this.dataSource.items;
+        this.currentActive = item;
+        this.currentKey = this.urlKeys(items)[items.indexOf(item)];
+    }
+    /**
+     * Runs the restored tab's callbacks a change-detection pass later, unless the
+     * selection moved on in the meantime (a click, or another tab set arriving).
+     * @param item - The tab restored from the URL.
+     */
+    announceRestored(item) {
+        if (this.destroyed || this.currentActive !== item)
+            return;
+        item.onClick?.();
+        this.activeChange.emit(item);
+    }
+    /**
+     * Activates the tab a URL value names, when it is not the tab already on
+     * screen. Values naming no known tab are ignored: another tab bar on the page
+     * may own that parameter, and a stale link should leave the default standing.
+     * @param key - The value read from the query parameter, if any.
+     */
+    activateUrlKey(key) {
+        const items = this.dataSource?.items;
+        if (!key || !items?.length)
+            return;
+        const item = items[this.urlKeys(items).indexOf(key)];
+        if (!item || item === this.currentActive)
+            return;
+        this.activate(item);
+    }
+    /**
+     * The query parameter this tab bar mirrors into, or undefined when there is
+     * nothing to mirror into (no router) or the consumer switched it off.
+     */
+    urlParam() {
+        if (!this.router || !this.route)
+            return undefined;
+        const param = this.dataSource?.urlParam ?? DEFAULT_TAB_URL_PARAM;
+        return param === false || param === '' ? undefined : param;
+    }
+    /**
+     * The tab the current URL asks for, if it names one of `items`.
+     * @param items - The tab set to resolve the URL value against.
+     */
+    itemFromUrl(items) {
+        const param = this.urlParam();
+        if (!param)
+            return undefined;
+        const key = this.pendingKey ?? this.route?.snapshot.queryParamMap.get(param);
+        if (!key)
+            return undefined;
+        const index = this.urlKeys(items).indexOf(key);
+        return index === -1 ? undefined : items[index];
+    }
+    /**
+     * Records the active tab in the query string, replacing the current history
+     * entry: switching tabs is not a navigation to walk back through, and back
+     * should leave the page rather than retrace its tabs.
+     * @param item - The tab that just became active.
+     */
+    writeUrl(item) {
+        const param = this.urlParam();
+        if (!param || !this.router)
+            return;
+        const items = this.dataSource.items;
+        const key = this.urlKeys(items)[items.indexOf(item)];
+        if (!key)
+            return;
+        this.pendingKey = key;
+        // No path commands and no `relativeTo`, so only the query string changes.
+        // That holds wherever the tab bar sits, including a modal body, which has
+        // no route of its own to be relative to.
+        void this.router
+            .navigate([], {
+            queryParams: { [param]: key },
+            queryParamsHandling: 'merge',
+            replaceUrl: true,
+        })
+            .catch(() => undefined)
+            .then(() => {
+            // Only clear our own write; a later click already owns the pending key.
+            if (this.pendingKey === key)
+                this.pendingKey = undefined;
+        });
+    }
+    /**
+     * The URL key of every tab, in item order: the item's `id`, else a slug of
+     * its label. Repeats are numbered so each tab still round-trips through the
+     * URL; give such tabs an explicit `id` to choose the value yourself.
+     * @param items - The tab set to key.
+     */
+    urlKeys(items) {
+        if (this.urlKeyCache?.items === items)
+            return this.urlKeyCache.keys;
+        const used = new Map();
+        const keys = items.map((item) => {
+            const base = item.id ?? tabUrlKey(item.label);
+            const taken = used.get(base) ?? 0;
+            used.set(base, taken + 1);
+            return taken === 0 ? base : `${base}-${taken + 1}`;
+        });
+        this.urlKeyCache = { items, keys };
+        return keys;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTabComponent, isStandalone: true, selector: "mn-tab", inputs: { dataSource: "dataSource", scrollable: "scrollable", justified: "justified" }, outputs: { activeChange: "activeChange" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "tabList", first: true, predicate: ["tabList"], descendants: true }, { propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true }], ngImport: i0, template: "<div class=\"mb-10\">\n  <div\n    #scrollContainer\n    (scroll)=\"updateEdgeFades()\"\n    class=\"flex justify-start scrollbar-hide\"\n    [class.overflow-x-auto]=\"scrollable\"\n    [class.overflow-y-hidden]=\"scrollable\"\n  >\n    <div\n      #tabList\n      role=\"tablist\"\n      class=\"tabs relative flex flex-nowrap -mb-[1px] border-b border-base-300\"\n      [class.w-full]=\"justified\"\n    >\n      <!--\n        Shared sliding indicator: a single underline that travels to the active\n        tab, rather than each tab flipping its own border on/off (which snaps).\n        Pinned to left-0/top-auto so offsetLeft maps 1:1 regardless of the\n        flex justify-content or the justified full-width layout; position and\n        width are measured and set from TS. Sits on the same baseline as the\n        hover ::after so hover \u2192 select reads as one continuous underline.\n      -->\n      <div\n        #indicator\n        aria-hidden=\"true\"\n        class=\"pointer-events-none absolute left-0 top-auto bottom-0 h-[2px] w-0 bg-primary opacity-0 transition-[transform,width] duration-300 ease-out motion-reduce:transition-none\"\n      ></div>\n      @if (isLoadingState) {\n        @for (i of skeletonTabs; track i) {\n          <div\n            [class.flex-1]=\"justified\"\n            class=\"tab px-4 py-2 border-b-2 border-transparent flex items-center justify-center\"\n          >\n            <mn-skeleton [data]=\"{ shape: 'rectangle', width: '4.5rem', height: '1rem' }\"></mn-skeleton>\n          </div>\n        }\n      } @else {\n        @for (item of dataSource.items; track item.label) {\n          <div\n            (click)=\"setActive(item)\"\n            (keyup.enter)=\"setActive(item)\"\n            (keyup.space)=\"setActive(item)\"\n            [attr.aria-selected]=\"currentActive === item\"\n            [class.hover:after:scale-x-100]=\"currentActive !== item\"\n            [class.flex-1]=\"justified\"\n            [class.font-bold]=\"currentActive === item\"\n            [class.text-base-content]=\"currentActive !== item\"\n            [class.text-primary]=\"currentActive === item\"\n            class=\"tab relative px-4 py-2 border-b-2 border-transparent cursor-pointer select-none transition-colors whitespace-nowrap text-center flex items-center gap-2 after:content-[''] after:absolute after:inset-x-0 after:-bottom-[2px] after:h-[2px] after:bg-primary/60 after:origin-center after:scale-x-0 after:transition-transform after:duration-300 after:ease-out\"\n            role=\"tab\"\n            tabindex=\"0\"\n          >\n            {{ item.label | mnTranslate }}\n            @let badge = getBadge(item);\n            @if (badge && badge > 0) {\n              <span [data]=\"{ size: 'sm', color: 'accent', variant: 'fill' }\" mnBadge>{{ badge }}</span>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MnBadge, selector: "span[mnBadge]", inputs: ["data"] }, { kind: "component", type: MnSkeleton, selector: "mn-skeleton", inputs: ["data"] }, { kind: "pipe", type: MnTranslatePipe, name: "mnTranslate" }] });
@@ -12452,7 +12686,7 @@ class MnTabComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mn-tab', standalone: true, imports: [MnTranslatePipe, CommonModule, MnBadge, MnSkeleton], template: "<div class=\"mb-10\">\n  <div\n    #scrollContainer\n    (scroll)=\"updateEdgeFades()\"\n    class=\"flex justify-start scrollbar-hide\"\n    [class.overflow-x-auto]=\"scrollable\"\n    [class.overflow-y-hidden]=\"scrollable\"\n  >\n    <div\n      #tabList\n      role=\"tablist\"\n      class=\"tabs relative flex flex-nowrap -mb-[1px] border-b border-base-300\"\n      [class.w-full]=\"justified\"\n    >\n      <!--\n        Shared sliding indicator: a single underline that travels to the active\n        tab, rather than each tab flipping its own border on/off (which snaps).\n        Pinned to left-0/top-auto so offsetLeft maps 1:1 regardless of the\n        flex justify-content or the justified full-width layout; position and\n        width are measured and set from TS. Sits on the same baseline as the\n        hover ::after so hover \u2192 select reads as one continuous underline.\n      -->\n      <div\n        #indicator\n        aria-hidden=\"true\"\n        class=\"pointer-events-none absolute left-0 top-auto bottom-0 h-[2px] w-0 bg-primary opacity-0 transition-[transform,width] duration-300 ease-out motion-reduce:transition-none\"\n      ></div>\n      @if (isLoadingState) {\n        @for (i of skeletonTabs; track i) {\n          <div\n            [class.flex-1]=\"justified\"\n            class=\"tab px-4 py-2 border-b-2 border-transparent flex items-center justify-center\"\n          >\n            <mn-skeleton [data]=\"{ shape: 'rectangle', width: '4.5rem', height: '1rem' }\"></mn-skeleton>\n          </div>\n        }\n      } @else {\n        @for (item of dataSource.items; track item.label) {\n          <div\n            (click)=\"setActive(item)\"\n            (keyup.enter)=\"setActive(item)\"\n            (keyup.space)=\"setActive(item)\"\n            [attr.aria-selected]=\"currentActive === item\"\n            [class.hover:after:scale-x-100]=\"currentActive !== item\"\n            [class.flex-1]=\"justified\"\n            [class.font-bold]=\"currentActive === item\"\n            [class.text-base-content]=\"currentActive !== item\"\n            [class.text-primary]=\"currentActive === item\"\n            class=\"tab relative px-4 py-2 border-b-2 border-transparent cursor-pointer select-none transition-colors whitespace-nowrap text-center flex items-center gap-2 after:content-[''] after:absolute after:inset-x-0 after:-bottom-[2px] after:h-[2px] after:bg-primary/60 after:origin-center after:scale-x-0 after:transition-transform after:duration-300 after:ease-out\"\n            role=\"tab\"\n            tabindex=\"0\"\n          >\n            {{ item.label | mnTranslate }}\n            @let badge = getBadge(item);\n            @if (badge && badge > 0) {\n              <span [data]=\"{ size: 'sm', color: 'accent', variant: 'fill' }\" mnBadge>{{ badge }}</span>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n" }]
-        }], propDecorators: { scrollContainer: [{
+        }], ctorParameters: () => [], propDecorators: { scrollContainer: [{
                 type: ViewChild,
                 args: ['scrollContainer']
             }], tabList: [{