@mk-kit/ui 0.36.0 → 0.38.0

package/fesm2022/mk-kit-ui-feedback.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { inject, input, booleanAttribute, output, computed, ChangeDetectionStrategy, Component, ElementRef, ApplicationRef, EnvironmentInjector, DOCUMENT, PLATFORM_ID, createComponent, Directive, Injector, viewChild, signal, afterNextRender, numberAttribute, model, ViewEncapsulation, Injectable, InjectionToken, DestroyRef } from '@angular/core';
+import { inject, input, booleanAttribute, output, computed, ChangeDetectionStrategy, Component, ElementRef, ApplicationRef, EnvironmentInjector, DOCUMENT, PLATFORM_ID, createComponent, Directive, Injector, viewChild, signal, afterNextRender, numberAttribute, model, DestroyRef, afterRenderEffect, ViewEncapsulation, Injectable, InjectionToken, effect } from '@angular/core';
 import { MK_I18N, mkUniqueId, mkComputeAnchoredPosition, mkGetFocusable, MkAnchoredPanel, MkOverlayRef, MK_OVERLAY_DATA, MkOverlayService } from '@mk-kit/ui/core';
 import { isPlatformBrowser } from '@angular/common';
 import { MkButton } from '@mk-kit/ui/button';
-import { MkBadge, MkEmptyState } from '@mk-kit/ui/data';
+import { MkBadge, MkEmptyState, MkSpinner } from '@mk-kit/ui/data';
 import { MkIcon } from '@mk-kit/ui/icon';
 import { MkInput, MkFormField } from '@mk-kit/ui/forms';
 
@@ -1142,13 +1142,209 @@ class MkDialog {
     ...(ngDevMode ? [{ debugName: "titleId" }] : /* istanbul ignore next */ []));
     /** Hide the header close button. */
     hideClose = input(false, { ...(ngDevMode ? { debugName: "hideClose" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Let the user move the dialog by dragging its header (pointer / touch) or
+     * with the arrow keys on the grip that appears in the header. Double-click
+     * the header or press Home on the grip to snap back to the centre.
+     */
+    draggable = input(false, { ...(ngDevMode ? { debugName: "draggable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Let the user resize the dialog from the corner grip (pointer / touch, or
+     * arrow keys on the grip; Home resets). The panel never grows past the
+     * viewport or shrinks below a usable minimum.
+     */
+    resizable = input(false, { ...(ngDevMode ? { debugName: "resizable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    destroyRef = inject(DestroyRef);
+    /** The body-level overlay panel this dialog lives in (`null` when inline). */
+    panelEl;
+    /** Current drag offset from the centred position, px. */
+    offset = { x: 0, y: 0 };
     constructor() {
         afterNextRender(() => this.wireLabelledBy());
+        afterRenderEffect(() => {
+            const draggable = this.draggable();
+            const resizable = this.resizable();
+            const panel = this.panel();
+            if (!panel)
+                return;
+            panel.classList.toggle('mk-dialog-panel--draggable', draggable);
+            panel.classList.toggle('mk-dialog-panel--resizable', resizable);
+        });
+        const view = this.host.nativeElement.ownerDocument.defaultView;
+        if (view) {
+            const onResize = () => this.clampIntoView();
+            view.addEventListener('resize', onResize);
+            this.destroyRef.onDestroy(() => view.removeEventListener('resize', onResize));
+        }
     }
     /** Close the surrounding overlay, if any. */
     close() {
         this.overlayRef?.close();
     }
+    /** Snap back to the centred, preset-sized panel. */
+    reset() {
+        const panel = this.panel();
+        if (!panel)
+            return;
+        this.offset = { x: 0, y: 0 };
+        panel.style.translate = '';
+        panel.style.width = '';
+        panel.style.height = '';
+    }
+    // --- Drag / resize -----------------------------------------------------------
+    onHeaderPointerDown(event) {
+        if (!this.draggable())
+            return;
+        const target = event.target;
+        // Controls in the header keep their own pointer behaviour.
+        if (target.closest('button, a, input, textarea, select, [contenteditable="true"]') && !target.closest('.mk-dialog__grip'))
+            return;
+        this.startPointer(event, 'move');
+    }
+    onGripPointerDown(event) {
+        this.startPointer(event, 'move');
+    }
+    onResizerPointerDown(event) {
+        this.startPointer(event, 'resize');
+    }
+    onHeaderDoubleClick(event) {
+        if (!this.draggable())
+            return;
+        if (event.target.closest('button, a, input, textarea, select'))
+            return;
+        this.reset();
+    }
+    onGripKeydown(event) {
+        const step = event.shiftKey ? 32 : 8;
+        const delta = MkDialog.arrowDelta(event.key, step);
+        if (delta) {
+            event.preventDefault();
+            this.moveTo(this.offset.x + delta.x, this.offset.y + delta.y);
+        }
+        else if (event.key === 'Home') {
+            event.preventDefault();
+            this.reset();
+        }
+    }
+    onResizerKeydown(event) {
+        const step = event.shiftKey ? 64 : 16;
+        const delta = MkDialog.arrowDelta(event.key, step);
+        const panel = this.panel();
+        if (delta && panel) {
+            event.preventDefault();
+            const rect = panel.getBoundingClientRect();
+            const rtl = this.isRtl(panel);
+            this.resizeTo(rect.width + (rtl ? -delta.x : delta.x), rect.height + delta.y);
+        }
+        else if (event.key === 'Home') {
+            event.preventDefault();
+            this.reset();
+        }
+    }
+    static arrowDelta(key, step) {
+        switch (key) {
+            case 'ArrowLeft':
+                return { x: -step, y: 0 };
+            case 'ArrowRight':
+                return { x: step, y: 0 };
+            case 'ArrowUp':
+                return { x: 0, y: -step };
+            case 'ArrowDown':
+                return { x: 0, y: step };
+            default:
+                return null;
+        }
+    }
+    startPointer(event, mode) {
+        const panel = this.panel();
+        if (!panel || event.button !== 0)
+            return;
+        event.preventDefault();
+        const handle = event.currentTarget;
+        const startX = event.clientX;
+        const startY = event.clientY;
+        const startOffset = { ...this.offset };
+        const rect = panel.getBoundingClientRect();
+        const rtl = this.isRtl(panel);
+        handle.setPointerCapture?.(event.pointerId);
+        this.markMoved(panel);
+        panel.classList.add('mk-dialog-panel--dragging');
+        const onMove = (e) => {
+            const dx = e.clientX - startX;
+            const dy = e.clientY - startY;
+            if (mode === 'move')
+                this.moveTo(startOffset.x + dx, startOffset.y + dy);
+            else
+                this.resizeTo(rect.width + (rtl ? -dx : dx), rect.height + dy);
+        };
+        const onEnd = () => {
+            handle.removeEventListener('pointermove', onMove);
+            handle.removeEventListener('pointerup', onEnd);
+            handle.removeEventListener('pointercancel', onEnd);
+            handle.releasePointerCapture?.(event.pointerId);
+            panel.classList.remove('mk-dialog-panel--dragging');
+        };
+        handle.addEventListener('pointermove', onMove);
+        handle.addEventListener('pointerup', onEnd);
+        handle.addEventListener('pointercancel', onEnd);
+    }
+    /** Move the panel to `(x, y)` px from its centred spot, kept inside the viewport. */
+    moveTo(x, y) {
+        const panel = this.panel();
+        const view = panel?.ownerDocument.defaultView;
+        if (!panel || !view)
+            return;
+        const rect = panel.getBoundingClientRect();
+        // Where the panel sits with no offset at all.
+        const baseLeft = rect.left - this.offset.x;
+        const baseTop = rect.top - this.offset.y;
+        const maxX = Math.max(-baseLeft, view.innerWidth - rect.width - baseLeft);
+        const maxY = Math.max(-baseTop, view.innerHeight - rect.height - baseTop);
+        this.offset = {
+            x: Math.min(Math.max(x, -baseLeft), maxX),
+            y: Math.min(Math.max(y, -baseTop), maxY),
+        };
+        this.markMoved(panel);
+        panel.style.translate = `${Math.round(this.offset.x)}px ${Math.round(this.offset.y)}px`;
+    }
+    /** Resize the panel to `w × h` px within [minimum, viewport]. */
+    resizeTo(w, h) {
+        const panel = this.panel();
+        const view = panel?.ownerDocument.defaultView;
+        if (!panel || !view)
+            return;
+        const width = Math.min(Math.max(w, 240), view.innerWidth);
+        const height = Math.min(Math.max(h, 160), view.innerHeight);
+        this.markMoved(panel);
+        panel.style.width = `${Math.round(width)}px`;
+        panel.style.height = `${Math.round(height)}px`;
+        panel.style.maxWidth = '100vw';
+        panel.style.maxHeight = '100vh';
+        this.clampIntoView();
+    }
+    /**
+     * Once the user takes hold, the entrance animation must never run again —
+     * toggling `animation` back on (as a transient class would) restarts it,
+     * so the panel would blink after every drag. The class is never removed.
+     */
+    markMoved(panel) {
+        panel.classList.add('mk-dialog-panel--moved');
+    }
+    clampIntoView() {
+        if (this.offset.x === 0 && this.offset.y === 0)
+            return;
+        this.moveTo(this.offset.x, this.offset.y);
+    }
+    isRtl(panel) {
+        const view = panel.ownerDocument.defaultView;
+        return (view?.getComputedStyle(panel).direction ?? 'ltr') === 'rtl';
+    }
+    panel() {
+        if (this.panelEl === undefined) {
+            this.panelEl = this.host.nativeElement.closest('.mk-overlay-panel');
+        }
+        return this.panelEl;
+    }
     /** Point the owning dialog panel's `aria-labelledby` at the title element. */
     wireLabelledBy() {
         const el = this.host.nativeElement;
@@ -1163,12 +1359,12 @@ class MkDialog {
         panel.setAttribute('aria-labelledby', titleEl.id);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkDialog, isStandalone: true, selector: "mk-dialog", inputs: { dialogTitle: { classPropertyName: "dialogTitle", publicName: "dialogTitle", isSignal: true, isRequired: false, transformFunction: null }, titleId: { classPropertyName: "titleId", publicName: "titleId", isSignal: true, isRequired: false, transformFunction: null }, hideClose: { classPropertyName: "hideClose", publicName: "hideClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "mk-dialog" }, ngImport: i0, template: "<header class=\"mk-dialog__header\">\n  <div class=\"mk-dialog__heading\">\n    <ng-content select=\"[mkDialogHeader], mk-dialog-title\" />\n    @if (dialogTitle(); as heading) {\n      <h2 class=\"mk-dialog__title\" [id]=\"titleId()\">{{ heading }}</h2>\n    }\n  </div>\n  @if (!hideClose()) {\n    <button\n      type=\"button\"\n      class=\"mk-dialog__close\"\n      [attr.aria-label]=\"i18n.close\"\n      (click)=\"close()\"\n    >\n      <svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" aria-hidden=\"true\" focusable=\"false\">\n        <path\n          d=\"M4 4l8 8M12 4l-8 8\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </button>\n  }\n</header>\n\n<div class=\"mk-dialog__body\">\n  <ng-content />\n</div>\n\n<footer class=\"mk-dialog__footer\">\n  <ng-content select=\"[mkDialogFooter]\" />\n</footer>\n", styles: ["@charset \"UTF-8\";.mk-dialog{display:flex;flex-direction:column;min-height:0;max-height:inherit;flex:1 1 auto;font-family:var(--mk-font-sans)}.mk-dialog__header{position:sticky;top:0;z-index:1;display:flex;align-items:flex-start;gap:var(--mk-space-3);flex-shrink:0;padding:var(--mk-space-4) var(--mk-space-5);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle);background-color:var(--mk-surface)}.mk-dialog__heading{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--mk-space-1)}.mk-dialog__title{margin:0;min-width:0;overflow-wrap:anywhere;font-size:var(--mk-font-size-lg);font-weight:var(--mk-font-weight-semibold);line-height:var(--mk-line-height-snug);color:var(--mk-text)}.mk-dialog__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--mk-space-5);font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-normal);color:var(--mk-text)}.mk-dialog__footer{position:sticky;bottom:0;flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;gap:var(--mk-space-2);padding:var(--mk-space-4) var(--mk-space-5);border-top:var(--mk-border-width) solid var(--mk-border-subtle);background-color:var(--mk-surface)}.mk-dialog__footer:empty{display:none}.mk-dialog__footer>*{display:flex;flex:1 1 auto;align-items:center;justify-content:flex-end;gap:var(--mk-space-2);flex-wrap:wrap}.mk-dialog__footer>[data-align=start]{justify-content:flex-start}.mk-dialog__footer>[data-align=center]{justify-content:center}.mk-dialog__footer>[data-align=between]{justify-content:space-between}.mk-dialog__close{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin:-4px -4px 0 0;padding:0;background:transparent;border:0;border-radius:var(--mk-radius-sm);color:var(--mk-text-muted);cursor:pointer;transition:color var(--mk-duration-fast) var(--mk-ease-standard),background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-dialog__close:hover{color:var(--mk-text);background-color:var(--mk-hover-overlay)}.mk-dialog__close:focus-visible{color:var(--mk-text);outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkDialog, isStandalone: true, selector: "mk-dialog", inputs: { dialogTitle: { classPropertyName: "dialogTitle", publicName: "dialogTitle", isSignal: true, isRequired: false, transformFunction: null }, titleId: { classPropertyName: "titleId", publicName: "titleId", isSignal: true, isRequired: false, transformFunction: null }, hideClose: { classPropertyName: "hideClose", publicName: "hideClose", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "mk-dialog" }, ngImport: i0, template: "<header\n  class=\"mk-dialog__header\"\n  [class.mk-dialog__header--draggable]=\"draggable()\"\n  (pointerdown)=\"onHeaderPointerDown($event)\"\n  (dblclick)=\"onHeaderDoubleClick($event)\"\n>\n  @if (draggable()) {\n    <button\n      type=\"button\"\n      class=\"mk-dialog__grip\"\n      [attr.aria-label]=\"i18n.dialogMove\"\n      [title]=\"i18n.dialogMove\"\n      (pointerdown)=\"onGripPointerDown($event)\"\n      (keydown)=\"onGripKeydown($event)\"\n    >\n      <svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" aria-hidden=\"true\" focusable=\"false\">\n        <circle cx=\"5.5\" cy=\"3.5\" r=\"1.3\" fill=\"currentColor\" />\n        <circle cx=\"10.5\" cy=\"3.5\" r=\"1.3\" fill=\"currentColor\" />\n        <circle cx=\"5.5\" cy=\"8\" r=\"1.3\" fill=\"currentColor\" />\n        <circle cx=\"10.5\" cy=\"8\" r=\"1.3\" fill=\"currentColor\" />\n        <circle cx=\"5.5\" cy=\"12.5\" r=\"1.3\" fill=\"currentColor\" />\n        <circle cx=\"10.5\" cy=\"12.5\" r=\"1.3\" fill=\"currentColor\" />\n      </svg>\n    </button>\n  }\n  <div class=\"mk-dialog__heading\">\n    <ng-content select=\"[mkDialogHeader], mk-dialog-title\" />\n    @if (dialogTitle(); as heading) {\n      <h2 class=\"mk-dialog__title\" [id]=\"titleId()\">{{ heading }}</h2>\n    }\n  </div>\n  @if (!hideClose()) {\n    <button\n      type=\"button\"\n      class=\"mk-dialog__close\"\n      [attr.aria-label]=\"i18n.close\"\n      (click)=\"close()\"\n    >\n      <svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" aria-hidden=\"true\" focusable=\"false\">\n        <path\n          d=\"M4 4l8 8M12 4l-8 8\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </button>\n  }\n</header>\n\n<div class=\"mk-dialog__body\">\n  <ng-content />\n</div>\n\n<footer class=\"mk-dialog__footer\">\n  <ng-content select=\"[mkDialogFooter]\" />\n</footer>\n\n@if (resizable()) {\n  <button\n    type=\"button\"\n    class=\"mk-dialog__resizer\"\n    [attr.aria-label]=\"i18n.dialogResize\"\n    [title]=\"i18n.dialogResize\"\n    (pointerdown)=\"onResizerPointerDown($event)\"\n    (keydown)=\"onResizerKeydown($event)\"\n  >\n    <svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" aria-hidden=\"true\" focusable=\"false\">\n      <path d=\"M14 8L8 14M14 12l-2 2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n    </svg>\n  </button>\n}\n", styles: ["@charset \"UTF-8\";.mk-dialog{display:flex;flex-direction:column;min-height:0;max-height:inherit;flex:1 1 auto;font-family:var(--mk-font-sans)}.mk-dialog__header{position:sticky;top:0;z-index:1;display:flex;align-items:flex-start;gap:var(--mk-space-3);flex-shrink:0;padding:var(--mk-space-4) var(--mk-space-5);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle);background-color:var(--mk-surface)}.mk-dialog__heading{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--mk-space-1)}.mk-dialog__title{margin:0;min-width:0;overflow-wrap:anywhere;font-size:var(--mk-font-size-lg);font-weight:var(--mk-font-weight-semibold);line-height:var(--mk-line-height-snug);color:var(--mk-text)}.mk-dialog__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--mk-space-5);font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-normal);color:var(--mk-text)}.mk-dialog__footer{position:sticky;bottom:0;flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;gap:var(--mk-space-2);padding:var(--mk-space-4) var(--mk-space-5);border-top:var(--mk-border-width) solid var(--mk-border-subtle);background-color:var(--mk-surface)}.mk-dialog__footer:empty{display:none}.mk-dialog__footer>*{display:flex;flex:1 1 auto;align-items:center;justify-content:flex-end;gap:var(--mk-space-2);flex-wrap:wrap}.mk-dialog__footer>[data-align=start]{justify-content:flex-start}.mk-dialog__footer>[data-align=center]{justify-content:center}.mk-dialog__footer>[data-align=between]{justify-content:space-between}.mk-dialog__close{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin:-4px -4px 0 0;padding:0;background:transparent;border:0;border-radius:var(--mk-radius-sm);color:var(--mk-text-muted);cursor:pointer;transition:color var(--mk-duration-fast) var(--mk-ease-standard),background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-dialog__close:hover{color:var(--mk-text);background-color:var(--mk-hover-overlay)}.mk-dialog__close:focus-visible{color:var(--mk-text);outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-dialog__header--draggable{cursor:move;touch-action:none;-webkit-user-select:none;user-select:none}.mk-dialog__grip,.mk-dialog__resizer{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:var(--mk-text-muted);cursor:move;touch-action:none}.mk-dialog__grip:hover,.mk-dialog__resizer:hover{color:var(--mk-text)}.mk-dialog__grip:focus-visible,.mk-dialog__resizer:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-dialog__grip{flex:none;width:1.5rem;height:1.5rem;margin-inline-start:calc(-1 * var(--mk-space-2));border-radius:var(--mk-radius-sm)}.mk-dialog__resizer{position:absolute;inset-inline-end:0;bottom:0;width:1.25rem;height:1.25rem;cursor:nwse-resize;border-start-start-radius:var(--mk-radius-sm)}[dir=rtl] .mk-dialog__resizer,.mk-dialog-panel:dir(rtl) .mk-dialog__resizer{cursor:nesw-resize;transform:scaleX(-1)}.mk-dialog-panel--moved{animation:none}.mk-dialog-panel--dragging{transition:none;-webkit-user-select:none;user-select:none}.mk-dialog-panel--resizable .mk-dialog{height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDialog, decorators: [{
             type: Component,
-            args: [{ selector: 'mk-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'mk-dialog' }, template: "<header class=\"mk-dialog__header\">\n  <div class=\"mk-dialog__heading\">\n    <ng-content select=\"[mkDialogHeader], mk-dialog-title\" />\n    @if (dialogTitle(); as heading) {\n      <h2 class=\"mk-dialog__title\" [id]=\"titleId()\">{{ heading }}</h2>\n    }\n  </div>\n  @if (!hideClose()) {\n    <button\n      type=\"button\"\n      class=\"mk-dialog__close\"\n      [attr.aria-label]=\"i18n.close\"\n      (click)=\"close()\"\n    >\n      <svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" aria-hidden=\"true\" focusable=\"false\">\n        <path\n          d=\"M4 4l8 8M12 4l-8 8\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </button>\n  }\n</header>\n\n<div class=\"mk-dialog__body\">\n  <ng-content />\n</div>\n\n<footer class=\"mk-dialog__footer\">\n  <ng-content select=\"[mkDialogFooter]\" />\n</footer>\n", styles: ["@charset \"UTF-8\";.mk-dialog{display:flex;flex-direction:column;min-height:0;max-height:inherit;flex:1 1 auto;font-family:var(--mk-font-sans)}.mk-dialog__header{position:sticky;top:0;z-index:1;display:flex;align-items:flex-start;gap:var(--mk-space-3);flex-shrink:0;padding:var(--mk-space-4) var(--mk-space-5);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle);background-color:var(--mk-surface)}.mk-dialog__heading{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--mk-space-1)}.mk-dialog__title{margin:0;min-width:0;overflow-wrap:anywhere;font-size:var(--mk-font-size-lg);font-weight:var(--mk-font-weight-semibold);line-height:var(--mk-line-height-snug);color:var(--mk-text)}.mk-dialog__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--mk-space-5);font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-normal);color:var(--mk-text)}.mk-dialog__footer{position:sticky;bottom:0;flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;gap:var(--mk-space-2);padding:var(--mk-space-4) var(--mk-space-5);border-top:var(--mk-border-width) solid var(--mk-border-subtle);background-color:var(--mk-surface)}.mk-dialog__footer:empty{display:none}.mk-dialog__footer>*{display:flex;flex:1 1 auto;align-items:center;justify-content:flex-end;gap:var(--mk-space-2);flex-wrap:wrap}.mk-dialog__footer>[data-align=start]{justify-content:flex-start}.mk-dialog__footer>[data-align=center]{justify-content:center}.mk-dialog__footer>[data-align=between]{justify-content:space-between}.mk-dialog__close{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin:-4px -4px 0 0;padding:0;background:transparent;border:0;border-radius:var(--mk-radius-sm);color:var(--mk-text-muted);cursor:pointer;transition:color var(--mk-duration-fast) var(--mk-ease-standard),background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-dialog__close:hover{color:var(--mk-text);background-color:var(--mk-hover-overlay)}.mk-dialog__close:focus-visible{color:var(--mk-text);outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { dialogTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogTitle", required: false }] }], titleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleId", required: false }] }], hideClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideClose", required: false }] }] } });
+            args: [{ selector: 'mk-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'mk-dialog' }, template: "<header\n  class=\"mk-dialog__header\"\n  [class.mk-dialog__header--draggable]=\"draggable()\"\n  (pointerdown)=\"onHeaderPointerDown($event)\"\n  (dblclick)=\"onHeaderDoubleClick($event)\"\n>\n  @if (draggable()) {\n    <button\n      type=\"button\"\n      class=\"mk-dialog__grip\"\n      [attr.aria-label]=\"i18n.dialogMove\"\n      [title]=\"i18n.dialogMove\"\n      (pointerdown)=\"onGripPointerDown($event)\"\n      (keydown)=\"onGripKeydown($event)\"\n    >\n      <svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" aria-hidden=\"true\" focusable=\"false\">\n        <circle cx=\"5.5\" cy=\"3.5\" r=\"1.3\" fill=\"currentColor\" />\n        <circle cx=\"10.5\" cy=\"3.5\" r=\"1.3\" fill=\"currentColor\" />\n        <circle cx=\"5.5\" cy=\"8\" r=\"1.3\" fill=\"currentColor\" />\n        <circle cx=\"10.5\" cy=\"8\" r=\"1.3\" fill=\"currentColor\" />\n        <circle cx=\"5.5\" cy=\"12.5\" r=\"1.3\" fill=\"currentColor\" />\n        <circle cx=\"10.5\" cy=\"12.5\" r=\"1.3\" fill=\"currentColor\" />\n      </svg>\n    </button>\n  }\n  <div class=\"mk-dialog__heading\">\n    <ng-content select=\"[mkDialogHeader], mk-dialog-title\" />\n    @if (dialogTitle(); as heading) {\n      <h2 class=\"mk-dialog__title\" [id]=\"titleId()\">{{ heading }}</h2>\n    }\n  </div>\n  @if (!hideClose()) {\n    <button\n      type=\"button\"\n      class=\"mk-dialog__close\"\n      [attr.aria-label]=\"i18n.close\"\n      (click)=\"close()\"\n    >\n      <svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" aria-hidden=\"true\" focusable=\"false\">\n        <path\n          d=\"M4 4l8 8M12 4l-8 8\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </button>\n  }\n</header>\n\n<div class=\"mk-dialog__body\">\n  <ng-content />\n</div>\n\n<footer class=\"mk-dialog__footer\">\n  <ng-content select=\"[mkDialogFooter]\" />\n</footer>\n\n@if (resizable()) {\n  <button\n    type=\"button\"\n    class=\"mk-dialog__resizer\"\n    [attr.aria-label]=\"i18n.dialogResize\"\n    [title]=\"i18n.dialogResize\"\n    (pointerdown)=\"onResizerPointerDown($event)\"\n    (keydown)=\"onResizerKeydown($event)\"\n  >\n    <svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" aria-hidden=\"true\" focusable=\"false\">\n      <path d=\"M14 8L8 14M14 12l-2 2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n    </svg>\n  </button>\n}\n", styles: ["@charset \"UTF-8\";.mk-dialog{display:flex;flex-direction:column;min-height:0;max-height:inherit;flex:1 1 auto;font-family:var(--mk-font-sans)}.mk-dialog__header{position:sticky;top:0;z-index:1;display:flex;align-items:flex-start;gap:var(--mk-space-3);flex-shrink:0;padding:var(--mk-space-4) var(--mk-space-5);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle);background-color:var(--mk-surface)}.mk-dialog__heading{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--mk-space-1)}.mk-dialog__title{margin:0;min-width:0;overflow-wrap:anywhere;font-size:var(--mk-font-size-lg);font-weight:var(--mk-font-weight-semibold);line-height:var(--mk-line-height-snug);color:var(--mk-text)}.mk-dialog__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--mk-space-5);font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-normal);color:var(--mk-text)}.mk-dialog__footer{position:sticky;bottom:0;flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;gap:var(--mk-space-2);padding:var(--mk-space-4) var(--mk-space-5);border-top:var(--mk-border-width) solid var(--mk-border-subtle);background-color:var(--mk-surface)}.mk-dialog__footer:empty{display:none}.mk-dialog__footer>*{display:flex;flex:1 1 auto;align-items:center;justify-content:flex-end;gap:var(--mk-space-2);flex-wrap:wrap}.mk-dialog__footer>[data-align=start]{justify-content:flex-start}.mk-dialog__footer>[data-align=center]{justify-content:center}.mk-dialog__footer>[data-align=between]{justify-content:space-between}.mk-dialog__close{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin:-4px -4px 0 0;padding:0;background:transparent;border:0;border-radius:var(--mk-radius-sm);color:var(--mk-text-muted);cursor:pointer;transition:color var(--mk-duration-fast) var(--mk-ease-standard),background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-dialog__close:hover{color:var(--mk-text);background-color:var(--mk-hover-overlay)}.mk-dialog__close:focus-visible{color:var(--mk-text);outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-dialog__header--draggable{cursor:move;touch-action:none;-webkit-user-select:none;user-select:none}.mk-dialog__grip,.mk-dialog__resizer{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:var(--mk-text-muted);cursor:move;touch-action:none}.mk-dialog__grip:hover,.mk-dialog__resizer:hover{color:var(--mk-text)}.mk-dialog__grip:focus-visible,.mk-dialog__resizer:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-dialog__grip{flex:none;width:1.5rem;height:1.5rem;margin-inline-start:calc(-1 * var(--mk-space-2));border-radius:var(--mk-radius-sm)}.mk-dialog__resizer{position:absolute;inset-inline-end:0;bottom:0;width:1.25rem;height:1.25rem;cursor:nwse-resize;border-start-start-radius:var(--mk-radius-sm)}[dir=rtl] .mk-dialog__resizer,.mk-dialog-panel:dir(rtl) .mk-dialog__resizer{cursor:nesw-resize;transform:scaleX(-1)}.mk-dialog-panel--moved{animation:none}.mk-dialog-panel--dragging{transition:none;-webkit-user-select:none;user-select:none}.mk-dialog-panel--resizable .mk-dialog{height:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { dialogTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogTitle", required: false }] }], titleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleId", required: false }] }], hideClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideClose", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }] } });
 
 /**
  * Internal component backing `MkDialogService.confirm`. Renders a title,
@@ -1193,7 +1389,7 @@ class MkConfirmDialog {
         this.ref.close(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkConfirmDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkConfirmDialog, isStandalone: true, selector: "mk-confirm-dialog", ngImport: i0, template: "<mk-dialog [dialogTitle]=\"data.title\" hideClose>\n  <div class=\"mk-confirm-dialog__body\">\n    @if (data.icon; as icon) {\n      <mk-icon\n        class=\"mk-confirm-dialog__icon\"\n        [class.mk-confirm-dialog__icon--danger]=\"data.tone === 'danger'\"\n        [name]=\"icon\"\n        [size]=\"22\"\n      />\n    }\n    <p class=\"mk-confirm-dialog__message\">{{ data.message }}</p>\n  </div>\n\n  <div mkDialogFooter>\n    @if (!data.hideCancel) {\n      <button mkButton variant=\"ghost\" tone=\"neutral\" (click)=\"cancel()\">\n        {{ cancelText() }}\n      </button>\n    }\n    <button mkButton [tone]=\"confirmTone()\" (click)=\"confirm()\">\n      {{ confirmText() }}\n    </button>\n  </div>\n</mk-dialog>\n", styles: [".mk-confirm-dialog__message{margin:0;color:var(--mk-text-muted);font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-relaxed)}.mk-confirm-dialog__body{display:flex;align-items:flex-start;gap:var(--mk-space-3)}.mk-confirm-dialog__icon{flex-shrink:0;margin-top:.125rem;color:var(--mk-text-muted)}.mk-confirm-dialog__icon--danger{color:var(--mk-danger-text)}\n"], dependencies: [{ kind: "component", type: MkDialog, selector: "mk-dialog", inputs: ["dialogTitle", "titleId", "hideClose"] }, { kind: "component", type: MkButton, selector: "button[mkButton], a[mkButton]", inputs: ["variant", "tone", "size", "loading", "fullWidth", "iconOnly", "disabled"] }, { kind: "component", type: MkIcon, selector: "mk-icon", inputs: ["name", "size", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkConfirmDialog, isStandalone: true, selector: "mk-confirm-dialog", ngImport: i0, template: "<mk-dialog [dialogTitle]=\"data.title\" hideClose>\n  <div class=\"mk-confirm-dialog__body\">\n    @if (data.icon; as icon) {\n      <mk-icon\n        class=\"mk-confirm-dialog__icon\"\n        [class.mk-confirm-dialog__icon--danger]=\"data.tone === 'danger'\"\n        [name]=\"icon\"\n        [size]=\"22\"\n      />\n    }\n    <p class=\"mk-confirm-dialog__message\">{{ data.message }}</p>\n  </div>\n\n  <div mkDialogFooter>\n    @if (!data.hideCancel) {\n      <button mkButton variant=\"ghost\" tone=\"neutral\" (click)=\"cancel()\">\n        {{ cancelText() }}\n      </button>\n    }\n    <button mkButton [tone]=\"confirmTone()\" (click)=\"confirm()\">\n      {{ confirmText() }}\n    </button>\n  </div>\n</mk-dialog>\n", styles: [".mk-confirm-dialog__message{margin:0;color:var(--mk-text-muted);font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-relaxed)}.mk-confirm-dialog__body{display:flex;align-items:flex-start;gap:var(--mk-space-3)}.mk-confirm-dialog__icon{flex-shrink:0;margin-top:.125rem;color:var(--mk-text-muted)}.mk-confirm-dialog__icon--danger{color:var(--mk-danger-text)}\n"], dependencies: [{ kind: "component", type: MkDialog, selector: "mk-dialog", inputs: ["dialogTitle", "titleId", "hideClose", "draggable", "resizable"] }, { kind: "component", type: MkButton, selector: "button[mkButton], a[mkButton]", inputs: ["variant", "tone", "size", "loading", "fullWidth", "iconOnly", "disabled"] }, { kind: "component", type: MkIcon, selector: "mk-icon", inputs: ["name", "size", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkConfirmDialog, decorators: [{
             type: Component,
@@ -1233,7 +1429,7 @@ class MkPromptDialog {
         this.ref.close(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkPromptDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkPromptDialog, isStandalone: true, selector: "mk-prompt-dialog", viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<mk-dialog [dialogTitle]=\"data.title\" hideClose>\n  @if (data.message) {\n    <p class=\"mk-confirm-dialog__message\">{{ data.message }}</p>\n  }\n\n  <mk-form-field [label]=\"data.label ?? ''\">\n    <input\n      #input\n      mkInput\n      [attr.type]=\"data.inputType ?? 'text'\"\n      [value]=\"value()\"\n      [attr.placeholder]=\"data.placeholder ?? null\"\n      [attr.required]=\"data.required ? '' : null\"\n      (input)=\"onInput($event)\"\n      (keydown.enter)=\"submit()\"\n    />\n  </mk-form-field>\n\n  <div mkDialogFooter>\n    <button mkButton variant=\"ghost\" tone=\"neutral\" (click)=\"cancel()\">\n      {{ cancelText() }}\n    </button>\n    <button mkButton (click)=\"submit()\" [disabled]=\"!canConfirm()\">\n      {{ confirmText() }}\n    </button>\n  </div>\n</mk-dialog>\n", styles: [".mk-confirm-dialog__message{margin:0;color:var(--mk-text-muted);font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-relaxed)}.mk-confirm-dialog__body{display:flex;align-items:flex-start;gap:var(--mk-space-3)}.mk-confirm-dialog__icon{flex-shrink:0;margin-top:.125rem;color:var(--mk-text-muted)}.mk-confirm-dialog__icon--danger{color:var(--mk-danger-text)}\n"], dependencies: [{ kind: "component", type: MkDialog, selector: "mk-dialog", inputs: ["dialogTitle", "titleId", "hideClose"] }, { kind: "component", type: MkButton, selector: "button[mkButton], a[mkButton]", inputs: ["variant", "tone", "size", "loading", "fullWidth", "iconOnly", "disabled"] }, { kind: "component", type: MkInput, selector: "input[mkInput], textarea[mkInput]", inputs: ["size", "invalid"] }, { kind: "component", type: MkFormField, selector: "mk-form-field", inputs: ["label", "hint", "error", "errorMessages", "errorOn", "required", "disabled", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkPromptDialog, isStandalone: true, selector: "mk-prompt-dialog", viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<mk-dialog [dialogTitle]=\"data.title\" hideClose>\n  @if (data.message) {\n    <p class=\"mk-confirm-dialog__message\">{{ data.message }}</p>\n  }\n\n  <mk-form-field [label]=\"data.label ?? ''\">\n    <input\n      #input\n      mkInput\n      [attr.type]=\"data.inputType ?? 'text'\"\n      [value]=\"value()\"\n      [attr.placeholder]=\"data.placeholder ?? null\"\n      [attr.required]=\"data.required ? '' : null\"\n      (input)=\"onInput($event)\"\n      (keydown.enter)=\"submit()\"\n    />\n  </mk-form-field>\n\n  <div mkDialogFooter>\n    <button mkButton variant=\"ghost\" tone=\"neutral\" (click)=\"cancel()\">\n      {{ cancelText() }}\n    </button>\n    <button mkButton (click)=\"submit()\" [disabled]=\"!canConfirm()\">\n      {{ confirmText() }}\n    </button>\n  </div>\n</mk-dialog>\n", styles: [".mk-confirm-dialog__message{margin:0;color:var(--mk-text-muted);font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-relaxed)}.mk-confirm-dialog__body{display:flex;align-items:flex-start;gap:var(--mk-space-3)}.mk-confirm-dialog__icon{flex-shrink:0;margin-top:.125rem;color:var(--mk-text-muted)}.mk-confirm-dialog__icon--danger{color:var(--mk-danger-text)}\n"], dependencies: [{ kind: "component", type: MkDialog, selector: "mk-dialog", inputs: ["dialogTitle", "titleId", "hideClose", "draggable", "resizable"] }, { kind: "component", type: MkButton, selector: "button[mkButton], a[mkButton]", inputs: ["variant", "tone", "size", "loading", "fullWidth", "iconOnly", "disabled"] }, { kind: "component", type: MkInput, selector: "input[mkInput], textarea[mkInput]", inputs: ["size", "invalid"] }, { kind: "component", type: MkFormField, selector: "mk-form-field", inputs: ["label", "hint", "error", "errorMessages", "errorOn", "required", "disabled", "size", "labelPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkPromptDialog, decorators: [{
             type: Component,
@@ -2413,6 +2609,202 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
+/**
+ * The translucent panel with a spinner that `mkBlockUi` and
+ * `MkBlockUiService` drop over a region or the page.
+ */
+class MkBlockUiOverlay {
+    i18n = inject(MK_I18N);
+    message = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBlockUiOverlay, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkBlockUiOverlay, isStandalone: true, selector: "mk-block-ui-overlay", host: { attributes: { "role": "status", "aria-live": "polite" }, classAttribute: "mk-block-ui" }, ngImport: i0, template: `
+    <div class="mk-block-ui__panel">
+      <mk-spinner [label]="message() || i18n.loading" />
+      @if (message()) {
+        <span class="mk-block-ui__message">{{ message() }}</span>
+      }
+    </div>
+  `, isInline: true, styles: [":host{position:absolute;inset:0;z-index:var(--mk-z-sticky, 10);display:flex;align-items:center;justify-content:center;background:var(--mk-block-ui-scrim, color-mix(in srgb, var(--mk-surface) 70%, transparent));-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);border-radius:inherit;cursor:progress;animation:mk-block-ui-in var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-block-ui--page){position:fixed;z-index:var(--mk-z-overlay, 1000);border-radius:0}.mk-block-ui__panel{display:flex;flex-direction:column;align-items:center;gap:var(--mk-space-3);padding:var(--mk-space-4) var(--mk-space-5);border-radius:var(--mk-radius-lg);background:var(--mk-surface);box-shadow:var(--mk-shadow-md);color:var(--mk-text);font-size:var(--mk-font-size-sm)}@keyframes mk-block-ui-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){:host{animation:none;-webkit-backdrop-filter:none;backdrop-filter:none}}\n"], dependencies: [{ kind: "component", type: MkSpinner, selector: "mk-spinner", inputs: ["size", "tone", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBlockUiOverlay, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-block-ui-overlay', template: `
+    <div class="mk-block-ui__panel">
+      <mk-spinner [label]="message() || i18n.loading" />
+      @if (message()) {
+        <span class="mk-block-ui__message">{{ message() }}</span>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MkSpinner], host: { class: 'mk-block-ui', role: 'status', 'aria-live': 'polite' }, styles: [":host{position:absolute;inset:0;z-index:var(--mk-z-sticky, 10);display:flex;align-items:center;justify-content:center;background:var(--mk-block-ui-scrim, color-mix(in srgb, var(--mk-surface) 70%, transparent));-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);border-radius:inherit;cursor:progress;animation:mk-block-ui-in var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-block-ui--page){position:fixed;z-index:var(--mk-z-overlay, 1000);border-radius:0}.mk-block-ui__panel{display:flex;flex-direction:column;align-items:center;gap:var(--mk-space-3);padding:var(--mk-space-4) var(--mk-space-5);border-radius:var(--mk-radius-lg);background:var(--mk-surface);box-shadow:var(--mk-shadow-md);color:var(--mk-text);font-size:var(--mk-font-size-sm)}@keyframes mk-block-ui-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){:host{animation:none;-webkit-backdrop-filter:none;backdrop-filter:none}}\n"] }]
+        }] });
+/** Mount an overlay into `host`, making the host a positioning context if it has none. */
+function mountOverlay(document, injector, appRef, host, message, page) {
+    const ref = createComponent(MkBlockUiOverlay, { environmentInjector: injector });
+    const el = ref.location.nativeElement;
+    if (page)
+        el.classList.add('mk-block-ui--page');
+    ref.instance.message.set(message);
+    const view = document.defaultView;
+    const current = view?.getComputedStyle(host).position ?? '';
+    const positioned = !page && current !== '' && current !== 'static';
+    const addedPosition = !page && !positioned;
+    if (addedPosition)
+        host.style.position = 'relative';
+    // Everything already inside becomes inert: no clicks, no Tab stops, no
+    // screen-reader traversal — only the status overlay is reachable.
+    const inerted = [];
+    for (const child of Array.from(host.children)) {
+        if (!child.hasAttribute('inert')) {
+            child.setAttribute('inert', '');
+            inerted.push(child);
+        }
+    }
+    host.appendChild(el);
+    host.setAttribute('aria-busy', 'true');
+    // Attach so later `message` updates render with the app's change detection.
+    appRef.attachView(ref.hostView);
+    ref.changeDetectorRef.detectChanges();
+    return {
+        ref,
+        dispose: () => {
+            appRef.detachView(ref.hostView);
+            ref.destroy();
+            el.remove();
+            for (const child of inerted)
+                child.removeAttribute('inert');
+            host.removeAttribute('aria-busy');
+            if (addedPosition)
+                host.style.position = '';
+        },
+    };
+}
+/**
+ * Block UI — cover the host element with a translucent panel and spinner
+ * while something loads, so its contents can neither be read nor operated:
+ * a card refreshing, a form submitting, a table re-fetching.
+ *
+ * Children get `inert` (no clicks, no Tab stops) and the host `aria-busy`.
+ * `mkBlockUiDelay` (ms) holds the overlay back for quick operations so the
+ * screen does not flash.
+ *
+ * ```html
+ * <mk-card [mkBlockUi]="saving()" mkBlockUiMessage="Saving…">…</mk-card>
+ * <form [mkBlockUi]="submitting()" [mkBlockUiDelay]="300">…</form>
+ * ```
+ */
+class MkBlockUi {
+    host = inject(ElementRef);
+    document = inject(DOCUMENT);
+    injector = inject(EnvironmentInjector);
+    appRef = inject(ApplicationRef);
+    /** Block while `true`. */
+    mkBlockUi = input(false, { ...(ngDevMode ? { debugName: "mkBlockUi" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Text under the spinner (also its accessible label). */
+    mkBlockUiMessage = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mkBlockUiMessage" }] : /* istanbul ignore next */ []));
+    /** Wait this many ms before showing, to avoid a flash on fast operations. */
+    mkBlockUiDelay = input(0, { ...(ngDevMode ? { debugName: "mkBlockUiDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    mounted = null;
+    timer = null;
+    constructor() {
+        effect(() => {
+            const on = this.mkBlockUi();
+            const message = this.mkBlockUiMessage();
+            const delay = this.mkBlockUiDelay();
+            this.cancelTimer();
+            if (!on) {
+                this.unmount();
+                return;
+            }
+            if (this.mounted) {
+                this.mounted.ref.instance.message.set(message);
+                return;
+            }
+            if (delay > 0)
+                this.timer = setTimeout(() => this.mount(message), delay);
+            else
+                this.mount(message);
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.cancelTimer();
+            this.unmount();
+        });
+    }
+    mount(message) {
+        this.timer = null;
+        this.mounted = mountOverlay(this.document, this.injector, this.appRef, this.host.nativeElement, message, false);
+    }
+    unmount() {
+        this.mounted?.dispose();
+        this.mounted = null;
+    }
+    cancelTimer() {
+        if (this.timer)
+            clearTimeout(this.timer);
+        this.timer = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBlockUi, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MkBlockUi, isStandalone: true, selector: "[mkBlockUi]", inputs: { mkBlockUi: { classPropertyName: "mkBlockUi", publicName: "mkBlockUi", isSignal: true, isRequired: false, transformFunction: null }, mkBlockUiMessage: { classPropertyName: "mkBlockUiMessage", publicName: "mkBlockUiMessage", isSignal: true, isRequired: false, transformFunction: null }, mkBlockUiDelay: { classPropertyName: "mkBlockUiDelay", publicName: "mkBlockUiDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.mk-block-ui-host": "mkBlockUi()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBlockUi, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mkBlockUi]',
+                    host: { '[class.mk-block-ui-host]': 'mkBlockUi()' },
+                }]
+        }], ctorParameters: () => [], propDecorators: { mkBlockUi: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkBlockUi", required: false }] }], mkBlockUiMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkBlockUiMessage", required: false }] }], mkBlockUiDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkBlockUiDelay", required: false }] }] } });
+/**
+ * Block the whole page. Reference-counted: every `block()` returns a release
+ * function, and the overlay disappears once all of them have been called.
+ *
+ * ```ts
+ * const release = this.blockUi.block('Exporting…');
+ * try { await this.api.export(); } finally { release(); }
+ * ```
+ */
+class MkBlockUiService {
+    document = inject(DOCUMENT);
+    injector = inject(EnvironmentInjector);
+    appRef = inject(ApplicationRef);
+    mounted = null;
+    _count = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_count" }] : /* istanbul ignore next */ []));
+    /** Number of active blocks. */
+    count = this._count.asReadonly();
+    /** Show the page overlay (or update its message); call the returned function to release. */
+    block(message = '') {
+        if (typeof this.document.body === 'undefined')
+            return () => { };
+        this._count.update((n) => n + 1);
+        if (this.mounted)
+            this.mounted.ref.instance.message.set(message);
+        else
+            this.mounted = mountOverlay(this.document, this.injector, this.appRef, this.document.body, message, true);
+        let released = false;
+        return () => {
+            if (released)
+                return;
+            released = true;
+            this._count.update((n) => Math.max(0, n - 1));
+            if (this._count() === 0) {
+                this.mounted?.dispose();
+                this.mounted = null;
+            }
+        };
+    }
+    /** True while the page is blocked. */
+    isBlocked() {
+        return this._count() > 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBlockUiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBlockUiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBlockUiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 /**
  * Feedback & Overlay component group barrel.
  * Re-exports every public symbol (components, directives, services, types).
@@ -2422,5 +2814,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { MK_TOUR_DATA, MkAlert, MkBanner, MkBottomSheet, MkBottomSheetService, MkConfirmDialog, MkDialog, MkDialogService, MkDialogTitle, MkHovercard, MkHovercardTrigger, MkLoadingBar, MkLoadingBarService, MkNotificationCenter, MkPopconfirm, MkPopconfirmTrigger, MkPopover, MkPopoverTrigger, MkPromptDialog, MkResult, MkSnackbar, MkSnackbarContainer, MkSnackbarRef, MkSnackbarService, MkToast, MkToastContainer, MkToastService, MkTooltip, MkTooltipPanel, MkTourPopup, MkTourService };
+export { MK_TOUR_DATA, MkAlert, MkBanner, MkBlockUi, MkBlockUiOverlay, MkBlockUiService, MkBottomSheet, MkBottomSheetService, MkConfirmDialog, MkDialog, MkDialogService, MkDialogTitle, MkHovercard, MkHovercardTrigger, MkLoadingBar, MkLoadingBarService, MkNotificationCenter, MkPopconfirm, MkPopconfirmTrigger, MkPopover, MkPopoverTrigger, MkPromptDialog, MkResult, MkSnackbar, MkSnackbarContainer, MkSnackbarRef, MkSnackbarService, MkToast, MkToastContainer, MkToastService, MkTooltip, MkTooltipPanel, MkTourPopup, MkTourService };
 //# sourceMappingURL=mk-kit-ui-feedback.mjs.map