@mk-kit/ui 0.34.1 → 0.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mk-kit/ui",
-  "version": "0.34.1",
+  "version": "0.35.0",
   "publishConfig": {
     "access": "public"
   },

package/types/mk-kit-ui-core.d.ts

@@ -15,7 +15,7 @@ type MkThemePreference = 'light' | 'dark' | 'system';
 /** Concrete resolved theme (never `system`). */
 type MkResolvedTheme = 'light' | 'dark';
 /** Common placement values for overlays (menus, tooltips, popovers). */
-type MkPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right';
+type MkPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
 
 /**
  * Global control-density mode.
@@ -339,6 +339,12 @@ declare class MkAnchoredPanel implements AfterViewInit, OnDestroy {
     readonly flip: _angular_core.InputSignal<boolean>;
     /** Clamp the panel inside the viewport. */
     readonly clamp: _angular_core.InputSignal<boolean>;
+    /**
+     * Predicate consulted before an outside pointerdown dismisses the panel.
+     * Return `true` for targets that must keep it open — e.g. a nested panel
+     * (a submenu) that lives in the top layer outside this element.
+     */
+    readonly keepOpenWhen: _angular_core.InputSignal<((target: Node) => boolean) | null>;
     /** Emitted on an outside pointerdown or when the window loses focus. */
     readonly dismiss: _angular_core.OutputEmitterRef<void>;
     private popover;
@@ -371,7 +377,7 @@ declare class MkAnchoredPanel implements AfterViewInit, OnDestroy {
     private resolveAnchorRect;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkAnchoredPanel, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MkAnchoredPanel, "[mkAnchoredPanel]", ["mkAnchoredPanel"], { "anchor": { "alias": "mkAnchoredPanelFor"; "required": false; "isSignal": true; }; "anchorRect": { "alias": "anchorRect"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "matchWidth": { "alias": "matchWidth"; "required": false; "isSignal": true; }; "flip": { "alias": "flip"; "required": false; "isSignal": true; }; "clamp": { "alias": "clamp"; "required": false; "isSignal": true; }; }, { "dismiss": "dismiss"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MkAnchoredPanel, "[mkAnchoredPanel]", ["mkAnchoredPanel"], { "anchor": { "alias": "mkAnchoredPanelFor"; "required": false; "isSignal": true; }; "anchorRect": { "alias": "anchorRect"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "matchWidth": { "alias": "matchWidth"; "required": false; "isSignal": true; }; "flip": { "alias": "flip"; "required": false; "isSignal": true; }; "clamp": { "alias": "clamp"; "required": false; "isSignal": true; }; "keepOpenWhen": { "alias": "keepOpenWhen"; "required": false; "isSignal": true; }; }, { "dismiss": "dismiss"; }, never, never, true, never>;
 }
 
 /** Direction passed to the sort announcer. */
@@ -740,6 +746,16 @@ interface MkI18nStrings {
     chooseWeek: string;
     openCalendar: string;
     openTimeList: string;
+    /** Accessible name of the chevron segment of `mk-split-button`. */
+    moreActions: string;
+    /** Placeholder of `mk-datetime-picker`. */
+    selectDateTime: string;
+    /** Dialog label of the `mk-datetime-picker` panel. */
+    chooseDateTime: string;
+    /** Listbox label of the time list inside `mk-datetime-picker`. */
+    chooseTime: string;
+    /** Toggle-button label of `mk-datetime-picker`. */
+    openDateTimePicker: string;
     /** Mini-date segment names. */
     daySegment: string;
     monthSegment: string;

package/types/mk-kit-ui-datetime.d.ts

@@ -53,9 +53,11 @@ declare function parseISODate(value: string | null | undefined): Date | null;
 /**
  * Format `date` using a small pattern set. Supported tokens:
  * `yyyy` (4-digit year), `MMMM` (full month), `MMM` (short month),
- * `MM` (2-digit month), `dd` (2-digit day), `d` (day), `ddd` (short weekday).
- * Longer tokens are matched first so `MMMM` wins over `MM`.
- * Month/weekday names come from `names` when given, else English.
+ * `MM` (2-digit month), `dd` (2-digit day), `d` (day), `ddd` (short weekday),
+ * `HH` / `H` (24-hour, padded / bare), `hh` / `h` (12-hour, padded / bare),
+ * `mm` (2-digit minutes) and `a` (`AM` / `PM`). Longer tokens are matched
+ * first so `MMMM` wins over `MM`. Month/weekday names come from `names` when
+ * given, else English.
  */
 declare function formatDate(date: Date, pattern: string, names?: MkDateNames): string;
 /**
@@ -313,7 +315,7 @@ declare class MkDatePicker implements ControlValueAccessor, Validator {
 }
 
 /** A selectable time option. */
-interface MkTimeOption {
+interface MkTimeOption$1 {
     /** Canonical `HH:mm` (24h) value. */
     value: string;
     /** Display label (respects `hour12`). */
@@ -401,7 +403,7 @@ declare class MkTimePicker implements ControlValueAccessor, Validator {
     protected readonly describedBy: _angular_core.Signal<string | null>;
     protected readonly showClear: _angular_core.Signal<boolean>;
     /** Generated, min/max-filtered list of selectable times. */
-    protected readonly options: _angular_core.Signal<MkTimeOption[]>;
+    protected readonly options: _angular_core.Signal<MkTimeOption$1[]>;
     protected readonly selectedIndex: _angular_core.Signal<number>;
     constructor();
     protected optionId(index: number): string;
@@ -454,6 +456,161 @@ declare class MkTimePicker implements ControlValueAccessor, Validator {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkTimePicker, "mk-time-picker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "hour12": { "alias": "hour12"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
+/** A selectable time-of-day option in the panel's list. */
+interface MkTimeOption {
+    /** Minutes since midnight. */
+    minutes: number;
+    /** Display label (respects `hour12`). */
+    label: string;
+    /** Stable id for `aria-activedescendant`. */
+    id: string;
+}
+/**
+ * DateTimePicker — one field for a date **and** a time of day. The panel pairs
+ * an `mk-calendar` with a time list generated from `step`; the value is a
+ * single `Date` carrying both parts in local time (seconds and milliseconds
+ * zeroed). Implements `ControlValueAccessor` and a two-way `value` model, so it
+ * works with `[(ngModel)]`, reactive forms and `[(value)]`.
+ *
+ * Interaction: picking a day keeps the panel open and — when a value already
+ * exists — moves that value to the new day, preserving its time; picking a
+ * time commits and closes. With no value yet, the day is held until a time is
+ * chosen (so a half-picked datetime is never emitted). Typing also works:
+ * `2026-08-26 14:30`, `2026-08-26T09:05`, `Aug 26, 2026 2:30 pm` and a bare
+ * ISO date (→ midnight) are parsed on Enter/blur.
+ *
+ * `min` / `max` bound the whole instant at minute precision: the calendar
+ * greys out days outside the range and the time list hides times outside it
+ * on the boundary days. Validation reports `mkMinDate` / `mkMaxDate`.
+ *
+ * When nested in an `mk-form-field` it adopts the field's id and aria wiring.
+ *
+ * ```html
+ * <mk-datetime-picker [(value)]="startsAt" [step]="15" [min]="now" clearable />
+ * <mk-datetime-picker [(value)]="startsAt" hour12 />
+ * ```
+ */
+declare class MkDateTimePicker implements ControlValueAccessor, Validator {
+    protected readonly i18n: _mk_kit_ui_core.MkI18nStrings;
+    private readonly field;
+    private readonly host;
+    private readonly injector;
+    private readonly inputRef;
+    /** The panel — lives in the top layer once opened. */
+    private readonly panelRef;
+    private readonly timesRef;
+    /** Two-way selected date-time (local; seconds and ms are zero). */
+    readonly value: _angular_core.ModelSignal<Date | null>;
+    /** Earliest selectable instant (inclusive, minute precision). */
+    readonly min: _angular_core.InputSignal<Date | null>;
+    /** Latest selectable instant (inclusive, minute precision). */
+    readonly max: _angular_core.InputSignal<Date | null>;
+    /** Predicate marking individual days as disabled (threaded to the calendar). */
+    readonly disabledDate: _angular_core.InputSignal<((d: Date) => boolean) | null>;
+    /** Placeholder shown when empty. */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /**
+     * Pattern used to render the value in the field. Defaults to
+     * `'MMM d, yyyy HH:mm'`, or `'MMM d, yyyy h:mm a'` when `hour12` is set.
+     */
+    readonly displayFormat: _angular_core.InputSignal<string | null>;
+    /** Interval between generated time options, in minutes. */
+    readonly step: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Display 12-hour times with AM/PM (the model is a `Date` either way). */
+    readonly hour12: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Disable the control. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Show a clear button when a value is selected. */
+    readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Force invalid styling + `aria-invalid`. */
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** First column of the calendar week (0 = Sunday). */
+    readonly firstDayOfWeek: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Control size. Ignored when nested in an `mk-form-field`. */
+    readonly size: _angular_core.InputSignal<MkSize>;
+    protected readonly open: _angular_core.WritableSignal<boolean>;
+    /** Editable text mirror of the field. */
+    protected readonly inputText: _angular_core.WritableSignal<string>;
+    /** Keyboard-active option in the time list (index into `options`). */
+    protected readonly activeIndex: _angular_core.WritableSignal<number>;
+    /** Day picked in the calendar while there is no value yet. */
+    private readonly pendingDay;
+    private readonly cvaDisabled;
+    private onChange;
+    private onTouched;
+    readonly inputId: string;
+    readonly panelId: string;
+    readonly listId: string;
+    protected readonly effectiveSize: _angular_core.Signal<MkSize>;
+    protected readonly isDisabled: _angular_core.Signal<boolean>;
+    protected readonly isInvalid: _angular_core.Signal<boolean>;
+    protected readonly isRequired: _angular_core.Signal<boolean>;
+    protected readonly describedBy: _angular_core.Signal<string | null>;
+    protected readonly showClear: _angular_core.Signal<boolean>;
+    protected readonly effectiveFormat: _angular_core.Signal<string>;
+    /** The day the calendar shows as selected: the value's day, else the pending one. */
+    protected readonly calendarValue: _angular_core.Signal<Date | null>;
+    /** Day-granular bounds for the calendar (inclusive). */
+    protected readonly calendarMin: _angular_core.Signal<Date | null>;
+    protected readonly calendarMax: _angular_core.Signal<Date | null>;
+    /**
+     * Generated time options. On the `min` / `max` boundary day the list only
+     * offers times inside the bound; on other days every step is listed.
+     */
+    protected readonly options: _angular_core.Signal<MkTimeOption[]>;
+    protected readonly selectedIndex: _angular_core.Signal<number>;
+    constructor();
+    private displayTime;
+    /**
+     * Accepts `YYYY-MM-DD[ T]HH:mm[ am|pm]`, a bare ISO date (→ midnight), any
+     * `Date.parse`-able date followed by a time, or a full `Date.parse`-able
+     * string. Seconds are dropped.
+     */
+    private parse;
+    private clamp;
+    protected toggle(): void;
+    protected openPanel(): void;
+    protected close(): void;
+    /** Index of the first option at or after `d`'s time of day (for the initial highlight). */
+    private nearestIndex;
+    protected onCalendarPick(day: Date | null): void;
+    protected selectTime(index: number): void;
+    protected onListKeydown(event: Event): void;
+    private moveActive;
+    private scrollActiveIntoView;
+    protected onInput(event: Event): void;
+    protected onInputKeydown(event: Event): void;
+    protected clear(): void;
+    private commitInput;
+    private setValue;
+    protected onFocusOut(event: Event): void;
+    /**
+     * Escape pressed inside the (teleported) panel — close and return focus to
+     * the input. `preventDefault` + `stopPropagation` keep any outer Escape
+     * handling (e.g. a containing dialog) from also firing.
+     */
+    protected onPanelEscape(event: Event): void;
+    /**
+     * Focus left the teleported panel. The host `(focusout)` never sees this —
+     * the panel lives under `document.body` — so Tab-out is handled here: close
+     * unless focus moved back into the field or stayed inside the panel.
+     */
+    protected onPanelFocusout(event: FocusEvent): void;
+    writeValue(value: Date | null): void;
+    registerOnChange(fn: (value: Date | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    private readonly validatorChange;
+    /**
+     * Reports `mkMinDate` / `mkMaxDate` against the `[min]` and `[max]` inputs,
+     * comparing whole instants at minute precision.
+     */
+    validate(control: AbstractControl): ValidationErrors | null;
+    registerOnValidatorChange(fn: () => void): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkDateTimePicker, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkDateTimePicker, "mk-datetime-picker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "disabledDate": { "alias": "disabledDate"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "displayFormat": { "alias": "displayFormat"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "hour12": { "alias": "hour12"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
 /** A selected date range. Either endpoint may be `null` while incomplete. */
 interface MkDateRange {
     start: Date | null;
@@ -1167,5 +1324,5 @@ declare class MkMiniDate implements ControlValueAccessor, Validator {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkMiniDate, "mk-mini-date", ["mkMiniDate"], { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "order": { "alias": "order"; "required": false; "isSignal": true; }; "yearMin": { "alias": "yearMin"; "required": false; "isSignal": true; }; "yearMax": { "alias": "yearMax"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
-export { MkCalendar, MkDatePicker, MkDateRangePicker, MkEventCalendar, MkMiniDate, MkMonthPicker, MkTimePicker, MkWeekPicker, addDays, addMonths, buildMonthMatrix, clampDate, endOfMonth, endOfWeek, formatDate, formatISODate, getISOWeek, getMonthNames, getWeekdayFullName, getWeekdayNames, isAfter, isBefore, isSameDay, isSameMonth, parseISODate, startOfDay, startOfMonth, startOfWeek };
+export { MkCalendar, MkDatePicker, MkDateRangePicker, MkDateTimePicker, MkEventCalendar, MkMiniDate, MkMonthPicker, MkTimePicker, MkWeekPicker, addDays, addMonths, buildMonthMatrix, clampDate, endOfMonth, endOfWeek, formatDate, formatISODate, getISOWeek, getMonthNames, getWeekdayFullName, getWeekdayNames, isAfter, isBefore, isSameDay, isSameMonth, parseISODate, startOfDay, startOfMonth, startOfWeek };
 export type { MkCalendarEvent, MkCalendarEventEdit, MkCalendarView, MkDateRange, MkMiniDateOrder, MkMonthPickerMode, MkWeek, MkWeekday };

package/types/mk-kit-ui-navigation.d.ts

@@ -1,7 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { ElementRef, OnDestroy, TemplateRef } from '@angular/core';
 import * as _mk_kit_ui_core from '@mk-kit/ui/core';
-import { MkTone, MkSize } from '@mk-kit/ui/core';
+import { MkPlacement, MkVariant, MkTone, MkSize } from '@mk-kit/ui/core';
 
 /**
  * A single tab + its panel. Declared inside `<mk-tabs>`; the projected content
@@ -231,6 +231,57 @@ declare class MkPagination {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkPagination, "mk-pagination", never, { "total": { "alias": "total"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageCount": { "alias": "pageCount"; "required": false; "isSignal": true; }; "page": { "alias": "page"; "required": false; "isSignal": true; }; "siblingCount": { "alias": "siblingCount"; "required": false; "isSignal": true; }; "boundaryCount": { "alias": "boundaryCount"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, { "page": "pageChange"; }, never, never, true, never>;
 }
 
+/**
+ * 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>
+ * ```
+ */
+declare class MkMenuItem implements OnDestroy {
+    private readonly el;
+    private readonly document;
+    private readonly menu;
+    /** Prevent selection and focus. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Destructive styling (e.g. Delete). */
+    readonly danger: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** When set, activating the item navigates here. */
+    readonly href: _angular_core.InputSignal<string | undefined>;
+    /** A nested `mk-menu` this item opens as a submenu. */
+    readonly submenu: _angular_core.InputSignal<MkMenu | undefined>;
+    /** Emitted when the item is activated (not for disabled or submenu items). */
+    readonly action: _angular_core.OutputEmitterRef<void>;
+    private hoverTimer?;
+    activate(event?: Event): void;
+    /** Open the submenu beside this item; `focus` moves focus to its first item. */
+    openSubmenu(focus: boolean): void;
+    protected onMouseEnter(): void;
+    protected onMouseLeave(): void;
+    private cancelHover;
+    /** Move DOM focus to this item (roving focus). */
+    focusEl(): void;
+    /** Whether `node` lives inside this item. */
+    contains(node: Node | null): boolean;
+    /** Lowercased text content, used for typeahead matching. */
+    text(): string;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkMenuItem, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkMenuItem, "mk-menu-item", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "danger": { "alias": "danger"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "submenu": { "alias": "mkSubmenuFor"; "required": false; "isSignal": true; }; }, { "action": "action"; }, never, ["[mkMenuItemIcon]", "*"], true, never>;
+}
+
 /**
  * Dropdown menu implementing the ARIA menu pattern (roving focus, Arrow / Home
  * / End / typeahead, Enter/Space to activate). Attach it to a trigger with the
@@ -247,12 +298,33 @@ declare class MkPagination {
  *   <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>
+ * ```
  */
 declare class MkMenu implements OnDestroy {
     private readonly document;
     private readonly injector;
     private readonly isBrowser;
+    /** The enclosing menu when this one is a submenu. */
+    private readonly parent;
     private readonly items;
+    private readonly panelRef;
     /** Stable id for `aria-controls` on the trigger. */
     readonly panelId: string;
     private readonly _open;
@@ -267,16 +339,27 @@ declare class MkMenu implements OnDestroy {
         x: number;
         y: number;
     } | undefined>;
+    /** Where the panel sits relative to its anchor (submenus open sideways). */
+    protected readonly placement: _angular_core.WritableSignal<MkPlacement>;
     private triggerEl;
     private typeahead;
     private typeaheadTimer?;
+    /** Submenus that are currently open under this menu. */
+    private readonly openChildren;
+    /**
+     * 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(): boolean;
     /**
      * 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: HTMLElement, focus?: boolean | 'first' | 'last'): void;
+    open(trigger: HTMLElement, focus?: boolean | 'first' | 'last', placement?: MkPlacement): void;
     /**
      * 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
@@ -284,8 +367,19 @@ declare class MkMenu implements OnDestroy {
      * item; `restoreFocusEl` (when provided) regains focus on close.
      */
     openAt(x: number, y: number, restoreFocusEl?: HTMLElement): void;
-    /** 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?: boolean): void;
+    /**
+     * 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?: boolean): void;
+    /** Close every submenu open under this menu, except `keep`. */
+    closeChildren(keep?: MkMenu): void;
     /** Toggle open/closed from a trigger. */
     toggle(trigger: HTMLElement, focusFirst?: boolean): void;
     /**
@@ -296,9 +390,35 @@ declare class MkMenu implements OnDestroy {
     focusFirstItem(): void;
     /** Move focus to the last enabled item (ArrowUp from the trigger). */
     focusLastItem(): void;
+    /**
+     * 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: Node | null): boolean;
+    /** Bound for the anchored panel's `keepOpenWhen` (stable identity). */
+    protected readonly keepOpenWhen: (target: Node) => boolean;
+    /**
+     * 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: MkMenuItem): void;
+    /** @internal */
+    childOpened(child: MkMenu): void;
+    /** @internal */
+    childClosed(child: MkMenu): void;
+    private root;
     /** Focus an item once the panel is in the top layer and painted. */
     private focusAfterOpen;
+    /**
+     * 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.
+     */
+    private isRtl;
     protected onPanelKeydown(event: KeyboardEvent): void;
+    /** Placement for a submenu hanging off `item`, honouring text direction. */
+    submenuPlacement(): MkPlacement;
     private enabled;
     private activeItem;
     private currentIndex;
@@ -311,42 +431,6 @@ declare class MkMenu implements OnDestroy {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkMenu, "mk-menu", ["mkMenu"], {}, {}, ["items"], ["*"], true, never>;
 }
 
-/**
- * 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>
- * ```
- */
-declare class MkMenuItem {
-    private readonly el;
-    private readonly document;
-    private readonly menu;
-    /** Prevent selection and focus. */
-    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Destructive styling (e.g. Delete). */
-    readonly danger: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** When set, activating the item navigates here. */
-    readonly href: _angular_core.InputSignal<string | undefined>;
-    /** Emitted when the item is activated (not for disabled items). */
-    readonly action: _angular_core.OutputEmitterRef<void>;
-    activate(event?: Event): void;
-    /** Move DOM focus to this item (roving focus). */
-    focusEl(): void;
-    /** Whether `node` lives inside this item. */
-    contains(node: Node | null): boolean;
-    /** Lowercased text content, used for typeahead matching. */
-    text(): string;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkMenuItem, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkMenuItem, "mk-menu-item", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "danger": { "alias": "danger"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; }, { "action": "action"; }, never, ["[mkMenuItemIcon]", "*"], true, never>;
-}
-
 /**
  * Turns its host button into a trigger for an `<mk-menu>`. Wires
  * `aria-haspopup="menu"` / `aria-expanded` / `aria-controls`, toggles on click,
@@ -371,6 +455,54 @@ declare class MkMenuTrigger {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MkMenuTrigger, "[mkMenuTriggerFor]", ["mkMenuTrigger"], { "menu": { "alias": "mkMenuTriggerFor"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * 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>
+ * ```
+ */
+declare class MkSplitButton {
+    protected readonly i18n: _mk_kit_ui_core.MkI18nStrings;
+    /** The menu the chevron segment opens. */
+    readonly menu: _angular_core.InputSignal<MkMenu>;
+    /** Visual treatment shared by both segments. */
+    readonly variant: _angular_core.InputSignal<MkVariant>;
+    /** Semantic color tone shared by both segments. */
+    readonly tone: _angular_core.InputSignal<MkTone>;
+    /** Control size shared by both segments. */
+    readonly size: _angular_core.InputSignal<MkSize>;
+    /** Disable both segments. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Spinner on the main segment; the menu segment is disabled meanwhile. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Stretch to the container width (the main segment grows). */
+    readonly fullWidth: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** `type` of the main segment — `submit` to submit the enclosing form. */
+    readonly type: _angular_core.InputSignal<"button" | "submit">;
+    /** Accessible name of the chevron segment. */
+    readonly menuLabel: _angular_core.InputSignal<string>;
+    /** Emitted when the main segment is activated (not while disabled/loading). */
+    readonly action: _angular_core.OutputEmitterRef<void>;
+    protected readonly menuDisabled: _angular_core.Signal<boolean>;
+    protected onMain(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkSplitButton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkSplitButton, "mk-split-button", never, { "menu": { "alias": "menu"; "required": true; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "menuLabel": { "alias": "menuLabel"; "required": false; "isSignal": true; }; }, { "action": "action"; }, never, ["*"], true, never>;
+}
+
 /**
  * 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
@@ -1165,5 +1297,5 @@ declare class MkScrollArea {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkScrollArea, "mk-scroll-area", never, { "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "hideDelay": { "alias": "hideDelay"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-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 };
 export type { MkCommand, MkDrawerSide, MkFabPosition, MkPageItem, MkScrollAreaOrientation, MkSplitterOrientation, MkStepperOrientation, MkTabsVariant, MkTreeNode };