@mk-kit/ui 0.52.1 → 0.54.0

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

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, Component, booleanAttribute, inject, ElementRef, Renderer2, DOCUMENT, PLATFORM_ID, numberAttribute, computed, effect, Directive, signal, contentChildren, output, TemplateRef, model, contentChild, linkedSignal, DestroyRef, afterNextRender, afterRenderEffect, untracked, Injector, viewChild, forwardRef, ViewEncapsulation } from '@angular/core';
-import { isPlatformBrowser, NgTemplateOutlet, DOCUMENT as DOCUMENT$1 } from '@angular/common';
-import { mkUniqueId, MK_I18N, MkFieldContext, mkHighlight } from '@mk-kit/ui/core';
+import { input, ChangeDetectionStrategy, Component, signal, computed, numberAttribute, contentChildren, ElementRef, effect, booleanAttribute, output, inject, TemplateRef, Directive, DOCUMENT, model, contentChild, linkedSignal, DestroyRef, afterNextRender, PLATFORM_ID, afterRenderEffect, untracked, Injector, viewChild, forwardRef, ViewEncapsulation } from '@angular/core';
 import { MkIcon } from '@mk-kit/ui/icon';
+import { NgTemplateOutlet, isPlatformBrowser, DOCUMENT as DOCUMENT$1 } from '@angular/common';
+import { MK_I18N, mkUniqueId, MkFieldContext, mkHighlight } from '@mk-kit/ui/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { mkInjectFieldTouched } from '@mk-kit/ui/core/signal-forms';
 import { MkCopyToClipboard } from '@mk-kit/ui/directives';
 import { mkComputeDiff, mkDiffStats, mkStripAnsi, mkParseAnsi, mkRenderMarkdown, mkParseMarkdown } from '@mk-kit/core';
 export { mkComputeDiff, mkDiffStats, mkParseAnsi, mkParseMarkdown, mkRenderMarkdown, mkStripAnsi } from '@mk-kit/core';
-import { mkMoveItemInArray, MkDropList, MkDrag } from '@mk-kit/ui/dnd';
+export * from '@mk-kit/ui/status';
 
 /**
  * Card — a themed surface container that groups related content. Compose it
@@ -114,226 +114,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                     }, template: "<span class=\"mk-divider__label\"><ng-content /></span>\n", styles: [":host{display:flex;align-items:center;gap:var(--mk-space-3);width:100%;color:var(--mk-text-muted);font-size:var(--mk-font-size-sm)}:host:before,:host:after{content:\"\";flex:1 1 auto;height:var(--mk-border-width);background-color:var(--mk-border)}.mk-divider__label:empty{display:none}.mk-divider__label{flex:0 0 auto;line-height:var(--mk-line-height-tight)}:host(.mk-divider--vertical){display:inline-flex;flex-direction:column;width:auto;height:100%;min-height:1em;align-self:stretch}:host(.mk-divider--vertical):before,:host(.mk-divider--vertical):after{width:var(--mk-border-width);height:auto}\n"] }]
         }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
 
-/**
- * Badge — a compact status pill, typically for counts or short state labels.
- * Set `dot` for a minimal notification indicator with no text.
- *
- * ```html
- * <mk-badge tone="success">Active</mk-badge>
- * <mk-badge tone="danger" variant="solid">3</mk-badge>
- * <mk-badge tone="danger" dot aria-label="Unread messages" />
- * ```
- */
-class MkBadge {
-    /** Semantic color tone. */
-    tone = input('primary', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
-    /** Visual treatment. */
-    variant = input('soft', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    /** Size scale. */
-    size = input('md', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    /** Render as a tiny dot (no text) for notification indicators. */
-    dot = input(false, { ...(ngDevMode ? { debugName: "dot" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkBadge, isStandalone: true, selector: "mk-badge", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.mk-badge--sm": "size() === 'sm'", "class.mk-badge--md": "size() === 'md'", "class.mk-badge--lg": "size() === 'lg'", "class.mk-badge--solid": "variant() === 'solid'", "class.mk-badge--soft": "variant() === 'soft'", "class.mk-badge--outline": "variant() === 'outline'", "class.mk-badge--dot": "dot()", "attr.data-tone": "tone()" }, classAttribute: "mk-badge" }, ngImport: i0, template: "@if (!dot()) {\n  <ng-content />\n}\n", styles: ["@charset \"UTF-8\";:host{--_main: var(--mk-primary);--_contrast: var(--mk-primary-contrast);--_subtle: var(--mk-primary-subtle);--_subtle-text: var(--mk-primary-subtle-text);display:inline-flex;align-items:center;justify-content:center;gap:var(--mk-space-1);height:1.375rem;min-width:1.375rem;padding:0 var(--mk-space-2);border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-pill);font-family:inherit;font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-medium);line-height:1;white-space:nowrap;vertical-align:middle}: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)}:host(.mk-badge--sm){height:1.125rem;min-width:1.125rem;padding:0 var(--mk-space-1);font-size:var(--mk-font-size-xs)}:host(.mk-badge--lg){height:1.625rem;min-width:1.625rem;padding:0 var(--mk-space-3);font-size:var(--mk-font-size-sm)}:host(.mk-badge--solid){background-color:var(--_main);color:var(--_contrast)}:host(.mk-badge--soft){background-color:var(--_subtle);color:var(--_subtle-text)}:host(.mk-badge--outline){background-color:transparent;color:var(--_subtle-text);border-color:color-mix(in srgb,var(--_main) 42%,var(--mk-border-strong))}:host(.mk-badge--dot){width:.625rem;height:.625rem;min-width:0;padding:0;border-radius:var(--mk-radius-circle)}:host(.mk-badge--dot.mk-badge--sm){width:.5rem;height:.5rem}:host(.mk-badge--dot.mk-badge--lg){width:.75rem;height:.75rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBadge, decorators: [{
-            type: Component,
-            args: [{ selector: 'mk-badge', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'mk-badge',
-                        '[class.mk-badge--sm]': "size() === 'sm'",
-                        '[class.mk-badge--md]': "size() === 'md'",
-                        '[class.mk-badge--lg]': "size() === 'lg'",
-                        '[class.mk-badge--solid]': "variant() === 'solid'",
-                        '[class.mk-badge--soft]': "variant() === 'soft'",
-                        '[class.mk-badge--outline]': "variant() === 'outline'",
-                        '[class.mk-badge--dot]': 'dot()',
-                        '[attr.data-tone]': 'tone()',
-                    }, template: "@if (!dot()) {\n  <ng-content />\n}\n", styles: ["@charset \"UTF-8\";:host{--_main: var(--mk-primary);--_contrast: var(--mk-primary-contrast);--_subtle: var(--mk-primary-subtle);--_subtle-text: var(--mk-primary-subtle-text);display:inline-flex;align-items:center;justify-content:center;gap:var(--mk-space-1);height:1.375rem;min-width:1.375rem;padding:0 var(--mk-space-2);border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-pill);font-family:inherit;font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-medium);line-height:1;white-space:nowrap;vertical-align:middle}: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)}:host(.mk-badge--sm){height:1.125rem;min-width:1.125rem;padding:0 var(--mk-space-1);font-size:var(--mk-font-size-xs)}:host(.mk-badge--lg){height:1.625rem;min-width:1.625rem;padding:0 var(--mk-space-3);font-size:var(--mk-font-size-sm)}:host(.mk-badge--solid){background-color:var(--_main);color:var(--_contrast)}:host(.mk-badge--soft){background-color:var(--_subtle);color:var(--_subtle-text)}:host(.mk-badge--outline){background-color:transparent;color:var(--_subtle-text);border-color:color-mix(in srgb,var(--_main) 42%,var(--mk-border-strong))}:host(.mk-badge--dot){width:.625rem;height:.625rem;min-width:0;padding:0;border-radius:var(--mk-radius-circle)}:host(.mk-badge--dot.mk-badge--sm){width:.5rem;height:.5rem}:host(.mk-badge--dot.mk-badge--lg){width:.75rem;height:.75rem}\n"] }]
-        }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }] } });
-
-/**
- * Badge overlay — anchors a small badge (count, dot or short text) to a corner
- * of ANY element: an icon button, an avatar, a tab label. The host stays a
- * single tab stop; the badge is a decorative, non-focusable child.
- *
- * - Numbers above `mkBadgeOverlayMax` (default 99) collapse to `99+`.
- * - `mkBadgeOverlayDot` renders a textless dot ("something is new").
- * - `mkBadgeOverlayAriaLabel` is the screen-reader text ("3 unread"). It is
- *   rendered in a visually hidden span and wired to the host with
- *   `aria-describedby`, so it is announced after the host's own name even
- *   when the host has an `aria-label`. When it is given, the visible badge is
- *   `aria-hidden` so the count is not read twice.
- * - Positions use logical insets, so `top-end` sits at the top-right in LTR
- *   and the top-left in RTL.
- *
- * The badge is painted with the global `.mk-badge-overlay` styles from
- * `@mk-kit/ui/styles.css` and follows the `--mk-*` tone tokens.
- *
- * ```html
- * <button mkButton iconOnly aria-label="Notifications"
- *         [mkBadgeOverlay]="unread()" mkBadgeOverlayTone="danger"
- *         [mkBadgeOverlayAriaLabel]="unread() + ' unread'">
- *   <mk-icon name="bell" />
- * </button>
- *
- * <mk-avatar name="Ada Lovelace" mkBadgeOverlay mkBadgeOverlayDot
- *            mkBadgeOverlayTone="success" mkBadgeOverlayPosition="bottom-end" />
- * ```
- */
-class MkBadgeOverlay {
-    host = inject(ElementRef);
-    renderer = inject(Renderer2);
-    document = inject(DOCUMENT);
-    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
-    /**
-     * Badge content — a count or a short label. `null` / empty hides the badge
-     * unless `mkBadgeOverlayDot` is set. Numeric strings are treated as numbers
-     * so `mkBadgeOverlay="120"` also collapses to `99+`.
-     */
-    content = input(null, { ...(ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {}), alias: 'mkBadgeOverlay' });
-    /** Corner the badge is anchored to (logical: `end` flips in RTL). */
-    position = input('top-end', { ...(ngDevMode ? { debugName: "position" } : /* istanbul ignore next */ {}), alias: 'mkBadgeOverlayPosition' });
-    /** Semantic color tone (same scale as `mk-badge`). */
-    tone = input('primary', { ...(ngDevMode ? { debugName: "tone" } : /* istanbul ignore next */ {}), alias: 'mkBadgeOverlayTone' });
-    /** Render a textless dot instead of the content. */
-    dot = input(false, { ...(ngDevMode ? { debugName: "dot" } : /* istanbul ignore next */ {}), alias: 'mkBadgeOverlayDot',
-        transform: booleanAttribute });
-    /** Numbers above this render as `<max>+`. `0` disables the cap. */
-    max = input(99, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), alias: 'mkBadgeOverlayMax',
-        transform: numberAttribute });
-    /** Hide the badge while keeping the directive (and its aria wiring) in place. */
-    hidden = input(false, { ...(ngDevMode ? { debugName: "hidden" } : /* istanbul ignore next */ {}), alias: 'mkBadgeOverlayHidden',
-        transform: booleanAttribute });
-    /**
-     * Screen-reader text for the badge, e.g. `"3 unread"`. Announced as the
-     * host's description; the visible badge becomes `aria-hidden`.
-     */
-    ariaLabel = input('', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'mkBadgeOverlayAriaLabel' });
-    /** The text painted in the badge (`''` in dot mode). */
-    label = computed(() => {
-        if (this.dot())
-            return '';
-        const raw = this.content();
-        if (raw === null || raw === undefined || raw === '')
-            return '';
-        const max = this.max();
-        const n = typeof raw === 'number' ? raw : /^\d+$/.test(raw) ? Number(raw) : NaN;
-        if (Number.isFinite(n) && max > 0 && n > max)
-            return `${max}+`;
-        return String(raw);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    /** Whether the badge is currently rendered. */
-    visible = computed(() => !this.hidden() && (this.dot() || this.label() !== ''), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-    srId = mkUniqueId('mk-badge-overlay');
-    badge = null;
-    sr = null;
-    /** Set when WE made the host positioned, so we can undo it on removal. */
-    positionedHost = false;
-    constructor() {
-        if (!this.isBrowser)
-            return;
-        effect(() => {
-            const visible = this.visible();
-            if (!visible) {
-                this.detach();
-                return;
-            }
-            const badge = this.attach();
-            const dot = this.dot();
-            const srText = this.ariaLabel().trim();
-            this.renderer.setAttribute(badge, 'data-tone', this.tone());
-            this.renderer.setAttribute(badge, 'data-position', this.position());
-            if (dot) {
-                this.renderer.addClass(badge, 'mk-badge-overlay--dot');
-            }
-            else {
-                this.renderer.removeClass(badge, 'mk-badge-overlay--dot');
-            }
-            this.renderer.setProperty(badge, 'textContent', this.label());
-            // A dot has nothing to read; a labelled badge is described via the
-            // hidden span instead — either way the visual is hidden from AT.
-            if (dot || srText) {
-                this.renderer.setAttribute(badge, 'aria-hidden', 'true');
-            }
-            else {
-                this.renderer.removeAttribute(badge, 'aria-hidden');
-            }
-            this.syncSr(srText);
-        });
-    }
-    attach() {
-        if (this.badge)
-            return this.badge;
-        const el = this.host.nativeElement;
-        const view = this.document.defaultView;
-        const position = view?.getComputedStyle(el).position;
-        if (!position || position === 'static') {
-            this.renderer.setStyle(el, 'position', 'relative');
-            this.positionedHost = true;
-        }
-        const badge = this.renderer.createElement('span');
-        this.renderer.addClass(badge, 'mk-badge-overlay');
-        this.renderer.appendChild(el, badge);
-        this.badge = badge;
-        return badge;
-    }
-    detach() {
-        if (this.badge) {
-            this.renderer.removeChild(this.host.nativeElement, this.badge);
-            this.badge = null;
-        }
-        this.syncSr('');
-        if (this.positionedHost) {
-            this.renderer.removeStyle(this.host.nativeElement, 'position');
-            this.positionedHost = false;
-        }
-    }
-    /** Create / update / remove the hidden description and its aria-describedby link. */
-    syncSr(text) {
-        const el = this.host.nativeElement;
-        if (text) {
-            if (!this.sr) {
-                const sr = this.renderer.createElement('span');
-                this.renderer.addClass(sr, 'mk-visually-hidden');
-                this.renderer.setAttribute(sr, 'id', this.srId);
-                this.renderer.appendChild(el, sr);
-                this.sr = sr;
-                const ids = (el.getAttribute('aria-describedby') ?? '').split(/\s+/).filter(Boolean);
-                if (!ids.includes(this.srId))
-                    ids.push(this.srId);
-                this.renderer.setAttribute(el, 'aria-describedby', ids.join(' '));
-            }
-            this.renderer.setProperty(this.sr, 'textContent', text);
-        }
-        else if (this.sr) {
-            this.renderer.removeChild(el, this.sr);
-            this.sr = null;
-            const ids = (el.getAttribute('aria-describedby') ?? '')
-                .split(/\s+/)
-                .filter((id) => id && id !== this.srId);
-            if (ids.length) {
-                this.renderer.setAttribute(el, 'aria-describedby', ids.join(' '));
-            }
-            else {
-                this.renderer.removeAttribute(el, 'aria-describedby');
-            }
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBadgeOverlay, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MkBadgeOverlay, isStandalone: true, selector: "[mkBadgeOverlay]", inputs: { content: { classPropertyName: "content", publicName: "mkBadgeOverlay", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "mkBadgeOverlayPosition", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "mkBadgeOverlayTone", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "mkBadgeOverlayDot", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "mkBadgeOverlayMax", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "mkBadgeOverlayHidden", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "mkBadgeOverlayAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBadgeOverlay, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[mkBadgeOverlay]',
-                }]
-        }], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkBadgeOverlay", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkBadgeOverlayPosition", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkBadgeOverlayTone", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkBadgeOverlayDot", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkBadgeOverlayMax", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkBadgeOverlayHidden", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkBadgeOverlayAriaLabel", required: false }] }] } });
-
 /**
  * Tag — a non-interactive label for categories, keywords or metadata. Unlike
  * {@link MkChip} it carries no interaction; use it purely for display.
@@ -579,48 +359,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                     }, template: "<span class=\"mk-list-item__leading\"><ng-content select=\"[mkListLeading]\" /></span>\n<span class=\"mk-list-item__content\"><ng-content /></span>\n<span class=\"mk-list-item__trailing\"><ng-content select=\"[mkListTrailing]\" /></span>\n", styles: [":host{display:flex;align-items:center;gap:var(--mk-space-3);padding:var(--mk-space-3) var(--mk-space-4);min-height:2.75rem;border-top:var(--mk-border-width) solid var(--mk-list-item-border, transparent);color:var(--mk-text);transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}:host(:first-child){border-top-color:transparent}.mk-list-item__leading,.mk-list-item__trailing{display:inline-flex;align-items:center;flex:0 0 auto;color:var(--mk-text-muted)}.mk-list-item__leading:empty,.mk-list-item__trailing:empty{display:none}.mk-list-item__content{flex:1 1 auto;min-width:0;line-height:var(--mk-line-height-snug)}.mk-list-item__trailing{margin-inline-start:auto}:host(.mk-list-item--interactive){cursor:pointer;-webkit-user-select:none;user-select:none}:host(.mk-list-item--interactive:hover){background-color:var(--mk-neutral-subtle)}:host(.mk-list-item--interactive:focus-visible){outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}:host(.mk-list-item--selected){background-color:var(--mk-selected-bg);color:var(--mk-selected-text)}:host(.mk-list-item--disabled){cursor:not-allowed;opacity:.55;pointer-events:none}\n"] }]
         }], propDecorators: { interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], activated: [{ type: i0.Output, args: ["activated"] }] } });
 
-/**
- * EmptyState — a centered placeholder for "nothing here yet" situations: empty
- * tables, no search results, a fresh dashboard, a cleared inbox. Provide a
- * `title` (and usually a `description`), an `icon` or projected media, and
- * call-to-action buttons via the actions slot.
- *
- * Slots: `[mkEmptyStateMedia]` (custom illustration, overrides `icon`), default
- * content (extra body), `[mkEmptyStateActions]` (buttons).
- *
- * ```html
- * <mk-empty-state icon="search" title="No results"
- *   description="Try adjusting your filters.">
- *   <button mkButton mkEmptyStateActions variant="outline">Clear filters</button>
- * </mk-empty-state>
- * ```
- */
-class MkEmptyState {
-    /** Name of a registered icon shown above the title (ignored if media is projected). */
-    icon = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    /** Main heading, e.g. "No invoices yet". */
-    title = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    /** Supporting sentence under the title. */
-    description = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
-    /** Overall scale of the block. */
-    size = input('md', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    iconSize = () => this.size() === 'sm' ? 28 : this.size() === 'lg' ? 48 : 36;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkEmptyState, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkEmptyState, isStandalone: true, selector: "mk-empty-state", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.mk-empty-state--sm": "size() === 'sm'", "class.mk-empty-state--lg": "size() === 'lg'" }, classAttribute: "mk-empty-state" }, ngImport: i0, template: "@if (icon()) {\n  <span class=\"mk-empty-state__icon\" aria-hidden=\"true\">\n    <mk-icon [name]=\"icon()\" [size]=\"iconSize()\" />\n  </span>\n}\n<ng-content select=\"[mkEmptyStateMedia]\" />\n\n@if (title()) {\n  <p class=\"mk-empty-state__title\">{{ title() }}</p>\n}\n@if (description()) {\n  <p class=\"mk-empty-state__description\">{{ description() }}</p>\n}\n\n<ng-content />\n\n<div class=\"mk-empty-state__actions\">\n  <ng-content select=\"[mkEmptyStateActions]\" />\n</div>\n", styles: [":host{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--mk-space-2);padding:var(--mk-space-8) var(--mk-space-5);text-align:center;font-family:var(--mk-font-sans);color:var(--mk-text)}:host(.mk-empty-state--sm){padding:var(--mk-space-5) var(--mk-space-4)}:host(.mk-empty-state--lg){padding:var(--mk-space-12) var(--mk-space-6)}.mk-empty-state__icon{display:inline-flex;align-items:center;justify-content:center;margin-bottom:var(--mk-space-1);color:var(--mk-text-subtle)}.mk-empty-state__title{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)}:host(.mk-empty-state--sm) .mk-empty-state__title{font-size:var(--mk-font-size-md)}:host(.mk-empty-state--lg) .mk-empty-state__title{font-size:var(--mk-font-size-xl)}.mk-empty-state__description{margin:0;max-width:34ch;font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-normal);color:var(--mk-text-muted)}.mk-empty-state__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--mk-space-2);margin-top:var(--mk-space-3)}.mk-empty-state__actions:empty{display:none}\n"], dependencies: [{ 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: MkEmptyState, decorators: [{
-            type: Component,
-            args: [{ selector: 'mk-empty-state', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MkIcon], host: {
-                        class: 'mk-empty-state',
-                        '[class.mk-empty-state--sm]': "size() === 'sm'",
-                        '[class.mk-empty-state--lg]': "size() === 'lg'",
-                    }, template: "@if (icon()) {\n  <span class=\"mk-empty-state__icon\" aria-hidden=\"true\">\n    <mk-icon [name]=\"icon()\" [size]=\"iconSize()\" />\n  </span>\n}\n<ng-content select=\"[mkEmptyStateMedia]\" />\n\n@if (title()) {\n  <p class=\"mk-empty-state__title\">{{ title() }}</p>\n}\n@if (description()) {\n  <p class=\"mk-empty-state__description\">{{ description() }}</p>\n}\n\n<ng-content />\n\n<div class=\"mk-empty-state__actions\">\n  <ng-content select=\"[mkEmptyStateActions]\" />\n</div>\n", styles: [":host{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--mk-space-2);padding:var(--mk-space-8) var(--mk-space-5);text-align:center;font-family:var(--mk-font-sans);color:var(--mk-text)}:host(.mk-empty-state--sm){padding:var(--mk-space-5) var(--mk-space-4)}:host(.mk-empty-state--lg){padding:var(--mk-space-12) var(--mk-space-6)}.mk-empty-state__icon{display:inline-flex;align-items:center;justify-content:center;margin-bottom:var(--mk-space-1);color:var(--mk-text-subtle)}.mk-empty-state__title{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)}:host(.mk-empty-state--sm) .mk-empty-state__title{font-size:var(--mk-font-size-md)}:host(.mk-empty-state--lg) .mk-empty-state__title{font-size:var(--mk-font-size-xl)}.mk-empty-state__description{margin:0;max-width:34ch;font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-normal);color:var(--mk-text-muted)}.mk-empty-state__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--mk-space-2);margin-top:var(--mk-space-3)}.mk-empty-state__actions:empty{display:none}\n"] }]
-        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
-
 /**
  * Timeline — a vertical sequence of chronological events (activity feeds, order
  * status, audit logs). A container for `<mk-timeline-item>`s that draws the
@@ -1427,42 +1165,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                     }, template: "<svg\n  class=\"mk-progress-ring__svg\"\n  [attr.viewBox]=\"'0 0 ' + size() + ' ' + size()\"\n  [attr.width]=\"size()\"\n  [attr.height]=\"size()\"\n  aria-hidden=\"true\"\n  focusable=\"false\"\n>\n  <circle\n    class=\"mk-progress-ring__track\"\n    [attr.cx]=\"center()\"\n    [attr.cy]=\"center()\"\n    [attr.r]=\"radius()\"\n    [attr.stroke-width]=\"thickness()\"\n    fill=\"none\"\n  />\n  <circle\n    class=\"mk-progress-ring__arc\"\n    [attr.cx]=\"center()\"\n    [attr.cy]=\"center()\"\n    [attr.r]=\"radius()\"\n    [attr.stroke-width]=\"thickness()\"\n    [attr.stroke-dasharray]=\"circumference()\"\n    [attr.stroke-dashoffset]=\"indeterminate() ? circumference() * 0.7 : dashOffset()\"\n    fill=\"none\"\n    stroke-linecap=\"round\"\n  />\n</svg>\n\n@if (showLabel() && !indeterminate()) {\n  <span class=\"mk-progress-ring__label\">{{ percent() }}%</span>\n}\n<span class=\"mk-progress-ring__center\"><ng-content /></span>\n", styles: [":host{--_ring: var(--mk-primary);display:inline-grid;place-items:center;position:relative;line-height:0;vertical-align:middle}:host([data-tone=primary]){--_ring: var(--mk-primary)}:host([data-tone=success]){--_ring: var(--mk-success)}:host([data-tone=warning]){--_ring: var(--mk-warning)}:host([data-tone=danger]){--_ring: var(--mk-danger)}:host([data-tone=info]){--_ring: var(--mk-info)}:host([data-tone=neutral]){--_ring: var(--mk-text-muted)}.mk-progress-ring__svg{grid-area:1/1;transform:rotate(-90deg)}.mk-progress-ring__track{stroke:var(--mk-border)}.mk-progress-ring__arc{stroke:var(--_ring);transition:stroke-dashoffset var(--mk-duration-normal) var(--mk-ease-standard)}:host(.mk-progress-ring--indeterminate) .mk-progress-ring__svg{animation:mk-progress-ring-spin .9s linear infinite;transform-origin:center}:host(.mk-progress-ring--indeterminate) .mk-progress-ring__arc{transition:none}.mk-progress-ring__label{grid-area:1/1;line-height:1;font-family:var(--mk-font-sans);font-size:.7em;font-weight:var(--mk-font-weight-semibold);color:var(--mk-text);font-variant-numeric:tabular-nums}.mk-progress-ring__center{grid-area:1/1;display:grid;place-items:center;line-height:1}.mk-progress-ring__center:empty{display:none}@keyframes mk-progress-ring-spin{to{transform:rotate(270deg)}}@media(prefers-reduced-motion:reduce){:host(.mk-progress-ring--indeterminate) .mk-progress-ring__svg{animation-duration:1.8s}.mk-progress-ring__arc{transition:none}}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
-/**
- * Spinner — a circular indeterminate loading indicator. Exposes `role="status"`
- * with a visually-hidden label so assistive tech announces the loading state.
- * The animation slows under `prefers-reduced-motion`.
- *
- * ```html
- * <mk-spinner />
- * <mk-spinner size="lg" tone="neutral" label="Fetching results" />
- * ```
- */
-class MkSpinner {
-    i18n = inject(MK_I18N);
-    /** Size scale. */
-    size = input('md', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    /** Semantic color tone. */
-    tone = input('primary', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
-    /** Visually-hidden status label announced to screen readers. */
-    label = input(this.i18n.loading, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MkSpinner, isStandalone: true, selector: "mk-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "class.mk-spinner--sm": "size() === 'sm'", "class.mk-spinner--md": "size() === 'md'", "class.mk-spinner--lg": "size() === 'lg'", "attr.data-tone": "tone()" }, classAttribute: "mk-spinner" }, ngImport: i0, template: "<span class=\"mk-spinner__circle\" aria-hidden=\"true\"></span>\n<span class=\"mk-spinner__sr\">{{ label() }}</span>\n", styles: [":host{--_color: var(--mk-primary);--_size: var(--mk-spinner-size, 1.5rem);--_thickness: var(--mk-spinner-thickness, 2px);display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;color:var(--_color)}:host([data-tone=primary]){--_color: var(--mk-primary)}:host([data-tone=neutral]){--_color: var(--mk-text-muted)}:host([data-tone=success]){--_color: var(--mk-success)}:host([data-tone=warning]){--_color: var(--mk-warning)}:host([data-tone=danger]){--_color: var(--mk-danger)}:host([data-tone=info]){--_color: var(--mk-info)}:host(.mk-spinner--sm){--_size: var(--mk-spinner-size, 1rem);--_thickness: var(--mk-spinner-thickness, 2px)}:host(.mk-spinner--md){--_size: var(--mk-spinner-size, 1.5rem);--_thickness: var(--mk-spinner-thickness, 2px)}:host(.mk-spinner--lg){--_size: var(--mk-spinner-size, 2.25rem);--_thickness: var(--mk-spinner-thickness, 3px)}.mk-spinner__circle{display:block;width:var(--_size);height:var(--_size);border:var(--_thickness) solid currentColor;border-right-color:transparent;border-radius:50%;opacity:.9;animation:mk-spinner-spin .7s linear infinite}@keyframes mk-spinner-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.mk-spinner__circle{animation-duration:1.6s}}.mk-spinner__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkSpinner, decorators: [{
-            type: Component,
-            args: [{ selector: 'mk-spinner', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'mk-spinner',
-                        role: 'status',
-                        '[class.mk-spinner--sm]': "size() === 'sm'",
-                        '[class.mk-spinner--md]': "size() === 'md'",
-                        '[class.mk-spinner--lg]': "size() === 'lg'",
-                        '[attr.data-tone]': 'tone()',
-                    }, template: "<span class=\"mk-spinner__circle\" aria-hidden=\"true\"></span>\n<span class=\"mk-spinner__sr\">{{ label() }}</span>\n", styles: [":host{--_color: var(--mk-primary);--_size: var(--mk-spinner-size, 1.5rem);--_thickness: var(--mk-spinner-thickness, 2px);display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;color:var(--_color)}:host([data-tone=primary]){--_color: var(--mk-primary)}:host([data-tone=neutral]){--_color: var(--mk-text-muted)}:host([data-tone=success]){--_color: var(--mk-success)}:host([data-tone=warning]){--_color: var(--mk-warning)}:host([data-tone=danger]){--_color: var(--mk-danger)}:host([data-tone=info]){--_color: var(--mk-info)}:host(.mk-spinner--sm){--_size: var(--mk-spinner-size, 1rem);--_thickness: var(--mk-spinner-thickness, 2px)}:host(.mk-spinner--md){--_size: var(--mk-spinner-size, 1.5rem);--_thickness: var(--mk-spinner-thickness, 2px)}:host(.mk-spinner--lg){--_size: var(--mk-spinner-size, 2.25rem);--_thickness: var(--mk-spinner-thickness, 3px)}.mk-spinner__circle{display:block;width:var(--_size);height:var(--_size);border:var(--_thickness) solid currentColor;border-right-color:transparent;border-radius:50%;opacity:.9;animation:mk-spinner-spin .7s linear infinite}@keyframes mk-spinner-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.mk-spinner__circle{animation-duration:1.6s}}.mk-spinner__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"] }]
-        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
-
 /**
  * Shared, framework-agnostic helpers for the mk-kit SVG charts. Pure functions
  * only — no Angular, no DOM — so they stay trivially testable and reusable.
@@ -4869,120 +4571,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                     }, template: "@if (showStats()) {\n  <div class=\"mk-diff__header\">\n    <span class=\"mk-diff__label\">{{ beforeLabel() }} \u2192 {{ afterLabel() }}</span>\n    <span class=\"mk-diff__stats\" [attr.aria-label]=\"i18n.diffChanges\">\n      <span class=\"mk-diff__stat mk-diff__stat--add\">+{{ stats().added }}</span>\n      <span class=\"mk-diff__stat mk-diff__stat--del\">\u2212{{ stats().removed }}</span>\n    </span>\n  </div>\n}\n\n<!-- Shared code cell (word segments when present, else plain text). -->\n<ng-template #cell let-row>\n  @if (row.segments) {\n    @for (seg of row.segments; track $index) {\n      <span [class.mk-diff__word]=\"seg.changed\">{{ seg.text }}</span>\n    }\n  } @else {\n    {{ row.text }}\n  }\n</ng-template>\n\n<!-- The bodies scroll horizontally, so they are focusable labelled regions to\n     stay keyboard-scrollable. Changed lines carry a visually-hidden\n     \"Added:\"/\"Removed:\" prefix \u2014 color alone never marks a change. -->\n@if (mode() === 'split') {\n  <div\n    class=\"mk-diff__body mk-diff__body--split\"\n    role=\"region\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"i18n.diffChanges\"\n  >\n    @for (row of splitRows(); track $index) {\n      <div\n        class=\"mk-diff__cell\"\n        [class.mk-diff__cell--delete]=\"row.left?.op === 'delete'\"\n        [class.mk-diff__cell--empty]=\"!row.left\"\n      >\n        @if (lineNumbers()) {\n          <span class=\"mk-diff__num\">{{ row.left?.beforeNo ?? '' }}</span>\n        }\n        @if (row.left?.op === 'delete') {\n          <span class=\"mk-visually-hidden\">{{ i18n.diffRemovedLine }}</span>\n        }\n        <span class=\"mk-diff__marker\" aria-hidden=\"true\">{{\n          row.left ? marker(row.left.op) : ''\n        }}</span>\n        <code class=\"mk-diff__code\">@if (row.left) {\n            <ng-container [ngTemplateOutlet]=\"cell\" [ngTemplateOutletContext]=\"{ $implicit: row.left }\" />\n          }</code>\n      </div>\n      <div\n        class=\"mk-diff__cell\"\n        [class.mk-diff__cell--insert]=\"row.right?.op === 'insert'\"\n        [class.mk-diff__cell--empty]=\"!row.right\"\n      >\n        @if (lineNumbers()) {\n          <span class=\"mk-diff__num\">{{ row.right?.afterNo ?? '' }}</span>\n        }\n        @if (row.right?.op === 'insert') {\n          <span class=\"mk-visually-hidden\">{{ i18n.diffAddedLine }}</span>\n        }\n        <span class=\"mk-diff__marker\" aria-hidden=\"true\">{{\n          row.right ? marker(row.right.op) : ''\n        }}</span>\n        <code class=\"mk-diff__code\">@if (row.right) {\n            <ng-container [ngTemplateOutlet]=\"cell\" [ngTemplateOutletContext]=\"{ $implicit: row.right }\" />\n          }</code>\n      </div>\n    }\n  </div>\n} @else {\n  <div\n    class=\"mk-diff__body\"\n    role=\"region\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"i18n.diffChanges\"\n  >\n    @for (row of rows(); track $index) {\n      <div\n        class=\"mk-diff__row\"\n        [class.mk-diff__row--insert]=\"row.op === 'insert'\"\n        [class.mk-diff__row--delete]=\"row.op === 'delete'\"\n      >\n        @if (lineNumbers()) {\n          <span class=\"mk-diff__num\">{{ row.beforeNo ?? '' }}</span>\n          <span class=\"mk-diff__num\">{{ row.afterNo ?? '' }}</span>\n        }\n        @if (row.op === 'insert') {\n          <span class=\"mk-visually-hidden\">{{ i18n.diffAddedLine }}</span>\n        } @else if (row.op === 'delete') {\n          <span class=\"mk-visually-hidden\">{{ i18n.diffRemovedLine }}</span>\n        }\n        <span class=\"mk-diff__marker\" aria-hidden=\"true\">{{ marker(row.op) }}</span>\n        <code class=\"mk-diff__code\"><ng-container [ngTemplateOutlet]=\"cell\" [ngTemplateOutletContext]=\"{ $implicit: row }\" /></code>\n      </div>\n    }\n  </div>\n}\n", styles: [":host{--_add-bg: color-mix(in srgb, var(--mk-success) 12%, var(--mk-surface));--_add-word: color-mix(in srgb, var(--mk-success) 28%, var(--mk-surface));--_del-bg: color-mix(in srgb, var(--mk-danger) 12%, var(--mk-surface));--_del-word: color-mix(in srgb, var(--mk-danger) 28%, var(--mk-surface));display:block;overflow:hidden;background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);font-family:var(--mk-font-sans)}.mk-diff__header{display:flex;align-items:center;justify-content:space-between;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);background-color:var(--mk-surface-2);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle);font-size:var(--mk-font-size-sm)}.mk-diff__label{color:var(--mk-text-muted);font-weight:var(--mk-font-weight-medium)}.mk-diff__stats{display:flex;gap:var(--mk-space-2);font-family:var(--mk-font-mono);font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold)}.mk-diff__stat--add{color:var(--mk-success)}.mk-diff__stat--del{color:var(--mk-danger-text)}.mk-diff__body{direction:ltr;overflow-x:auto;font-family:var(--mk-font-mono);font-size:var(--mk-font-size-sm);line-height:1.6}.mk-diff__body:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-diff__row{display:flex;align-items:baseline;min-height:1.6em}.mk-diff__row--insert{background-color:var(--_add-bg)}.mk-diff__row--delete{background-color:var(--_del-bg)}.mk-diff__num{flex:none;width:3ch;padding:0 var(--mk-space-2);text-align:right;color:var(--mk-text-subtle);user-select:none;-webkit-user-select:none}.mk-diff__marker{flex:none;width:2ch;text-align:center;color:var(--mk-text-muted);-webkit-user-select:none;user-select:none}.mk-diff__code{flex:1 1 auto;min-width:0;padding-right:var(--mk-space-3);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--mk-text);font:inherit;background:none}.mk-diff__word{border-radius:var(--mk-radius-sm)}.mk-diff__row--insert .mk-diff__word{background-color:var(--_add-word)}.mk-diff__row--delete .mk-diff__word{background-color:var(--_del-word)}.mk-diff__body--split{display:grid;grid-template-columns:1fr 1fr}.mk-diff__cell{display:flex;align-items:baseline;min-height:1.6em;border-right:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-diff__cell:nth-child(2n){border-right:none}.mk-diff__cell--insert{background-color:var(--_add-bg)}.mk-diff__cell--delete{background-color:var(--_del-bg)}.mk-diff__cell--empty{background-color:var(--mk-surface-2)}.mk-diff__cell--insert .mk-diff__word{background-color:var(--_add-word)}.mk-diff__cell--delete .mk-diff__word{background-color:var(--_del-word)}.mk-diff__cell--insert .mk-diff__marker{color:var(--mk-success)}.mk-diff__cell--delete .mk-diff__marker{color:var(--mk-danger-text)}\n"] }]
         }], propDecorators: { before: [{ type: i0.Input, args: [{ isSignal: true, alias: "before", required: false }] }], after: [{ type: i0.Input, args: [{ isSignal: true, alias: "after", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], wordHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "wordHighlight", required: false }] }], lineNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineNumbers", required: false }] }], ignoreTrailingWhitespace: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignoreTrailingWhitespace", required: false }] }], showStats: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStats", required: false }] }], beforeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "beforeLabel", required: false }] }], afterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "afterLabel", required: false }] }] } });
 
-/** Stable empty fallback so out-of-range lookups don't allocate per call. */
-const NO_CONNECTIONS = [];
-/**
- * Kanban board — a horizontal row of columns whose cards can be dragged and
- * reordered within a column or transferred between columns. Built on the dnd
- * group's connected `[mkDropList]` / `[mkDrag]` directives, so it inherits both
- * pointer and keyboard dragging (WCAG 2.1.1) for free.
- *
- * Bind `columns` two-way; the model is updated immutably on each drop. Project
- * an `<ng-template>` to render custom card content — it receives the card as
- * `$implicit` and the owning column as `column`:
- *
- * ```html
- * <mk-kanban [(columns)]="board" (cardMoved)="onMoved($event)">
- *   <ng-template #cardTemplate let-card let-column="column">
- *     <strong>{{ card.title }}</strong>
- *   </ng-template>
- * </mk-kanban>
- * ```
- */
-class MkKanban {
-    /** The board's columns and their cards (two-way). Updated on every drop. */
-    columns = model([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
-    /** Disable all dragging on the board. */
-    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /** Emitted after the model is updated when a card is moved. */
-    cardMoved = output();
-    /** Optional consumer-projected card renderer (`$implicit` = card). */
-    cardTemplate = contentChild(TemplateRef, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "cardTemplate" }] : /* istanbul ignore next */ []));
-    /** Board-scoped prefix so this board's drop-list ids never collide. */
-    boardId = mkUniqueId('mk-kanban');
-    /** Column count as its own computed so id arrays survive card-only updates. */
-    columnCount = computed(() => this.columns().length, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "columnCount" }] : /* istanbul ignore next */ []));
-    /** Stable drop-list id per column, positionally matched to `columns()`. */
-    listIds = computed(() => Array.from({ length: this.columnCount() }, (_, i) => `${this.boardId}-col-${i}`), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "listIds" }] : /* istanbul ignore next */ []));
-    /**
-     * Per-column connected-target ids (every other column's list). One stable
-     * array per column, recomputed only when the column count changes — a fresh
-     * array per change-detection pass would dirty each `MkDropList`'s
-     * `connectedTo` input identity on every cycle.
-     */
-    connections = computed(() => {
-        const ids = this.listIds();
-        return ids.map((_, i) => ids.filter((_, j) => j !== i));
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "connections" }] : /* istanbul ignore next */ []));
-    /** Ids of every other column's list — the connected transfer targets for `i`. */
-    connectedTo(index) {
-        return this.connections()[index] ?? NO_CONNECTIONS;
-    }
-    /**
-     * Apply a drop from the dnd module. Reads the source/target columns from the
-     * event's containers (matched by their drop-list ids), updates the two-way
-     * `columns` model immutably, then emits {@link cardMoved}.
-     */
-    onDrop(event) {
-        const ids = this.listIds();
-        const fromCol = ids.indexOf(event.previousContainer.id());
-        const toCol = ids.indexOf(event.container.id());
-        if (fromCol === -1 || toCol === -1)
-            return;
-        this.moveCard(fromCol, toCol, event.previousIndex, event.currentIndex);
-    }
-    /**
-     * Immutably move the card at `fromIndex` of column `fromCol` to `toIndex` of
-     * column `toCol`, updating the model and emitting {@link cardMoved}. Column
-     * indices refer to positions in `columns()`.
-     */
-    moveCard(fromCol, toCol, fromIndex, toIndex) {
-        const cols = this.columns();
-        const source = cols[fromCol];
-        const target = cols[toCol];
-        if (!source || !target)
-            return;
-        const card = source.cards[fromIndex];
-        if (!card)
-            return;
-        const next = cols.map((col, i) => {
-            if (fromCol === toCol && i === fromCol) {
-                const cards = [...col.cards];
-                mkMoveItemInArray(cards, fromIndex, toIndex);
-                return { ...col, cards };
-            }
-            if (i === fromCol) {
-                return { ...col, cards: col.cards.filter((_, idx) => idx !== fromIndex) };
-            }
-            if (i === toCol) {
-                const cards = [...col.cards];
-                cards.splice(Math.max(0, Math.min(toIndex, cards.length)), 0, card);
-                return { ...col, cards };
-            }
-            return col;
-        });
-        this.columns.set(next);
-        this.cardMoved.emit({
-            card,
-            from: source.id,
-            to: target.id,
-            fromIndex,
-            toIndex,
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkKanban, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkKanban, isStandalone: true, selector: "mk-kanban", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columns: "columnsChange", cardMoved: "cardMoved" }, host: { classAttribute: "mk-kanban" }, queries: [{ propertyName: "cardTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mk-kanban__board\">\n  @for (column of columns(); track column.id; let colIndex = $index) {\n    <section\n      class=\"mk-kanban__column\"\n      role=\"region\"\n      [attr.aria-label]=\"column.title\"\n    >\n      <header class=\"mk-kanban__column-header\">\n        <span class=\"mk-kanban__column-title\">{{ column.title }}</span>\n        <span class=\"mk-kanban__column-count\" aria-hidden=\"true\">\n          {{ column.cards.length }}\n        </span>\n      </header>\n\n      <div\n        mkDropList\n        class=\"mk-kanban__cards\"\n        [mkDropListData]=\"column.cards\"\n        [mkDropListId]=\"listIds()[colIndex]\"\n        [mkDropListLabel]=\"column.title\"\n        [mkDropListConnectedTo]=\"connectedTo(colIndex)\"\n        [mkDropListDisabled]=\"disabled()\"\n        mkDropListOrientation=\"vertical\"\n        (mkDropListDropped)=\"onDrop($event)\"\n      >\n        @for (card of column.cards; track card.id) {\n          <div\n            mkDrag\n            class=\"mk-kanban__card\"\n            [mkDragData]=\"card\"\n            [mkDragDisabled]=\"disabled()\"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"cardTemplate() ?? defaultCard\"\n              [ngTemplateOutletContext]=\"{ $implicit: card, column: column }\"\n            />\n          </div>\n        }\n      </div>\n    </section>\n  }\n</div>\n\n<ng-template #defaultCard let-card>\n  <span class=\"mk-kanban__card-title\">{{ card.title }}</span>\n</ng-template>\n", styles: [":host{display:block;color:var(--mk-text)}.mk-kanban__board{display:flex;gap:var(--mk-space-4);align-items:flex-start;overflow-x:auto;padding-bottom:var(--mk-space-2)}.mk-kanban__column{display:flex;flex-direction:column;flex:0 0 auto;width:17rem;max-height:100%;background-color:var(--mk-surface-2);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg)}.mk-kanban__column-header{display:flex;align-items:center;justify-content:space-between;gap:var(--mk-space-2);padding:var(--mk-space-3) var(--mk-space-4);font-weight:600;border-bottom:var(--mk-border-width) solid var(--mk-border)}.mk-kanban__column-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-kanban__column-count{flex:0 0 auto;min-width:1.5rem;padding:0 var(--mk-space-2);font-size:.75rem;font-weight:600;line-height:1.5rem;text-align:center;color:var(--mk-text-muted);background-color:var(--mk-surface);border-radius:var(--mk-radius-md)}.mk-kanban__cards{display:flex;flex-direction:column;gap:var(--mk-space-2);flex:1 1 auto;min-height:var(--mk-space-8);padding:var(--mk-space-3);overflow-y:auto}.mk-kanban__card{padding:var(--mk-space-3) var(--mk-space-4);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-sm)}.mk-kanban__card:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-kanban__card-title{display:block;min-width:0;overflow-wrap:anywhere}\n"], dependencies: [{ kind: "component", type: MkDropList, selector: "[mkDropList]", inputs: ["mkDropListData", "mkDropListId", "mkDropListConnectedTo", "mkDropListLabel", "mkDropListLabelledBy", "mkDropListOrientation", "mkDropListDisabled"], outputs: ["mkDropListDropped"], exportAs: ["mkDropList"] }, { kind: "component", type: MkDrag, selector: "[mkDrag]", inputs: ["mkDragData", "mkDragDisabled", "mkDragTouchDelay"], exportAs: ["mkDrag"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkKanban, decorators: [{
-            type: Component,
-            args: [{ selector: 'mk-kanban', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MkDropList, MkDrag, NgTemplateOutlet], host: { class: 'mk-kanban' }, template: "<div class=\"mk-kanban__board\">\n  @for (column of columns(); track column.id; let colIndex = $index) {\n    <section\n      class=\"mk-kanban__column\"\n      role=\"region\"\n      [attr.aria-label]=\"column.title\"\n    >\n      <header class=\"mk-kanban__column-header\">\n        <span class=\"mk-kanban__column-title\">{{ column.title }}</span>\n        <span class=\"mk-kanban__column-count\" aria-hidden=\"true\">\n          {{ column.cards.length }}\n        </span>\n      </header>\n\n      <div\n        mkDropList\n        class=\"mk-kanban__cards\"\n        [mkDropListData]=\"column.cards\"\n        [mkDropListId]=\"listIds()[colIndex]\"\n        [mkDropListLabel]=\"column.title\"\n        [mkDropListConnectedTo]=\"connectedTo(colIndex)\"\n        [mkDropListDisabled]=\"disabled()\"\n        mkDropListOrientation=\"vertical\"\n        (mkDropListDropped)=\"onDrop($event)\"\n      >\n        @for (card of column.cards; track card.id) {\n          <div\n            mkDrag\n            class=\"mk-kanban__card\"\n            [mkDragData]=\"card\"\n            [mkDragDisabled]=\"disabled()\"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"cardTemplate() ?? defaultCard\"\n              [ngTemplateOutletContext]=\"{ $implicit: card, column: column }\"\n            />\n          </div>\n        }\n      </div>\n    </section>\n  }\n</div>\n\n<ng-template #defaultCard let-card>\n  <span class=\"mk-kanban__card-title\">{{ card.title }}</span>\n</ng-template>\n", styles: [":host{display:block;color:var(--mk-text)}.mk-kanban__board{display:flex;gap:var(--mk-space-4);align-items:flex-start;overflow-x:auto;padding-bottom:var(--mk-space-2)}.mk-kanban__column{display:flex;flex-direction:column;flex:0 0 auto;width:17rem;max-height:100%;background-color:var(--mk-surface-2);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg)}.mk-kanban__column-header{display:flex;align-items:center;justify-content:space-between;gap:var(--mk-space-2);padding:var(--mk-space-3) var(--mk-space-4);font-weight:600;border-bottom:var(--mk-border-width) solid var(--mk-border)}.mk-kanban__column-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-kanban__column-count{flex:0 0 auto;min-width:1.5rem;padding:0 var(--mk-space-2);font-size:.75rem;font-weight:600;line-height:1.5rem;text-align:center;color:var(--mk-text-muted);background-color:var(--mk-surface);border-radius:var(--mk-radius-md)}.mk-kanban__cards{display:flex;flex-direction:column;gap:var(--mk-space-2);flex:1 1 auto;min-height:var(--mk-space-8);padding:var(--mk-space-3);overflow-y:auto}.mk-kanban__card{padding:var(--mk-space-3) var(--mk-space-4);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-sm)}.mk-kanban__card:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-kanban__card-title{display:block;min-width:0;overflow-wrap:anywhere}\n"] }]
-        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }, { type: i0.Output, args: ["columnsChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], cardMoved: [{ type: i0.Output, args: ["cardMoved"] }], cardTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
-
 /**
  * Dependency-free QR Code encoder.
  *
@@ -6087,5 +5675,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { MK_CHART_PALETTE_SIZE, MK_HEATMAP_MIN_CONTRAST, MkAvatar, MkAvatarGroup, MkBadge, MkBadgeOverlay, MkBarChart, MkCalendarHeatmap, MkCard, MkCardFooter, MkCardHeader, MkCardTitle, MkCarousel, MkCarouselSlide, MkCode, MkCountdown, MkDescItem, MkDescriptionList, MkDiff, MkDivider, MkDonutChart, MkEmptyState, MkFunnelChart, MkGauge, MkHeatmap, MkInlineEdit, MkJsonViewer, MkKanban, MkLineChart, MkList, MkListItem, MkLogViewer, MkMarkdown, MkOrgChart, MkOrgChartNodeDef, MkProfileActions, MkProfileCard, MkProfileMeta, MkProgressBar, MkProgressRing, MkQrCode, MkRadarChart, MkScatterChart, MkSkeleton, MkSkeletonPreset, MkSparkline, MkSpinner, MkStatCard, MkTag, MkTimeline, MkTimelineItem, MkTreemap, MkVirtualScroll, mkArcPath, mkAreaPath, mkBuildJsonTree, mkChartColor, mkContrastRatio, mkEncodeQr, mkFormatCompact, mkHeatmapCellColors, mkLinePath, mkLinearScale, mkMixRgb, mkNiceTicks, mkOrgChartFromFlat, mkParseRgb, mkRelativeLuminance, mkSplitDuration, mkSquarify };
+export { MK_CHART_PALETTE_SIZE, MK_HEATMAP_MIN_CONTRAST, MkAvatar, MkAvatarGroup, MkBarChart, MkCalendarHeatmap, MkCard, MkCardFooter, MkCardHeader, MkCardTitle, MkCarousel, MkCarouselSlide, MkCode, MkCountdown, MkDescItem, MkDescriptionList, MkDiff, MkDivider, MkDonutChart, MkFunnelChart, MkGauge, MkHeatmap, MkInlineEdit, MkJsonViewer, MkLineChart, MkList, MkListItem, MkLogViewer, MkMarkdown, MkOrgChart, MkOrgChartNodeDef, MkProfileActions, MkProfileCard, MkProfileMeta, MkProgressBar, MkProgressRing, MkQrCode, MkRadarChart, MkScatterChart, MkSkeleton, MkSkeletonPreset, MkSparkline, MkStatCard, MkTag, MkTimeline, MkTimelineItem, MkTreemap, MkVirtualScroll, mkArcPath, mkAreaPath, mkBuildJsonTree, mkChartColor, mkContrastRatio, mkEncodeQr, mkFormatCompact, mkHeatmapCellColors, mkLinePath, mkLinearScale, mkMixRgb, mkNiceTicks, mkOrgChartFromFlat, mkParseRgb, mkRelativeLuminance, mkSplitDuration, mkSquarify };
 //# sourceMappingURL=mk-kit-ui-data.mjs.map