@mk-kit/ui 0.34.0

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

@@ -0,0 +1,1169 @@
+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';
+
+/**
+ * A single tab + its panel. Declared inside `<mk-tabs>`; the projected content
+ * becomes the tab panel body while `label` is rendered in the tablist.
+ *
+ * ```html
+ * <mk-tabs>
+ *   <mk-tab label="Overview">…panel content…</mk-tab>
+ *   <mk-tab label="Settings" [disabled]="locked()">…</mk-tab>
+ * </mk-tabs>
+ * ```
+ */
+declare class MkTab {
+    /** Text shown on the tab button in the tablist. */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Disable selection of this tab. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Stable id for the tab button (wires `aria-labelledby`). */
+    readonly tabId: string;
+    /** Stable id for the panel (wires `aria-controls`). */
+    readonly panelId: string;
+    /** Whether this tab is currently selected. Set by the parent `MkTabs`. */
+    readonly active: _angular_core.WritableSignal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkTab, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkTab, "mk-tab", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/** Visual style for the tablist. */
+type MkTabsVariant = 'line' | 'pill';
+/**
+ * Accessible tabs implementing the ARIA tabs pattern: a `role="tablist"` with
+ * roving tabindex, Arrow/Home/End keyboard navigation and an animated active
+ * indicator. Selection is two-way bindable via `selectedIndex`.
+ *
+ * ```html
+ * <mk-tabs [(selectedIndex)]="tab" variant="line">
+ *   <mk-tab label="Profile">…</mk-tab>
+ *   <mk-tab label="Billing">…</mk-tab>
+ * </mk-tabs>
+ * ```
+ */
+declare class MkTabs {
+    /** Projected tabs, kept live via a signal content query. */
+    readonly tabs: _angular_core.Signal<readonly MkTab[]>;
+    /** Rendered tab buttons, used to move focus and measure the indicator. */
+    protected readonly tabButtons: _angular_core.Signal<readonly ElementRef<HTMLButtonElement>[]>;
+    /** Zero-based index of the active tab (two-way). */
+    readonly selectedIndex: _angular_core.ModelSignal<number>;
+    /** `line` shows an underline indicator; `pill` uses filled pills. */
+    readonly variant: _angular_core.InputSignal<MkTabsVariant>;
+    /** Sliding indicator geometry (line variant). */
+    protected readonly indicatorLeft: _angular_core.WritableSignal<number>;
+    protected readonly indicatorWidth: _angular_core.WritableSignal<number>;
+    constructor();
+    protected select(index: number): void;
+    protected focusTab(index: number): void;
+    protected onKeydown(event: KeyboardEvent, index: number): void;
+    /** Next non-disabled tab index starting from `from`, wrapping around. */
+    private nextEnabled;
+    private measureIndicator;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkTabs, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkTabs, "mk-tabs", never, { "selectedIndex": { "alias": "selectedIndex"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, { "selectedIndex": "selectedIndexChange"; }, ["tabs"], ["*"], true, never>;
+}
+
+/**
+ * A collapsible section within an `<mk-accordion>`. The header is a button that
+ * toggles a smoothly animated body region wired with `aria-expanded` /
+ * `aria-controls`. Open state is two-way bindable via `open`.
+ *
+ * ```html
+ * <mk-accordion-item header="Shipping" [(open)]="shippingOpen">
+ *   …body…
+ * </mk-accordion-item>
+ * ```
+ */
+declare class MkAccordionItem {
+    private readonly accordion;
+    /** Plain-text header (ignored when `[mkAccordionHeader]` is projected). */
+    readonly header: _angular_core.InputSignal<string>;
+    /** Disable toggling of this item. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether the item is expanded (two-way). */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** Stable id for the trigger button. */
+    readonly triggerId: string;
+    /** Stable id for the panel region. */
+    readonly panelId: string;
+    protected toggle(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkAccordionItem, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkAccordionItem, "mk-accordion-item", never, { "header": { "alias": "header"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["[mkAccordionHeader]", "*"], true, never>;
+}
+
+/**
+ * Groups `<mk-accordion-item>`s. By default only one item can be open at a
+ * time (single-open); set `multi` to allow several. Coordinates its children
+ * through their two-way `open` models.
+ *
+ * ```html
+ * <mk-accordion [multi]="false">
+ *   <mk-accordion-item header="One">…</mk-accordion-item>
+ *   <mk-accordion-item header="Two">…</mk-accordion-item>
+ * </mk-accordion>
+ * ```
+ */
+declare class MkAccordion {
+    /** Allow multiple items open simultaneously. */
+    readonly multi: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Registered items collapse siblings on open in single mode. */
+    private readonly items;
+    /** Called by an item just before its open state changes. */
+    onItemToggle(source: MkAccordionItem, opening: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkAccordion, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkAccordion, "mk-accordion", never, { "multi": { "alias": "multi"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Marks projected content as the header of an `<mk-accordion-item>`. Use when
+ * the header needs rich markup instead of the plain-text `header` input.
+ *
+ * ```html
+ * <mk-accordion-item>
+ *   <span mkAccordionHeader><mk-icon name="user" /> Account</span>
+ *   …body…
+ * </mk-accordion-item>
+ * ```
+ */
+declare class MkAccordionHeader {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkAccordionHeader, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MkAccordionHeader, "[mkAccordionHeader]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Breadcrumb trail. Renders `nav[aria-label="Breadcrumb"] > ol` and marks the
+ * final `<mk-breadcrumb-item>` as the current page. The separator is drawn in
+ * CSS and can be customised via `separator`.
+ *
+ * ```html
+ * <mk-breadcrumb separator="›">
+ *   <mk-breadcrumb-item href="/">Home</mk-breadcrumb-item>
+ *   <mk-breadcrumb-item href="/users">Users</mk-breadcrumb-item>
+ *   <mk-breadcrumb-item>Jane</mk-breadcrumb-item>
+ * </mk-breadcrumb>
+ * ```
+ */
+declare class MkBreadcrumb {
+    protected readonly i18n: _mk_kit_ui_core.MkI18nStrings;
+    /** Accessible label for the navigation landmark. */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Separator character rendered between crumbs. */
+    readonly separator: _angular_core.InputSignal<string>;
+    private readonly items;
+    /** Wrap the separator in quotes for the CSS `content` property. */
+    protected readonly separatorValue: _angular_core.Signal<string>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkBreadcrumb, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkBreadcrumb, "mk-breadcrumb", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; }, {}, ["items"], ["*"], true, never>;
+}
+
+/**
+ * A single crumb inside `<mk-breadcrumb>`. Renders a link when `href` is set,
+ * otherwise plain text. The last item is automatically marked
+ * `aria-current="page"` by the parent.
+ *
+ * ```html
+ * <mk-breadcrumb-item href="/">Home</mk-breadcrumb-item>
+ * <mk-breadcrumb-item>Current page</mk-breadcrumb-item>
+ * ```
+ */
+declare class MkBreadcrumbItem {
+    /** Optional link target. Rendered as text when omitted or when it is last. */
+    readonly href: _angular_core.InputSignal<string | undefined>;
+    /** Whether this is the final crumb. Set by the parent `MkBreadcrumb`. */
+    readonly last: _angular_core.WritableSignal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkBreadcrumbItem, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkBreadcrumbItem, "mk-breadcrumb-item", never, { "href": { "alias": "href"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/** A rendered pagination cell: a real page number or a gap marker. */
+type MkPageItem = number | 'ellipsis';
+/**
+ * Page navigation with previous/next controls and numbered pages that collapse
+ * to ellipses for large ranges. Provide either `total` (+ `pageSize`) or a
+ * direct `pageCount`. `page` is 1-based and two-way bindable.
+ *
+ * ```html
+ * <mk-pagination
+ *   [total]="240"
+ *   [pageSize]="20"
+ *   [(page)]="page"
+ *   (pageChange)="load($event)"
+ * />
+ * ```
+ */
+declare class MkPagination {
+    /** Localised strings (override globally via `provideMkI18n`). */
+    protected readonly i18n: _mk_kit_ui_core.MkI18nStrings;
+    /** Total number of items (used with `pageSize` when `pageCount` is unset). */
+    readonly total: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Items per page. */
+    readonly pageSize: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Explicit page count; overrides `total`/`pageSize` when > 0. */
+    readonly pageCount: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Current 1-based page (two-way). */
+    readonly page: _angular_core.ModelSignal<number>;
+    /** Number of page buttons to keep on each side of the current page. */
+    readonly siblingCount: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Number of page buttons pinned at each end. */
+    readonly boundaryCount: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Accessible label for the navigation landmark. */
+    readonly label: _angular_core.InputSignal<string>;
+    /**
+     * `pageChange` is emitted automatically by the two-way `page` model whenever
+     * the page changes — bind it via `(pageChange)` or `[(page)]`.
+     */
+    /** Resolved total number of pages (at least 1). */
+    protected readonly pages: _angular_core.Signal<number>;
+    protected readonly current: _angular_core.Signal<number>;
+    protected readonly hasPrev: _angular_core.Signal<boolean>;
+    protected readonly hasNext: _angular_core.Signal<boolean>;
+    /** The sequence of page cells with ellipsis gaps. */
+    protected readonly items: _angular_core.Signal<MkPageItem[]>;
+    protected goTo(page: number): void;
+    protected prev(): void;
+    protected next(): void;
+    private range;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkPagination, never>;
+    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>;
+}
+
+/**
+ * Dropdown menu implementing the ARIA menu pattern (roving focus, Arrow / Home
+ * / End / typeahead, Enter/Space to activate). Attach it to a trigger with the
+ * `mkMenuTriggerFor` directive; the trigger controls opening and positioning.
+ *
+ * The panel is rendered in the browser top layer via {@link MkAnchoredPanel}, so
+ * it is never clipped by an ancestor's `overflow`/`transform` and always flips
+ * back on-screen near a viewport edge.
+ *
+ * ```html
+ * <button mkButton [mkMenuTriggerFor]="menu">Actions</button>
+ * <mk-menu #menu>
+ *   <mk-menu-item (action)="edit()">Edit</mk-menu-item>
+ *   <mk-menu-item danger (action)="del()">Delete</mk-menu-item>
+ * </mk-menu>
+ * ```
+ */
+declare class MkMenu implements OnDestroy {
+    private readonly document;
+    private readonly injector;
+    private readonly isBrowser;
+    private readonly items;
+    /** Stable id for `aria-controls` on the trigger. */
+    readonly panelId: string;
+    private readonly _open;
+    /** Whether the menu is currently open. */
+    readonly opened: _angular_core.Signal<boolean>;
+    /** Accessible label for the menu (defaults via the trigger if unset). */
+    readonly ariaLabel: _angular_core.WritableSignal<string | undefined>;
+    /** Element to anchor the panel to (element-anchored open). */
+    protected readonly anchorEl: _angular_core.WritableSignal<HTMLElement | undefined>;
+    /** Viewport point to anchor to (`openAt` / context menu). */
+    protected readonly anchorPoint: _angular_core.WritableSignal<{
+        x: number;
+        y: number;
+    } | undefined>;
+    private triggerEl;
+    private typeahead;
+    private typeaheadTimer?;
+    /**
+     * Open the menu anchored to `trigger`. `focus` picks the item that receives
+     * focus once the panel is painted: `true`/`'first'` for the first enabled
+     * item, `'last'` for the last (ArrowUp on a menu button, per the APG
+     * menu-button pattern), `false` to leave focus where it is (mouse open).
+     */
+    open(trigger: HTMLElement, focus?: boolean | 'first' | 'last'): 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
+     * by {@link MkAnchoredPanel} via the point anchor. Focus moves to the first
+     * 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(restoreFocus?: boolean): void;
+    /** Toggle open/closed from a trigger. */
+    toggle(trigger: HTMLElement, focusFirst?: boolean): void;
+    /**
+     * Move focus to the first enabled item. Used by the trigger when the menu is
+     * already open (e.g. ArrowDown after a mouse open), so arrow keys always
+     * reach the items even though focus never left the trigger.
+     */
+    focusFirstItem(): void;
+    /** Move focus to the last enabled item (ArrowUp from the trigger). */
+    focusLastItem(): void;
+    /** Focus an item once the panel is in the top layer and painted. */
+    private focusAfterOpen;
+    protected onPanelKeydown(event: KeyboardEvent): void;
+    private enabled;
+    private activeItem;
+    private currentIndex;
+    private move;
+    private focusFirst;
+    private focusLast;
+    private onTypeahead;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkMenu, never>;
+    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,
+ * opens on ArrowDown / Enter / Space (focusing the first item) and on ArrowUp
+ * (focusing the last item, per the APG menu-button pattern), and closes on
+ * Escape. When the menu is already open — e.g. after a mouse click, which
+ * deliberately leaves focus on the trigger — ArrowDown moves focus to the
+ * first item and ArrowUp to the last, so the keyboard is never dead.
+ *
+ * ```html
+ * <button mkButton [mkMenuTriggerFor]="menu">Actions</button>
+ * <mk-menu #menu>…</mk-menu>
+ * ```
+ */
+declare class MkMenuTrigger {
+    private readonly host;
+    /** The menu instance to control. */
+    readonly menu: _angular_core.InputSignal<MkMenu>;
+    protected onClick(event: Event): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkMenuTrigger, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MkMenuTrigger, "[mkMenuTriggerFor]", ["mkMenuTrigger"], { "menu": { "alias": "mkMenuTriggerFor"; "required": true; "isSignal": true; }; }, {}, never, 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
+ * off-canvas drawer with a scrim (Escape to close). Includes a skip-to-content
+ * link for keyboard users.
+ *
+ * ```html
+ * <mk-app-shell [(sidebarOpen)]="open" [(sidebarCollapsed)]="collapsed">
+ *   <div mkAppHeader>
+ *     <button mkButton iconOnly (click)="shell.toggleSidebar()">☰</button>
+ *   </div>
+ *   <mk-nav-list mkAppSidebar [collapsed]="collapsed()">…</mk-nav-list>
+ *   <router-outlet />
+ * </mk-app-shell>
+ * ```
+ */
+declare class MkAppShell {
+    private readonly document;
+    private readonly isBrowser;
+    protected readonly i18n: _mk_kit_ui_core.MkI18nStrings;
+    private readonly sidebarRef;
+    /** Whether the mobile drawer is open (two-way). */
+    readonly sidebarOpen: _angular_core.ModelSignal<boolean>;
+    /** Whether the desktop sidebar is collapsed to icons (two-way). */
+    readonly sidebarCollapsed: _angular_core.ModelSignal<boolean>;
+    /** True when the viewport is at/below the mobile breakpoint. */
+    readonly isMobile: _angular_core.WritableSignal<boolean>;
+    private focusTrap?;
+    constructor();
+    private mql?;
+    private readonly onMediaChange;
+    ngOnDestroy(): void;
+    /** Toggle the mobile drawer open/closed. Handy for a hamburger button. */
+    toggleSidebar(): void;
+    /** Open the mobile drawer. */
+    openSidebar(): void;
+    /** Close the mobile drawer. */
+    closeSidebar(): void;
+    /** Toggle the desktop collapsed (icon-only) state. */
+    toggleCollapsed(): void;
+    protected onSidebarKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkAppShell, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkAppShell, "mk-app-shell", never, { "sidebarOpen": { "alias": "sidebarOpen"; "required": false; "isSignal": true; }; "sidebarCollapsed": { "alias": "sidebarCollapsed"; "required": false; "isSignal": true; }; }, { "sidebarOpen": "sidebarOpenChange"; "sidebarCollapsed": "sidebarCollapsedChange"; }, never, ["[mkAppHeader]", "[mkAppSidebar]", "*"], true, never>;
+}
+
+/**
+ * Sidebar navigation list. Hosts `<mk-nav-item>`s and, when `collapsed`, drives
+ * them into an icon-only rail (labels hidden, exposed via `title` tooltips).
+ * Designed to sit inside the `mkAppSidebar` slot of `<mk-app-shell>`.
+ *
+ * ```html
+ * <mk-nav-list [collapsed]="collapsed()">
+ *   <mk-nav-item label="Dashboard" href="/" active>
+ *     <svg mkNavIcon>…</svg>
+ *   </mk-nav-item>
+ * </mk-nav-list>
+ * ```
+ */
+declare class MkNavList {
+    /** Collapse items to icon-only. Read by descendant `MkNavItem`s. */
+    readonly collapsed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkNavList, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkNavList, "mk-nav-list", never, { "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * A single sidebar entry: icon slot (`[mkNavIcon]`), label, optional badge and
+ * active state. Renders a link when `href` is set, otherwise a button that
+ * emits `action`. If it contains nested `<mk-nav-item>`s it becomes an
+ * expandable disclosure (`aria-expanded`). Collapses to an icon in a collapsed
+ * list, exposing the label as a tooltip — and because a sub-list can't be shown
+ * at rail width, a parent item there emits `action` (navigate) instead of
+ * toggling, so it never becomes a dead button.
+ *
+ * ```html
+ * <mk-nav-item label="Reports" active href="/reports" badge="3">
+ *   <svg mkNavIcon>…</svg>
+ * </mk-nav-item>
+ * <mk-nav-item label="Settings">
+ *   <svg mkNavIcon>…</svg>
+ *   <mk-nav-item label="Team" href="/team" />
+ * </mk-nav-item>
+ * ```
+ */
+declare class MkNavItem {
+    private readonly list;
+    /** Visible label. Also used as the tooltip when collapsed. */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Link target. Renders an anchor instead of a button. */
+    readonly href: _angular_core.InputSignal<string | undefined>;
+    /** Marks the current page (`aria-current="page"`). */
+    readonly active: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Disable interaction. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Optional badge (count or short text). */
+    readonly badge: _angular_core.InputSignal<string | number | undefined>;
+    /** Whether nested children are expanded (two-way). */
+    readonly expanded: _angular_core.ModelSignal<boolean>;
+    /** Emitted when a button-style item is activated. */
+    readonly action: _angular_core.OutputEmitterRef<void>;
+    /** Nested items projected inside this one. */
+    private readonly children;
+    protected readonly hasChildren: _angular_core.Signal<boolean>;
+    /** Collapsed state inherited from the enclosing `MkNavList`. */
+    protected readonly collapsed: _angular_core.Signal<boolean>;
+    /** Id wiring the disclosure button to its sub-list. */
+    protected readonly subId: string;
+    protected toggle(): void;
+    protected activate(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkNavItem, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkNavItem, "mk-nav-item", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; "action": "action"; }, ["children"], ["[mkNavIcon]", "mk-nav-item"], true, never>;
+}
+
+/**
+ * A titled section within an `<mk-nav-list>` — the "MAIN" / "SETTINGS" groupings
+ * common in admin/CMS sidebars. Static by default; set `collapsible` to make
+ * the label a toggle that expands/collapses its items (`aria-expanded` +
+ * region). In a collapsed icon rail the label becomes a divider.
+ *
+ * ```html
+ * <mk-nav-list>
+ *   <mk-nav-group label="Main">
+ *     <mk-nav-item label="Dashboard" href="/" />
+ *   </mk-nav-group>
+ *   <mk-nav-group label="Settings" collapsible>
+ *     <mk-nav-item label="Team" href="/team" />
+ *   </mk-nav-group>
+ * </mk-nav-list>
+ * ```
+ */
+declare class MkNavGroup {
+    private readonly list;
+    /** Section title. */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Make the label a toggle that shows/hides the items. */
+    readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether the section is expanded (two-way; only meaningful when collapsible). */
+    readonly expanded: _angular_core.ModelSignal<boolean>;
+    /** Id of the items region (for `aria-controls`). */
+    readonly regionId: string;
+    /** Whether the enclosing list is a collapsed icon rail. */
+    protected readonly railCollapsed: _angular_core.Signal<boolean>;
+    /** Items are visible unless collapsible-and-closed. */
+    protected readonly itemsVisible: _angular_core.Signal<boolean>;
+    protected toggle(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkNavGroup, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkNavGroup, "mk-nav-group", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, ["*"], true, never>;
+}
+
+/**
+ * A single step + its content panel. Declared inside `<mk-stepper>`; the
+ * projected content becomes the step body while `label` (and optional
+ * `description`) render in the step header.
+ *
+ * `completed` is a two-way model so a parent can gate a `linear` stepper:
+ * `<mk-step label="Details" [(completed)]="detailsValid()">`.
+ *
+ * ```html
+ * <mk-stepper linear>
+ *   <mk-step label="Account" [completed]="form.valid">…</mk-step>
+ *   <mk-step label="Payment" optional>…</mk-step>
+ * </mk-stepper>
+ * ```
+ */
+declare class MkStep {
+    /** Title shown in the step header. */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Optional secondary line under the label. */
+    readonly description: _angular_core.InputSignal<string>;
+    /** Marks the step optional (skippable in a `linear` stepper). */
+    readonly optional: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether the step is complete (two-way; drives `linear` gating + the ✓). */
+    readonly completed: _angular_core.ModelSignal<boolean>;
+    /** Show the error state in the header (e.g. failed validation). */
+    readonly hasError: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Allow returning to this step after it is completed. */
+    readonly editable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Stable id for the header button (wires `aria-labelledby`). */
+    readonly headerId: string;
+    /** Stable id for the panel (wires `aria-controls`). */
+    readonly panelId: string;
+    /** Whether this step is currently selected. Set by the parent `MkStepper`. */
+    readonly active: _angular_core.WritableSignal<boolean>;
+    /**
+     * The step body, captured so `MkStepper` can render it in the position the
+     * orientation calls for. The host element itself stays empty — the panel
+     * wrapper (and its role/aria) belongs to the stepper, which is the only
+     * place that knows whether this is a tab panel or a disclosure region.
+     */
+    readonly content: _angular_core.Signal<TemplateRef<any>>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkStep, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkStep, "mk-step", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "optional": { "alias": "optional"; "required": false; "isSignal": true; }; "completed": { "alias": "completed"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; }, { "completed": "completedChange"; }, never, ["*"], true, never>;
+}
+
+/** Orientation of the step header rail. */
+type MkStepperOrientation = 'horizontal' | 'vertical';
+/**
+ * Stepper — walks a user through an ordered sequence of `<mk-step>`s with an
+ * accessible header rail (ARIA `tablist` + roving tabindex, Arrow/Home/End
+ * navigation) and a single visible panel.
+ *
+ * In `linear` mode a step is only reachable once every preceding required
+ * (non-`optional`) step reports `completed`. Drive completion from your form
+ * state and move with the `next()` / `previous()` / `reset()` API or by
+ * clicking a reachable header.
+ *
+ * ```html
+ * <mk-stepper #s linear [(selectedIndex)]="index">
+ *   <mk-step label="Account" [completed]="accountValid()">…</mk-step>
+ *   <mk-step label="Address" [completed]="addressValid()">…</mk-step>
+ *   <mk-step label="Review">…</mk-step>
+ * </mk-stepper>
+ * <button mkButton (click)="s.previous()">Back</button>
+ * <button mkButton (click)="s.next()">Next</button>
+ * ```
+ */
+declare class MkStepper {
+    protected readonly i18n: _mk_kit_ui_core.MkI18nStrings;
+    /** Step hosts are projected on the server only — see stepper.html. */
+    protected readonly isServer: boolean;
+    /** Projected steps, kept live via a signal content query. */
+    readonly steps: _angular_core.Signal<readonly MkStep[]>;
+    /** Rendered header buttons, used to move focus. */
+    protected readonly headerButtons: _angular_core.Signal<readonly ElementRef<HTMLButtonElement>[]>;
+    /** Zero-based index of the active step (two-way). */
+    readonly selectedIndex: _angular_core.ModelSignal<number>;
+    /** Header rail orientation. */
+    readonly orientation: _angular_core.InputSignal<MkStepperOrientation>;
+    /** Enforce sequential completion before a step becomes reachable. */
+    readonly linear: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly isHorizontal: _angular_core.Signal<boolean>;
+    /** Emits the newly selected index whenever the active step changes. */
+    readonly selectionChange: _angular_core.OutputEmitterRef<number>;
+    constructor();
+    private readonly clampedIndex;
+    /** 1-based label for the header circle. */
+    protected stepNumber(index: number): number;
+    /**
+     * Whether a step can be selected. In linear mode every earlier required step
+     * must be completed; a completed step is reachable only when `editable`.
+     */
+    isReachable(index: number): boolean;
+    protected select(index: number): void;
+    protected focusHeader(index: number): void;
+    /** Advance to the next reachable step, if any. */
+    next(): void;
+    /** Return to the previous step, if any. */
+    previous(): void;
+    /** Reset to the first step and clear every step's completed flag. */
+    reset(): void;
+    protected onKeydown(event: KeyboardEvent, index: number): void;
+    /** Next header index (wrapping) whose step is reachable. */
+    private nextFocusable;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkStepper, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkStepper, "mk-stepper", never, { "selectedIndex": { "alias": "selectedIndex"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "linear": { "alias": "linear"; "required": false; "isSignal": true; }; }, { "selectedIndex": "selectedIndexChange"; "selectionChange": "selectionChange"; }, ["steps"], ["*"], true, never>;
+}
+
+/** A node in an {@link MkTree}. `children` makes it expandable. */
+interface MkTreeNode {
+    /** Text shown for the node. */
+    label: string;
+    /** Value bound to the selection when the node is chosen (defaults to the node). */
+    value?: unknown;
+    /** Child nodes; a non-empty array makes the node a parent (expandable). */
+    children?: MkTreeNode[];
+    /** Disable selection/toggling of this node (still focusable). */
+    disabled?: boolean;
+    /** Expand this node initially. */
+    expanded?: boolean;
+    /** Optional leading glyph (any short string / emoji). */
+    icon?: string;
+}
+/** One visible row after flattening the tree for keyboard + rendering. */
+interface MkTreeRow {
+    node: MkTreeNode;
+    level: number;
+    posinset: number;
+    setsize: number;
+    expandable: boolean;
+    expanded: boolean;
+}
+/**
+ * Tree — renders hierarchical data following the ARIA tree pattern
+ * (`role="tree"` / `treeitem` with `aria-level`, `aria-expanded`,
+ * `aria-selected`). Supply `nodes`; expansion is managed internally.
+ *
+ * Keyboard: Up/Down move between visible rows, Right expands (or steps into the
+ * first child), Left collapses (or steps out to the parent), Home/End jump, and
+ * Enter/Space toggles expansion and selects (when `selectable`). A single
+ * roving tabindex keeps the whole tree one tab stop.
+ *
+ * ```html
+ * <mk-tree selectable [nodes]="tree" [(selected)]="picked"
+ *   (selectionChange)="onPick($event)" />
+ * ```
+ */
+declare class MkTree {
+    /** The hierarchical data to render. */
+    readonly nodes: _angular_core.InputSignal<readonly MkTreeNode[]>;
+    /** Allow choosing a node (adds selection styling + `aria-selected`). */
+    readonly selectable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Accessible name for the tree. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Two-way selected value (a node's `value`, or the node itself if unset). */
+    readonly selected: _angular_core.ModelSignal<unknown>;
+    /** Emits the selected value whenever the selection changes. */
+    readonly selectionChange: _angular_core.OutputEmitterRef<unknown>;
+    /** Emits a node whenever it is expanded or collapsed. */
+    readonly nodeToggle: _angular_core.OutputEmitterRef<MkTreeNode>;
+    protected readonly rowRefs: _angular_core.Signal<readonly ElementRef<HTMLElement>[]>;
+    /**
+     * Expanded nodes. Survives `nodes` identity changes (a consumer rebuilding
+     * the array keeps the user's expansion state for the node objects it
+     * reuses); a node's `expanded` flag only seeds nodes NOT present in the
+     * previous array — so it applies on first render and to newly added nodes,
+     * without reverting branches the user has since collapsed.
+     */
+    private readonly expandedSet;
+    protected readonly activeIndex: _angular_core.WritableSignal<number>;
+    /** Flattened list of currently visible rows (respects expansion). */
+    protected readonly rows: _angular_core.Signal<MkTreeRow[]>;
+    private valueOf;
+    protected isSelected(node: MkTreeNode): boolean;
+    protected isExpanded(node: MkTreeNode): boolean;
+    protected toggle(node: MkTreeNode): void;
+    private expand;
+    private collapse;
+    protected select(node: MkTreeNode): void;
+    /**
+     * Click on a parent row's chevron: toggle expansion WITHOUT selecting, so
+     * mouse users can open a branch without committing it (hosts like
+     * `mk-tree-select` close on any selection, which would make children
+     * unreachable by mouse otherwise). On leaf rows the click falls through to
+     * the row handler and behaves as a normal row click.
+     */
+    protected onToggleClick(event: Event, index: number): void;
+    /** Click a row: toggle expansion for parents, select when selectable. */
+    protected onRowClick(index: number): void;
+    protected onKeydown(event: KeyboardEvent, index: number): void;
+    /** Index of the nearest preceding row one level up (or the row itself). */
+    private parentIndex;
+    private focusRow;
+    protected tabIndexFor(index: number): number;
+    protected indent(level: number): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkTree, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkTree, "mk-tree", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; "selectionChange": "selectionChange"; "nodeToggle": "nodeToggle"; }, never, never, true, never>;
+}
+
+/** Edge the drawer slides in from. */
+type MkDrawerSide = 'start' | 'end' | 'top' | 'bottom';
+/**
+ * Drawer — a declarative slide-out panel anchored to a viewport edge, driven by
+ * a two-way `open`. Ideal for admin/CMS side panels: filters, entity details,
+ * settings, quick-create forms. Traps focus while open, closes on backdrop
+ * click or Escape, restores focus on close, and locks body scroll when modal.
+ *
+ * Slots: `[mkDrawerHeader]` (extra header content), default content (body),
+ * `[mkDrawerFooter]` (sticky footer).
+ *
+ * ```html
+ * <button mkButton (click)="filters.set(true)">Filters</button>
+ * <mk-drawer [(open)]="filters" side="end" heading="Filters">
+ *   …filter form…
+ *   <div mkDrawerFooter>
+ *     <button mkButton variant="ghost" (click)="filters.set(false)">Close</button>
+ *     <button mkButton (click)="apply()">Apply</button>
+ *   </div>
+ * </mk-drawer>
+ * ```
+ */
+declare class MkDrawer {
+    private readonly document;
+    /** Localised strings (override globally via `provideMkI18n`). */
+    protected readonly i18n: _mk_kit_ui_core.MkI18nStrings;
+    private readonly isBrowser;
+    private readonly panelRef;
+    /** Whether the drawer is open (two-way). */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** Viewport edge to anchor to. */
+    readonly side: _angular_core.InputSignal<MkDrawerSide>;
+    /** Panel width (start/end) or height (top/bottom) — any CSS length. */
+    readonly size: _angular_core.InputSignal<string>;
+    /** Render a dimmed backdrop and lock body scroll (modal). */
+    readonly hasBackdrop: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Close when the backdrop is clicked. */
+    readonly closeOnBackdrop: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Close on the Escape key. */
+    readonly closeOnEscape: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Trap Tab focus inside the panel while open. */
+    readonly trapFocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Optional heading rendered in the header. */
+    readonly heading: _angular_core.InputSignal<string>;
+    /** Hide the header close button. */
+    readonly hideClose: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Accessible name when no `heading` is provided. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly titleId: string;
+    private focusTrap?;
+    private previouslyFocused;
+    private scrollLocked;
+    constructor();
+    private sync;
+    /** Release the focus trap + scroll lock if destroyed while open. */
+    ngOnDestroy(): void;
+    /** Close the drawer. */
+    close(): void;
+    protected onBackdrop(): void;
+    protected onEscape(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkDrawer, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkDrawer, "mk-drawer", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; "isSignal": true; }; "closeOnBackdrop": { "alias": "closeOnBackdrop"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "trapFocus": { "alias": "trapFocus"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "hideClose": { "alias": "hideClose"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["[mkDrawerHeader]", "*", "[mkDrawerFooter]"], true, never>;
+}
+
+/**
+ * Toolbar — a horizontal action bar: content flows on the start side, anything
+ * marked `mkToolbarEnd` is pushed to the end. Handy above tables and lists for
+ * a title/search on the left and actions on the right.
+ *
+ * The projected controls are ordinary tab stops (no roving focus), so this is a
+ * layout container, not an ARIA `toolbar` widget.
+ *
+ * ```html
+ * <mk-toolbar bordered aria-label="Users actions">
+ *   <strong>Users</strong>
+ *   <span mkToolbarEnd>
+ *     <button mkButton variant="outline">Export</button>
+ *     <button mkButton>New user</button>
+ *   </span>
+ * </mk-toolbar>
+ * ```
+ */
+declare class MkToolbar {
+    /** Wrap the bar in a themed, bordered surface. */
+    readonly bordered: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Accessible name (also promotes the bar to an ARIA `group`). */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkToolbar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkToolbar, "mk-toolbar", never, { "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[mkToolbarEnd]"], true, never>;
+}
+
+/**
+ * PageHeader — the standard heading block at the top of an admin/CMS page: an
+ * optional breadcrumb, a page title with optional description and inline meta
+ * (badges/status), a right-aligned actions cluster, and an optional tab row
+ * beneath. Everything but the title/description is projected, so it composes
+ * with `mk-breadcrumb`, `mk-tabs`, buttons, badges, etc.
+ *
+ * Slots: `[mkPageHeaderBreadcrumb]`, `[mkPageHeaderMeta]` (beside the title),
+ * `[mkPageHeaderActions]` (right), `[mkPageHeaderTabs]` (below).
+ *
+ * ```html
+ * <mk-page-header heading="Articles" description="Manage your published posts.">
+ *   <mk-breadcrumb mkPageHeaderBreadcrumb …></mk-breadcrumb>
+ *   <mk-badge mkPageHeaderMeta tone="success">Live</mk-badge>
+ *   <div mkPageHeaderActions>
+ *     <button mkButton variant="outline">Import</button>
+ *     <button mkButton>New article</button>
+ *   </div>
+ * </mk-page-header>
+ * ```
+ */
+declare class MkPageHeader {
+    /** The page title (rendered as an `<h1>`). */
+    readonly heading: _angular_core.InputSignal<string>;
+    /** Supporting description under the title. */
+    readonly description: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkPageHeader, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkPageHeader, "mk-page-header", never, { "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; }, {}, never, ["[mkPageHeaderBreadcrumb]", "[mkPageHeaderMedia]", "[mkPageHeaderMeta]", "[mkPageHeaderActions]", "[mkPageHeaderTabs]"], true, never>;
+}
+
+/** A single actionable entry in the {@link MkCommandPalette}. */
+interface MkCommand {
+    /** Stable unique id. */
+    id: string;
+    /** Text shown (and the primary search target). */
+    label: string;
+    /** Optional section heading this command is grouped under. */
+    group?: string;
+    /** Secondary text shown after the label. */
+    hint?: string;
+    /** Name of a registered icon (see `MkIconRegistry`). */
+    icon?: string;
+    /** Extra search terms (not shown). */
+    keywords?: string;
+    /** Display-only shortcut hint, e.g. `⌘S`. */
+    shortcut?: string;
+    /** Disable the command (skipped by keyboard, not runnable). */
+    disabled?: boolean;
+    /** Invoked when the command is chosen. */
+    run?: () => void;
+}
+interface Group {
+    name: string;
+    items: {
+        cmd: MkCommand;
+        index: number;
+    }[];
+}
+/**
+ * CommandPalette — a modal ⌘K/Ctrl+K menu for fast, keyboard-first actions and
+ * navigation. Supply a flat `commands` list (optionally grouped); the palette
+ * filters as you type, groups results, and runs the chosen command. Implements
+ * the ARIA combobox + listbox pattern with full keyboard support and focus
+ * trapping.
+ *
+ * Mount it once near your app root and bind `open` (the built-in hotkey toggles
+ * it, or open it yourself).
+ *
+ * ```html
+ * <mk-command-palette [(open)]="paletteOpen" [commands]="commands"
+ *   (commandSelected)="run($event)" />
+ * ```
+ */
+declare class MkCommandPalette {
+    private readonly document;
+    private readonly isBrowser;
+    protected readonly i18n: _mk_kit_ui_core.MkI18nStrings;
+    private readonly panelRef;
+    private readonly inputRef;
+    /** Whether the palette is open (two-way). */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** The commands to search and run. */
+    readonly commands: _angular_core.InputSignal<readonly MkCommand[]>;
+    /** Search field placeholder. */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Message shown when nothing matches. */
+    readonly emptyMessage: _angular_core.InputSignal<string>;
+    /** Toggle open with ⌘K / Ctrl+K anywhere. */
+    readonly hotkey: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Emits the chosen command (its own `run` callback also fires). */
+    readonly commandSelected: _angular_core.OutputEmitterRef<MkCommand>;
+    protected readonly query: _angular_core.WritableSignal<string>;
+    protected readonly activeIndex: _angular_core.WritableSignal<number>;
+    readonly listId: string;
+    private focusTrap?;
+    private scrollLocked;
+    private previouslyFocused;
+    /** Commands matching the current query (label + keywords + group). */
+    protected readonly filtered: _angular_core.Signal<readonly MkCommand[]>;
+    /** Filtered commands bucketed into ordered groups (flat index preserved). */
+    protected readonly grouped: _angular_core.Signal<Group[]>;
+    constructor();
+    protected optionId(index: number): string;
+    protected groupId(index: number): string;
+    private sync;
+    /**
+     * Release the scroll lock + focus trap if the palette is destroyed while
+     * open (e.g. a command triggered a route navigation).
+     */
+    ngOnDestroy(): void;
+    protected onGlobalKey(event: Event): void;
+    protected onInput(event: Event): void;
+    protected onKeydown(event: Event): void;
+    protected select(index: number): void;
+    protected close(): void;
+    private move;
+    private firstEnabled;
+    private lastEnabled;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkCommandPalette, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkCommandPalette, "mk-command-palette", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "commands": { "alias": "commands"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "hotkey": { "alias": "hotkey"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "commandSelected": "commandSelected"; }, never, never, true, never>;
+}
+
+/** Split direction for {@link MkSplitter}. */
+type MkSplitterOrientation = 'horizontal' | 'vertical';
+/**
+ * Splitter — two resizable panes with a draggable, keyboard-operable separator
+ * (ARIA `separator` with `aria-valuenow`). `horizontal` places the panes
+ * side-by-side (a vertical handle); `vertical` stacks them (a horizontal
+ * handle). The start pane's size is a two-way `position` model (percent).
+ *
+ * Project the panes with `mkSplitterStart` / `mkSplitterEnd`:
+ * ```html
+ * <mk-splitter [(position)]="split" [min]="20">
+ *   <nav mkSplitterStart>…</nav>
+ *   <main mkSplitterEnd>…</main>
+ * </mk-splitter>
+ * ```
+ * Drag the handle, or focus it and use Arrow keys (Home/End jump to min/max).
+ */
+declare class MkSplitter {
+    private readonly host;
+    protected readonly i18n: _mk_kit_ui_core.MkI18nStrings;
+    /** `horizontal` = side-by-side; `vertical` = stacked. */
+    readonly orientation: _angular_core.InputSignal<MkSplitterOrientation>;
+    /** Two-way position of the separator = start-pane size, in percent (0–100). */
+    readonly position: _angular_core.ModelSignal<number>;
+    /** Minimum start-pane size (percent). */
+    readonly min: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Maximum start-pane size (percent). */
+    readonly max: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Keyboard resize increment (percent). */
+    readonly step: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Disable resizing. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Accessible label for the separator. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    private dragging;
+    /** Clamped size actually applied (defends against out-of-range inputs). */
+    protected readonly clampedSize: _angular_core.Signal<number>;
+    protected onPointerdown(event: PointerEvent): void;
+    protected onPointermove(event: PointerEvent): void;
+    protected onPointerup(event: PointerEvent): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    private setSize;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkSplitter, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkSplitter, "mk-splitter", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "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; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "position": "positionChange"; }, never, ["[mkSplitterStart]", "[mkSplitterEnd]"], true, never>;
+}
+
+/** Corner placement for a fixed {@link MkFab}. `static` renders it inline. */
+type MkFabPosition = 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start' | 'static';
+/** A speed-dial action button projected into {@link MkFab}. */
+declare class MkFabAction {
+    readonly el: ElementRef<HTMLElement>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkFabAction, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MkFabAction, "[mkFabAction]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * FAB — a floating action button, fixed to a corner (or `static` for inline
+ * use). Project the icon as content and set `label` for the accessible name
+ * (shown too when `extended`). Add `mkFabAction` buttons to turn it into a
+ * speed-dial that reveals them on toggle.
+ *
+ * ```html
+ * <mk-fab label="Create" position="bottom-end">
+ *   <svg>…</svg>
+ *   <button mkFabAction (click)="newDoc()">Doc</button>
+ *   <button mkFabAction (click)="newFolder()">Folder</button>
+ * </mk-fab>
+ * ```
+ */
+declare class MkFab {
+    private readonly actions;
+    private readonly trigger;
+    private readonly injector;
+    protected readonly i18n: _mk_kit_ui_core.MkI18nStrings;
+    /** Id of the actions container, referenced by the trigger's aria-controls. */
+    protected readonly actionsId: string;
+    /** Corner placement (or `static` to render inline). */
+    readonly position: _angular_core.InputSignal<MkFabPosition>;
+    /** Semantic tone. */
+    readonly tone: _angular_core.InputSignal<MkTone>;
+    /** Size scale. */
+    readonly size: _angular_core.InputSignal<MkSize>;
+    /** Accessible label (and visible text when `extended`). */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Render as a pill with the label beside the icon. */
+    readonly extended: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Disable the button. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Two-way open state of the speed-dial. */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** Emitted when the FAB is activated (only when it has no actions). */
+    readonly action: _angular_core.OutputEmitterRef<void>;
+    protected readonly hasActions: _angular_core.Signal<boolean>;
+    protected onClick(): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkFab, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkFab, "mk-fab", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "extended": { "alias": "extended"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "action": "action"; }, ["actions"], ["*", "[mkFabAction]"], true, never>;
+}
+
+/**
+ * BackToTop — a floating button that appears once the page (or a scroll target)
+ * has scrolled past `threshold`, and smooth-scrolls back to the top on click.
+ *
+ * ```html
+ * <mk-back-to-top [threshold]="600" />
+ * ```
+ * Pass `[target]` to watch/scroll a specific scroll container instead of the
+ * window.
+ */
+declare class MkBackToTop {
+    private readonly document;
+    private readonly isBrowser;
+    protected readonly i18n: _mk_kit_ui_core.MkI18nStrings;
+    /** Scroll distance (px) before the button appears. */
+    readonly threshold: _angular_core.InputSignal<number>;
+    /** Optional scroll container; defaults to the window. */
+    readonly target: _angular_core.InputSignal<HTMLElement | null>;
+    /** Accessible label. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * Smooth-scroll on click. Ignored under `prefers-reduced-motion: reduce`
+     * (programmatic `scrollTo` is not toned down by browsers, so the component
+     * falls back to an instant jump itself).
+     */
+    readonly smooth: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    private readonly scrollY;
+    protected readonly visible: _angular_core.Signal<boolean>;
+    private scrollSource?;
+    private readonly onScroll;
+    constructor();
+    protected scrollToTop(): void;
+    /**
+     * Once the page is back at the top the button hides itself, which would
+     * silently drop keyboard focus on `<body>` (WCAG 2.4.3). Move focus to the
+     * scroll container instead, so the tab sequence resumes from the top.
+     */
+    private focusScrollTarget;
+    /** `prefers-reduced-motion: reduce`, SSR-safe. */
+    private prefersReducedMotion;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkBackToTop, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkBackToTop, "mk-back-to-top", never, { "threshold": { "alias": "threshold"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "smooth": { "alias": "smooth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Which axes get a custom scrollbar for {@link MkScrollArea}. */
+type MkScrollAreaOrientation = 'vertical' | 'horizontal' | 'both';
+type Axis = 'vertical' | 'horizontal';
+/**
+ * ScrollArea — a scroll container that hides the native scrollbar and renders
+ * its own themed overlay bars (à la Radix ScrollArea). The projected content
+ * scrolls inside a real, keyboard-focusable viewport, so native wheel / arrow
+ * scrolling keeps working; the custom bars are decorative (`aria-hidden`) and
+ * draggable.
+ *
+ * ```html
+ * <mk-scroll-area maxHeight="20rem">
+ *   <p>…lots of content…</p>
+ * </mk-scroll-area>
+ * ```
+ *
+ * Set `orientation` to `horizontal` / `both` for a horizontal bar, and
+ * `hideDelay` to auto-hide the bars after inactivity (`0` = always visible).
+ */
+declare class MkScrollArea {
+    private readonly isBrowser;
+    private readonly viewportRef;
+    private readonly contentRef;
+    /** Optional CSS max-height for the viewport, e.g. `'20rem'`. */
+    readonly maxHeight: _angular_core.InputSignal<string>;
+    /**
+     * Accessible name for the scrollable viewport. When set, the viewport is
+     * exposed as a labelled `region` landmark — recommended, since the viewport
+     * is keyboard-focusable (`tabindex="0"`) and a focusable scroll container
+     * should have an accessible name. When empty, no role / label is added.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Which axes render a custom bar. */
+    readonly orientation: _angular_core.InputSignal<MkScrollAreaOrientation>;
+    /** Auto-hide the bars after this many ms of inactivity (`0` = always on). */
+    readonly hideDelay: _angular_core.InputSignalWithTransform<number, unknown>;
+    protected readonly viewportId: string;
+    protected readonly scrollTop: _angular_core.WritableSignal<number>;
+    protected readonly scrollLeft: _angular_core.WritableSignal<number>;
+    protected readonly scrollHeight: _angular_core.WritableSignal<number>;
+    protected readonly scrollWidth: _angular_core.WritableSignal<number>;
+    protected readonly clientHeight: _angular_core.WritableSignal<number>;
+    protected readonly clientWidth: _angular_core.WritableSignal<number>;
+    protected readonly showVertical: _angular_core.Signal<boolean>;
+    protected readonly showHorizontal: _angular_core.Signal<boolean>;
+    /** The viewport actually overflows on the given axis. */
+    protected readonly vScrollable: _angular_core.Signal<boolean>;
+    protected readonly hScrollable: _angular_core.Signal<boolean>;
+    /** Thumb length as a fraction of the track (`clientHeight / scrollHeight`). */
+    protected readonly vThumbSize: _angular_core.Signal<number>;
+    protected readonly hThumbSize: _angular_core.Signal<number>;
+    /** Thumb position as a fraction of the scroll range (0 = start, 1 = end). */
+    protected readonly vThumbOffset: _angular_core.Signal<number>;
+    protected readonly hThumbOffset: _angular_core.Signal<number>;
+    /** CSS `top` / `left` for the thumb, accounting for its own length. */
+    protected readonly vThumbTop: _angular_core.Signal<string>;
+    protected readonly hThumbLeft: _angular_core.Signal<string>;
+    private readonly _visible;
+    /** Whether the bars are currently shown (always true when `hideDelay` is 0). */
+    protected readonly barsVisible: _angular_core.Signal<boolean>;
+    private dragAxis;
+    private dragStartPointer;
+    private dragStartScroll;
+    private hideTimer?;
+    private resizeObserver?;
+    private scrollRaf;
+    constructor();
+    /** Snapshot the viewport's scroll metrics into signals. */
+    private measure;
+    /**
+     * rAF-coalesced (same pattern as `MkScrollspy`): a burst of scroll events
+     * per frame triggers a single batch of layout reads + signal writes, and the
+     * auto-hide idle timer restarts once per flushed frame rather than per raw
+     * event.
+     */
+    protected onScroll(): void;
+    protected onEnter(): void;
+    protected onLeave(): void;
+    protected onThumbPointerdown(event: PointerEvent, axis: Axis): void;
+    protected onThumbPointermove(event: PointerEvent): void;
+    protected onThumbPointerup(event: PointerEvent): void;
+    protected onTrackPointerdown(event: PointerEvent, axis: Axis): void;
+    private show;
+    private scheduleHide;
+    private clearHideTimer;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkScrollArea, never>;
+    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 type { MkCommand, MkDrawerSide, MkFabPosition, MkPageItem, MkScrollAreaOrientation, MkSplitterOrientation, MkStepperOrientation, MkTabsVariant, MkTreeNode };