@mk-kit/ui 0.34.0

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

@@ -0,0 +1,2426 @@
+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 { 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 { MkIcon } from '@mk-kit/ui/icon';
+import { MkInput, MkFormField } from '@mk-kit/ui/forms';
+
+/**
+ * Alert — an inline banner that communicates a contextual status message.
+ * Fully themed via `--mk-*` tokens using the same tone/local-var pattern as
+ * the Button. Danger/warning alerts use `role="alert"` (assertive), all other
+ * tones use `role="status"` (polite).
+ *
+ * ```html
+ * <mk-alert tone="success" title="Saved">Your changes were saved.</mk-alert>
+ *
+ * <mk-alert tone="danger" variant="outline" dismissible (dismissed)="hide()">
+ *   <svg mkAlertIcon>…</svg>
+ *   Could not reach the server.
+ * </mk-alert>
+ * ```
+ */
+class MkAlert {
+    /** Localised strings (override globally via `provideMkI18n`). */
+    i18n = inject(MK_I18N);
+    /** Semantic color tone. */
+    tone = input('info', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /** Visual treatment. */
+    variant = input('soft', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Optional bold heading rendered above the message. */
+    title = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
+    /** When set, renders a keyboard-accessible close button that emits `dismissed`. */
+    dismissible = input(false, { ...(ngDevMode ? { debugName: "dismissible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Emitted when the user activates the close button. */
+    dismissed = output();
+    /** Assertive roles for urgent tones, polite `status` otherwise. */
+    role = computed(() => this.tone() === 'danger' || this.tone() === 'warning' ? 'alert' : 'status', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    onDismiss() {
+        this.dismissed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkAlert, isStandalone: true, selector: "mk-alert", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "attr.data-tone": "tone()", "class.mk-alert--soft": "variant() === 'soft'", "class.mk-alert--solid": "variant() === 'solid'", "class.mk-alert--outline": "variant() === 'outline'", "attr.role": "role()" }, classAttribute: "mk-alert" }, ngImport: i0, template: "<span class=\"mk-alert__icon\" aria-hidden=\"true\">\n  <ng-content select=\"[mkAlertIcon]\" />\n</span>\n\n<div class=\"mk-alert__content\">\n  @if (title(); as heading) {\n    <p class=\"mk-alert__title\">{{ heading }}</p>\n  }\n  <div class=\"mk-alert__message\"><ng-content /></div>\n</div>\n\n@if (dismissible()) {\n  <button\n    type=\"button\"\n    class=\"mk-alert__close\"\n    [attr.aria-label]=\"i18n.dismiss\"\n    (click)=\"onDismiss()\"\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", styles: ["@charset \"UTF-8\";:host{--_main: var(--mk-info);--_hover: var(--mk-info-hover);--_contrast: var(--mk-info-contrast);--_subtle: var(--mk-info-subtle);--_subtle-text: var(--mk-info-subtle-text);display:flex;align-items:flex-start;gap:var(--mk-space-3);padding:var(--mk-space-3) var(--mk-space-4);border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);font-size:var(--mk-font-size-sm);line-height:var(--mk-line-height-normal);color:var(--mk-text)}:host([data-tone=info]){--_main: var(--mk-info);--_hover: var(--mk-info-hover);--_contrast: var(--mk-info-contrast);--_subtle: var(--mk-info-subtle);--_subtle-text: var(--mk-info-subtle-text)}:host([data-tone=success]){--_main: var(--mk-success);--_hover: var(--mk-success-hover);--_contrast: var(--mk-success-contrast);--_subtle: var(--mk-success-subtle);--_subtle-text: var(--mk-success-subtle-text)}:host([data-tone=warning]){--_main: var(--mk-warning);--_hover: var(--mk-warning-hover);--_contrast: var(--mk-warning-contrast);--_subtle: var(--mk-warning-subtle);--_subtle-text: var(--mk-warning-subtle-text)}:host([data-tone=danger]){--_main: var(--mk-danger);--_hover: var(--mk-danger-hover);--_contrast: var(--mk-danger-contrast);--_subtle: var(--mk-danger-subtle);--_subtle-text: var(--mk-danger-subtle-text)}:host([data-tone=neutral]){--_main: var(--mk-surface-inverse);--_hover: var(--mk-surface-inverse);--_contrast: var(--mk-text-inverse);--_subtle: var(--mk-neutral-subtle);--_subtle-text: var(--mk-neutral-subtle-text)}:host(.mk-alert--soft){background-color:var(--_subtle);border-color:color-mix(in srgb,var(--_main) 22%,transparent);color:var(--_subtle-text)}:host(.mk-alert--outline){background-color:var(--mk-surface);border-color:color-mix(in srgb,var(--_main) 42%,var(--mk-border-strong));color:var(--mk-text)}:host(.mk-alert--solid){background-color:var(--_main);border-color:var(--_main);color:var(--_contrast)}.mk-alert__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem;margin-top:1px;color:var(--_main)}:host(.mk-alert--solid) .mk-alert__icon{color:currentColor}.mk-alert__icon:empty{display:none}.mk-alert__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--mk-space-1)}.mk-alert__title{margin:0;font-weight:var(--mk-font-weight-semibold);font-size:var(--mk-font-size-sm);line-height:var(--mk-line-height-snug)}.mk-alert__message{margin:0}.mk-alert__close{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin:-2px calc(var(--mk-space-1) * -1) 0 0;padding:0;background:transparent;border:0;border-radius:var(--mk-radius-sm);color:inherit;cursor:pointer;opacity:.7;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard),background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-alert__close:hover{opacity:1;background-image:linear-gradient(var(--mk-hover-overlay),var(--mk-hover-overlay))}.mk-alert__close:focus-visible{opacity:1;outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkAlert, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-alert', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-alert',
+                        '[attr.data-tone]': 'tone()',
+                        '[class.mk-alert--soft]': "variant() === 'soft'",
+                        '[class.mk-alert--solid]': "variant() === 'solid'",
+                        '[class.mk-alert--outline]': "variant() === 'outline'",
+                        '[attr.role]': 'role()',
+                    }, template: "<span class=\"mk-alert__icon\" aria-hidden=\"true\">\n  <ng-content select=\"[mkAlertIcon]\" />\n</span>\n\n<div class=\"mk-alert__content\">\n  @if (title(); as heading) {\n    <p class=\"mk-alert__title\">{{ heading }}</p>\n  }\n  <div class=\"mk-alert__message\"><ng-content /></div>\n</div>\n\n@if (dismissible()) {\n  <button\n    type=\"button\"\n    class=\"mk-alert__close\"\n    [attr.aria-label]=\"i18n.dismiss\"\n    (click)=\"onDismiss()\"\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", styles: ["@charset \"UTF-8\";:host{--_main: var(--mk-info);--_hover: var(--mk-info-hover);--_contrast: var(--mk-info-contrast);--_subtle: var(--mk-info-subtle);--_subtle-text: var(--mk-info-subtle-text);display:flex;align-items:flex-start;gap:var(--mk-space-3);padding:var(--mk-space-3) var(--mk-space-4);border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);font-size:var(--mk-font-size-sm);line-height:var(--mk-line-height-normal);color:var(--mk-text)}:host([data-tone=info]){--_main: var(--mk-info);--_hover: var(--mk-info-hover);--_contrast: var(--mk-info-contrast);--_subtle: var(--mk-info-subtle);--_subtle-text: var(--mk-info-subtle-text)}:host([data-tone=success]){--_main: var(--mk-success);--_hover: var(--mk-success-hover);--_contrast: var(--mk-success-contrast);--_subtle: var(--mk-success-subtle);--_subtle-text: var(--mk-success-subtle-text)}:host([data-tone=warning]){--_main: var(--mk-warning);--_hover: var(--mk-warning-hover);--_contrast: var(--mk-warning-contrast);--_subtle: var(--mk-warning-subtle);--_subtle-text: var(--mk-warning-subtle-text)}:host([data-tone=danger]){--_main: var(--mk-danger);--_hover: var(--mk-danger-hover);--_contrast: var(--mk-danger-contrast);--_subtle: var(--mk-danger-subtle);--_subtle-text: var(--mk-danger-subtle-text)}:host([data-tone=neutral]){--_main: var(--mk-surface-inverse);--_hover: var(--mk-surface-inverse);--_contrast: var(--mk-text-inverse);--_subtle: var(--mk-neutral-subtle);--_subtle-text: var(--mk-neutral-subtle-text)}:host(.mk-alert--soft){background-color:var(--_subtle);border-color:color-mix(in srgb,var(--_main) 22%,transparent);color:var(--_subtle-text)}:host(.mk-alert--outline){background-color:var(--mk-surface);border-color:color-mix(in srgb,var(--_main) 42%,var(--mk-border-strong));color:var(--mk-text)}:host(.mk-alert--solid){background-color:var(--_main);border-color:var(--_main);color:var(--_contrast)}.mk-alert__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem;margin-top:1px;color:var(--_main)}:host(.mk-alert--solid) .mk-alert__icon{color:currentColor}.mk-alert__icon:empty{display:none}.mk-alert__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--mk-space-1)}.mk-alert__title{margin:0;font-weight:var(--mk-font-weight-semibold);font-size:var(--mk-font-size-sm);line-height:var(--mk-line-height-snug)}.mk-alert__message{margin:0}.mk-alert__close{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin:-2px calc(var(--mk-space-1) * -1) 0 0;padding:0;background:transparent;border:0;border-radius:var(--mk-radius-sm);color:inherit;cursor:pointer;opacity:.7;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard),background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-alert__close:hover{opacity:1;background-image:linear-gradient(var(--mk-hover-overlay),var(--mk-hover-overlay))}.mk-alert__close:focus-visible{opacity:1;outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}\n"] }]
+        }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
+
+/** Delay (ms) before a pointer-triggered tooltip opens. Focus opens instantly. */
+const OPEN_DELAY = 400;
+/**
+ * Grace period (ms) after the pointer leaves the trigger (or the panel) before
+ * the tooltip hides. Long enough to cross the 8px gap onto the panel — WCAG
+ * 1.4.13 "hoverable" — without making the tip feel sticky.
+ */
+const CLOSE_DELAY = 150;
+/**
+ * Body-level presentation surface for {@link MkTooltip}. Rendered imperatively
+ * by the directive; not intended for direct template use.
+ */
+class MkTooltipPanel {
+    /** Text content shown inside the tooltip. */
+    text = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    /** DOM id used to wire `aria-describedby` on the trigger. */
+    id = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Resolved placement relative to the trigger. */
+    placement = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    /** Drives the entrance/exit transition. */
+    visible = input(false, { ...(ngDevMode ? { debugName: "visible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTooltipPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MkTooltipPanel, isStandalone: true, selector: "mk-tooltip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, properties: { "attr.id": "id()", "attr.data-placement": "placement()", "class.mk-tooltip--visible": "visible()" }, classAttribute: "mk-tooltip" }, ngImport: i0, template: "{{ text() }}\n", styles: [":host{position:fixed;z-index:var(--mk-z-tooltip);max-width:16rem;padding:var(--mk-space-1) var(--mk-space-2);background-color:var(--mk-surface-inverse);color:var(--mk-text-inverse);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-medium);line-height:var(--mk-line-height-snug);text-align:center;border-radius:var(--mk-radius-sm);box-shadow:var(--mk-shadow-md);pointer-events:none;white-space:normal;overflow-wrap:break-word;opacity:0;transform:scale(.96);transition:opacity var(--mk-duration-fast) var(--mk-ease-out),transform var(--mk-duration-fast) var(--mk-ease-out)}:host(.mk-tooltip--visible){opacity:1;transform:scale(1)}@media(prefers-reduced-motion:reduce){:host{transition:none;transform:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTooltipPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-tooltip',
+                        role: 'tooltip',
+                        '[attr.id]': 'id()',
+                        '[attr.data-placement]': 'placement()',
+                        '[class.mk-tooltip--visible]': 'visible()',
+                    }, template: "{{ text() }}\n", styles: [":host{position:fixed;z-index:var(--mk-z-tooltip);max-width:16rem;padding:var(--mk-space-1) var(--mk-space-2);background-color:var(--mk-surface-inverse);color:var(--mk-text-inverse);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-medium);line-height:var(--mk-line-height-snug);text-align:center;border-radius:var(--mk-radius-sm);box-shadow:var(--mk-shadow-md);pointer-events:none;white-space:normal;overflow-wrap:break-word;opacity:0;transform:scale(.96);transition:opacity var(--mk-duration-fast) var(--mk-ease-out),transform var(--mk-duration-fast) var(--mk-ease-out)}:host(.mk-tooltip--visible){opacity:1;transform:scale(1)}@media(prefers-reduced-motion:reduce){:host{transition:none;transform:none}}\n"] }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }] } });
+/**
+ * Tooltip directive — shows a themed tooltip on hover AND keyboard focus, and
+ * hides on blur, mouse-leave (after a short grace period — the pointer may
+ * move onto the tooltip itself, which keeps it open, per WCAG 1.4.13), or
+ * Escape pressed anywhere while it is visible. The tooltip is appended to
+ * `document.body`, positioned relative to the host, and wired to the host via
+ * `aria-describedby` for screen-reader users. Respects `prefers-reduced-motion`.
+ *
+ * ```html
+ * <button mkButton [mkTooltip]="'Delete row'" mkTooltipPlacement="bottom">
+ *   <svg>…</svg>
+ * </button>
+ * ```
+ */
+class MkTooltip {
+    host = inject(ElementRef);
+    appRef = inject(ApplicationRef);
+    envInjector = inject(EnvironmentInjector);
+    document = inject(DOCUMENT);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    /** Set by pointerdown so the focusin it causes doesn't re-open the tip. */
+    suppressFocusShow = false;
+    /** Tooltip text. When empty the tooltip is suppressed. */
+    mkTooltip = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mkTooltip" }] : /* istanbul ignore next */ []));
+    /** Preferred placement relative to the host. */
+    mkTooltipPlacement = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mkTooltipPlacement" }] : /* istanbul ignore next */ []));
+    tooltipId = mkUniqueId('mk-tooltip');
+    ref;
+    openTimer;
+    hideTimer;
+    previousDescribedBy = null;
+    /**
+     * Hovering the tooltip itself keeps it open (WCAG 1.4.13 "hoverable"): the
+     * pointer may cross the gap between trigger and panel, so leaving either one
+     * only SCHEDULES a hide, and entering either one cancels it.
+     */
+    onPanelEnter = () => {
+        clearTimeout(this.hideTimer);
+    };
+    onPanelLeave = () => {
+        this.scheduleHide();
+    };
+    /**
+     * WCAG 1.4.13 "dismissible": Escape hides a visible tooltip no matter where
+     * focus is. Attached to the document only while the tooltip is shown, and
+     * preventDefault only fires when a tooltip was actually hidden.
+     */
+    onDocumentKeydown = (event) => {
+        if (event.key !== 'Escape' || !this.ref)
+            return;
+        event.preventDefault();
+        this.hide();
+    };
+    onPointerEnter() {
+        // Re-entering the trigger during the hide grace period keeps the tip up.
+        clearTimeout(this.hideTimer);
+        this.scheduleShow(OPEN_DELAY);
+    }
+    onPointerLeave() {
+        clearTimeout(this.openTimer);
+        this.scheduleHide();
+    }
+    scheduleHide() {
+        if (!this.ref)
+            return;
+        clearTimeout(this.hideTimer);
+        this.hideTimer = setTimeout(() => this.hide(), CLOSE_DELAY);
+    }
+    onFocus() {
+        // Pointer-driven focus already dismissed the tip on pointerdown; showing
+        // it again here would defeat that. Keyboard focus still gets a tooltip.
+        if (this.suppressFocusShow) {
+            this.suppressFocusShow = false;
+            return;
+        }
+        this.scheduleShow(0);
+    }
+    onPointerDown(event) {
+        this.suppressFocusShow = true;
+        // Touch toggle: hover never happens on a touchscreen, so a tap on the
+        // trigger is the show gesture. Tap again (ref exists → fall through to
+        // hide) or tap elsewhere (document pointerdown) dismisses. Mouse and pen
+        // keep the plain dismiss-on-pointerdown behaviour.
+        if (event.pointerType === 'touch' && !this.ref) {
+            this.scheduleShow(0);
+            return;
+        }
+        this.hide();
+    }
+    /**
+     * Outside-tap dismissal (attached to the document only while visible): a
+     * pointerdown that lands on neither the trigger nor the panel hides the
+     * tooltip. The trigger's own pointerdown handles show/hide/toggle itself,
+     * and a press on the panel keeps it up (WCAG 1.4.13 "hoverable").
+     */
+    onDocumentPointerdown = (event) => {
+        const target = event.target;
+        if (!target || this.host.nativeElement.contains(target))
+            return;
+        const panel = this.ref?.location.nativeElement;
+        if (panel?.contains(target))
+            return;
+        this.hide();
+    };
+    scheduleShow(delay) {
+        if (!this.isBrowser || !this.mkTooltip().trim() || this.ref)
+            return;
+        clearTimeout(this.openTimer);
+        if (delay === 0) {
+            this.show();
+        }
+        else {
+            this.openTimer = setTimeout(() => this.show(), delay);
+        }
+    }
+    hide() {
+        clearTimeout(this.openTimer);
+        clearTimeout(this.hideTimer);
+        if (!this.ref)
+            return;
+        this.document.removeEventListener('keydown', this.onDocumentKeydown, true);
+        this.document.removeEventListener('pointerdown', this.onDocumentPointerdown, true);
+        // Restore the trigger's original aria-describedby.
+        const el = this.host.nativeElement;
+        if (this.previousDescribedBy === null) {
+            el.removeAttribute('aria-describedby');
+        }
+        else {
+            el.setAttribute('aria-describedby', this.previousDescribedBy);
+        }
+        this.previousDescribedBy = null;
+        const panel = this.ref.location.nativeElement;
+        if (panel.matches('[popover]') && typeof panel.hidePopover === 'function') {
+            try {
+                panel.hidePopover();
+            }
+            catch {
+                // Already disconnected — nothing to do.
+            }
+        }
+        this.appRef.detachView(this.ref.hostView);
+        this.ref.destroy();
+        this.ref = undefined;
+    }
+    show() {
+        if (this.ref)
+            return;
+        const ref = createComponent(MkTooltipPanel, {
+            environmentInjector: this.envInjector,
+        });
+        ref.setInput('text', this.mkTooltip());
+        ref.setInput('id', this.tooltipId);
+        ref.setInput('placement', this.mkTooltipPlacement());
+        this.appRef.attachView(ref.hostView);
+        const panel = ref.location.nativeElement;
+        this.document.body.appendChild(panel);
+        this.ref = ref;
+        // Hoverable (the listeners die with the panel element on hide) …
+        panel.addEventListener('mouseenter', this.onPanelEnter);
+        panel.addEventListener('mouseleave', this.onPanelLeave);
+        // … and dismissible from anywhere while visible (removed in hide()).
+        // Capture phase so the Escape that hides the tooltip is marked
+        // defaultPrevented before any bubbling handler (e.g. a dialog deciding
+        // whether to close) sees it — layered dismissal, tooltip first.
+        this.document.addEventListener('keydown', this.onDocumentKeydown, true);
+        // … and from an outside tap — the touch analogue of mouseleave. Capture
+        // phase so the tooltip is gone before the tap's own target reacts.
+        this.document.addEventListener('pointerdown', this.onDocumentPointerdown, true);
+        // Promote into the top layer so the tooltip is never clipped by an
+        // ancestor's overflow/transform or hidden behind a stacking context.
+        const withPopover = panel;
+        if (typeof withPopover.showPopover === 'function') {
+            panel.setAttribute('popover', 'manual');
+            try {
+                withPopover.showPopover();
+            }
+            catch {
+                // Unsupported context — fall back to the plain body portal.
+            }
+        }
+        // Wire aria-describedby, preserving any pre-existing value.
+        const trigger = this.host.nativeElement;
+        this.previousDescribedBy = trigger.getAttribute('aria-describedby');
+        trigger.setAttribute('aria-describedby', this.previousDescribedBy
+            ? `${this.previousDescribedBy} ${this.tooltipId}`
+            : this.tooltipId);
+        this.position(panel);
+        // Reveal on the next frame so the entrance transition runs.
+        this.document.defaultView?.requestAnimationFrame(() => {
+            this.ref?.setInput('visible', true);
+        });
+    }
+    position(panel) {
+        const rect = this.host.nativeElement.getBoundingClientRect();
+        const tip = panel.getBoundingClientRect();
+        const pos = mkComputeAnchoredPosition(rect, { width: tip.width, height: tip.height }, {
+            width: this.document.documentElement.clientWidth,
+            height: this.document.documentElement.clientHeight,
+        }, 
+        // Clamp back on-screen but keep the requested side (no flip) so the
+        // panel's `data-placement` styling stays correct.
+        {
+            placement: this.mkTooltipPlacement(),
+            gap: 8,
+            flip: false,
+            clamp: true,
+            rtl: this.document.defaultView?.getComputedStyle(this.host.nativeElement)
+                .direction === 'rtl',
+        });
+        panel.style.position = 'fixed';
+        panel.style.margin = '0';
+        panel.style.inset = 'auto';
+        panel.style.top = `${pos.top}px`;
+        panel.style.left = `${pos.left}px`;
+    }
+    ngOnDestroy() {
+        this.hide();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MkTooltip, isStandalone: true, selector: "[mkTooltip]", inputs: { mkTooltip: { classPropertyName: "mkTooltip", publicName: "mkTooltip", isSignal: true, isRequired: false, transformFunction: null }, mkTooltipPlacement: { classPropertyName: "mkTooltipPlacement", publicName: "mkTooltipPlacement", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onPointerEnter()", "mouseleave": "onPointerLeave()", "focusin": "onFocus()", "focusout": "hide()", "keydown.escape": "hide()", "pointerdown": "onPointerDown($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTooltip, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mkTooltip]',
+                    host: {
+                        '(mouseenter)': 'onPointerEnter()',
+                        '(mouseleave)': 'onPointerLeave()',
+                        '(focusin)': 'onFocus()',
+                        '(focusout)': 'hide()',
+                        '(keydown.escape)': 'hide()',
+                        // A tooltip must not outlive the interaction that spawned it. Without
+                        // this, tapping a tooltipped control leaves the tip on screen — and since
+                        // tooltips deliberately sit ABOVE dialogs (so a tip inside a modal is
+                        // visible), a stale one floats over whatever the tap just opened.
+                        // Exception: a TOUCH tap on the trigger of a hidden tooltip SHOWS it —
+                        // touch has no hover, so this is the only way a finger reaches the tip.
+                        '(pointerdown)': 'onPointerDown($event)',
+                    },
+                }]
+        }], propDecorators: { mkTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkTooltip", required: false }] }], mkTooltipPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkTooltipPlacement", required: false }] }] } });
+
+/**
+ * Popover — a non-modal floating panel for rich (non-text) content, anchored to
+ * a trigger. Unlike {@link MkTooltip} (text, hover) it holds arbitrary projected
+ * content and is opened by click via the `mkPopoverTriggerFor` directive (or the
+ * `open`/`toggle` API).
+ *
+ * The panel renders in the browser top layer through {@link MkAnchoredPanel}, so
+ * it is never clipped by an ancestor's `overflow`/`transform`. On open, focus
+ * moves into the panel; Escape closes and restores focus to the trigger, an
+ * outside click or Tabbing out closes it (non-modal — no keyboard trap).
+ *
+ * ```html
+ * <button mkButton [mkPopoverTriggerFor]="info">Details</button>
+ * <mk-popover #info ariaLabel="Details">
+ *   <h4>Shipping</h4><p>Ships in 2–3 business days.</p>
+ * </mk-popover>
+ * ```
+ */
+class MkPopover {
+    injector = inject(Injector);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    panelRef = viewChild('panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
+    /** Stable id for `aria-controls` on the trigger. */
+    panelId = mkUniqueId('mk-popover');
+    /** Preferred placement relative to the trigger. */
+    placement = input('bottom', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the dialog panel. */
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Move focus into the panel on open. Default `true`. */
+    autoFocus = input(true, { ...(ngDevMode ? { debugName: "autoFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Emitted whenever the popover closes (any reason). */
+    closed = output();
+    _open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_open" }] : /* istanbul ignore next */ []));
+    /** Whether the popover is open. */
+    opened = this._open.asReadonly();
+    anchorEl = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "anchorEl" }] : /* istanbul ignore next */ []));
+    triggerEl = null;
+    /** Open the popover anchored to `trigger`. */
+    open(trigger) {
+        if (!this.isBrowser || this._open())
+            return;
+        this.triggerEl = trigger;
+        this.anchorEl.set(trigger);
+        this._open.set(true);
+        if (this.autoFocus()) {
+            afterNextRender(() => this.focusInitial(), { injector: this.injector });
+        }
+    }
+    /** Close the popover; optionally restore focus to the trigger. */
+    close(restoreFocus = true) {
+        if (!this._open())
+            return;
+        this._open.set(false);
+        this.anchorEl.set(undefined);
+        const trigger = this.triggerEl;
+        this.triggerEl = null;
+        if (restoreFocus)
+            trigger?.focus();
+        this.closed.emit();
+    }
+    /** Toggle open/closed from a trigger. */
+    toggle(trigger) {
+        this._open() ? this.close(true) : this.open(trigger);
+    }
+    focusInitial() {
+        const panel = this.panelRef()?.nativeElement;
+        if (!panel)
+            return;
+        (mkGetFocusable(panel)[0] ?? panel).focus();
+    }
+    onEscape(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.close(true);
+    }
+    onPanelFocusout(event) {
+        const related = event.relatedTarget;
+        // Focus moved to a non-focusable spot (stays in document.body) — keep open;
+        // outside pointerdown is handled separately by the anchored panel.
+        if (!related)
+            return;
+        const panel = this.panelRef()?.nativeElement;
+        if (panel?.contains(related) || this.triggerEl?.contains(related))
+            return;
+        // Tabbed out of the panel — close without yanking focus back.
+        this.close(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkPopover, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkPopover, isStandalone: true, selector: "mk-popover", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { classAttribute: "mk-popover" }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], exportAs: ["mkPopover"], ngImport: i0, template: "@if (opened()) {\n  <div\n    #panel\n    class=\"mk-popover__panel\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n    [id]=\"panelId\"\n    [attr.aria-label]=\"ariaLabel()\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"anchorEl()\"\n    [placement]=\"placement()\"\n    [gap]=\"8\"\n    (dismiss)=\"close(false)\"\n    (keydown.escape)=\"onEscape($event)\"\n    (focusout)=\"onPanelFocusout($event)\"\n  >\n    <ng-content />\n  </div>\n}\n", styles: [":host{display:contents}.mk-popover__panel{min-width:12rem;max-width:min(22rem,100vw - var(--mk-space-4));padding:var(--mk-space-3) var(--mk-space-4);color:var(--mk-text);background:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-lg);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-md);animation:mk-popover-in var(--mk-duration-fast) var(--mk-ease-out)}.mk-popover__panel:focus-visible{outline:none}@keyframes mk-popover-in{0%{opacity:0;transform:translateY(calc(-1 * var(--mk-space-1))) scale(.98)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.mk-popover__panel{animation:none}}\n"], dependencies: [{ kind: "directive", type: MkAnchoredPanel, selector: "[mkAnchoredPanel]", inputs: ["mkAnchoredPanelFor", "anchorRect", "placement", "gap", "matchWidth", "flip", "clamp"], outputs: ["dismiss"], exportAs: ["mkAnchoredPanel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkPopover, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-popover', exportAs: 'mkPopover', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MkAnchoredPanel], host: {
+                        class: 'mk-popover',
+                    }, template: "@if (opened()) {\n  <div\n    #panel\n    class=\"mk-popover__panel\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n    [id]=\"panelId\"\n    [attr.aria-label]=\"ariaLabel()\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"anchorEl()\"\n    [placement]=\"placement()\"\n    [gap]=\"8\"\n    (dismiss)=\"close(false)\"\n    (keydown.escape)=\"onEscape($event)\"\n    (focusout)=\"onPanelFocusout($event)\"\n  >\n    <ng-content />\n  </div>\n}\n", styles: [":host{display:contents}.mk-popover__panel{min-width:12rem;max-width:min(22rem,100vw - var(--mk-space-4));padding:var(--mk-space-3) var(--mk-space-4);color:var(--mk-text);background:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-lg);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-md);animation:mk-popover-in var(--mk-duration-fast) var(--mk-ease-out)}.mk-popover__panel:focus-visible{outline:none}@keyframes mk-popover-in{0%{opacity:0;transform:translateY(calc(-1 * var(--mk-space-1))) scale(.98)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.mk-popover__panel{animation:none}}\n"] }]
+        }], propDecorators: { panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+/**
+ * Turns its host element into a click trigger for an `<mk-popover>`. Wires
+ * `aria-haspopup="dialog"` / `aria-expanded` / `aria-controls`, toggles on click
+ * and closes on Escape.
+ *
+ * ```html
+ * <button mkButton [mkPopoverTriggerFor]="info">Details</button>
+ * <mk-popover #info>…</mk-popover>
+ * ```
+ */
+class MkPopoverTrigger {
+    host = inject(ElementRef);
+    /** The popover instance to control. */
+    popover = input.required({ ...(ngDevMode ? { debugName: "popover" } : /* istanbul ignore next */ {}), alias: 'mkPopoverTriggerFor' });
+    onClick(event) {
+        event.preventDefault();
+        this.popover().toggle(this.host.nativeElement);
+    }
+    onKeydown(event) {
+        if (event.key === 'Escape' && this.popover().opened()) {
+            event.preventDefault();
+            this.popover().close(true);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkPopoverTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MkPopoverTrigger, isStandalone: true, selector: "[mkPopoverTriggerFor]", inputs: { popover: { classPropertyName: "popover", publicName: "mkPopoverTriggerFor", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "aria-haspopup": "dialog" }, listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)" }, properties: { "attr.aria-expanded": "popover().opened()", "attr.aria-controls": "popover().panelId" } }, exportAs: ["mkPopoverTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkPopoverTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mkPopoverTriggerFor]',
+                    exportAs: 'mkPopoverTrigger',
+                    host: {
+                        'aria-haspopup': 'dialog',
+                        '[attr.aria-expanded]': 'popover().opened()',
+                        '[attr.aria-controls]': 'popover().panelId',
+                        '(click)': 'onClick($event)',
+                        '(keydown)': 'onKeydown($event)',
+                    },
+                }]
+        }], propDecorators: { popover: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkPopoverTriggerFor", required: true }] }] } });
+
+/**
+ * Popconfirm — an inline confirmation popover (e.g. a row-level "Delete?").
+ * Composes {@link MkPopover} with a message and cancel/confirm buttons, so it
+ * inherits the top-layer positioning + focus behaviour. Attach it with the
+ * `mkPopconfirmFor` directive.
+ *
+ * ```html
+ * <button mkButton tone="danger" [mkPopconfirmFor]="del">Delete</button>
+ * <mk-popconfirm #del message="Delete this item?" (confirm)="remove()" />
+ * ```
+ */
+class MkPopconfirm {
+    popover = viewChild(MkPopover, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "popover" }] : /* istanbul ignore next */ []));
+    i18n = inject(MK_I18N);
+    /** Confirmation message. */
+    message = input(this.i18n.confirmMessage, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    /** Optional bold heading above the message. */
+    title = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Confirm button label. */
+    confirmText = input(this.i18n.confirm, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "confirmText" }] : /* istanbul ignore next */ []));
+    /** Cancel button label. */
+    cancelText = input(this.i18n.cancel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cancelText" }] : /* istanbul ignore next */ []));
+    /** Tone of the confirm button (destructive actions use `danger`). */
+    tone = input('danger', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /** Preferred placement relative to the trigger. */
+    placement = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    /** Emitted when the user confirms. */
+    confirm = output();
+    /** Emitted when the user cancels (button, Escape or outside click). */
+    cancel = output();
+    /** Id of the underlying dialog panel (for the trigger's `aria-controls`). */
+    get panelId() {
+        return this.popover()?.panelId ?? null;
+    }
+    /** Whether the popconfirm is open. */
+    opened() {
+        return this.popover()?.opened() ?? false;
+    }
+    /** Open anchored to `trigger`. */
+    open(trigger) {
+        this.popover()?.open(trigger);
+    }
+    /** Toggle from a trigger. */
+    toggle(trigger) {
+        this.popover()?.toggle(trigger);
+    }
+    /** Close the popconfirm. */
+    close() {
+        this.popover()?.close(true);
+    }
+    /** Set when the user confirms, so the close handler doesn't also cancel. */
+    confirmed = false;
+    onConfirm() {
+        this.confirmed = true;
+        this.confirm.emit();
+        this.popover()?.close(true);
+    }
+    onCancel() {
+        // Closing emits `closed`, which routes to `cancel` (see onPopoverClosed).
+        this.popover()?.close(true);
+    }
+    /** Any close that wasn't a confirm counts as a cancel (Escape / outside). */
+    onPopoverClosed() {
+        if (this.confirmed) {
+            this.confirmed = false;
+            return;
+        }
+        this.cancel.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkPopconfirm, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkPopconfirm, isStandalone: true, selector: "mk-popconfirm", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, confirmText: { classPropertyName: "confirmText", publicName: "confirmText", isSignal: true, isRequired: false, transformFunction: null }, cancelText: { classPropertyName: "cancelText", publicName: "cancelText", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirm: "confirm", cancel: "cancel" }, host: { classAttribute: "mk-popconfirm" }, viewQueries: [{ propertyName: "popover", first: true, predicate: MkPopover, descendants: true, isSignal: true }], exportAs: ["mkPopconfirm"], ngImport: i0, template: "<mk-popover\n  [placement]=\"placement()\"\n  [ariaLabel]=\"title() || message()\"\n  (closed)=\"onPopoverClosed()\"\n>\n  <div class=\"mk-popconfirm__body\">\n    @if (title()) {\n      <p class=\"mk-popconfirm__title\">{{ title() }}</p>\n    }\n    <p class=\"mk-popconfirm__message\">{{ message() }}</p>\n    <div class=\"mk-popconfirm__actions\">\n      <button mkButton variant=\"ghost\" tone=\"neutral\" size=\"sm\" (click)=\"onCancel()\">\n        {{ cancelText() }}\n      </button>\n      <button mkButton [tone]=\"tone()\" size=\"sm\" (click)=\"onConfirm()\">\n        {{ confirmText() }}\n      </button>\n    </div>\n  </div>\n</mk-popover>\n", styles: [":host{display:contents}.mk-popconfirm__body{display:flex;flex-direction:column;gap:var(--mk-space-2);min-width:12rem;max-width:18rem}.mk-popconfirm__title{margin:0;font-size:var(--mk-font-size-md);font-weight:var(--mk-font-weight-semibold);color:var(--mk-text)}.mk-popconfirm__message{margin:0;font-size:var(--mk-font-size-sm);color:var(--mk-text-muted);line-height:var(--mk-line-height-normal)}.mk-popconfirm__actions{display:flex;justify-content:flex-end;gap:var(--mk-space-2);margin-top:var(--mk-space-1)}\n"], dependencies: [{ kind: "component", type: MkPopover, selector: "mk-popover", inputs: ["placement", "ariaLabel", "autoFocus"], outputs: ["closed"], exportAs: ["mkPopover"] }, { kind: "component", type: MkButton, selector: "button[mkButton], a[mkButton]", inputs: ["variant", "tone", "size", "loading", "fullWidth", "iconOnly", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkPopconfirm, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-popconfirm', exportAs: 'mkPopconfirm', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MkPopover, MkButton], host: {
+                        class: 'mk-popconfirm',
+                    }, template: "<mk-popover\n  [placement]=\"placement()\"\n  [ariaLabel]=\"title() || message()\"\n  (closed)=\"onPopoverClosed()\"\n>\n  <div class=\"mk-popconfirm__body\">\n    @if (title()) {\n      <p class=\"mk-popconfirm__title\">{{ title() }}</p>\n    }\n    <p class=\"mk-popconfirm__message\">{{ message() }}</p>\n    <div class=\"mk-popconfirm__actions\">\n      <button mkButton variant=\"ghost\" tone=\"neutral\" size=\"sm\" (click)=\"onCancel()\">\n        {{ cancelText() }}\n      </button>\n      <button mkButton [tone]=\"tone()\" size=\"sm\" (click)=\"onConfirm()\">\n        {{ confirmText() }}\n      </button>\n    </div>\n  </div>\n</mk-popover>\n", styles: [":host{display:contents}.mk-popconfirm__body{display:flex;flex-direction:column;gap:var(--mk-space-2);min-width:12rem;max-width:18rem}.mk-popconfirm__title{margin:0;font-size:var(--mk-font-size-md);font-weight:var(--mk-font-weight-semibold);color:var(--mk-text)}.mk-popconfirm__message{margin:0;font-size:var(--mk-font-size-sm);color:var(--mk-text-muted);line-height:var(--mk-line-height-normal)}.mk-popconfirm__actions{display:flex;justify-content:flex-end;gap:var(--mk-space-2);margin-top:var(--mk-space-1)}\n"] }]
+        }], propDecorators: { popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MkPopover), { isSignal: true }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], confirmText: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmText", required: false }] }], cancelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelText", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], confirm: [{ type: i0.Output, args: ["confirm"] }], cancel: [{ type: i0.Output, args: ["cancel"] }] } });
+
+/**
+ * Turns its host element into a click trigger for an `<mk-popconfirm>`. Wires
+ * `aria-haspopup="dialog"` / `aria-expanded` / `aria-controls`, toggles on click
+ * and closes on Escape.
+ *
+ * ```html
+ * <button mkButton tone="danger" [mkPopconfirmFor]="del">Delete</button>
+ * <mk-popconfirm #del message="Delete this item?" (confirm)="remove()" />
+ * ```
+ */
+class MkPopconfirmTrigger {
+    host = inject(ElementRef);
+    /** The popconfirm instance to control. */
+    popconfirm = input.required({ ...(ngDevMode ? { debugName: "popconfirm" } : /* istanbul ignore next */ {}), alias: 'mkPopconfirmFor' });
+    onClick(event) {
+        event.preventDefault();
+        this.popconfirm().toggle(this.host.nativeElement);
+    }
+    onKeydown(event) {
+        if (event.key === 'Escape' && this.popconfirm().opened()) {
+            event.preventDefault();
+            this.popconfirm().close();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkPopconfirmTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MkPopconfirmTrigger, isStandalone: true, selector: "[mkPopconfirmFor]", inputs: { popconfirm: { classPropertyName: "popconfirm", publicName: "mkPopconfirmFor", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "aria-haspopup": "dialog" }, listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)" }, properties: { "attr.aria-expanded": "popconfirm().opened()", "attr.aria-controls": "popconfirm().panelId" } }, exportAs: ["mkPopconfirmTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkPopconfirmTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mkPopconfirmFor]',
+                    exportAs: 'mkPopconfirmTrigger',
+                    host: {
+                        'aria-haspopup': 'dialog',
+                        '[attr.aria-expanded]': 'popconfirm().opened()',
+                        '[attr.aria-controls]': 'popconfirm().panelId',
+                        '(click)': 'onClick($event)',
+                        '(keydown)': 'onKeydown($event)',
+                    },
+                }]
+        }], propDecorators: { popconfirm: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkPopconfirmFor", required: true }] }] } });
+
+/**
+ * Result — a centred, full-page status state: a success confirmation, an error,
+ * an empty 404/403/500 page. Renders a large status icon (chosen from
+ * `status`), a title, a muted subtitle, projected body content, and a row of
+ * action buttons at the bottom.
+ *
+ * Slots: `[mkResultIcon]` (custom icon, overrides the built-in glyph),
+ * `[mkResultTitle]` (custom heading, used when `resultTitle` is unset), default
+ * content (extra body), `[mkResultActions]` (buttons).
+ *
+ * ```html
+ * <mk-result status="success" resultTitle="Payment complete"
+ *   subtitle="Your order is on its way.">
+ *   <button mkButton mkResultActions>Back home</button>
+ * </mk-result>
+ * ```
+ */
+class MkResult {
+    /** Status preset that selects the built-in icon glyph and its tone colour. */
+    status = input('info', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    /** Main heading rendered as an `<h2>` (falls back to the `[mkResultTitle]` slot). */
+    resultTitle = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resultTitle" }] : /* istanbul ignore next */ []));
+    /** Supporting muted sentence under the title. */
+    subtitle = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    /** Built-in glyph for the current status. */
+    iconName = computed(() => {
+        switch (this.status()) {
+            case 'success':
+                return 'check';
+            case 'error':
+            case '500':
+                return 'x';
+            case 'warning':
+            case '403':
+                return 'alert';
+            case '404':
+                return 'search';
+            default:
+                return 'info';
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
+    /** Tone colour applied to the status icon. */
+    tone = computed(() => {
+        switch (this.status()) {
+            case 'success':
+                return 'success';
+            case 'error':
+            case '500':
+                return 'danger';
+            case 'warning':
+            case '403':
+                return 'warning';
+            case '404':
+                return 'muted';
+            default:
+                return 'info';
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkResult, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkResult, isStandalone: true, selector: "mk-result", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, resultTitle: { classPropertyName: "resultTitle", publicName: "resultTitle", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "attr.data-status": "status()", "attr.data-tone": "tone()" }, classAttribute: "mk-result" }, ngImport: i0, template: "<div class=\"mk-result__icon\" aria-hidden=\"true\">\n  <span class=\"mk-result__icon-custom\"><ng-content select=\"[mkResultIcon]\" /></span>\n  <span class=\"mk-result__icon-default\">\n    @switch (iconName()) {\n      @case ('check') {\n        <svg viewBox=\"0 0 24 24\" width=\"64\" height=\"64\" fill=\"none\" focusable=\"false\">\n          <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.6\" />\n          <path d=\"M8 12.5l2.5 2.5L16 9.5\" stroke=\"currentColor\" stroke-width=\"1.6\"\n            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      }\n      @case ('x') {\n        <svg viewBox=\"0 0 24 24\" width=\"64\" height=\"64\" fill=\"none\" focusable=\"false\">\n          <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.6\" />\n          <path d=\"M9 9l6 6M15 9l-6 6\" stroke=\"currentColor\" stroke-width=\"1.6\"\n            stroke-linecap=\"round\" />\n        </svg>\n      }\n      @case ('alert') {\n        <svg viewBox=\"0 0 24 24\" width=\"64\" height=\"64\" fill=\"none\" focusable=\"false\">\n          <path d=\"M12 3.5l9 15.5H3z\" stroke=\"currentColor\" stroke-width=\"1.6\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M12 10v4\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" />\n          <circle cx=\"12\" cy=\"16.5\" r=\"1\" fill=\"currentColor\" />\n        </svg>\n      }\n      @case ('search') {\n        <svg viewBox=\"0 0 24 24\" width=\"64\" height=\"64\" fill=\"none\" focusable=\"false\">\n          <circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\" stroke=\"currentColor\" stroke-width=\"1.6\" />\n          <path d=\"M15.5 15.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.6\"\n            stroke-linecap=\"round\" />\n        </svg>\n      }\n      @default {\n        <svg viewBox=\"0 0 24 24\" width=\"64\" height=\"64\" fill=\"none\" focusable=\"false\">\n          <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.6\" />\n          <path d=\"M12 11v5\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" />\n          <circle cx=\"12\" cy=\"8\" r=\"1\" fill=\"currentColor\" />\n        </svg>\n      }\n    }\n  </span>\n</div>\n\n@if (resultTitle(); as heading) {\n  <h2 class=\"mk-result__title\">{{ heading }}</h2>\n} @else {\n  <ng-content select=\"[mkResultTitle]\" />\n}\n\n@if (subtitle(); as text) {\n  <p class=\"mk-result__subtitle\">{{ text }}</p>\n}\n\n<div class=\"mk-result__body\">\n  <ng-content />\n</div>\n\n<div class=\"mk-result__actions\">\n  <ng-content select=\"[mkResultActions]\" />\n</div>\n", styles: [":host{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--mk-space-2);max-width:32rem;margin-inline:auto;padding:var(--mk-space-12) var(--mk-space-6);text-align:center;font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-result__icon{display:inline-flex;align-items:center;justify-content:center;margin-bottom:var(--mk-space-2);color:var(--mk-text-muted)}:host([data-tone=success]) .mk-result__icon{color:var(--mk-success)}:host([data-tone=danger]) .mk-result__icon{color:var(--mk-danger-text)}:host([data-tone=warning]) .mk-result__icon{color:var(--mk-warning)}:host([data-tone=info]) .mk-result__icon{color:var(--mk-info, var(--mk-primary))}:host([data-tone=muted]) .mk-result__icon{color:var(--mk-text-muted)}.mk-result__icon-custom:empty{display:none}.mk-result__icon:has(.mk-result__icon-custom>*) .mk-result__icon-default{display:none}.mk-result__title{margin:0;font-size:var(--mk-font-size-xl);font-weight:var(--mk-font-weight-semibold);line-height:var(--mk-line-height-snug);color:var(--mk-text)}.mk-result__subtitle{margin:0;max-width:40ch;font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-normal);color:var(--mk-text-muted)}.mk-result__body:empty{display:none}.mk-result__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--mk-space-2);margin-top:var(--mk-space-4)}.mk-result__actions:empty{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkResult, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-result', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-result',
+                        role: 'status',
+                        '[attr.data-status]': 'status()',
+                        '[attr.data-tone]': 'tone()',
+                    }, template: "<div class=\"mk-result__icon\" aria-hidden=\"true\">\n  <span class=\"mk-result__icon-custom\"><ng-content select=\"[mkResultIcon]\" /></span>\n  <span class=\"mk-result__icon-default\">\n    @switch (iconName()) {\n      @case ('check') {\n        <svg viewBox=\"0 0 24 24\" width=\"64\" height=\"64\" fill=\"none\" focusable=\"false\">\n          <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.6\" />\n          <path d=\"M8 12.5l2.5 2.5L16 9.5\" stroke=\"currentColor\" stroke-width=\"1.6\"\n            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      }\n      @case ('x') {\n        <svg viewBox=\"0 0 24 24\" width=\"64\" height=\"64\" fill=\"none\" focusable=\"false\">\n          <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.6\" />\n          <path d=\"M9 9l6 6M15 9l-6 6\" stroke=\"currentColor\" stroke-width=\"1.6\"\n            stroke-linecap=\"round\" />\n        </svg>\n      }\n      @case ('alert') {\n        <svg viewBox=\"0 0 24 24\" width=\"64\" height=\"64\" fill=\"none\" focusable=\"false\">\n          <path d=\"M12 3.5l9 15.5H3z\" stroke=\"currentColor\" stroke-width=\"1.6\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M12 10v4\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" />\n          <circle cx=\"12\" cy=\"16.5\" r=\"1\" fill=\"currentColor\" />\n        </svg>\n      }\n      @case ('search') {\n        <svg viewBox=\"0 0 24 24\" width=\"64\" height=\"64\" fill=\"none\" focusable=\"false\">\n          <circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\" stroke=\"currentColor\" stroke-width=\"1.6\" />\n          <path d=\"M15.5 15.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.6\"\n            stroke-linecap=\"round\" />\n        </svg>\n      }\n      @default {\n        <svg viewBox=\"0 0 24 24\" width=\"64\" height=\"64\" fill=\"none\" focusable=\"false\">\n          <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.6\" />\n          <path d=\"M12 11v5\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" />\n          <circle cx=\"12\" cy=\"8\" r=\"1\" fill=\"currentColor\" />\n        </svg>\n      }\n    }\n  </span>\n</div>\n\n@if (resultTitle(); as heading) {\n  <h2 class=\"mk-result__title\">{{ heading }}</h2>\n} @else {\n  <ng-content select=\"[mkResultTitle]\" />\n}\n\n@if (subtitle(); as text) {\n  <p class=\"mk-result__subtitle\">{{ text }}</p>\n}\n\n<div class=\"mk-result__body\">\n  <ng-content />\n</div>\n\n<div class=\"mk-result__actions\">\n  <ng-content select=\"[mkResultActions]\" />\n</div>\n", styles: [":host{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--mk-space-2);max-width:32rem;margin-inline:auto;padding:var(--mk-space-12) var(--mk-space-6);text-align:center;font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-result__icon{display:inline-flex;align-items:center;justify-content:center;margin-bottom:var(--mk-space-2);color:var(--mk-text-muted)}:host([data-tone=success]) .mk-result__icon{color:var(--mk-success)}:host([data-tone=danger]) .mk-result__icon{color:var(--mk-danger-text)}:host([data-tone=warning]) .mk-result__icon{color:var(--mk-warning)}:host([data-tone=info]) .mk-result__icon{color:var(--mk-info, var(--mk-primary))}:host([data-tone=muted]) .mk-result__icon{color:var(--mk-text-muted)}.mk-result__icon-custom:empty{display:none}.mk-result__icon:has(.mk-result__icon-custom>*) .mk-result__icon-default{display:none}.mk-result__title{margin:0;font-size:var(--mk-font-size-xl);font-weight:var(--mk-font-weight-semibold);line-height:var(--mk-line-height-snug);color:var(--mk-text)}.mk-result__subtitle{margin:0;max-width:40ch;font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-normal);color:var(--mk-text-muted)}.mk-result__body:empty{display:none}.mk-result__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--mk-space-2);margin-top:var(--mk-space-4)}.mk-result__actions:empty{display:none}\n"] }]
+        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], resultTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "resultTitle", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }] } });
+
+/**
+ * Hovercard — a rich hover-preview panel anchored to a trigger, in the spirit of
+ * GitHub's user hovercards. Unlike {@link MkTooltip} (short text) it projects
+ * arbitrary content, and unlike {@link MkPopover} (click) it opens on hover/focus
+ * after a short delay and closes when the pointer leaves both the trigger and the
+ * card. It is driven by the `mkHovercardFor` directive (or the `open`/`close` API).
+ *
+ * The panel renders in the browser top layer through {@link MkAnchoredPanel}, so
+ * it is never clipped by an ancestor's `overflow`/`transform`. It is non-modal —
+ * no focus trap. Moving the pointer from the trigger onto the card keeps it open;
+ * Escape closes it.
+ *
+ * ```html
+ * <a href="/u/ada" [mkHovercardFor]="ada">@ada</a>
+ * <mk-hovercard #ada ariaLabel="Ada Lovelace">
+ *   <img src="/ada.png" alt="" /><strong>Ada Lovelace</strong>
+ * </mk-hovercard>
+ * ```
+ */
+class MkHovercard {
+    document = inject(DOCUMENT);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    /** Stable id for `aria-controls` on the trigger. */
+    panelId = mkUniqueId('mk-hovercard');
+    /** Preferred placement relative to the trigger. */
+    placement = input('bottom-start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the panel. */
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Delay in ms before the card opens on hover/focus. Default `300`. */
+    openDelay = input(300, { ...(ngDevMode ? { debugName: "openDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Delay in ms before the card closes after the pointer leaves. Default `200`. */
+    closeDelay = input(200, { ...(ngDevMode ? { debugName: "closeDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Close the card when Escape is pressed while it is open. Default `true`. */
+    closeOnEscape = input(true, { ...(ngDevMode ? { debugName: "closeOnEscape" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Emitted whenever the hovercard closes (any reason). */
+    closed = output();
+    _open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_open" }] : /* istanbul ignore next */ []));
+    /** Whether the hovercard is open. */
+    opened = this._open.asReadonly();
+    anchorEl = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "anchorEl" }] : /* istanbul ignore next */ []));
+    triggerEl = null;
+    openTimer = null;
+    closeTimer = null;
+    /** Open the card anchored to `trigger` after `openDelay` (cancels a pending close). */
+    scheduleOpen(trigger) {
+        if (!this.isBrowser)
+            return;
+        this.clearCloseTimer();
+        if (this._open()) {
+            // Already open — just make sure the anchor is current.
+            this.triggerEl = trigger;
+            this.anchorEl.set(trigger);
+            return;
+        }
+        if (this.openTimer !== null)
+            return;
+        this.openTimer = this.setTimer(() => {
+            this.openTimer = null;
+            this.open(trigger);
+        }, this.openDelay());
+    }
+    /** Close the card after `closeDelay` (cancels a pending open). */
+    scheduleClose() {
+        if (!this.isBrowser)
+            return;
+        this.clearOpenTimer();
+        if (!this._open() || this.closeTimer !== null)
+            return;
+        this.closeTimer = this.setTimer(() => {
+            this.closeTimer = null;
+            this.close();
+        }, this.closeDelay());
+    }
+    /**
+     * Keep the card open: cancel any pending open/close. Called when the pointer
+     * enters the card itself, so moving from the trigger to the card is seamless.
+     */
+    keepOpen() {
+        this.clearCloseTimer();
+    }
+    /** Open the card immediately, anchored to `trigger`. */
+    open(trigger) {
+        if (!this.isBrowser || this._open())
+            return;
+        this.clearOpenTimer();
+        this.triggerEl = trigger;
+        this.anchorEl.set(trigger);
+        this._open.set(true);
+    }
+    /** Close the card immediately. */
+    close() {
+        this.clearOpenTimer();
+        this.clearCloseTimer();
+        if (!this._open())
+            return;
+        this._open.set(false);
+        this.anchorEl.set(undefined);
+        this.triggerEl = null;
+        this.closed.emit();
+    }
+    onCardEnter() {
+        this.keepOpen();
+    }
+    onCardLeave() {
+        this.scheduleClose();
+    }
+    /**
+     * Keyboard mirror of `mouseleave`: when focus moves somewhere outside BOTH
+     * the card and its trigger, schedule a close. Focus hopping between the
+     * trigger and the card (either direction) keeps it open, so the card's
+     * content stays reachable with Tab.
+     */
+    onCardFocusout(event) {
+        const related = event.relatedTarget;
+        if (!related)
+            return;
+        const panel = event.currentTarget;
+        if (panel?.contains(related) || this.triggerEl?.contains(related))
+            return;
+        this.scheduleClose();
+    }
+    onEscape(event) {
+        if (!this.closeOnEscape())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        // Escape may be pressed while focus is INSIDE the panel; closing destroys
+        // it, which would otherwise drop focus on <body>. Hand it back to the
+        // trigger so the keyboard user keeps their place.
+        const trigger = this.triggerEl;
+        this.close();
+        trigger?.focus();
+    }
+    setTimer(fn, delay) {
+        const view = this.document.defaultView;
+        return view ? view.setTimeout(fn, delay) : null;
+    }
+    clearOpenTimer() {
+        if (this.openTimer !== null) {
+            this.document.defaultView?.clearTimeout(this.openTimer);
+            this.openTimer = null;
+        }
+    }
+    clearCloseTimer() {
+        if (this.closeTimer !== null) {
+            this.document.defaultView?.clearTimeout(this.closeTimer);
+            this.closeTimer = null;
+        }
+    }
+    ngOnDestroy() {
+        this.clearOpenTimer();
+        this.clearCloseTimer();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkHovercard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkHovercard, isStandalone: true, selector: "mk-hovercard", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { classAttribute: "mk-hovercard" }, exportAs: ["mkHovercard"], ngImport: i0, template: "@if (opened()) {\n  <div\n    #panel\n    class=\"mk-hovercard__panel\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n    [id]=\"panelId\"\n    [attr.aria-label]=\"ariaLabel()\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"anchorEl()\"\n    [placement]=\"placement()\"\n    [gap]=\"8\"\n    (dismiss)=\"close()\"\n    (mouseenter)=\"onCardEnter()\"\n    (mouseleave)=\"onCardLeave()\"\n    (focusin)=\"onCardEnter()\"\n    (focusout)=\"onCardFocusout($event)\"\n    (keydown.escape)=\"onEscape($event)\"\n  >\n    <ng-content />\n  </div>\n}\n", styles: [":host{display:contents}.mk-hovercard__panel{pointer-events:auto;min-width:16rem;max-width:min(24rem,100vw - var(--mk-space-4));padding:var(--mk-space-4);color:var(--mk-text);background:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-lg);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-md);animation:mk-hovercard-in var(--mk-duration-fast) var(--mk-ease-out)}.mk-hovercard__panel:focus-visible{outline:none}@keyframes mk-hovercard-in{0%{opacity:0;transform:translateY(calc(-1 * var(--mk-space-1))) scale(.98)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.mk-hovercard__panel{animation:none}}\n"], dependencies: [{ kind: "directive", type: MkAnchoredPanel, selector: "[mkAnchoredPanel]", inputs: ["mkAnchoredPanelFor", "anchorRect", "placement", "gap", "matchWidth", "flip", "clamp"], outputs: ["dismiss"], exportAs: ["mkAnchoredPanel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkHovercard, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-hovercard', exportAs: 'mkHovercard', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MkAnchoredPanel], host: {
+                        class: 'mk-hovercard',
+                    }, template: "@if (opened()) {\n  <div\n    #panel\n    class=\"mk-hovercard__panel\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n    [id]=\"panelId\"\n    [attr.aria-label]=\"ariaLabel()\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"anchorEl()\"\n    [placement]=\"placement()\"\n    [gap]=\"8\"\n    (dismiss)=\"close()\"\n    (mouseenter)=\"onCardEnter()\"\n    (mouseleave)=\"onCardLeave()\"\n    (focusin)=\"onCardEnter()\"\n    (focusout)=\"onCardFocusout($event)\"\n    (keydown.escape)=\"onEscape($event)\"\n  >\n    <ng-content />\n  </div>\n}\n", styles: [":host{display:contents}.mk-hovercard__panel{pointer-events:auto;min-width:16rem;max-width:min(24rem,100vw - var(--mk-space-4));padding:var(--mk-space-4);color:var(--mk-text);background:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-lg);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-md);animation:mk-hovercard-in var(--mk-duration-fast) var(--mk-ease-out)}.mk-hovercard__panel:focus-visible{outline:none}@keyframes mk-hovercard-in{0%{opacity:0;transform:translateY(calc(-1 * var(--mk-space-1))) scale(.98)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.mk-hovercard__panel{animation:none}}\n"] }]
+        }], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], openDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDelay", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+/**
+ * A touch tap fires emulated `mouseenter` + `focus` right after `pointerdown`;
+ * for this long after a touch toggle those synthetic enters are ignored, so a
+ * tap that just CLOSED the card is not undone by its own compatibility events.
+ */
+const TOUCH_ENTER_SUPPRESS_MS = 500;
+/**
+ * Turns its host element into a hover/focus trigger for an `<mk-hovercard>`.
+ * On `mouseenter`/`focus` it opens the card (after the card's `openDelay`),
+ * anchored to the host; on `mouseleave`/`blur` it schedules a close (after the
+ * card's `closeDelay`). Moving the pointer — or keyboard focus — from the host
+ * onto the card cancels that close, so the card stays open and its content is
+ * reachable with Tab. Escape closes it.
+ *
+ * On touch there is no hover, so a tap toggles instead: tap opens the card
+ * immediately, tapping the trigger again closes it, and a tap anywhere else
+ * closes it through the panel's outside-pointerdown dismissal.
+ *
+ * ```html
+ * <a href="/u/ada" [mkHovercardFor]="ada">@ada</a>
+ * <mk-hovercard #ada>…</mk-hovercard>
+ * ```
+ */
+class MkHovercardTrigger {
+    host = inject(ElementRef);
+    /** Timestamp of the last touch toggle — guards `onEnter` (see above). */
+    lastTouchToggle = Number.NEGATIVE_INFINITY;
+    /** The hovercard instance to control. */
+    hovercard = input.required({ ...(ngDevMode ? { debugName: "hovercard" } : /* istanbul ignore next */ {}), alias: 'mkHovercardFor' });
+    onEnter() {
+        if (Date.now() - this.lastTouchToggle < TOUCH_ENTER_SUPPRESS_MS)
+            return;
+        this.hovercard().scheduleOpen(this.host.nativeElement);
+    }
+    /**
+     * Touch tap-toggle. Mouse and pen are ignored here — they keep the pure
+     * hover/focus behaviour. A tap while the card is open closes it (a tap
+     * OUTSIDE both trigger and panel is handled by the anchored panel's own
+     * outside-pointerdown dismiss, which excludes the anchor, so the two paths
+     * never double-fire).
+     */
+    onPointerDown(event) {
+        if (event.pointerType !== 'touch')
+            return;
+        this.lastTouchToggle = Date.now();
+        const card = this.hovercard();
+        if (card.opened()) {
+            card.close();
+        }
+        else {
+            // No openDelay on touch — the tap is deliberate, not a passing pointer.
+            card.open(this.host.nativeElement);
+        }
+    }
+    onLeave() {
+        this.hovercard().scheduleClose();
+    }
+    onKeydown(event) {
+        if (event.key === 'Escape' && this.hovercard().opened()) {
+            event.preventDefault();
+            this.hovercard().close();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkHovercardTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MkHovercardTrigger, isStandalone: true, selector: "[mkHovercardFor]", inputs: { hovercard: { classPropertyName: "hovercard", publicName: "mkHovercardFor", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "aria-haspopup": "dialog" }, listeners: { "mouseenter": "onEnter()", "focus": "onEnter()", "mouseleave": "onLeave()", "blur": "onLeave()", "pointerdown": "onPointerDown($event)", "keydown": "onKeydown($event)" }, properties: { "attr.aria-expanded": "hovercard().opened()", "attr.aria-controls": "hovercard().panelId" } }, exportAs: ["mkHovercardTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkHovercardTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mkHovercardFor]',
+                    exportAs: 'mkHovercardTrigger',
+                    host: {
+                        'aria-haspopup': 'dialog',
+                        '[attr.aria-expanded]': 'hovercard().opened()',
+                        '[attr.aria-controls]': 'hovercard().panelId',
+                        '(mouseenter)': 'onEnter()',
+                        '(focus)': 'onEnter()',
+                        '(mouseleave)': 'onLeave()',
+                        '(blur)': 'onLeave()',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(keydown)': 'onKeydown($event)',
+                    },
+                }]
+        }], propDecorators: { hovercard: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkHovercardFor", required: true }] }] } });
+
+/**
+ * NotificationCenter — a bell trigger with an unread-count badge that opens a
+ * dropdown panel listing notifications, each markable as read.
+ *
+ * The panel renders in the browser top layer through {@link MkAnchoredPanel},
+ * so it is never clipped by an ancestor's `overflow`/`transform`. Clicking the
+ * bell toggles it; an outside click, Tabbing out or Escape closes it and
+ * restores focus to the bell. Clicking a row marks that one read (updating the
+ * two-way `notifications` immutably); "Mark all read" clears every unread item.
+ *
+ * ```html
+ * <mk-notification-center
+ *   [(notifications)]="items"
+ *   (itemClick)="open($event)"
+ *   (markedAllRead)="sync()" />
+ * ```
+ */
+class MkNotificationCenter {
+    injector = inject(Injector);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    panelRef = viewChild('panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
+    triggerRef = viewChild('trigger', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
+    i18n = inject(MK_I18N);
+    /** Stable id linking the trigger to the panel via `aria-controls`. */
+    panelId = mkUniqueId('mk-notification-center');
+    /** Stable id for the panel's labelling heading. */
+    titleId = mkUniqueId('mk-notification-center-title');
+    /** Two-way list of notifications rendered in the panel. */
+    notifications = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "notifications" }] : /* istanbul ignore next */ []));
+    /** Heading shown at the top of the panel. */
+    panelTitle = input(this.i18n.notificationsTitle, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelTitle" }] : /* istanbul ignore next */ []));
+    /** Message shown by the empty state when there are no notifications. */
+    emptyText = input(this.i18n.allCaughtUp, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    /** Max height of the scrollable list (any CSS length). */
+    maxHeight = input('24rem', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+    /** Emitted with a notification when its row is clicked. */
+    itemClick = output();
+    /** Emitted with a notification when it transitions to read. */
+    read = output();
+    /** Emitted when every notification is marked read at once. */
+    markedAllRead = output();
+    _open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_open" }] : /* istanbul ignore next */ []));
+    /** Whether the panel is open. */
+    open = this._open.asReadonly();
+    /** Count of notifications that are not yet read. */
+    unreadCount = computed(() => this.notifications().filter((n) => !n.read).length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unreadCount" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the bell trigger. */
+    triggerLabel = computed(() => this.i18n.notificationsUnread(this.unreadCount()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []));
+    /** Badge text, capped at "99+". */
+    badgeText = computed(() => {
+        const n = this.unreadCount();
+        return n > 99 ? '99+' : `${n}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "badgeText" }] : /* istanbul ignore next */ []));
+    /** Toggle the panel open/closed. */
+    toggle() {
+        this._open() ? this.close() : this.openPanel();
+    }
+    /** Open the panel, moving focus into it on the next render. */
+    openPanel() {
+        if (!this.isBrowser || this._open())
+            return;
+        this._open.set(true);
+        afterNextRender(() => this.focusInitial(), { injector: this.injector });
+    }
+    /** Close the panel; optionally restore focus to the bell trigger. */
+    close(restoreFocus = true) {
+        if (!this._open())
+            return;
+        this._open.set(false);
+        if (restoreFocus)
+            this.triggerRef()?.nativeElement.focus();
+    }
+    /** Mark every notification read and emit {@link markedAllRead}. */
+    markAllRead() {
+        if (this.unreadCount() === 0)
+            return;
+        this.notifications.update((list) => list.map((n) => (n.read ? n : { ...n, read: true })));
+        this.markedAllRead.emit();
+    }
+    /** Handle a row click: mark it read (if needed) and emit {@link itemClick}. */
+    onRowClick(item) {
+        if (!item.read)
+            this.markRead(item);
+        this.itemClick.emit(item);
+    }
+    markRead(item) {
+        let updated;
+        this.notifications.update((list) => list.map((n) => {
+            if (n !== item || n.read)
+                return n;
+            updated = { ...n, read: true };
+            return updated;
+        }));
+        if (updated)
+            this.read.emit(updated);
+    }
+    onEscape(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.close(true);
+    }
+    onPanelFocusout(event) {
+        const related = event.relatedTarget;
+        if (!related)
+            return;
+        const panel = this.panelRef()?.nativeElement;
+        const trigger = this.triggerRef()?.nativeElement;
+        if (panel?.contains(related) || trigger?.contains(related))
+            return;
+        this.close(false);
+    }
+    focusInitial() {
+        const panel = this.panelRef()?.nativeElement;
+        if (!panel)
+            return;
+        (mkGetFocusable(panel)[0] ?? panel).focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkNotificationCenter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkNotificationCenter, isStandalone: true, selector: "mk-notification-center", inputs: { notifications: { classPropertyName: "notifications", publicName: "notifications", isSignal: true, isRequired: false, transformFunction: null }, panelTitle: { classPropertyName: "panelTitle", publicName: "panelTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { notifications: "notificationsChange", itemClick: "itemClick", read: "read", markedAllRead: "markedAllRead" }, host: { classAttribute: "mk-notification-center" }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  #trigger\n  type=\"button\"\n  class=\"mk-notification-center__trigger\"\n  aria-haspopup=\"dialog\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"open() ? panelId : null\"\n  [attr.aria-label]=\"triggerLabel()\"\n  (click)=\"toggle()\"\n>\n  <mk-icon name=\"bell\" />\n  @if (unreadCount() > 0) {\n    <mk-badge\n      class=\"mk-notification-center__count\"\n      tone=\"danger\"\n      variant=\"solid\"\n      size=\"sm\"\n      aria-hidden=\"true\"\n    >\n      {{ badgeText() }}\n    </mk-badge>\n  }\n</button>\n\n@if (open()) {\n  <div\n    #panel\n    class=\"mk-notification-center__panel\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n    [id]=\"panelId\"\n    [attr.aria-labelledby]=\"titleId\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"trigger\"\n    placement=\"bottom-end\"\n    [gap]=\"8\"\n    (dismiss)=\"close(false)\"\n    (keydown.escape)=\"onEscape($event)\"\n    (focusout)=\"onPanelFocusout($event)\"\n  >\n    <header class=\"mk-notification-center__header\">\n      <h2 [id]=\"titleId\" class=\"mk-notification-center__title\">\n        {{ panelTitle() }}\n      </h2>\n      <!--\n        aria-disabled (not [disabled]) so the button stays focusable when it\n        disables itself after activation; markAllRead() guards the no-op case.\n      -->\n      <button\n        type=\"button\"\n        class=\"mk-notification-center__mark-all\"\n        [attr.aria-disabled]=\"unreadCount() === 0\"\n        (click)=\"markAllRead()\"\n      >\n        {{ i18n.markAllRead }}\n      </button>\n    </header>\n\n    @if (notifications().length > 0) {\n      <ul\n        class=\"mk-notification-center__list\"\n        [style.max-height]=\"maxHeight()\"\n      >\n        @for (item of notifications(); track item.id) {\n          <li>\n            <button\n              type=\"button\"\n              class=\"mk-notification-center__item\"\n              [class.mk-notification-center__item--unread]=\"!item.read\"\n              (click)=\"onRowClick(item)\"\n            >\n              <span\n                class=\"mk-notification-center__dot\"\n                aria-hidden=\"true\"\n              ></span>\n              @if (!item.read) {\n                <span class=\"mk-visually-hidden\">{{ i18n.unread }}</span>\n              }\n              <span class=\"mk-notification-center__body\">\n                <span class=\"mk-notification-center__item-title\">\n                  {{ item.title }}\n                </span>\n                @if (item.body) {\n                  <span class=\"mk-notification-center__item-text\">\n                    {{ item.body }}\n                  </span>\n                }\n                @if (item.time) {\n                  <span class=\"mk-notification-center__item-time\">\n                    {{ item.time }}\n                  </span>\n                }\n              </span>\n            </button>\n          </li>\n        }\n      </ul>\n    } @else {\n      <mk-empty-state\n        class=\"mk-notification-center__empty\"\n        icon=\"bell\"\n        size=\"sm\"\n        [title]=\"emptyText()\"\n      />\n    }\n  </div>\n}\n", styles: [":host{display:inline-block}.mk-notification-center__trigger{position:relative;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;color:var(--mk-text);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;font-family:var(--mk-font-sans);line-height:1}.mk-notification-center__trigger:hover{background:var(--mk-hover-overlay)}.mk-notification-center__trigger:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-notification-center__count{position:absolute;top:.125rem;inset-inline-end:.125rem;pointer-events:none;transform:translate(35%,-35%)}.mk-notification-center__count:dir(rtl){transform:translate(-35%,-35%)}.mk-notification-center__panel{display:flex;flex-direction:column;width:min(22rem,100vw - var(--mk-space-4));color:var(--mk-text);background:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-lg);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-md);overflow:hidden;animation:mk-notification-center-in var(--mk-duration-fast) var(--mk-ease-out)}.mk-notification-center__panel:focus-visible{outline:none}.mk-notification-center__header{display:flex;align-items:center;justify-content:space-between;gap:var(--mk-space-3);padding:var(--mk-space-3) var(--mk-space-4);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-notification-center__title{margin:0;font-size:var(--mk-font-size-md);font-weight:var(--mk-font-weight-semibold);line-height:var(--mk-line-height-snug)}.mk-notification-center__mark-all{padding:0;color:var(--mk-primary);background:transparent;border:none;cursor:pointer;font:inherit;font-size:var(--mk-font-size-sm);white-space:nowrap}.mk-notification-center__mark-all:hover:not([aria-disabled=true]){text-decoration:underline}.mk-notification-center__mark-all:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-radius:var(--mk-radius-sm)}.mk-notification-center__mark-all[aria-disabled=true]{color:var(--mk-text-muted);cursor:default}.mk-notification-center__list{margin:0;padding:0;list-style:none;overflow-y:auto}.mk-notification-center__list li+li{border-top:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-notification-center__item{display:flex;align-items:flex-start;gap:var(--mk-space-2);width:100%;padding:var(--mk-space-3) var(--mk-space-4);color:inherit;background:transparent;border:none;cursor:pointer;font:inherit;text-align:start}.mk-notification-center__item:hover{background:var(--mk-hover-overlay)}.mk-notification-center__item:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-notification-center__dot{flex:none;width:.5rem;height:.5rem;margin-top:.375rem;border-radius:var(--mk-radius-circle);background:transparent}.mk-notification-center__item--unread .mk-notification-center__dot{background:var(--mk-primary)}.mk-notification-center__body{display:flex;flex-direction:column;gap:var(--mk-space-1);min-width:0}.mk-notification-center__item-title{font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-snug);color:var(--mk-text)}.mk-notification-center__item--unread .mk-notification-center__item-title{font-weight:var(--mk-font-weight-semibold)}.mk-notification-center__item-text{font-size:var(--mk-font-size-sm);line-height:var(--mk-line-height-normal);color:var(--mk-text-muted)}.mk-notification-center__item-time{font-size:var(--mk-font-size-xs);color:var(--mk-text-muted)}@keyframes mk-notification-center-in{0%{opacity:0;transform:translateY(calc(-1 * var(--mk-space-1))) scale(.98)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.mk-notification-center__panel{animation:none}}\n"], dependencies: [{ kind: "directive", type: MkAnchoredPanel, selector: "[mkAnchoredPanel]", inputs: ["mkAnchoredPanelFor", "anchorRect", "placement", "gap", "matchWidth", "flip", "clamp"], outputs: ["dismiss"], exportAs: ["mkAnchoredPanel"] }, { kind: "component", type: MkBadge, selector: "mk-badge", inputs: ["tone", "variant", "size", "dot"] }, { kind: "component", type: MkEmptyState, selector: "mk-empty-state", inputs: ["icon", "title", "description", "size"] }, { 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: MkNotificationCenter, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-notification-center', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MkAnchoredPanel, MkBadge, MkEmptyState, MkIcon], host: {
+                        class: 'mk-notification-center',
+                    }, template: "<button\n  #trigger\n  type=\"button\"\n  class=\"mk-notification-center__trigger\"\n  aria-haspopup=\"dialog\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"open() ? panelId : null\"\n  [attr.aria-label]=\"triggerLabel()\"\n  (click)=\"toggle()\"\n>\n  <mk-icon name=\"bell\" />\n  @if (unreadCount() > 0) {\n    <mk-badge\n      class=\"mk-notification-center__count\"\n      tone=\"danger\"\n      variant=\"solid\"\n      size=\"sm\"\n      aria-hidden=\"true\"\n    >\n      {{ badgeText() }}\n    </mk-badge>\n  }\n</button>\n\n@if (open()) {\n  <div\n    #panel\n    class=\"mk-notification-center__panel\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n    [id]=\"panelId\"\n    [attr.aria-labelledby]=\"titleId\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"trigger\"\n    placement=\"bottom-end\"\n    [gap]=\"8\"\n    (dismiss)=\"close(false)\"\n    (keydown.escape)=\"onEscape($event)\"\n    (focusout)=\"onPanelFocusout($event)\"\n  >\n    <header class=\"mk-notification-center__header\">\n      <h2 [id]=\"titleId\" class=\"mk-notification-center__title\">\n        {{ panelTitle() }}\n      </h2>\n      <!--\n        aria-disabled (not [disabled]) so the button stays focusable when it\n        disables itself after activation; markAllRead() guards the no-op case.\n      -->\n      <button\n        type=\"button\"\n        class=\"mk-notification-center__mark-all\"\n        [attr.aria-disabled]=\"unreadCount() === 0\"\n        (click)=\"markAllRead()\"\n      >\n        {{ i18n.markAllRead }}\n      </button>\n    </header>\n\n    @if (notifications().length > 0) {\n      <ul\n        class=\"mk-notification-center__list\"\n        [style.max-height]=\"maxHeight()\"\n      >\n        @for (item of notifications(); track item.id) {\n          <li>\n            <button\n              type=\"button\"\n              class=\"mk-notification-center__item\"\n              [class.mk-notification-center__item--unread]=\"!item.read\"\n              (click)=\"onRowClick(item)\"\n            >\n              <span\n                class=\"mk-notification-center__dot\"\n                aria-hidden=\"true\"\n              ></span>\n              @if (!item.read) {\n                <span class=\"mk-visually-hidden\">{{ i18n.unread }}</span>\n              }\n              <span class=\"mk-notification-center__body\">\n                <span class=\"mk-notification-center__item-title\">\n                  {{ item.title }}\n                </span>\n                @if (item.body) {\n                  <span class=\"mk-notification-center__item-text\">\n                    {{ item.body }}\n                  </span>\n                }\n                @if (item.time) {\n                  <span class=\"mk-notification-center__item-time\">\n                    {{ item.time }}\n                  </span>\n                }\n              </span>\n            </button>\n          </li>\n        }\n      </ul>\n    } @else {\n      <mk-empty-state\n        class=\"mk-notification-center__empty\"\n        icon=\"bell\"\n        size=\"sm\"\n        [title]=\"emptyText()\"\n      />\n    }\n  </div>\n}\n", styles: [":host{display:inline-block}.mk-notification-center__trigger{position:relative;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;color:var(--mk-text);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;font-family:var(--mk-font-sans);line-height:1}.mk-notification-center__trigger:hover{background:var(--mk-hover-overlay)}.mk-notification-center__trigger:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-notification-center__count{position:absolute;top:.125rem;inset-inline-end:.125rem;pointer-events:none;transform:translate(35%,-35%)}.mk-notification-center__count:dir(rtl){transform:translate(-35%,-35%)}.mk-notification-center__panel{display:flex;flex-direction:column;width:min(22rem,100vw - var(--mk-space-4));color:var(--mk-text);background:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-lg);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-md);overflow:hidden;animation:mk-notification-center-in var(--mk-duration-fast) var(--mk-ease-out)}.mk-notification-center__panel:focus-visible{outline:none}.mk-notification-center__header{display:flex;align-items:center;justify-content:space-between;gap:var(--mk-space-3);padding:var(--mk-space-3) var(--mk-space-4);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-notification-center__title{margin:0;font-size:var(--mk-font-size-md);font-weight:var(--mk-font-weight-semibold);line-height:var(--mk-line-height-snug)}.mk-notification-center__mark-all{padding:0;color:var(--mk-primary);background:transparent;border:none;cursor:pointer;font:inherit;font-size:var(--mk-font-size-sm);white-space:nowrap}.mk-notification-center__mark-all:hover:not([aria-disabled=true]){text-decoration:underline}.mk-notification-center__mark-all:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-radius:var(--mk-radius-sm)}.mk-notification-center__mark-all[aria-disabled=true]{color:var(--mk-text-muted);cursor:default}.mk-notification-center__list{margin:0;padding:0;list-style:none;overflow-y:auto}.mk-notification-center__list li+li{border-top:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-notification-center__item{display:flex;align-items:flex-start;gap:var(--mk-space-2);width:100%;padding:var(--mk-space-3) var(--mk-space-4);color:inherit;background:transparent;border:none;cursor:pointer;font:inherit;text-align:start}.mk-notification-center__item:hover{background:var(--mk-hover-overlay)}.mk-notification-center__item:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-notification-center__dot{flex:none;width:.5rem;height:.5rem;margin-top:.375rem;border-radius:var(--mk-radius-circle);background:transparent}.mk-notification-center__item--unread .mk-notification-center__dot{background:var(--mk-primary)}.mk-notification-center__body{display:flex;flex-direction:column;gap:var(--mk-space-1);min-width:0}.mk-notification-center__item-title{font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-snug);color:var(--mk-text)}.mk-notification-center__item--unread .mk-notification-center__item-title{font-weight:var(--mk-font-weight-semibold)}.mk-notification-center__item-text{font-size:var(--mk-font-size-sm);line-height:var(--mk-line-height-normal);color:var(--mk-text-muted)}.mk-notification-center__item-time{font-size:var(--mk-font-size-xs);color:var(--mk-text-muted)}@keyframes mk-notification-center-in{0%{opacity:0;transform:translateY(calc(-1 * var(--mk-space-1))) scale(.98)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.mk-notification-center__panel{animation:none}}\n"] }]
+        }], propDecorators: { panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], notifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "notifications", required: false }] }, { type: i0.Output, args: ["notificationsChange"] }], panelTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelTitle", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], read: [{ type: i0.Output, args: ["read"] }], markedAllRead: [{ type: i0.Output, args: ["markedAllRead"] }] } });
+
+/**
+ * Accessible heading for a dialog. Renders as a level-2 heading and exposes a
+ * stable id that {@link MkDialog} wires to the panel's `aria-labelledby`.
+ *
+ * ```html
+ * <mk-dialog>
+ *   <mk-dialog-title>Delete workspace</mk-dialog-title>
+ *   …
+ * </mk-dialog>
+ * ```
+ */
+class MkDialogTitle {
+    /** Stable id used for `aria-labelledby` wiring. */
+    id = input(mkUniqueId('mk-dialog-title'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDialogTitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MkDialogTitle, isStandalone: true, selector: "mk-dialog-title", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "heading", "aria-level": "2" }, properties: { "attr.id": "id()" }, classAttribute: "mk-dialog__title" }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDialogTitle, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mk-dialog-title',
+                    template: '<ng-content />',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'mk-dialog__title',
+                        role: 'heading',
+                        'aria-level': '2',
+                        '[attr.id]': 'id()',
+                    },
+                }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
+/**
+ * Dialog layout — a surface with a sticky header, scrollable body, and sticky
+ * footer, designed to be rendered inside an {@link MkOverlayService} panel. The
+ * header exposes a close button wired to the injected {@link MkOverlayRef} and
+ * the dialog's title is linked to the panel via `aria-labelledby`.
+ *
+ * Slots: `[mkDialogHeader]` / `<mk-dialog-title>` (header), default content
+ * (body), `[mkDialogFooter]` (footer).
+ *
+ * ```html
+ * <mk-dialog>
+ *   <mk-dialog-title>Rename</mk-dialog-title>
+ *   <p>Choose a new name.</p>
+ *   <div mkDialogFooter>
+ *     <button mkButton variant="ghost">Cancel</button>
+ *     <button mkButton>Save</button>
+ *   </div>
+ * </mk-dialog>
+ * ```
+ */
+class MkDialog {
+    host = inject(ElementRef);
+    /** Localised strings (override globally via `provideMkI18n`). */
+    i18n = inject(MK_I18N);
+    overlayRef = inject(MkOverlayRef, { optional: true });
+    /** Optional plain-text title. Ignored when a `<mk-dialog-title>` is projected. */
+    dialogTitle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dialogTitle" }] : /* istanbul ignore next */ []));
+    /** Stable id for the built-in title element. */
+    titleId = input(mkUniqueId('mk-dialog-title'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "titleId" }] : /* istanbul ignore next */ []));
+    /** Hide the header close button. */
+    hideClose = input(false, { ...(ngDevMode ? { debugName: "hideClose" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    constructor() {
+        afterNextRender(() => this.wireLabelledBy());
+    }
+    /** Close the surrounding overlay, if any. */
+    close() {
+        this.overlayRef?.close();
+    }
+    /** Point the owning dialog panel's `aria-labelledby` at the title element. */
+    wireLabelledBy() {
+        const el = this.host.nativeElement;
+        const panel = el.closest('[role="dialog"], [role="alertdialog"]');
+        if (!panel)
+            return;
+        const titleEl = el.querySelector('mk-dialog-title, .mk-dialog__title');
+        if (!titleEl)
+            return;
+        if (!titleEl.id)
+            titleEl.id = this.titleId();
+        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 });
+}
+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 }] }] } });
+
+/**
+ * Internal component backing `MkDialogService.confirm`. Renders a title,
+ * message, and cancel/confirm buttons. Resolves the overlay ref with `true`
+ * on confirm and `false` on cancel. Uses `alertdialog` semantics for the
+ * `danger` tone (set on the panel by the service).
+ */
+class MkConfirmDialog {
+    ref = inject(MkOverlayRef);
+    data = inject(MK_OVERLAY_DATA);
+    i18n = inject(MK_I18N);
+    confirmTone = computed(() => this.data.tone ?? 'primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "confirmTone" }] : /* istanbul ignore next */ []));
+    confirmText = computed(() => this.data.confirmText ?? this.i18n.confirm, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "confirmText" }] : /* istanbul ignore next */ []));
+    cancelText = computed(() => this.data.cancelText ?? this.i18n.cancel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cancelText" }] : /* istanbul ignore next */ []));
+    confirm() {
+        this.ref.close(true);
+    }
+    cancel() {
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkConfirmDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-confirm-dialog', imports: [MkDialog, MkButton, MkIcon], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+        }] });
+
+/**
+ * Internal component backing `MkDialogService.prompt`. Renders a single text
+ * field and resolves the overlay ref with the entered string on confirm, or
+ * `null` on cancel / Escape / backdrop. Submitting the form (Enter) confirms.
+ */
+class MkPromptDialog {
+    ref = inject(MkOverlayRef);
+    data = inject(MK_OVERLAY_DATA);
+    i18n = inject(MK_I18N);
+    inputRef = viewChild('input', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    value = signal(this.data.value ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    confirmText = computed(() => this.data.confirmText ?? this.i18n.ok, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "confirmText" }] : /* istanbul ignore next */ []));
+    cancelText = computed(() => this.data.cancelText ?? this.i18n.cancel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cancelText" }] : /* istanbul ignore next */ []));
+    canConfirm = computed(() => !this.data.required || this.value().trim().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canConfirm" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => this.inputRef()?.nativeElement.focus());
+    }
+    onInput(event) {
+        this.value.set(event.target.value);
+    }
+    submit() {
+        if (this.canConfirm())
+            this.ref.close(this.value());
+    }
+    cancel() {
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkPromptDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-prompt-dialog', imports: [MkDialog, MkButton, MkInput, MkFormField], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }] } });
+
+const DIALOG_PANEL_CLASS = 'mk-dialog-panel';
+/**
+ * Dialog service — a thin, opinionated layer over {@link MkOverlayService} that
+ * renders content on a themed `--mk-surface` panel (shadow, radius, entrance
+ * animation) and adds a `confirm()` convenience.
+ *
+ * ```ts
+ * const ref = dialog.open(EditUserDialog, { data: user });
+ * const saved = await ref.afterClosed;
+ *
+ * if (await dialog.confirm({ title: 'Delete?', message: 'This cannot be undone.', tone: 'danger' })) {
+ *   remove();
+ * }
+ * ```
+ */
+class MkDialogService {
+    overlay = inject(MkOverlayService);
+    i18n = inject(MK_I18N);
+    /** Open `component` inside a themed dialog panel. */
+    open(component, config = {}) {
+        const sizeClass = `mk-dialog-panel--${config.size ?? 'sm'}`;
+        return this.overlay.open(component, {
+            ...config,
+            role: config.role ?? 'dialog',
+            panelClass: this.mergePanelClass(config.panelClass, sizeClass),
+        });
+    }
+    /**
+     * Open a confirmation dialog. Resolves `true` if confirmed, `false` if the
+     * user cancels, presses Escape, or clicks the backdrop.
+     */
+    confirm(data) {
+        const ref = this.open(MkConfirmDialog, {
+            data,
+            role: data.tone === 'danger' ? 'alertdialog' : 'dialog',
+            ariaLabel: data.title,
+        });
+        return ref.afterClosed.then((result) => result === true);
+    }
+    /**
+     * Open a single-button acknowledgement dialog. Resolves when the user
+     * dismisses it (button, Escape, or backdrop).
+     */
+    alert(data) {
+        const ref = this.open(MkConfirmDialog, {
+            data: {
+                ...data,
+                hideCancel: true,
+                confirmText: data.confirmText ?? this.i18n.ok,
+            },
+            role: data.tone === 'danger' ? 'alertdialog' : 'dialog',
+            ariaLabel: data.title,
+        });
+        return ref.afterClosed.then(() => undefined);
+    }
+    /**
+     * Open a single-field prompt dialog. Resolves with the entered string, or
+     * `null` if the user cancels, presses Escape, or clicks the backdrop.
+     */
+    prompt(data) {
+        const ref = this.open(MkPromptDialog, { data, ariaLabel: data.title });
+        return ref.afterClosed.then((result) => result ?? null);
+    }
+    mergePanelClass(panelClass, sizeClass) {
+        const base = [DIALOG_PANEL_CLASS, sizeClass];
+        if (!panelClass)
+            return base;
+        const extra = Array.isArray(panelClass) ? panelClass : [panelClass];
+        return [...base, ...extra];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDialogService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDialogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * A single toast card. Internal to the toast system — rendered by
+ * {@link MkToastContainer}. Displays a tone accent, optional title, message,
+ * optional action button, and (when dismissible) a close button. Auto-dismiss
+ * pauses while the toast is hovered or focused.
+ */
+class MkToast {
+    service = inject(MkToastService);
+    i18n = inject(MK_I18N);
+    /** The toast model to render. */
+    item = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+    /** Assertive alert for danger, polite status otherwise. */
+    role = computed(() => this.item().tone === 'danger' ? 'alert' : 'status', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    dismiss() {
+        this.service.dismiss(this.item().id);
+    }
+    runAction() {
+        this.service.runAction(this.item());
+    }
+    pause() {
+        this.service.pause(this.item().id);
+    }
+    resume() {
+        this.service.resume(this.item().id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkToast, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkToast, isStandalone: true, selector: "mk-toast", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mouseenter": "pause()", "mouseleave": "resume()", "focusin": "pause()", "focusout": "resume()" }, properties: { "attr.data-tone": "item().tone", "attr.role": "role()" }, classAttribute: "mk-toast" }, ngImport: i0, template: "<div class=\"mk-toast__body\">\n  @if (item().title; as title) {\n    <p class=\"mk-toast__title\">{{ title }}</p>\n  }\n  <p class=\"mk-toast__message\">{{ item().message }}</p>\n\n  @if (item().action; as action) {\n    <div class=\"mk-toast__actions\">\n      <button mkButton variant=\"link\" size=\"sm\" (click)=\"runAction()\">\n        {{ action.label }}\n      </button>\n    </div>\n  }\n</div>\n\n@if (item().dismissible) {\n  <button\n    type=\"button\"\n    class=\"mk-toast__close\"\n    [attr.aria-label]=\"i18n.dismiss\"\n    (click)=\"dismiss()\"\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", styles: ["@charset \"UTF-8\";:host{--_accent: var(--mk-info);display:flex;align-items:flex-start;gap:var(--mk-space-3);width:22rem;max-width:calc(100vw - var(--mk-space-8));padding:var(--mk-space-3) var(--mk-space-4);background-color:var(--mk-surface);color:var(--mk-text);border:var(--mk-border-width) solid var(--mk-border-subtle);border-inline-start:3px solid var(--_accent);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg);font-family:var(--mk-font-sans);pointer-events:auto;animation:mk-toast-in var(--mk-duration-normal) var(--mk-ease-emphasized)}@media(prefers-reduced-motion:reduce){:host{animation:none}}:host([data-tone=info]){--_accent: var(--mk-info)}:host([data-tone=success]){--_accent: var(--mk-success)}:host([data-tone=warning]){--_accent: var(--mk-warning)}:host([data-tone=danger]){--_accent: var(--mk-danger)}:host([data-tone=neutral]){--_accent: var(--mk-border-strong)}.mk-toast__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--mk-space-1)}.mk-toast__title{margin:0;font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-semibold);line-height:var(--mk-line-height-snug);color:var(--mk-text)}.mk-toast__message{margin:0;font-size:var(--mk-font-size-sm);line-height:var(--mk-line-height-normal);color:var(--mk-text-muted)}.mk-toast__actions{margin-top:var(--mk-space-1)}.mk-toast__close{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin:-2px calc(var(--mk-space-1) * -1) 0 0;padding:0;background:transparent;border:0;border-radius:var(--mk-radius-sm);color:var(--mk-text-subtle);cursor:pointer;transition:color var(--mk-duration-fast) var(--mk-ease-standard),background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-toast__close:hover{color:var(--mk-text);background-color:var(--mk-hover-overlay)}.mk-toast__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"], dependencies: [{ kind: "component", type: MkButton, selector: "button[mkButton], a[mkButton]", inputs: ["variant", "tone", "size", "loading", "fullWidth", "iconOnly", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkToast, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-toast', imports: [MkButton], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-toast',
+                        '[attr.data-tone]': 'item().tone',
+                        '[attr.role]': 'role()',
+                        '(mouseenter)': 'pause()',
+                        '(mouseleave)': 'resume()',
+                        '(focusin)': 'pause()',
+                        '(focusout)': 'resume()',
+                    }, template: "<div class=\"mk-toast__body\">\n  @if (item().title; as title) {\n    <p class=\"mk-toast__title\">{{ title }}</p>\n  }\n  <p class=\"mk-toast__message\">{{ item().message }}</p>\n\n  @if (item().action; as action) {\n    <div class=\"mk-toast__actions\">\n      <button mkButton variant=\"link\" size=\"sm\" (click)=\"runAction()\">\n        {{ action.label }}\n      </button>\n    </div>\n  }\n</div>\n\n@if (item().dismissible) {\n  <button\n    type=\"button\"\n    class=\"mk-toast__close\"\n    [attr.aria-label]=\"i18n.dismiss\"\n    (click)=\"dismiss()\"\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", styles: ["@charset \"UTF-8\";:host{--_accent: var(--mk-info);display:flex;align-items:flex-start;gap:var(--mk-space-3);width:22rem;max-width:calc(100vw - var(--mk-space-8));padding:var(--mk-space-3) var(--mk-space-4);background-color:var(--mk-surface);color:var(--mk-text);border:var(--mk-border-width) solid var(--mk-border-subtle);border-inline-start:3px solid var(--_accent);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg);font-family:var(--mk-font-sans);pointer-events:auto;animation:mk-toast-in var(--mk-duration-normal) var(--mk-ease-emphasized)}@media(prefers-reduced-motion:reduce){:host{animation:none}}:host([data-tone=info]){--_accent: var(--mk-info)}:host([data-tone=success]){--_accent: var(--mk-success)}:host([data-tone=warning]){--_accent: var(--mk-warning)}:host([data-tone=danger]){--_accent: var(--mk-danger)}:host([data-tone=neutral]){--_accent: var(--mk-border-strong)}.mk-toast__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--mk-space-1)}.mk-toast__title{margin:0;font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-semibold);line-height:var(--mk-line-height-snug);color:var(--mk-text)}.mk-toast__message{margin:0;font-size:var(--mk-font-size-sm);line-height:var(--mk-line-height-normal);color:var(--mk-text-muted)}.mk-toast__actions{margin-top:var(--mk-space-1)}.mk-toast__close{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin:-2px calc(var(--mk-space-1) * -1) 0 0;padding:0;background:transparent;border:0;border-radius:var(--mk-radius-sm);color:var(--mk-text-subtle);cursor:pointer;transition:color var(--mk-duration-fast) var(--mk-ease-standard),background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-toast__close:hover{color:var(--mk-text);background-color:var(--mk-hover-overlay)}.mk-toast__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"] }]
+        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }] } });
+
+/**
+ * Fixed, bottom-right stack that renders the active toasts from
+ * {@link MkToastService}. Mounted once, lazily, into `document.body` by the
+ * service — not intended for direct template use.
+ */
+class MkToastContainer {
+    service = inject(MkToastService);
+    /** Live list of toasts to render. */
+    toasts = this.service.toasts;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkToastContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkToastContainer, isStandalone: true, selector: "mk-toast-container", host: { attributes: { "aria-label": "Notifications" }, classAttribute: "mk-toast-container" }, ngImport: i0, template: "@for (toast of toasts(); track toast.id) {\n  <mk-toast [item]=\"toast\" />\n}\n", styles: [":host{position:fixed;bottom:calc(var(--mk-space-4) + env(safe-area-inset-bottom,0px));inset-inline-end:var(--mk-space-4);z-index:var(--mk-z-toast);display:flex;flex-direction:column;gap:var(--mk-space-2);align-items:flex-end;max-height:calc(100vh - var(--mk-space-8));max-height:calc(100dvh - var(--mk-space-8));overflow:visible;pointer-events:none}\n"], dependencies: [{ kind: "component", type: MkToast, selector: "mk-toast", inputs: ["item"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkToastContainer, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-toast-container', imports: [MkToast], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-toast-container',
+                        'aria-label': 'Notifications',
+                    }, template: "@for (toast of toasts(); track toast.id) {\n  <mk-toast [item]=\"toast\" />\n}\n", styles: [":host{position:fixed;bottom:calc(var(--mk-space-4) + env(safe-area-inset-bottom,0px));inset-inline-end:var(--mk-space-4);z-index:var(--mk-z-toast);display:flex;flex-direction:column;gap:var(--mk-space-2);align-items:flex-end;max-height:calc(100vh - var(--mk-space-8));max-height:calc(100dvh - var(--mk-space-8));overflow:visible;pointer-events:none}\n"] }]
+        }] });
+
+const DEFAULT_DURATION$1 = 5000;
+let nextId$1 = 0;
+/**
+ * Toast service — enqueues transient notifications rendered by a single,
+ * lazily-mounted {@link MkToastContainer} at the bottom-right of the viewport.
+ * Each rendered toast is itself a live region (`role="alert"` for `danger`,
+ * else `role="status"`), so assistive tech announces it exactly once. Toasts
+ * auto-dismiss after `duration` ms unless it is `0`.
+ *
+ * ```ts
+ * toasts.success('Saved');
+ * toasts.show({ title: 'Upload failed', message: 'Retry?', tone: 'danger',
+ *   duration: 0, action: { label: 'Retry', handler: () => retry() } });
+ * ```
+ */
+class MkToastService {
+    appRef = inject(ApplicationRef);
+    envInjector = inject(EnvironmentInjector);
+    document = inject(DOCUMENT);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    _toasts = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_toasts" }] : /* istanbul ignore next */ []));
+    /** Reactive list of currently visible toasts. */
+    toasts = this._toasts.asReadonly();
+    timers = new Map();
+    containerRef;
+    /** Show a toast, returning its id (usable with {@link dismiss}). */
+    show(config) {
+        const item = {
+            id: nextId$1++,
+            title: config.title,
+            message: config.message,
+            tone: config.tone ?? 'info',
+            duration: config.duration ?? DEFAULT_DURATION$1,
+            dismissible: config.dismissible ?? true,
+            action: config.action,
+        };
+        if (!this.isBrowser)
+            return item.id;
+        this.ensureContainer();
+        // The toast element itself carries role="alert"/"status" — no separate
+        // live-announcer call, or screen readers would read everything twice.
+        this._toasts.update((list) => [...list, item]);
+        if (item.duration > 0)
+            this.startTimer(item.id, item.duration);
+        return item.id;
+    }
+    /** Show an `info` toast. */
+    info(message, config = {}) {
+        return this.show({ ...config, message, tone: 'info' });
+    }
+    /** Show a `success` toast. */
+    success(message, config = {}) {
+        return this.show({ ...config, message, tone: 'success' });
+    }
+    /** Show a `warning` toast. */
+    warning(message, config = {}) {
+        return this.show({ ...config, message, tone: 'warning' });
+    }
+    /** Show a `danger` toast. */
+    danger(message, config = {}) {
+        return this.show({ ...config, message, tone: 'danger' });
+    }
+    /** Show a `neutral` toast. */
+    neutral(message, config = {}) {
+        return this.show({ ...config, message, tone: 'neutral' });
+    }
+    /** Dismiss a toast by id. */
+    dismiss(id) {
+        this.clearTimer(id);
+        this._toasts.update((list) => list.filter((t) => t.id !== id));
+    }
+    /** Dismiss every visible toast. */
+    clear() {
+        this.timers.forEach((t) => clearTimeout(t.handle));
+        this.timers.clear();
+        this._toasts.set([]);
+    }
+    /** Run a toast action, then dismiss it. */
+    runAction(item) {
+        item.action?.handler?.();
+        this.dismiss(item.id);
+    }
+    /** Pause a toast's auto-dismiss countdown (e.g. on hover/focus). */
+    pause(id) {
+        const timer = this.timers.get(id);
+        if (!timer)
+            return;
+        clearTimeout(timer.handle);
+        timer.remaining -= Date.now() - timer.startedAt;
+    }
+    /** Resume a paused countdown. */
+    resume(id) {
+        const timer = this.timers.get(id);
+        if (!timer)
+            return;
+        this.startTimer(id, Math.max(timer.remaining, 0));
+    }
+    startTimer(id, duration) {
+        this.timers.set(id, {
+            handle: setTimeout(() => this.dismiss(id), duration),
+            remaining: duration,
+            startedAt: Date.now(),
+        });
+    }
+    clearTimer(id) {
+        const timer = this.timers.get(id);
+        if (timer)
+            clearTimeout(timer.handle);
+        this.timers.delete(id);
+    }
+    ensureContainer() {
+        if (this.containerRef)
+            return;
+        const ref = createComponent(MkToastContainer, {
+            environmentInjector: this.envInjector,
+        });
+        this.appRef.attachView(ref.hostView);
+        this.document.body.appendChild(ref.location.nativeElement);
+        this.containerRef = ref;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkToastService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkToastService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * The visual snackbar bar. Internal to the snackbar system — rendered by
+ * {@link MkSnackbarContainer}. Shows a message, an optional action button and
+ * (when `dismissible`) a close button. Auto-dismiss pauses on hover/focus.
+ */
+class MkSnackbar {
+    service = inject(MkSnackbarService);
+    i18n = inject(MK_I18N);
+    /** The snackbar model to render. */
+    item = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+    /** Assertive alert for danger/warning, polite status otherwise. */
+    role = computed(() => this.item().tone === 'danger' || this.item().tone === 'warning'
+        ? 'alert'
+        : 'status', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    runAction() {
+        this.service.runAction(this.item().id);
+    }
+    dismiss() {
+        this.service.dismiss(this.item().id);
+    }
+    pause() {
+        this.service.pause();
+    }
+    resume() {
+        this.service.resume();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkSnackbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkSnackbar, isStandalone: true, selector: "mk-snackbar", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mouseenter": "pause()", "mouseleave": "resume()", "focusin": "pause()", "focusout": "resume()" }, properties: { "attr.data-tone": "item().tone", "attr.role": "role()" }, classAttribute: "mk-snackbar" }, ngImport: i0, template: "<span class=\"mk-snackbar__message\">{{ item().message }}</span>\n\n@if (item().actionLabel) {\n  <button type=\"button\" class=\"mk-snackbar__action\" (click)=\"runAction()\">\n    {{ item().actionLabel }}\n  </button>\n}\n\n@if (item().dismissible) {\n  <button\n    type=\"button\"\n    class=\"mk-snackbar__close\"\n    [attr.aria-label]=\"i18n.dismiss\"\n    (click)=\"dismiss()\"\n  ></button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:var(--mk-space-3);min-width:18rem;max-width:min(36rem,100vw - 2 * var(--mk-space-4));padding:var(--mk-space-3) var(--mk-space-4);background-color:var(--mk-surface-inverse);color:var(--mk-text-inverse);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-md);pointer-events:auto;animation:mk-snackbar-in var(--mk-duration-normal) var(--mk-ease-emphasized)}:host([data-tone=info]){border-inline-start:3px solid var(--mk-info)}:host([data-tone=success]){border-inline-start:3px solid var(--mk-success)}:host([data-tone=warning]){border-inline-start:3px solid var(--mk-warning)}:host([data-tone=danger]){border-inline-start:3px solid var(--mk-danger)}.mk-snackbar__message{flex:1 1 auto;min-width:0;line-height:var(--mk-line-height-snug)}.mk-snackbar__action{flex:none;padding:var(--mk-space-1) var(--mk-space-2);margin:calc(-1 * var(--mk-space-1)) 0;background:transparent;border:none;border-radius:var(--mk-radius-sm);color:color-mix(in srgb,var(--mk-primary) 65%,white);font-family:inherit;font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-semibold);text-transform:uppercase;letter-spacing:.02em;cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-snackbar__action:hover{background-color:color-mix(in srgb,transparent 88%,white)}.mk-snackbar__action:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-snackbar__close{position:relative;flex:none;width:1.5rem;height:1.5rem;padding:0;background:transparent;border:none;border-radius:var(--mk-radius-circle);color:inherit;opacity:.7;cursor:pointer;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard),background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-snackbar__close:hover{opacity:1;background-color:color-mix(in srgb,transparent 85%,white)}.mk-snackbar__close:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-snackbar__close:before,.mk-snackbar__close:after{content:\"\";position:absolute;top:50%;left:50%;width:.75rem;height:2px;background-color:currentColor;border-radius:var(--mk-radius-pill)}.mk-snackbar__close:before{transform:translate(-50%,-50%) rotate(45deg)}.mk-snackbar__close:after{transform:translate(-50%,-50%) rotate(-45deg)}@keyframes mk-snackbar-in{0%{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){:host{animation:none}.mk-snackbar__action,.mk-snackbar__close{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkSnackbar, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-snackbar', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-snackbar',
+                        '[attr.data-tone]': 'item().tone',
+                        '[attr.role]': 'role()',
+                        '(mouseenter)': 'pause()',
+                        '(mouseleave)': 'resume()',
+                        '(focusin)': 'pause()',
+                        '(focusout)': 'resume()',
+                    }, template: "<span class=\"mk-snackbar__message\">{{ item().message }}</span>\n\n@if (item().actionLabel) {\n  <button type=\"button\" class=\"mk-snackbar__action\" (click)=\"runAction()\">\n    {{ item().actionLabel }}\n  </button>\n}\n\n@if (item().dismissible) {\n  <button\n    type=\"button\"\n    class=\"mk-snackbar__close\"\n    [attr.aria-label]=\"i18n.dismiss\"\n    (click)=\"dismiss()\"\n  ></button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:var(--mk-space-3);min-width:18rem;max-width:min(36rem,100vw - 2 * var(--mk-space-4));padding:var(--mk-space-3) var(--mk-space-4);background-color:var(--mk-surface-inverse);color:var(--mk-text-inverse);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-md);pointer-events:auto;animation:mk-snackbar-in var(--mk-duration-normal) var(--mk-ease-emphasized)}:host([data-tone=info]){border-inline-start:3px solid var(--mk-info)}:host([data-tone=success]){border-inline-start:3px solid var(--mk-success)}:host([data-tone=warning]){border-inline-start:3px solid var(--mk-warning)}:host([data-tone=danger]){border-inline-start:3px solid var(--mk-danger)}.mk-snackbar__message{flex:1 1 auto;min-width:0;line-height:var(--mk-line-height-snug)}.mk-snackbar__action{flex:none;padding:var(--mk-space-1) var(--mk-space-2);margin:calc(-1 * var(--mk-space-1)) 0;background:transparent;border:none;border-radius:var(--mk-radius-sm);color:color-mix(in srgb,var(--mk-primary) 65%,white);font-family:inherit;font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-semibold);text-transform:uppercase;letter-spacing:.02em;cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-snackbar__action:hover{background-color:color-mix(in srgb,transparent 88%,white)}.mk-snackbar__action:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-snackbar__close{position:relative;flex:none;width:1.5rem;height:1.5rem;padding:0;background:transparent;border:none;border-radius:var(--mk-radius-circle);color:inherit;opacity:.7;cursor:pointer;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard),background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-snackbar__close:hover{opacity:1;background-color:color-mix(in srgb,transparent 85%,white)}.mk-snackbar__close:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-snackbar__close:before,.mk-snackbar__close:after{content:\"\";position:absolute;top:50%;left:50%;width:.75rem;height:2px;background-color:currentColor;border-radius:var(--mk-radius-pill)}.mk-snackbar__close:before{transform:translate(-50%,-50%) rotate(45deg)}.mk-snackbar__close:after{transform:translate(-50%,-50%) rotate(-45deg)}@keyframes mk-snackbar-in{0%{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){:host{animation:none}.mk-snackbar__action,.mk-snackbar__close{transition:none}}\n"] }]
+        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }] } });
+
+/**
+ * Fixed, bottom-centre host that renders the single active snackbar from
+ * {@link MkSnackbarService}. Mounted once, lazily, into `document.body` by the
+ * service — not intended for direct template use.
+ */
+class MkSnackbarContainer {
+    service = inject(MkSnackbarService);
+    /** The active snackbar to render, or `null`. */
+    active = this.service.active;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkSnackbarContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkSnackbarContainer, isStandalone: true, selector: "mk-snackbar-container", host: { classAttribute: "mk-snackbar-container" }, ngImport: i0, template: "@if (active(); as item) {\n  <mk-snackbar [item]=\"item\" />\n}\n", styles: [":host{position:fixed;bottom:calc(var(--mk-space-5) + env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%);z-index:var(--mk-z-toast);display:flex;justify-content:center;pointer-events:none}\n"], dependencies: [{ kind: "component", type: MkSnackbar, selector: "mk-snackbar", inputs: ["item"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkSnackbarContainer, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-snackbar-container', imports: [MkSnackbar], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-snackbar-container',
+                    }, template: "@if (active(); as item) {\n  <mk-snackbar [item]=\"item\" />\n}\n", styles: [":host{position:fixed;bottom:calc(var(--mk-space-5) + env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%);z-index:var(--mk-z-toast);display:flex;justify-content:center;pointer-events:none}\n"] }]
+        }] });
+
+const DEFAULT_DURATION = 5000;
+let nextId = 0;
+/**
+ * Handle to an opened snackbar. Await {@link onAction} to react to the action
+ * button, or {@link afterDismissed} to run code once it closes.
+ */
+class MkSnackbarRef {
+    id;
+    service;
+    actionResolve;
+    dismissResolve;
+    actionPromise = new Promise((r) => {
+        this.actionResolve = r;
+    });
+    dismissPromise = new Promise((r) => {
+        this.dismissResolve = r;
+    });
+    constructor(
+    /** Unique id of the snackbar this ref controls. */
+    id, service) {
+        this.id = id;
+        this.service = service;
+    }
+    /** Dismiss the snackbar programmatically. */
+    dismiss() {
+        this.service.dismiss(this.id);
+    }
+    /** Resolves when the action button is activated. */
+    onAction() {
+        return this.actionPromise;
+    }
+    /** Resolves when the snackbar has closed, with the reason it closed. */
+    afterDismissed() {
+        return this.dismissPromise;
+    }
+    /** @internal */
+    _notifyAction() {
+        this.actionResolve();
+    }
+    /** @internal */
+    _notifyDismissed(reason) {
+        this.dismissResolve(reason);
+    }
+}
+/**
+ * Snackbar service — shows a single, brief message at the bottom-centre of the
+ * viewport with an optional action button, following the Material snackbar
+ * model: only one is visible at a time, and opening a new one replaces the
+ * current. For stacked, persistent notifications use `MkToastService` instead.
+ *
+ * ```ts
+ * const ref = snackbar.open('Message archived', 'Undo');
+ * ref.onAction().then(() => restore());
+ *
+ * snackbar.open('Changes saved', undefined, { tone: 'success' });
+ * ```
+ */
+class MkSnackbarService {
+    appRef = inject(ApplicationRef);
+    envInjector = inject(EnvironmentInjector);
+    document = inject(DOCUMENT);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    _active = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_active" }] : /* istanbul ignore next */ []));
+    /** The currently visible snackbar, or `null`. */
+    active = this._active.asReadonly();
+    refs = new Map();
+    timer;
+    remaining = 0;
+    startedAt = 0;
+    containerRef;
+    /**
+     * Open a snackbar. `action` is the (optional) button label — react to it via
+     * the returned ref's {@link MkSnackbarRef.onAction}.
+     */
+    open(message, action, config = {}) {
+        const id = nextId++;
+        const ref = new MkSnackbarRef(id, this);
+        if (!this.isBrowser)
+            return ref;
+        // Replace any currently-open snackbar (Material single-slot behaviour).
+        const current = this._active();
+        if (current)
+            this.dismiss(current.id);
+        const item = {
+            id,
+            message,
+            actionLabel: action,
+            tone: config.tone ?? 'neutral',
+            dismissible: config.dismissible ?? false,
+        };
+        this.ensureContainer();
+        this.refs.set(id, ref);
+        // The snackbar element itself carries role="alert"/"status" — no separate
+        // live-announcer call, or screen readers would read everything twice.
+        this._active.set(item);
+        const duration = config.duration ?? DEFAULT_DURATION;
+        if (duration > 0)
+            this.startTimer(id, duration);
+        return ref;
+    }
+    /** Dismiss the snackbar with the given id (if it is the active one). */
+    dismiss(id) {
+        this.close(id, 'dismiss');
+    }
+    /** Run the action for the active snackbar, then close it. */
+    runAction(id) {
+        this.refs.get(id)?._notifyAction();
+        this.close(id, 'action');
+    }
+    /** Pause the auto-dismiss countdown (e.g. on hover/focus). */
+    pause() {
+        if (!this.timer)
+            return;
+        clearTimeout(this.timer);
+        this.timer = undefined;
+        this.remaining -= Date.now() - this.startedAt;
+    }
+    /** Resume a paused countdown. */
+    resume() {
+        const active = this._active();
+        if (!active || this.timer || this.remaining <= 0)
+            return;
+        this.startTimer(active.id, this.remaining);
+    }
+    close(id, reason) {
+        if (this._active()?.id !== id)
+            return;
+        this.clearTimer();
+        this._active.set(null);
+        const ref = this.refs.get(id);
+        this.refs.delete(id);
+        ref?._notifyDismissed(reason);
+    }
+    startTimer(id, duration) {
+        this.remaining = duration;
+        this.startedAt = Date.now();
+        this.timer = setTimeout(() => this.close(id, 'timeout'), duration);
+    }
+    clearTimer() {
+        if (this.timer)
+            clearTimeout(this.timer);
+        this.timer = undefined;
+        this.remaining = 0;
+    }
+    ensureContainer() {
+        if (this.containerRef)
+            return;
+        const ref = createComponent(MkSnackbarContainer, {
+            environmentInjector: this.envInjector,
+        });
+        this.appRef.attachView(ref.hostView);
+        this.document.body.appendChild(ref.location.nativeElement);
+        this.containerRef = ref;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkSnackbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkSnackbarService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkSnackbarService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/** Distance in px the sheet must be dragged down before it dismisses. */
+const DISMISS_THRESHOLD = 120;
+/**
+ * BottomSheet layout — the surface rendered inside an {@link MkOverlayService}
+ * panel by {@link MkBottomSheetService}. Provides a drag handle (swipe down to
+ * dismiss), an optional titled header with a close button, and a scrollable
+ * body for projected content.
+ *
+ * Slots: `[mkBottomSheetHeader]` (extra header content), default content
+ * (body), `[mkBottomSheetFooter]` (sticky footer).
+ *
+ * ```html
+ * <mk-bottom-sheet sheetTitle="Share">
+ *   <button mkButton fullWidth variant="ghost">Copy link</button>
+ *   <button mkButton fullWidth variant="ghost">Email</button>
+ * </mk-bottom-sheet>
+ * ```
+ */
+class MkBottomSheet {
+    host = inject(ElementRef);
+    /** Localised strings (override globally via `provideMkI18n`). */
+    i18n = inject(MK_I18N);
+    overlayRef = inject(MkOverlayRef, { optional: true });
+    /** Optional plain-text title rendered in the header. */
+    sheetTitle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "sheetTitle" }] : /* istanbul ignore next */ []));
+    /** Stable id for the built-in title element. */
+    titleId = input(mkUniqueId('mk-bottom-sheet-title'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "titleId" }] : /* istanbul ignore next */ []));
+    /** Hide the drag handle (also disables swipe-to-dismiss). */
+    hideHandle = input(false, { ...(ngDevMode ? { debugName: "hideHandle" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Hide the header close button. */
+    hideClose = input(false, { ...(ngDevMode ? { debugName: "hideClose" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    panel = null;
+    dragging = false;
+    startY = 0;
+    constructor() {
+        afterNextRender(() => this.wireLabelledBy());
+    }
+    /** Close the surrounding overlay, if any. */
+    close() {
+        this.overlayRef?.close();
+    }
+    onHandlePointerDown(event) {
+        this.panel ??= this.host.nativeElement.closest('.mk-bottom-sheet-panel');
+        if (!this.panel)
+            return;
+        this.dragging = true;
+        this.startY = event.clientY;
+        event.target.setPointerCapture?.(event.pointerId);
+        this.panel.style.transition = 'none';
+    }
+    onHandlePointerMove(event) {
+        if (!this.dragging || !this.panel)
+            return;
+        const dy = Math.max(0, event.clientY - this.startY);
+        this.panel.style.transform = `translateY(${dy}px)`;
+    }
+    onHandlePointerUp(event) {
+        if (!this.dragging || !this.panel)
+            return;
+        this.dragging = false;
+        const dy = Math.max(0, event.clientY - this.startY);
+        this.panel.style.transition = '';
+        if (dy > DISMISS_THRESHOLD) {
+            this.overlayRef?.close();
+        }
+        else {
+            this.panel.style.transform = '';
+        }
+    }
+    /** Point the owning panel's `aria-labelledby` at the title element. */
+    wireLabelledBy() {
+        const el = this.host.nativeElement;
+        const panel = el.closest('[role="dialog"], [role="alertdialog"]');
+        const titleEl = el.querySelector('.mk-bottom-sheet__title');
+        if (!panel || !titleEl)
+            return;
+        if (!titleEl.id)
+            titleEl.id = this.titleId();
+        panel.setAttribute('aria-labelledby', titleEl.id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBottomSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkBottomSheet, isStandalone: true, selector: "mk-bottom-sheet", inputs: { sheetTitle: { classPropertyName: "sheetTitle", publicName: "sheetTitle", isSignal: true, isRequired: false, transformFunction: null }, titleId: { classPropertyName: "titleId", publicName: "titleId", isSignal: true, isRequired: false, transformFunction: null }, hideHandle: { classPropertyName: "hideHandle", publicName: "hideHandle", isSignal: true, isRequired: false, transformFunction: null }, hideClose: { classPropertyName: "hideClose", publicName: "hideClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "mk-bottom-sheet" }, ngImport: i0, template: "@if (!hideHandle()) {\n  <div\n    class=\"mk-bottom-sheet__handle-area\"\n    (pointerdown)=\"onHandlePointerDown($event)\"\n    (pointermove)=\"onHandlePointerMove($event)\"\n    (pointerup)=\"onHandlePointerUp($event)\"\n    (pointercancel)=\"onHandlePointerUp($event)\"\n  >\n    <span class=\"mk-bottom-sheet__handle\" aria-hidden=\"true\"></span>\n  </div>\n}\n\n@if (sheetTitle() || !hideClose()) {\n  <header class=\"mk-bottom-sheet__header\">\n    @if (sheetTitle(); as heading) {\n      <h2 class=\"mk-bottom-sheet__title\" [id]=\"titleId()\">{{ heading }}</h2>\n    }\n    <ng-content select=\"[mkBottomSheetHeader]\" />\n    @if (!hideClose()) {\n      <button\n        type=\"button\"\n        class=\"mk-bottom-sheet__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\n<div class=\"mk-bottom-sheet__body\">\n  <ng-content />\n</div>\n\n<footer class=\"mk-bottom-sheet__footer\">\n  <ng-content select=\"[mkBottomSheetFooter]\" />\n</footer>\n", styles: ["@charset \"UTF-8\";.mk-bottom-sheet{display:flex;flex-direction:column;min-height:0;max-height:inherit;flex:1 1 auto;font-family:var(--mk-font-sans)}.mk-bottom-sheet__handle-area{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:var(--mk-space-2) 0;cursor:grab;touch-action:none}.mk-bottom-sheet__handle-area:active{cursor:grabbing}.mk-bottom-sheet__handle{width:2.25rem;height:.25rem;border-radius:var(--mk-radius-pill);background-color:var(--mk-border-strong)}.mk-bottom-sheet__header{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:var(--mk-space-3);flex-shrink:0;padding:var(--mk-space-2) var(--mk-space-5) var(--mk-space-3);background-color:var(--mk-surface)}.mk-bottom-sheet__title{flex:1;min-width:0;margin:0;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-bottom-sheet__close{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;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-bottom-sheet__close:hover{color:var(--mk-text);background-color:var(--mk-hover-overlay)}.mk-bottom-sheet__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-bottom-sheet__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--mk-space-2) var(--mk-space-5) var(--mk-space-5);font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-normal);color:var(--mk-text)}.mk-bottom-sheet__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-bottom-sheet__footer:empty{display:none}@media(prefers-reduced-motion:reduce){.mk-bottom-sheet__close{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBottomSheet, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-bottom-sheet', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'mk-bottom-sheet' }, template: "@if (!hideHandle()) {\n  <div\n    class=\"mk-bottom-sheet__handle-area\"\n    (pointerdown)=\"onHandlePointerDown($event)\"\n    (pointermove)=\"onHandlePointerMove($event)\"\n    (pointerup)=\"onHandlePointerUp($event)\"\n    (pointercancel)=\"onHandlePointerUp($event)\"\n  >\n    <span class=\"mk-bottom-sheet__handle\" aria-hidden=\"true\"></span>\n  </div>\n}\n\n@if (sheetTitle() || !hideClose()) {\n  <header class=\"mk-bottom-sheet__header\">\n    @if (sheetTitle(); as heading) {\n      <h2 class=\"mk-bottom-sheet__title\" [id]=\"titleId()\">{{ heading }}</h2>\n    }\n    <ng-content select=\"[mkBottomSheetHeader]\" />\n    @if (!hideClose()) {\n      <button\n        type=\"button\"\n        class=\"mk-bottom-sheet__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\n<div class=\"mk-bottom-sheet__body\">\n  <ng-content />\n</div>\n\n<footer class=\"mk-bottom-sheet__footer\">\n  <ng-content select=\"[mkBottomSheetFooter]\" />\n</footer>\n", styles: ["@charset \"UTF-8\";.mk-bottom-sheet{display:flex;flex-direction:column;min-height:0;max-height:inherit;flex:1 1 auto;font-family:var(--mk-font-sans)}.mk-bottom-sheet__handle-area{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:var(--mk-space-2) 0;cursor:grab;touch-action:none}.mk-bottom-sheet__handle-area:active{cursor:grabbing}.mk-bottom-sheet__handle{width:2.25rem;height:.25rem;border-radius:var(--mk-radius-pill);background-color:var(--mk-border-strong)}.mk-bottom-sheet__header{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:var(--mk-space-3);flex-shrink:0;padding:var(--mk-space-2) var(--mk-space-5) var(--mk-space-3);background-color:var(--mk-surface)}.mk-bottom-sheet__title{flex:1;min-width:0;margin:0;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-bottom-sheet__close{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;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-bottom-sheet__close:hover{color:var(--mk-text);background-color:var(--mk-hover-overlay)}.mk-bottom-sheet__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-bottom-sheet__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--mk-space-2) var(--mk-space-5) var(--mk-space-5);font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-normal);color:var(--mk-text)}.mk-bottom-sheet__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-bottom-sheet__footer:empty{display:none}@media(prefers-reduced-motion:reduce){.mk-bottom-sheet__close{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { sheetTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "sheetTitle", required: false }] }], titleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleId", required: false }] }], hideHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideHandle", required: false }] }], hideClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideClose", required: false }] }] } });
+
+const BOTTOM_SHEET_PANEL_CLASS = 'mk-bottom-sheet-panel';
+/**
+ * BottomSheet service — a thin layer over {@link MkOverlayService} that renders
+ * a component in a panel anchored to the bottom edge of the viewport: full
+ * width on small screens, a centred card capped at ~42rem on large ones. It
+ * slides up on open and can be swiped down to dismiss (via {@link MkBottomSheet}).
+ *
+ * Use it for contextual actions, pickers and mobile-style menus. For a centred
+ * modal use `MkDialogService` instead.
+ *
+ * ```ts
+ * const ref = bottomSheet.open(ShareSheet, { data: { url } });
+ * const choice = await ref.afterClosed;
+ * ```
+ */
+class MkBottomSheetService {
+    overlay = inject(MkOverlayService);
+    /** Open `component` inside a bottom-anchored sheet panel. */
+    open(component, config = {}) {
+        return this.overlay.open(component, {
+            ...config,
+            role: config.role ?? 'dialog',
+            panelClass: this.mergePanelClass(config.panelClass),
+        });
+    }
+    mergePanelClass(panelClass) {
+        if (!panelClass)
+            return [BOTTOM_SHEET_PANEL_CLASS];
+        const extra = Array.isArray(panelClass) ? panelClass : [panelClass];
+        return [BOTTOM_SHEET_PANEL_CLASS, ...extra];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBottomSheetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBottomSheetService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBottomSheetService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Banner — a persistent, full-width page/section message with a tone, optional
+ * title, an actions slot and optional dismiss. Heavier than an inline
+ * {@link MkAlert} toast; use it for standing notices ("Trial ends in 3 days").
+ *
+ * Project an icon with `[mkBannerIcon]` and buttons with `[mkBannerActions]`.
+ * Danger/warning banners announce assertively (`role="alert"`).
+ *
+ * ```html
+ * <mk-banner tone="warning" title="Storage almost full" dismissible>
+ *   You've used 90% of your quota.
+ *   <button mkButton size="sm" mkBannerActions>Upgrade</button>
+ * </mk-banner>
+ * ```
+ */
+class MkBanner {
+    /** Localised strings (override globally via `provideMkI18n`). */
+    i18n = inject(MK_I18N);
+    /** Semantic color tone. */
+    tone = input('info', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /** Optional bold title above the message. */
+    title = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Show a dismiss (×) button. */
+    dismissible = input(false, { ...(ngDevMode ? { debugName: "dismissible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Two-way open state; set false to hide. */
+    open = model(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Emitted when the banner is dismissed. */
+    dismissed = output();
+    role = computed(() => {
+        const t = this.tone();
+        return t === 'danger' || t === 'warning' ? 'alert' : 'status';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    dismiss() {
+        this.open.set(false);
+        this.dismissed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBanner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkBanner, isStandalone: true, selector: "mk-banner", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", dismissed: "dismissed" }, host: { properties: { "attr.data-tone": "tone()" }, classAttribute: "mk-banner" }, ngImport: i0, template: "@if (open()) {\n  <div class=\"mk-banner__box\">\n    <span class=\"mk-banner__icon\" aria-hidden=\"true\"\n      ><ng-content select=\"[mkBannerIcon]\"\n    /></span>\n    <!-- The live region wraps only the title + message, keeping the actions\n         and the dismiss button out of what gets announced. -->\n    <div class=\"mk-banner__body\" [attr.role]=\"role()\">\n      @if (title()) {\n        <p class=\"mk-banner__title\">{{ title() }}</p>\n      }\n      <div class=\"mk-banner__message\"><ng-content /></div>\n    </div>\n    <div class=\"mk-banner__actions\"><ng-content select=\"[mkBannerActions]\" /></div>\n    @if (dismissible()) {\n      <button\n        type=\"button\"\n        class=\"mk-banner__close\"\n        [attr.aria-label]=\"i18n.dismiss\"\n        (click)=\"dismiss()\"\n      >\n        <span aria-hidden=\"true\">&times;</span>\n      </button>\n    }\n  </div>\n}\n", styles: [":host{display:contents;--_main: var(--mk-info);--_hover: var(--mk-info-hover);--_active: var(--mk-info-hover);--_contrast: var(--mk-info-contrast);--_subtle: var(--mk-info-subtle);--_subtle-text: var(--mk-info-subtle-text)}:host([data-tone=primary]){--_main: var(--mk-primary);--_hover: var(--mk-primary-hover);--_active: var(--mk-primary-active);--_contrast: var(--mk-primary-contrast);--_subtle: var(--mk-primary-subtle);--_subtle-text: var(--mk-primary-subtle-text)}:host([data-tone=success]){--_main: var(--mk-success);--_hover: var(--mk-success-hover);--_active: var(--mk-success-hover);--_contrast: var(--mk-success-contrast);--_subtle: var(--mk-success-subtle);--_subtle-text: var(--mk-success-subtle-text)}:host([data-tone=warning]){--_main: var(--mk-warning);--_hover: var(--mk-warning-hover);--_active: var(--mk-warning-hover);--_contrast: var(--mk-warning-contrast);--_subtle: var(--mk-warning-subtle);--_subtle-text: var(--mk-warning-subtle-text)}:host([data-tone=danger]){--_main: var(--mk-danger);--_hover: var(--mk-danger-hover);--_active: var(--mk-danger-hover);--_contrast: var(--mk-danger-contrast);--_subtle: var(--mk-danger-subtle);--_subtle-text: var(--mk-danger-subtle-text)}:host([data-tone=info]){--_main: var(--mk-info);--_hover: var(--mk-info-hover);--_active: var(--mk-info-hover);--_contrast: var(--mk-info-contrast);--_subtle: var(--mk-info-subtle);--_subtle-text: var(--mk-info-subtle-text)}:host([data-tone=neutral]){--_main: var(--mk-surface-inverse);--_hover: var(--mk-surface-inverse);--_active: var(--mk-surface-inverse);--_contrast: var(--mk-text-inverse);--_subtle: var(--mk-neutral-subtle);--_subtle-text: var(--mk-neutral-subtle-text)}.mk-banner__box{display:flex;align-items:flex-start;gap:var(--mk-space-3);padding:var(--mk-space-3) var(--mk-space-4);background-color:var(--_subtle);border:var(--mk-border-width) solid transparent;border-inline-start:3px solid var(--_main);border-radius:var(--mk-radius-md);color:var(--mk-text);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-sm);line-height:var(--mk-line-height-normal)}.mk-banner__icon{flex:none;display:grid;place-items:center;color:var(--_main);line-height:0}.mk-banner__icon:empty{display:none}.mk-banner__body{flex:1 1 auto;min-width:0}.mk-banner__title{margin:0 0 var(--mk-space-1);font-weight:var(--mk-font-weight-semibold);color:var(--_subtle-text)}.mk-banner__message{color:var(--mk-text)}.mk-banner__actions{flex:none;display:flex;align-items:center;gap:var(--mk-space-2)}.mk-banner__actions:empty{display:none}.mk-banner__close{flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;padding:0;font-size:var(--mk-font-size-lg);line-height:1;color:var(--mk-text-muted);background:transparent;border:none;border-radius:var(--mk-radius-circle);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-banner__close:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-banner__close:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}@media(prefers-reduced-motion:reduce){.mk-banner__close{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBanner, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-banner', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-banner',
+                        '[attr.data-tone]': 'tone()',
+                    }, template: "@if (open()) {\n  <div class=\"mk-banner__box\">\n    <span class=\"mk-banner__icon\" aria-hidden=\"true\"\n      ><ng-content select=\"[mkBannerIcon]\"\n    /></span>\n    <!-- The live region wraps only the title + message, keeping the actions\n         and the dismiss button out of what gets announced. -->\n    <div class=\"mk-banner__body\" [attr.role]=\"role()\">\n      @if (title()) {\n        <p class=\"mk-banner__title\">{{ title() }}</p>\n      }\n      <div class=\"mk-banner__message\"><ng-content /></div>\n    </div>\n    <div class=\"mk-banner__actions\"><ng-content select=\"[mkBannerActions]\" /></div>\n    @if (dismissible()) {\n      <button\n        type=\"button\"\n        class=\"mk-banner__close\"\n        [attr.aria-label]=\"i18n.dismiss\"\n        (click)=\"dismiss()\"\n      >\n        <span aria-hidden=\"true\">&times;</span>\n      </button>\n    }\n  </div>\n}\n", styles: [":host{display:contents;--_main: var(--mk-info);--_hover: var(--mk-info-hover);--_active: var(--mk-info-hover);--_contrast: var(--mk-info-contrast);--_subtle: var(--mk-info-subtle);--_subtle-text: var(--mk-info-subtle-text)}:host([data-tone=primary]){--_main: var(--mk-primary);--_hover: var(--mk-primary-hover);--_active: var(--mk-primary-active);--_contrast: var(--mk-primary-contrast);--_subtle: var(--mk-primary-subtle);--_subtle-text: var(--mk-primary-subtle-text)}:host([data-tone=success]){--_main: var(--mk-success);--_hover: var(--mk-success-hover);--_active: var(--mk-success-hover);--_contrast: var(--mk-success-contrast);--_subtle: var(--mk-success-subtle);--_subtle-text: var(--mk-success-subtle-text)}:host([data-tone=warning]){--_main: var(--mk-warning);--_hover: var(--mk-warning-hover);--_active: var(--mk-warning-hover);--_contrast: var(--mk-warning-contrast);--_subtle: var(--mk-warning-subtle);--_subtle-text: var(--mk-warning-subtle-text)}:host([data-tone=danger]){--_main: var(--mk-danger);--_hover: var(--mk-danger-hover);--_active: var(--mk-danger-hover);--_contrast: var(--mk-danger-contrast);--_subtle: var(--mk-danger-subtle);--_subtle-text: var(--mk-danger-subtle-text)}:host([data-tone=info]){--_main: var(--mk-info);--_hover: var(--mk-info-hover);--_active: var(--mk-info-hover);--_contrast: var(--mk-info-contrast);--_subtle: var(--mk-info-subtle);--_subtle-text: var(--mk-info-subtle-text)}:host([data-tone=neutral]){--_main: var(--mk-surface-inverse);--_hover: var(--mk-surface-inverse);--_active: var(--mk-surface-inverse);--_contrast: var(--mk-text-inverse);--_subtle: var(--mk-neutral-subtle);--_subtle-text: var(--mk-neutral-subtle-text)}.mk-banner__box{display:flex;align-items:flex-start;gap:var(--mk-space-3);padding:var(--mk-space-3) var(--mk-space-4);background-color:var(--_subtle);border:var(--mk-border-width) solid transparent;border-inline-start:3px solid var(--_main);border-radius:var(--mk-radius-md);color:var(--mk-text);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-sm);line-height:var(--mk-line-height-normal)}.mk-banner__icon{flex:none;display:grid;place-items:center;color:var(--_main);line-height:0}.mk-banner__icon:empty{display:none}.mk-banner__body{flex:1 1 auto;min-width:0}.mk-banner__title{margin:0 0 var(--mk-space-1);font-weight:var(--mk-font-weight-semibold);color:var(--_subtle-text)}.mk-banner__message{color:var(--mk-text)}.mk-banner__actions{flex:none;display:flex;align-items:center;gap:var(--mk-space-2)}.mk-banner__actions:empty{display:none}.mk-banner__close{flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;padding:0;font-size:var(--mk-font-size-lg);line-height:1;color:var(--mk-text-muted);background:transparent;border:none;border-radius:var(--mk-radius-circle);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-banner__close:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-banner__close:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}@media(prefers-reduced-motion:reduce){.mk-banner__close{transition:none}}\n"] }]
+        }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
+
+/**
+ * Drives a global {@link MkLoadingBar} — the thin top-of-page progress bar for
+ * route changes and background work. `start()` shows it and trickles toward 90%;
+ * `complete()` finishes and hides it. Also supports a determinate `set(value)`.
+ *
+ * ```ts
+ * const bar = inject(MkLoadingBarService);
+ * router.events.subscribe(e => {
+ *   if (e instanceof NavigationStart) bar.start();
+ *   if (e instanceof NavigationEnd) bar.complete();
+ * });
+ * ```
+ */
+class MkLoadingBarService {
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    _progress = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_progress" }] : /* istanbul ignore next */ []));
+    _active = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_active" }] : /* istanbul ignore next */ []));
+    /** Current progress, 0–100. */
+    progress = this._progress.asReadonly();
+    /** Whether the bar is visible. */
+    active = this._active.asReadonly();
+    timer;
+    doneTimer;
+    /** Show the bar and start trickling toward 90%. */
+    start() {
+        if (!this.isBrowser)
+            return;
+        this.clearTimers();
+        this._active.set(true);
+        this._progress.set(8);
+        this.armTrickle();
+    }
+    /** Set an explicit determinate value (0–100). */
+    set(value) {
+        this.clearTimers();
+        this._active.set(true);
+        this._progress.set(Math.max(0, Math.min(100, value)));
+    }
+    /** Nudge progress up by `amount` (default 5), capped at 90%. */
+    inc(amount = 5) {
+        if (!this._active())
+            this.start();
+        this._progress.set(Math.min(90, this._progress() + amount));
+        // Re-arm the trickle if it stopped at the ceiling (or after a `set()`)
+        // and there is still room to move.
+        if (this._progress() < 90)
+            this.armTrickle();
+    }
+    /** Finish (jump to 100%) then fade out. */
+    complete() {
+        if (!this.isBrowser) {
+            this._active.set(false);
+            return;
+        }
+        this.clearTimers();
+        this._progress.set(100);
+        this.doneTimer = setTimeout(() => {
+            this._active.set(false);
+            this._progress.set(0);
+        }, 350);
+    }
+    /** Hide immediately without finishing. */
+    stop() {
+        this.clearTimers();
+        this._active.set(false);
+        this._progress.set(0);
+    }
+    /**
+     * Auto-slowing trickle so the bar keeps moving without ever completing.
+     * Stops its own interval at the 90% ceiling — otherwise a navigation that
+     * never `complete()`s would leave a timer firing (and, in a zoneless app,
+     * scheduling change detection) forever. `start()`/`inc()` re-arm it.
+     */
+    trickle() {
+        const p = this._progress();
+        if (p >= 90) {
+            this.stopTrickle();
+            return;
+        }
+        const step = p < 20 ? 10 : p < 50 ? 4 : p < 80 ? 2 : 0.5;
+        const next = Math.min(90, p + step);
+        this._progress.set(next);
+        if (next >= 90)
+            this.stopTrickle();
+    }
+    /** Start the 350ms trickle interval unless it is already running. */
+    armTrickle() {
+        if (!this.isBrowser || this.timer)
+            return;
+        this.timer = setInterval(() => this.trickle(), 350);
+    }
+    stopTrickle() {
+        if (this.timer) {
+            clearInterval(this.timer);
+            this.timer = undefined;
+        }
+    }
+    clearTimers() {
+        if (this.timer)
+            clearInterval(this.timer);
+        if (this.doneTimer)
+            clearTimeout(this.doneTimer);
+        this.timer = undefined;
+        this.doneTimer = undefined;
+    }
+    /** True while finishing (progress full but not yet hidden). */
+    finishing = computed(() => this._active() && this._progress() >= 100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "finishing" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkLoadingBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkLoadingBarService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkLoadingBarService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * LoadingBar — a thin progress bar fixed to the top of the viewport, driven by
+ * {@link MkLoadingBarService}. Place it once (e.g. in the app shell) and call
+ * `start()` / `complete()` on navigation or async work.
+ *
+ * ```html
+ * <mk-loading-bar />
+ * ```
+ */
+class MkLoadingBar {
+    service = inject(MkLoadingBarService);
+    i18n = inject(MK_I18N);
+    /** Bar colour. */
+    color = input('var(--mk-primary)', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Bar thickness in px. */
+    height = input(3, { ...(ngDevMode ? { debugName: "height" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    progress = this.service.progress;
+    active = computed(() => this.service.active(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    /**
+     * The fill is a full-width bar scaled from the inline start — `transform`
+     * animates on the compositor, so each trickle tick avoids the layout+paint
+     * cost that animating `width` incurred. Origin flips for RTL in the styles.
+     */
+    fillTransform = computed(() => `scaleX(${this.progress() / 100})`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fillTransform" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkLoadingBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MkLoadingBar, isStandalone: true, selector: "mk-loading-bar", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar", "aria-valuemin": "0", "aria-valuemax": "100" }, properties: { "attr.aria-valuenow": "active() ? progress() : null", "attr.aria-hidden": "active() ? null : 'true'", "attr.aria-label": "i18n.loading", "class.mk-loading-bar--active": "active()", "style.height.px": "height()" }, classAttribute: "mk-loading-bar" }, ngImport: i0, template: `<div
+    class="mk-loading-bar__fill"
+    [style.transform]="fillTransform()"
+    [style.background]="color()"
+  ></div>`, isInline: true, styles: [":host{position:fixed;top:0;left:0;right:0;z-index:var(--mk-z-toast, 1400);pointer-events:none;opacity:0;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-loading-bar--active){opacity:1}.mk-loading-bar__fill{height:100%;width:100%;transform:scaleX(0);transform-origin:left center;will-change:transform;background-color:var(--mk-primary);box-shadow:0 0 8px color-mix(in srgb,var(--mk-primary) 60%,transparent);transition:transform var(--mk-duration-normal, .24s) var(--mk-ease-standard)}.mk-loading-bar__fill:dir(rtl){transform-origin:right center}@media(prefers-reduced-motion:reduce){:host,.mk-loading-bar__fill{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkLoadingBar, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-loading-bar', template: `<div
+    class="mk-loading-bar__fill"
+    [style.transform]="fillTransform()"
+    [style.background]="color()"
+  ></div>`, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-loading-bar',
+                        role: 'progressbar',
+                        'aria-valuemin': '0',
+                        'aria-valuemax': '100',
+                        '[attr.aria-valuenow]': 'active() ? progress() : null',
+                        '[attr.aria-hidden]': "active() ? null : 'true'",
+                        '[attr.aria-label]': 'i18n.loading',
+                        '[class.mk-loading-bar--active]': 'active()',
+                        '[style.height.px]': 'height()',
+                    }, styles: [":host{position:fixed;top:0;left:0;right:0;z-index:var(--mk-z-toast, 1400);pointer-events:none;opacity:0;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-loading-bar--active){opacity:1}.mk-loading-bar__fill{height:100%;width:100%;transform:scaleX(0);transform-origin:left center;will-change:transform;background-color:var(--mk-primary);box-shadow:0 0 8px color-mix(in srgb,var(--mk-primary) 60%,transparent);transition:transform var(--mk-duration-normal, .24s) var(--mk-ease-standard)}.mk-loading-bar__fill:dir(rtl){transform-origin:right center}@media(prefers-reduced-motion:reduce){:host,.mk-loading-bar__fill{transition:none}}\n"] }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
+
+/** DI token carrying the current {@link MkTourData} to the popup. */
+const MK_TOUR_DATA = new InjectionToken('MK_TOUR_DATA');
+/**
+ * The floating coach-mark popover for one tour step. Rendered dynamically by
+ * {@link MkTourService} (one instance per step) and anchored to the step's
+ * target through {@link MkAnchoredPanel}, so it lives in the browser top layer
+ * and is never clipped by an ancestor's `overflow`/`transform`.
+ */
+class MkTourPopup {
+    injector = inject(Injector);
+    panelRef = viewChild('panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
+    i18n = inject(MK_I18N);
+    /** The step + navigation data for this popup. */
+    data = inject(MK_TOUR_DATA);
+    /** Whether this is the final step (Next becomes "Done"). */
+    isLast = computed(() => this.data.index >= this.data.total - 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLast" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => this.focusInitial(), { injector: this.injector });
+    }
+    next() {
+        this.data.controller.next();
+    }
+    prev() {
+        this.data.controller.prev();
+    }
+    skip() {
+        this.data.controller.end();
+    }
+    onEscape(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.data.controller.end();
+    }
+    /**
+     * Ignore anchored-panel dismisses (outside pointerdown / window blur): a tour
+     * should stay put while the user reads it — it ends only via the buttons or
+     * Escape.
+     */
+    onDismiss() {
+        /* intentionally inert */
+    }
+    /**
+     * Trap Tab inside the popup (the dialog is `aria-modal` over a scrim): wrap
+     * from the last tabbable back to the first and vice versa, and pull focus in
+     * if it somehow ended up outside.
+     */
+    onTab(event) {
+        const e = event;
+        const panel = this.panelRef()?.nativeElement;
+        if (!panel)
+            return;
+        const focusable = mkGetFocusable(panel);
+        if (focusable.length === 0) {
+            e.preventDefault();
+            panel.focus();
+            return;
+        }
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        const active = panel.ownerDocument.activeElement;
+        if (!panel.contains(active)) {
+            e.preventDefault();
+            first.focus();
+        }
+        else if (e.shiftKey && active === first) {
+            e.preventDefault();
+            last.focus();
+        }
+        else if (!e.shiftKey && active === last) {
+            e.preventDefault();
+            first.focus();
+        }
+    }
+    focusInitial() {
+        const panel = this.panelRef()?.nativeElement;
+        if (!panel)
+            return;
+        (mkGetFocusable(panel)[0] ?? panel).focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTourPopup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkTourPopup, isStandalone: true, selector: "mk-tour-popup", host: { classAttribute: "mk-tour" }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #panel\n  class=\"mk-tour__popup\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  tabindex=\"-1\"\n  [attr.aria-label]=\"data.step.title ?? data.step.body\"\n  mkAnchoredPanel\n  [mkAnchoredPanelFor]=\"data.anchor\"\n  [placement]=\"data.step.placement ?? 'bottom'\"\n  [gap]=\"12\"\n  (dismiss)=\"onDismiss()\"\n  (keydown.escape)=\"onEscape($event)\"\n  (keydown.tab)=\"onTab($event)\"\n  (keydown.shift.tab)=\"onTab($event)\"\n>\n  @if (data.step.title; as title) {\n    <h3 class=\"mk-tour__title\">{{ title }}</h3>\n  }\n  <p class=\"mk-tour__body\">{{ data.step.body }}</p>\n\n  <div class=\"mk-tour__footer\">\n    <span class=\"mk-tour__indicator\">\n      {{ i18n.tourStepOf(data.index + 1, data.total) }}\n    </span>\n    <div class=\"mk-tour__actions\">\n      <button type=\"button\" class=\"mk-tour__btn mk-tour__btn--ghost\" (click)=\"skip()\">\n        {{ i18n.tourSkip }}\n      </button>\n      @if (data.index > 0) {\n        <button type=\"button\" class=\"mk-tour__btn\" (click)=\"prev()\">\n          {{ i18n.tourPrevious }}\n        </button>\n      }\n      <button\n        type=\"button\"\n        class=\"mk-tour__btn mk-tour__btn--primary\"\n        (click)=\"next()\"\n      >\n        {{ isLast() ? i18n.tourDone : i18n.tourNext }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:contents}.mk-tour__popup{box-sizing:border-box;width:min(20rem,100vw - var(--mk-space-4));padding:var(--mk-space-4);color:var(--mk-text);background:var(--mk-surface);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-lg);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-md);animation:mk-tour-in var(--mk-duration-fast) var(--mk-ease-out)}.mk-tour__popup:focus-visible{outline:none}.mk-tour__title{margin:0 0 var(--mk-space-2);font-size:var(--mk-font-size-lg);font-weight:600;line-height:1.3}.mk-tour__body{margin:0;color:var(--mk-text-muted);line-height:1.5}.mk-tour__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--mk-space-3);margin-top:var(--mk-space-4)}.mk-tour__indicator{color:var(--mk-text-muted);font-size:var(--mk-font-size-sm);white-space:nowrap}.mk-tour__actions{display:flex;gap:var(--mk-space-2)}.mk-tour__btn{padding:var(--mk-space-1) var(--mk-space-3);color:var(--mk-text);background:transparent;border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);font:inherit;font-size:var(--mk-font-size-sm);cursor:pointer}.mk-tour__btn:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-tour__btn--ghost{color:var(--mk-text-muted);border-color:transparent}.mk-tour__btn--primary{color:var(--mk-primary-contrast);background:var(--mk-primary);border-color:var(--mk-primary)}@keyframes mk-tour-in{0%{opacity:0;transform:translateY(calc(-1 * var(--mk-space-1))) scale(.98)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.mk-tour__popup{animation:none}}\n"], dependencies: [{ kind: "directive", type: MkAnchoredPanel, selector: "[mkAnchoredPanel]", inputs: ["mkAnchoredPanelFor", "anchorRect", "placement", "gap", "matchWidth", "flip", "clamp"], outputs: ["dismiss"], exportAs: ["mkAnchoredPanel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTourPopup, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-tour-popup', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MkAnchoredPanel], host: {
+                        class: 'mk-tour',
+                    }, template: "<div\n  #panel\n  class=\"mk-tour__popup\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  tabindex=\"-1\"\n  [attr.aria-label]=\"data.step.title ?? data.step.body\"\n  mkAnchoredPanel\n  [mkAnchoredPanelFor]=\"data.anchor\"\n  [placement]=\"data.step.placement ?? 'bottom'\"\n  [gap]=\"12\"\n  (dismiss)=\"onDismiss()\"\n  (keydown.escape)=\"onEscape($event)\"\n  (keydown.tab)=\"onTab($event)\"\n  (keydown.shift.tab)=\"onTab($event)\"\n>\n  @if (data.step.title; as title) {\n    <h3 class=\"mk-tour__title\">{{ title }}</h3>\n  }\n  <p class=\"mk-tour__body\">{{ data.step.body }}</p>\n\n  <div class=\"mk-tour__footer\">\n    <span class=\"mk-tour__indicator\">\n      {{ i18n.tourStepOf(data.index + 1, data.total) }}\n    </span>\n    <div class=\"mk-tour__actions\">\n      <button type=\"button\" class=\"mk-tour__btn mk-tour__btn--ghost\" (click)=\"skip()\">\n        {{ i18n.tourSkip }}\n      </button>\n      @if (data.index > 0) {\n        <button type=\"button\" class=\"mk-tour__btn\" (click)=\"prev()\">\n          {{ i18n.tourPrevious }}\n        </button>\n      }\n      <button\n        type=\"button\"\n        class=\"mk-tour__btn mk-tour__btn--primary\"\n        (click)=\"next()\"\n      >\n        {{ isLast() ? i18n.tourDone : i18n.tourNext }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:contents}.mk-tour__popup{box-sizing:border-box;width:min(20rem,100vw - var(--mk-space-4));padding:var(--mk-space-4);color:var(--mk-text);background:var(--mk-surface);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-lg);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-md);animation:mk-tour-in var(--mk-duration-fast) var(--mk-ease-out)}.mk-tour__popup:focus-visible{outline:none}.mk-tour__title{margin:0 0 var(--mk-space-2);font-size:var(--mk-font-size-lg);font-weight:600;line-height:1.3}.mk-tour__body{margin:0;color:var(--mk-text-muted);line-height:1.5}.mk-tour__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--mk-space-3);margin-top:var(--mk-space-4)}.mk-tour__indicator{color:var(--mk-text-muted);font-size:var(--mk-font-size-sm);white-space:nowrap}.mk-tour__actions{display:flex;gap:var(--mk-space-2)}.mk-tour__btn{padding:var(--mk-space-1) var(--mk-space-3);color:var(--mk-text);background:transparent;border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);font:inherit;font-size:var(--mk-font-size-sm);cursor:pointer}.mk-tour__btn:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-tour__btn--ghost{color:var(--mk-text-muted);border-color:transparent}.mk-tour__btn--primary{color:var(--mk-primary-contrast);background:var(--mk-primary);border-color:var(--mk-primary)}@keyframes mk-tour-in{0%{opacity:0;transform:translateY(calc(-1 * var(--mk-space-1))) scale(.98)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.mk-tour__popup{animation:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
+
+/**
+ * Product-onboarding tour service — walks the user through a sequence of
+ * {@link MkTourStep}s. For each step it scrolls the target into view, dims the
+ * page behind a scrim, highlights the target with a bright ring, and anchors a
+ * coach-mark popover ({@link MkTourPopup}) to it in the browser top layer via
+ * `MkAnchoredPanel`.
+ *
+ * ```ts
+ * const tour = inject(MkTourService);
+ * await tour.start([
+ *   { target: '#new-btn', title: 'Create', body: 'Start a project here.' },
+ *   { target: '#inbox', body: 'Your notifications land here.', placement: 'left' },
+ * ]);
+ * ```
+ */
+class MkTourService {
+    appRef = inject(ApplicationRef);
+    envInjector = inject(EnvironmentInjector);
+    document = inject(DOCUMENT);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    _steps = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_steps" }] : /* istanbul ignore next */ []));
+    _index = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_index" }] : /* istanbul ignore next */ []));
+    _running = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_running" }] : /* istanbul ignore next */ []));
+    /** Zero-based index of the current step, or `-1` when no tour is running. */
+    index = this._index.asReadonly();
+    /** Whether a tour is currently active. */
+    running = this._running.asReadonly();
+    /** Total number of steps in the active tour. */
+    total = computed(() => this._steps().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+    /** The current step, or `null`. */
+    currentStep = computed(() => {
+        const i = this._index();
+        return i >= 0 ? (this._steps()[i] ?? null) : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentStep" }] : /* istanbul ignore next */ []));
+    popupRef;
+    scrim;
+    snapshot;
+    endResolve;
+    endPromise = Promise.resolve();
+    /** Element focused before start(); focus is restored to it on end(). */
+    previouslyFocused = null;
+    constructor() {
+        // If a tour is still active when the app (root injector) is torn down,
+        // end it — otherwise the capture-phase document keydown listener, scrim
+        // and popup DOM would outlive the application.
+        inject(DestroyRef).onDestroy(() => this.end());
+    }
+    /**
+     * Begin a tour at step 0. Returns a promise that resolves when the tour ends
+     * (finished, skipped, or Escaped).
+     */
+    start(steps) {
+        if (!this.isBrowser || steps.length === 0)
+            return Promise.resolve();
+        // Restart cleanly if one is already running.
+        if (this._running())
+            this.end();
+        this.endPromise = new Promise((resolve) => {
+            this.endResolve = resolve;
+        });
+        this.previouslyFocused = this.document
+            .activeElement;
+        this._steps.set([...steps]);
+        this._running.set(true);
+        this.document.addEventListener('keydown', this.onKeydown, true);
+        this.ensureScrim();
+        this.showStep(0, 1);
+        return this.endPromise;
+    }
+    /** Resolves when the active (or next) tour ends. */
+    afterEnd() {
+        return this.endPromise;
+    }
+    /** Advance to the next step, or finish on the last step. */
+    next() {
+        if (!this._running())
+            return;
+        this.showStep(this._index() + 1, 1);
+    }
+    /** Return to the previous step (no-op at the first step). */
+    prev() {
+        if (!this._running() || this._index() <= 0)
+            return;
+        this.showStep(this._index() - 1, -1);
+    }
+    /** End the tour and clean up all DOM, highlight, and listeners. */
+    end() {
+        if (!this._running())
+            return;
+        this._running.set(false);
+        this.teardownStep();
+        this.removeScrim();
+        this.document.removeEventListener('keydown', this.onKeydown, true);
+        this._index.set(-1);
+        this._steps.set([]);
+        // Return focus to wherever the user was before the tour started
+        // (Done/Skip/Escape all funnel through here).
+        this.previouslyFocused?.focus?.();
+        this.previouslyFocused = null;
+        const resolve = this.endResolve;
+        this.endResolve = undefined;
+        resolve?.();
+    }
+    onKeydown = (e) => {
+        if (e.key === 'Escape') {
+            e.stopPropagation();
+            this.end();
+        }
+    };
+    /**
+     * Render the step at `index`. Missing targets are skipped by continuing in
+     * `dir` (+1 forward, -1 back); if none remain the tour ends.
+     */
+    showStep(index, dir) {
+        this.teardownStep();
+        const steps = this._steps();
+        let i = index;
+        let target = null;
+        while (i >= 0 && i < steps.length) {
+            target = this.resolveTarget(steps[i].target);
+            if (target)
+                break;
+            i += dir;
+        }
+        if (!target || i < 0 || i >= steps.length) {
+            this.end();
+            return;
+        }
+        this._index.set(i);
+        this.highlight(target);
+        target.scrollIntoView?.({ block: 'center', inline: 'center', behavior: 'smooth' });
+        const data = {
+            step: steps[i],
+            index: i,
+            total: steps.length,
+            anchor: target,
+            controller: {
+                next: () => this.next(),
+                prev: () => this.prev(),
+                end: () => this.end(),
+            },
+        };
+        const ref = createComponent(MkTourPopup, {
+            environmentInjector: this.envInjector,
+            elementInjector: Injector.create({
+                parent: this.envInjector,
+                providers: [{ provide: MK_TOUR_DATA, useValue: data }],
+            }),
+        });
+        this.appRef.attachView(ref.hostView);
+        this.document.body.appendChild(ref.location.nativeElement);
+        this.popupRef = ref;
+    }
+    /** Destroy the current popup and restore the current target's styles. */
+    teardownStep() {
+        if (this.popupRef) {
+            // At app teardown the ApplicationRef destroys (and detaches) its views
+            // before injector destroy hooks run — don't touch it then.
+            if (!this.appRef.destroyed)
+                this.appRef.detachView(this.popupRef.hostView);
+            this.popupRef.destroy();
+            this.popupRef.location.nativeElement.remove();
+            this.popupRef = undefined;
+        }
+        this.unhighlight();
+    }
+    resolveTarget(target) {
+        if (typeof target !== 'string') {
+            return target.isConnected ? target : null;
+        }
+        return this.document.querySelector(target);
+    }
+    /** Raise the target above the scrim and draw a bright ring around it. */
+    highlight(el) {
+        const style = el.style;
+        this.snapshot = {
+            el,
+            position: style.position,
+            zIndex: style.zIndex,
+            boxShadow: style.boxShadow,
+            borderRadius: style.borderRadius,
+            transition: style.transition,
+        };
+        el.classList.add('mk-tour-target');
+        if (getComputedStyle(el).position === 'static') {
+            style.position = 'relative';
+        }
+        style.setProperty('z-index', 'calc(var(--mk-z-overlay, 1000) + 1)');
+        style.boxShadow =
+            '0 0 0 3px var(--mk-primary), 0 0 0 6px var(--mk-primary-contrast)';
+        if (!style.borderRadius)
+            style.borderRadius = 'var(--mk-radius-md)';
+        style.transition = 'box-shadow var(--mk-duration-fast, 140ms) ease';
+    }
+    unhighlight() {
+        const snap = this.snapshot;
+        if (!snap)
+            return;
+        const { el } = snap;
+        el.classList.remove('mk-tour-target');
+        el.style.position = snap.position;
+        el.style.zIndex = snap.zIndex;
+        el.style.boxShadow = snap.boxShadow;
+        el.style.borderRadius = snap.borderRadius;
+        el.style.transition = snap.transition;
+        this.snapshot = undefined;
+    }
+    ensureScrim() {
+        if (this.scrim)
+            return;
+        const scrim = this.document.createElement('div');
+        scrim.className = 'mk-tour-scrim';
+        scrim.style.cssText =
+            'position:fixed;inset:0;background:var(--mk-overlay-scrim,rgba(0,0,0,0.45));animation:mk-overlay-fade var(--mk-duration-fast,140ms) var(--mk-ease-out,ease);';
+        scrim.style.setProperty('z-index', 'var(--mk-z-overlay, 1000)');
+        this.document.body.appendChild(scrim);
+        this.scrim = scrim;
+    }
+    removeScrim() {
+        this.scrim?.remove();
+        this.scrim = undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTourService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTourService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTourService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Feedback & Overlay component group barrel.
+ * Re-exports every public symbol (components, directives, services, types).
+ */
+
+/**
+ * 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 };
+//# sourceMappingURL=mk-kit-ui-feedback.mjs.map