@mk-kit/ui 0.34.0

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

@@ -0,0 +1,2542 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, signal, ChangeDetectionStrategy, Component, contentChildren, viewChildren, model, effect, inject, Directive, computed, numberAttribute, ElementRef, DOCUMENT, output, Injector, PLATFORM_ID, afterNextRender, viewChild, TemplateRef, linkedSignal } from '@angular/core';
+import { mkUniqueId, MK_I18N, MkAnchoredPanel, MkFocusTrap } from '@mk-kit/ui/core';
+import { NgTemplateOutlet, isPlatformBrowser, isPlatformServer } from '@angular/common';
+import { MkIcon } from '@mk-kit/ui/icon';
+
+/**
+ * A single tab + its panel. Declared inside `<mk-tabs>`; the projected content
+ * becomes the tab panel body while `label` is rendered in the tablist.
+ *
+ * ```html
+ * <mk-tabs>
+ *   <mk-tab label="Overview">…panel content…</mk-tab>
+ *   <mk-tab label="Settings" [disabled]="locked()">…</mk-tab>
+ * </mk-tabs>
+ * ```
+ */
+class MkTab {
+    /** Text shown on the tab button in the tablist. */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Disable selection of this tab. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Stable id for the tab button (wires `aria-labelledby`). */
+    tabId = mkUniqueId('mk-tab');
+    /** Stable id for the panel (wires `aria-controls`). */
+    panelId = mkUniqueId('mk-tabpanel');
+    /** Whether this tab is currently selected. Set by the parent `MkTabs`. */
+    active = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MkTab, isStandalone: true, selector: "mk-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tabpanel" }, properties: { "id": "panelId", "attr.aria-labelledby": "tabId", "attr.hidden": "active() ? null : ''", "attr.tabindex": "active() ? 0 : null" }, classAttribute: "mk-tab" }, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block;padding:var(--mk-space-4) var(--mk-space-1);color:var(--mk-text);font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-normal);animation:mk-tab-fade var(--mk-duration-normal) var(--mk-ease-out)}:host([hidden]){display:none}:host(: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)}@keyframes mk-tab-fade{0%{opacity:0;transform:translateY(var(--mk-space-1))}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){:host{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTab, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-tab', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-tab',
+                        role: 'tabpanel',
+                        '[id]': 'panelId',
+                        '[attr.aria-labelledby]': 'tabId',
+                        '[attr.hidden]': "active() ? null : ''",
+                        '[attr.tabindex]': 'active() ? 0 : null',
+                    }, template: "<ng-content />\n", styles: [":host{display:block;padding:var(--mk-space-4) var(--mk-space-1);color:var(--mk-text);font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-normal);animation:mk-tab-fade var(--mk-duration-normal) var(--mk-ease-out)}:host([hidden]){display:none}:host(: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)}@keyframes mk-tab-fade{0%{opacity:0;transform:translateY(var(--mk-space-1))}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){:host{animation:none}}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * Accessible tabs implementing the ARIA tabs pattern: a `role="tablist"` with
+ * roving tabindex, Arrow/Home/End keyboard navigation and an animated active
+ * indicator. Selection is two-way bindable via `selectedIndex`.
+ *
+ * ```html
+ * <mk-tabs [(selectedIndex)]="tab" variant="line">
+ *   <mk-tab label="Profile">…</mk-tab>
+ *   <mk-tab label="Billing">…</mk-tab>
+ * </mk-tabs>
+ * ```
+ */
+class MkTabs {
+    /** Projected tabs, kept live via a signal content query. */
+    tabs = contentChildren(MkTab, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    /** Rendered tab buttons, used to move focus and measure the indicator. */
+    tabButtons = viewChildren('tabBtn', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabButtons" }] : /* istanbul ignore next */ []));
+    /** Zero-based index of the active tab (two-way). */
+    selectedIndex = model(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
+    /** `line` shows an underline indicator; `pill` uses filled pills. */
+    variant = input('line', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Sliding indicator geometry (line variant). */
+    indicatorLeft = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicatorLeft" }] : /* istanbul ignore next */ []));
+    indicatorWidth = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicatorWidth" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Keep each tab's `active` state and the clamped selected index in sync.
+        effect(() => {
+            const tabs = this.tabs();
+            let index = this.selectedIndex();
+            if (tabs.length > 0 && index > tabs.length - 1) {
+                index = tabs.length - 1;
+            }
+            if (index < 0)
+                index = 0;
+            tabs.forEach((tab, i) => tab.active.set(i === index));
+            queueMicrotask(() => this.measureIndicator(index));
+        });
+    }
+    select(index) {
+        const tab = this.tabs()[index];
+        if (!tab || tab.disabled())
+            return;
+        this.selectedIndex.set(index);
+        // The tablist scrolls horizontally on narrow screens — keep the newly
+        // active tab visible. 'nearest' so activating a tab never jumps the page
+        // vertically. Optional-chained: jsdom has no scrollIntoView.
+        this.tabButtons()[index]?.nativeElement.scrollIntoView?.({
+            block: 'nearest',
+            inline: 'nearest',
+        });
+    }
+    focusTab(index) {
+        this.tabButtons()[index]?.nativeElement.focus();
+    }
+    onKeydown(event, index) {
+        const count = this.tabs().length;
+        let next = -1;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                next = this.nextEnabled(index, 1);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                next = this.nextEnabled(index, -1);
+                break;
+            case 'Home':
+                next = this.nextEnabled(-1, 1);
+                break;
+            case 'End':
+                next = this.nextEnabled(count, -1);
+                break;
+            default:
+                return;
+        }
+        if (next >= 0) {
+            event.preventDefault();
+            this.select(next);
+            this.focusTab(next);
+        }
+    }
+    /** Next non-disabled tab index starting from `from`, wrapping around. */
+    nextEnabled(from, step) {
+        const tabs = this.tabs();
+        const count = tabs.length;
+        if (count === 0)
+            return -1;
+        for (let i = 1; i <= count; i++) {
+            const idx = (((from + step * i) % count) + count) % count;
+            if (!tabs[idx].disabled())
+                return idx;
+        }
+        return -1;
+    }
+    measureIndicator(index) {
+        const btn = this.tabButtons()[index]?.nativeElement;
+        if (!btn)
+            return;
+        this.indicatorLeft.set(btn.offsetLeft);
+        this.indicatorWidth.set(btn.offsetWidth);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkTabs, isStandalone: true, selector: "mk-tabs", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange" }, host: { properties: { "class.mk-tabs--line": "variant() === 'line'", "class.mk-tabs--pill": "variant() === 'pill'" }, classAttribute: "mk-tabs" }, queries: [{ propertyName: "tabs", predicate: MkTab, isSignal: true }], viewQueries: [{ propertyName: "tabButtons", predicate: ["tabBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mk-tabs__list\" role=\"tablist\">\n  @for (tab of tabs(); track tab.tabId; let i = $index) {\n    <button\n      #tabBtn\n      type=\"button\"\n      role=\"tab\"\n      class=\"mk-tabs__tab\"\n      [class.mk-tabs__tab--active]=\"i === selectedIndex()\"\n      [id]=\"tab.tabId\"\n      [attr.aria-controls]=\"tab.panelId\"\n      [attr.aria-selected]=\"i === selectedIndex()\"\n      [attr.tabindex]=\"i === selectedIndex() ? 0 : -1\"\n      [disabled]=\"tab.disabled()\"\n      (click)=\"select(i)\"\n      (keydown)=\"onKeydown($event, i)\"\n    >\n      {{ tab.label() }}\n    </button>\n  }\n\n  @if (variant() === 'line') {\n    <span\n      class=\"mk-tabs__indicator\"\n      aria-hidden=\"true\"\n      [style.transform]=\"'translateX(' + indicatorLeft() + 'px)'\"\n      [style.width.px]=\"indicatorWidth()\"\n    ></span>\n  }\n</div>\n\n<div class=\"mk-tabs__panels\">\n  <ng-content />\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.mk-tabs__list{position:relative;display:flex;align-items:stretch;gap:var(--mk-space-1);overflow-x:auto;scrollbar-width:none}.mk-tabs__list::-webkit-scrollbar{display:none}:host(.mk-tabs--line) .mk-tabs__list{border-bottom:var(--mk-border-width) solid var(--mk-border)}.mk-tabs__tab{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--mk-space-2);min-height:44px;padding:var(--mk-space-2) var(--mk-space-4);background:transparent;border:var(--mk-border-width) solid transparent;color:var(--mk-text-muted);font-family:inherit;font-size:var(--mk-font-size-md);font-weight:var(--mk-font-weight-medium);line-height:1;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--mk-duration-fast) var(--mk-ease-standard),background-color var(--mk-duration-fast) var(--mk-ease-standard),border-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-tabs__tab:hover{color:var(--mk-text)}.mk-tabs__tab:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width));border-radius:var(--mk-radius-sm)}.mk-tabs__tab:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-tabs__tab--active{color:var(--mk-primary)}:host(.mk-tabs--line) .mk-tabs__tab{border-radius:var(--mk-radius-sm) var(--mk-radius-sm) 0 0}.mk-tabs__indicator{position:absolute;bottom:0;left:0;height:2px;background:var(--mk-primary);border-radius:var(--mk-radius-pill);transition:transform var(--mk-duration-normal) var(--mk-ease-emphasized),width var(--mk-duration-normal) var(--mk-ease-emphasized)}:host(.mk-tabs--pill) .mk-tabs__list{gap:var(--mk-space-1);padding:var(--mk-space-1);background:var(--mk-surface-2);border-radius:var(--mk-radius-lg)}:host(.mk-tabs--pill) .mk-tabs__tab{border-radius:var(--mk-radius-md)}:host(.mk-tabs--pill) .mk-tabs__tab:hover:not(:disabled):not(.mk-tabs__tab--active){background:var(--mk-hover-overlay)}:host(.mk-tabs--pill) .mk-tabs__tab--active{color:var(--mk-primary-contrast);background:var(--mk-primary)}.mk-tabs__panels{display:block}@media(prefers-reduced-motion:reduce){.mk-tabs__indicator{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTabs, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-tabs', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-tabs',
+                        '[class.mk-tabs--line]': "variant() === 'line'",
+                        '[class.mk-tabs--pill]': "variant() === 'pill'",
+                    }, template: "<div class=\"mk-tabs__list\" role=\"tablist\">\n  @for (tab of tabs(); track tab.tabId; let i = $index) {\n    <button\n      #tabBtn\n      type=\"button\"\n      role=\"tab\"\n      class=\"mk-tabs__tab\"\n      [class.mk-tabs__tab--active]=\"i === selectedIndex()\"\n      [id]=\"tab.tabId\"\n      [attr.aria-controls]=\"tab.panelId\"\n      [attr.aria-selected]=\"i === selectedIndex()\"\n      [attr.tabindex]=\"i === selectedIndex() ? 0 : -1\"\n      [disabled]=\"tab.disabled()\"\n      (click)=\"select(i)\"\n      (keydown)=\"onKeydown($event, i)\"\n    >\n      {{ tab.label() }}\n    </button>\n  }\n\n  @if (variant() === 'line') {\n    <span\n      class=\"mk-tabs__indicator\"\n      aria-hidden=\"true\"\n      [style.transform]=\"'translateX(' + indicatorLeft() + 'px)'\"\n      [style.width.px]=\"indicatorWidth()\"\n    ></span>\n  }\n</div>\n\n<div class=\"mk-tabs__panels\">\n  <ng-content />\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.mk-tabs__list{position:relative;display:flex;align-items:stretch;gap:var(--mk-space-1);overflow-x:auto;scrollbar-width:none}.mk-tabs__list::-webkit-scrollbar{display:none}:host(.mk-tabs--line) .mk-tabs__list{border-bottom:var(--mk-border-width) solid var(--mk-border)}.mk-tabs__tab{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--mk-space-2);min-height:44px;padding:var(--mk-space-2) var(--mk-space-4);background:transparent;border:var(--mk-border-width) solid transparent;color:var(--mk-text-muted);font-family:inherit;font-size:var(--mk-font-size-md);font-weight:var(--mk-font-weight-medium);line-height:1;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--mk-duration-fast) var(--mk-ease-standard),background-color var(--mk-duration-fast) var(--mk-ease-standard),border-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-tabs__tab:hover{color:var(--mk-text)}.mk-tabs__tab:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width));border-radius:var(--mk-radius-sm)}.mk-tabs__tab:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-tabs__tab--active{color:var(--mk-primary)}:host(.mk-tabs--line) .mk-tabs__tab{border-radius:var(--mk-radius-sm) var(--mk-radius-sm) 0 0}.mk-tabs__indicator{position:absolute;bottom:0;left:0;height:2px;background:var(--mk-primary);border-radius:var(--mk-radius-pill);transition:transform var(--mk-duration-normal) var(--mk-ease-emphasized),width var(--mk-duration-normal) var(--mk-ease-emphasized)}:host(.mk-tabs--pill) .mk-tabs__list{gap:var(--mk-space-1);padding:var(--mk-space-1);background:var(--mk-surface-2);border-radius:var(--mk-radius-lg)}:host(.mk-tabs--pill) .mk-tabs__tab{border-radius:var(--mk-radius-md)}:host(.mk-tabs--pill) .mk-tabs__tab:hover:not(:disabled):not(.mk-tabs__tab--active){background:var(--mk-hover-overlay)}:host(.mk-tabs--pill) .mk-tabs__tab--active{color:var(--mk-primary-contrast);background:var(--mk-primary)}.mk-tabs__panels{display:block}@media(prefers-reduced-motion:reduce){.mk-tabs__indicator{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MkTab), { isSignal: true }] }], tabButtons: [{ type: i0.ViewChildren, args: ['tabBtn', { isSignal: true }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+
+/**
+ * Groups `<mk-accordion-item>`s. By default only one item can be open at a
+ * time (single-open); set `multi` to allow several. Coordinates its children
+ * through their two-way `open` models.
+ *
+ * ```html
+ * <mk-accordion [multi]="false">
+ *   <mk-accordion-item header="One">…</mk-accordion-item>
+ *   <mk-accordion-item header="Two">…</mk-accordion-item>
+ * </mk-accordion>
+ * ```
+ */
+class MkAccordion {
+    /** Allow multiple items open simultaneously. */
+    multi = input(false, { ...(ngDevMode ? { debugName: "multi" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Registered items collapse siblings on open in single mode. */
+    items = new Set();
+    /** Called by an item just before its open state changes. */
+    onItemToggle(source, opening) {
+        this.items.add(source);
+        if (opening && !this.multi()) {
+            for (const item of this.items) {
+                if (item !== source && item.open())
+                    item.open.set(false);
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MkAccordion, isStandalone: true, selector: "mk-accordion", inputs: { multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "mk-accordion" }, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block;border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);background:var(--mk-surface);overflow:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkAccordion, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-accordion', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-accordion',
+                    }, template: "<ng-content />\n", styles: [":host{display:block;border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);background:var(--mk-surface);overflow:hidden}\n"] }]
+        }], propDecorators: { multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }] } });
+
+/**
+ * A collapsible section within an `<mk-accordion>`. The header is a button that
+ * toggles a smoothly animated body region wired with `aria-expanded` /
+ * `aria-controls`. Open state is two-way bindable via `open`.
+ *
+ * ```html
+ * <mk-accordion-item header="Shipping" [(open)]="shippingOpen">
+ *   …body…
+ * </mk-accordion-item>
+ * ```
+ */
+class MkAccordionItem {
+    accordion = inject(MkAccordion, { optional: true });
+    /** Plain-text header (ignored when `[mkAccordionHeader]` is projected). */
+    header = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
+    /** Disable toggling of this item. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether the item is expanded (two-way). */
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Stable id for the trigger button. */
+    triggerId = mkUniqueId('mk-acc-trigger');
+    /** Stable id for the panel region. */
+    panelId = mkUniqueId('mk-acc-panel');
+    toggle() {
+        if (this.disabled())
+            return;
+        const next = !this.open();
+        this.accordion?.onItemToggle(this, next);
+        this.open.set(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkAccordionItem, isStandalone: true, selector: "mk-accordion-item", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "class.mk-accordion-item--open": "open()", "class.mk-accordion-item--disabled": "disabled()" }, classAttribute: "mk-accordion-item" }, ngImport: i0, template: "<h3 class=\"mk-accordion-item__heading\">\n  <button\n    type=\"button\"\n    class=\"mk-accordion-item__trigger\"\n    [id]=\"triggerId\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-expanded]=\"open()\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"mk-accordion-item__label\">\n      @if (header()) {\n        {{ header() }}\n      }\n      <ng-content select=\"[mkAccordionHeader]\" />\n    </span>\n    <span class=\"mk-accordion-item__chevron\" aria-hidden=\"true\">\n      <svg viewBox=\"0 0 24 24\" width=\"1em\" height=\"1em\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <polyline points=\"6 9 12 15 18 9\" />\n      </svg>\n    </span>\n  </button>\n</h3>\n\n<div\n  class=\"mk-accordion-item__panel\"\n  role=\"region\"\n  [id]=\"panelId\"\n  [attr.aria-labelledby]=\"triggerId\"\n  [attr.inert]=\"open() ? null : ''\"\n>\n  <div class=\"mk-accordion-item__panel-inner\">\n    <div class=\"mk-accordion-item__body\">\n      <ng-content />\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;border-bottom:var(--mk-border-width) solid var(--mk-border)}:host(:last-of-type){border-bottom:0}.mk-accordion-item__heading{margin:0;font:inherit}.mk-accordion-item__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--mk-space-3);width:100%;min-height:44px;padding:var(--mk-space-4);background:transparent;border:var(--mk-border-width) solid transparent;color:var(--mk-text);font-family:inherit;font-size:var(--mk-font-size-md);font-weight:var(--mk-font-weight-medium);text-align:start;cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-accordion-item__trigger:hover:not(:disabled){background:var(--mk-hover-overlay)}.mk-accordion-item__trigger:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width));border-radius:var(--mk-radius-sm)}.mk-accordion-item__trigger:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-accordion-item__label{display:inline-flex;align-items:center;gap:var(--mk-space-2);min-width:0}.mk-accordion-item__chevron{display:inline-flex;flex:none;color:var(--mk-text-muted);font-size:var(--mk-font-size-lg);transition:transform var(--mk-duration-normal) var(--mk-ease-emphasized)}:host(.mk-accordion-item--open) .mk-accordion-item__chevron{transform:rotate(180deg)}.mk-accordion-item__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--mk-duration-normal) var(--mk-ease-emphasized)}:host(.mk-accordion-item--open) .mk-accordion-item__panel{grid-template-rows:1fr}.mk-accordion-item__panel-inner{overflow:hidden}.mk-accordion-item__body{padding:0 var(--mk-space-4) var(--mk-space-4);color:var(--mk-text);font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-normal)}@media(prefers-reduced-motion:reduce){.mk-accordion-item__panel,.mk-accordion-item__chevron{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkAccordionItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-accordion-item', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-accordion-item',
+                        '[class.mk-accordion-item--open]': 'open()',
+                        '[class.mk-accordion-item--disabled]': 'disabled()',
+                    }, template: "<h3 class=\"mk-accordion-item__heading\">\n  <button\n    type=\"button\"\n    class=\"mk-accordion-item__trigger\"\n    [id]=\"triggerId\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-expanded]=\"open()\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"mk-accordion-item__label\">\n      @if (header()) {\n        {{ header() }}\n      }\n      <ng-content select=\"[mkAccordionHeader]\" />\n    </span>\n    <span class=\"mk-accordion-item__chevron\" aria-hidden=\"true\">\n      <svg viewBox=\"0 0 24 24\" width=\"1em\" height=\"1em\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <polyline points=\"6 9 12 15 18 9\" />\n      </svg>\n    </span>\n  </button>\n</h3>\n\n<div\n  class=\"mk-accordion-item__panel\"\n  role=\"region\"\n  [id]=\"panelId\"\n  [attr.aria-labelledby]=\"triggerId\"\n  [attr.inert]=\"open() ? null : ''\"\n>\n  <div class=\"mk-accordion-item__panel-inner\">\n    <div class=\"mk-accordion-item__body\">\n      <ng-content />\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;border-bottom:var(--mk-border-width) solid var(--mk-border)}:host(:last-of-type){border-bottom:0}.mk-accordion-item__heading{margin:0;font:inherit}.mk-accordion-item__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--mk-space-3);width:100%;min-height:44px;padding:var(--mk-space-4);background:transparent;border:var(--mk-border-width) solid transparent;color:var(--mk-text);font-family:inherit;font-size:var(--mk-font-size-md);font-weight:var(--mk-font-weight-medium);text-align:start;cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-accordion-item__trigger:hover:not(:disabled){background:var(--mk-hover-overlay)}.mk-accordion-item__trigger:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width));border-radius:var(--mk-radius-sm)}.mk-accordion-item__trigger:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-accordion-item__label{display:inline-flex;align-items:center;gap:var(--mk-space-2);min-width:0}.mk-accordion-item__chevron{display:inline-flex;flex:none;color:var(--mk-text-muted);font-size:var(--mk-font-size-lg);transition:transform var(--mk-duration-normal) var(--mk-ease-emphasized)}:host(.mk-accordion-item--open) .mk-accordion-item__chevron{transform:rotate(180deg)}.mk-accordion-item__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--mk-duration-normal) var(--mk-ease-emphasized)}:host(.mk-accordion-item--open) .mk-accordion-item__panel{grid-template-rows:1fr}.mk-accordion-item__panel-inner{overflow:hidden}.mk-accordion-item__body{padding:0 var(--mk-space-4) var(--mk-space-4);color:var(--mk-text);font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-normal)}@media(prefers-reduced-motion:reduce){.mk-accordion-item__panel,.mk-accordion-item__chevron{transition:none}}\n"] }]
+        }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] } });
+
+/**
+ * Marks projected content as the header of an `<mk-accordion-item>`. Use when
+ * the header needs rich markup instead of the plain-text `header` input.
+ *
+ * ```html
+ * <mk-accordion-item>
+ *   <span mkAccordionHeader><mk-icon name="user" /> Account</span>
+ *   …body…
+ * </mk-accordion-item>
+ * ```
+ */
+class MkAccordionHeader {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkAccordionHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MkAccordionHeader, isStandalone: true, selector: "[mkAccordionHeader]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkAccordionHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mkAccordionHeader]',
+                }]
+        }] });
+
+/**
+ * A single crumb inside `<mk-breadcrumb>`. Renders a link when `href` is set,
+ * otherwise plain text. The last item is automatically marked
+ * `aria-current="page"` by the parent.
+ *
+ * ```html
+ * <mk-breadcrumb-item href="/">Home</mk-breadcrumb-item>
+ * <mk-breadcrumb-item>Current page</mk-breadcrumb-item>
+ * ```
+ */
+class MkBreadcrumbItem {
+    /** Optional link target. Rendered as text when omitted or when it is last. */
+    href = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "href" }] : /* istanbul ignore next */ []));
+    /** Whether this is the final crumb. Set by the parent `MkBreadcrumb`. */
+    last = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "last" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBreadcrumbItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkBreadcrumbItem, isStandalone: true, selector: "mk-breadcrumb-item", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, classAttribute: "mk-breadcrumb-item" }, ngImport: i0, template: "<!-- A single ng-content captured in a template: the default projection slot\n     belongs to exactly one ng-content, so placing one in each branch leaves\n     whichever branch Angular didn't pick rendering empty. -->\n<ng-template #content><ng-content /></ng-template>\n\n@if (href() && !last()) {\n  <a class=\"mk-breadcrumb-item__link\" [href]=\"href()\">\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </a>\n} @else {\n  <span\n    class=\"mk-breadcrumb-item__current\"\n    [attr.aria-current]=\"last() ? 'page' : null\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </span>\n}\n", styles: [":host{display:inline-flex;align-items:center;min-width:0}:host(:not(:first-of-type)):before{content:var(--mk-breadcrumb-separator, \"/\");margin:0 var(--mk-space-2);color:var(--mk-text-subtle);-webkit-user-select:none;user-select:none}.mk-breadcrumb-item__link{color:var(--mk-text-muted);text-decoration:none;border-radius:var(--mk-radius-xs);transition:color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-breadcrumb-item__link:hover{color:var(--mk-text);text-decoration:underline}.mk-breadcrumb-item__link:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-breadcrumb-item__current{color:var(--mk-text);font-weight:var(--mk-font-weight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ 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: MkBreadcrumbItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-breadcrumb-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], host: {
+                        class: 'mk-breadcrumb-item',
+                        role: 'listitem',
+                    }, template: "<!-- A single ng-content captured in a template: the default projection slot\n     belongs to exactly one ng-content, so placing one in each branch leaves\n     whichever branch Angular didn't pick rendering empty. -->\n<ng-template #content><ng-content /></ng-template>\n\n@if (href() && !last()) {\n  <a class=\"mk-breadcrumb-item__link\" [href]=\"href()\">\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </a>\n} @else {\n  <span\n    class=\"mk-breadcrumb-item__current\"\n    [attr.aria-current]=\"last() ? 'page' : null\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </span>\n}\n", styles: [":host{display:inline-flex;align-items:center;min-width:0}:host(:not(:first-of-type)):before{content:var(--mk-breadcrumb-separator, \"/\");margin:0 var(--mk-space-2);color:var(--mk-text-subtle);-webkit-user-select:none;user-select:none}.mk-breadcrumb-item__link{color:var(--mk-text-muted);text-decoration:none;border-radius:var(--mk-radius-xs);transition:color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-breadcrumb-item__link:hover{color:var(--mk-text);text-decoration:underline}.mk-breadcrumb-item__link:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-breadcrumb-item__current{color:var(--mk-text);font-weight:var(--mk-font-weight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+        }], propDecorators: { href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }] } });
+
+/**
+ * Breadcrumb trail. Renders `nav[aria-label="Breadcrumb"] > ol` and marks the
+ * final `<mk-breadcrumb-item>` as the current page. The separator is drawn in
+ * CSS and can be customised via `separator`.
+ *
+ * ```html
+ * <mk-breadcrumb separator="›">
+ *   <mk-breadcrumb-item href="/">Home</mk-breadcrumb-item>
+ *   <mk-breadcrumb-item href="/users">Users</mk-breadcrumb-item>
+ *   <mk-breadcrumb-item>Jane</mk-breadcrumb-item>
+ * </mk-breadcrumb>
+ * ```
+ */
+class MkBreadcrumb {
+    i18n = inject(MK_I18N);
+    /** Accessible label for the navigation landmark. */
+    label = input(this.i18n.breadcrumbLabel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Separator character rendered between crumbs. */
+    separator = input('/', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+    items = contentChildren(MkBreadcrumbItem, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Wrap the separator in quotes for the CSS `content` property. */
+    separatorValue = computed(() => `"${this.separator().replace(/"/g, '\\"')}"`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "separatorValue" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Flag the last crumb so it renders as the current page.
+        effect(() => {
+            const items = this.items();
+            items.forEach((item, i) => item.last.set(i === items.length - 1));
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBreadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: MkBreadcrumb, isStandalone: true, selector: "mk-breadcrumb", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--mk-breadcrumb-separator": "separatorValue()" }, classAttribute: "mk-breadcrumb" }, queries: [{ propertyName: "items", predicate: MkBreadcrumbItem, isSignal: true }], ngImport: i0, template: "<nav [attr.aria-label]=\"label()\">\n  <ol class=\"mk-breadcrumb__list\" role=\"list\">\n    <ng-content />\n  </ol>\n</nav>\n", styles: [":host{display:block}.mk-breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:0;padding:0;list-style:none;font-size:var(--mk-font-size-sm);line-height:var(--mk-line-height-normal)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBreadcrumb, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-breadcrumb',
+                        '[style.--mk-breadcrumb-separator]': 'separatorValue()',
+                    }, template: "<nav [attr.aria-label]=\"label()\">\n  <ol class=\"mk-breadcrumb__list\" role=\"list\">\n    <ng-content />\n  </ol>\n</nav>\n", styles: [":host{display:block}.mk-breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:0;padding:0;list-style:none;font-size:var(--mk-font-size-sm);line-height:var(--mk-line-height-normal)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MkBreadcrumbItem), { isSignal: true }] }] } });
+
+/**
+ * Page navigation with previous/next controls and numbered pages that collapse
+ * to ellipses for large ranges. Provide either `total` (+ `pageSize`) or a
+ * direct `pageCount`. `page` is 1-based and two-way bindable.
+ *
+ * ```html
+ * <mk-pagination
+ *   [total]="240"
+ *   [pageSize]="20"
+ *   [(page)]="page"
+ *   (pageChange)="load($event)"
+ * />
+ * ```
+ */
+class MkPagination {
+    /** Localised strings (override globally via `provideMkI18n`). */
+    i18n = inject(MK_I18N);
+    /** Total number of items (used with `pageSize` when `pageCount` is unset). */
+    total = input(0, { ...(ngDevMode ? { debugName: "total" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Items per page. */
+    pageSize = input(10, { ...(ngDevMode ? { debugName: "pageSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Explicit page count; overrides `total`/`pageSize` when > 0. */
+    pageCount = input(0, { ...(ngDevMode ? { debugName: "pageCount" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Current 1-based page (two-way). */
+    page = model(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    /** Number of page buttons to keep on each side of the current page. */
+    siblingCount = input(1, { ...(ngDevMode ? { debugName: "siblingCount" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Number of page buttons pinned at each end. */
+    boundaryCount = input(1, { ...(ngDevMode ? { debugName: "boundaryCount" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Accessible label for the navigation landmark. */
+    label = input(this.i18n.paginationLabel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * `pageChange` is emitted automatically by the two-way `page` model whenever
+     * the page changes — bind it via `(pageChange)` or `[(page)]`.
+     */
+    /** Resolved total number of pages (at least 1). */
+    pages = computed(() => {
+        const explicit = this.pageCount();
+        if (explicit > 0)
+            return explicit;
+        const size = Math.max(1, this.pageSize());
+        return Math.max(1, Math.ceil(this.total() / size));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
+    current = computed(() => Math.min(Math.max(1, this.page()), this.pages()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    hasPrev = computed(() => this.current() > 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasPrev" }] : /* istanbul ignore next */ []));
+    hasNext = computed(() => this.current() < this.pages(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasNext" }] : /* istanbul ignore next */ []));
+    /** The sequence of page cells with ellipsis gaps. */
+    items = computed(() => {
+        const total = this.pages();
+        const boundary = Math.max(0, this.boundaryCount());
+        const sibling = Math.max(0, this.siblingCount());
+        const current = this.current();
+        // Total slots: boundaries + siblings + current + 2 ellipses + first/last.
+        const totalSlots = boundary * 2 + sibling * 2 + 3 + 2;
+        if (total <= totalSlots) {
+            return this.range(1, total);
+        }
+        const startPages = this.range(1, boundary);
+        const endPages = this.range(total - boundary + 1, total);
+        const siblingsStart = Math.max(Math.min(current - sibling, total - boundary - sibling * 2 - 1), boundary + 2);
+        const siblingsEnd = Math.min(Math.max(current + sibling, boundary + sibling * 2 + 2), endPages.length > 0 ? endPages[0] - 2 : total - 1);
+        const result = [...startPages];
+        if (siblingsStart > boundary + 2) {
+            result.push('ellipsis');
+        }
+        else if (boundary + 1 < total - boundary) {
+            result.push(boundary + 1);
+        }
+        result.push(...this.range(siblingsStart, siblingsEnd));
+        if (siblingsEnd < total - boundary - 1) {
+            result.push('ellipsis');
+        }
+        else if (total - boundary > boundary) {
+            result.push(total - boundary);
+        }
+        result.push(...endPages);
+        return result;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    goTo(page) {
+        const target = Math.min(Math.max(1, page), this.pages());
+        if (target === this.current())
+            return;
+        this.page.set(target);
+    }
+    prev() {
+        if (this.hasPrev())
+            this.goTo(this.current() - 1);
+    }
+    next() {
+        if (this.hasNext())
+            this.goTo(this.current() + 1);
+    }
+    range(start, end) {
+        const length = end - start + 1;
+        return length > 0 ? Array.from({ length }, (_, i) => start + i) : [];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkPagination, isStandalone: true, selector: "mk-pagination", inputs: { total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageCount: { classPropertyName: "pageCount", publicName: "pageCount", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, boundaryCount: { classPropertyName: "boundaryCount", publicName: "boundaryCount", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange" }, host: { classAttribute: "mk-pagination" }, ngImport: i0, template: "<nav [attr.aria-label]=\"label()\">\n  <ul class=\"mk-pagination__list\" role=\"list\">\n    <li>\n      <button\n        type=\"button\"\n        class=\"mk-pagination__btn mk-pagination__btn--nav\"\n        [attr.aria-label]=\"i18n.previousPage\"\n        [disabled]=\"!hasPrev()\"\n        (click)=\"prev()\"\n      >\n        <svg viewBox=\"0 0 24 24\" width=\"1em\" height=\"1em\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <polyline points=\"15 18 9 12 15 6\" />\n        </svg>\n      </button>\n    </li>\n\n    @for (item of items(); track $index) {\n      @if (item === 'ellipsis') {\n        <li>\n          <span class=\"mk-pagination__ellipsis\" aria-hidden=\"true\">\u2026</span>\n        </li>\n      } @else {\n        <li>\n          <button\n            type=\"button\"\n            class=\"mk-pagination__btn\"\n            [class.mk-pagination__btn--active]=\"item === current()\"\n            [attr.aria-label]=\"i18n.goToPage(item)\"\n            [attr.aria-current]=\"item === current() ? 'page' : null\"\n            (click)=\"goTo(item)\"\n          >\n            {{ item }}\n          </button>\n        </li>\n      }\n    }\n\n    <li>\n      <button\n        type=\"button\"\n        class=\"mk-pagination__btn mk-pagination__btn--nav\"\n        [attr.aria-label]=\"i18n.nextPage\"\n        [disabled]=\"!hasNext()\"\n        (click)=\"next()\"\n      >\n        <svg viewBox=\"0 0 24 24\" width=\"1em\" height=\"1em\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <polyline points=\"9 18 15 12 9 6\" />\n        </svg>\n      </button>\n    </li>\n  </ul>\n</nav>\n", styles: [":host{display:block}.mk-pagination__list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mk-space-1);margin:0;padding:0;list-style:none}.mk-pagination__btn{display:inline-flex;align-items:center;justify-content:center;min-width:var(--mk-control-height-md);height:var(--mk-control-height-md);padding:0 var(--mk-space-2);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);color:var(--mk-text);font-family:inherit;font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-medium);line-height:1;cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard),border-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-pagination__btn:hover:not(:disabled):not(.mk-pagination__btn--active){background:var(--mk-hover-overlay)}.mk-pagination__btn:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-pagination__btn:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-pagination__btn--nav{color:var(--mk-text-muted)}:host(:dir(rtl)) .mk-pagination__btn--nav svg{transform:scaleX(-1)}.mk-pagination__btn--active{background:var(--mk-primary);color:var(--mk-primary-contrast);cursor:default}.mk-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--mk-control-height-md);height:var(--mk-control-height-md);color:var(--mk-text-subtle);-webkit-user-select:none;user-select:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkPagination, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-pagination', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-pagination',
+                    }, template: "<nav [attr.aria-label]=\"label()\">\n  <ul class=\"mk-pagination__list\" role=\"list\">\n    <li>\n      <button\n        type=\"button\"\n        class=\"mk-pagination__btn mk-pagination__btn--nav\"\n        [attr.aria-label]=\"i18n.previousPage\"\n        [disabled]=\"!hasPrev()\"\n        (click)=\"prev()\"\n      >\n        <svg viewBox=\"0 0 24 24\" width=\"1em\" height=\"1em\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <polyline points=\"15 18 9 12 15 6\" />\n        </svg>\n      </button>\n    </li>\n\n    @for (item of items(); track $index) {\n      @if (item === 'ellipsis') {\n        <li>\n          <span class=\"mk-pagination__ellipsis\" aria-hidden=\"true\">\u2026</span>\n        </li>\n      } @else {\n        <li>\n          <button\n            type=\"button\"\n            class=\"mk-pagination__btn\"\n            [class.mk-pagination__btn--active]=\"item === current()\"\n            [attr.aria-label]=\"i18n.goToPage(item)\"\n            [attr.aria-current]=\"item === current() ? 'page' : null\"\n            (click)=\"goTo(item)\"\n          >\n            {{ item }}\n          </button>\n        </li>\n      }\n    }\n\n    <li>\n      <button\n        type=\"button\"\n        class=\"mk-pagination__btn mk-pagination__btn--nav\"\n        [attr.aria-label]=\"i18n.nextPage\"\n        [disabled]=\"!hasNext()\"\n        (click)=\"next()\"\n      >\n        <svg viewBox=\"0 0 24 24\" width=\"1em\" height=\"1em\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <polyline points=\"9 18 15 12 9 6\" />\n        </svg>\n      </button>\n    </li>\n  </ul>\n</nav>\n", styles: [":host{display:block}.mk-pagination__list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mk-space-1);margin:0;padding:0;list-style:none}.mk-pagination__btn{display:inline-flex;align-items:center;justify-content:center;min-width:var(--mk-control-height-md);height:var(--mk-control-height-md);padding:0 var(--mk-space-2);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);color:var(--mk-text);font-family:inherit;font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-medium);line-height:1;cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard),border-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-pagination__btn:hover:not(:disabled):not(.mk-pagination__btn--active){background:var(--mk-hover-overlay)}.mk-pagination__btn:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-pagination__btn:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-pagination__btn--nav{color:var(--mk-text-muted)}:host(:dir(rtl)) .mk-pagination__btn--nav svg{transform:scaleX(-1)}.mk-pagination__btn--active{background:var(--mk-primary);color:var(--mk-primary-contrast);cursor:default}.mk-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--mk-control-height-md);height:var(--mk-control-height-md);color:var(--mk-text-subtle);-webkit-user-select:none;user-select:none}\n"] }]
+        }], propDecorators: { total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageCount", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], siblingCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "siblingCount", required: false }] }], boundaryCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundaryCount", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
+/**
+ * An item within an `<mk-menu>`. Renders as an ARIA `menuitem` with an optional
+ * icon slot (`[mkMenuItemIcon]`), disabled and danger states, and either emits
+ * `action` or navigates when `href` is set. Activating closes the menu.
+ *
+ * ```html
+ * <mk-menu-item (action)="rename()">
+ *   <svg mkMenuItemIcon>…</svg> Rename
+ * </mk-menu-item>
+ * <mk-menu-item danger (action)="remove()">Delete</mk-menu-item>
+ * <mk-menu-item href="/help">Help</mk-menu-item>
+ * ```
+ */
+class MkMenuItem {
+    el = inject(ElementRef);
+    document = inject(DOCUMENT);
+    menu = inject(MkMenu, { optional: true });
+    /** Prevent selection and focus. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Destructive styling (e.g. Delete). */
+    danger = input(false, { ...(ngDevMode ? { debugName: "danger" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** When set, activating the item navigates here. */
+    href = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "href" }] : /* istanbul ignore next */ []));
+    /** Emitted when the item is activated (not for disabled items). */
+    action = output();
+    activate(event) {
+        if (this.disabled()) {
+            event?.preventDefault();
+            event?.stopPropagation();
+            return;
+        }
+        this.action.emit();
+        const href = this.href();
+        this.menu?.close(true);
+        if (href) {
+            this.document.defaultView?.location.assign(href);
+        }
+    }
+    /** Move DOM focus to this item (roving focus). */
+    focusEl() {
+        this.el.nativeElement.focus();
+    }
+    /** Whether `node` lives inside this item. */
+    contains(node) {
+        return !!node && this.el.nativeElement.contains(node);
+    }
+    /** Lowercased text content, used for typeahead matching. */
+    text() {
+        return (this.el.nativeElement.textContent ?? '').trim().toLowerCase();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MkMenuItem, isStandalone: true, selector: "mk-menu-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, danger: { classPropertyName: "danger", publicName: "danger", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, host: { attributes: { "role": "menuitem", "tabindex": "-1" }, listeners: { "click": "activate($event)" }, properties: { "attr.aria-disabled": "disabled() || null", "class.mk-menu-item--danger": "danger()", "class.mk-menu-item--disabled": "disabled()" }, classAttribute: "mk-menu-item" }, ngImport: i0, template: "<span class=\"mk-menu-item__icon\" aria-hidden=\"true\">\n  <ng-content select=\"[mkMenuItemIcon]\" />\n</span>\n<span class=\"mk-menu-item__label\">\n  <ng-content />\n</span>\n", styles: [":host{display:flex;align-items:center;gap:var(--mk-space-2);min-height:36px;padding:var(--mk-space-2) var(--mk-space-3);border-radius:var(--mk-radius-sm);color:var(--mk-text);font-size:var(--mk-font-size-sm);line-height:var(--mk-line-height-snug);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}:host(:hover:not(.mk-menu-item--disabled)),:host(:focus){background:var(--mk-hover-overlay);outline:none}:host(:focus-visible){outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}:host(.mk-menu-item--danger){color:var(--mk-danger-text)}:host(.mk-menu-item--danger:hover:not(.mk-menu-item--disabled)),:host(.mk-menu-item--danger:focus){background:var(--mk-danger-subtle);color:var(--mk-danger-subtle-text)}:host(.mk-menu-item--disabled){color:var(--mk-text-disabled);cursor:not-allowed;pointer-events:none}.mk-menu-item__icon{display:inline-flex;align-items:center;flex:none;font-size:var(--mk-font-size-md)}.mk-menu-item__icon:empty{display:none}.mk-menu-item__label{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkMenuItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-menu-item', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-menu-item',
+                        role: 'menuitem',
+                        tabindex: '-1',
+                        '[attr.aria-disabled]': 'disabled() || null',
+                        '[class.mk-menu-item--danger]': 'danger()',
+                        '[class.mk-menu-item--disabled]': 'disabled()',
+                        '(click)': 'activate($event)',
+                    }, template: "<span class=\"mk-menu-item__icon\" aria-hidden=\"true\">\n  <ng-content select=\"[mkMenuItemIcon]\" />\n</span>\n<span class=\"mk-menu-item__label\">\n  <ng-content />\n</span>\n", styles: [":host{display:flex;align-items:center;gap:var(--mk-space-2);min-height:36px;padding:var(--mk-space-2) var(--mk-space-3);border-radius:var(--mk-radius-sm);color:var(--mk-text);font-size:var(--mk-font-size-sm);line-height:var(--mk-line-height-snug);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}:host(:hover:not(.mk-menu-item--disabled)),:host(:focus){background:var(--mk-hover-overlay);outline:none}:host(:focus-visible){outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}:host(.mk-menu-item--danger){color:var(--mk-danger-text)}:host(.mk-menu-item--danger:hover:not(.mk-menu-item--disabled)),:host(.mk-menu-item--danger:focus){background:var(--mk-danger-subtle);color:var(--mk-danger-subtle-text)}:host(.mk-menu-item--disabled){color:var(--mk-text-disabled);cursor:not-allowed;pointer-events:none}.mk-menu-item__icon{display:inline-flex;align-items:center;flex:none;font-size:var(--mk-font-size-md)}.mk-menu-item__icon:empty{display:none}.mk-menu-item__label{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], danger: [{ type: i0.Input, args: [{ isSignal: true, alias: "danger", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
+
+/**
+ * Dropdown menu implementing the ARIA menu pattern (roving focus, Arrow / Home
+ * / End / typeahead, Enter/Space to activate). Attach it to a trigger with the
+ * `mkMenuTriggerFor` directive; the trigger controls opening and positioning.
+ *
+ * The panel is rendered in the browser top layer via {@link MkAnchoredPanel}, so
+ * it is never clipped by an ancestor's `overflow`/`transform` and always flips
+ * back on-screen near a viewport edge.
+ *
+ * ```html
+ * <button mkButton [mkMenuTriggerFor]="menu">Actions</button>
+ * <mk-menu #menu>
+ *   <mk-menu-item (action)="edit()">Edit</mk-menu-item>
+ *   <mk-menu-item danger (action)="del()">Delete</mk-menu-item>
+ * </mk-menu>
+ * ```
+ */
+class MkMenu {
+    document = inject(DOCUMENT);
+    injector = inject(Injector);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    items = contentChildren(MkMenuItem, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Stable id for `aria-controls` on the trigger. */
+    panelId = mkUniqueId('mk-menu');
+    _open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_open" }] : /* istanbul ignore next */ []));
+    /** Whether the menu is currently open. */
+    opened = this._open.asReadonly();
+    /** Accessible label for the menu (defaults via the trigger if unset). */
+    ariaLabel = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Element to anchor the panel to (element-anchored open). */
+    anchorEl = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "anchorEl" }] : /* istanbul ignore next */ []));
+    /** Viewport point to anchor to (`openAt` / context menu). */
+    anchorPoint = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "anchorPoint" }] : /* istanbul ignore next */ []));
+    triggerEl = null;
+    typeahead = '';
+    typeaheadTimer;
+    /**
+     * Open the menu anchored to `trigger`. `focus` picks the item that receives
+     * focus once the panel is painted: `true`/`'first'` for the first enabled
+     * item, `'last'` for the last (ArrowUp on a menu button, per the APG
+     * menu-button pattern), `false` to leave focus where it is (mouse open).
+     */
+    open(trigger, focus = true) {
+        if (!this.isBrowser || this._open())
+            return;
+        this.triggerEl = trigger;
+        this.anchorEl.set(trigger);
+        this.anchorPoint.set(undefined);
+        this._open.set(true);
+        if (focus)
+            this.focusAfterOpen(focus === 'last' ? 'last' : 'first');
+    }
+    /**
+     * Open the menu at viewport coordinates — e.g. a right-click point from a
+     * `contextmenu` event. Positioning (and flip/shift back on-screen) is handled
+     * by {@link MkAnchoredPanel} via the point anchor. Focus moves to the first
+     * item; `restoreFocusEl` (when provided) regains focus on close.
+     */
+    openAt(x, y, restoreFocusEl) {
+        if (!this.isBrowser || this._open())
+            return;
+        this.triggerEl = restoreFocusEl ?? null;
+        this.anchorEl.set(undefined);
+        this.anchorPoint.set({ x, y });
+        this._open.set(true);
+        this.focusAfterOpen('first');
+    }
+    /** Close the menu; optionally restore focus to the trigger. */
+    close(restoreFocus = true) {
+        if (!this._open())
+            return;
+        this._open.set(false);
+        this.anchorEl.set(undefined);
+        this.anchorPoint.set(undefined);
+        const trigger = this.triggerEl;
+        this.triggerEl = null;
+        if (restoreFocus)
+            trigger?.focus();
+    }
+    /** Toggle open/closed from a trigger. */
+    toggle(trigger, focusFirst = true) {
+        if (this._open()) {
+            this.close(true);
+        }
+        else {
+            this.open(trigger, focusFirst);
+        }
+    }
+    /**
+     * Move focus to the first enabled item. Used by the trigger when the menu is
+     * already open (e.g. ArrowDown after a mouse open), so arrow keys always
+     * reach the items even though focus never left the trigger.
+     */
+    focusFirstItem() {
+        this.focusFirst();
+    }
+    /** Move focus to the last enabled item (ArrowUp from the trigger). */
+    focusLastItem() {
+        this.focusLast();
+    }
+    /** Focus an item once the panel is in the top layer and painted. */
+    focusAfterOpen(which) {
+        afterNextRender({
+            write: () => {
+                if (which === 'last')
+                    this.focusLast();
+                else
+                    this.focusFirst();
+            },
+        }, { injector: this.injector });
+    }
+    onPanelKeydown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.move(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.move(-1);
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.focusFirst();
+                break;
+            case 'End':
+                event.preventDefault();
+                this.focusLast();
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.activeItem()?.activate();
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.close(true);
+                break;
+            case 'Tab':
+                event.preventDefault();
+                this.close(true);
+                break;
+            default:
+                if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
+                    this.onTypeahead(event.key);
+                }
+        }
+    }
+    enabled() {
+        return this.items().filter((i) => !i.disabled());
+    }
+    activeItem() {
+        const active = this.document.activeElement;
+        return this.enabled().find((i) => i.contains(active));
+    }
+    currentIndex() {
+        const active = this.document.activeElement;
+        return this.enabled().findIndex((i) => i.contains(active));
+    }
+    move(delta) {
+        const items = this.enabled();
+        if (items.length === 0)
+            return;
+        const current = this.currentIndex();
+        const next = current < 0
+            ? delta > 0
+                ? 0
+                : items.length - 1
+            : (current + delta + items.length) % items.length;
+        items[next].focusEl();
+    }
+    focusFirst() {
+        this.enabled()[0]?.focusEl();
+    }
+    focusLast() {
+        const items = this.enabled();
+        items[items.length - 1]?.focusEl();
+    }
+    onTypeahead(char) {
+        this.typeahead += char.toLowerCase();
+        if (this.typeaheadTimer)
+            clearTimeout(this.typeaheadTimer);
+        this.typeaheadTimer = setTimeout(() => (this.typeahead = ''), 500);
+        const items = this.enabled();
+        const start = Math.max(0, this.currentIndex());
+        for (let i = 1; i <= items.length; i++) {
+            const item = items[(start + i) % items.length];
+            if (item.text().startsWith(this.typeahead)) {
+                item.focusEl();
+                return;
+            }
+        }
+    }
+    ngOnDestroy() {
+        if (this.typeaheadTimer)
+            clearTimeout(this.typeaheadTimer);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkMenu, isStandalone: true, selector: "mk-menu", host: { classAttribute: "mk-menu" }, queries: [{ propertyName: "items", predicate: MkMenuItem, isSignal: true }], exportAs: ["mkMenu"], ngImport: i0, template: "@if (opened()) {\n  <div\n    class=\"mk-menu__panel\"\n    role=\"menu\"\n    [id]=\"panelId\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"anchorEl()\"\n    [anchorRect]=\"anchorPoint()\"\n    placement=\"bottom-start\"\n    (dismiss)=\"close(false)\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    <ng-content />\n  </div>\n}\n", styles: [":host{display:contents}.mk-menu__panel{min-width:12rem;max-width:min(20rem,100vw - var(--mk-space-4));max-height:calc(100vh - var(--mk-space-8));max-height:calc(100dvh - var(--mk-space-8));overflow-y:auto;overscroll-behavior:contain;padding:var(--mk-space-1);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);animation:mk-menu-in var(--mk-duration-fast) var(--mk-ease-out)}@keyframes mk-menu-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-menu__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: MkMenu, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-menu', exportAs: 'mkMenu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MkAnchoredPanel], host: {
+                        class: 'mk-menu',
+                    }, template: "@if (opened()) {\n  <div\n    class=\"mk-menu__panel\"\n    role=\"menu\"\n    [id]=\"panelId\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"anchorEl()\"\n    [anchorRect]=\"anchorPoint()\"\n    placement=\"bottom-start\"\n    (dismiss)=\"close(false)\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    <ng-content />\n  </div>\n}\n", styles: [":host{display:contents}.mk-menu__panel{min-width:12rem;max-width:min(20rem,100vw - var(--mk-space-4));max-height:calc(100vh - var(--mk-space-8));max-height:calc(100dvh - var(--mk-space-8));overflow-y:auto;overscroll-behavior:contain;padding:var(--mk-space-1);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);animation:mk-menu-in var(--mk-duration-fast) var(--mk-ease-out)}@keyframes mk-menu-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-menu__panel{animation:none}}\n"] }]
+        }], propDecorators: { items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MkMenuItem), { isSignal: true }] }] } });
+
+/**
+ * Turns its host button into a trigger for an `<mk-menu>`. Wires
+ * `aria-haspopup="menu"` / `aria-expanded` / `aria-controls`, toggles on click,
+ * opens on ArrowDown / Enter / Space (focusing the first item) and on ArrowUp
+ * (focusing the last item, per the APG menu-button pattern), and closes on
+ * Escape. When the menu is already open — e.g. after a mouse click, which
+ * deliberately leaves focus on the trigger — ArrowDown moves focus to the
+ * first item and ArrowUp to the last, so the keyboard is never dead.
+ *
+ * ```html
+ * <button mkButton [mkMenuTriggerFor]="menu">Actions</button>
+ * <mk-menu #menu>…</mk-menu>
+ * ```
+ */
+class MkMenuTrigger {
+    host = inject(ElementRef);
+    /** The menu instance to control. */
+    menu = input.required({ ...(ngDevMode ? { debugName: "menu" } : /* istanbul ignore next */ {}), alias: 'mkMenuTriggerFor' });
+    onClick(event) {
+        event.preventDefault();
+        this.menu().toggle(this.host.nativeElement, false);
+    }
+    onKeydown(event) {
+        const menu = this.menu();
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (menu.opened()) {
+                    // Already open (mouse open keeps focus on the trigger) — enter the
+                    // menu at the top instead of swallowing the key.
+                    menu.focusFirstItem();
+                }
+                else {
+                    menu.open(this.host.nativeElement, 'first');
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (menu.opened()) {
+                    menu.focusLastItem();
+                }
+                else {
+                    menu.open(this.host.nativeElement, 'last');
+                }
+                break;
+            case 'Escape':
+                if (menu.opened()) {
+                    event.preventDefault();
+                    menu.close(true);
+                }
+                break;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MkMenuTrigger, isStandalone: true, selector: "[mkMenuTriggerFor]", inputs: { menu: { classPropertyName: "menu", publicName: "mkMenuTriggerFor", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "aria-haspopup": "menu" }, listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)" }, properties: { "attr.aria-expanded": "menu().opened()", "attr.aria-controls": "menu().panelId" } }, exportAs: ["mkMenuTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkMenuTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mkMenuTriggerFor]',
+                    exportAs: 'mkMenuTrigger',
+                    host: {
+                        'aria-haspopup': 'menu',
+                        '[attr.aria-expanded]': 'menu().opened()',
+                        '[attr.aria-controls]': 'menu().panelId',
+                        '(click)': 'onClick($event)',
+                        '(keydown)': 'onKeydown($event)',
+                    },
+                }]
+        }], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkMenuTriggerFor", required: true }] }] } });
+
+/** Viewport width (px) at/below which the sidebar becomes an off-canvas drawer. */
+const MOBILE_BREAKPOINT = 1024;
+/**
+ * Admin dashboard layout with a fixed header, a collapsible/responsive sidebar
+ * and a main content area. On small screens the sidebar becomes a focus-trapped
+ * off-canvas drawer with a scrim (Escape to close). Includes a skip-to-content
+ * link for keyboard users.
+ *
+ * ```html
+ * <mk-app-shell [(sidebarOpen)]="open" [(sidebarCollapsed)]="collapsed">
+ *   <div mkAppHeader>
+ *     <button mkButton iconOnly (click)="shell.toggleSidebar()">☰</button>
+ *   </div>
+ *   <mk-nav-list mkAppSidebar [collapsed]="collapsed()">…</mk-nav-list>
+ *   <router-outlet />
+ * </mk-app-shell>
+ * ```
+ */
+class MkAppShell {
+    document = inject(DOCUMENT);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    i18n = inject(MK_I18N);
+    sidebarRef = viewChild('sidebar', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sidebarRef" }] : /* istanbul ignore next */ []));
+    /** Whether the mobile drawer is open (two-way). */
+    sidebarOpen = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sidebarOpen" }] : /* istanbul ignore next */ []));
+    /** Whether the desktop sidebar is collapsed to icons (two-way). */
+    sidebarCollapsed = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sidebarCollapsed" }] : /* istanbul ignore next */ []));
+    /** True when the viewport is at/below the mobile breakpoint. */
+    isMobile = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
+    focusTrap;
+    constructor() {
+        if (this.isBrowser) {
+            const mql = this.document.defaultView?.matchMedia(`(max-width: ${MOBILE_BREAKPOINT}px)`);
+            if (mql) {
+                this.isMobile.set(mql.matches);
+                this.mql = mql;
+                mql.addEventListener('change', this.onMediaChange);
+            }
+        }
+        // Trap focus inside the drawer while it is open on mobile.
+        effect(() => {
+            const el = this.sidebarRef()?.nativeElement;
+            const active = this.isMobile() && this.sidebarOpen();
+            this.focusTrap?.release();
+            this.focusTrap = undefined;
+            if (active && el) {
+                this.focusTrap = new MkFocusTrap(el);
+                this.focusTrap.activate();
+            }
+        });
+    }
+    mql;
+    onMediaChange = (e) => {
+        this.isMobile.set(e.matches);
+        if (!e.matches)
+            this.sidebarOpen.set(false);
+    };
+    ngOnDestroy() {
+        this.mql?.removeEventListener('change', this.onMediaChange);
+        this.focusTrap?.release();
+        this.focusTrap = undefined;
+    }
+    /** Toggle the mobile drawer open/closed. Handy for a hamburger button. */
+    toggleSidebar() {
+        this.sidebarOpen.update((v) => !v);
+    }
+    /** Open the mobile drawer. */
+    openSidebar() {
+        this.sidebarOpen.set(true);
+    }
+    /** Close the mobile drawer. */
+    closeSidebar() {
+        this.sidebarOpen.set(false);
+    }
+    /** Toggle the desktop collapsed (icon-only) state. */
+    toggleCollapsed() {
+        this.sidebarCollapsed.update((v) => !v);
+    }
+    onSidebarKeydown(event) {
+        if (event.key === 'Escape' && this.isMobile() && this.sidebarOpen()) {
+            event.preventDefault();
+            this.closeSidebar();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkAppShell, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkAppShell, isStandalone: true, selector: "mk-app-shell", inputs: { sidebarOpen: { classPropertyName: "sidebarOpen", publicName: "sidebarOpen", isSignal: true, isRequired: false, transformFunction: null }, sidebarCollapsed: { classPropertyName: "sidebarCollapsed", publicName: "sidebarCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sidebarOpen: "sidebarOpenChange", sidebarCollapsed: "sidebarCollapsedChange" }, host: { properties: { "class.mk-app-shell--collapsed": "sidebarCollapsed() && !isMobile()", "class.mk-app-shell--mobile": "isMobile()", "class.mk-app-shell--drawer-open": "isMobile() && sidebarOpen()" }, classAttribute: "mk-app-shell" }, viewQueries: [{ propertyName: "sidebarRef", first: true, predicate: ["sidebar"], descendants: true, isSignal: true }], ngImport: i0, template: "<a class=\"mk-app-shell__skip\" href=\"#mk-app-main\">{{ i18n.skipToContent }}</a>\n\n<header class=\"mk-app-shell__header\" role=\"banner\">\n  <ng-content select=\"[mkAppHeader]\" />\n</header>\n\n<div class=\"mk-app-shell__body\">\n  <aside\n    #sidebar\n    class=\"mk-app-shell__sidebar\"\n    [attr.role]=\"isMobile() ? 'dialog' : null\"\n    [attr.aria-modal]=\"isMobile() && sidebarOpen() ? 'true' : null\"\n    [attr.aria-label]=\"isMobile() ? 'Sidebar navigation' : null\"\n    [attr.inert]=\"isMobile() && !sidebarOpen() ? '' : null\"\n    (keydown)=\"onSidebarKeydown($event)\"\n  >\n    <nav class=\"mk-app-shell__nav\" [attr.aria-label]=\"i18n.primaryNav\">\n      <ng-content select=\"[mkAppSidebar]\" />\n    </nav>\n  </aside>\n\n  @if (isMobile() && sidebarOpen()) {\n    <div\n      class=\"mk-app-shell__scrim\"\n      aria-hidden=\"true\"\n      (click)=\"closeSidebar()\"\n    ></div>\n  }\n\n  <main\n    id=\"mk-app-main\"\n    class=\"mk-app-shell__main\"\n    role=\"main\"\n    tabindex=\"-1\"\n  >\n    <ng-content />\n  </main>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;min-height:100vh;min-height:100dvh;background:var(--mk-bg);color:var(--mk-text)}.mk-app-shell__header{position:sticky;top:0;z-index:var(--mk-z-sticky);display:flex;align-items:center;height:var(--mk-header-height);padding:0 calc(var(--mk-space-4) + env(safe-area-inset-right,0px)) 0 calc(var(--mk-space-4) + env(safe-area-inset-left,0px));background:var(--mk-surface);border-bottom:var(--mk-border-width) solid var(--mk-border)}.mk-app-shell__body{display:flex;align-items:stretch;min-height:calc(100vh - var(--mk-header-height));min-height:calc(100dvh - var(--mk-header-height))}.mk-app-shell__sidebar{flex:none;width:var(--mk-sidebar-width);background:var(--mk-surface);border-inline-end:var(--mk-border-width) solid var(--mk-border);align-self:flex-start;position:sticky;top:var(--mk-header-height);height:calc(100vh - var(--mk-header-height));height:calc(100dvh - var(--mk-header-height));overflow-y:auto;transition:width var(--mk-duration-normal) var(--mk-ease-emphasized)}:host(.mk-app-shell--collapsed) .mk-app-shell__sidebar{width:var(--mk-sidebar-width-collapsed)}.mk-app-shell__nav{padding:var(--mk-space-3);padding-inline-start:calc(var(--mk-space-3) + env(safe-area-inset-left,0px))}.mk-app-shell__main{flex:1 1 auto;min-width:0;padding:var(--mk-space-6);overflow-x:auto}@media(max-width:640px){.mk-app-shell__main{padding:var(--mk-space-4)}}.mk-app-shell__main:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-app-shell__scrim{position:fixed;inset:var(--mk-header-height) 0 0;z-index:var(--mk-z-drawer);background:var(--mk-overlay-scrim);animation:mk-shell-fade var(--mk-duration-fast) var(--mk-ease-out)}.mk-app-shell__skip{position:fixed;top:var(--mk-space-2);inset-inline-start:var(--mk-space-2);z-index:var(--mk-z-toast);padding:var(--mk-space-2) var(--mk-space-4);background:var(--mk-surface);color:var(--mk-text);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-md);transform:translateY(-150%);transition:transform var(--mk-duration-fast) var(--mk-ease-out)}.mk-app-shell__skip:focus{transform:translateY(0)}:host(.mk-app-shell--mobile) .mk-app-shell__sidebar{position:fixed;top:var(--mk-header-height);bottom:0;inset-inline-start:0;z-index:calc(var(--mk-z-drawer) + 1);width:var(--mk-sidebar-width);transform:translate(-100%);box-shadow:var(--mk-shadow-xl);transition:transform var(--mk-duration-normal) var(--mk-ease-emphasized)}:host(.mk-app-shell--mobile:dir(rtl)) .mk-app-shell__sidebar{transform:translate(100%)}:host(.mk-app-shell--mobile.mk-app-shell--drawer-open) .mk-app-shell__sidebar{transform:translate(0)}@keyframes mk-shell-fade{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.mk-app-shell__sidebar,.mk-app-shell__skip,.mk-app-shell__scrim{transition:none;animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkAppShell, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-app-shell', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-app-shell',
+                        '[class.mk-app-shell--collapsed]': 'sidebarCollapsed() && !isMobile()',
+                        '[class.mk-app-shell--mobile]': 'isMobile()',
+                        '[class.mk-app-shell--drawer-open]': 'isMobile() && sidebarOpen()',
+                    }, template: "<a class=\"mk-app-shell__skip\" href=\"#mk-app-main\">{{ i18n.skipToContent }}</a>\n\n<header class=\"mk-app-shell__header\" role=\"banner\">\n  <ng-content select=\"[mkAppHeader]\" />\n</header>\n\n<div class=\"mk-app-shell__body\">\n  <aside\n    #sidebar\n    class=\"mk-app-shell__sidebar\"\n    [attr.role]=\"isMobile() ? 'dialog' : null\"\n    [attr.aria-modal]=\"isMobile() && sidebarOpen() ? 'true' : null\"\n    [attr.aria-label]=\"isMobile() ? 'Sidebar navigation' : null\"\n    [attr.inert]=\"isMobile() && !sidebarOpen() ? '' : null\"\n    (keydown)=\"onSidebarKeydown($event)\"\n  >\n    <nav class=\"mk-app-shell__nav\" [attr.aria-label]=\"i18n.primaryNav\">\n      <ng-content select=\"[mkAppSidebar]\" />\n    </nav>\n  </aside>\n\n  @if (isMobile() && sidebarOpen()) {\n    <div\n      class=\"mk-app-shell__scrim\"\n      aria-hidden=\"true\"\n      (click)=\"closeSidebar()\"\n    ></div>\n  }\n\n  <main\n    id=\"mk-app-main\"\n    class=\"mk-app-shell__main\"\n    role=\"main\"\n    tabindex=\"-1\"\n  >\n    <ng-content />\n  </main>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;min-height:100vh;min-height:100dvh;background:var(--mk-bg);color:var(--mk-text)}.mk-app-shell__header{position:sticky;top:0;z-index:var(--mk-z-sticky);display:flex;align-items:center;height:var(--mk-header-height);padding:0 calc(var(--mk-space-4) + env(safe-area-inset-right,0px)) 0 calc(var(--mk-space-4) + env(safe-area-inset-left,0px));background:var(--mk-surface);border-bottom:var(--mk-border-width) solid var(--mk-border)}.mk-app-shell__body{display:flex;align-items:stretch;min-height:calc(100vh - var(--mk-header-height));min-height:calc(100dvh - var(--mk-header-height))}.mk-app-shell__sidebar{flex:none;width:var(--mk-sidebar-width);background:var(--mk-surface);border-inline-end:var(--mk-border-width) solid var(--mk-border);align-self:flex-start;position:sticky;top:var(--mk-header-height);height:calc(100vh - var(--mk-header-height));height:calc(100dvh - var(--mk-header-height));overflow-y:auto;transition:width var(--mk-duration-normal) var(--mk-ease-emphasized)}:host(.mk-app-shell--collapsed) .mk-app-shell__sidebar{width:var(--mk-sidebar-width-collapsed)}.mk-app-shell__nav{padding:var(--mk-space-3);padding-inline-start:calc(var(--mk-space-3) + env(safe-area-inset-left,0px))}.mk-app-shell__main{flex:1 1 auto;min-width:0;padding:var(--mk-space-6);overflow-x:auto}@media(max-width:640px){.mk-app-shell__main{padding:var(--mk-space-4)}}.mk-app-shell__main:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-app-shell__scrim{position:fixed;inset:var(--mk-header-height) 0 0;z-index:var(--mk-z-drawer);background:var(--mk-overlay-scrim);animation:mk-shell-fade var(--mk-duration-fast) var(--mk-ease-out)}.mk-app-shell__skip{position:fixed;top:var(--mk-space-2);inset-inline-start:var(--mk-space-2);z-index:var(--mk-z-toast);padding:var(--mk-space-2) var(--mk-space-4);background:var(--mk-surface);color:var(--mk-text);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-md);transform:translateY(-150%);transition:transform var(--mk-duration-fast) var(--mk-ease-out)}.mk-app-shell__skip:focus{transform:translateY(0)}:host(.mk-app-shell--mobile) .mk-app-shell__sidebar{position:fixed;top:var(--mk-header-height);bottom:0;inset-inline-start:0;z-index:calc(var(--mk-z-drawer) + 1);width:var(--mk-sidebar-width);transform:translate(-100%);box-shadow:var(--mk-shadow-xl);transition:transform var(--mk-duration-normal) var(--mk-ease-emphasized)}:host(.mk-app-shell--mobile:dir(rtl)) .mk-app-shell__sidebar{transform:translate(100%)}:host(.mk-app-shell--mobile.mk-app-shell--drawer-open) .mk-app-shell__sidebar{transform:translate(0)}@keyframes mk-shell-fade{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.mk-app-shell__sidebar,.mk-app-shell__skip,.mk-app-shell__scrim{transition:none;animation:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { sidebarRef: [{ type: i0.ViewChild, args: ['sidebar', { isSignal: true }] }], sidebarOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarOpen", required: false }] }, { type: i0.Output, args: ["sidebarOpenChange"] }], sidebarCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarCollapsed", required: false }] }, { type: i0.Output, args: ["sidebarCollapsedChange"] }] } });
+
+/**
+ * Sidebar navigation list. Hosts `<mk-nav-item>`s and, when `collapsed`, drives
+ * them into an icon-only rail (labels hidden, exposed via `title` tooltips).
+ * Designed to sit inside the `mkAppSidebar` slot of `<mk-app-shell>`.
+ *
+ * ```html
+ * <mk-nav-list [collapsed]="collapsed()">
+ *   <mk-nav-item label="Dashboard" href="/" active>
+ *     <svg mkNavIcon>…</svg>
+ *   </mk-nav-item>
+ * </mk-nav-list>
+ * ```
+ */
+class MkNavList {
+    /** Collapse items to icon-only. Read by descendant `MkNavItem`s. */
+    collapsed = input(false, { ...(ngDevMode ? { debugName: "collapsed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkNavList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MkNavList, isStandalone: true, selector: "mk-nav-list", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.mk-nav-list--collapsed": "collapsed()" }, classAttribute: "mk-nav-list" }, ngImport: i0, template: "<ul class=\"mk-nav-list__items\" role=\"list\">\n  <ng-content />\n</ul>\n", styles: [":host{display:block}.mk-nav-list__items{display:flex;flex-direction:column;gap:var(--mk-space-1);margin:0;padding:0;list-style:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkNavList, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-nav-list', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-nav-list',
+                        '[class.mk-nav-list--collapsed]': 'collapsed()',
+                    }, template: "<ul class=\"mk-nav-list__items\" role=\"list\">\n  <ng-content />\n</ul>\n", styles: [":host{display:block}.mk-nav-list__items{display:flex;flex-direction:column;gap:var(--mk-space-1);margin:0;padding:0;list-style:none}\n"] }]
+        }], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }] } });
+
+/**
+ * A single sidebar entry: icon slot (`[mkNavIcon]`), label, optional badge and
+ * active state. Renders a link when `href` is set, otherwise a button that
+ * emits `action`. If it contains nested `<mk-nav-item>`s it becomes an
+ * expandable disclosure (`aria-expanded`). Collapses to an icon in a collapsed
+ * list, exposing the label as a tooltip — and because a sub-list can't be shown
+ * at rail width, a parent item there emits `action` (navigate) instead of
+ * toggling, so it never becomes a dead button.
+ *
+ * ```html
+ * <mk-nav-item label="Reports" active href="/reports" badge="3">
+ *   <svg mkNavIcon>…</svg>
+ * </mk-nav-item>
+ * <mk-nav-item label="Settings">
+ *   <svg mkNavIcon>…</svg>
+ *   <mk-nav-item label="Team" href="/team" />
+ * </mk-nav-item>
+ * ```
+ */
+class MkNavItem {
+    list = inject(MkNavList, { optional: true });
+    /** Visible label. Also used as the tooltip when collapsed. */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Link target. Renders an anchor instead of a button. */
+    href = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "href" }] : /* istanbul ignore next */ []));
+    /** Marks the current page (`aria-current="page"`). */
+    active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Disable interaction. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Optional badge (count or short text). */
+    badge = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "badge" }] : /* istanbul ignore next */ []));
+    /** Whether nested children are expanded (two-way). */
+    expanded = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    /** Emitted when a button-style item is activated. */
+    action = output();
+    /** Nested items projected inside this one. */
+    children = contentChildren(MkNavItem, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "children" }] : /* istanbul ignore next */ []));
+    hasChildren = computed(() => this.children().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
+    /** Collapsed state inherited from the enclosing `MkNavList`. */
+    collapsed = computed(() => this.list?.collapsed() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    /** Id wiring the disclosure button to its sub-list. */
+    subId = mkUniqueId('mk-nav-sub');
+    toggle() {
+        if (this.disabled())
+            return;
+        // In a collapsed (icon-rail) list the sub-list cannot be shown, so flipping
+        // `expanded` would be an invisible no-op and the item would read as a dead
+        // button. Emit `action` instead, letting the host navigate to the section —
+        // the same thing a leaf item does. Hosts that don't bind `(action)` on
+        // parents simply keep the previous (no-op) behaviour.
+        if (this.collapsed()) {
+            this.action.emit();
+            return;
+        }
+        this.expanded.update((v) => !v);
+    }
+    activate() {
+        if (this.disabled())
+            return;
+        this.action.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkNavItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkNavItem, isStandalone: true, selector: "mk-nav-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", action: "action" }, host: { attributes: { "role": "listitem" }, properties: { "class.mk-nav-item--active": "active()", "class.mk-nav-item--collapsed": "collapsed()", "class.mk-nav-item--has-children": "hasChildren()" }, classAttribute: "mk-nav-item" }, queries: [{ propertyName: "children", predicate: MkNavItem, isSignal: true }], ngImport: i0, template: "<!-- Projected slots captured once: a projection slot belongs to exactly one\n     ng-content, so referencing it directly from several @if branches leaves\n     all but one branch empty. -->\n<ng-template #iconTpl>\n  <span class=\"mk-nav-item__icon\" aria-hidden=\"true\">\n    <ng-content select=\"[mkNavIcon]\" />\n  </span>\n</ng-template>\n\n@if (hasChildren()) {\n  <button\n    type=\"button\"\n    class=\"mk-nav-item__link\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.aria-controls]=\"subId\"\n    [attr.title]=\"collapsed() ? label() : null\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggle()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"iconTpl\" />\n    <span class=\"mk-nav-item__label\">{{ label() }}</span>\n    @if (badge() !== undefined) {\n      <span class=\"mk-nav-item__badge\">{{ badge() }}</span>\n    }\n    <span class=\"mk-nav-item__chevron\" aria-hidden=\"true\">\n      <svg viewBox=\"0 0 24 24\" width=\"1em\" height=\"1em\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <polyline points=\"9 6 15 12 9 18\" />\n      </svg>\n    </span>\n  </button>\n\n  <ul\n    class=\"mk-nav-item__sub\"\n    role=\"list\"\n    [id]=\"subId\"\n    [attr.hidden]=\"expanded() && !collapsed() ? null : ''\"\n  >\n    <ng-content select=\"mk-nav-item\" />\n  </ul>\n} @else if (href()) {\n  <a\n    class=\"mk-nav-item__link\"\n    [href]=\"href()\"\n    [attr.aria-current]=\"active() ? 'page' : null\"\n    [attr.title]=\"collapsed() ? label() : null\"\n    [attr.aria-disabled]=\"disabled() || null\"\n    [attr.tabindex]=\"disabled() ? -1 : null\"\n  >\n    <ng-container [ngTemplateOutlet]=\"iconTpl\" />\n    <span class=\"mk-nav-item__label\">{{ label() }}</span>\n    @if (badge() !== undefined) {\n      <span class=\"mk-nav-item__badge\">{{ badge() }}</span>\n    }\n  </a>\n} @else {\n  <button\n    type=\"button\"\n    class=\"mk-nav-item__link\"\n    [attr.aria-current]=\"active() ? 'page' : null\"\n    [attr.title]=\"collapsed() ? label() : null\"\n    [disabled]=\"disabled()\"\n    (click)=\"activate()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"iconTpl\" />\n    <span class=\"mk-nav-item__label\">{{ label() }}</span>\n    @if (badge() !== undefined) {\n      <span class=\"mk-nav-item__badge\">{{ badge() }}</span>\n    }\n  </button>\n}\n", styles: [":host{display:block}.mk-nav-item__link{display:flex;align-items:center;gap:var(--mk-space-3);width:100%;min-height:40px;padding:var(--mk-space-2) var(--mk-space-3);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);color:var(--mk-text-muted);font-family:inherit;font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-medium);text-align:start;text-decoration:none;cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-nav-item__link:hover{background:var(--mk-hover-overlay);color:var(--mk-text)}.mk-nav-item__link:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-nav-item__link:disabled,.mk-nav-item__link[aria-disabled=true]{color:var(--mk-text-disabled);cursor:not-allowed;pointer-events:none}:host(.mk-nav-item--active)>.mk-nav-item__link{background:var(--mk-selected-bg);color:var(--mk-selected-text)}.mk-nav-item__icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.25rem;height:1.25rem;font-size:var(--mk-font-size-lg)}.mk-nav-item__icon:empty{display:none}.mk-nav-item__label{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mk-nav-item__badge{flex:none;min-width:1.25rem;padding:0 var(--mk-space-2);background:var(--mk-primary-subtle);color:var(--mk-primary-subtle-text);border-radius:var(--mk-radius-pill);font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold);line-height:1.25rem;text-align:center}.mk-nav-item__chevron{display:inline-flex;flex:none;color:var(--mk-text-subtle);transition:transform var(--mk-duration-normal) var(--mk-ease-emphasized)}:host(.mk-nav-item--has-children)>.mk-nav-item__link[aria-expanded=true] .mk-nav-item__chevron{transform:rotate(90deg)}:host(:dir(rtl)) .mk-nav-item__chevron{transform:scaleX(-1)}:host(.mk-nav-item--has-children:dir(rtl))>.mk-nav-item__link[aria-expanded=true] .mk-nav-item__chevron{transform:rotate(-90deg) scaleX(-1)}.mk-nav-item__sub[hidden]{display:none}.mk-nav-item__sub{display:flex;flex-direction:column;gap:var(--mk-space-1);margin-block:var(--mk-space-1);margin-inline:var(--mk-space-5) 0;padding-block:0;padding-inline:var(--mk-space-2) 0;border-inline-start:var(--mk-border-width) solid var(--mk-border);list-style:none}:host(.mk-nav-item--collapsed) .mk-nav-item__link{justify-content:center;padding:var(--mk-space-2)}:host(.mk-nav-item--collapsed) .mk-nav-item__label,:host(.mk-nav-item--collapsed) .mk-nav-item__badge,:host(.mk-nav-item--collapsed) .mk-nav-item__chevron{display:none}:host(.mk-nav-item--collapsed) .mk-nav-item__sub{display:none}@media(prefers-reduced-motion:reduce){.mk-nav-item__link,.mk-nav-item__chevron{transition:none}}\n"], dependencies: [{ 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: MkNavItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-nav-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], host: {
+                        class: 'mk-nav-item',
+                        role: 'listitem',
+                        '[class.mk-nav-item--active]': 'active()',
+                        '[class.mk-nav-item--collapsed]': 'collapsed()',
+                        '[class.mk-nav-item--has-children]': 'hasChildren()',
+                    }, template: "<!-- Projected slots captured once: a projection slot belongs to exactly one\n     ng-content, so referencing it directly from several @if branches leaves\n     all but one branch empty. -->\n<ng-template #iconTpl>\n  <span class=\"mk-nav-item__icon\" aria-hidden=\"true\">\n    <ng-content select=\"[mkNavIcon]\" />\n  </span>\n</ng-template>\n\n@if (hasChildren()) {\n  <button\n    type=\"button\"\n    class=\"mk-nav-item__link\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.aria-controls]=\"subId\"\n    [attr.title]=\"collapsed() ? label() : null\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggle()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"iconTpl\" />\n    <span class=\"mk-nav-item__label\">{{ label() }}</span>\n    @if (badge() !== undefined) {\n      <span class=\"mk-nav-item__badge\">{{ badge() }}</span>\n    }\n    <span class=\"mk-nav-item__chevron\" aria-hidden=\"true\">\n      <svg viewBox=\"0 0 24 24\" width=\"1em\" height=\"1em\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <polyline points=\"9 6 15 12 9 18\" />\n      </svg>\n    </span>\n  </button>\n\n  <ul\n    class=\"mk-nav-item__sub\"\n    role=\"list\"\n    [id]=\"subId\"\n    [attr.hidden]=\"expanded() && !collapsed() ? null : ''\"\n  >\n    <ng-content select=\"mk-nav-item\" />\n  </ul>\n} @else if (href()) {\n  <a\n    class=\"mk-nav-item__link\"\n    [href]=\"href()\"\n    [attr.aria-current]=\"active() ? 'page' : null\"\n    [attr.title]=\"collapsed() ? label() : null\"\n    [attr.aria-disabled]=\"disabled() || null\"\n    [attr.tabindex]=\"disabled() ? -1 : null\"\n  >\n    <ng-container [ngTemplateOutlet]=\"iconTpl\" />\n    <span class=\"mk-nav-item__label\">{{ label() }}</span>\n    @if (badge() !== undefined) {\n      <span class=\"mk-nav-item__badge\">{{ badge() }}</span>\n    }\n  </a>\n} @else {\n  <button\n    type=\"button\"\n    class=\"mk-nav-item__link\"\n    [attr.aria-current]=\"active() ? 'page' : null\"\n    [attr.title]=\"collapsed() ? label() : null\"\n    [disabled]=\"disabled()\"\n    (click)=\"activate()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"iconTpl\" />\n    <span class=\"mk-nav-item__label\">{{ label() }}</span>\n    @if (badge() !== undefined) {\n      <span class=\"mk-nav-item__badge\">{{ badge() }}</span>\n    }\n  </button>\n}\n", styles: [":host{display:block}.mk-nav-item__link{display:flex;align-items:center;gap:var(--mk-space-3);width:100%;min-height:40px;padding:var(--mk-space-2) var(--mk-space-3);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);color:var(--mk-text-muted);font-family:inherit;font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-medium);text-align:start;text-decoration:none;cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-nav-item__link:hover{background:var(--mk-hover-overlay);color:var(--mk-text)}.mk-nav-item__link:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-nav-item__link:disabled,.mk-nav-item__link[aria-disabled=true]{color:var(--mk-text-disabled);cursor:not-allowed;pointer-events:none}:host(.mk-nav-item--active)>.mk-nav-item__link{background:var(--mk-selected-bg);color:var(--mk-selected-text)}.mk-nav-item__icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.25rem;height:1.25rem;font-size:var(--mk-font-size-lg)}.mk-nav-item__icon:empty{display:none}.mk-nav-item__label{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mk-nav-item__badge{flex:none;min-width:1.25rem;padding:0 var(--mk-space-2);background:var(--mk-primary-subtle);color:var(--mk-primary-subtle-text);border-radius:var(--mk-radius-pill);font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold);line-height:1.25rem;text-align:center}.mk-nav-item__chevron{display:inline-flex;flex:none;color:var(--mk-text-subtle);transition:transform var(--mk-duration-normal) var(--mk-ease-emphasized)}:host(.mk-nav-item--has-children)>.mk-nav-item__link[aria-expanded=true] .mk-nav-item__chevron{transform:rotate(90deg)}:host(:dir(rtl)) .mk-nav-item__chevron{transform:scaleX(-1)}:host(.mk-nav-item--has-children:dir(rtl))>.mk-nav-item__link[aria-expanded=true] .mk-nav-item__chevron{transform:rotate(-90deg) scaleX(-1)}.mk-nav-item__sub[hidden]{display:none}.mk-nav-item__sub{display:flex;flex-direction:column;gap:var(--mk-space-1);margin-block:var(--mk-space-1);margin-inline:var(--mk-space-5) 0;padding-block:0;padding-inline:var(--mk-space-2) 0;border-inline-start:var(--mk-border-width) solid var(--mk-border);list-style:none}:host(.mk-nav-item--collapsed) .mk-nav-item__link{justify-content:center;padding:var(--mk-space-2)}:host(.mk-nav-item--collapsed) .mk-nav-item__label,:host(.mk-nav-item--collapsed) .mk-nav-item__badge,:host(.mk-nav-item--collapsed) .mk-nav-item__chevron{display:none}:host(.mk-nav-item--collapsed) .mk-nav-item__sub{display:none}@media(prefers-reduced-motion:reduce){.mk-nav-item__link,.mk-nav-item__chevron{transition:none}}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], action: [{ type: i0.Output, args: ["action"] }], children: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MkNavItem), { isSignal: true }] }] } });
+
+/**
+ * A titled section within an `<mk-nav-list>` — the "MAIN" / "SETTINGS" groupings
+ * common in admin/CMS sidebars. Static by default; set `collapsible` to make
+ * the label a toggle that expands/collapses its items (`aria-expanded` +
+ * region). In a collapsed icon rail the label becomes a divider.
+ *
+ * ```html
+ * <mk-nav-list>
+ *   <mk-nav-group label="Main">
+ *     <mk-nav-item label="Dashboard" href="/" />
+ *   </mk-nav-group>
+ *   <mk-nav-group label="Settings" collapsible>
+ *     <mk-nav-item label="Team" href="/team" />
+ *   </mk-nav-group>
+ * </mk-nav-list>
+ * ```
+ */
+class MkNavGroup {
+    list = inject(MkNavList, { optional: true });
+    /** Section title. */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Make the label a toggle that shows/hides the items. */
+    collapsible = input(false, { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether the section is expanded (two-way; only meaningful when collapsible). */
+    expanded = model(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    /** Id of the items region (for `aria-controls`). */
+    regionId = mkUniqueId('mk-nav-group');
+    /** Whether the enclosing list is a collapsed icon rail. */
+    railCollapsed = computed(() => this.list?.collapsed() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "railCollapsed" }] : /* istanbul ignore next */ []));
+    /** Items are visible unless collapsible-and-closed. */
+    itemsVisible = computed(() => !this.collapsible() || this.expanded(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemsVisible" }] : /* istanbul ignore next */ []));
+    toggle() {
+        if (this.collapsible())
+            this.expanded.update((v) => !v);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkNavGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkNavGroup, isStandalone: true, selector: "mk-nav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "label() || null", "class.mk-nav-group--collapsed-rail": "railCollapsed()", "class.mk-nav-group--closed": "collapsible() && !expanded()" }, classAttribute: "mk-nav-group" }, ngImport: i0, template: "@if (collapsible() && !railCollapsed()) {\n  <button\n    type=\"button\"\n    class=\"mk-nav-group__header mk-nav-group__header--toggle\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.aria-controls]=\"regionId\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"mk-nav-group__label\">{{ label() }}</span>\n    <span class=\"mk-nav-group__chevron\" aria-hidden=\"true\"></span>\n  </button>\n} @else if (!railCollapsed()) {\n  <p class=\"mk-nav-group__header\">\n    <span class=\"mk-nav-group__label\">{{ label() }}</span>\n  </p>\n}\n\n<div\n  class=\"mk-nav-group__items\"\n  [id]=\"regionId\"\n  [attr.hidden]=\"itemsVisible() ? null : ''\"\n>\n  <ng-content />\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host+:host{margin-top:var(--mk-space-3)}.mk-nav-group__header{display:flex;align-items:center;justify-content:space-between;gap:var(--mk-space-2);width:100%;margin:0;padding:var(--mk-space-1) var(--mk-space-3);background:transparent;border:0;color:var(--mk-text-subtle);font-family:inherit;font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold);letter-spacing:var(--mk-letter-spacing-wide);text-transform:uppercase}.mk-nav-group__header--toggle{cursor:pointer;border-radius:var(--mk-radius-sm)}.mk-nav-group__header--toggle:hover{color:var(--mk-text-muted);background-color:var(--mk-hover-overlay)}.mk-nav-group__header--toggle:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-nav-group__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-nav-group__chevron{flex:none;width:.4rem;height:.4rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-nav-group--closed) .mk-nav-group__chevron{transform:rotate(-45deg)}:host(.mk-nav-group--closed:dir(rtl)) .mk-nav-group__chevron{transform:rotate(135deg)}.mk-nav-group__items{display:flex;flex-direction:column;gap:2px}.mk-nav-group__items[hidden]{display:none}:host(.mk-nav-group--collapsed-rail)+:host(.mk-nav-group--collapsed-rail){margin-top:var(--mk-space-2);padding-top:var(--mk-space-2);border-top:var(--mk-border-width) solid var(--mk-border-subtle)}@media(prefers-reduced-motion:reduce){.mk-nav-group__chevron{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkNavGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-nav-group', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-nav-group',
+                        role: 'group',
+                        '[attr.aria-label]': 'label() || null',
+                        '[class.mk-nav-group--collapsed-rail]': 'railCollapsed()',
+                        '[class.mk-nav-group--closed]': 'collapsible() && !expanded()',
+                    }, template: "@if (collapsible() && !railCollapsed()) {\n  <button\n    type=\"button\"\n    class=\"mk-nav-group__header mk-nav-group__header--toggle\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.aria-controls]=\"regionId\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"mk-nav-group__label\">{{ label() }}</span>\n    <span class=\"mk-nav-group__chevron\" aria-hidden=\"true\"></span>\n  </button>\n} @else if (!railCollapsed()) {\n  <p class=\"mk-nav-group__header\">\n    <span class=\"mk-nav-group__label\">{{ label() }}</span>\n  </p>\n}\n\n<div\n  class=\"mk-nav-group__items\"\n  [id]=\"regionId\"\n  [attr.hidden]=\"itemsVisible() ? null : ''\"\n>\n  <ng-content />\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host+:host{margin-top:var(--mk-space-3)}.mk-nav-group__header{display:flex;align-items:center;justify-content:space-between;gap:var(--mk-space-2);width:100%;margin:0;padding:var(--mk-space-1) var(--mk-space-3);background:transparent;border:0;color:var(--mk-text-subtle);font-family:inherit;font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold);letter-spacing:var(--mk-letter-spacing-wide);text-transform:uppercase}.mk-nav-group__header--toggle{cursor:pointer;border-radius:var(--mk-radius-sm)}.mk-nav-group__header--toggle:hover{color:var(--mk-text-muted);background-color:var(--mk-hover-overlay)}.mk-nav-group__header--toggle:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-nav-group__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-nav-group__chevron{flex:none;width:.4rem;height:.4rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-nav-group--closed) .mk-nav-group__chevron{transform:rotate(-45deg)}:host(.mk-nav-group--closed:dir(rtl)) .mk-nav-group__chevron{transform:rotate(135deg)}.mk-nav-group__items{display:flex;flex-direction:column;gap:2px}.mk-nav-group__items[hidden]{display:none}:host(.mk-nav-group--collapsed-rail)+:host(.mk-nav-group--collapsed-rail){margin-top:var(--mk-space-2);padding-top:var(--mk-space-2);border-top:var(--mk-border-width) solid var(--mk-border-subtle)}@media(prefers-reduced-motion:reduce){.mk-nav-group__chevron{transition:none}}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }] } });
+
+/**
+ * A single step + its content panel. Declared inside `<mk-stepper>`; the
+ * projected content becomes the step body while `label` (and optional
+ * `description`) render in the step header.
+ *
+ * `completed` is a two-way model so a parent can gate a `linear` stepper:
+ * `<mk-step label="Details" [(completed)]="detailsValid()">`.
+ *
+ * ```html
+ * <mk-stepper linear>
+ *   <mk-step label="Account" [completed]="form.valid">…</mk-step>
+ *   <mk-step label="Payment" optional>…</mk-step>
+ * </mk-stepper>
+ * ```
+ */
+class MkStep {
+    /** Title shown in the step header. */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Optional secondary line under the label. */
+    description = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /** Marks the step optional (skippable in a `linear` stepper). */
+    optional = input(false, { ...(ngDevMode ? { debugName: "optional" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether the step is complete (two-way; drives `linear` gating + the ✓). */
+    completed = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "completed" }] : /* istanbul ignore next */ []));
+    /** Show the error state in the header (e.g. failed validation). */
+    hasError = input(false, { ...(ngDevMode ? { debugName: "hasError" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Allow returning to this step after it is completed. */
+    editable = input(true, { ...(ngDevMode ? { debugName: "editable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Stable id for the header button (wires `aria-labelledby`). */
+    headerId = mkUniqueId('mk-step');
+    /** Stable id for the panel (wires `aria-controls`). */
+    panelId = mkUniqueId('mk-step-panel');
+    /** Whether this step is currently selected. Set by the parent `MkStepper`. */
+    active = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    /**
+     * The step body, captured so `MkStepper` can render it in the position the
+     * orientation calls for. The host element itself stays empty — the panel
+     * wrapper (and its role/aria) belongs to the stepper, which is the only
+     * place that knows whether this is a tab panel or a disclosure region.
+     */
+    content = viewChild.required(TemplateRef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkStep, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: MkStep, isStandalone: true, selector: "mk-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, completed: { classPropertyName: "completed", publicName: "completed", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { completed: "completedChange" }, host: { classAttribute: "mk-step" }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  The body is captured as a TEMPLATE rather than projected in place, so the\n  parent `MkStepper` can render it wherever the orientation requires \u2014 beneath\n  the header rail when horizontal, or interleaved directly under its own header\n  when vertical. Projecting it here would pin every panel below every header.\n-->\n<ng-template>\n  <ng-content />\n</ng-template>\n", styles: [":host{display:block}:host([hidden]){display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkStep, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-step', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-step',
+                    }, template: "<!--\n  The body is captured as a TEMPLATE rather than projected in place, so the\n  parent `MkStepper` can render it wherever the orientation requires \u2014 beneath\n  the header rail when horizontal, or interleaved directly under its own header\n  when vertical. Projecting it here would pin every panel below every header.\n-->\n<ng-template>\n  <ng-content />\n</ng-template>\n", styles: [":host{display:block}:host([hidden]){display:none}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], completed: [{ type: i0.Input, args: [{ isSignal: true, alias: "completed", required: false }] }, { type: i0.Output, args: ["completedChange"] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], content: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+
+/**
+ * Stepper — walks a user through an ordered sequence of `<mk-step>`s with an
+ * accessible header rail (ARIA `tablist` + roving tabindex, Arrow/Home/End
+ * navigation) and a single visible panel.
+ *
+ * In `linear` mode a step is only reachable once every preceding required
+ * (non-`optional`) step reports `completed`. Drive completion from your form
+ * state and move with the `next()` / `previous()` / `reset()` API or by
+ * clicking a reachable header.
+ *
+ * ```html
+ * <mk-stepper #s linear [(selectedIndex)]="index">
+ *   <mk-step label="Account" [completed]="accountValid()">…</mk-step>
+ *   <mk-step label="Address" [completed]="addressValid()">…</mk-step>
+ *   <mk-step label="Review">…</mk-step>
+ * </mk-stepper>
+ * <button mkButton (click)="s.previous()">Back</button>
+ * <button mkButton (click)="s.next()">Next</button>
+ * ```
+ */
+class MkStepper {
+    i18n = inject(MK_I18N);
+    /** Step hosts are projected on the server only — see stepper.html. */
+    isServer = isPlatformServer(inject(PLATFORM_ID));
+    /** Projected steps, kept live via a signal content query. */
+    steps = contentChildren(MkStep, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+    /** Rendered header buttons, used to move focus. */
+    headerButtons = viewChildren('stepBtn', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerButtons" }] : /* istanbul ignore next */ []));
+    /** Zero-based index of the active step (two-way). */
+    selectedIndex = model(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
+    /** Header rail orientation. */
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /** Enforce sequential completion before a step becomes reachable. */
+    linear = input(false, { ...(ngDevMode ? { debugName: "linear" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    isHorizontal = computed(() => this.orientation() === 'horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isHorizontal" }] : /* istanbul ignore next */ []));
+    /** Emits the newly selected index whenever the active step changes. */
+    selectionChange = output();
+    constructor() {
+        // Keep each step's `active` flag in sync with the clamped selected index.
+        effect(() => {
+            const steps = this.steps();
+            const index = this.clampedIndex();
+            steps.forEach((step, i) => step.active.set(i === index));
+        });
+    }
+    clampedIndex = computed(() => {
+        const count = this.steps().length;
+        if (count === 0)
+            return 0;
+        return Math.min(Math.max(this.selectedIndex(), 0), count - 1);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clampedIndex" }] : /* istanbul ignore next */ []));
+    /** 1-based label for the header circle. */
+    stepNumber(index) {
+        return index + 1;
+    }
+    /**
+     * Whether a step can be selected. In linear mode every earlier required step
+     * must be completed; a completed step is reachable only when `editable`.
+     */
+    isReachable(index) {
+        const steps = this.steps();
+        if (index < 0 || index >= steps.length)
+            return false;
+        if (!this.linear())
+            return true;
+        if (index <= this.clampedIndex()) {
+            // Going back is allowed only to editable steps.
+            return steps[index].editable() || index === this.clampedIndex();
+        }
+        for (let i = 0; i < index; i++) {
+            if (!steps[i].optional() && !steps[i].completed())
+                return false;
+        }
+        return true;
+    }
+    select(index) {
+        if (!this.isReachable(index))
+            return;
+        if (index === this.clampedIndex())
+            return;
+        this.selectedIndex.set(index);
+        this.selectionChange.emit(index);
+    }
+    focusHeader(index) {
+        this.headerButtons()[index]?.nativeElement.focus();
+    }
+    /** Advance to the next reachable step, if any. */
+    next() {
+        const from = this.clampedIndex();
+        const target = from + 1;
+        if (target < this.steps().length && this.isReachable(target)) {
+            this.select(target);
+        }
+    }
+    /** Return to the previous step, if any. */
+    previous() {
+        const target = this.clampedIndex() - 1;
+        if (target >= 0)
+            this.select(target);
+    }
+    /** Reset to the first step and clear every step's completed flag. */
+    reset() {
+        this.steps().forEach((s) => s.completed.set(false));
+        this.selectedIndex.set(0);
+        this.selectionChange.emit(0);
+    }
+    onKeydown(event, index) {
+        const count = this.steps().length;
+        let next = -1;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                next = this.nextFocusable(index, 1);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                next = this.nextFocusable(index, -1);
+                break;
+            case 'Home':
+                next = this.nextFocusable(-1, 1);
+                break;
+            case 'End':
+                next = this.nextFocusable(count, -1);
+                break;
+            default:
+                return;
+        }
+        if (next >= 0) {
+            event.preventDefault();
+            // Automatic activation (as in `mk-tabs`): selection follows focus for
+            // reachable steps. `nextFocusable` already skips unreachable ones, so the
+            // guard only matters if the step became unreachable in between.
+            this.focusHeader(next);
+            if (this.isReachable(next))
+                this.select(next);
+        }
+    }
+    /** Next header index (wrapping) whose step is reachable. */
+    nextFocusable(from, step) {
+        const count = this.steps().length;
+        if (!count)
+            return -1;
+        for (let i = 1; i <= count; i++) {
+            const idx = (((from + step * i) % count) + count) % count;
+            if (this.isReachable(idx))
+                return idx;
+        }
+        return -1;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkStepper, isStandalone: true, selector: "mk-stepper", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", selectionChange: "selectionChange" }, host: { properties: { "class.mk-stepper--horizontal": "orientation() === 'horizontal'", "class.mk-stepper--vertical": "orientation() === 'vertical'" }, classAttribute: "mk-stepper" }, queries: [{ propertyName: "steps", predicate: MkStep, isSignal: true }], viewQueries: [{ propertyName: "headerButtons", predicate: ["stepBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  Steps are content children whose bodies are TEMPLATES (see MkStep), so this\n  view decides where each one lands. Horizontal keeps the classic split: one\n  header rail, one panel area below it. Vertical INTERLEAVES header and body,\n  the way a vertical stepper is expected to read.\n\n  The ARIA model differs with it, deliberately. Horizontal is a tablist: tabs\n  must be direct children of their tablist, which an interleaved layout cannot\n  satisfy. Vertical is therefore a disclosure pattern instead \u2014 plain buttons\n  with aria-expanded driving labelled regions. Same visuals, both valid.\n\n  On the server the step hosts still have to be projected somewhere or the\n  serializer has nowhere to put the projected nodes and hydration fails. They\n  render empty (the body lives in a template), so this costs nothing visually.\n-->\n@if (isServer) {\n  <ng-content />\n}\n\n@if (orientation() === 'horizontal') {\n  <div class=\"mk-stepper__header\" role=\"tablist\" aria-orientation=\"horizontal\">\n    @for (\n      step of steps();\n      track step.headerId;\n      let i = $index;\n      let last = $last\n    ) {\n      <ng-container\n        [ngTemplateOutlet]=\"headerTpl\"\n        [ngTemplateOutletContext]=\"{ step: step, i: i }\"\n      />\n      @if (!last) {\n        <span class=\"mk-stepper__connector\" aria-hidden=\"true\"></span>\n      }\n    }\n  </div>\n\n  <div class=\"mk-stepper__panels\">\n    @for (step of steps(); track step.headerId) {\n      <div\n        class=\"mk-stepper__panel\"\n        role=\"tabpanel\"\n        [id]=\"step.panelId\"\n        [attr.aria-labelledby]=\"step.headerId\"\n        [attr.tabindex]=\"step.active() ? 0 : null\"\n        [attr.inert]=\"step.active() ? null : ''\"\n        [hidden]=\"!step.active()\"\n      >\n        <ng-container [ngTemplateOutlet]=\"step.content()\" />\n      </div>\n    }\n  </div>\n} @else {\n  @for (\n    step of steps();\n    track step.headerId;\n    let i = $index;\n    let last = $last\n  ) {\n    <div class=\"mk-stepper__row\">\n      <ng-container\n        [ngTemplateOutlet]=\"headerTpl\"\n        [ngTemplateOutletContext]=\"{ step: step, i: i }\"\n      />\n      <!-- The rule down the side is this wrapper's left border, so it spans the\n           expanded body and stops at the last step. -->\n      <div\n        class=\"mk-stepper__vline\"\n        [class.mk-stepper__vline--last]=\"last\"\n        [attr.inert]=\"step.active() ? null : ''\"\n      >\n        <div\n          class=\"mk-stepper__panel\"\n          role=\"region\"\n          [id]=\"step.panelId\"\n          [attr.aria-labelledby]=\"step.headerId\"\n          [hidden]=\"!step.active()\"\n        >\n          <ng-container [ngTemplateOutlet]=\"step.content()\" />\n        </div>\n      </div>\n    </div>\n  }\n}\n\n<ng-template #headerTpl let-step=\"step\" let-i=\"i\">\n  <button\n    #stepBtn\n    type=\"button\"\n    class=\"mk-stepper__step\"\n    [class.mk-stepper__step--active]=\"step.active()\"\n    [class.mk-stepper__step--completed]=\"step.completed()\"\n    [class.mk-stepper__step--error]=\"step.hasError()\"\n    [id]=\"step.headerId\"\n    [attr.role]=\"isHorizontal() ? 'tab' : null\"\n    [attr.aria-controls]=\"step.panelId\"\n    [attr.aria-selected]=\"isHorizontal() ? step.active() : null\"\n    [attr.aria-posinset]=\"isHorizontal() ? i + 1 : null\"\n    [attr.aria-setsize]=\"isHorizontal() ? steps().length : null\"\n    [attr.aria-expanded]=\"isHorizontal() ? null : step.active()\"\n    [attr.aria-current]=\"!isHorizontal() && step.active() ? 'step' : null\"\n    [attr.aria-disabled]=\"!isReachable(i) || null\"\n    [attr.tabindex]=\"step.active() ? 0 : -1\"\n    [disabled]=\"!isReachable(i)\"\n    (click)=\"select(i)\"\n    (keydown)=\"onKeydown($event, i)\"\n  >\n    <span class=\"mk-stepper__marker\" aria-hidden=\"true\">\n      @if (step.hasError()) {\n        <span class=\"mk-stepper__bang\">!</span>\n      } @else if (step.completed()) {\n        <span class=\"mk-stepper__check\"></span>\n      } @else {\n        {{ stepNumber(i) }}\n      }\n    </span>\n    <span class=\"mk-stepper__labels\">\n      <span class=\"mk-stepper__label\">\n        {{ step.label() }}\n        @if (step.optional()) {\n          <span class=\"mk-stepper__optional\">{{ i18n.optional }}</span>\n        }\n      </span>\n      @if (step.description()) {\n        <span class=\"mk-stepper__description\">{{ step.description() }}</span>\n      }\n    </span>\n    <!-- The marker above is aria-hidden, so the completed/error state needs a\n         textual counterpart for assistive tech. -->\n    @if (step.hasError()) {\n      <span class=\"mk-visually-hidden\">{{ i18n.stepError }}</span>\n    } @else if (step.completed()) {\n      <span class=\"mk-visually-hidden\">{{ i18n.stepCompleted }}</span>\n    }\n  </button>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--mk-font-sans)}.mk-stepper__header{display:flex;align-items:center;overflow-x:auto;scrollbar-width:none;padding-block:calc(var(--mk-focus-ring-width) + var(--mk-focus-ring-offset))}.mk-stepper__header::-webkit-scrollbar{display:none}.mk-stepper__step{display:inline-flex;align-items:center;gap:var(--mk-space-2);flex:none;padding:var(--mk-space-2) var(--mk-space-3);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);font-family:inherit;color:var(--mk-text-muted);text-align:start;cursor:pointer;transition:color var(--mk-duration-fast) var(--mk-ease-standard),background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-stepper__step:hover:not(:disabled){color:var(--mk-text);background-color:var(--mk-hover-overlay)}.mk-stepper__step:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-stepper__step:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-stepper__step--active{color:var(--mk-text)}.mk-stepper__marker{display:grid;place-items:center;flex:none;width:1.75rem;height:1.75rem;border-radius:var(--mk-radius-circle);background-color:var(--mk-surface-3);color:var(--mk-text-muted);font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-semibold);transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-stepper__step--active .mk-stepper__marker{background-color:var(--mk-primary);color:var(--mk-primary-contrast)}.mk-stepper__step--completed:not(.mk-stepper__step--active) .mk-stepper__marker{background-color:var(--mk-primary-subtle);color:var(--mk-primary-subtle-text)}.mk-stepper__step--error .mk-stepper__marker{background-color:var(--mk-danger-text);color:var(--mk-danger-contrast)}.mk-stepper__bang{line-height:1}.mk-stepper__check{width:.4rem;height:.7rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-1px)}.mk-stepper__labels{display:flex;flex-direction:column;gap:2px;min-width:0}.mk-stepper__label{display:inline-flex;align-items:center;gap:var(--mk-space-2);font-size:var(--mk-font-size-md);font-weight:var(--mk-font-weight-medium)}.mk-stepper__step--error .mk-stepper__label{color:var(--mk-danger-text)}.mk-stepper__optional{font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-normal);color:var(--mk-text-subtle)}.mk-stepper__description{font-size:var(--mk-font-size-sm);color:var(--mk-text-subtle)}.mk-stepper__connector{flex:1 1 auto;min-width:var(--mk-space-4);height:var(--mk-border-width);margin:0 var(--mk-space-2);background-color:var(--mk-border)}.mk-stepper__panels{padding-top:var(--mk-space-4)}:host(.mk-stepper--vertical) .mk-stepper__row{display:flex;flex-direction:column;align-items:stretch}:host(.mk-stepper--vertical) .mk-stepper__step{align-self:stretch;justify-content:flex-start;text-align:start}:host(.mk-stepper--vertical) .mk-stepper__vline{margin-inline-start:calc(var(--mk-space-3) + .875rem);border-inline-start:var(--mk-border-width) solid var(--mk-border);padding-inline-start:calc(var(--mk-space-4) - var(--mk-border-width));min-height:var(--mk-space-4)}:host(.mk-stepper--vertical) .mk-stepper__vline--last{border-inline-start-color:transparent;min-height:0}:host(.mk-stepper--vertical) .mk-stepper__panel:not([hidden]){padding-block:var(--mk-space-3)}@media(prefers-reduced-motion:reduce){.mk-stepper__step,.mk-stepper__marker{transition:none}}\n"], dependencies: [{ 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: MkStepper, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-stepper', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-stepper',
+                        '[class.mk-stepper--horizontal]': "orientation() === 'horizontal'",
+                        '[class.mk-stepper--vertical]': "orientation() === 'vertical'",
+                    }, template: "<!--\n  Steps are content children whose bodies are TEMPLATES (see MkStep), so this\n  view decides where each one lands. Horizontal keeps the classic split: one\n  header rail, one panel area below it. Vertical INTERLEAVES header and body,\n  the way a vertical stepper is expected to read.\n\n  The ARIA model differs with it, deliberately. Horizontal is a tablist: tabs\n  must be direct children of their tablist, which an interleaved layout cannot\n  satisfy. Vertical is therefore a disclosure pattern instead \u2014 plain buttons\n  with aria-expanded driving labelled regions. Same visuals, both valid.\n\n  On the server the step hosts still have to be projected somewhere or the\n  serializer has nowhere to put the projected nodes and hydration fails. They\n  render empty (the body lives in a template), so this costs nothing visually.\n-->\n@if (isServer) {\n  <ng-content />\n}\n\n@if (orientation() === 'horizontal') {\n  <div class=\"mk-stepper__header\" role=\"tablist\" aria-orientation=\"horizontal\">\n    @for (\n      step of steps();\n      track step.headerId;\n      let i = $index;\n      let last = $last\n    ) {\n      <ng-container\n        [ngTemplateOutlet]=\"headerTpl\"\n        [ngTemplateOutletContext]=\"{ step: step, i: i }\"\n      />\n      @if (!last) {\n        <span class=\"mk-stepper__connector\" aria-hidden=\"true\"></span>\n      }\n    }\n  </div>\n\n  <div class=\"mk-stepper__panels\">\n    @for (step of steps(); track step.headerId) {\n      <div\n        class=\"mk-stepper__panel\"\n        role=\"tabpanel\"\n        [id]=\"step.panelId\"\n        [attr.aria-labelledby]=\"step.headerId\"\n        [attr.tabindex]=\"step.active() ? 0 : null\"\n        [attr.inert]=\"step.active() ? null : ''\"\n        [hidden]=\"!step.active()\"\n      >\n        <ng-container [ngTemplateOutlet]=\"step.content()\" />\n      </div>\n    }\n  </div>\n} @else {\n  @for (\n    step of steps();\n    track step.headerId;\n    let i = $index;\n    let last = $last\n  ) {\n    <div class=\"mk-stepper__row\">\n      <ng-container\n        [ngTemplateOutlet]=\"headerTpl\"\n        [ngTemplateOutletContext]=\"{ step: step, i: i }\"\n      />\n      <!-- The rule down the side is this wrapper's left border, so it spans the\n           expanded body and stops at the last step. -->\n      <div\n        class=\"mk-stepper__vline\"\n        [class.mk-stepper__vline--last]=\"last\"\n        [attr.inert]=\"step.active() ? null : ''\"\n      >\n        <div\n          class=\"mk-stepper__panel\"\n          role=\"region\"\n          [id]=\"step.panelId\"\n          [attr.aria-labelledby]=\"step.headerId\"\n          [hidden]=\"!step.active()\"\n        >\n          <ng-container [ngTemplateOutlet]=\"step.content()\" />\n        </div>\n      </div>\n    </div>\n  }\n}\n\n<ng-template #headerTpl let-step=\"step\" let-i=\"i\">\n  <button\n    #stepBtn\n    type=\"button\"\n    class=\"mk-stepper__step\"\n    [class.mk-stepper__step--active]=\"step.active()\"\n    [class.mk-stepper__step--completed]=\"step.completed()\"\n    [class.mk-stepper__step--error]=\"step.hasError()\"\n    [id]=\"step.headerId\"\n    [attr.role]=\"isHorizontal() ? 'tab' : null\"\n    [attr.aria-controls]=\"step.panelId\"\n    [attr.aria-selected]=\"isHorizontal() ? step.active() : null\"\n    [attr.aria-posinset]=\"isHorizontal() ? i + 1 : null\"\n    [attr.aria-setsize]=\"isHorizontal() ? steps().length : null\"\n    [attr.aria-expanded]=\"isHorizontal() ? null : step.active()\"\n    [attr.aria-current]=\"!isHorizontal() && step.active() ? 'step' : null\"\n    [attr.aria-disabled]=\"!isReachable(i) || null\"\n    [attr.tabindex]=\"step.active() ? 0 : -1\"\n    [disabled]=\"!isReachable(i)\"\n    (click)=\"select(i)\"\n    (keydown)=\"onKeydown($event, i)\"\n  >\n    <span class=\"mk-stepper__marker\" aria-hidden=\"true\">\n      @if (step.hasError()) {\n        <span class=\"mk-stepper__bang\">!</span>\n      } @else if (step.completed()) {\n        <span class=\"mk-stepper__check\"></span>\n      } @else {\n        {{ stepNumber(i) }}\n      }\n    </span>\n    <span class=\"mk-stepper__labels\">\n      <span class=\"mk-stepper__label\">\n        {{ step.label() }}\n        @if (step.optional()) {\n          <span class=\"mk-stepper__optional\">{{ i18n.optional }}</span>\n        }\n      </span>\n      @if (step.description()) {\n        <span class=\"mk-stepper__description\">{{ step.description() }}</span>\n      }\n    </span>\n    <!-- The marker above is aria-hidden, so the completed/error state needs a\n         textual counterpart for assistive tech. -->\n    @if (step.hasError()) {\n      <span class=\"mk-visually-hidden\">{{ i18n.stepError }}</span>\n    } @else if (step.completed()) {\n      <span class=\"mk-visually-hidden\">{{ i18n.stepCompleted }}</span>\n    }\n  </button>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--mk-font-sans)}.mk-stepper__header{display:flex;align-items:center;overflow-x:auto;scrollbar-width:none;padding-block:calc(var(--mk-focus-ring-width) + var(--mk-focus-ring-offset))}.mk-stepper__header::-webkit-scrollbar{display:none}.mk-stepper__step{display:inline-flex;align-items:center;gap:var(--mk-space-2);flex:none;padding:var(--mk-space-2) var(--mk-space-3);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);font-family:inherit;color:var(--mk-text-muted);text-align:start;cursor:pointer;transition:color var(--mk-duration-fast) var(--mk-ease-standard),background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-stepper__step:hover:not(:disabled){color:var(--mk-text);background-color:var(--mk-hover-overlay)}.mk-stepper__step:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-stepper__step:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-stepper__step--active{color:var(--mk-text)}.mk-stepper__marker{display:grid;place-items:center;flex:none;width:1.75rem;height:1.75rem;border-radius:var(--mk-radius-circle);background-color:var(--mk-surface-3);color:var(--mk-text-muted);font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-semibold);transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-stepper__step--active .mk-stepper__marker{background-color:var(--mk-primary);color:var(--mk-primary-contrast)}.mk-stepper__step--completed:not(.mk-stepper__step--active) .mk-stepper__marker{background-color:var(--mk-primary-subtle);color:var(--mk-primary-subtle-text)}.mk-stepper__step--error .mk-stepper__marker{background-color:var(--mk-danger-text);color:var(--mk-danger-contrast)}.mk-stepper__bang{line-height:1}.mk-stepper__check{width:.4rem;height:.7rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-1px)}.mk-stepper__labels{display:flex;flex-direction:column;gap:2px;min-width:0}.mk-stepper__label{display:inline-flex;align-items:center;gap:var(--mk-space-2);font-size:var(--mk-font-size-md);font-weight:var(--mk-font-weight-medium)}.mk-stepper__step--error .mk-stepper__label{color:var(--mk-danger-text)}.mk-stepper__optional{font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-normal);color:var(--mk-text-subtle)}.mk-stepper__description{font-size:var(--mk-font-size-sm);color:var(--mk-text-subtle)}.mk-stepper__connector{flex:1 1 auto;min-width:var(--mk-space-4);height:var(--mk-border-width);margin:0 var(--mk-space-2);background-color:var(--mk-border)}.mk-stepper__panels{padding-top:var(--mk-space-4)}:host(.mk-stepper--vertical) .mk-stepper__row{display:flex;flex-direction:column;align-items:stretch}:host(.mk-stepper--vertical) .mk-stepper__step{align-self:stretch;justify-content:flex-start;text-align:start}:host(.mk-stepper--vertical) .mk-stepper__vline{margin-inline-start:calc(var(--mk-space-3) + .875rem);border-inline-start:var(--mk-border-width) solid var(--mk-border);padding-inline-start:calc(var(--mk-space-4) - var(--mk-border-width));min-height:var(--mk-space-4)}:host(.mk-stepper--vertical) .mk-stepper__vline--last{border-inline-start-color:transparent;min-height:0}:host(.mk-stepper--vertical) .mk-stepper__panel:not([hidden]){padding-block:var(--mk-space-3)}@media(prefers-reduced-motion:reduce){.mk-stepper__step,.mk-stepper__marker{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MkStep), { isSignal: true }] }], headerButtons: [{ type: i0.ViewChildren, args: ['stepBtn', { isSignal: true }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
+
+/**
+ * Tree — renders hierarchical data following the ARIA tree pattern
+ * (`role="tree"` / `treeitem` with `aria-level`, `aria-expanded`,
+ * `aria-selected`). Supply `nodes`; expansion is managed internally.
+ *
+ * Keyboard: Up/Down move between visible rows, Right expands (or steps into the
+ * first child), Left collapses (or steps out to the parent), Home/End jump, and
+ * Enter/Space toggles expansion and selects (when `selectable`). A single
+ * roving tabindex keeps the whole tree one tab stop.
+ *
+ * ```html
+ * <mk-tree selectable [nodes]="tree" [(selected)]="picked"
+ *   (selectionChange)="onPick($event)" />
+ * ```
+ */
+class MkTree {
+    /** The hierarchical data to render. */
+    nodes = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
+    /** Allow choosing a node (adds selection styling + `aria-selected`). */
+    selectable = input(false, { ...(ngDevMode ? { debugName: "selectable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Accessible name for the tree. */
+    ariaLabel = input('', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    /** Two-way selected value (a node's `value`, or the node itself if unset). */
+    selected = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    /** Emits the selected value whenever the selection changes. */
+    selectionChange = output();
+    /** Emits a node whenever it is expanded or collapsed. */
+    nodeToggle = output();
+    rowRefs = viewChildren('row', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowRefs" }] : /* istanbul ignore next */ []));
+    /**
+     * Expanded nodes. Survives `nodes` identity changes (a consumer rebuilding
+     * the array keeps the user's expansion state for the node objects it
+     * reuses); a node's `expanded` flag only seeds nodes NOT present in the
+     * previous array — so it applies on first render and to newly added nodes,
+     * without reverting branches the user has since collapsed.
+     */
+    expandedSet = linkedSignal({ ...(ngDevMode ? { debugName: "expandedSet" } : /* istanbul ignore next */ {}), source: this.nodes,
+        computation: (nodes, previous) => {
+            const prevExpanded = previous?.value;
+            // Lazily built set of nodes from the previous input — only needed when
+            // a node carries `expanded: true` and we must decide whether it is new.
+            let prevNodes = null;
+            const isNewNode = (node) => {
+                if (!previous)
+                    return true;
+                if (prevNodes === null) {
+                    prevNodes = new Set();
+                    const collect = (list) => {
+                        for (const n of list) {
+                            prevNodes.add(n);
+                            if (n.children?.length)
+                                collect(n.children);
+                        }
+                    };
+                    collect(previous.source);
+                }
+                return !prevNodes.has(node);
+            };
+            const next = new Set();
+            const walk = (list) => {
+                for (const node of list) {
+                    if (node.children?.length) {
+                        if (prevExpanded?.has(node) || (node.expanded && isNewNode(node))) {
+                            next.add(node);
+                        }
+                        walk(node.children);
+                    }
+                }
+            };
+            walk(nodes);
+            return next;
+        } });
+    activeIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    /** Flattened list of currently visible rows (respects expansion). */
+    rows = computed(() => {
+        const expanded = this.expandedSet();
+        const out = [];
+        const walk = (list, level) => {
+            list.forEach((node, i) => {
+                const expandable = !!node.children?.length;
+                const isExpanded = expandable && expanded.has(node);
+                out.push({
+                    node,
+                    level,
+                    posinset: i + 1,
+                    setsize: list.length,
+                    expandable,
+                    expanded: isExpanded,
+                });
+                if (isExpanded)
+                    walk(node.children, level + 1);
+            });
+        };
+        walk(this.nodes(), 1);
+        return out;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    valueOf(node) {
+        return node.value !== undefined ? node.value : node;
+    }
+    isSelected(node) {
+        return this.selectable() && this.selected() === this.valueOf(node);
+    }
+    isExpanded(node) {
+        return this.expandedSet().has(node);
+    }
+    toggle(node) {
+        if (node.disabled || !node.children?.length)
+            return;
+        const next = new Set(this.expandedSet());
+        if (next.has(node))
+            next.delete(node);
+        else
+            next.add(node);
+        this.expandedSet.set(next);
+        this.nodeToggle.emit(node);
+    }
+    expand(node) {
+        if (node.disabled || !node.children?.length || this.isExpanded(node))
+            return;
+        const next = new Set(this.expandedSet());
+        next.add(node);
+        this.expandedSet.set(next);
+        this.nodeToggle.emit(node);
+    }
+    collapse(node) {
+        if (!this.isExpanded(node))
+            return;
+        const next = new Set(this.expandedSet());
+        next.delete(node);
+        this.expandedSet.set(next);
+        this.nodeToggle.emit(node);
+    }
+    select(node) {
+        if (!this.selectable() || node.disabled)
+            return;
+        const value = this.valueOf(node);
+        this.selected.set(value);
+        this.selectionChange.emit(value);
+    }
+    /**
+     * Click on a parent row's chevron: toggle expansion WITHOUT selecting, so
+     * mouse users can open a branch without committing it (hosts like
+     * `mk-tree-select` close on any selection, which would make children
+     * unreachable by mouse otherwise). On leaf rows the click falls through to
+     * the row handler and behaves as a normal row click.
+     */
+    onToggleClick(event, index) {
+        const row = this.rows()[index];
+        if (!row?.expandable)
+            return;
+        event.stopPropagation();
+        this.activeIndex.set(index);
+        this.toggle(row.node);
+    }
+    /** Click a row: toggle expansion for parents, select when selectable. */
+    onRowClick(index) {
+        const row = this.rows()[index];
+        if (!row)
+            return;
+        this.activeIndex.set(index);
+        if (row.expandable)
+            this.toggle(row.node);
+        this.select(row.node);
+    }
+    onKeydown(event, index) {
+        const rows = this.rows();
+        const row = rows[index];
+        if (!row)
+            return;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.focusRow(Math.min(index + 1, rows.length - 1));
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.focusRow(Math.max(index - 1, 0));
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                if (row.expandable && !row.expanded)
+                    this.expand(row.node);
+                else if (row.expanded)
+                    this.focusRow(index + 1);
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                if (row.expandable && row.expanded)
+                    this.collapse(row.node);
+                else
+                    this.focusRow(this.parentIndex(index));
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.focusRow(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.focusRow(rows.length - 1);
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (row.expandable)
+                    this.toggle(row.node);
+                this.select(row.node);
+                break;
+        }
+    }
+    /** Index of the nearest preceding row one level up (or the row itself). */
+    parentIndex(index) {
+        const rows = this.rows();
+        const level = rows[index]?.level ?? 1;
+        for (let i = index - 1; i >= 0; i--) {
+            if (rows[i].level < level)
+                return i;
+        }
+        return index;
+    }
+    focusRow(index) {
+        const rows = this.rows();
+        if (index < 0 || index >= rows.length)
+            return;
+        this.activeIndex.set(index);
+        this.rowRefs()[index]?.nativeElement.focus();
+    }
+    tabIndexFor(index) {
+        const active = Math.min(this.activeIndex(), this.rows().length - 1);
+        return index === Math.max(active, 0) ? 0 : -1;
+    }
+    indent(level) {
+        return `calc(${level - 1} * var(--mk-space-5))`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTree, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkTree, isStandalone: true, selector: "mk-tree", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", selectionChange: "selectionChange", nodeToggle: "nodeToggle" }, host: { classAttribute: "mk-tree" }, viewQueries: [{ propertyName: "rowRefs", predicate: ["row"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"mk-tree__root\"\n  role=\"tree\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n>\n  @for (row of rows(); track row.node; let i = $index) {\n    <div\n      #row\n      class=\"mk-tree__item\"\n      role=\"treeitem\"\n      [class.mk-tree__item--selected]=\"isSelected(row.node)\"\n      [class.mk-tree__item--disabled]=\"row.node.disabled\"\n      [attr.aria-level]=\"row.level\"\n      [attr.aria-posinset]=\"row.posinset\"\n      [attr.aria-setsize]=\"row.setsize\"\n      [attr.aria-expanded]=\"row.expandable ? row.expanded : null\"\n      [attr.aria-selected]=\"selectable() ? isSelected(row.node) : null\"\n      [attr.aria-disabled]=\"row.node.disabled || null\"\n      [attr.tabindex]=\"tabIndexFor(i)\"\n      [style.padding-inline-start]=\"indent(row.level)\"\n      (click)=\"onRowClick(i)\"\n      (keydown)=\"onKeydown($event, i)\"\n    >\n      <span\n        class=\"mk-tree__toggle\"\n        aria-hidden=\"true\"\n        (click)=\"onToggleClick($event, i)\"\n      >\n        @if (row.expandable) {\n          <span\n            class=\"mk-tree__caret\"\n            [class.mk-tree__caret--open]=\"row.expanded\"\n          ></span>\n        }\n      </span>\n      @if (row.node.icon) {\n        <span class=\"mk-tree__icon\" aria-hidden=\"true\">{{ row.node.icon }}</span>\n      }\n      <span class=\"mk-tree__label\">{{ row.node.label }}</span>\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--mk-font-sans)}.mk-tree__root{display:flex;flex-direction:column}.mk-tree__item{display:flex;align-items:center;gap:var(--mk-space-1);min-height:2rem;padding-inline-end:var(--mk-space-2);border-radius:var(--mk-radius-sm);color:var(--mk-text);font-size:var(--mk-font-size-md);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-tree__item:hover{background-color:var(--mk-hover-overlay)}.mk-tree__item:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-tree__item--selected{background-color:var(--mk-selected-bg);color:var(--mk-selected-text);font-weight:var(--mk-font-weight-medium)}.mk-tree__item--selected:hover{background-color:var(--mk-selected-bg)}.mk-tree__item--disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-tree__item--disabled:hover{background-color:transparent}.mk-tree__toggle{display:grid;place-items:center;flex:none;width:1.25rem;height:1.25rem}@media(pointer:coarse){.mk-tree__toggle{position:relative}.mk-tree__toggle:before{content:\"\";position:absolute;inset:min(0px,(100% - 24px) / 2)}}.mk-tree__caret{width:.4rem;height:.4rem;border-right:2px solid var(--mk-text-muted);border-bottom:2px solid var(--mk-text-muted);transform:rotate(-45deg);transition:transform var(--mk-duration-fast) var(--mk-ease-standard)}.mk-tree__caret--open{transform:rotate(45deg)}:host(:dir(rtl)) .mk-tree__caret:not(.mk-tree__caret--open){transform:rotate(135deg)}.mk-tree__icon{flex:none;display:inline-flex;line-height:1}.mk-tree__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(prefers-reduced-motion:reduce){.mk-tree__item,.mk-tree__caret{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTree, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-tree', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-tree',
+                    }, template: "<div\n  class=\"mk-tree__root\"\n  role=\"tree\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n>\n  @for (row of rows(); track row.node; let i = $index) {\n    <div\n      #row\n      class=\"mk-tree__item\"\n      role=\"treeitem\"\n      [class.mk-tree__item--selected]=\"isSelected(row.node)\"\n      [class.mk-tree__item--disabled]=\"row.node.disabled\"\n      [attr.aria-level]=\"row.level\"\n      [attr.aria-posinset]=\"row.posinset\"\n      [attr.aria-setsize]=\"row.setsize\"\n      [attr.aria-expanded]=\"row.expandable ? row.expanded : null\"\n      [attr.aria-selected]=\"selectable() ? isSelected(row.node) : null\"\n      [attr.aria-disabled]=\"row.node.disabled || null\"\n      [attr.tabindex]=\"tabIndexFor(i)\"\n      [style.padding-inline-start]=\"indent(row.level)\"\n      (click)=\"onRowClick(i)\"\n      (keydown)=\"onKeydown($event, i)\"\n    >\n      <span\n        class=\"mk-tree__toggle\"\n        aria-hidden=\"true\"\n        (click)=\"onToggleClick($event, i)\"\n      >\n        @if (row.expandable) {\n          <span\n            class=\"mk-tree__caret\"\n            [class.mk-tree__caret--open]=\"row.expanded\"\n          ></span>\n        }\n      </span>\n      @if (row.node.icon) {\n        <span class=\"mk-tree__icon\" aria-hidden=\"true\">{{ row.node.icon }}</span>\n      }\n      <span class=\"mk-tree__label\">{{ row.node.label }}</span>\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--mk-font-sans)}.mk-tree__root{display:flex;flex-direction:column}.mk-tree__item{display:flex;align-items:center;gap:var(--mk-space-1);min-height:2rem;padding-inline-end:var(--mk-space-2);border-radius:var(--mk-radius-sm);color:var(--mk-text);font-size:var(--mk-font-size-md);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-tree__item:hover{background-color:var(--mk-hover-overlay)}.mk-tree__item:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-tree__item--selected{background-color:var(--mk-selected-bg);color:var(--mk-selected-text);font-weight:var(--mk-font-weight-medium)}.mk-tree__item--selected:hover{background-color:var(--mk-selected-bg)}.mk-tree__item--disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-tree__item--disabled:hover{background-color:transparent}.mk-tree__toggle{display:grid;place-items:center;flex:none;width:1.25rem;height:1.25rem}@media(pointer:coarse){.mk-tree__toggle{position:relative}.mk-tree__toggle:before{content:\"\";position:absolute;inset:min(0px,(100% - 24px) / 2)}}.mk-tree__caret{width:.4rem;height:.4rem;border-right:2px solid var(--mk-text-muted);border-bottom:2px solid var(--mk-text-muted);transform:rotate(-45deg);transition:transform var(--mk-duration-fast) var(--mk-ease-standard)}.mk-tree__caret--open{transform:rotate(45deg)}:host(:dir(rtl)) .mk-tree__caret:not(.mk-tree__caret--open){transform:rotate(135deg)}.mk-tree__icon{flex:none;display:inline-flex;line-height:1}.mk-tree__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(prefers-reduced-motion:reduce){.mk-tree__item,.mk-tree__caret{transition:none}}\n"] }]
+        }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], nodeToggle: [{ type: i0.Output, args: ["nodeToggle"] }], rowRefs: [{ type: i0.ViewChildren, args: ['row', { isSignal: true }] }] } });
+
+/**
+ * Drawer — a declarative slide-out panel anchored to a viewport edge, driven by
+ * a two-way `open`. Ideal for admin/CMS side panels: filters, entity details,
+ * settings, quick-create forms. Traps focus while open, closes on backdrop
+ * click or Escape, restores focus on close, and locks body scroll when modal.
+ *
+ * Slots: `[mkDrawerHeader]` (extra header content), default content (body),
+ * `[mkDrawerFooter]` (sticky footer).
+ *
+ * ```html
+ * <button mkButton (click)="filters.set(true)">Filters</button>
+ * <mk-drawer [(open)]="filters" side="end" heading="Filters">
+ *   …filter form…
+ *   <div mkDrawerFooter>
+ *     <button mkButton variant="ghost" (click)="filters.set(false)">Close</button>
+ *     <button mkButton (click)="apply()">Apply</button>
+ *   </div>
+ * </mk-drawer>
+ * ```
+ */
+class MkDrawer {
+    document = inject(DOCUMENT);
+    /** Localised strings (override globally via `provideMkI18n`). */
+    i18n = inject(MK_I18N);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    panelRef = viewChild.required('panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
+    /** Whether the drawer is open (two-way). */
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Viewport edge to anchor to. */
+    side = input('end', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    /** Panel width (start/end) or height (top/bottom) — any CSS length. */
+    size = input('20rem', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Render a dimmed backdrop and lock body scroll (modal). */
+    hasBackdrop = input(true, { ...(ngDevMode ? { debugName: "hasBackdrop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Close when the backdrop is clicked. */
+    closeOnBackdrop = input(true, { ...(ngDevMode ? { debugName: "closeOnBackdrop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Close on the Escape key. */
+    closeOnEscape = input(true, { ...(ngDevMode ? { debugName: "closeOnEscape" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Trap Tab focus inside the panel while open. */
+    trapFocus = input(true, { ...(ngDevMode ? { debugName: "trapFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Optional heading rendered in the header. */
+    heading = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+    /** Hide the header close button. */
+    hideClose = input(false, { ...(ngDevMode ? { debugName: "hideClose" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Accessible name when no `heading` is provided. */
+    ariaLabel = input('', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    titleId = mkUniqueId('mk-drawer-title');
+    focusTrap;
+    previouslyFocused = null;
+    scrollLocked = false;
+    constructor() {
+        effect(() => {
+            const isOpen = this.open();
+            if (!this.isBrowser)
+                return;
+            // Defer so the panel has rendered/settled before focus moves into it.
+            queueMicrotask(() => this.sync(isOpen));
+        });
+    }
+    sync(isOpen) {
+        const panel = this.panelRef().nativeElement;
+        if (isOpen) {
+            this.previouslyFocused = this.document.activeElement;
+            if (this.trapFocus()) {
+                this.focusTrap = new MkFocusTrap(panel);
+                this.focusTrap.activate();
+            }
+            if (this.hasBackdrop() && !this.scrollLocked) {
+                this.document.body.style.setProperty('overflow', 'hidden');
+                this.scrollLocked = true;
+            }
+        }
+        else {
+            this.focusTrap?.release();
+            this.focusTrap = undefined;
+            if (this.scrollLocked) {
+                this.document.body.style.removeProperty('overflow');
+                this.scrollLocked = false;
+            }
+            this.previouslyFocused?.focus?.();
+        }
+    }
+    /** Release the focus trap + scroll lock if destroyed while open. */
+    ngOnDestroy() {
+        this.focusTrap?.release();
+        this.focusTrap = undefined;
+        if (this.scrollLocked) {
+            this.document.body.style.removeProperty('overflow');
+            this.scrollLocked = false;
+        }
+    }
+    /** Close the drawer. */
+    close() {
+        this.open.set(false);
+    }
+    onBackdrop() {
+        if (this.closeOnBackdrop())
+            this.close();
+    }
+    onEscape(event) {
+        if (this.open() && this.closeOnEscape()) {
+            event.stopPropagation();
+            this.close();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkDrawer, isStandalone: true, selector: "mk-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, trapFocus: { classPropertyName: "trapFocus", publicName: "trapFocus", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, hideClose: { classPropertyName: "hideClose", publicName: "hideClose", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { listeners: { "keydown.escape": "onEscape($event)" }, properties: { "class.mk-drawer--open": "open()", "attr.data-side": "side()", "attr.inert": "open() ? null : ''" }, classAttribute: "mk-drawer" }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasBackdrop()) {\n  <div class=\"mk-drawer__backdrop\" (click)=\"onBackdrop()\"></div>\n}\n\n<aside\n  #panel\n  class=\"mk-drawer__panel\"\n  role=\"dialog\"\n  [attr.aria-modal]=\"hasBackdrop() ? 'true' : null\"\n  [attr.aria-label]=\"!heading() ? ariaLabel() || null : null\"\n  [attr.aria-labelledby]=\"heading() ? titleId : null\"\n  [style.--_size]=\"size()\"\n  tabindex=\"-1\"\n>\n  @if (heading() || !hideClose()) {\n    <header class=\"mk-drawer__header\">\n      @if (heading(); as h) {\n        <h2 class=\"mk-drawer__title\" [id]=\"titleId\">{{ h }}</h2>\n      }\n      <ng-content select=\"[mkDrawerHeader]\" />\n      @if (!hideClose()) {\n        <button\n          type=\"button\"\n          class=\"mk-drawer__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-drawer__body\">\n    <ng-content />\n  </div>\n\n  <footer class=\"mk-drawer__footer\">\n    <ng-content select=\"[mkDrawerFooter]\" />\n  </footer>\n</aside>\n", styles: [":host{position:fixed;inset:0;z-index:var(--mk-z-drawer);pointer-events:none;font-family:var(--mk-font-sans)}:host(.mk-drawer--open){pointer-events:auto}.mk-drawer__backdrop{position:absolute;inset:0;background-color:var(--mk-overlay-scrim);opacity:0;transition:opacity var(--mk-duration-normal) var(--mk-ease-standard)}:host(.mk-drawer--open) .mk-drawer__backdrop{opacity:1}.mk-drawer__panel{position:absolute;display:flex;flex-direction:column;max-width:100%;max-height:100%;background-color:var(--mk-surface);color:var(--mk-text);box-shadow:var(--mk-shadow-xl);outline:none;transition:transform var(--mk-duration-normal) var(--mk-ease-emphasized)}:host([data-side=end]) .mk-drawer__panel{top:0;inset-inline-end:0;bottom:0;width:var(--_size, 20rem);border-inline-start:var(--mk-border-width) solid var(--mk-border-subtle);transform:translate(100%)}:host([data-side=start]) .mk-drawer__panel{top:0;inset-inline-start:0;bottom:0;width:var(--_size, 20rem);border-inline-end:var(--mk-border-width) solid var(--mk-border-subtle);transform:translate(-100%)}:host([data-side=end]:dir(rtl):not(.mk-drawer--open)) .mk-drawer__panel{transform:translate(-100%)}:host([data-side=start]:dir(rtl):not(.mk-drawer--open)) .mk-drawer__panel{transform:translate(100%)}:host([data-side=top]) .mk-drawer__panel{top:0;left:0;right:0;height:var(--_size, 20rem);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle);transform:translateY(-100%)}:host([data-side=bottom]) .mk-drawer__panel{bottom:0;left:0;right:0;height:var(--_size, 20rem);border-top:var(--mk-border-width) solid var(--mk-border-subtle);transform:translateY(100%)}:host(.mk-drawer--open) .mk-drawer__panel{transform:none}.mk-drawer__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-4) var(--mk-space-5);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle);background-color:var(--mk-surface)}.mk-drawer__title{flex:1;min-width:0;margin: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-drawer__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-drawer__close:hover{color:var(--mk-text);background-color:var(--mk-hover-overlay)}.mk-drawer__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-drawer__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-drawer__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-drawer__footer:empty{display:none}@media(prefers-reduced-motion:reduce){.mk-drawer__backdrop,.mk-drawer__panel,.mk-drawer__close{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDrawer, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-drawer', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-drawer',
+                        '[class.mk-drawer--open]': 'open()',
+                        '[attr.data-side]': 'side()',
+                        '[attr.inert]': "open() ? null : ''",
+                        '(keydown.escape)': 'onEscape($event)',
+                    }, template: "@if (hasBackdrop()) {\n  <div class=\"mk-drawer__backdrop\" (click)=\"onBackdrop()\"></div>\n}\n\n<aside\n  #panel\n  class=\"mk-drawer__panel\"\n  role=\"dialog\"\n  [attr.aria-modal]=\"hasBackdrop() ? 'true' : null\"\n  [attr.aria-label]=\"!heading() ? ariaLabel() || null : null\"\n  [attr.aria-labelledby]=\"heading() ? titleId : null\"\n  [style.--_size]=\"size()\"\n  tabindex=\"-1\"\n>\n  @if (heading() || !hideClose()) {\n    <header class=\"mk-drawer__header\">\n      @if (heading(); as h) {\n        <h2 class=\"mk-drawer__title\" [id]=\"titleId\">{{ h }}</h2>\n      }\n      <ng-content select=\"[mkDrawerHeader]\" />\n      @if (!hideClose()) {\n        <button\n          type=\"button\"\n          class=\"mk-drawer__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-drawer__body\">\n    <ng-content />\n  </div>\n\n  <footer class=\"mk-drawer__footer\">\n    <ng-content select=\"[mkDrawerFooter]\" />\n  </footer>\n</aside>\n", styles: [":host{position:fixed;inset:0;z-index:var(--mk-z-drawer);pointer-events:none;font-family:var(--mk-font-sans)}:host(.mk-drawer--open){pointer-events:auto}.mk-drawer__backdrop{position:absolute;inset:0;background-color:var(--mk-overlay-scrim);opacity:0;transition:opacity var(--mk-duration-normal) var(--mk-ease-standard)}:host(.mk-drawer--open) .mk-drawer__backdrop{opacity:1}.mk-drawer__panel{position:absolute;display:flex;flex-direction:column;max-width:100%;max-height:100%;background-color:var(--mk-surface);color:var(--mk-text);box-shadow:var(--mk-shadow-xl);outline:none;transition:transform var(--mk-duration-normal) var(--mk-ease-emphasized)}:host([data-side=end]) .mk-drawer__panel{top:0;inset-inline-end:0;bottom:0;width:var(--_size, 20rem);border-inline-start:var(--mk-border-width) solid var(--mk-border-subtle);transform:translate(100%)}:host([data-side=start]) .mk-drawer__panel{top:0;inset-inline-start:0;bottom:0;width:var(--_size, 20rem);border-inline-end:var(--mk-border-width) solid var(--mk-border-subtle);transform:translate(-100%)}:host([data-side=end]:dir(rtl):not(.mk-drawer--open)) .mk-drawer__panel{transform:translate(-100%)}:host([data-side=start]:dir(rtl):not(.mk-drawer--open)) .mk-drawer__panel{transform:translate(100%)}:host([data-side=top]) .mk-drawer__panel{top:0;left:0;right:0;height:var(--_size, 20rem);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle);transform:translateY(-100%)}:host([data-side=bottom]) .mk-drawer__panel{bottom:0;left:0;right:0;height:var(--_size, 20rem);border-top:var(--mk-border-width) solid var(--mk-border-subtle);transform:translateY(100%)}:host(.mk-drawer--open) .mk-drawer__panel{transform:none}.mk-drawer__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-4) var(--mk-space-5);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle);background-color:var(--mk-surface)}.mk-drawer__title{flex:1;min-width:0;margin: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-drawer__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-drawer__close:hover{color:var(--mk-text);background-color:var(--mk-hover-overlay)}.mk-drawer__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-drawer__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-drawer__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-drawer__footer:empty{display:none}@media(prefers-reduced-motion:reduce){.mk-drawer__backdrop,.mk-drawer__panel,.mk-drawer__close{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], trapFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "trapFocus", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], hideClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideClose", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }] } });
+
+/**
+ * Toolbar — a horizontal action bar: content flows on the start side, anything
+ * marked `mkToolbarEnd` is pushed to the end. Handy above tables and lists for
+ * a title/search on the left and actions on the right.
+ *
+ * The projected controls are ordinary tab stops (no roving focus), so this is a
+ * layout container, not an ARIA `toolbar` widget.
+ *
+ * ```html
+ * <mk-toolbar bordered aria-label="Users actions">
+ *   <strong>Users</strong>
+ *   <span mkToolbarEnd>
+ *     <button mkButton variant="outline">Export</button>
+ *     <button mkButton>New user</button>
+ *   </span>
+ * </mk-toolbar>
+ * ```
+ */
+class MkToolbar {
+    /** Wrap the bar in a themed, bordered surface. */
+    bordered = input(false, { ...(ngDevMode ? { debugName: "bordered" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Accessible name (also promotes the bar to an ARIA `group`). */
+    ariaLabel = input('', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MkToolbar, isStandalone: true, selector: "mk-toolbar", inputs: { bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.mk-toolbar--bordered": "bordered()", "attr.role": "ariaLabel() ? 'group' : null", "attr.aria-label": "ariaLabel() || null" }, classAttribute: "mk-toolbar" }, ngImport: i0, template: "<div class=\"mk-toolbar__start\">\n  <ng-content />\n</div>\n<div class=\"mk-toolbar__end\">\n  <ng-content select=\"[mkToolbarEnd]\" />\n</div>\n", styles: [":host{display:flex;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);font-family:var(--mk-font-sans);color:var(--mk-text)}:host(.mk-toolbar--bordered){background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border-subtle);border-radius:var(--mk-radius-md)}.mk-toolbar__start{display:flex;align-items:center;gap:var(--mk-space-2);flex:1 1 auto;min-width:0;flex-wrap:wrap}.mk-toolbar__end{display:flex;align-items:center;gap:var(--mk-space-2);flex:none}.mk-toolbar__end:empty{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkToolbar, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-toolbar',
+                        '[class.mk-toolbar--bordered]': 'bordered()',
+                        '[attr.role]': "ariaLabel() ? 'group' : null",
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                    }, template: "<div class=\"mk-toolbar__start\">\n  <ng-content />\n</div>\n<div class=\"mk-toolbar__end\">\n  <ng-content select=\"[mkToolbarEnd]\" />\n</div>\n", styles: [":host{display:flex;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);font-family:var(--mk-font-sans);color:var(--mk-text)}:host(.mk-toolbar--bordered){background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border-subtle);border-radius:var(--mk-radius-md)}.mk-toolbar__start{display:flex;align-items:center;gap:var(--mk-space-2);flex:1 1 auto;min-width:0;flex-wrap:wrap}.mk-toolbar__end{display:flex;align-items:center;gap:var(--mk-space-2);flex:none}.mk-toolbar__end:empty{display:none}\n"] }]
+        }], propDecorators: { bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }] } });
+
+/**
+ * PageHeader — the standard heading block at the top of an admin/CMS page: an
+ * optional breadcrumb, a page title with optional description and inline meta
+ * (badges/status), a right-aligned actions cluster, and an optional tab row
+ * beneath. Everything but the title/description is projected, so it composes
+ * with `mk-breadcrumb`, `mk-tabs`, buttons, badges, etc.
+ *
+ * Slots: `[mkPageHeaderBreadcrumb]`, `[mkPageHeaderMeta]` (beside the title),
+ * `[mkPageHeaderActions]` (right), `[mkPageHeaderTabs]` (below).
+ *
+ * ```html
+ * <mk-page-header heading="Articles" description="Manage your published posts.">
+ *   <mk-breadcrumb mkPageHeaderBreadcrumb …></mk-breadcrumb>
+ *   <mk-badge mkPageHeaderMeta tone="success">Live</mk-badge>
+ *   <div mkPageHeaderActions>
+ *     <button mkButton variant="outline">Import</button>
+ *     <button mkButton>New article</button>
+ *   </div>
+ * </mk-page-header>
+ * ```
+ */
+class MkPageHeader {
+    /** The page title (rendered as an `<h1>`). */
+    heading = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+    /** Supporting description under the title. */
+    description = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkPageHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkPageHeader, isStandalone: true, selector: "mk-page-header", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "mk-page-header" }, ngImport: i0, template: "<div class=\"mk-page-header__breadcrumb\">\n  <ng-content select=\"[mkPageHeaderBreadcrumb]\" />\n</div>\n\n<div class=\"mk-page-header__main\">\n  <div class=\"mk-page-header__media\">\n    <ng-content select=\"[mkPageHeaderMedia]\" />\n  </div>\n  <div class=\"mk-page-header__heading\">\n    <div class=\"mk-page-header__title-row\">\n      @if (heading(); as h) {\n        <h1 class=\"mk-page-header__title\">{{ h }}</h1>\n      }\n      <div class=\"mk-page-header__meta\">\n        <ng-content select=\"[mkPageHeaderMeta]\" />\n      </div>\n    </div>\n    @if (description(); as d) {\n      <p class=\"mk-page-header__description\">{{ d }}</p>\n    }\n  </div>\n\n  <div class=\"mk-page-header__actions\">\n    <ng-content select=\"[mkPageHeaderActions]\" />\n  </div>\n</div>\n\n<div class=\"mk-page-header__tabs\">\n  <ng-content select=\"[mkPageHeaderTabs]\" />\n</div>\n", styles: [":host{display:block;font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-page-header__breadcrumb{margin-bottom:var(--mk-space-2)}.mk-page-header__breadcrumb:empty{display:none}.mk-page-header__main{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--mk-space-4);flex-wrap:wrap}.mk-page-header__heading{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--mk-space-1)}.mk-page-header__title-row{display:flex;align-items:center;gap:var(--mk-space-3);flex-wrap:wrap}.mk-page-header__title{margin:0;font-size:var(--mk-font-size-2xl);font-weight:var(--mk-font-weight-bold);line-height:var(--mk-line-height-tight);letter-spacing:var(--mk-letter-spacing-tight);color:var(--mk-text)}.mk-page-header__meta{display:inline-flex;align-items:center;gap:var(--mk-space-2)}.mk-page-header__meta:empty{display:none}.mk-page-header__description{margin:0;max-width:68ch;font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-normal);color:var(--mk-text-muted)}.mk-page-header__actions{flex:none;display:flex;align-items:center;gap:var(--mk-space-2);flex-wrap:wrap}.mk-page-header__actions:empty{display:none}.mk-page-header__tabs{margin-top:var(--mk-space-4)}.mk-page-header__tabs:empty{display:none}.mk-page-header__media{display:flex;align-items:center;flex-shrink:0}.mk-page-header__media:empty{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkPageHeader, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-page-header', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'mk-page-header' }, template: "<div class=\"mk-page-header__breadcrumb\">\n  <ng-content select=\"[mkPageHeaderBreadcrumb]\" />\n</div>\n\n<div class=\"mk-page-header__main\">\n  <div class=\"mk-page-header__media\">\n    <ng-content select=\"[mkPageHeaderMedia]\" />\n  </div>\n  <div class=\"mk-page-header__heading\">\n    <div class=\"mk-page-header__title-row\">\n      @if (heading(); as h) {\n        <h1 class=\"mk-page-header__title\">{{ h }}</h1>\n      }\n      <div class=\"mk-page-header__meta\">\n        <ng-content select=\"[mkPageHeaderMeta]\" />\n      </div>\n    </div>\n    @if (description(); as d) {\n      <p class=\"mk-page-header__description\">{{ d }}</p>\n    }\n  </div>\n\n  <div class=\"mk-page-header__actions\">\n    <ng-content select=\"[mkPageHeaderActions]\" />\n  </div>\n</div>\n\n<div class=\"mk-page-header__tabs\">\n  <ng-content select=\"[mkPageHeaderTabs]\" />\n</div>\n", styles: [":host{display:block;font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-page-header__breadcrumb{margin-bottom:var(--mk-space-2)}.mk-page-header__breadcrumb:empty{display:none}.mk-page-header__main{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--mk-space-4);flex-wrap:wrap}.mk-page-header__heading{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--mk-space-1)}.mk-page-header__title-row{display:flex;align-items:center;gap:var(--mk-space-3);flex-wrap:wrap}.mk-page-header__title{margin:0;font-size:var(--mk-font-size-2xl);font-weight:var(--mk-font-weight-bold);line-height:var(--mk-line-height-tight);letter-spacing:var(--mk-letter-spacing-tight);color:var(--mk-text)}.mk-page-header__meta{display:inline-flex;align-items:center;gap:var(--mk-space-2)}.mk-page-header__meta:empty{display:none}.mk-page-header__description{margin:0;max-width:68ch;font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-normal);color:var(--mk-text-muted)}.mk-page-header__actions{flex:none;display:flex;align-items:center;gap:var(--mk-space-2);flex-wrap:wrap}.mk-page-header__actions:empty{display:none}.mk-page-header__tabs{margin-top:var(--mk-space-4)}.mk-page-header__tabs:empty{display:none}.mk-page-header__media{display:flex;align-items:center;flex-shrink:0}.mk-page-header__media:empty{display:none}\n"] }]
+        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
+
+/**
+ * CommandPalette — a modal ⌘K/Ctrl+K menu for fast, keyboard-first actions and
+ * navigation. Supply a flat `commands` list (optionally grouped); the palette
+ * filters as you type, groups results, and runs the chosen command. Implements
+ * the ARIA combobox + listbox pattern with full keyboard support and focus
+ * trapping.
+ *
+ * Mount it once near your app root and bind `open` (the built-in hotkey toggles
+ * it, or open it yourself).
+ *
+ * ```html
+ * <mk-command-palette [(open)]="paletteOpen" [commands]="commands"
+ *   (commandSelected)="run($event)" />
+ * ```
+ */
+class MkCommandPalette {
+    document = inject(DOCUMENT);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    i18n = inject(MK_I18N);
+    panelRef = viewChild('panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
+    inputRef = viewChild('input', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    /** Whether the palette is open (two-way). */
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** The commands to search and run. */
+    commands = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "commands" }] : /* istanbul ignore next */ []));
+    /** Search field placeholder. */
+    placeholder = input(this.i18n.commandPalettePlaceholder, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Message shown when nothing matches. */
+    emptyMessage = input(this.i18n.noResults, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    /** Toggle open with ⌘K / Ctrl+K anywhere. */
+    hotkey = input(true, { ...(ngDevMode ? { debugName: "hotkey" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Emits the chosen command (its own `run` callback also fires). */
+    commandSelected = output();
+    query = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    listId = mkUniqueId('mk-cmdk-list');
+    focusTrap;
+    scrollLocked = false;
+    previouslyFocused = null;
+    /** Commands matching the current query (label + keywords + group). */
+    filtered = computed(() => {
+        const q = this.query().trim().toLowerCase();
+        const list = this.commands();
+        if (!q)
+            return list;
+        return list.filter((c) => `${c.label} ${c.keywords ?? ''} ${c.group ?? ''}`
+            .toLowerCase()
+            .includes(q));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []));
+    /** Filtered commands bucketed into ordered groups (flat index preserved). */
+    grouped = computed(() => {
+        const groups = [];
+        this.filtered().forEach((cmd, index) => {
+            const name = cmd.group ?? '';
+            let g = groups.find((x) => x.name === name);
+            if (!g) {
+                g = { name, items: [] };
+                groups.push(g);
+            }
+            g.items.push({ cmd, index });
+        });
+        return groups;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "grouped" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const isOpen = this.open();
+            if (!this.isBrowser)
+                return;
+            queueMicrotask(() => this.sync(isOpen));
+        });
+        // Keep the active option visible while the list scrolls under 70vh.
+        // Synchronous on purpose: on an index change the option elements already
+        // exist, and the getElementById chain no-ops for the open-with-index-0
+        // case where the list has not rendered yet. (A queueMicrotask here raced
+        // test schedulers and bought nothing.)
+        effect(() => {
+            const index = this.activeIndex();
+            if (!this.isBrowser || !this.open() || index < 0)
+                return;
+            this.document
+                .getElementById(this.optionId(index))
+                ?.scrollIntoView?.({ block: 'nearest' });
+        });
+    }
+    optionId(index) {
+        return `${this.listId}-opt-${index}`;
+    }
+    groupId(index) {
+        return `${this.listId}-group-${index}`;
+    }
+    sync(isOpen) {
+        const panel = this.panelRef()?.nativeElement;
+        if (isOpen) {
+            this.previouslyFocused = this.document.activeElement;
+            this.query.set('');
+            this.activeIndex.set(this.firstEnabled());
+            this.document.body.style.setProperty('overflow', 'hidden');
+            this.scrollLocked = true;
+            if (panel) {
+                this.focusTrap = new MkFocusTrap(panel);
+                this.focusTrap.activate();
+            }
+            this.inputRef()?.nativeElement.focus();
+        }
+        else {
+            this.focusTrap?.release();
+            this.focusTrap = undefined;
+            if (this.scrollLocked) {
+                this.document.body.style.removeProperty('overflow');
+                this.scrollLocked = false;
+            }
+            this.previouslyFocused?.focus?.();
+        }
+    }
+    /**
+     * Release the scroll lock + focus trap if the palette is destroyed while
+     * open (e.g. a command triggered a route navigation).
+     */
+    ngOnDestroy() {
+        this.focusTrap?.release();
+        this.focusTrap = undefined;
+        if (this.scrollLocked) {
+            this.document.body.style.removeProperty('overflow');
+            this.scrollLocked = false;
+        }
+    }
+    onGlobalKey(event) {
+        const e = event;
+        if (this.hotkey() && (e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
+            e.preventDefault();
+            this.open.update((v) => !v);
+        }
+    }
+    onInput(event) {
+        this.query.set(event.target.value);
+        this.activeIndex.set(this.firstEnabled());
+    }
+    onKeydown(event) {
+        const e = event;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                this.move(1);
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                this.move(-1);
+                break;
+            case 'Home':
+                e.preventDefault();
+                this.activeIndex.set(this.firstEnabled());
+                break;
+            case 'End':
+                e.preventDefault();
+                this.activeIndex.set(this.lastEnabled());
+                break;
+            case 'Enter':
+                e.preventDefault();
+                if (this.activeIndex() >= 0)
+                    this.select(this.activeIndex());
+                break;
+            case 'Escape':
+                e.preventDefault();
+                this.close();
+                break;
+        }
+    }
+    select(index) {
+        const cmd = this.filtered()[index];
+        if (!cmd || cmd.disabled)
+            return;
+        this.commandSelected.emit(cmd);
+        cmd.run?.();
+        this.close();
+    }
+    close() {
+        this.open.set(false);
+    }
+    move(delta) {
+        const list = this.filtered();
+        if (!list.length)
+            return;
+        let i = this.activeIndex();
+        for (let step = 0; step < list.length; step++) {
+            i = (i + delta + list.length) % list.length;
+            if (!list[i].disabled) {
+                this.activeIndex.set(i);
+                return;
+            }
+        }
+    }
+    firstEnabled() {
+        return this.filtered().findIndex((c) => !c.disabled);
+    }
+    lastEnabled() {
+        const list = this.filtered();
+        for (let i = list.length - 1; i >= 0; i--) {
+            if (!list[i].disabled)
+                return i;
+        }
+        return -1;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkCommandPalette, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkCommandPalette, isStandalone: true, selector: "mk-command-palette", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, commands: { classPropertyName: "commands", publicName: "commands", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, hotkey: { classPropertyName: "hotkey", publicName: "hotkey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", commandSelected: "commandSelected" }, host: { listeners: { "document:keydown": "onGlobalKey($event)" }, properties: { "class.mk-command-palette--open": "open()", "attr.inert": "open() ? null : ''" }, classAttribute: "mk-command-palette" }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mk-cmdk__backdrop\" (click)=\"close()\"></div>\n\n<div\n  #panel\n  class=\"mk-cmdk__panel\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-label]=\"i18n.commandPaletteLabel\"\n>\n  <div class=\"mk-cmdk__search\">\n    <mk-icon class=\"mk-cmdk__search-icon\" name=\"search\" [size]=\"18\" />\n    <input\n      #input\n      type=\"text\"\n      class=\"mk-cmdk__input\"\n      role=\"combobox\"\n      autocomplete=\"off\"\n      aria-expanded=\"true\"\n      [attr.aria-controls]=\"listId\"\n      aria-autocomplete=\"list\"\n      [attr.aria-activedescendant]=\"\n        activeIndex() >= 0 ? optionId(activeIndex()) : null\n      \"\n      [placeholder]=\"placeholder()\"\n      [value]=\"query()\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeydown($event)\"\n    />\n  </div>\n\n  <ul class=\"mk-cmdk__list\" [id]=\"listId\" role=\"listbox\">\n    @for (group of grouped(); track group.name; let gi = $index) {\n      @if (group.name) {\n        <li\n          class=\"mk-cmdk__group-section\"\n          role=\"group\"\n          [attr.aria-labelledby]=\"groupId(gi)\"\n        >\n          <div class=\"mk-cmdk__group\" [id]=\"groupId(gi)\">{{ group.name }}</div>\n          <ul class=\"mk-cmdk__group-items\" role=\"none\">\n            @for (entry of group.items; track entry.cmd.id) {\n              <ng-container\n                [ngTemplateOutlet]=\"optionTpl\"\n                [ngTemplateOutletContext]=\"{ $implicit: entry }\"\n              />\n            }\n          </ul>\n        </li>\n      } @else {\n        @for (entry of group.items; track entry.cmd.id) {\n          <ng-container\n            [ngTemplateOutlet]=\"optionTpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: entry }\"\n          />\n        }\n      }\n    } @empty {\n      <li class=\"mk-cmdk__empty\">{{ emptyMessage() }}</li>\n    }\n  </ul>\n\n  <div class=\"mk-cmdk__sr\" role=\"status\">\n    {{ i18n.resultsCount(filtered().length) }}\n  </div>\n</div>\n\n<ng-template #optionTpl let-entry>\n  <li\n    class=\"mk-cmdk__option\"\n    [id]=\"optionId(entry.index)\"\n    role=\"option\"\n    [attr.aria-selected]=\"entry.index === activeIndex()\"\n    [attr.aria-disabled]=\"entry.cmd.disabled || null\"\n    [class.mk-cmdk__option--active]=\"entry.index === activeIndex()\"\n    [class.mk-cmdk__option--disabled]=\"entry.cmd.disabled\"\n    (mousemove)=\"!entry.cmd.disabled && activeIndex.set(entry.index)\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"select(entry.index)\"\n  >\n    @if (entry.cmd.icon) {\n      <mk-icon class=\"mk-cmdk__option-icon\" [name]=\"entry.cmd.icon\" [size]=\"18\" />\n    }\n    <span class=\"mk-cmdk__option-label\">\n      {{ entry.cmd.label }}\n      @if (entry.cmd.hint) {\n        <span class=\"mk-cmdk__option-hint\">{{ entry.cmd.hint }}</span>\n      }\n    </span>\n    @if (entry.cmd.shortcut) {\n      <kbd class=\"mk-cmdk__shortcut\">{{ entry.cmd.shortcut }}</kbd>\n    }\n  </li>\n</ng-template>\n", styles: [":host{position:fixed;inset:0;z-index:var(--mk-z-dialog);display:flex;align-items:flex-start;justify-content:center;padding:12vh var(--mk-space-4) var(--mk-space-4);pointer-events:none;font-family:var(--mk-font-sans)}:host(.mk-command-palette--open){pointer-events:auto}.mk-cmdk__backdrop{position:absolute;inset:0;background-color:var(--mk-overlay-scrim);opacity:0;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-command-palette--open) .mk-cmdk__backdrop{opacity:1}.mk-cmdk__panel{position:relative;display:flex;flex-direction:column;width:min(40rem,100%);max-height:70vh;overflow:hidden;background-color:var(--mk-surface);color:var(--mk-text);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-xl);opacity:0;transform:translateY(-8px) scale(.98);transition:opacity var(--mk-duration-fast) var(--mk-ease-out),transform var(--mk-duration-fast) var(--mk-ease-emphasized)}:host(.mk-command-palette--open) .mk-cmdk__panel{opacity:1;transform:none}.mk-cmdk__search{display:flex;align-items:center;gap:var(--mk-space-3);flex-shrink:0;padding:0 var(--mk-space-4);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-cmdk__search-icon{flex:none;color:var(--mk-text-subtle)}.mk-cmdk__input{flex:1 1 auto;min-width:0;height:3.25rem;padding:0;background:transparent;border:0;outline:none;color:var(--mk-text);font-family:inherit;font-size:var(--mk-font-size-lg)}.mk-cmdk__input::placeholder{color:var(--mk-text-subtle)}.mk-cmdk__list{flex:1 1 auto;min-height:0;overflow-y:auto;margin:0;padding:var(--mk-space-2);list-style:none}.mk-cmdk__group-items{margin:0;padding:0;list-style:none}.mk-cmdk__group{padding:var(--mk-space-2) var(--mk-space-2) var(--mk-space-1);font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold);letter-spacing:var(--mk-letter-spacing-wide);text-transform:uppercase;color:var(--mk-text-subtle)}.mk-cmdk__option{display:flex;align-items:center;gap:var(--mk-space-3);padding:var(--mk-space-2) var(--mk-space-3);border-radius:var(--mk-radius-sm);color:var(--mk-text);cursor:pointer;-webkit-user-select:none;user-select:none}.mk-cmdk__option--active{background-color:var(--mk-selected-bg);color:var(--mk-selected-text)}.mk-cmdk__option--disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-cmdk__option-icon{flex:none;color:var(--mk-text-muted)}.mk-cmdk__option--active .mk-cmdk__option-icon{color:currentColor}.mk-cmdk__option-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-cmdk__option-hint{margin-inline-start:var(--mk-space-2);color:var(--mk-text-subtle);font-size:var(--mk-font-size-sm)}.mk-cmdk__shortcut{flex:none;padding:2px var(--mk-space-2);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-sm);background-color:var(--mk-surface-2);color:var(--mk-text-muted);font-family:var(--mk-font-mono);font-size:var(--mk-font-size-xs);line-height:1.4}.mk-cmdk__empty{padding:var(--mk-space-6) var(--mk-space-3);text-align:center;color:var(--mk-text-subtle);font-size:var(--mk-font-size-md)}.mk-cmdk__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.mk-cmdk__backdrop,.mk-cmdk__panel{transition:none}}\n"], dependencies: [{ kind: "component", type: MkIcon, selector: "mk-icon", inputs: ["name", "size", "label"] }, { 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: MkCommandPalette, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-command-palette', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MkIcon, NgTemplateOutlet], host: {
+                        class: 'mk-command-palette',
+                        '[class.mk-command-palette--open]': 'open()',
+                        '[attr.inert]': "open() ? null : ''",
+                        '(document:keydown)': 'onGlobalKey($event)',
+                    }, template: "<div class=\"mk-cmdk__backdrop\" (click)=\"close()\"></div>\n\n<div\n  #panel\n  class=\"mk-cmdk__panel\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-label]=\"i18n.commandPaletteLabel\"\n>\n  <div class=\"mk-cmdk__search\">\n    <mk-icon class=\"mk-cmdk__search-icon\" name=\"search\" [size]=\"18\" />\n    <input\n      #input\n      type=\"text\"\n      class=\"mk-cmdk__input\"\n      role=\"combobox\"\n      autocomplete=\"off\"\n      aria-expanded=\"true\"\n      [attr.aria-controls]=\"listId\"\n      aria-autocomplete=\"list\"\n      [attr.aria-activedescendant]=\"\n        activeIndex() >= 0 ? optionId(activeIndex()) : null\n      \"\n      [placeholder]=\"placeholder()\"\n      [value]=\"query()\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeydown($event)\"\n    />\n  </div>\n\n  <ul class=\"mk-cmdk__list\" [id]=\"listId\" role=\"listbox\">\n    @for (group of grouped(); track group.name; let gi = $index) {\n      @if (group.name) {\n        <li\n          class=\"mk-cmdk__group-section\"\n          role=\"group\"\n          [attr.aria-labelledby]=\"groupId(gi)\"\n        >\n          <div class=\"mk-cmdk__group\" [id]=\"groupId(gi)\">{{ group.name }}</div>\n          <ul class=\"mk-cmdk__group-items\" role=\"none\">\n            @for (entry of group.items; track entry.cmd.id) {\n              <ng-container\n                [ngTemplateOutlet]=\"optionTpl\"\n                [ngTemplateOutletContext]=\"{ $implicit: entry }\"\n              />\n            }\n          </ul>\n        </li>\n      } @else {\n        @for (entry of group.items; track entry.cmd.id) {\n          <ng-container\n            [ngTemplateOutlet]=\"optionTpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: entry }\"\n          />\n        }\n      }\n    } @empty {\n      <li class=\"mk-cmdk__empty\">{{ emptyMessage() }}</li>\n    }\n  </ul>\n\n  <div class=\"mk-cmdk__sr\" role=\"status\">\n    {{ i18n.resultsCount(filtered().length) }}\n  </div>\n</div>\n\n<ng-template #optionTpl let-entry>\n  <li\n    class=\"mk-cmdk__option\"\n    [id]=\"optionId(entry.index)\"\n    role=\"option\"\n    [attr.aria-selected]=\"entry.index === activeIndex()\"\n    [attr.aria-disabled]=\"entry.cmd.disabled || null\"\n    [class.mk-cmdk__option--active]=\"entry.index === activeIndex()\"\n    [class.mk-cmdk__option--disabled]=\"entry.cmd.disabled\"\n    (mousemove)=\"!entry.cmd.disabled && activeIndex.set(entry.index)\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"select(entry.index)\"\n  >\n    @if (entry.cmd.icon) {\n      <mk-icon class=\"mk-cmdk__option-icon\" [name]=\"entry.cmd.icon\" [size]=\"18\" />\n    }\n    <span class=\"mk-cmdk__option-label\">\n      {{ entry.cmd.label }}\n      @if (entry.cmd.hint) {\n        <span class=\"mk-cmdk__option-hint\">{{ entry.cmd.hint }}</span>\n      }\n    </span>\n    @if (entry.cmd.shortcut) {\n      <kbd class=\"mk-cmdk__shortcut\">{{ entry.cmd.shortcut }}</kbd>\n    }\n  </li>\n</ng-template>\n", styles: [":host{position:fixed;inset:0;z-index:var(--mk-z-dialog);display:flex;align-items:flex-start;justify-content:center;padding:12vh var(--mk-space-4) var(--mk-space-4);pointer-events:none;font-family:var(--mk-font-sans)}:host(.mk-command-palette--open){pointer-events:auto}.mk-cmdk__backdrop{position:absolute;inset:0;background-color:var(--mk-overlay-scrim);opacity:0;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-command-palette--open) .mk-cmdk__backdrop{opacity:1}.mk-cmdk__panel{position:relative;display:flex;flex-direction:column;width:min(40rem,100%);max-height:70vh;overflow:hidden;background-color:var(--mk-surface);color:var(--mk-text);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-xl);opacity:0;transform:translateY(-8px) scale(.98);transition:opacity var(--mk-duration-fast) var(--mk-ease-out),transform var(--mk-duration-fast) var(--mk-ease-emphasized)}:host(.mk-command-palette--open) .mk-cmdk__panel{opacity:1;transform:none}.mk-cmdk__search{display:flex;align-items:center;gap:var(--mk-space-3);flex-shrink:0;padding:0 var(--mk-space-4);border-bottom:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-cmdk__search-icon{flex:none;color:var(--mk-text-subtle)}.mk-cmdk__input{flex:1 1 auto;min-width:0;height:3.25rem;padding:0;background:transparent;border:0;outline:none;color:var(--mk-text);font-family:inherit;font-size:var(--mk-font-size-lg)}.mk-cmdk__input::placeholder{color:var(--mk-text-subtle)}.mk-cmdk__list{flex:1 1 auto;min-height:0;overflow-y:auto;margin:0;padding:var(--mk-space-2);list-style:none}.mk-cmdk__group-items{margin:0;padding:0;list-style:none}.mk-cmdk__group{padding:var(--mk-space-2) var(--mk-space-2) var(--mk-space-1);font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold);letter-spacing:var(--mk-letter-spacing-wide);text-transform:uppercase;color:var(--mk-text-subtle)}.mk-cmdk__option{display:flex;align-items:center;gap:var(--mk-space-3);padding:var(--mk-space-2) var(--mk-space-3);border-radius:var(--mk-radius-sm);color:var(--mk-text);cursor:pointer;-webkit-user-select:none;user-select:none}.mk-cmdk__option--active{background-color:var(--mk-selected-bg);color:var(--mk-selected-text)}.mk-cmdk__option--disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-cmdk__option-icon{flex:none;color:var(--mk-text-muted)}.mk-cmdk__option--active .mk-cmdk__option-icon{color:currentColor}.mk-cmdk__option-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-cmdk__option-hint{margin-inline-start:var(--mk-space-2);color:var(--mk-text-subtle);font-size:var(--mk-font-size-sm)}.mk-cmdk__shortcut{flex:none;padding:2px var(--mk-space-2);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-sm);background-color:var(--mk-surface-2);color:var(--mk-text-muted);font-family:var(--mk-font-mono);font-size:var(--mk-font-size-xs);line-height:1.4}.mk-cmdk__empty{padding:var(--mk-space-6) var(--mk-space-3);text-align:center;color:var(--mk-text-subtle);font-size:var(--mk-font-size-md)}.mk-cmdk__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.mk-cmdk__backdrop,.mk-cmdk__panel{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], commands: [{ type: i0.Input, args: [{ isSignal: true, alias: "commands", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], hotkey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hotkey", required: false }] }], commandSelected: [{ type: i0.Output, args: ["commandSelected"] }] } });
+
+/**
+ * Splitter — two resizable panes with a draggable, keyboard-operable separator
+ * (ARIA `separator` with `aria-valuenow`). `horizontal` places the panes
+ * side-by-side (a vertical handle); `vertical` stacks them (a horizontal
+ * handle). The start pane's size is a two-way `position` model (percent).
+ *
+ * Project the panes with `mkSplitterStart` / `mkSplitterEnd`:
+ * ```html
+ * <mk-splitter [(position)]="split" [min]="20">
+ *   <nav mkSplitterStart>…</nav>
+ *   <main mkSplitterEnd>…</main>
+ * </mk-splitter>
+ * ```
+ * Drag the handle, or focus it and use Arrow keys (Home/End jump to min/max).
+ */
+class MkSplitter {
+    host = inject(ElementRef);
+    i18n = inject(MK_I18N);
+    /** `horizontal` = side-by-side; `vertical` = stacked. */
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /** Two-way position of the separator = start-pane size, in percent (0–100). */
+    position = model(50, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /** Minimum start-pane size (percent). */
+    min = input(10, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Maximum start-pane size (percent). */
+    max = input(90, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Keyboard resize increment (percent). */
+    step = input(5, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Disable resizing. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Accessible label for the separator. */
+    ariaLabel = input(this.i18n.resizePanes, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    dragging = false;
+    /** Clamped size actually applied (defends against out-of-range inputs). */
+    clampedSize = computed(() => Math.min(this.max(), Math.max(this.min(), this.position())), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clampedSize" }] : /* istanbul ignore next */ []));
+    onPointerdown(event) {
+        if (this.disabled() || event.button !== 0)
+            return;
+        event.preventDefault();
+        this.dragging = true;
+        try {
+            event.target.setPointerCapture(event.pointerId);
+        }
+        catch {
+            // Pointer already lifted (fast tap) — nothing left to capture.
+        }
+    }
+    onPointermove(event) {
+        if (!this.dragging)
+            return;
+        const rect = this.host.nativeElement.getBoundingClientRect();
+        const pct = this.orientation() === 'vertical'
+            ? ((event.clientY - rect.top) / rect.height) * 100
+            : ((event.clientX - rect.left) / rect.width) * 100;
+        this.setSize(pct);
+    }
+    onPointerup(event) {
+        if (!this.dragging)
+            return;
+        this.dragging = false;
+        event.target.releasePointerCapture?.(event.pointerId);
+    }
+    onKeydown(event) {
+        if (this.disabled())
+            return;
+        const vertical = this.orientation() === 'vertical';
+        const dec = vertical ? 'ArrowUp' : 'ArrowLeft';
+        const inc = vertical ? 'ArrowDown' : 'ArrowRight';
+        switch (event.key) {
+            case dec:
+                event.preventDefault();
+                this.setSize(this.clampedSize() - this.step());
+                break;
+            case inc:
+                event.preventDefault();
+                this.setSize(this.clampedSize() + this.step());
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.setSize(this.min());
+                break;
+            case 'End':
+                event.preventDefault();
+                this.setSize(this.max());
+                break;
+        }
+    }
+    setSize(pct) {
+        const next = Math.round(Math.min(this.max(), Math.max(this.min(), pct)));
+        if (next !== this.position())
+            this.position.set(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkSplitter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MkSplitter, isStandalone: true, selector: "mk-splitter", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { position: "positionChange" }, host: { properties: { "class.mk-splitter--vertical": "orientation() === 'vertical'", "class.mk-splitter--disabled": "disabled()" }, classAttribute: "mk-splitter" }, ngImport: i0, template: "<div class=\"mk-splitter__pane mk-splitter__pane--start\" [style.flex-basis.%]=\"clampedSize()\">\n  <ng-content select=\"[mkSplitterStart]\" />\n</div>\n\n<div\n  class=\"mk-splitter__separator\"\n  role=\"separator\"\n  tabindex=\"0\"\n  [attr.aria-orientation]=\"orientation() === 'vertical' ? 'horizontal' : 'vertical'\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-valuenow]=\"clampedSize()\"\n  [attr.aria-valuemin]=\"min()\"\n  [attr.aria-valuemax]=\"max()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  (pointerdown)=\"onPointerdown($event)\"\n  (pointermove)=\"onPointermove($event)\"\n  (pointerup)=\"onPointerup($event)\"\n  (pointercancel)=\"onPointerup($event)\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <span class=\"mk-splitter__grip\" aria-hidden=\"true\"></span>\n</div>\n\n<div class=\"mk-splitter__pane mk-splitter__pane--end\">\n  <ng-content select=\"[mkSplitterEnd]\" />\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:row;width:100%;min-height:0;font-family:var(--mk-font-sans)}:host(.mk-splitter--vertical){flex-direction:column}.mk-splitter__pane{min-width:0;min-height:0;overflow:auto}.mk-splitter__pane--start{flex:0 0 auto}.mk-splitter__pane--end{flex:1 1 0}.mk-splitter__separator{flex:none;position:relative;display:grid;place-items:center;background-color:var(--mk-border-subtle);touch-action:none;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}@media(pointer:coarse){.mk-splitter__separator:before{content:\"\";position:absolute;inset:min(0px,(100% - 24px) / 2)}}.mk-splitter__separator:hover,.mk-splitter__separator:focus-visible{background-color:var(--mk-primary)}.mk-splitter__separator:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);outline-offset:-2px}:host:not(.mk-splitter--vertical) .mk-splitter__separator{width:7px;cursor:col-resize}:host(.mk-splitter--vertical) .mk-splitter__separator{height:7px;cursor:row-resize}:host(.mk-splitter--disabled) .mk-splitter__separator{cursor:default;pointer-events:none}.mk-splitter__grip{background-color:var(--mk-surface);border-radius:var(--mk-radius-pill);opacity:.9}:host:not(.mk-splitter--vertical) .mk-splitter__grip{width:3px;height:1.75rem}:host(.mk-splitter--vertical) .mk-splitter__grip{width:1.75rem;height:3px}@media(prefers-reduced-motion:reduce){.mk-splitter__separator{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkSplitter, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-splitter', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-splitter',
+                        '[class.mk-splitter--vertical]': "orientation() === 'vertical'",
+                        '[class.mk-splitter--disabled]': 'disabled()',
+                    }, template: "<div class=\"mk-splitter__pane mk-splitter__pane--start\" [style.flex-basis.%]=\"clampedSize()\">\n  <ng-content select=\"[mkSplitterStart]\" />\n</div>\n\n<div\n  class=\"mk-splitter__separator\"\n  role=\"separator\"\n  tabindex=\"0\"\n  [attr.aria-orientation]=\"orientation() === 'vertical' ? 'horizontal' : 'vertical'\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-valuenow]=\"clampedSize()\"\n  [attr.aria-valuemin]=\"min()\"\n  [attr.aria-valuemax]=\"max()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  (pointerdown)=\"onPointerdown($event)\"\n  (pointermove)=\"onPointermove($event)\"\n  (pointerup)=\"onPointerup($event)\"\n  (pointercancel)=\"onPointerup($event)\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <span class=\"mk-splitter__grip\" aria-hidden=\"true\"></span>\n</div>\n\n<div class=\"mk-splitter__pane mk-splitter__pane--end\">\n  <ng-content select=\"[mkSplitterEnd]\" />\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:row;width:100%;min-height:0;font-family:var(--mk-font-sans)}:host(.mk-splitter--vertical){flex-direction:column}.mk-splitter__pane{min-width:0;min-height:0;overflow:auto}.mk-splitter__pane--start{flex:0 0 auto}.mk-splitter__pane--end{flex:1 1 0}.mk-splitter__separator{flex:none;position:relative;display:grid;place-items:center;background-color:var(--mk-border-subtle);touch-action:none;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}@media(pointer:coarse){.mk-splitter__separator:before{content:\"\";position:absolute;inset:min(0px,(100% - 24px) / 2)}}.mk-splitter__separator:hover,.mk-splitter__separator:focus-visible{background-color:var(--mk-primary)}.mk-splitter__separator:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);outline-offset:-2px}:host:not(.mk-splitter--vertical) .mk-splitter__separator{width:7px;cursor:col-resize}:host(.mk-splitter--vertical) .mk-splitter__separator{height:7px;cursor:row-resize}:host(.mk-splitter--disabled) .mk-splitter__separator{cursor:default;pointer-events:none}.mk-splitter__grip{background-color:var(--mk-surface);border-radius:var(--mk-radius-pill);opacity:.9}:host:not(.mk-splitter--vertical) .mk-splitter__grip{width:3px;height:1.75rem}:host(.mk-splitter--vertical) .mk-splitter__grip{width:1.75rem;height:3px}@media(prefers-reduced-motion:reduce){.mk-splitter__separator{transition:none}}\n"] }]
+        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }, { type: i0.Output, args: ["positionChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/** A speed-dial action button projected into {@link MkFab}. */
+class MkFabAction {
+    el = inject(ElementRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkFabAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MkFabAction, isStandalone: true, selector: "[mkFabAction]", host: { attributes: { "type": "button" }, classAttribute: "mk-fab__action" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkFabAction, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mkFabAction]',
+                    host: { class: 'mk-fab__action', type: 'button' },
+                }]
+        }] });
+/**
+ * FAB — a floating action button, fixed to a corner (or `static` for inline
+ * use). Project the icon as content and set `label` for the accessible name
+ * (shown too when `extended`). Add `mkFabAction` buttons to turn it into a
+ * speed-dial that reveals them on toggle.
+ *
+ * ```html
+ * <mk-fab label="Create" position="bottom-end">
+ *   <svg>…</svg>
+ *   <button mkFabAction (click)="newDoc()">Doc</button>
+ *   <button mkFabAction (click)="newFolder()">Folder</button>
+ * </mk-fab>
+ * ```
+ */
+class MkFab {
+    actions = contentChildren(MkFabAction, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+    trigger = viewChild('trigger', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+    injector = inject(Injector);
+    i18n = inject(MK_I18N);
+    /** Id of the actions container, referenced by the trigger's aria-controls. */
+    actionsId = mkUniqueId('mk-fab-actions');
+    /** Corner placement (or `static` to render inline). */
+    position = input('bottom-end', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /** Semantic tone. */
+    tone = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /** Size scale. */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Accessible label (and visible text when `extended`). */
+    label = input(this.i18n.fabLabel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Render as a pill with the label beside the icon. */
+    extended = input(false, { ...(ngDevMode ? { debugName: "extended" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Disable the button. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Two-way open state of the speed-dial. */
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Emitted when the FAB is activated (only when it has no actions). */
+    action = output();
+    hasActions = computed(() => this.actions().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasActions" }] : /* istanbul ignore next */ []));
+    onClick() {
+        if (this.disabled())
+            return;
+        if (this.hasActions()) {
+            const opening = !this.open();
+            this.open.set(opening);
+            if (opening) {
+                // The actions container un-hides on the next render (zoneless);
+                // only then can the first action receive focus.
+                afterNextRender(() => this.actions()[0]?.el.nativeElement.focus(), { injector: this.injector });
+            }
+        }
+        else {
+            this.action.emit();
+        }
+    }
+    onKeydown(event) {
+        if (event.key === 'Escape' && this.open()) {
+            event.preventDefault();
+            this.open.set(false);
+            // Focus may sit on an action inside the now-hidden container —
+            // return it to the trigger instead of letting it drop to <body>.
+            this.trigger()?.nativeElement.focus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkFab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkFab, isStandalone: true, selector: "mk-fab", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", action: "action" }, host: { properties: { "attr.data-position": "position()", "class.mk-fab--extended": "extended()", "class.mk-fab--open": "open()" }, classAttribute: "mk-fab" }, queries: [{ propertyName: "actions", predicate: MkFabAction, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  #trigger\n  type=\"button\"\n  class=\"mk-fab__button\"\n  [attr.data-tone]=\"tone()\"\n  [attr.aria-label]=\"label()\"\n  [attr.aria-expanded]=\"hasActions() ? open() : null\"\n  [attr.aria-controls]=\"hasActions() ? actionsId : null\"\n  [disabled]=\"disabled()\"\n  (click)=\"onClick()\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <span class=\"mk-fab__icon\"><ng-content /></span>\n  @if (extended()) {\n    <span class=\"mk-fab__label\">{{ label() }}</span>\n  }\n</button>\n\n<!-- After the trigger in DOM so Tab reaches the revealed actions next;\n     the visual stacking is restored with flex column-reverse in fab.scss. -->\n<div\n  class=\"mk-fab__actions\"\n  [id]=\"actionsId\"\n  [attr.hidden]=\"hasActions() && open() ? null : ''\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <ng-content select=\"[mkFabAction]\" />\n</div>\n", styles: ["@charset \"UTF-8\";:host{position:fixed;z-index:var(--mk-z-sticky, 100);display:flex;flex-direction:column-reverse;align-items:flex-end;gap:var(--mk-space-2)}:host([data-position=bottom-end]){bottom:calc(var(--mk-space-5) + env(safe-area-inset-bottom,0px));inset-inline-end:calc(var(--mk-space-5) + env(safe-area-inset-right,0px))}:host([data-position=bottom-start]){bottom:calc(var(--mk-space-5) + env(safe-area-inset-bottom,0px));inset-inline-start:calc(var(--mk-space-5) + env(safe-area-inset-left,0px));align-items:flex-start}:host([data-position=top-end]){top:calc(var(--mk-space-5) + env(safe-area-inset-top,0px));inset-inline-end:calc(var(--mk-space-5) + env(safe-area-inset-right,0px));flex-direction:column}:host([data-position=top-start]){top:calc(var(--mk-space-5) + env(safe-area-inset-top,0px));inset-inline-start:calc(var(--mk-space-5) + env(safe-area-inset-left,0px));align-items:flex-start;flex-direction:column}:host([data-position=static]){position:static;display:inline-flex}.mk-fab__button{display:inline-flex;align-items:center;justify-content:center;gap:var(--mk-space-2);height:3.5rem;min-width:3.5rem;padding:0;color:var(--mk-primary-contrast);background-color:var(--mk-primary);border:none;border-radius:var(--mk-radius-circle);box-shadow:var(--mk-shadow-lg);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-md);font-weight:var(--mk-font-weight-medium);cursor:pointer;transition:filter var(--mk-duration-fast) var(--mk-ease-standard),transform var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-fab--extended) .mk-fab__button{padding:0 var(--mk-space-5);border-radius:var(--mk-radius-pill)}.mk-fab__button:hover:not(:disabled){filter:brightness(1.06)}.mk-fab__button:active:not(:disabled){transform:scale(.96)}.mk-fab__button:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-fab__button:disabled{opacity:.6;cursor:not-allowed}.mk-fab__button[data-tone=success]{background-color:var(--mk-success);color:var(--mk-success-contrast)}.mk-fab__button[data-tone=warning]{background-color:var(--mk-warning);color:var(--mk-warning-contrast)}.mk-fab__button[data-tone=danger]{background-color:var(--mk-danger);color:var(--mk-danger-contrast)}.mk-fab__button[data-tone=info]{background-color:var(--mk-info);color:var(--mk-info-contrast)}.mk-fab__button[data-tone=neutral]{background-color:var(--mk-surface);color:var(--mk-text);box-shadow:var(--mk-shadow-md);border:var(--mk-border-width) solid var(--mk-border)}.mk-fab__icon{display:grid;place-items:center;line-height:0;font-size:var(--mk-font-size-xl, 1.5rem)}.mk-fab__label{white-space:nowrap}.mk-fab__actions{display:flex;flex-direction:column;align-items:inherit;gap:var(--mk-space-2)}.mk-fab__actions[hidden]{display:none}:host ::ng-deep .mk-fab__action{display:inline-flex;align-items:center;justify-content:center;gap:var(--mk-space-2);height:2.75rem;min-width:2.75rem;padding:0 var(--mk-space-3);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-pill);box-shadow:var(--mk-shadow-md);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-sm);cursor:pointer;animation:mk-fab-in var(--mk-duration-fast) var(--mk-ease-out)}::ng-deep .mk-fab__action:hover{background-color:var(--mk-surface-2)}@keyframes mk-fab-in{0%{opacity:0;transform:translateY(var(--mk-space-2)) scale(.9)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.mk-fab__button,:host ::ng-deep .mk-fab__action{transition:none;animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkFab, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-fab', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-fab',
+                        '[attr.data-position]': 'position()',
+                        '[class.mk-fab--extended]': 'extended()',
+                        '[class.mk-fab--open]': 'open()',
+                    }, template: "<button\n  #trigger\n  type=\"button\"\n  class=\"mk-fab__button\"\n  [attr.data-tone]=\"tone()\"\n  [attr.aria-label]=\"label()\"\n  [attr.aria-expanded]=\"hasActions() ? open() : null\"\n  [attr.aria-controls]=\"hasActions() ? actionsId : null\"\n  [disabled]=\"disabled()\"\n  (click)=\"onClick()\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <span class=\"mk-fab__icon\"><ng-content /></span>\n  @if (extended()) {\n    <span class=\"mk-fab__label\">{{ label() }}</span>\n  }\n</button>\n\n<!-- After the trigger in DOM so Tab reaches the revealed actions next;\n     the visual stacking is restored with flex column-reverse in fab.scss. -->\n<div\n  class=\"mk-fab__actions\"\n  [id]=\"actionsId\"\n  [attr.hidden]=\"hasActions() && open() ? null : ''\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <ng-content select=\"[mkFabAction]\" />\n</div>\n", styles: ["@charset \"UTF-8\";:host{position:fixed;z-index:var(--mk-z-sticky, 100);display:flex;flex-direction:column-reverse;align-items:flex-end;gap:var(--mk-space-2)}:host([data-position=bottom-end]){bottom:calc(var(--mk-space-5) + env(safe-area-inset-bottom,0px));inset-inline-end:calc(var(--mk-space-5) + env(safe-area-inset-right,0px))}:host([data-position=bottom-start]){bottom:calc(var(--mk-space-5) + env(safe-area-inset-bottom,0px));inset-inline-start:calc(var(--mk-space-5) + env(safe-area-inset-left,0px));align-items:flex-start}:host([data-position=top-end]){top:calc(var(--mk-space-5) + env(safe-area-inset-top,0px));inset-inline-end:calc(var(--mk-space-5) + env(safe-area-inset-right,0px));flex-direction:column}:host([data-position=top-start]){top:calc(var(--mk-space-5) + env(safe-area-inset-top,0px));inset-inline-start:calc(var(--mk-space-5) + env(safe-area-inset-left,0px));align-items:flex-start;flex-direction:column}:host([data-position=static]){position:static;display:inline-flex}.mk-fab__button{display:inline-flex;align-items:center;justify-content:center;gap:var(--mk-space-2);height:3.5rem;min-width:3.5rem;padding:0;color:var(--mk-primary-contrast);background-color:var(--mk-primary);border:none;border-radius:var(--mk-radius-circle);box-shadow:var(--mk-shadow-lg);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-md);font-weight:var(--mk-font-weight-medium);cursor:pointer;transition:filter var(--mk-duration-fast) var(--mk-ease-standard),transform var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-fab--extended) .mk-fab__button{padding:0 var(--mk-space-5);border-radius:var(--mk-radius-pill)}.mk-fab__button:hover:not(:disabled){filter:brightness(1.06)}.mk-fab__button:active:not(:disabled){transform:scale(.96)}.mk-fab__button:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-fab__button:disabled{opacity:.6;cursor:not-allowed}.mk-fab__button[data-tone=success]{background-color:var(--mk-success);color:var(--mk-success-contrast)}.mk-fab__button[data-tone=warning]{background-color:var(--mk-warning);color:var(--mk-warning-contrast)}.mk-fab__button[data-tone=danger]{background-color:var(--mk-danger);color:var(--mk-danger-contrast)}.mk-fab__button[data-tone=info]{background-color:var(--mk-info);color:var(--mk-info-contrast)}.mk-fab__button[data-tone=neutral]{background-color:var(--mk-surface);color:var(--mk-text);box-shadow:var(--mk-shadow-md);border:var(--mk-border-width) solid var(--mk-border)}.mk-fab__icon{display:grid;place-items:center;line-height:0;font-size:var(--mk-font-size-xl, 1.5rem)}.mk-fab__label{white-space:nowrap}.mk-fab__actions{display:flex;flex-direction:column;align-items:inherit;gap:var(--mk-space-2)}.mk-fab__actions[hidden]{display:none}:host ::ng-deep .mk-fab__action{display:inline-flex;align-items:center;justify-content:center;gap:var(--mk-space-2);height:2.75rem;min-width:2.75rem;padding:0 var(--mk-space-3);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-pill);box-shadow:var(--mk-shadow-md);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-sm);cursor:pointer;animation:mk-fab-in var(--mk-duration-fast) var(--mk-ease-out)}::ng-deep .mk-fab__action:hover{background-color:var(--mk-surface-2)}@keyframes mk-fab-in{0%{opacity:0;transform:translateY(var(--mk-space-2)) scale(.9)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.mk-fab__button,:host ::ng-deep .mk-fab__action{transition:none;animation:none}}\n"] }]
+        }], propDecorators: { actions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MkFabAction), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], extended: [{ type: i0.Input, args: [{ isSignal: true, alias: "extended", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], action: [{ type: i0.Output, args: ["action"] }] } });
+
+/**
+ * BackToTop — a floating button that appears once the page (or a scroll target)
+ * has scrolled past `threshold`, and smooth-scrolls back to the top on click.
+ *
+ * ```html
+ * <mk-back-to-top [threshold]="600" />
+ * ```
+ * Pass `[target]` to watch/scroll a specific scroll container instead of the
+ * window.
+ */
+class MkBackToTop {
+    document = inject(DOCUMENT);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    i18n = inject(MK_I18N);
+    /** Scroll distance (px) before the button appears. */
+    threshold = input(400, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "threshold" }] : /* istanbul ignore next */ []));
+    /** Optional scroll container; defaults to the window. */
+    target = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
+    /** Accessible label. */
+    ariaLabel = input(this.i18n.backToTop, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Smooth-scroll on click. Ignored under `prefers-reduced-motion: reduce`
+     * (programmatic `scrollTo` is not toned down by browsers, so the component
+     * falls back to an instant jump itself).
+     */
+    smooth = input(true, { ...(ngDevMode ? { debugName: "smooth" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    scrollY = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollY" }] : /* istanbul ignore next */ []));
+    visible = computed(() => this.scrollY() > this.threshold(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    scrollSource;
+    onScroll = () => {
+        const el = this.target();
+        this.scrollY.set(el
+            ? el.scrollTop
+            : (this.document.defaultView?.scrollY ??
+                this.document.documentElement.scrollTop));
+    };
+    constructor() {
+        // afterNextRender runs after inputs are bound, so `target()` is resolved.
+        afterNextRender(() => {
+            if (!this.isBrowser)
+                return;
+            this.scrollSource = this.target() ?? this.document.defaultView ?? undefined;
+            this.scrollSource?.addEventListener('scroll', this.onScroll, {
+                passive: true,
+            });
+            this.onScroll();
+        });
+    }
+    scrollToTop() {
+        const el = this.target();
+        const behavior = this.smooth() && !this.prefersReducedMotion() ? 'smooth' : 'auto';
+        if (el) {
+            el.scrollTo({ top: 0, behavior });
+            this.focusScrollTarget(el);
+        }
+        else {
+            this.document.defaultView?.scrollTo({ top: 0, behavior });
+            const doc = (this.document.scrollingElement ??
+                this.document.documentElement);
+            if (doc)
+                this.focusScrollTarget(doc);
+        }
+    }
+    /**
+     * Once the page is back at the top the button hides itself, which would
+     * silently drop keyboard focus on `<body>` (WCAG 2.4.3). Move focus to the
+     * scroll container instead, so the tab sequence resumes from the top.
+     */
+    focusScrollTarget(el) {
+        if (!el.hasAttribute('tabindex'))
+            el.setAttribute('tabindex', '-1');
+        el.focus({ preventScroll: true });
+    }
+    /** `prefers-reduced-motion: reduce`, SSR-safe. */
+    prefersReducedMotion() {
+        const win = this.document.defaultView;
+        return (!!win &&
+            typeof win.matchMedia === 'function' &&
+            win.matchMedia('(prefers-reduced-motion: reduce)').matches);
+    }
+    ngOnDestroy() {
+        this.scrollSource?.removeEventListener('scroll', this.onScroll);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBackToTop, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MkBackToTop, isStandalone: true, selector: "mk-back-to-top", inputs: { threshold: { classPropertyName: "threshold", publicName: "threshold", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, smooth: { classPropertyName: "smooth", publicName: "smooth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.mk-back-to-top--visible": "visible()", "attr.hidden": "visible() ? null : \"\"" }, classAttribute: "mk-back-to-top" }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"mk-back-to-top__button\"\n  [attr.aria-label]=\"ariaLabel()\"\n  (click)=\"scrollToTop()\"\n>\n  <svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"none\"\n    stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n    stroke-linejoin=\"round\" aria-hidden=\"true\">\n    <path d=\"M12 19V5M5 12l7-7 7 7\" />\n  </svg>\n</button>\n", styles: [":host{position:fixed;bottom:var(--mk-space-5);inset-inline-end:var(--mk-space-5);z-index:var(--mk-z-sticky, 100)}.mk-back-to-top__button{display:grid;place-items:center;width:2.75rem;height:2.75rem;color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-circle);box-shadow:var(--mk-shadow-lg);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),transform var(--mk-duration-fast) var(--mk-ease-standard)}.mk-back-to-top__button:hover{background-color:var(--mk-surface-2);transform:translateY(-2px)}.mk-back-to-top__button: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-back-to-top__button{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBackToTop, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-back-to-top', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-back-to-top',
+                        '[class.mk-back-to-top--visible]': 'visible()',
+                        '[attr.hidden]': 'visible() ? null : ""',
+                    }, template: "<button\n  type=\"button\"\n  class=\"mk-back-to-top__button\"\n  [attr.aria-label]=\"ariaLabel()\"\n  (click)=\"scrollToTop()\"\n>\n  <svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"none\"\n    stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n    stroke-linejoin=\"round\" aria-hidden=\"true\">\n    <path d=\"M12 19V5M5 12l7-7 7 7\" />\n  </svg>\n</button>\n", styles: [":host{position:fixed;bottom:var(--mk-space-5);inset-inline-end:var(--mk-space-5);z-index:var(--mk-z-sticky, 100)}.mk-back-to-top__button{display:grid;place-items:center;width:2.75rem;height:2.75rem;color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-circle);box-shadow:var(--mk-shadow-lg);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),transform var(--mk-duration-fast) var(--mk-ease-standard)}.mk-back-to-top__button:hover{background-color:var(--mk-surface-2);transform:translateY(-2px)}.mk-back-to-top__button: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-back-to-top__button{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { threshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "threshold", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], smooth: [{ type: i0.Input, args: [{ isSignal: true, alias: "smooth", required: false }] }] } });
+
+/**
+ * ScrollArea — a scroll container that hides the native scrollbar and renders
+ * its own themed overlay bars (à la Radix ScrollArea). The projected content
+ * scrolls inside a real, keyboard-focusable viewport, so native wheel / arrow
+ * scrolling keeps working; the custom bars are decorative (`aria-hidden`) and
+ * draggable.
+ *
+ * ```html
+ * <mk-scroll-area maxHeight="20rem">
+ *   <p>…lots of content…</p>
+ * </mk-scroll-area>
+ * ```
+ *
+ * Set `orientation` to `horizontal` / `both` for a horizontal bar, and
+ * `hideDelay` to auto-hide the bars after inactivity (`0` = always visible).
+ */
+class MkScrollArea {
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    viewportRef = viewChild.required('viewport', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportRef" }] : /* istanbul ignore next */ []));
+    contentRef = viewChild.required('content', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentRef" }] : /* istanbul ignore next */ []));
+    /** Optional CSS max-height for the viewport, e.g. `'20rem'`. */
+    maxHeight = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible name for the scrollable viewport. When set, the viewport is
+     * exposed as a labelled `region` landmark — recommended, since the viewport
+     * is keyboard-focusable (`tabindex="0"`) and a focusable scroll container
+     * should have an accessible name. When empty, no role / label is added.
+     */
+    ariaLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Which axes render a custom bar. */
+    orientation = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /** Auto-hide the bars after this many ms of inactivity (`0` = always on). */
+    hideDelay = input(1000, { ...(ngDevMode ? { debugName: "hideDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    viewportId = mkUniqueId('mk-scroll-area');
+    // Live viewport metrics, mirrored into signals so the thumbs recompute.
+    scrollTop = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollTop" }] : /* istanbul ignore next */ []));
+    scrollLeft = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollLeft" }] : /* istanbul ignore next */ []));
+    scrollHeight = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollHeight" }] : /* istanbul ignore next */ []));
+    scrollWidth = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollWidth" }] : /* istanbul ignore next */ []));
+    clientHeight = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clientHeight" }] : /* istanbul ignore next */ []));
+    clientWidth = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clientWidth" }] : /* istanbul ignore next */ []));
+    showVertical = computed(() => this.orientation() !== 'horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showVertical" }] : /* istanbul ignore next */ []));
+    showHorizontal = computed(() => this.orientation() !== 'vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showHorizontal" }] : /* istanbul ignore next */ []));
+    /** The viewport actually overflows on the given axis. */
+    vScrollable = computed(() => this.scrollHeight() - this.clientHeight() > 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "vScrollable" }] : /* istanbul ignore next */ []));
+    hScrollable = computed(() => this.scrollWidth() - this.clientWidth() > 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hScrollable" }] : /* istanbul ignore next */ []));
+    /** Thumb length as a fraction of the track (`clientHeight / scrollHeight`). */
+    vThumbSize = computed(() => {
+        const sh = this.scrollHeight();
+        return sh > 0 ? Math.min(1, this.clientHeight() / sh) : 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "vThumbSize" }] : /* istanbul ignore next */ []));
+    hThumbSize = computed(() => {
+        const sw = this.scrollWidth();
+        return sw > 0 ? Math.min(1, this.clientWidth() / sw) : 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hThumbSize" }] : /* istanbul ignore next */ []));
+    /** Thumb position as a fraction of the scroll range (0 = start, 1 = end). */
+    vThumbOffset = computed(() => {
+        const range = this.scrollHeight() - this.clientHeight();
+        return range > 0 ? Math.min(1, Math.max(0, this.scrollTop() / range)) : 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "vThumbOffset" }] : /* istanbul ignore next */ []));
+    hThumbOffset = computed(() => {
+        const range = this.scrollWidth() - this.clientWidth();
+        return range > 0 ? Math.min(1, Math.max(0, this.scrollLeft() / range)) : 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hThumbOffset" }] : /* istanbul ignore next */ []));
+    /** CSS `top` / `left` for the thumb, accounting for its own length. */
+    vThumbTop = computed(() => `calc((100% - ${this.vThumbSize() * 100}%) * ${this.vThumbOffset()})`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "vThumbTop" }] : /* istanbul ignore next */ []));
+    hThumbLeft = computed(() => `calc((100% - ${this.hThumbSize() * 100}%) * ${this.hThumbOffset()})`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hThumbLeft" }] : /* istanbul ignore next */ []));
+    _visible = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_visible" }] : /* istanbul ignore next */ []));
+    /** Whether the bars are currently shown (always true when `hideDelay` is 0). */
+    barsVisible = computed(() => this.hideDelay() === 0 || this._visible(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "barsVisible" }] : /* istanbul ignore next */ []));
+    dragAxis = null;
+    dragStartPointer = 0;
+    dragStartScroll = 0;
+    hideTimer;
+    resizeObserver;
+    scrollRaf = null;
+    constructor() {
+        // Runs after the first render (inputs bound, view children resolved).
+        afterNextRender(() => {
+            if (!this.isBrowser)
+                return;
+            this.measure();
+            const view = this.viewportRef().nativeElement;
+            const content = this.contentRef().nativeElement;
+            if ('ResizeObserver' in window) {
+                this.resizeObserver = new ResizeObserver(() => this.measure());
+                this.resizeObserver.observe(view);
+                this.resizeObserver.observe(content);
+            }
+        });
+    }
+    /** Snapshot the viewport's scroll metrics into signals. */
+    measure() {
+        const view = this.viewportRef().nativeElement;
+        this.scrollTop.set(view.scrollTop);
+        this.scrollLeft.set(view.scrollLeft);
+        this.scrollHeight.set(view.scrollHeight);
+        this.scrollWidth.set(view.scrollWidth);
+        this.clientHeight.set(view.clientHeight);
+        this.clientWidth.set(view.clientWidth);
+    }
+    /**
+     * rAF-coalesced (same pattern as `MkScrollspy`): a burst of scroll events
+     * per frame triggers a single batch of layout reads + signal writes, and the
+     * auto-hide idle timer restarts once per flushed frame rather than per raw
+     * event.
+     */
+    onScroll() {
+        if (!this.isBrowser || this.scrollRaf != null)
+            return;
+        this.scrollRaf = requestAnimationFrame(() => {
+            this.scrollRaf = null;
+            this.measure();
+            this.show();
+            this.scheduleHide();
+        });
+    }
+    onEnter() {
+        this.show();
+    }
+    onLeave() {
+        this.scheduleHide();
+    }
+    // --- Thumb dragging -------------------------------------------------------
+    onThumbPointerdown(event, axis) {
+        if (event.button !== 0)
+            return;
+        event.preventDefault();
+        event.stopPropagation(); // don't let the track handler page as well
+        const view = this.viewportRef().nativeElement;
+        this.dragAxis = axis;
+        if (axis === 'vertical') {
+            this.dragStartPointer = event.clientY;
+            this.dragStartScroll = view.scrollTop;
+        }
+        else {
+            this.dragStartPointer = event.clientX;
+            this.dragStartScroll = view.scrollLeft;
+        }
+        try {
+            event.target.setPointerCapture(event.pointerId);
+        }
+        catch {
+            // Pointer already lifted (fast tap) — nothing left to capture.
+        }
+        this.show();
+    }
+    onThumbPointermove(event) {
+        if (!this.dragAxis)
+            return;
+        const view = this.viewportRef().nativeElement;
+        if (this.dragAxis === 'vertical') {
+            const delta = event.clientY - this.dragStartPointer;
+            // A 1px thumb move maps to scrollHeight/clientHeight px of scroll.
+            const scale = this.clientHeight()
+                ? this.scrollHeight() / this.clientHeight()
+                : 0;
+            view.scrollTop = this.dragStartScroll + delta * scale;
+        }
+        else {
+            const delta = event.clientX - this.dragStartPointer;
+            const scale = this.clientWidth()
+                ? this.scrollWidth() / this.clientWidth()
+                : 0;
+            view.scrollLeft = this.dragStartScroll + delta * scale;
+        }
+    }
+    onThumbPointerup(event) {
+        if (!this.dragAxis)
+            return;
+        this.dragAxis = null;
+        event.target.releasePointerCapture?.(event.pointerId);
+        this.scheduleHide();
+    }
+    // --- Track paging ---------------------------------------------------------
+    onTrackPointerdown(event, axis) {
+        if (event.button !== 0)
+            return;
+        const view = this.viewportRef().nativeElement;
+        const rect = event.currentTarget.getBoundingClientRect();
+        if (axis === 'vertical') {
+            const clickPos = event.clientY - rect.top;
+            const thumbLen = rect.height * this.vThumbSize();
+            const thumbStart = this.vThumbOffset() * (rect.height - thumbLen);
+            const page = view.clientHeight * 0.9;
+            if (clickPos < thumbStart)
+                view.scrollTop -= page;
+            else if (clickPos > thumbStart + thumbLen)
+                view.scrollTop += page;
+        }
+        else {
+            const clickPos = event.clientX - rect.left;
+            const thumbLen = rect.width * this.hThumbSize();
+            const thumbStart = this.hThumbOffset() * (rect.width - thumbLen);
+            const page = view.clientWidth * 0.9;
+            if (clickPos < thumbStart)
+                view.scrollLeft -= page;
+            else if (clickPos > thumbStart + thumbLen)
+                view.scrollLeft += page;
+        }
+    }
+    // --- Auto-hide ------------------------------------------------------------
+    show() {
+        if (!this.isBrowser)
+            return;
+        this._visible.set(true);
+        this.clearHideTimer();
+    }
+    scheduleHide() {
+        const delay = this.hideDelay();
+        if (delay === 0 || this.dragAxis)
+            return;
+        this.clearHideTimer();
+        this.hideTimer = setTimeout(() => this._visible.set(false), delay);
+    }
+    clearHideTimer() {
+        if (this.hideTimer !== undefined) {
+            clearTimeout(this.hideTimer);
+            this.hideTimer = undefined;
+        }
+    }
+    ngOnDestroy() {
+        if (this.scrollRaf != null) {
+            cancelAnimationFrame(this.scrollRaf);
+            this.scrollRaf = null;
+        }
+        this.resizeObserver?.disconnect();
+        this.clearHideTimer();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkScrollArea, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkScrollArea, isStandalone: true, selector: "mk-scroll-area", inputs: { maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onEnter()", "mouseleave": "onLeave()" }, classAttribute: "mk-scroll-area" }, viewQueries: [{ propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #viewport\n  [id]=\"viewportId\"\n  class=\"mk-scroll-area__viewport\"\n  tabindex=\"0\"\n  [attr.role]=\"ariaLabel() ? 'region' : null\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [style.max-height]=\"maxHeight() || null\"\n  (scroll)=\"onScroll()\"\n>\n  <div #content class=\"mk-scroll-area__content\">\n    <ng-content />\n  </div>\n</div>\n\n@if (showVertical() && vScrollable()) {\n  <div\n    class=\"mk-scroll-area__scrollbar mk-scroll-area__scrollbar--vertical\"\n    [class.mk-scroll-area__scrollbar--visible]=\"barsVisible()\"\n    aria-hidden=\"true\"\n    (pointerdown)=\"onTrackPointerdown($event, 'vertical')\"\n  >\n    <div\n      class=\"mk-scroll-area__thumb\"\n      [style.height.%]=\"vThumbSize() * 100\"\n      [style.top]=\"vThumbTop()\"\n      (pointerdown)=\"onThumbPointerdown($event, 'vertical')\"\n      (pointermove)=\"onThumbPointermove($event)\"\n      (pointerup)=\"onThumbPointerup($event)\"\n      (pointercancel)=\"onThumbPointerup($event)\"\n    ></div>\n  </div>\n}\n\n@if (showHorizontal() && hScrollable()) {\n  <div\n    class=\"mk-scroll-area__scrollbar mk-scroll-area__scrollbar--horizontal\"\n    [class.mk-scroll-area__scrollbar--visible]=\"barsVisible()\"\n    aria-hidden=\"true\"\n    (pointerdown)=\"onTrackPointerdown($event, 'horizontal')\"\n  >\n    <div\n      class=\"mk-scroll-area__thumb\"\n      [style.width.%]=\"hThumbSize() * 100\"\n      [style.left]=\"hThumbLeft()\"\n      (pointerdown)=\"onThumbPointerdown($event, 'horizontal')\"\n      (pointermove)=\"onThumbPointermove($event)\"\n      (pointerup)=\"onThumbPointerup($event)\"\n      (pointercancel)=\"onThumbPointerup($event)\"\n    ></div>\n  </div>\n}\n", styles: [":host{--_bar-size: .75rem;position:relative;display:block;min-height:0;font-family:var(--mk-font-sans)}.mk-scroll-area__viewport{width:100%;height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none}.mk-scroll-area__viewport::-webkit-scrollbar{display:none}.mk-scroll-area__viewport:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);outline-offset:-2px}.mk-scroll-area__content{min-width:0;min-height:0}.mk-scroll-area__scrollbar{position:absolute;z-index:1;padding:var(--mk-space-1);background-color:transparent;touch-action:none;opacity:0;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard),background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-scroll-area__scrollbar--visible{opacity:1}.mk-scroll-area__scrollbar:hover{background-color:var(--mk-hover-overlay)}.mk-scroll-area__scrollbar--vertical{top:0;inset-inline-end:0;bottom:0;width:var(--_bar-size)}.mk-scroll-area__scrollbar--horizontal{left:0;right:0;bottom:0;height:var(--_bar-size)}.mk-scroll-area__scrollbar--vertical{bottom:var(--_bar-size)}.mk-scroll-area__scrollbar--horizontal{inset-inline-end:var(--_bar-size)}.mk-scroll-area__thumb{position:absolute;border-radius:var(--mk-radius-pill);background-color:var(--mk-scrollbar-thumb, var(--mk-text-muted));transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-scroll-area__thumb:hover,.mk-scroll-area__thumb:active{background-color:var(--mk-scrollbar-thumb-hover, var(--mk-border))}.mk-scroll-area__scrollbar--vertical .mk-scroll-area__thumb{left:var(--mk-space-1);right:var(--mk-space-1);min-height:1.5rem}.mk-scroll-area__scrollbar--horizontal .mk-scroll-area__thumb{top:var(--mk-space-1);bottom:var(--mk-space-1);min-width:1.5rem}@media(prefers-reduced-motion:reduce){.mk-scroll-area__scrollbar,.mk-scroll-area__thumb{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkScrollArea, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-scroll-area', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-scroll-area',
+                        '(mouseenter)': 'onEnter()',
+                        '(mouseleave)': 'onLeave()',
+                    }, template: "<div\n  #viewport\n  [id]=\"viewportId\"\n  class=\"mk-scroll-area__viewport\"\n  tabindex=\"0\"\n  [attr.role]=\"ariaLabel() ? 'region' : null\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [style.max-height]=\"maxHeight() || null\"\n  (scroll)=\"onScroll()\"\n>\n  <div #content class=\"mk-scroll-area__content\">\n    <ng-content />\n  </div>\n</div>\n\n@if (showVertical() && vScrollable()) {\n  <div\n    class=\"mk-scroll-area__scrollbar mk-scroll-area__scrollbar--vertical\"\n    [class.mk-scroll-area__scrollbar--visible]=\"barsVisible()\"\n    aria-hidden=\"true\"\n    (pointerdown)=\"onTrackPointerdown($event, 'vertical')\"\n  >\n    <div\n      class=\"mk-scroll-area__thumb\"\n      [style.height.%]=\"vThumbSize() * 100\"\n      [style.top]=\"vThumbTop()\"\n      (pointerdown)=\"onThumbPointerdown($event, 'vertical')\"\n      (pointermove)=\"onThumbPointermove($event)\"\n      (pointerup)=\"onThumbPointerup($event)\"\n      (pointercancel)=\"onThumbPointerup($event)\"\n    ></div>\n  </div>\n}\n\n@if (showHorizontal() && hScrollable()) {\n  <div\n    class=\"mk-scroll-area__scrollbar mk-scroll-area__scrollbar--horizontal\"\n    [class.mk-scroll-area__scrollbar--visible]=\"barsVisible()\"\n    aria-hidden=\"true\"\n    (pointerdown)=\"onTrackPointerdown($event, 'horizontal')\"\n  >\n    <div\n      class=\"mk-scroll-area__thumb\"\n      [style.width.%]=\"hThumbSize() * 100\"\n      [style.left]=\"hThumbLeft()\"\n      (pointerdown)=\"onThumbPointerdown($event, 'horizontal')\"\n      (pointermove)=\"onThumbPointermove($event)\"\n      (pointerup)=\"onThumbPointerup($event)\"\n      (pointercancel)=\"onThumbPointerup($event)\"\n    ></div>\n  </div>\n}\n", styles: [":host{--_bar-size: .75rem;position:relative;display:block;min-height:0;font-family:var(--mk-font-sans)}.mk-scroll-area__viewport{width:100%;height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none}.mk-scroll-area__viewport::-webkit-scrollbar{display:none}.mk-scroll-area__viewport:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);outline-offset:-2px}.mk-scroll-area__content{min-width:0;min-height:0}.mk-scroll-area__scrollbar{position:absolute;z-index:1;padding:var(--mk-space-1);background-color:transparent;touch-action:none;opacity:0;transition:opacity var(--mk-duration-fast) var(--mk-ease-standard),background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-scroll-area__scrollbar--visible{opacity:1}.mk-scroll-area__scrollbar:hover{background-color:var(--mk-hover-overlay)}.mk-scroll-area__scrollbar--vertical{top:0;inset-inline-end:0;bottom:0;width:var(--_bar-size)}.mk-scroll-area__scrollbar--horizontal{left:0;right:0;bottom:0;height:var(--_bar-size)}.mk-scroll-area__scrollbar--vertical{bottom:var(--_bar-size)}.mk-scroll-area__scrollbar--horizontal{inset-inline-end:var(--_bar-size)}.mk-scroll-area__thumb{position:absolute;border-radius:var(--mk-radius-pill);background-color:var(--mk-scrollbar-thumb, var(--mk-text-muted));transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-scroll-area__thumb:hover,.mk-scroll-area__thumb:active{background-color:var(--mk-scrollbar-thumb-hover, var(--mk-border))}.mk-scroll-area__scrollbar--vertical .mk-scroll-area__thumb{left:var(--mk-space-1);right:var(--mk-space-1);min-height:1.5rem}.mk-scroll-area__scrollbar--horizontal .mk-scroll-area__thumb{top:var(--mk-space-1);bottom:var(--mk-space-1);min-width:1.5rem}@media(prefers-reduced-motion:reduce){.mk-scroll-area__scrollbar,.mk-scroll-area__thumb{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { viewportRef: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], contentRef: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], hideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDelay", required: false }] }] } });
+
+/**
+ * Navigation & Layout component group barrel.
+ *
+ * Re-exports every public symbol of the group via each component folder's
+ * `index.ts`. Not part of the library `public-api` by itself — consumed by the
+ * top-level surface when the group is wired in.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MkAccordion, MkAccordionHeader, MkAccordionItem, MkAppShell, MkBackToTop, MkBreadcrumb, MkBreadcrumbItem, MkCommandPalette, MkDrawer, MkFab, MkFabAction, MkMenu, MkMenuItem, MkMenuTrigger, MkNavGroup, MkNavItem, MkNavList, MkPageHeader, MkPagination, MkScrollArea, MkSplitter, MkStep, MkStepper, MkTab, MkTabs, MkToolbar, MkTree };
+//# sourceMappingURL=mk-kit-ui-navigation.mjs.map