@mk-kit/ui 0.34.0

package/types/mk-kit-ui-block-editor.d.ts

@@ -0,0 +1,292 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken } from '@angular/core';
+import * as _mk_kit_ui_core from '@mk-kit/ui/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { SafeResourceUrl } from '@angular/platform-browser';
+export { sanitizeInlineHtml } from '@mk-kit/ui/rich-text';
+
+/**
+ * Block document model for the mk-kit block editor.
+ *
+ * The model is deliberately small and 100% JSON-serialisable so a document can
+ * be persisted to a database, sent over the wire, and re-hydrated without any
+ * class instances or functions. All editor state lives in these plain objects.
+ */
+/**
+ * A single content block.
+ *
+ * `type` keys into the {@link MkBlockDefinition} registry that knows how to
+ * edit, serialise and render it. `data` is a free-form, JSON-safe bag of the
+ * block's own state (e.g. `{ html }` for a paragraph, `{ src, alt }` for an
+ * image). `children` enables nested layout blocks (a Columns block stores its
+ * columns' contents here).
+ */
+interface MkBlock {
+    /** Stable unique id (used for keying, focus and drag/move). */
+    id: string;
+    /** Registry type key, e.g. `paragraph`, `heading`, `columns`. */
+    type: string;
+    /** JSON-serialisable per-block state. */
+    data: Record<string, any>;
+    /** Nested blocks for layout/container blocks (e.g. columns). */
+    children?: MkBlock[];
+}
+/** A full editor document: a version stamp plus an ordered list of blocks. */
+interface MkBlockDocument {
+    /** Schema version, bumped when the persisted shape changes. */
+    version: number;
+    /** Top-level blocks, in document order. */
+    blocks: MkBlock[];
+}
+/** Current document schema version. */
+declare const MK_BLOCK_DOCUMENT_VERSION = 1;
+/** An empty, valid document. */
+declare function mkEmptyDocument(): MkBlockDocument;
+/**
+ * Generates a reasonably unique, JSON-safe block id. Combines a monotonic
+ * counter with a short random suffix so ids are unique even across documents
+ * merged at runtime.
+ */
+declare function mkBlockId(prefix?: string): string;
+/** Deep-clones a block (and its subtree), assigning fresh ids. */
+declare function mkCloneBlock(block: MkBlock): MkBlock;
+
+/**
+ * Describes one registerable block type — the extensibility layer of the
+ * editor. Mirrors Gutenberg's `registerBlockType`: consumers supply an array of
+ * these (via the `blocks` input or the {@link MK_BLOCK_DEFINITIONS} token) to
+ * add, remove or reconfigure the palette. The built-in set is
+ * {@link MK_DEFAULT_BLOCKS}.
+ */
+interface MkBlockDefinition {
+    /** Unique type key that {@link MkBlock.type} references. */
+    type: string;
+    /** Human label shown in the inserter and block toolbar. */
+    label: string;
+    /** Optional icon (emoji or short text glyph) shown in the inserter. */
+    icon?: string;
+    /** Inserter grouping heading, e.g. `Text`, `Media`, `Layout`. */
+    group?: string;
+    /** Short description shown in the inserter. */
+    description?: string;
+    /** Factory returning a fresh, ready-to-edit block of this type. */
+    create(): MkBlock;
+    /** May this block be placed inside a Columns column? Default `true`. */
+    allowedInColumns?: boolean;
+    /** Keywords to match against when filtering the inserter. */
+    keywords?: string[];
+    /** Block types this one can transform into (by type key). */
+    transforms?: string[];
+}
+/**
+ * The default palette of built-in block definitions. Grouped for the inserter.
+ * Consumers can spread this and append custom definitions, or replace it.
+ *
+ * The English `label`/`group`/`description` text here is only a base: the
+ * editor resolves the built-in types' display text from the `blockEditor`
+ * i18n strings (see `provideMkI18n`) before merging custom definitions.
+ */
+declare const MK_DEFAULT_BLOCKS: MkBlockDefinition[];
+/**
+ * Multi-provider injection token for adding block definitions app-wide. Each
+ * provided array is merged over {@link MK_DEFAULT_BLOCKS} (by `type`). The
+ * editor's `blocks` input takes final precedence.
+ *
+ * ```ts
+ * providers: [
+ *   { provide: MK_BLOCK_DEFINITIONS, multi: true, useValue: [myCalloutBlock] },
+ * ]
+ * ```
+ */
+declare const MK_BLOCK_DEFINITIONS: InjectionToken<MkBlockDefinition[][]>;
+/**
+ * Async handler that persists an uploaded {@link File} and resolves to its URL.
+ * Provide app-wide via this token, or per-editor via the `uploadHandler` input.
+ * When absent, the Image block falls back to an inline `data:` URL.
+ */
+type MkBlockUploadHandler = (file: File) => Promise<string>;
+/** App-wide upload handler token (overridable by the editor's input). */
+declare const MK_BLOCK_UPLOAD_HANDLER: InjectionToken<MkBlockUploadHandler>;
+/**
+ * An allow-listed embed provider. `test` matches a pasted URL; `toEmbedUrl`
+ * returns the safe iframe `src` (which is the ONLY value ever passed to
+ * `DomSanitizer.bypassSecurityTrustResourceUrl`). Non-matching URLs fall back
+ * to a plain link card — raw HTML is never injected.
+ */
+interface MkEmbedProvider {
+    /** Display name, e.g. `YouTube`. */
+    name: string;
+    /** Matches URLs this provider handles. */
+    test: RegExp;
+    /** Transforms a matched page URL into an embeddable iframe `src`. */
+    toEmbedUrl(url: string): string | null;
+    /** Aspect ratio `width / height` for the responsive frame. Default 16/9. */
+    aspectRatio?: number;
+    /** Allow list for the iframe `sandbox` attribute. */
+    sandbox?: string;
+}
+/** Default embed providers: YouTube + Vimeo. */
+declare const MK_DEFAULT_EMBED_PROVIDERS: MkEmbedProvider[];
+/** App-wide embed providers token (merged with the editor's input). */
+declare const MK_BLOCK_EMBED_PROVIDERS: InjectionToken<MkEmbedProvider[][]>;
+/**
+ * Merges default definitions with app-token definitions and per-editor input,
+ * de-duplicating by `type` (later sources win).
+ */
+declare function mkMergeBlockDefinitions(defaults: MkBlockDefinition[], ...sources: (MkBlockDefinition[] | null | undefined)[]): MkBlockDefinition[];
+
+/** How the form/CVA value is exchanged: a document object or an HTML string. */
+type MkBlockValueFormat = 'document' | 'html';
+/**
+ * Block editor — a configurable, Gutenberg-style block content editor. Renders
+ * an ordered document of blocks (paragraph, heading, image, columns, embed,
+ * list, quote, button, divider, code) with a filterable inserter, per-block
+ * chrome (move/duplicate/transform/delete) and inline rich-text formatting.
+ *
+ * The palette is fully customisable: pass definitions via the `blocks` input or
+ * the {@link MK_BLOCK_DEFINITIONS} token (mirrors `registerBlockType`). Both are
+ * merged over {@link MK_DEFAULT_BLOCKS}.
+ *
+ * Implements `ControlValueAccessor` AND a two-way `value` model, so it works
+ * with `[(ngModel)]`, reactive forms and `[(value)]`.
+ *
+ * ```html
+ * <mk-block-editor [(value)]="doc" [uploadHandler]="upload" />
+ * ```
+ */
+declare class MkBlockEditor implements ControlValueAccessor {
+    protected readonly i18n: _mk_kit_ui_core.MkI18nStrings;
+    private readonly ctx;
+    private readonly hostRef;
+    private readonly tokenDefinitions;
+    private readonly tokenUpload;
+    private readonly tokenEmbeds;
+    /** Two-way document value (always an `MkBlockDocument`, regardless of format). */
+    readonly value: _angular_core.ModelSignal<MkBlockDocument>;
+    /**
+     * Form/CVA exchange format. `document` (default) reads/writes an
+     * `MkBlockDocument`; `html` reads/writes an **HTML string** — so the editor
+     * can back a string-typed richtext field (`[(ngModel)]="htmlString"`). The
+     * two-way `value` model stays an `MkBlockDocument` either way.
+     */
+    readonly valueFormat: _angular_core.InputSignal<MkBlockValueFormat>;
+    /** Custom / extended block definitions (merged over the defaults + token). */
+    readonly blocks: _angular_core.InputSignal<MkBlockDefinition[] | null>;
+    /** Placeholder for empty text blocks. */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Accessible label for the editor region. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Read-only: renders content without editing chrome. */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Disabled (form-level). */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Force the invalid visual + `aria-invalid` when used standalone. */
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Async upload handler (overrides the {@link MK_BLOCK_UPLOAD_HANDLER} token). */
+    readonly uploadHandler: _angular_core.InputSignal<MkBlockUploadHandler | null>;
+    /** Extra embed providers (merged with defaults + token). */
+    readonly embedProviders: _angular_core.InputSignal<MkEmbedProvider[] | null>;
+    /** Fires on any document change (in addition to the `value` model). */
+    readonly change: _angular_core.OutputEmitterRef<MkBlockDocument>;
+    /** Fires the serialised HTML on any change — convenient in `html` mode. */
+    readonly htmlChange: _angular_core.OutputEmitterRef<string>;
+    protected readonly cvaDisabled: _angular_core.WritableSignal<boolean>;
+    /** Invalid visual, forced by the `invalid` input. */
+    protected readonly isInvalid: _angular_core.Signal<boolean>;
+    private onChange;
+    private onTouched;
+    /** Effective, merged block definitions (defaults localised via MK_I18N). */
+    private readonly definitions;
+    protected readonly topBlocks: _angular_core.Signal<MkBlock[]>;
+    constructor();
+    protected onBlocksChange(blocks: MkBlock[]): void;
+    /**
+     * Marks the control touched once focus leaves it entirely, so a form that
+     * gates its errors on `touched` behaves the same here as on a native input.
+     */
+    protected onFocusOut(event: FocusEvent): void;
+    writeValue(value: MkBlockDocument | string | null): void;
+    registerOnChange(fn: (value: MkBlockDocument | string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkBlockEditor, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkBlockEditor, "mk-block-editor", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "blocks": { "alias": "blocks"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "uploadHandler": { "alias": "uploadHandler"; "required": false; "isSignal": true; }; "embedProviders": { "alias": "embedProviders"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "change": "change"; "htmlChange": "htmlChange"; }, never, never, true, never>;
+}
+
+/**
+ * Block renderer — read-only, themed display of a {@link MkBlockDocument} for
+ * published content pages and blog posts. Reuses the same layout CSS as the
+ * editor so authored columns look identical when published.
+ *
+ * SECURITY MODEL: rich-text HTML is passed through {@link sanitizeInlineHtml}
+ * and then bound with `[innerHTML]`, so Angular's `DomSanitizer` sanitises it
+ * again at render time (never bypassed for author HTML). The ONLY bypass is for
+ * a stored embed's `embedUrl`, which came from an allow-listed provider.
+ */
+declare class MkBlockRenderer {
+    protected readonly i18n: _mk_kit_ui_core.MkI18nStrings;
+    private readonly sanitizer;
+    private readonly safeSrcCache;
+    /** The document to render. */
+    readonly value: _angular_core.InputSignal<MkBlockDocument | null>;
+    /** Internal: a block subtree (used when recursing into columns). */
+    readonly blocks: _angular_core.InputSignal<MkBlock[] | null>;
+    protected readonly items: _angular_core.Signal<MkBlock[]>;
+    /** Sanitised rich-text HTML for `[innerHTML]` binding. */
+    protected safeHtml(html: unknown): string;
+    protected listItems(block: MkBlock): string[];
+    protected headingLevel(block: MkBlock): number;
+    protected isImageSafe(block: MkBlock): boolean;
+    protected buttonHref(block: MkBlock): string;
+    protected paddingTop(block: MkBlock): string;
+    /** Trusts only a provider-transformed https embed URL — see class doc. */
+    protected embedSrc(block: MkBlock): SafeResourceUrl | null;
+    protected fallbackUrl(block: MkBlock): string | null;
+    protected gridColumns(block: MkBlock): string;
+    protected gridGap(block: MkBlock): string;
+    protected justifyValue(block: MkBlock): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkBlockRenderer, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkBlockRenderer, "mk-block-renderer", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "blocks": { "alias": "blocks"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Escapes text for safe placement in element content. */
+declare function mkEscapeHtml(value: string): string;
+/** Escapes a value for safe placement in a double-quoted attribute. */
+declare function mkEscapeAttr(value: string): string;
+/** True for URL schemes safe to place in `href`/`src`. */
+declare function mkIsSafeUrl(url: string): boolean;
+/**
+ * Serialises a document to clean, semantic, self-contained HTML — the "rich
+ * HTML content" you persist and publish for a blog post or content page.
+ * Layout blocks become responsive grid wrappers with inline styles.
+ */
+declare function mkBlocksToHtml(doc: MkBlockDocument | null | undefined): string;
+/**
+ * Serialises a document to plain text — handy for previews, excerpts, search
+ * indexes and meta descriptions.
+ */
+declare function mkBlocksToText(doc: MkBlockDocument | null | undefined): string;
+
+/**
+ * HTML → {@link MkBlockDocument} parser — the inverse of {@link mkBlocksToHtml}.
+ *
+ * Lets the block editor back a **string-typed richtext field** (e.g. a CMS
+ * `richtext` column that stores an HTML string): seed the editor from stored
+ * HTML, and serialise back to HTML on change. Best-effort and forgiving — any
+ * HTML parses, with unrecognised block-level wrappers recursed into and loose
+ * inline runs grouped into paragraphs. Round-trips the blocks `mkBlocksToHtml`
+ * emits (paragraph, heading, list, quote, code, image, divider, button, embed,
+ * columns).
+ *
+ * Uses the DOM (`DOMParser`) — available in browsers and jsdom. In a pure Node
+ * context without a DOM it falls back to a single sanitised paragraph.
+ */
+
+/**
+ * Parse an HTML string into a {@link MkBlockDocument}. Empty / whitespace input
+ * yields an empty document.
+ */
+declare function mkHtmlToBlocks(html: string): MkBlockDocument;
+
+export { MK_BLOCK_DEFINITIONS, MK_BLOCK_DOCUMENT_VERSION, MK_BLOCK_EMBED_PROVIDERS, MK_BLOCK_UPLOAD_HANDLER, MK_DEFAULT_BLOCKS, MK_DEFAULT_EMBED_PROVIDERS, MkBlockEditor, MkBlockRenderer, mkBlockId, mkBlocksToHtml, mkBlocksToText, mkCloneBlock, mkEmptyDocument, mkEscapeAttr, mkEscapeHtml, mkHtmlToBlocks, mkIsSafeUrl, mkMergeBlockDefinitions };
+export type { MkBlock, MkBlockDefinition, MkBlockDocument, MkBlockUploadHandler, MkBlockValueFormat, MkEmbedProvider };

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

@@ -0,0 +1,40 @@
+import * as _angular_core from '@angular/core';
+import { MkVariant, MkTone, MkSize } from '@mk-kit/ui/core';
+
+/**
+ * Button — enhances a native `<button>` or `<a>` so semantics and keyboard
+ * behaviour come for free. Fully themed via `--mk-*` tokens.
+ *
+ * ```html
+ * <button mkButton tone="primary">Save</button>
+ * <button mkButton variant="outline" tone="danger" [loading]="saving()">Delete</button>
+ * <a mkButton variant="ghost" href="/docs">Docs</a>
+ * ```
+ */
+declare class MkButton {
+    private readonly host;
+    private readonly isAnchor;
+    /** Visual treatment. */
+    readonly variant: _angular_core.InputSignal<MkVariant>;
+    /** Semantic color tone. */
+    readonly tone: _angular_core.InputSignal<MkTone>;
+    /** Control size. */
+    readonly size: _angular_core.InputSignal<MkSize>;
+    /** Shows a spinner and blocks interaction without collapsing layout. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Stretch to fill the container width. */
+    readonly fullWidth: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Square, icon-only button (ensure an `aria-label` is provided). */
+    readonly iconOnly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Disable the button (native `disabled` for `<button>`, aria for `<a>`). */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly isDisabled: _angular_core.Signal<boolean>;
+    protected readonly nativeDisabled: _angular_core.Signal<"" | null>;
+    protected readonly ariaDisabled: _angular_core.Signal<"true" | null>;
+    protected readonly linkDisabledTabindex: _angular_core.Signal<"-1" | null>;
+    protected onClick(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkButton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkButton, "button[mkButton], a[mkButton]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { MkButton };

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

@@ -0,0 +1,62 @@
+import * as _angular_core from '@angular/core';
+import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
+import { MkSize, MkTone } from '@mk-kit/ui/core';
+
+/**
+ * Checkbox — a themed checkbox built on a visually-hidden native
+ * `input[type=checkbox]` (so keyboard + form semantics are native) with a
+ * custom box. Supports an `indeterminate` state and projects its label.
+ *
+ * Implements `ControlValueAccessor` with a two-way `checked` model, so it works
+ * with `[(ngModel)]`, reactive forms and `[(checked)]`.
+ *
+ * ```html
+ * <mk-checkbox [(ngModel)]="accepted">Accept terms</mk-checkbox>
+ * <mk-checkbox [(checked)]="all" [indeterminate]="some()" tone="success">
+ *   Select all
+ * </mk-checkbox>
+ * ```
+ */
+declare class MkCheckbox implements ControlValueAccessor, Validator {
+    private readonly field;
+    /** Two-way checked state. */
+    readonly checked: _angular_core.ModelSignal<boolean>;
+    /** Two-way indeterminate ("mixed") state; cleared when the user toggles. */
+    readonly indeterminate: _angular_core.ModelSignal<boolean>;
+    /** Disable the control. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Force the invalid visual + `aria-invalid` when used standalone. */
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Mark required (adds `aria-required`). */
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Control size. */
+    readonly size: _angular_core.InputSignal<MkSize>;
+    /** Semantic color tone for the checked box. */
+    readonly tone: _angular_core.InputSignal<MkTone>;
+    /** Accessible label when no text content is projected. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    private readonly cvaDisabled;
+    private onChange;
+    protected onTouched: () => void;
+    readonly inputId: string;
+    protected readonly isDisabled: _angular_core.Signal<boolean>;
+    protected readonly isRequired: _angular_core.Signal<boolean>;
+    protected readonly isInvalid: _angular_core.Signal<boolean>;
+    protected readonly describedBy: _angular_core.Signal<string | null>;
+    protected onNativeChange(event: Event): void;
+    writeValue(value: unknown): void;
+    registerOnChange(fn: (value: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    private readonly validatorChange;
+    /**
+     * Reports `required` for an unchecked box when `[required]` is set, so
+     * `required` on the element behaves like `Validators.requiredTrue`.
+     */
+    validate(control: AbstractControl): ValidationErrors | null;
+    registerOnValidatorChange(fn: () => void): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkCheckbox, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkCheckbox, "mk-checkbox", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "indeterminate": "indeterminateChange"; }, never, ["*"], true, never>;
+}
+
+export { MkCheckbox };

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

@@ -0,0 +1,59 @@
+import * as _angular_core from '@angular/core';
+import * as _mk_kit_ui_core from '@mk-kit/ui/core';
+import { MkTone, MkSize } from '@mk-kit/ui/core';
+
+/** Visual treatment for a {@link MkChip}. */
+type MkChipVariant = 'solid' | 'soft' | 'outline';
+/**
+ * Chip — an interactive, optionally removable/selectable token. Use it for
+ * filters, active selections or editable input tokens. For a purely decorative
+ * label use {@link MkTag} instead.
+ *
+ * ```html
+ * <mk-chip removable (removed)="drop(item)">{{ item.name }}</mk-chip>
+ * <mk-chip selectable [(selected)]="active" tone="primary">Filter</mk-chip>
+ * ```
+ */
+declare class MkChip {
+    protected readonly i18n: _mk_kit_ui_core.MkI18nStrings;
+    /** Semantic color tone. */
+    readonly tone: _angular_core.InputSignal<MkTone>;
+    /** Visual treatment. */
+    readonly variant: _angular_core.InputSignal<MkChipVariant>;
+    /** Size scale. */
+    readonly size: _angular_core.InputSignal<MkSize>;
+    /** Make the chip toggle a selected state on click / Enter / Space. */
+    readonly selectable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Show a trailing remove button and enable Delete/Backspace removal. */
+    readonly removable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Disable all interaction. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Accessible label for the remove button. */
+    readonly removeLabel: _angular_core.InputSignal<string>;
+    /** Id of the projected content, so the remove button's name can include it. */
+    protected readonly contentId: string;
+    /** Id of the sr-only "Remove" text inside the remove button. */
+    protected readonly removeTextId: string;
+    /**
+     * A consumer-supplied `removeLabel`, or `null` when it is still the i18n
+     * default. With the default the button is named via `aria-labelledby`
+     * ("Remove <chip text>") so N chips don't get N identical names;
+     * `aria-labelledby` would beat `aria-label` in the accname algorithm, so the
+     * two bindings are branched rather than stacked.
+     */
+    protected readonly customRemoveLabel: _angular_core.Signal<string | null>;
+    /** Two-way selected state (only meaningful when `selectable`). */
+    readonly selected: _angular_core.ModelSignal<boolean>;
+    /** Emitted when the chip is removed via the button or Delete/Backspace. */
+    readonly removed: _angular_core.OutputEmitterRef<void>;
+    protected hostTabindex(): number | null;
+    protected onClick(): void;
+    protected onKeydown(event: Event): void;
+    protected onRemoveClick(event: Event): void;
+    private remove;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkChip, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkChip, "mk-chip", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; "removed": "removed"; }, never, ["*"], true, never>;
+}
+
+export { MkChip };
+export type { MkChipVariant };

package/types/mk-kit-ui-context-menu.d.ts

@@ -0,0 +1,57 @@
+import * as i0 from '@angular/core';
+import { OnDestroy } from '@angular/core';
+import { MkMenu } from '@mk-kit/ui/navigation';
+
+/**
+ * Turns its host element into a right-click trigger for an `<mk-menu>`, reusing
+ * the same {@link MkMenu} instance as `mkMenuTriggerFor`. On `contextmenu` it
+ * prevents the native menu and opens the menu at the pointer coordinates via
+ * {@link MkMenu.openAt}, restoring focus to the host on close.
+ *
+ * On touch devices a long-press (~500ms hold with a touch pointer) opens the
+ * menu at the touch point — iOS Safari never fires `contextmenu`, so this is
+ * the only way to reach a context menu on iPhones. Moving the finger beyond a
+ * small slop, or lifting it early, cancels the press. On platforms that do
+ * synthesize a `contextmenu` after a long-press (Android), that follow-up
+ * event is suppressed so the menu doesn't open twice. While the directive is
+ * attached it disables the iOS press callout and text selection on the host
+ * (inline host styles — the directive has no stylesheet).
+ *
+ * For keyboard users (WCAG) the dedicated <kbd>ContextMenu</kbd> key and
+ * <kbd>Shift</kbd>+<kbd>F10</kbd> open the menu anchored to the host element;
+ * <kbd>Escape</kbd> closes it. The host advertises `aria-haspopup="menu"`.
+ * The menu closes on selection, Escape or an outside click (handled by
+ * {@link MkMenu}).
+ *
+ * ```html
+ * <tr [mkContextMenuTriggerFor]="rowMenu" tabindex="0">…</tr>
+ * <mk-menu #rowMenu>
+ *   <mk-menu-item (action)="edit()">Edit</mk-menu-item>
+ *   <mk-menu-item danger (action)="del()">Delete</mk-menu-item>
+ * </mk-menu>
+ * ```
+ */
+declare class MkContextMenuTrigger implements OnDestroy {
+    private readonly host;
+    /** The menu instance to open on right-click / context-menu key. */
+    readonly menu: i0.InputSignal<MkMenu>;
+    private longPressTimer?;
+    private pressX;
+    private pressY;
+    /**
+     * Set when a long-press just opened the menu; consumed by the `contextmenu`
+     * handler so the synthetic event Android fires after a long-press doesn't
+     * open the menu a second time.
+     */
+    private longPressFired;
+    protected onContextMenu(event: Event): void;
+    protected onPointerDown(event: Event): void;
+    protected onPointerMove(event: Event): void;
+    protected cancelLongPress(): void;
+    protected onKeydown(event: Event): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MkContextMenuTrigger, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MkContextMenuTrigger, "[mkContextMenuTriggerFor]", ["mkContextMenuTrigger"], { "menu": { "alias": "mkContextMenuTriggerFor"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { MkContextMenuTrigger };