@mk-kit/ui 0.34.1 → 0.36.0

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

@@ -0,0 +1,236 @@
+import { MkResponsive, MkBreakpointService } from '@mk-kit/ui/core';
+import * as _angular_core from '@angular/core';
+import { InputSignal } from '@angular/core';
+
+/**
+ * A spacing value: a step on the `--mk-space-*` scale (`0 1 2 3 4 5 6 8 10 12
+ * 16`, so `4` = `var(--mk-space-4)` = 16px and follows the density modes) or
+ * any CSS length such as `'1.5rem'` / `'clamp(1rem, 2vw, 2rem)'`.
+ */
+type MkSpace = number | string;
+/** Per-breakpoint spacing, e.g. `{ xs: 2, md: 4 }`. */
+type MkResponsiveSpace = MkResponsive<MkSpace>;
+/**
+ * A number, or a numeric string as it arrives from a plain attribute
+ * (`gap="4"`, `colSpan="2"`), as a number; anything else unchanged.
+ */
+declare function mkNumeric<T>(value: T): T | number;
+/** Translate a {@link MkSpace} into CSS (`null` when unset). */
+declare function mkSpaceToCss(value: MkSpace | null | undefined): string | null;
+/** Flex / grid main-axis distribution keywords, in plain words. */
+type MkJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | 'stretch';
+/** Cross-axis alignment keywords. */
+type MkAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+/** `justify-content` value for a {@link MkJustify} keyword (`null` when unset). */
+declare function mkJustifyToCss(value: MkJustify | null | undefined): string | null;
+/** `align-items` / `align-self` value for a {@link MkAlign} keyword (`null` when unset). */
+declare function mkAlignToCss(value: MkAlign | null | undefined): string | null;
+
+/** Flex direction keywords. */
+type MkFlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+/**
+ * Shared inputs and host style bindings of `mk-stack` and `mk-flex`.
+ * Responsive inputs re-resolve when the viewport crosses a breakpoint.
+ */
+declare abstract class MkFlexBase {
+    protected readonly bp: MkBreakpointService;
+    /** Space between children — a `--mk-space-*` step, a CSS length, or a per-breakpoint map. */
+    abstract readonly gap: InputSignal<MkResponsiveSpace>;
+    /** Main-axis direction; may be responsive, e.g. `{ xs: 'column', md: 'row' }`. */
+    abstract readonly direction: InputSignal<MkResponsive<MkFlexDirection>>;
+    /** Cross-axis alignment of children. */
+    readonly align: InputSignal<MkResponsive<MkAlign> | null>;
+    /** Main-axis distribution of children. */
+    readonly justify: InputSignal<MkResponsive<MkJustify> | null>;
+    /** Let children wrap onto new lines. */
+    readonly wrap: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Render as `inline-flex` (sits in a line of text) instead of a block. */
+    readonly inline: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly directionCss: _angular_core.Signal<MkFlexDirection | null>;
+    protected readonly gapCss: _angular_core.Signal<string | null>;
+    protected readonly alignCss: _angular_core.Signal<string | null>;
+    protected readonly justifyCss: _angular_core.Signal<string | null>;
+    protected readonly wrapCss: _angular_core.Signal<"wrap" | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkFlexBase, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MkFlexBase, never, never, { "align": { "alias": "align"; "required": false; "isSignal": true; }; "justify": { "alias": "justify"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Stack — children laid out one after another with a consistent gap, vertical
+ * by default. The everyday layout primitive: form sections, card bodies,
+ * sidebars, a row of buttons (`direction="row"`).
+ *
+ * ```html
+ * <mk-stack gap="4">
+ *   <mk-input … />
+ *   <mk-input … />
+ *   <mk-stack direction="row" gap="2" justify="end">
+ *     <button mkButton variant="ghost">Cancel</button>
+ *     <button mkButton>Save</button>
+ *   </mk-stack>
+ * </mk-stack>
+ *
+ * <!-- Stack on phones, side by side from md up -->
+ * <mk-stack [direction]="{ xs: 'column', md: 'row' }" [gap]="{ xs: 3, md: 6 }">…</mk-stack>
+ * ```
+ */
+declare class MkStack extends MkFlexBase {
+    /** Space between children (default `4` = 16px). */
+    readonly gap: _angular_core.InputSignal<MkResponsiveSpace>;
+    /** Direction (default `column`). */
+    readonly direction: _angular_core.InputSignal<MkResponsive<MkFlexDirection>>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkStack, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkStack, "mk-stack", never, { "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Flex — a flexbox container with its options as inputs, horizontal by default
+ * and no gap unless asked. Reach for it when a stack's "one after another"
+ * isn't the point: space-between toolbars, centring, wrapping tag clouds.
+ * Children can fine-tune themselves with `mkFlexItem`.
+ *
+ * ```html
+ * <mk-flex align="center" justify="between" gap="3">
+ *   <h2>Orders</h2>
+ *   <button mkButton>New order</button>
+ * </mk-flex>
+ * <mk-flex wrap gap="2">@for (tag of tags; track tag) { <mk-chip>{{ tag }}</mk-chip> }</mk-flex>
+ * ```
+ */
+declare class MkFlex extends MkFlexBase {
+    /** Space between children (default none). */
+    readonly gap: _angular_core.InputSignal<MkResponsiveSpace>;
+    /** Direction (default `row`). */
+    readonly direction: _angular_core.InputSignal<MkResponsive<MkFlexDirection>>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkFlex, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkFlex, "mk-flex", never, { "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Per-child flex options inside `mk-flex` / `mk-stack` (or any flex parent).
+ *
+ * ```html
+ * <mk-flex gap="3">
+ *   <mk-input mkFlexItem grow />      <!-- takes the remaining width -->
+ *   <button mkButton>Search</button>
+ * </mk-flex>
+ * ```
+ */
+declare class MkFlexItem {
+    private readonly bp;
+    /** `flex-grow`; a bare `grow` attribute means `1`. */
+    readonly grow: _angular_core.InputSignalWithTransform<number | null, unknown>;
+    /** `flex-shrink`; a bare `shrink` attribute means `1`, `[shrink]="0"` pins the size. */
+    readonly shrink: _angular_core.InputSignalWithTransform<number | null, unknown>;
+    /** `flex-basis` — any CSS length or `auto`; may be responsive. */
+    readonly basis: _angular_core.InputSignal<MkResponsive<string> | null>;
+    /** Override the parent's `align` for this child. */
+    readonly alignSelf: _angular_core.InputSignal<MkResponsive<MkAlign> | null>;
+    /** Visual order; may be responsive (e.g. move a sidebar first on phones). */
+    readonly order: _angular_core.InputSignal<MkResponsive<string | number> | null>;
+    protected readonly growCss: _angular_core.Signal<number | null>;
+    protected readonly shrinkCss: _angular_core.Signal<number | null>;
+    protected readonly basisCss: _angular_core.Signal<string | null>;
+    protected readonly alignSelfCss: _angular_core.Signal<string | null>;
+    protected readonly orderCss: _angular_core.Signal<string | number | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkFlexItem, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MkFlexItem, "[mkFlexItem]", never, { "grow": { "alias": "grow"; "required": false; "isSignal": true; }; "shrink": { "alias": "shrink"; "required": false; "isSignal": true; }; "basis": { "alias": "basis"; "required": false; "isSignal": true; }; "alignSelf": { "alias": "alignSelf"; "required": false; "isSignal": true; }; "order": { "alias": "order"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** `justify-items` keywords. */
+type MkGridJustify = 'start' | 'center' | 'end' | 'stretch';
+/**
+ * Grid — a CSS grid with the common cases as inputs.
+ *
+ * - `columns` — a count (`3` → three equal tracks) or a raw
+ *   `grid-template-columns` string (`'240px 1fr'`); responsive maps work for
+ *   both: `[columns]="{ xs: 1, md: 2, xl: 4 }"`.
+ * - `minColumnWidth` — auto-responsive without breakpoints: as many
+ *   `≥ 16rem` columns as fit (`auto-fill`; add `autoFit` to stretch the last
+ *   row's items instead of leaving empty tracks). Wins over `columns`.
+ * - `gap`, `rowGap`, `columnGap` — `--mk-space-*` steps or CSS lengths.
+ *
+ * Children can span tracks with `mkGridItem`.
+ *
+ * ```html
+ * <mk-grid [columns]="{ xs: 1, md: 2, xl: 4 }" gap="4">
+ *   @for (kpi of kpis; track kpi.id) { <mk-card>…</mk-card> }
+ * </mk-grid>
+ *
+ * <mk-grid minColumnWidth="16rem" gap="4">…cards…</mk-grid>
+ * ```
+ */
+declare class MkGrid {
+    private readonly bp;
+    /** Column count or `grid-template-columns` value; responsive allowed (default `1`). */
+    readonly columns: _angular_core.InputSignal<MkResponsive<string | number>>;
+    /** Row count or `grid-template-rows` value; responsive allowed. */
+    readonly rows: _angular_core.InputSignal<MkResponsive<string | number> | null>;
+    /** Minimum column width for an auto-filling grid, e.g. `16rem`. Overrides `columns`. */
+    readonly minColumnWidth: _angular_core.InputSignal<MkResponsive<string> | null>;
+    /** With `minColumnWidth`: use `auto-fit` so items stretch when a row is short. */
+    readonly autoFit: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Gap between both rows and columns (default `4` = 16px). */
+    readonly gap: _angular_core.InputSignal<MkResponsiveSpace>;
+    /** Row gap override. */
+    readonly rowGap: _angular_core.InputSignal<MkResponsiveSpace | null>;
+    /** Column gap override. */
+    readonly columnGap: _angular_core.InputSignal<MkResponsiveSpace | null>;
+    /** `align-items` for every cell. */
+    readonly align: _angular_core.InputSignal<MkResponsive<MkAlign> | null>;
+    /** `justify-items` for every cell. */
+    readonly justify: _angular_core.InputSignal<MkResponsive<MkGridJustify> | null>;
+    /** `grid-auto-flow` (e.g. `dense` to backfill holes left by spanning items). */
+    readonly flow: _angular_core.InputSignal<"row" | "column" | "dense" | "row dense" | "column dense" | null>;
+    /** Render as `inline-grid`. */
+    readonly inline: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly columnsCss: _angular_core.Signal<string | null>;
+    protected readonly rowsCss: _angular_core.Signal<string | null>;
+    protected readonly rowGapCss: _angular_core.Signal<string | null>;
+    protected readonly columnGapCss: _angular_core.Signal<string | null>;
+    protected readonly alignCss: _angular_core.Signal<string | null>;
+    protected readonly justifyCss: _angular_core.Signal<MkGridJustify | null>;
+    protected readonly flowCss: _angular_core.Signal<"row" | "column" | "dense" | "row dense" | "column dense" | null>;
+    /** A track list: a count becomes `repeat(n, minmax(0, 1fr))` so long content cannot blow a column out. */
+    private static tracks;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkGrid, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkGrid, "mk-grid", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "minColumnWidth": { "alias": "minColumnWidth"; "required": false; "isSignal": true; }; "autoFit": { "alias": "autoFit"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "rowGap": { "alias": "rowGap"; "required": false; "isSignal": true; }; "columnGap": { "alias": "columnGap"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "justify": { "alias": "justify"; "required": false; "isSignal": true; }; "flow": { "alias": "flow"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Per-cell placement inside `mk-grid`: span several tracks, or pin a start
+ * line. All inputs accept responsive maps, so a hero card can span the full
+ * row on phones and two of four columns on desktop.
+ *
+ * ```html
+ * <mk-grid [columns]="{ xs: 1, lg: 4 }" gap="4">
+ *   <mk-card mkGridItem [colSpan]="{ xs: 1, lg: 2 }">Revenue</mk-card>
+ *   …
+ * </mk-grid>
+ * ```
+ */
+declare class MkGridItem {
+    private readonly bp;
+    /** Number of columns to span (`'all'` = the full row). */
+    readonly colSpan: _angular_core.InputSignal<MkResponsive<string | number> | null>;
+    /** Number of rows to span. */
+    readonly rowSpan: _angular_core.InputSignal<MkResponsive<string | number> | null>;
+    /** Column line to start at (1-based). */
+    readonly colStart: _angular_core.InputSignal<MkResponsive<string | number> | null>;
+    /** Row line to start at (1-based). */
+    readonly rowStart: _angular_core.InputSignal<MkResponsive<string | number> | null>;
+    /** `align-self` for this cell. */
+    readonly alignSelf: _angular_core.InputSignal<MkResponsive<"start" | "center" | "end" | "stretch"> | null>;
+    /** `justify-self` for this cell. */
+    readonly justifySelf: _angular_core.InputSignal<MkResponsive<"start" | "center" | "end" | "stretch"> | null>;
+    protected readonly columnCss: _angular_core.Signal<string | null>;
+    protected readonly rowCss: _angular_core.Signal<string | null>;
+    protected readonly alignSelfCss: _angular_core.Signal<"start" | "center" | "end" | "stretch" | null>;
+    protected readonly justifySelfCss: _angular_core.Signal<"start" | "center" | "end" | "stretch" | null>;
+    private static line;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkGridItem, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MkGridItem, "[mkGridItem]", never, { "colSpan": { "alias": "colSpan"; "required": false; "isSignal": true; }; "rowSpan": { "alias": "rowSpan"; "required": false; "isSignal": true; }; "colStart": { "alias": "colStart"; "required": false; "isSignal": true; }; "rowStart": { "alias": "rowStart"; "required": false; "isSignal": true; }; "alignSelf": { "alias": "alignSelf"; "required": false; "isSignal": true; }; "justifySelf": { "alias": "justifySelf"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { MkFlex, MkFlexBase, MkFlexItem, MkGrid, MkGridItem, MkStack, mkAlignToCss, mkJustifyToCss, mkNumeric, mkSpaceToCss };
+export type { MkAlign, MkFlexDirection, MkGridJustify, MkJustify, MkResponsiveSpace, MkSpace };

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 };