@mk-kit/ui 0.52.1 → 0.53.0

package/fesm2022/mk-kit-ui.mjs

@@ -11,7 +11,9 @@ export * from '@mk-kit/ui/navigation';
 export * from '@mk-kit/ui/forms';
 export * from '@mk-kit/ui/datetime';
 export * from '@mk-kit/ui/table';
+export * from '@mk-kit/ui/status';
 export * from '@mk-kit/ui/data';
+export * from '@mk-kit/ui/kanban';
 export * from '@mk-kit/ui/feedback';
 export * from '@mk-kit/ui/rich-text';
 export * from '@mk-kit/ui/block-editor';

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

@@ -1 +1 @@
-{"version":3,"file":"mk-kit-ui.mjs","sources":["../../../projects/mk-kit/src/public-api.ts","../../../projects/mk-kit/src/mk-kit-ui.ts"],"sourcesContent":["/*\n * Public API Surface of @mk-kit/ui.\n *\n * The library ships Material-style secondary entry points — import from the\n * group entries (`@mk-kit/ui/forms`, `@mk-kit/ui/table`, …) so a code-split\n * app only carries the groups each chunk uses. This root entry re-exports\n * everything for convenience; importing it eagerly pulls all groups into the\n * importing chunk.\n */\nexport * from '@mk-kit/ui/core';\nexport * from '@mk-kit/ui/core/signal-forms';\nexport * from '@mk-kit/ui/icon';\nexport * from '@mk-kit/ui/icon/extended';\nexport * from '@mk-kit/ui/chip';\nexport * from '@mk-kit/ui/checkbox';\nexport * from '@mk-kit/ui/button';\nexport * from '@mk-kit/ui/directives';\nexport * from '@mk-kit/ui/dnd';\nexport * from '@mk-kit/ui/navigation';\nexport * from '@mk-kit/ui/forms';\nexport * from '@mk-kit/ui/datetime';\nexport * from '@mk-kit/ui/table';\nexport * from '@mk-kit/ui/data';\nexport * from '@mk-kit/ui/feedback';\nexport * from '@mk-kit/ui/rich-text';\nexport * from '@mk-kit/ui/block-editor';\nexport * from '@mk-kit/ui/context-menu';\nexport * from '@mk-kit/ui/layout';\nexport * from '@mk-kit/ui/chat';\nexport * from '@mk-kit/ui/query-builder';\nexport * from '@mk-kit/ui/dynamic-form';\nexport * from '@mk-kit/ui/media';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;AAQG;;ACRH;;AAEG"}
+{"version":3,"file":"mk-kit-ui.mjs","sources":["../../../projects/mk-kit/src/public-api.ts","../../../projects/mk-kit/src/mk-kit-ui.ts"],"sourcesContent":["/*\n * Public API Surface of @mk-kit/ui.\n *\n * The library ships Material-style secondary entry points — import from the\n * group entries (`@mk-kit/ui/forms`, `@mk-kit/ui/table`, …) so a code-split\n * app only carries the groups each chunk uses. This root entry re-exports\n * everything for convenience; importing it eagerly pulls all groups into the\n * importing chunk.\n */\nexport * from '@mk-kit/ui/core';\nexport * from '@mk-kit/ui/core/signal-forms';\nexport * from '@mk-kit/ui/icon';\nexport * from '@mk-kit/ui/icon/extended';\nexport * from '@mk-kit/ui/chip';\nexport * from '@mk-kit/ui/checkbox';\nexport * from '@mk-kit/ui/button';\nexport * from '@mk-kit/ui/directives';\nexport * from '@mk-kit/ui/dnd';\nexport * from '@mk-kit/ui/navigation';\nexport * from '@mk-kit/ui/forms';\nexport * from '@mk-kit/ui/datetime';\nexport * from '@mk-kit/ui/table';\nexport * from '@mk-kit/ui/status';\nexport * from '@mk-kit/ui/data';\nexport * from '@mk-kit/ui/kanban';\nexport * from '@mk-kit/ui/feedback';\nexport * from '@mk-kit/ui/rich-text';\nexport * from '@mk-kit/ui/block-editor';\nexport * from '@mk-kit/ui/context-menu';\nexport * from '@mk-kit/ui/layout';\nexport * from '@mk-kit/ui/chat';\nexport * from '@mk-kit/ui/query-builder';\nexport * from '@mk-kit/ui/dynamic-form';\nexport * from '@mk-kit/ui/media';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;AAQG;;ACRH;;AAEG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mk-kit/ui",
-  "version": "0.52.1",
+  "version": "0.53.0",
   "publishConfig": {
     "access": "public"
   },
@@ -129,6 +129,10 @@
       "types": "./types/mk-kit-ui-icon-extended.d.ts",
       "default": "./fesm2022/mk-kit-ui-icon-extended.mjs"
     },
+    "./kanban": {
+      "types": "./types/mk-kit-ui-kanban.d.ts",
+      "default": "./fesm2022/mk-kit-ui-kanban.mjs"
+    },
     "./layout": {
       "types": "./types/mk-kit-ui-layout.d.ts",
       "default": "./fesm2022/mk-kit-ui-layout.mjs"
@@ -169,6 +173,10 @@
       "types": "./types/mk-kit-ui-rich-text.d.ts",
       "default": "./fesm2022/mk-kit-ui-rich-text.mjs"
     },
+    "./status": {
+      "types": "./types/mk-kit-ui-status.d.ts",
+      "default": "./fesm2022/mk-kit-ui-status.mjs"
+    },
     "./table": {
       "types": "./types/mk-kit-ui-table.d.ts",
       "default": "./fesm2022/mk-kit-ui-table.mjs"

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

@@ -6,7 +6,7 @@ import { ControlValueAccessor } from '@angular/forms';
 import * as _mk_kit_core from '@mk-kit/core';
 import { MkDiffRow } from '@mk-kit/core';
 export { MkAnsiSpan, MkDiffOp, MkDiffOptions, MkDiffRow, MkDiffSegment, MkDiffStats, MkMarkdownAlign, MkMarkdownBlock, MkMarkdownInline, MkMarkdownList, MkMarkdownListItem, MkMarkdownParseOptions, MkMarkdownRenderOptions, mkComputeDiff, mkDiffStats, mkParseAnsi, mkParseMarkdown, mkRenderMarkdown, mkStripAnsi } from '@mk-kit/core';
-import { MkDropEvent } from '@mk-kit/ui/dnd';
+export * from '@mk-kit/ui/status';
 
 /** Surface treatment for a {@link MkCard}. */
 type MkCardVariant = 'elevated' | 'outlined' | 'filled';
@@ -84,106 +84,6 @@ declare class MkDivider {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkDivider, "mk-divider", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-/** Visual treatment for a {@link MkBadge}. */
-type MkBadgeVariant = 'solid' | 'soft' | 'outline';
-/**
- * Badge — a compact status pill, typically for counts or short state labels.
- * Set `dot` for a minimal notification indicator with no text.
- *
- * ```html
- * <mk-badge tone="success">Active</mk-badge>
- * <mk-badge tone="danger" variant="solid">3</mk-badge>
- * <mk-badge tone="danger" dot aria-label="Unread messages" />
- * ```
- */
-declare class MkBadge {
-    /** Semantic color tone. */
-    readonly tone: _angular_core.InputSignal<MkTone>;
-    /** Visual treatment. */
-    readonly variant: _angular_core.InputSignal<MkBadgeVariant>;
-    /** Size scale. */
-    readonly size: _angular_core.InputSignal<MkSize>;
-    /** Render as a tiny dot (no text) for notification indicators. */
-    readonly dot: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkBadge, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkBadge, "mk-badge", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
-}
-
-/** Corner of the host an {@link MkBadgeOverlay} is anchored to. */
-type MkBadgeOverlayPosition = 'top-end' | 'top-start' | 'bottom-end' | 'bottom-start';
-/**
- * Badge overlay — anchors a small badge (count, dot or short text) to a corner
- * of ANY element: an icon button, an avatar, a tab label. The host stays a
- * single tab stop; the badge is a decorative, non-focusable child.
- *
- * - Numbers above `mkBadgeOverlayMax` (default 99) collapse to `99+`.
- * - `mkBadgeOverlayDot` renders a textless dot ("something is new").
- * - `mkBadgeOverlayAriaLabel` is the screen-reader text ("3 unread"). It is
- *   rendered in a visually hidden span and wired to the host with
- *   `aria-describedby`, so it is announced after the host's own name even
- *   when the host has an `aria-label`. When it is given, the visible badge is
- *   `aria-hidden` so the count is not read twice.
- * - Positions use logical insets, so `top-end` sits at the top-right in LTR
- *   and the top-left in RTL.
- *
- * The badge is painted with the global `.mk-badge-overlay` styles from
- * `@mk-kit/ui/styles.css` and follows the `--mk-*` tone tokens.
- *
- * ```html
- * <button mkButton iconOnly aria-label="Notifications"
- *         [mkBadgeOverlay]="unread()" mkBadgeOverlayTone="danger"
- *         [mkBadgeOverlayAriaLabel]="unread() + ' unread'">
- *   <mk-icon name="bell" />
- * </button>
- *
- * <mk-avatar name="Ada Lovelace" mkBadgeOverlay mkBadgeOverlayDot
- *            mkBadgeOverlayTone="success" mkBadgeOverlayPosition="bottom-end" />
- * ```
- */
-declare class MkBadgeOverlay {
-    private readonly host;
-    private readonly renderer;
-    private readonly document;
-    private readonly isBrowser;
-    /**
-     * Badge content — a count or a short label. `null` / empty hides the badge
-     * unless `mkBadgeOverlayDot` is set. Numeric strings are treated as numbers
-     * so `mkBadgeOverlay="120"` also collapses to `99+`.
-     */
-    readonly content: _angular_core.InputSignal<string | number | null | undefined>;
-    /** Corner the badge is anchored to (logical: `end` flips in RTL). */
-    readonly position: _angular_core.InputSignal<MkBadgeOverlayPosition>;
-    /** Semantic color tone (same scale as `mk-badge`). */
-    readonly tone: _angular_core.InputSignal<MkTone>;
-    /** Render a textless dot instead of the content. */
-    readonly dot: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Numbers above this render as `<max>+`. `0` disables the cap. */
-    readonly max: _angular_core.InputSignalWithTransform<number, unknown>;
-    /** Hide the badge while keeping the directive (and its aria wiring) in place. */
-    readonly hidden: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /**
-     * Screen-reader text for the badge, e.g. `"3 unread"`. Announced as the
-     * host's description; the visible badge becomes `aria-hidden`.
-     */
-    readonly ariaLabel: _angular_core.InputSignal<string>;
-    /** The text painted in the badge (`''` in dot mode). */
-    readonly label: _angular_core.Signal<string>;
-    /** Whether the badge is currently rendered. */
-    readonly visible: _angular_core.Signal<boolean>;
-    private readonly srId;
-    private badge;
-    private sr;
-    /** Set when WE made the host positioned, so we can undo it on removal. */
-    private positionedHost;
-    constructor();
-    private attach;
-    private detach;
-    /** Create / update / remove the hidden description and its aria-describedby link. */
-    private syncSr;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkBadgeOverlay, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MkBadgeOverlay, "[mkBadgeOverlay]", never, { "content": { "alias": "mkBadgeOverlay"; "required": false; "isSignal": true; }; "position": { "alias": "mkBadgeOverlayPosition"; "required": false; "isSignal": true; }; "tone": { "alias": "mkBadgeOverlayTone"; "required": false; "isSignal": true; }; "dot": { "alias": "mkBadgeOverlayDot"; "required": false; "isSignal": true; }; "max": { "alias": "mkBadgeOverlayMax"; "required": false; "isSignal": true; }; "hidden": { "alias": "mkBadgeOverlayHidden"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "mkBadgeOverlayAriaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
 /** Visual treatment for a {@link MkTag}. */
 type MkTagVariant = 'solid' | 'soft' | 'outline';
 /**
@@ -315,36 +215,6 @@ declare class MkListItem {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkListItem, "mk-list-item", never, { "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "activated": "activated"; }, never, ["[mkListLeading]", "*", "[mkListTrailing]"], true, never>;
 }
 
-/**
- * EmptyState — a centered placeholder for "nothing here yet" situations: empty
- * tables, no search results, a fresh dashboard, a cleared inbox. Provide a
- * `title` (and usually a `description`), an `icon` or projected media, and
- * call-to-action buttons via the actions slot.
- *
- * Slots: `[mkEmptyStateMedia]` (custom illustration, overrides `icon`), default
- * content (extra body), `[mkEmptyStateActions]` (buttons).
- *
- * ```html
- * <mk-empty-state icon="search" title="No results"
- *   description="Try adjusting your filters.">
- *   <button mkButton mkEmptyStateActions variant="outline">Clear filters</button>
- * </mk-empty-state>
- * ```
- */
-declare class MkEmptyState {
-    /** Name of a registered icon shown above the title (ignored if media is projected). */
-    readonly icon: _angular_core.InputSignal<string>;
-    /** Main heading, e.g. "No invoices yet". */
-    readonly title: _angular_core.InputSignal<string>;
-    /** Supporting sentence under the title. */
-    readonly description: _angular_core.InputSignal<string>;
-    /** Overall scale of the block. */
-    readonly size: _angular_core.InputSignal<MkSize>;
-    protected readonly iconSize: () => 28 | 48 | 36;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkEmptyState, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkEmptyState, "mk-empty-state", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["[mkEmptyStateMedia]", "*", "[mkEmptyStateActions]"], true, never>;
-}
-
 /**
  * Timeline — a vertical sequence of chronological events (activity feeds, order
  * status, audit logs). A container for `<mk-timeline-item>`s that draws the
@@ -796,28 +666,6 @@ declare class MkProgressRing {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkProgressRing, "mk-progress-ring", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "thickness": { "alias": "thickness"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-/**
- * Spinner — a circular indeterminate loading indicator. Exposes `role="status"`
- * with a visually-hidden label so assistive tech announces the loading state.
- * The animation slows under `prefers-reduced-motion`.
- *
- * ```html
- * <mk-spinner />
- * <mk-spinner size="lg" tone="neutral" label="Fetching results" />
- * ```
- */
-declare class MkSpinner {
-    protected readonly i18n: _mk_kit_ui_core.MkI18nStrings;
-    /** Size scale. */
-    readonly size: _angular_core.InputSignal<MkSize>;
-    /** Semantic color tone. */
-    readonly tone: _angular_core.InputSignal<MkTone>;
-    /** Visually-hidden status label announced to screen readers. */
-    readonly label: _angular_core.InputSignal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkSpinner, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkSpinner, "mk-spinner", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
 /**
  * Shared, framework-agnostic helpers for the mk-kit SVG charts. Pure functions
  * only — no Angular, no DOM — so they stay trivially testable and reusable.
@@ -2442,98 +2290,6 @@ declare class MkDiff {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkDiff, "mk-diff", never, { "before": { "alias": "before"; "required": false; "isSignal": true; }; "after": { "alias": "after"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "wordHighlight": { "alias": "wordHighlight"; "required": false; "isSignal": true; }; "lineNumbers": { "alias": "lineNumbers"; "required": false; "isSignal": true; }; "ignoreTrailingWhitespace": { "alias": "ignoreTrailingWhitespace"; "required": false; "isSignal": true; }; "showStats": { "alias": "showStats"; "required": false; "isSignal": true; }; "beforeLabel": { "alias": "beforeLabel"; "required": false; "isSignal": true; }; "afterLabel": { "alias": "afterLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-/** A single draggable card on a {@link MkKanban} board. */
-interface MkKanbanCard {
-    /** Stable identity used for tracking and move events. */
-    id: unknown;
-    /** Text shown by the default card renderer. */
-    title: string;
-    /** Arbitrary extra fields for custom card templates. */
-    [key: string]: unknown;
-}
-/** A column (bucket) of {@link MkKanbanCard}s on a {@link MkKanban} board. */
-interface MkKanbanColumn {
-    /** Stable identity used for tracking and move events. */
-    id: unknown;
-    /** Heading shown in the column header and used as its aria-label. */
-    title: string;
-    /** The ordered cards contained in this column. */
-    cards: MkKanbanCard[];
-}
-/**
- * Emitted by {@link MkKanban} after a card has been moved (between or within
- * columns) and the two-way `columns` model has been updated.
- */
-interface MkKanbanCardMovedEvent {
-    /** The card that was moved. */
-    card: MkKanbanCard;
-    /** `id` of the column the card came from. */
-    from: unknown;
-    /** `id` of the column the card was dropped into. */
-    to: unknown;
-    /** The card's index within the source column before the move. */
-    fromIndex: number;
-    /** The card's index within the destination column after the move. */
-    toIndex: number;
-}
-/**
- * Kanban board — a horizontal row of columns whose cards can be dragged and
- * reordered within a column or transferred between columns. Built on the dnd
- * group's connected `[mkDropList]` / `[mkDrag]` directives, so it inherits both
- * pointer and keyboard dragging (WCAG 2.1.1) for free.
- *
- * Bind `columns` two-way; the model is updated immutably on each drop. Project
- * an `<ng-template>` to render custom card content — it receives the card as
- * `$implicit` and the owning column as `column`:
- *
- * ```html
- * <mk-kanban [(columns)]="board" (cardMoved)="onMoved($event)">
- *   <ng-template #cardTemplate let-card let-column="column">
- *     <strong>{{ card.title }}</strong>
- *   </ng-template>
- * </mk-kanban>
- * ```
- */
-declare class MkKanban {
-    /** The board's columns and their cards (two-way). Updated on every drop. */
-    readonly columns: _angular_core.ModelSignal<MkKanbanColumn[]>;
-    /** Disable all dragging on the board. */
-    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Emitted after the model is updated when a card is moved. */
-    readonly cardMoved: _angular_core.OutputEmitterRef<MkKanbanCardMovedEvent>;
-    /** Optional consumer-projected card renderer (`$implicit` = card). */
-    protected readonly cardTemplate: _angular_core.Signal<TemplateRef<unknown> | undefined>;
-    /** Board-scoped prefix so this board's drop-list ids never collide. */
-    private readonly boardId;
-    /** Column count as its own computed so id arrays survive card-only updates. */
-    private readonly columnCount;
-    /** Stable drop-list id per column, positionally matched to `columns()`. */
-    protected readonly listIds: _angular_core.Signal<string[]>;
-    /**
-     * Per-column connected-target ids (every other column's list). One stable
-     * array per column, recomputed only when the column count changes — a fresh
-     * array per change-detection pass would dirty each `MkDropList`'s
-     * `connectedTo` input identity on every cycle.
-     */
-    private readonly connections;
-    /** Ids of every other column's list — the connected transfer targets for `i`. */
-    protected connectedTo(index: number): string[];
-    /**
-     * Apply a drop from the dnd module. Reads the source/target columns from the
-     * event's containers (matched by their drop-list ids), updates the two-way
-     * `columns` model immutably, then emits {@link cardMoved}.
-     */
-    protected onDrop(event: MkDropEvent<MkKanbanCard>): void;
-    /**
-     * Immutably move the card at `fromIndex` of column `fromCol` to `toIndex` of
-     * column `toCol`, updating the model and emitting {@link cardMoved}. Column
-     * indices refer to positions in `columns()`.
-     */
-    private moveCard;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkKanban, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkKanban, "mk-kanban", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "columns": "columnsChange"; "cardMoved": "cardMoved"; }, ["cardTemplate"], never, true, never>;
-}
-
 /**
  * Dependency-free QR Code encoder.
  *
@@ -2811,5 +2567,5 @@ declare class MkMarkdown {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkMarkdown, "mk-markdown", never, { "source": { "alias": "source"; "required": false; "isSignal": true; }; "autolink": { "alias": "autolink"; "required": false; "isSignal": true; }; "linkTarget": { "alias": "linkTarget"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { MK_CHART_PALETTE_SIZE, MK_HEATMAP_MIN_CONTRAST, MkAvatar, MkAvatarGroup, MkBadge, MkBadgeOverlay, MkBarChart, MkCalendarHeatmap, MkCard, MkCardFooter, MkCardHeader, MkCardTitle, MkCarousel, MkCarouselSlide, MkCode, MkCountdown, MkDescItem, MkDescriptionList, MkDiff, MkDivider, MkDonutChart, MkEmptyState, MkFunnelChart, MkGauge, MkHeatmap, MkInlineEdit, MkJsonViewer, MkKanban, MkLineChart, MkList, MkListItem, MkLogViewer, MkMarkdown, MkOrgChart, MkOrgChartNodeDef, MkProfileActions, MkProfileCard, MkProfileMeta, MkProgressBar, MkProgressRing, MkQrCode, MkRadarChart, MkScatterChart, MkSkeleton, MkSkeletonPreset, MkSparkline, MkSpinner, MkStatCard, MkTag, MkTimeline, MkTimelineItem, MkTreemap, MkVirtualScroll, mkArcPath, mkAreaPath, mkBuildJsonTree, mkChartColor, mkContrastRatio, mkEncodeQr, mkFormatCompact, mkHeatmapCellColors, mkLinePath, mkLinearScale, mkMixRgb, mkNiceTicks, mkOrgChartFromFlat, mkParseRgb, mkRelativeLuminance, mkSplitDuration, mkSquarify };
-export type { MkAvatarShape, MkAvatarStatus, MkBadgeOverlayPosition, MkBadgeVariant, MkBarOrientation, MkCalendarHeatmapCell, MkCalendarHeatmapEntry, MkCardPadding, MkCardVariant, MkChartSeries, MkChartSlice, MkDescriptionLayout, MkDiffMode, MkDividerOrientation, MkDurationParts, MkFunnelSegment, MkHeatmapCellColors, MkHeatmapPalette, MkJsonNode, MkKanbanCard, MkKanbanCardMovedEvent, MkKanbanColumn, MkLogToken, MkOrgChartFlatNode, MkOrgChartNode, MkOrgChartNodeContext, MkOrgChartOrientation, MkOrgChartTemplateData, MkOrgChartToggleEvent, MkPoint, MkProfileCardOrientation, MkQrEcc, MkRgb, MkScatterPoint, MkScatterSeries, MkSkeletonPresetKind, MkSkeletonShape, MkSparklineType, MkStatTrend, MkTagVariant, MkTreemapItem, MkTreemapRect };
+export { MK_CHART_PALETTE_SIZE, MK_HEATMAP_MIN_CONTRAST, MkAvatar, MkAvatarGroup, MkBarChart, MkCalendarHeatmap, MkCard, MkCardFooter, MkCardHeader, MkCardTitle, MkCarousel, MkCarouselSlide, MkCode, MkCountdown, MkDescItem, MkDescriptionList, MkDiff, MkDivider, MkDonutChart, MkFunnelChart, MkGauge, MkHeatmap, MkInlineEdit, MkJsonViewer, MkLineChart, MkList, MkListItem, MkLogViewer, MkMarkdown, MkOrgChart, MkOrgChartNodeDef, MkProfileActions, MkProfileCard, MkProfileMeta, MkProgressBar, MkProgressRing, MkQrCode, MkRadarChart, MkScatterChart, MkSkeleton, MkSkeletonPreset, MkSparkline, MkStatCard, MkTag, MkTimeline, MkTimelineItem, MkTreemap, MkVirtualScroll, mkArcPath, mkAreaPath, mkBuildJsonTree, mkChartColor, mkContrastRatio, mkEncodeQr, mkFormatCompact, mkHeatmapCellColors, mkLinePath, mkLinearScale, mkMixRgb, mkNiceTicks, mkOrgChartFromFlat, mkParseRgb, mkRelativeLuminance, mkSplitDuration, mkSquarify };
+export type { MkAvatarShape, MkAvatarStatus, MkBarOrientation, MkCalendarHeatmapCell, MkCalendarHeatmapEntry, MkCardPadding, MkCardVariant, MkChartSeries, MkChartSlice, MkDescriptionLayout, MkDiffMode, MkDividerOrientation, MkDurationParts, MkFunnelSegment, MkHeatmapCellColors, MkHeatmapPalette, MkJsonNode, MkLogToken, MkOrgChartFlatNode, MkOrgChartNode, MkOrgChartNodeContext, MkOrgChartOrientation, MkOrgChartTemplateData, MkOrgChartToggleEvent, MkPoint, MkProfileCardOrientation, MkQrEcc, MkRgb, MkScatterPoint, MkScatterSeries, MkSkeletonPresetKind, MkSkeletonShape, MkSparklineType, MkStatTrend, MkTagVariant, MkTreemapItem, MkTreemapRect };

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

@@ -0,0 +1,98 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import { MkDropEvent } from '@mk-kit/ui/dnd';
+
+/** A single draggable card on a {@link MkKanban} board. */
+interface MkKanbanCard {
+    /** Stable identity used for tracking and move events. */
+    id: unknown;
+    /** Text shown by the default card renderer. */
+    title: string;
+    /** Arbitrary extra fields for custom card templates. */
+    [key: string]: unknown;
+}
+/** A column (bucket) of {@link MkKanbanCard}s on a {@link MkKanban} board. */
+interface MkKanbanColumn {
+    /** Stable identity used for tracking and move events. */
+    id: unknown;
+    /** Heading shown in the column header and used as its aria-label. */
+    title: string;
+    /** The ordered cards contained in this column. */
+    cards: MkKanbanCard[];
+}
+/**
+ * Emitted by {@link MkKanban} after a card has been moved (between or within
+ * columns) and the two-way `columns` model has been updated.
+ */
+interface MkKanbanCardMovedEvent {
+    /** The card that was moved. */
+    card: MkKanbanCard;
+    /** `id` of the column the card came from. */
+    from: unknown;
+    /** `id` of the column the card was dropped into. */
+    to: unknown;
+    /** The card's index within the source column before the move. */
+    fromIndex: number;
+    /** The card's index within the destination column after the move. */
+    toIndex: number;
+}
+/**
+ * Kanban board — a horizontal row of columns whose cards can be dragged and
+ * reordered within a column or transferred between columns. Built on the dnd
+ * group's connected `[mkDropList]` / `[mkDrag]` directives, so it inherits both
+ * pointer and keyboard dragging (WCAG 2.1.1) for free.
+ *
+ * Bind `columns` two-way; the model is updated immutably on each drop. Project
+ * an `<ng-template>` to render custom card content — it receives the card as
+ * `$implicit` and the owning column as `column`:
+ *
+ * ```html
+ * <mk-kanban [(columns)]="board" (cardMoved)="onMoved($event)">
+ *   <ng-template #cardTemplate let-card let-column="column">
+ *     <strong>{{ card.title }}</strong>
+ *   </ng-template>
+ * </mk-kanban>
+ * ```
+ */
+declare class MkKanban {
+    /** The board's columns and their cards (two-way). Updated on every drop. */
+    readonly columns: _angular_core.ModelSignal<MkKanbanColumn[]>;
+    /** Disable all dragging on the board. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Emitted after the model is updated when a card is moved. */
+    readonly cardMoved: _angular_core.OutputEmitterRef<MkKanbanCardMovedEvent>;
+    /** Optional consumer-projected card renderer (`$implicit` = card). */
+    protected readonly cardTemplate: _angular_core.Signal<TemplateRef<unknown> | undefined>;
+    /** Board-scoped prefix so this board's drop-list ids never collide. */
+    private readonly boardId;
+    /** Column count as its own computed so id arrays survive card-only updates. */
+    private readonly columnCount;
+    /** Stable drop-list id per column, positionally matched to `columns()`. */
+    protected readonly listIds: _angular_core.Signal<string[]>;
+    /**
+     * Per-column connected-target ids (every other column's list). One stable
+     * array per column, recomputed only when the column count changes — a fresh
+     * array per change-detection pass would dirty each `MkDropList`'s
+     * `connectedTo` input identity on every cycle.
+     */
+    private readonly connections;
+    /** Ids of every other column's list — the connected transfer targets for `i`. */
+    protected connectedTo(index: number): string[];
+    /**
+     * Apply a drop from the dnd module. Reads the source/target columns from the
+     * event's containers (matched by their drop-list ids), updates the two-way
+     * `columns` model immutably, then emits {@link cardMoved}.
+     */
+    protected onDrop(event: MkDropEvent<MkKanbanCard>): void;
+    /**
+     * Immutably move the card at `fromIndex` of column `fromCol` to `toIndex` of
+     * column `toCol`, updating the model and emitting {@link cardMoved}. Column
+     * indices refer to positions in `columns()`.
+     */
+    private moveCard;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkKanban, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkKanban, "mk-kanban", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "columns": "columnsChange"; "cardMoved": "cardMoved"; }, ["cardTemplate"], never, true, never>;
+}
+
+export { MkKanban };
+export type { MkKanbanCard, MkKanbanCardMovedEvent, MkKanbanColumn };

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

@@ -0,0 +1,158 @@
+import * as _angular_core from '@angular/core';
+import * as _mk_kit_ui_core from '@mk-kit/ui/core';
+import { MkSize, MkTone } from '@mk-kit/ui/core';
+
+/**
+ * Spinner — a circular indeterminate loading indicator. Exposes `role="status"`
+ * with a visually-hidden label so assistive tech announces the loading state.
+ * The animation slows under `prefers-reduced-motion`.
+ *
+ * ```html
+ * <mk-spinner />
+ * <mk-spinner size="lg" tone="neutral" label="Fetching results" />
+ * ```
+ */
+declare class MkSpinner {
+    protected readonly i18n: _mk_kit_ui_core.MkI18nStrings;
+    /** Size scale. */
+    readonly size: _angular_core.InputSignal<MkSize>;
+    /** Semantic color tone. */
+    readonly tone: _angular_core.InputSignal<MkTone>;
+    /** Visually-hidden status label announced to screen readers. */
+    readonly label: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkSpinner, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkSpinner, "mk-spinner", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Visual treatment for a {@link MkBadge}. */
+type MkBadgeVariant = 'solid' | 'soft' | 'outline';
+/**
+ * Badge — a compact status pill, typically for counts or short state labels.
+ * Set `dot` for a minimal notification indicator with no text.
+ *
+ * ```html
+ * <mk-badge tone="success">Active</mk-badge>
+ * <mk-badge tone="danger" variant="solid">3</mk-badge>
+ * <mk-badge tone="danger" dot aria-label="Unread messages" />
+ * ```
+ */
+declare class MkBadge {
+    /** Semantic color tone. */
+    readonly tone: _angular_core.InputSignal<MkTone>;
+    /** Visual treatment. */
+    readonly variant: _angular_core.InputSignal<MkBadgeVariant>;
+    /** Size scale. */
+    readonly size: _angular_core.InputSignal<MkSize>;
+    /** Render as a tiny dot (no text) for notification indicators. */
+    readonly dot: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkBadge, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkBadge, "mk-badge", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/** Corner of the host an {@link MkBadgeOverlay} is anchored to. */
+type MkBadgeOverlayPosition = 'top-end' | 'top-start' | 'bottom-end' | 'bottom-start';
+/**
+ * Badge overlay — anchors a small badge (count, dot or short text) to a corner
+ * of ANY element: an icon button, an avatar, a tab label. The host stays a
+ * single tab stop; the badge is a decorative, non-focusable child.
+ *
+ * - Numbers above `mkBadgeOverlayMax` (default 99) collapse to `99+`.
+ * - `mkBadgeOverlayDot` renders a textless dot ("something is new").
+ * - `mkBadgeOverlayAriaLabel` is the screen-reader text ("3 unread"). It is
+ *   rendered in a visually hidden span and wired to the host with
+ *   `aria-describedby`, so it is announced after the host's own name even
+ *   when the host has an `aria-label`. When it is given, the visible badge is
+ *   `aria-hidden` so the count is not read twice.
+ * - Positions use logical insets, so `top-end` sits at the top-right in LTR
+ *   and the top-left in RTL.
+ *
+ * The badge is painted with the global `.mk-badge-overlay` styles from
+ * `@mk-kit/ui/styles.css` and follows the `--mk-*` tone tokens.
+ *
+ * ```html
+ * <button mkButton iconOnly aria-label="Notifications"
+ *         [mkBadgeOverlay]="unread()" mkBadgeOverlayTone="danger"
+ *         [mkBadgeOverlayAriaLabel]="unread() + ' unread'">
+ *   <mk-icon name="bell" />
+ * </button>
+ *
+ * <mk-avatar name="Ada Lovelace" mkBadgeOverlay mkBadgeOverlayDot
+ *            mkBadgeOverlayTone="success" mkBadgeOverlayPosition="bottom-end" />
+ * ```
+ */
+declare class MkBadgeOverlay {
+    private readonly host;
+    private readonly renderer;
+    private readonly document;
+    private readonly isBrowser;
+    /**
+     * Badge content — a count or a short label. `null` / empty hides the badge
+     * unless `mkBadgeOverlayDot` is set. Numeric strings are treated as numbers
+     * so `mkBadgeOverlay="120"` also collapses to `99+`.
+     */
+    readonly content: _angular_core.InputSignal<string | number | null | undefined>;
+    /** Corner the badge is anchored to (logical: `end` flips in RTL). */
+    readonly position: _angular_core.InputSignal<MkBadgeOverlayPosition>;
+    /** Semantic color tone (same scale as `mk-badge`). */
+    readonly tone: _angular_core.InputSignal<MkTone>;
+    /** Render a textless dot instead of the content. */
+    readonly dot: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Numbers above this render as `<max>+`. `0` disables the cap. */
+    readonly max: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Hide the badge while keeping the directive (and its aria wiring) in place. */
+    readonly hidden: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Screen-reader text for the badge, e.g. `"3 unread"`. Announced as the
+     * host's description; the visible badge becomes `aria-hidden`.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** The text painted in the badge (`''` in dot mode). */
+    readonly label: _angular_core.Signal<string>;
+    /** Whether the badge is currently rendered. */
+    readonly visible: _angular_core.Signal<boolean>;
+    private readonly srId;
+    private badge;
+    private sr;
+    /** Set when WE made the host positioned, so we can undo it on removal. */
+    private positionedHost;
+    constructor();
+    private attach;
+    private detach;
+    /** Create / update / remove the hidden description and its aria-describedby link. */
+    private syncSr;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkBadgeOverlay, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MkBadgeOverlay, "[mkBadgeOverlay]", never, { "content": { "alias": "mkBadgeOverlay"; "required": false; "isSignal": true; }; "position": { "alias": "mkBadgeOverlayPosition"; "required": false; "isSignal": true; }; "tone": { "alias": "mkBadgeOverlayTone"; "required": false; "isSignal": true; }; "dot": { "alias": "mkBadgeOverlayDot"; "required": false; "isSignal": true; }; "max": { "alias": "mkBadgeOverlayMax"; "required": false; "isSignal": true; }; "hidden": { "alias": "mkBadgeOverlayHidden"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "mkBadgeOverlayAriaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * EmptyState — a centered placeholder for "nothing here yet" situations: empty
+ * tables, no search results, a fresh dashboard, a cleared inbox. Provide a
+ * `title` (and usually a `description`), an `icon` or projected media, and
+ * call-to-action buttons via the actions slot.
+ *
+ * Slots: `[mkEmptyStateMedia]` (custom illustration, overrides `icon`), default
+ * content (extra body), `[mkEmptyStateActions]` (buttons).
+ *
+ * ```html
+ * <mk-empty-state icon="search" title="No results"
+ *   description="Try adjusting your filters.">
+ *   <button mkButton mkEmptyStateActions variant="outline">Clear filters</button>
+ * </mk-empty-state>
+ * ```
+ */
+declare class MkEmptyState {
+    /** Name of a registered icon shown above the title (ignored if media is projected). */
+    readonly icon: _angular_core.InputSignal<string>;
+    /** Main heading, e.g. "No invoices yet". */
+    readonly title: _angular_core.InputSignal<string>;
+    /** Supporting sentence under the title. */
+    readonly description: _angular_core.InputSignal<string>;
+    /** Overall scale of the block. */
+    readonly size: _angular_core.InputSignal<MkSize>;
+    protected readonly iconSize: () => 28 | 48 | 36;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkEmptyState, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkEmptyState, "mk-empty-state", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["[mkEmptyStateMedia]", "*", "[mkEmptyStateActions]"], true, never>;
+}
+
+export { MkBadge, MkBadgeOverlay, MkEmptyState, MkSpinner };
+export type { MkBadgeOverlayPosition, MkBadgeVariant };

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

@@ -1094,6 +1094,12 @@ declare class MkTableDataSource<T> {
      * pending debounced filter, since the request reads the live filter value.
      */
     refresh(): void;
+    /**
+     * Back to page 1 and load — the "filters changed outside the search box"
+     * case. Unlike {@link setPage}, this loads even when already on page 1, so
+     * callers no longer need `page() === 1 ? refresh() : setPage(1)`.
+     */
+    reload(): void;
     /**
      * Pipe an `mkSort` directive's changes into {@link setSort}. Idempotent per
      * directive instance; all subscriptions are released by {@link destroy}.
@@ -1117,6 +1123,24 @@ declare class MkTableDataSource<T> {
     private unsubscribeActive;
     private clearSub;
 }
+/** Options for {@link mkClientFetcher}. */
+interface MkClientFetcherOptions<T> {
+    /** Row matcher for `setFilter` text; default: case-insensitive substring over every string/number field. */
+    match?: (row: T, query: string) => boolean;
+    /** Comparator for an active sort; default: locale compare on `row[sort.active]`. */
+    compare?: (a: T, b: T, sort: MkSortState) => number;
+}
+/**
+ * In-memory {@link MkDataFetcher}: filter, sort and slice a full row set that
+ * the app already holds (an API that returns everything). Lets a client-side
+ * list use {@link MkTableDataSource} — same pager, footer and API as a
+ * server-paged one — without hand-rolling `filtered/sorted/paged` computeds.
+ *
+ * ```ts
+ * ds = new MkTableDataSource(mkClientFetcher(() => this.rows()));
+ * ```
+ */
+declare function mkClientFetcher<T>(rows: () => readonly T[], opts?: MkClientFetcherOptions<T>): (req: MkDataRequest) => Promise<MkDataPage<T>>;
 
-export { MkSort, MkSortHeader, MkTable, MkTableCell, MkTableDataSource, MkTableRowDetail, mkCompactFilters, mkDownloadText, mkExportCsv, mkToCsv };
-export type { MkCellEdit, MkColumnResize, MkCsvColumn, MkCsvExportOptions, MkCsvOptions, MkDataFetcher, MkDataPage, MkDataRequest, MkGroupToggle, MkSortChange, MkSortDirection, MkSortState, MkSortable, MkTableAlign, MkTableCellContext, MkTableColumn, MkTableDataSourceOptions, MkTableDensity, MkTableExportOptions, MkTableExportRows, MkTableExportRowsOptions, MkTableFilterKind, MkTableFilterOption, MkTableFilterRange, MkTableFilters, MkTableGroup, MkTreeToggle };
+export { MkSort, MkSortHeader, MkTable, MkTableCell, MkTableDataSource, MkTableRowDetail, mkClientFetcher, mkCompactFilters, mkDownloadText, mkExportCsv, mkToCsv };
+export type { MkCellEdit, MkClientFetcherOptions, MkColumnResize, MkCsvColumn, MkCsvExportOptions, MkCsvOptions, MkDataFetcher, MkDataPage, MkDataRequest, MkGroupToggle, MkSortChange, MkSortDirection, MkSortState, MkSortable, MkTableAlign, MkTableCellContext, MkTableColumn, MkTableDataSourceOptions, MkTableDensity, MkTableExportOptions, MkTableExportRows, MkTableExportRowsOptions, MkTableFilterKind, MkTableFilterOption, MkTableFilterRange, MkTableFilters, MkTableGroup, MkTreeToggle };