@mk-kit/ui 0.34.1 → 0.36.0

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

@@ -1,7 +1,8 @@
 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 { input, booleanAttribute, signal, ChangeDetectionStrategy, Component, contentChildren, viewChildren, model, effect, inject, Directive, computed, numberAttribute, ElementRef, DOCUMENT, output, Injector, PLATFORM_ID, viewChild, afterNextRender, TemplateRef, linkedSignal } from '@angular/core';
 import { mkUniqueId, MK_I18N, MkAnchoredPanel, MkFocusTrap } from '@mk-kit/ui/core';
 import { NgTemplateOutlet, isPlatformBrowser, isPlatformServer } from '@angular/common';
+import { MkButton } from '@mk-kit/ui/button';
 import { MkIcon } from '@mk-kit/ui/icon';
 
 /**
@@ -450,17 +451,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                     }, 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 }] }] } });
 
+/** Hover dwell before a submenu opens, so sweeping past an item does not flash it. */
+const SUBMENU_HOVER_DELAY = 150;
 /**
  * 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.
  *
+ * With `[mkSubmenuFor]` pointing at a nested `<mk-menu>` the item becomes a
+ * submenu trigger instead: it shows a chevron, exposes `aria-haspopup` /
+ * `aria-expanded`, opens the submenu beside itself on hover, ArrowRight,
+ * Enter, Space or click, and never emits `action`.
+ *
  * ```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>
+ * <mk-menu-item [mkSubmenuFor]="more">More</mk-menu-item>
  * ```
  */
 class MkMenuItem {
@@ -474,21 +483,62 @@ class MkMenuItem {
     /** 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). */
+    /** A nested `mk-menu` this item opens as a submenu. */
+    submenu = input(undefined, { ...(ngDevMode ? { debugName: "submenu" } : /* istanbul ignore next */ {}), alias: 'mkSubmenuFor' });
+    /** Emitted when the item is activated (not for disabled or submenu items). */
     action = output();
+    hoverTimer;
     activate(event) {
         if (this.disabled()) {
             event?.preventDefault();
             event?.stopPropagation();
             return;
         }
+        if (this.submenu()) {
+            // A pointer click keeps focus where it is; keyboard activation (Enter /
+            // Space arrive here through the panel handler without an event) moves
+            // focus into the submenu.
+            this.openSubmenu(!event);
+            return;
+        }
         this.action.emit();
         const href = this.href();
-        this.menu?.close(true);
+        this.menu?.closeAll(true);
         if (href) {
             this.document.defaultView?.location.assign(href);
         }
     }
+    /** Open the submenu beside this item; `focus` moves focus to its first item. */
+    openSubmenu(focus) {
+        const sub = this.submenu();
+        if (!sub || this.disabled())
+            return;
+        this.cancelHover();
+        if (sub.opened()) {
+            if (focus)
+                sub.focusFirstItem();
+            return;
+        }
+        sub.open(this.el.nativeElement, focus ? 'first' : false, this.menu?.submenuPlacement() ?? 'right-start');
+    }
+    onMouseEnter() {
+        if (this.disabled())
+            return;
+        this.menu?.itemHovered(this);
+        if (this.submenu() && !this.submenu().opened()) {
+            this.cancelHover();
+            this.hoverTimer = setTimeout(() => this.openSubmenu(false), SUBMENU_HOVER_DELAY);
+        }
+    }
+    onMouseLeave() {
+        this.cancelHover();
+    }
+    cancelHover() {
+        if (this.hoverTimer) {
+            clearTimeout(this.hoverTimer);
+            this.hoverTimer = undefined;
+        }
+    }
     /** Move DOM focus to this item (roving focus). */
     focusEl() {
         this.el.nativeElement.focus();
@@ -501,8 +551,11 @@ class MkMenuItem {
     text() {
         return (this.el.nativeElement.textContent ?? '').trim().toLowerCase();
     }
+    ngOnDestroy() {
+        this.cancelHover();
+    }
     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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.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 }, submenu: { classPropertyName: "submenu", publicName: "mkSubmenuFor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, host: { attributes: { "role": "menuitem", "tabindex": "-1" }, listeners: { "click": "activate($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "attr.aria-disabled": "disabled() || null", "attr.aria-haspopup": "submenu() ? 'menu' : null", "attr.aria-expanded": "submenu() ? submenu()!.opened() : null", "attr.aria-controls": "submenu()?.panelId ?? null", "class.mk-menu-item--danger": "danger()", "class.mk-menu-item--disabled": "disabled()", "class.mk-menu-item--submenu": "!!submenu()", "class.mk-menu-item--expanded": "submenu()?.opened() ?? false" }, 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@if (submenu()) {\n  <svg\n    class=\"mk-menu-item__chevron\"\n    viewBox=\"0 0 16 16\"\n    width=\"14\"\n    height=\"14\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.75\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"M6 3.5 10.5 8 6 12.5\" />\n  </svg>\n}\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}.mk-menu-item__chevron{flex:none;margin-inline-start:auto;color:var(--mk-text-muted)}:host(:dir(rtl)) .mk-menu-item__chevron{transform:scaleX(-1)}:host(.mk-menu-item--expanded){background:var(--mk-hover-overlay)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkMenuItem, decorators: [{
             type: Component,
@@ -511,11 +564,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         role: 'menuitem',
                         tabindex: '-1',
                         '[attr.aria-disabled]': 'disabled() || null',
+                        '[attr.aria-haspopup]': "submenu() ? 'menu' : null",
+                        '[attr.aria-expanded]': 'submenu() ? submenu()!.opened() : null',
+                        '[attr.aria-controls]': 'submenu()?.panelId ?? null',
                         '[class.mk-menu-item--danger]': 'danger()',
                         '[class.mk-menu-item--disabled]': 'disabled()',
+                        '[class.mk-menu-item--submenu]': '!!submenu()',
+                        '[class.mk-menu-item--expanded]': 'submenu()?.opened() ?? false',
                         '(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"] }] } });
+                        '(mouseenter)': 'onMouseEnter()',
+                        '(mouseleave)': 'onMouseLeave()',
+                    }, 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@if (submenu()) {\n  <svg\n    class=\"mk-menu-item__chevron\"\n    viewBox=\"0 0 16 16\"\n    width=\"14\"\n    height=\"14\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.75\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"M6 3.5 10.5 8 6 12.5\" />\n  </svg>\n}\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}.mk-menu-item__chevron{flex:none;margin-inline-start:auto;color:var(--mk-text-muted)}:host(:dir(rtl)) .mk-menu-item__chevron{transform:scaleX(-1)}:host(.mk-menu-item--expanded){background:var(--mk-hover-overlay)}\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 }] }], submenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkSubmenuFor", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
 
 /**
  * Dropdown menu implementing the ARIA menu pattern (roving focus, Arrow / Home
@@ -533,13 +593,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  *   <mk-menu-item danger (action)="del()">Delete</mk-menu-item>
  * </mk-menu>
  * ```
+ *
+ * **Submenus.** Point an item at a nested menu with `[mkSubmenuFor]`; declare
+ * the nested `<mk-menu>` anywhere inside the parent menu. The submenu opens
+ * beside its item on hover (after a short delay), on ArrowRight / Enter /
+ * Space / click, and closes with ArrowLeft or Escape (returning focus to the
+ * item) — only that level, per the APG menu pattern. Activating any leaf item
+ * closes the whole chain. In RTL the submenu opens on the left and the arrow
+ * keys swap.
+ *
+ * ```html
+ * <mk-menu #menu>
+ *   <mk-menu-item [mkSubmenuFor]="exportMenu">Export</mk-menu-item>
+ *   <mk-menu #exportMenu>
+ *     <mk-menu-item (action)="csv()">CSV</mk-menu-item>
+ *     <mk-menu-item (action)="pdf()">PDF</mk-menu-item>
+ *   </mk-menu>
+ * </mk-menu>
+ * ```
  */
 class MkMenu {
     document = inject(DOCUMENT);
     injector = inject(Injector);
     isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    /** The enclosing menu when this one is a submenu. */
+    parent = inject(MkMenu, { optional: true, skipSelf: true });
     items = contentChildren(MkMenuItem, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    panelRef = viewChild('panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
     /** Stable id for `aria-controls` on the trigger. */
     panelId = mkUniqueId('mk-menu');
     _open = signal(false, /* @ts-ignore */
@@ -555,22 +637,38 @@ class MkMenu {
     /** Viewport point to anchor to (`openAt` / context menu). */
     anchorPoint = signal(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "anchorPoint" }] : /* istanbul ignore next */ []));
+    /** Where the panel sits relative to its anchor (submenus open sideways). */
+    placement = signal('bottom-start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
     triggerEl = null;
     typeahead = '';
     typeaheadTimer;
+    /** Submenus that are currently open under this menu. */
+    openChildren = new Set();
+    /**
+     * Whether this menu is a submenu of another `mk-menu`. Submenus open
+     * sideways, close a single level on Escape, and swap ArrowLeft/ArrowRight.
+     */
+    get isSubmenu() {
+        return this.parent !== null;
+    }
     /**
      * 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).
+     * `placement` overrides the default `bottom-start` (submenus pass
+     * `right-start` / `left-start`).
      */
-    open(trigger, focus = true) {
+    open(trigger, focus = true, placement = 'bottom-start') {
         if (!this.isBrowser || this._open())
             return;
         this.triggerEl = trigger;
         this.anchorEl.set(trigger);
         this.anchorPoint.set(undefined);
+        this.placement.set(placement);
         this._open.set(true);
+        this.parent?.childOpened(this);
         if (focus)
             this.focusAfterOpen(focus === 'last' ? 'last' : 'first');
     }
@@ -586,21 +684,42 @@ class MkMenu {
         this.triggerEl = restoreFocusEl ?? null;
         this.anchorEl.set(undefined);
         this.anchorPoint.set({ x, y });
+        this.placement.set('bottom-start');
         this._open.set(true);
         this.focusAfterOpen('first');
     }
-    /** Close the menu; optionally restore focus to the trigger. */
+    /**
+     * Close this menu (and any submenu open under it); optionally restore focus
+     * to the trigger — for a submenu that is the item it hangs off.
+     */
     close(restoreFocus = true) {
         if (!this._open())
             return;
+        this.closeChildren();
         this._open.set(false);
         this.anchorEl.set(undefined);
         this.anchorPoint.set(undefined);
         const trigger = this.triggerEl;
         this.triggerEl = null;
+        this.parent?.childClosed(this);
         if (restoreFocus)
             trigger?.focus();
     }
+    /**
+     * Close the whole menu chain from the root down — what activating a leaf
+     * item does, wherever in the tree it sits. Focus returns to the root
+     * trigger when `restoreFocus` is set.
+     */
+    closeAll(restoreFocus = true) {
+        this.root().close(restoreFocus);
+    }
+    /** Close every submenu open under this menu, except `keep`. */
+    closeChildren(keep) {
+        for (const child of [...this.openChildren]) {
+            if (child !== keep)
+                child.close(false);
+        }
+    }
     /** Toggle open/closed from a trigger. */
     toggle(trigger, focusFirst = true) {
         if (this._open()) {
@@ -622,6 +741,46 @@ class MkMenu {
     focusLastItem() {
         this.focusLast();
     }
+    /**
+     * Whether `node` lives inside this menu's panel or any submenu open under
+     * it. Submenu panels are separate top-layer elements, so a plain
+     * `contains` on the parent panel would treat clicks in them as outside.
+     */
+    containsTarget(node) {
+        if (!node)
+            return false;
+        if (this.panelRef()?.nativeElement.contains(node))
+            return true;
+        for (const child of this.openChildren) {
+            if (child.containsTarget(node))
+                return true;
+        }
+        return false;
+    }
+    /** Bound for the anchored panel's `keepOpenWhen` (stable identity). */
+    keepOpenWhen = (target) => [...this.openChildren].some((c) => c.containsTarget(target));
+    /**
+     * An item was hovered: close sibling submenus so only the hovered branch
+     * stays open (the item opens its own submenu after a delay).
+     */
+    itemHovered(item) {
+        this.closeChildren(item.submenu());
+    }
+    /** @internal */
+    childOpened(child) {
+        this.closeChildren(child);
+        this.openChildren.add(child);
+    }
+    /** @internal */
+    childClosed(child) {
+        this.openChildren.delete(child);
+    }
+    root() {
+        let m = this;
+        while (m.parent)
+            m = m.parent;
+        return m;
+    }
     /** Focus an item once the panel is in the top layer and painted. */
     focusAfterOpen(which) {
         afterNextRender({
@@ -633,7 +792,27 @@ class MkMenu {
             },
         }, { injector: this.injector });
     }
+    /**
+     * Whether the menu is laid out right-to-left (submenu side + arrow keys).
+     * Read from the trigger's nearest `dir` attribute — the panel itself lives
+     * in the top layer, outside any `dir` container — then from computed style.
+     */
+    isRtl() {
+        // A submenu's trigger is an item inside a teleported panel, so climb to
+        // the root menu, whose trigger sits in the consumer's DOM.
+        const el = this.root().triggerEl ?? this.panelRef()?.nativeElement;
+        if (!el)
+            return this.document.dir === 'rtl';
+        const dir = el.closest('[dir]')?.getAttribute('dir');
+        if (dir)
+            return dir.toLowerCase() === 'rtl';
+        const view = this.document.defaultView;
+        return (view?.getComputedStyle(el).direction ?? 'ltr') === 'rtl';
+    }
     onPanelKeydown(event) {
+        const rtl = this.isRtl();
+        const openKey = rtl ? 'ArrowLeft' : 'ArrowRight';
+        const closeKey = rtl ? 'ArrowRight' : 'ArrowLeft';
         switch (event.key) {
             case 'ArrowDown':
                 event.preventDefault();
@@ -656,13 +835,27 @@ class MkMenu {
                 event.preventDefault();
                 this.activeItem()?.activate();
                 break;
+            case openKey: {
+                const item = this.activeItem();
+                if (item?.submenu()) {
+                    event.preventDefault();
+                    item.openSubmenu(true);
+                }
+                break;
+            }
+            case closeKey:
+                if (this.isSubmenu) {
+                    event.preventDefault();
+                    this.close(true);
+                }
+                break;
             case 'Escape':
                 event.preventDefault();
                 this.close(true);
                 break;
             case 'Tab':
                 event.preventDefault();
-                this.close(true);
+                this.closeAll(true);
                 break;
             default:
                 if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
@@ -670,6 +863,10 @@ class MkMenu {
                 }
         }
     }
+    /** Placement for a submenu hanging off `item`, honouring text direction. */
+    submenuPlacement() {
+        return this.isRtl() ? 'left-start' : 'right-start';
+    }
     enabled() {
         return this.items().filter((i) => !i.disabled());
     }
@@ -718,16 +915,18 @@ class MkMenu {
     ngOnDestroy() {
         if (this.typeaheadTimer)
             clearTimeout(this.typeaheadTimer);
+        if (this._open())
+            this.close(false);
     }
     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 });
+    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 }], viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], exportAs: ["mkMenu"], ngImport: i0, template: "@if (opened()) {\n  <div\n    #panel\n    class=\"mk-menu__panel\"\n    [class.mk-menu__panel--submenu]=\"isSubmenu\"\n    role=\"menu\"\n    [id]=\"panelId\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"anchorEl()\"\n    [anchorRect]=\"anchorPoint()\"\n    [placement]=\"placement()\"\n    [keepOpenWhen]=\"keepOpenWhen\"\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}}.mk-menu__panel--submenu{animation-name:mk-menu-fade}@keyframes mk-menu-fade{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: MkAnchoredPanel, selector: "[mkAnchoredPanel]", inputs: ["mkAnchoredPanelFor", "anchorRect", "placement", "gap", "matchWidth", "flip", "clamp", "keepOpenWhen"], 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 }] }] } });
+                    }, template: "@if (opened()) {\n  <div\n    #panel\n    class=\"mk-menu__panel\"\n    [class.mk-menu__panel--submenu]=\"isSubmenu\"\n    role=\"menu\"\n    [id]=\"panelId\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"anchorEl()\"\n    [anchorRect]=\"anchorPoint()\"\n    [placement]=\"placement()\"\n    [keepOpenWhen]=\"keepOpenWhen\"\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}}.mk-menu__panel--submenu{animation-name:mk-menu-fade}@keyframes mk-menu-fade{0%{opacity:0}to{opacity:1}}\n"] }]
+        }], propDecorators: { items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MkMenuItem), { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
 
 /**
  * Turns its host button into a trigger for an `<mk-menu>`. Wires
@@ -802,6 +1001,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                 }]
         }], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkMenuTriggerFor", required: true }] }] } });
 
+/**
+ * SplitButton — a primary action with an attached menu of alternatives.
+ * The main segment emits `action`; the chevron segment is a menu button
+ * (`mkMenuTriggerFor`) for the `mk-menu` passed in `[menu]`, with the full
+ * keyboard model of the menu trigger (ArrowDown / Enter / Space open and focus
+ * the first item, ArrowUp the last, Escape closes).
+ *
+ * Both segments share `variant`, `tone` and `size`; `disabled` disables both,
+ * `loading` shows the main segment's spinner and disables the chevron.
+ *
+ * ```html
+ * <mk-split-button [menu]="saveMenu" tone="primary" (action)="save()">
+ *   Save
+ * </mk-split-button>
+ * <mk-menu #saveMenu>
+ *   <mk-menu-item (action)="saveAs()">Save as…</mk-menu-item>
+ *   <mk-menu-item (action)="saveTemplate()">Save as template</mk-menu-item>
+ * </mk-menu>
+ * ```
+ */
+class MkSplitButton {
+    i18n = inject(MK_I18N);
+    /** The menu the chevron segment opens. */
+    menu = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []));
+    /** Visual treatment shared by both segments. */
+    variant = input('solid', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Semantic color tone shared by both segments. */
+    tone = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /** Control size shared by both segments. */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Disable both segments. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Spinner on the main segment; the menu segment is disabled meanwhile. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Stretch to the container width (the main segment grows). */
+    fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** `type` of the main segment — `submit` to submit the enclosing form. */
+    type = input('button', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /** Accessible name of the chevron segment. */
+    menuLabel = input(this.i18n.moreActions, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuLabel" }] : /* istanbul ignore next */ []));
+    /** Emitted when the main segment is activated (not while disabled/loading). */
+    action = output();
+    menuDisabled = computed(() => this.disabled() || this.loading(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuDisabled" }] : /* istanbul ignore next */ []));
+    onMain() {
+        if (this.disabled() || this.loading())
+            return;
+        this.action.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkSplitButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MkSplitButton, isStandalone: true, selector: "mk-split-button", inputs: { menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, menuLabel: { classPropertyName: "menuLabel", publicName: "menuLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, host: { attributes: { "role": "group" }, properties: { "class.mk-split-button--block": "fullWidth()", "class.mk-split-button--sm": "size() === 'sm'", "class.mk-split-button--lg": "size() === 'lg'", "class.mk-split-button--outline": "variant() === 'outline'" }, classAttribute: "mk-split-button" }, ngImport: i0, template: "<button\n  mkButton\n  class=\"mk-split-button__main\"\n  [type]=\"type()\"\n  [variant]=\"variant()\"\n  [tone]=\"tone()\"\n  [size]=\"size()\"\n  [disabled]=\"disabled()\"\n  [loading]=\"loading()\"\n  (click)=\"onMain()\"\n>\n  <ng-content />\n</button>\n<button\n  mkButton\n  class=\"mk-split-button__toggle\"\n  type=\"button\"\n  iconOnly\n  [variant]=\"variant()\"\n  [tone]=\"tone()\"\n  [size]=\"size()\"\n  [disabled]=\"menuDisabled()\"\n  [mkMenuTriggerFor]=\"menu()\"\n  [attr.aria-label]=\"menuLabel()\"\n>\n  <svg\n    class=\"mk-split-button__chevron\"\n    viewBox=\"0 0 16 16\"\n    width=\"14\"\n    height=\"14\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.75\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"M3.5 6 8 10.5 12.5 6\" />\n  </svg>\n</button>\n", styles: [":host{display:inline-flex;align-items:stretch;vertical-align:middle;max-width:100%}:host(.mk-split-button--block){display:flex;width:100%}:host .mk-split-button__main{border-start-end-radius:0;border-end-end-radius:0}:host(.mk-split-button--block) .mk-split-button__main{flex:1 1 auto;min-width:0}:host .mk-split-button__toggle{border-start-start-radius:0;border-end-start-radius:0;box-shadow:inset 1px 0 color-mix(in srgb,currentColor 28%,transparent)}:host(:dir(rtl)) .mk-split-button__toggle{box-shadow:inset -1px 0 color-mix(in srgb,currentColor 28%,transparent)}:host(.mk-split-button--outline) .mk-split-button__toggle{margin-inline-start:calc(-1 * var(--mk-border-width));box-shadow:none}:host .mk-split-button__main:focus-visible,:host .mk-split-button__toggle:focus-visible{position:relative;z-index:1}.mk-split-button__chevron{transition:transform var(--mk-duration-fast) var(--mk-ease-standard)}:host .mk-split-button__toggle[aria-expanded=true] .mk-split-button__chevron{transform:rotate(180deg)}@media(prefers-reduced-motion:reduce){.mk-split-button__chevron{transition:none}}\n"], dependencies: [{ kind: "component", type: MkButton, selector: "button[mkButton], a[mkButton]", inputs: ["variant", "tone", "size", "loading", "fullWidth", "iconOnly", "disabled"] }, { kind: "directive", type: MkMenuTrigger, selector: "[mkMenuTriggerFor]", inputs: ["mkMenuTriggerFor"], exportAs: ["mkMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkSplitButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-split-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MkButton, MkMenuTrigger], host: {
+                        class: 'mk-split-button',
+                        role: 'group',
+                        '[class.mk-split-button--block]': 'fullWidth()',
+                        '[class.mk-split-button--sm]': "size() === 'sm'",
+                        '[class.mk-split-button--lg]': "size() === 'lg'",
+                        '[class.mk-split-button--outline]': "variant() === 'outline'",
+                    }, template: "<button\n  mkButton\n  class=\"mk-split-button__main\"\n  [type]=\"type()\"\n  [variant]=\"variant()\"\n  [tone]=\"tone()\"\n  [size]=\"size()\"\n  [disabled]=\"disabled()\"\n  [loading]=\"loading()\"\n  (click)=\"onMain()\"\n>\n  <ng-content />\n</button>\n<button\n  mkButton\n  class=\"mk-split-button__toggle\"\n  type=\"button\"\n  iconOnly\n  [variant]=\"variant()\"\n  [tone]=\"tone()\"\n  [size]=\"size()\"\n  [disabled]=\"menuDisabled()\"\n  [mkMenuTriggerFor]=\"menu()\"\n  [attr.aria-label]=\"menuLabel()\"\n>\n  <svg\n    class=\"mk-split-button__chevron\"\n    viewBox=\"0 0 16 16\"\n    width=\"14\"\n    height=\"14\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.75\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"M3.5 6 8 10.5 12.5 6\" />\n  </svg>\n</button>\n", styles: [":host{display:inline-flex;align-items:stretch;vertical-align:middle;max-width:100%}:host(.mk-split-button--block){display:flex;width:100%}:host .mk-split-button__main{border-start-end-radius:0;border-end-end-radius:0}:host(.mk-split-button--block) .mk-split-button__main{flex:1 1 auto;min-width:0}:host .mk-split-button__toggle{border-start-start-radius:0;border-end-start-radius:0;box-shadow:inset 1px 0 color-mix(in srgb,currentColor 28%,transparent)}:host(:dir(rtl)) .mk-split-button__toggle{box-shadow:inset -1px 0 color-mix(in srgb,currentColor 28%,transparent)}:host(.mk-split-button--outline) .mk-split-button__toggle{margin-inline-start:calc(-1 * var(--mk-border-width));box-shadow:none}:host .mk-split-button__main:focus-visible,:host .mk-split-button__toggle:focus-visible{position:relative;z-index:1}.mk-split-button__chevron{transition:transform var(--mk-duration-fast) var(--mk-ease-standard)}:host .mk-split-button__toggle[aria-expanded=true] .mk-split-button__chevron{transform:rotate(180deg)}@media(prefers-reduced-motion:reduce){.mk-split-button__chevron{transition:none}}\n"] }]
+        }], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], menuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuLabel", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
+
 /** Viewport width (px) at/below which the sidebar becomes an off-canvas drawer. */
 const MOBILE_BREAKPOINT = 1024;
 /**
@@ -891,7 +1160,7 @@ class MkAppShell {
         }
     }
     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 });
+    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}}@media print{:host{min-height:0;background:none}.mk-app-shell__header,.mk-app-shell__sidebar,.mk-app-shell__scrim,.mk-app-shell__skip{display:none}.mk-app-shell__body{display:block;min-height:0}.mk-app-shell__main{padding:0;overflow:visible}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkAppShell, decorators: [{
             type: Component,
@@ -900,7 +1169,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[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"] }]
+                    }, 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}}@media print{:host{min-height:0;background:none}.mk-app-shell__header,.mk-app-shell__sidebar,.mk-app-shell__scrim,.mk-app-shell__skip{display:none}.mk-app-shell__body{display:block;min-height:0}.mk-app-shell__main{padding:0;overflow:visible}}\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"] }] } });
 
 /**
@@ -1684,7 +1953,7 @@ class MkToolbar {
     /** 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 });
+    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}:host ::ng-deep [mkToolbarEnd]{display:inline-flex;align-items:center;gap:var(--mk-space-2)}.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,
@@ -1693,7 +1962,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[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"] }]
+                    }, 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}:host ::ng-deep [mkToolbarEnd]{display:inline-flex;align-items:center;gap:var(--mk-space-2)}.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 }] }] } });
 
 /**
@@ -1725,11 +1994,11 @@ class MkPageHeader {
     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 });
+    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}:host ::ng-deep [mkPageHeaderActions]{display:inline-flex;align-items:center;gap:var(--mk-space-2);flex-wrap:wrap}.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"] }]
+            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}:host ::ng-deep [mkPageHeaderActions]{display:inline-flex;align-items:center;gap:var(--mk-space-2);flex-wrap:wrap}.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 }] }] } });
 
 /**
@@ -2538,5 +2807,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  * 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 };
+export { MkAccordion, MkAccordionHeader, MkAccordionItem, MkAppShell, MkBackToTop, MkBreadcrumb, MkBreadcrumbItem, MkCommandPalette, MkDrawer, MkFab, MkFabAction, MkMenu, MkMenuItem, MkMenuTrigger, MkNavGroup, MkNavItem, MkNavList, MkPageHeader, MkPagination, MkScrollArea, MkSplitButton, MkSplitter, MkStep, MkStepper, MkTab, MkTabs, MkToolbar, MkTree };
 //# sourceMappingURL=mk-kit-ui-navigation.mjs.map