@mk-kit/ui 0.40.0 → 0.42.0

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

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { Signal, TemplateRef } from '@angular/core';
+import { Signal, TemplateRef, PipeTransform } from '@angular/core';
 
 /**
  * Emits when a pointer press lands outside the host element — the building block
@@ -803,5 +803,236 @@ declare class MkCanDisable {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MkCanDisable, "[mkCanDisable]", never, { "permission": { "alias": "mkCanDisable"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { MK_FIELD_PRESETS, MkAutofocus, MkAutosize, MkCan, MkCanDisable, MkCannot, MkClickOutside, MkCopyToClipboard, MkField, MkHistoryService, MkHistoryStack, MkHotkey, MkHotkeysService, MkInfiniteScroll, MkIntersect, MkMask, MkPermissionPolicy, MkRipple, MkScrollspy, mkApplyMask, mkMaskCaret, mkMatchesHotkey, mkParseHotkey, mkPermissionGranted, registerHistoryHotkeys };
-export type { MkFieldKind, MkFieldPreset, MkHistoryEntry, MkHotkeyOptions, MkMaskResult, MkParsedHotkey };
+/**
+ * Options accepted by {@link MkCurrencyPipe}. They map onto
+ * `Intl.NumberFormat` currency options; `locale` overrides the i18n /
+ * runtime locale for this call only.
+ */
+interface MkCurrencyOptions {
+    /** BCP 47 locale for this call; defaults to `provideMkI18n({ locale })`, then the runtime locale. */
+    locale?: string;
+    /** How the currency is shown. Default `'symbol'` (`€`, `$`, `zł`). */
+    display?: 'symbol' | 'narrowSymbol' | 'code' | 'name';
+    /** Fraction digits; both default to the currency's own (2 for EUR, 0 for JPY). */
+    minimumFractionDigits?: number;
+    maximumFractionDigits?: number;
+    /** Sign display, e.g. `'always'` for `+€10.00` or `'exceptZero'`. */
+    signDisplay?: 'auto' | 'never' | 'always' | 'exceptZero';
+    /** Compact notation for dashboards (`$1.2M`). Default `'standard'`. */
+    notation?: 'standard' | 'compact';
+    /** Thousands grouping; default `true`. */
+    useGrouping?: boolean;
+}
+/**
+ * `mkCurrency` — format a number as money with `Intl.NumberFormat`, honouring
+ * the locale and default currency from `provideMkI18n({ locale, currency })`.
+ * No Angular locale data is needed. Pure: `null`, `undefined`, `''` and
+ * non-numeric input render as `''`.
+ *
+ * ```html
+ * {{ 1234.5 | mkCurrency }}                                <!-- $1,234.50 (i18n currency, default USD) -->
+ * {{ 1234.5 | mkCurrency:'EUR' }}                          <!-- €1,234.50 -->
+ * {{ 1234.5 | mkCurrency:'PLN':{ locale: 'pl-PL' } }}      <!-- 1234,50 zł -->
+ * {{ 1234567 | mkCurrency:'USD':{ notation: 'compact' } }} <!-- $1.2M -->
+ * {{ total() | mkCurrency:'GBP':{ signDisplay: 'always' } }} <!-- signals work as-is -->
+ * ```
+ */
+declare class MkCurrencyPipe implements PipeTransform {
+    private readonly i18n;
+    /**
+     * @param value Amount in major units (`12.5` → `$12.50`).
+     * @param currency ISO 4217 code; defaults to `provideMkI18n({ currency })`, then `'USD'`.
+     * @param options Locale and `Intl.NumberFormat` currency options.
+     */
+    transform(value: number | string | null | undefined, currency?: string | null, options?: MkCurrencyOptions): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkCurrencyPipe, never>;
+    static ɵpipe: _angular_core.ɵɵPipeDeclaration<MkCurrencyPipe, "mkCurrency", true>;
+}
+
+/** Options accepted by {@link MkRelativeTimePipe}. */
+interface MkRelativeTimeOptions {
+    /** BCP 47 locale for this call; defaults to `provideMkI18n({ locale })`, then the runtime locale. */
+    locale?: string;
+    /**
+     * `'auto'` (default) uses phrases like "yesterday" / "now" where the locale
+     * has them; `'always'` sticks to "1 day ago" / "in 0 seconds".
+     */
+    numeric?: 'always' | 'auto';
+    /** Length of the unit word: `'long'` (default, "minutes"), `'short'` ("min."), `'narrow'` ("m"). */
+    style?: 'long' | 'short' | 'narrow';
+    /**
+     * Largest unit to use. Default `'year'`; e.g. `'day'` keeps "45 days ago"
+     * instead of "1 month ago".
+     */
+    maxUnit?: Intl.RelativeTimeFormatUnit;
+}
+/**
+ * `mkRelativeTime` — "3 minutes ago" / "in 2 days" / "yesterday" from a
+ * `Date`, timestamp or ISO string, via `Intl.RelativeTimeFormat` in the
+ * `provideMkI18n` locale (no Angular locale data). Pure: `null`, `undefined`
+ * and unparsable input render as `''`.
+ *
+ * The pipe picks the largest unit whose magnitude is at least 1 (seconds →
+ * minutes → hours → days → weeks → months → years) and rounds. Pass `now`
+ * for deterministic output in tests, or bind a ticking signal to keep a
+ * list live — a pure pipe only re-runs when an argument changes:
+ *
+ * ```html
+ * {{ comment.createdAt | mkRelativeTime }}                    <!-- 3 minutes ago -->
+ * {{ due | mkRelativeTime:now() }}                            <!-- in 2 days (now() ticks) -->
+ * {{ due | mkRelativeTime:null:{ style: 'short' } }}          <!-- in 2 days -->
+ * {{ ts | mkRelativeTime:null:{ locale: 'pl', numeric: 'always' } }} <!-- 3 minuty temu -->
+ * ```
+ */
+declare class MkRelativeTimePipe implements PipeTransform {
+    private readonly i18n;
+    /**
+     * @param value The instant to describe.
+     * @param now Reference instant; defaults to `Date.now()` at call time.
+     * @param options Locale, numeric mode, style and unit cap.
+     */
+    transform(value: Date | number | string | null | undefined, now?: Date | number | string | null, options?: MkRelativeTimeOptions): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkRelativeTimePipe, never>;
+    static ɵpipe: _angular_core.ɵɵPipeDeclaration<MkRelativeTimePipe, "mkRelativeTime", true>;
+}
+
+/** Options accepted by {@link MkFileSizePipe}. */
+interface MkFileSizeOptions {
+    /** BCP 47 locale for the number part (decimal separator); defaults to the i18n / runtime locale. */
+    locale?: string;
+    /**
+     * `'decimal'` (default) divides by 1000 and labels `kB MB GB …` (what
+     * operating systems and file dialogs show); `'binary'` divides by 1024
+     * and labels `KiB MiB GiB …`.
+     */
+    base?: 'decimal' | 'binary';
+    /** Maximum fraction digits. Default `1`; bytes never get fractions. */
+    digits?: number;
+}
+/**
+ * `mkFileSize` — bytes → a human-readable size such as `1.2 MB`, with the
+ * number formatted by `Intl.NumberFormat` in the `provideMkI18n` locale.
+ * Pure: `null`, `undefined`, `''` and non-numeric input render as `''`.
+ *
+ * ```html
+ * {{ 1_234_567 | mkFileSize }}                        <!-- 1.2 MB -->
+ * {{ 1_234_567 | mkFileSize:{ base: 'binary' } }}     <!-- 1.2 MiB -->
+ * {{ 1_234_567 | mkFileSize:{ digits: 2, locale: 'de' } }} <!-- 1,23 MB -->
+ * {{ 512 | mkFileSize }}                              <!-- 512 B -->
+ * ```
+ */
+declare class MkFileSizePipe implements PipeTransform {
+    private readonly i18n;
+    transform(value: number | string | null | undefined, options?: MkFileSizeOptions): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkFileSizePipe, never>;
+    static ɵpipe: _angular_core.ɵɵPipeDeclaration<MkFileSizePipe, "mkFileSize", true>;
+}
+
+/**
+ * `mkInitials` — "Ada Lovelace" → "AL", the same rule `mk-avatar` uses for
+ * its fallback: first letter of the first and last word, upper-cased. A
+ * single word yields its first `max` letters ("Ada" → "AD"); more than two
+ * words with `max` > 2 take one letter per word from the start ("Jean
+ * Luc Picard" with `max: 3` → "JLP"). Leading/trailing/duplicate whitespace
+ * is ignored, and grapheme-aware slicing keeps emoji and accents intact.
+ * Pure: `null`, `undefined` and blank input render as `''`.
+ *
+ * ```html
+ * {{ user.name | mkInitials }}      <!-- Grace Hopper → GH -->
+ * {{ user.name | mkInitials:1 }}    <!-- Grace Hopper → G -->
+ * {{ 'Jean Luc Picard' | mkInitials:3 }} <!-- JLP -->
+ * ```
+ */
+declare class MkInitialsPipe implements PipeTransform {
+    /**
+     * @param value Full name.
+     * @param max Maximum number of letters; default `2`, minimum `1`.
+     */
+    transform(value: string | null | undefined, max?: number): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkInitialsPipe, never>;
+    static ɵpipe: _angular_core.ɵɵPipeDeclaration<MkInitialsPipe, "mkInitials", true>;
+}
+
+/** Options accepted by {@link MkTruncatePipe}. */
+interface MkTruncateOptions {
+    /** Suffix appended when text is cut. Default `'…'` (a single ellipsis character). */
+    ellipsis?: string;
+    /**
+     * Cut at the last whitespace before the limit instead of mid-word
+     * (falls back to a hard cut when the first word alone is longer).
+     * Default `false`.
+     */
+    wordBoundary?: boolean;
+}
+/**
+ * `mkTruncate` — shorten text to `length` characters and append an ellipsis.
+ * The ellipsis counts toward the limit, so the output never exceeds
+ * `length` characters; counting is grapheme-aware (emoji and accented
+ * letters are one character). Text that already fits is returned as-is.
+ * Pure: `null` and `undefined` render as `''`.
+ *
+ * ```html
+ * {{ post.body | mkTruncate:80 }}                          <!-- hard cut at 80 -->
+ * {{ post.body | mkTruncate:80:{ wordBoundary: true } }}   <!-- cut at the last space -->
+ * {{ hash | mkTruncate:12:{ ellipsis: '...' } }}
+ * ```
+ */
+declare class MkTruncatePipe implements PipeTransform {
+    /**
+     * @param value Text to shorten.
+     * @param length Maximum characters in the output, ellipsis included. Default `50`.
+     * @param options Ellipsis string and word-boundary mode.
+     */
+    transform(value: string | null | undefined, length?: number, options?: MkTruncateOptions): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkTruncatePipe, never>;
+    static ɵpipe: _angular_core.ɵɵPipeDeclaration<MkTruncatePipe, "mkTruncate", true>;
+}
+
+/**
+ * Per-category word forms for {@link MkPluralizePipe}, keyed by the CLDR
+ * plural categories `Intl.PluralRules` returns. `other` is required; the
+ * pipe falls back to it for any category you leave out.
+ *
+ * ```ts
+ * const files: MkPluralForms = { one: 'plik', few: 'pliki', many: 'plików', other: 'pliku' };
+ * ```
+ */
+type MkPluralForms = {
+    other: string;
+} & Partial<Record<Intl.LDMLPluralRule, string>>;
+/** Options accepted by {@link MkPluralizePipe}. */
+interface MkPluralizeOptions {
+    /** BCP 47 locale for the plural rules and number; defaults to the i18n / runtime locale. */
+    locale?: string;
+    /** Prefix the formatted count (`"3 items"`); `false` gives just the word. Default `true`. */
+    withCount?: boolean;
+}
+/**
+ * `mkPluralize` — pick the right word for a count using the locale's plural
+ * rules (`Intl.PluralRules`), optionally prefixed with the formatted count.
+ * The English shorthand takes a singular and an optional plural (default
+ * `singular + 's'`); other languages pass a {@link MkPluralForms} map.
+ * Pure: `null`, `undefined`, `''` and non-numeric counts render as `''`.
+ *
+ * ```html
+ * {{ count | mkPluralize:'item' }}                 <!-- 1 item / 3 items -->
+ * {{ count | mkPluralize:'entry':'entries' }}      <!-- 1 entry / 2 entries -->
+ * {{ count | mkPluralize:'file':null:{ withCount: false } }} <!-- files -->
+ * {{ n | mkPluralize:{ one: 'plik', few: 'pliki', many: 'plików', other: 'pliku' }:null:{ locale: 'pl' } }}
+ * ```
+ */
+declare class MkPluralizePipe implements PipeTransform {
+    private readonly i18n;
+    /**
+     * @param value The count.
+     * @param singular Singular word, or a full {@link MkPluralForms} map.
+     * @param plural Plural word for the shorthand form; default `singular + 's'`. Ignored with a map.
+     * @param options Locale and whether to prefix the count.
+     */
+    transform(value: number | string | null | undefined, singular: string | MkPluralForms, plural?: string | null, options?: MkPluralizeOptions): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkPluralizePipe, never>;
+    static ɵpipe: _angular_core.ɵɵPipeDeclaration<MkPluralizePipe, "mkPluralize", true>;
+}
+
+export { MK_FIELD_PRESETS, MkAutofocus, MkAutosize, MkCan, MkCanDisable, MkCannot, MkClickOutside, MkCopyToClipboard, MkCurrencyPipe, MkField, MkFileSizePipe, MkHistoryService, MkHistoryStack, MkHotkey, MkHotkeysService, MkInfiniteScroll, MkInitialsPipe, MkIntersect, MkMask, MkPermissionPolicy, MkPluralizePipe, MkRelativeTimePipe, MkRipple, MkScrollspy, MkTruncatePipe, mkApplyMask, mkMaskCaret, mkMatchesHotkey, mkParseHotkey, mkPermissionGranted, registerHistoryHotkeys };
+export type { MkCurrencyOptions, MkFieldKind, MkFieldPreset, MkFileSizeOptions, MkHistoryEntry, MkHotkeyOptions, MkMaskResult, MkParsedHotkey, MkPluralForms, MkPluralizeOptions, MkRelativeTimeOptions, MkTruncateOptions };

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

@@ -11,29 +11,64 @@ import { TemplateRef } from '@angular/core';
  * Its look (grab cursor, muted colour, `touch-action: none`) ships as the
  * global `.mk-drag-handle` class in the theme stylesheet.
  *
+ * **Decorative grip** — a non-focusable element (`<span>`, `<mk-icon>`): the
+ * item itself stays the keyboard target (`role="button"`, focusable), so the
+ * grip should be `aria-hidden`:
+ *
  * ```html
  * <div mkDrag [mkDragData]="row">
  *   <span mkDragHandle aria-hidden="true">⠿</span>
  *   {{ row.name }}
  * </div>
  * ```
+ *
+ * **Focusable grip** — a `<button>` (or any element with `tabindex`): the
+ * handle becomes the keyboard target instead. The item is then a plain
+ * container (no role, not focusable), so rows may hold inputs, links and
+ * other buttons without nesting interactive controls, and `<li>` items keep
+ * valid list semantics. Give it an accessible name:
+ *
+ * ```html
+ * <li mkDrag [mkDragData]="row">
+ *   <button type="button" mkDragHandle [attr.aria-label]="'Reorder ' + row.name">⠿</button>
+ *   <input mkInput [(ngModel)]="row.name" />
+ * </li>
+ * ```
  */
 declare class MkDragHandle {
     /** The handle's host element. */
     readonly element: HTMLElement;
+    /**
+     * Whether the handle can take keyboard focus itself — a native control
+     * (`<button>`, …), a link with `href`, or any element with a `tabindex`.
+     * A focusable handle carries the keyboard drag for its `[mkDrag]`.
+     */
+    isFocusable(): boolean;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkDragHandle, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MkDragHandle, "[mkDragHandle]", ["mkDragHandle"], {}, {}, never, never, true, never>;
 }
 
 /**
  * Makes an item inside a `[mkDropList]` draggable — by pointer (mouse / touch /
- * pen) **and** by keyboard (WCAG 2.1.1). The item is focusable, exposes
- * `role="button"` + `aria-roledescription="Draggable item"`, and every move is
- * announced via {@link MkLiveAnnouncer}.
+ * pen) **and** by keyboard (WCAG 2.1.1). Every move is announced via
+ * {@link MkLiveAnnouncer}. Which element carries the keyboard interaction
+ * depends on the handle:
+ *
+ * - **No handle, or a decorative one** (`<span mkDragHandle aria-hidden>`):
+ *   the item itself is focusable and exposes `aria-roledescription="Draggable
+ *   item"` with `role="button"` — or `role="option"` when it is an `<li>` of a
+ *   `<ul mkDropList>`, which then becomes a labelled `listbox` (an `<li>` may
+ *   not take the `button` role).
+ * - **A focusable handle** (`<button mkDragHandle aria-label="…">`, or any
+ *   handle with `tabindex`): the handle is the keyboard target and receives
+ *   the `aria-roledescription` / `aria-pressed` / `aria-grabbed` state; the
+ *   item stays a plain container with no role and no `tabindex`, so it can hold
+ *   inputs, links and buttons of its own (no nested interactive controls) and
+ *   `<li>` items keep their list semantics.
  *
- * Keyboard: focus an item and press **Space/Enter** to pick it up, **Arrow**
- * keys to move it (crossing into connected lists at the ends / across the
- * perpendicular axis), **Space/Enter** to drop, **Escape** to cancel.
+ * Keyboard: focus the item (or its handle) and press **Space/Enter** to pick
+ * it up, **Arrow** keys to move it (crossing into connected lists at the ends /
+ * across the perpendicular axis), **Space/Enter** to drop, **Escape** to cancel.
  *
  * Touch: a swipe scrolls the page as usual — the drag only arms after a
  * long-press ({@link mkDragTouchDelay}, default 300 ms). While armed the item
@@ -46,9 +81,9 @@ declare class MkDragHandle {
  * synchronously on release so drops land exactly where the pointer ended.
  *
  * ```html
- * <li mkDrag [mkDragData]="row" [mkDragDisabled]="row.locked">
+ * <div mkDrag [mkDragData]="row" [mkDragDisabled]="row.locked">
  *   <span mkDragHandle aria-hidden="true">⠿</span> {{ row.title }}
- * </li>
+ * </div>
  * ```
  *
  * @typeParam T item data type.
@@ -82,6 +117,20 @@ declare class MkDrag<T = unknown> {
      * inner handle would start the outer drag and inner dnd would never work.
      */
     protected readonly ownHandles: _angular_core.Signal<MkDragHandle[]>;
+    /**
+     * The handle that carries the keyboard drag — the first of this item's
+     * handles that is focusable on its own (a `<button mkDragHandle>`, say).
+     * `null` when the item itself is the keyboard target.
+     */
+    readonly keyboardHandle: _angular_core.Signal<MkDragHandle | null>;
+    /**
+     * The role the item itself exposes: `null` when a focusable handle carries
+     * the interaction; `option` inside a list that resolved to a `listbox`
+     * (`<ul mkDropList>` / `<li mkDrag>`); `button` otherwise.
+     */
+    protected readonly itemRole: _angular_core.Signal<"button" | "option" | null>;
+    /** The element keyboard events act on: the focusable handle, else the item. */
+    private keyboardTarget;
     /** True while a pointer drag is in progress. */
     protected readonly dragging: _angular_core.WritableSignal<boolean>;
     /** True while the item is "picked up" for keyboard movement. */
@@ -105,6 +154,8 @@ declare class MkDrag<T = unknown> {
     private originLeft;
     private originTop;
     private preview;
+    constructor();
+    private toggleAttr;
     private readonly moveHandler;
     private readonly upHandler;
     private readonly cancelHandler;
@@ -168,7 +219,7 @@ declare class MkDrag<T = unknown> {
     private finishPointer;
     private commitPointer;
     protected onKeyDown(event: Event): void;
-    protected onBlur(): void;
+    protected onFocusOut(event: Event): void;
     private pickUp;
     private stepPrimary;
     private stepList;
@@ -228,14 +279,29 @@ declare class MkDrag<T = unknown> {
  * The array bound to `mkDropListData` is **not** mutated for you — handle
  * `mkDropListDropped` and call {@link mkMoveItemInArray} / {@link mkTransferArrayItem}.
  *
+ * Semantics follow the host element and its items, so the tree is always
+ * valid ARIA:
+ *
+ * - any host other than `<ul>`/`<ol>` is a `role="group"` (named by
+ *   `mkDropListLabel`) of `role="button"` items;
+ * - a `<ul>`/`<ol>` whose `<li mkDrag>` items all carry a *focusable*
+ *   `[mkDragHandle]` stays a plain list — the handles are the controls;
+ * - a `<ul>`/`<ol>` whose items are themselves the keyboard targets becomes a
+ *   `listbox` of `option`s (an `<li>` may not be a `button`); give it a
+ *   `mkDropListLabel`, listboxes need a name.
+ *
+ * A `role` you set in the template is kept, and `aria-orientation` is only
+ * exposed on roles that allow it (`listbox`, `toolbar`, `tree`, …) — the
+ * keyboard model handles both axes regardless.
+ *
  * ```html
- * <ul mkDropList [mkDropListData]="todo()"
- *     mkDropListId="todo" [mkDropListConnectedTo]="['done']"
- *     (mkDropListDropped)="drop($event)">
+ * <div mkDropList [mkDropListData]="todo()" mkDropListLabel="To do"
+ *      mkDropListId="todo" [mkDropListConnectedTo]="['done']"
+ *      (mkDropListDropped)="drop($event)">
  *   @for (t of todo(); track t.id) {
- *     <li mkDrag [mkDragData]="t">{{ t.title }}</li>
+ *     <div mkDrag [mkDragData]="t">{{ t.title }}</div>
  *   }
- * </ul>
+ * </div>
  * ```
  *
  * @typeParam T item data type.
@@ -268,6 +334,22 @@ declare class MkDropList<T = unknown> {
     private readonly autoId;
     /** Announceable name: the label when set, otherwise the resolved id. */
     readonly label: _angular_core.Signal<string>;
+    /** A `role` written in the template — always kept. */
+    private readonly explicitRole;
+    private readonly isNativeList;
+    /**
+     * The role the host exposes. One set in the template wins. A `<ul>`/`<ol>`
+     * keeps its implicit `list` role (`null` — nothing is written) while every
+     * item hands the keyboard drag to a focusable handle, and becomes a
+     * `listbox` (its items `option`s) otherwise. Any other element is a `group`.
+     */
+    readonly role: _angular_core.Signal<string | null>;
+    /** Whether `aria-orientation` is valid on the effective role. */
+    protected readonly orientationAllowed: _angular_core.Signal<boolean>;
+    /** A static `aria-label` written in the template, kept when no label input is set. */
+    private readonly staticAriaLabel;
+    /** Accessible name of the list: `mkDropListLabel`, else the template's own. */
+    protected readonly ariaLabel: _angular_core.Signal<string | null>;
     /** Connected-list ids, normalised to a plain array. */
     readonly connectedTo: _angular_core.Signal<readonly string[]>;
     /** The `mkDrag` items projected into this list, in DOM order. */

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

@@ -569,6 +569,8 @@ declare class MkSelect implements ControlValueAccessor, OnDestroy {
     protected readonly i18n: _mk_kit_ui_core.MkI18nStrings;
     private readonly triggerRef;
     /** The list of options to choose from. */
+    /** Accessible name when the control is used without an `mk-form-field` label. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
     readonly options: _angular_core.InputSignal<readonly MkSelectOption[]>;
     /** Placeholder shown when nothing is selected. */
     readonly placeholder: _angular_core.InputSignal<string>;
@@ -615,7 +617,7 @@ declare class MkSelect implements ControlValueAccessor, OnDestroy {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkSelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkSelect, "mk-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkSelect, "mk-select", never, { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 /** One row of an `mk-listbox`. */
@@ -912,6 +914,8 @@ declare class MkAutocomplete implements ControlValueAccessor {
     private lastAnnouncedCount;
     constructor();
     /** The list of suggestions. Update it from `search` for async sources. */
+    /** Accessible name when the control is used without an `mk-form-field` label. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
     readonly options: _angular_core.InputSignal<readonly MkAutocompleteOption[]>;
     /** Placeholder shown when the input is empty. */
     readonly placeholder: _angular_core.InputSignal<string>;
@@ -980,7 +984,7 @@ declare class MkAutocomplete implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkAutocomplete, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkAutocomplete, "mk-autocomplete", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "filterMode": { "alias": "filterMode"; "required": false; "isSignal": true; }; "minChars": { "alias": "minChars"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "requireSelection": { "alias": "requireSelection"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "search": "search"; "optionSelected": "optionSelected"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkAutocomplete, "mk-autocomplete", never, { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "filterMode": { "alias": "filterMode"; "required": false; "isSignal": true; }; "minChars": { "alias": "minChars"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "requireSelection": { "alias": "requireSelection"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "search": "search"; "optionSelected": "optionSelected"; }, never, never, true, never>;
 }
 
 /** How mention suggestions are narrowed against the typed query. */
@@ -1201,6 +1205,8 @@ declare class MkMultiSelect implements ControlValueAccessor, Validator {
     private readonly announcer;
     private readonly inputRef;
     /** The list of options to choose from. Update from `search` for async. */
+    /** Accessible name when the control is used without an `mk-form-field` label. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
     readonly options: _angular_core.InputSignal<readonly MkMultiSelectOption[]>;
     /** Placeholder shown when no value is selected. */
     readonly placeholder: _angular_core.InputSignal<string>;
@@ -1299,7 +1305,7 @@ declare class MkMultiSelect implements ControlValueAccessor, Validator {
     validate(control: AbstractControl): ValidationErrors | null;
     registerOnValidatorChange(fn: () => void): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkMultiSelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkMultiSelect, "mk-multi-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "filterMode": { "alias": "filterMode"; "required": false; "isSignal": true; }; "minChars": { "alias": "minChars"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "search": "search"; "optionAdded": "optionAdded"; "optionRemoved": "optionRemoved"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkMultiSelect, "mk-multi-select", never, { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "filterMode": { "alias": "filterMode"; "required": false; "isSignal": true; }; "minChars": { "alias": "minChars"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "search": "search"; "optionAdded": "optionAdded"; "optionRemoved": "optionRemoved"; }, never, never, true, never>;
 }
 
 /**
@@ -1675,10 +1681,12 @@ declare class MkRepeaterEmpty {
  *
  * With `reorderable`, each row gets a drag handle wired through the dnd
  * module's touch-safe handle-based configuration (a swipe on the row body
- * still scrolls the page). Reordering also works by keyboard: focus the
- * handle (or the row) and press Space/Enter to pick up, arrows to move,
- * Space/Enter to drop, Escape to cancel. Each completed reorder is announced
- * via {@link MkLiveAnnouncer}.
+ * still scrolls the page). The handle button is the only control the dnd
+ * layer adds — rows stay plain list items, so the inputs and buttons inside
+ * them are never nested in an interactive role. Reordering also works by
+ * keyboard: focus the handle and press Space/Enter to pick up, arrows to
+ * move, Space/Enter to drop, Escape to cancel. Each completed reorder is
+ * announced via {@link MkLiveAnnouncer}.
  *
  * ```html
  * <mk-repeater [(items)]="rows" [min]="1" [max]="10" reorderable
@@ -2217,6 +2225,8 @@ declare class MkNumberInput implements ControlValueAccessor, Validator {
     protected readonly i18n: _mk_kit_ui_core.MkI18nStrings;
     private readonly inputRef;
     /** Minimum value. */
+    /** Accessible name when the control is used without an `mk-form-field` label. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
     readonly min: _angular_core.InputSignal<number | null>;
     /** Maximum value. */
     readonly max: _angular_core.InputSignal<number | null>;
@@ -2264,7 +2274,7 @@ declare class MkNumberInput implements ControlValueAccessor, Validator {
     validate(control: AbstractControl): ValidationErrors | null;
     registerOnValidatorChange(fn: () => void): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkNumberInput, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkNumberInput, "mk-number-input", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkNumberInput, "mk-number-input", never, { "ariaLabel": { "alias": "aria-label"; "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; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 type MkNumericKeypadMode = 'pin' | 'quantity' | 'amount';
@@ -2860,6 +2870,8 @@ declare class MkCurrencyInput implements ControlValueAccessor, Validator {
     /** Localised strings (override globally via `provideMkI18n`). */
     protected readonly i18n: _mk_kit_ui_core.MkI18nStrings;
     /** ISO 4217 currency code (`PLN`, `USD`, …). Empty = plain decimal. */
+    /** Accessible name when the control is used without an `mk-form-field` label. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
     readonly currency: _angular_core.InputSignal<string>;
     /** BCP 47 locale for separators/symbol; defaults to the runtime locale. */
     readonly locale: _angular_core.InputSignal<string | undefined>;
@@ -2926,7 +2938,7 @@ declare class MkCurrencyInput implements ControlValueAccessor, Validator {
     validate(control: AbstractControl): ValidationErrors | null;
     registerOnValidatorChange(fn: () => void): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkCurrencyInput, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkCurrencyInput, "mk-currency-input", ["mkCurrencyInput"], { "currency": { "alias": "currency"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "decimals": { "alias": "decimals"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "allowNegative": { "alias": "allowNegative"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkCurrencyInput, "mk-currency-input", ["mkCurrencyInput"], { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "currency": { "alias": "currency"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "decimals": { "alias": "decimals"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "allowNegative": { "alias": "allowNegative"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 /** Card networks {@link MkCardNumberInput} recognises. */

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

@@ -178,12 +178,29 @@ interface MkGroupToggle {
     /** Whether the group is now collapsed. */
     collapsed: boolean;
 }
-/** Options for {@link MkTable.exportCsv}. */
-interface MkTableExportOptions extends MkCsvExportOptions {
+/** Options for {@link MkTable.getExportRows} — which rows and columns to export. */
+interface MkTableExportRowsOptions {
     /** Export only the selected rows (default: every row). */
     selectedOnly?: boolean;
     /** Restrict to these column keys, in table order (default: every column). */
     columns?: readonly string[];
+}
+/** What {@link MkTable.getExportRows} returns: the rows and the columns to write them with. */
+interface MkTableExportRows<T> {
+    /**
+     * The rows in display order — sorted the way they are shown, tree children
+     * flattened under their parent (expanded or not), selection applied when
+     * `selectedOnly` was set.
+     */
+    rows: T[];
+    /**
+     * The columns in the table's current (user-reordered) order, restricted to
+     * the requested keys, each with its header and formatter.
+     */
+    columns: MkCsvColumn<T>[];
+}
+/** Options for {@link MkTable.exportCsv}. */
+interface MkTableExportOptions extends MkCsvExportOptions, MkTableExportRowsOptions {
     /** Start the browser download (default `true`); `false` just returns the text. */
     download?: boolean;
 }
@@ -498,11 +515,28 @@ declare class MkTable<T = Record<string, unknown>> {
     expandAllRows(): void;
     /** Collapse every parent row (tree mode). */
     collapseAllRows(): void;
+    /**
+     * The rows and columns an export writes — exactly what {@link exportCsv}
+     * serialises, for other formats (XLSX, PDF, the clipboard, …): rows in
+     * display order with the current sort applied and tree children
+     * (`childrenKey`) flattened under their parent whether or not they are
+     * expanded, optionally only the selected ones; columns in the table's
+     * current order, restricted to `options.columns` when given, each carrying
+     * its header and `format` so what the user saw is what gets written.
+     *
+     * ```ts
+     * const { rows, columns } = table.getExportRows({ selectedOnly: true });
+     * const sheet = rows.map((row) =>
+     *   Object.fromEntries(columns.map((c) => [c.header ?? c.key, c.format ? c.format(row[c.key], row) : row[c.key]])),
+     * );
+     * ```
+     */
+    getExportRows(options?: MkTableExportRowsOptions): MkTableExportRows<T>;
     /**
      * The table's rows as CSV: current column order, column formatters applied,
      * sorted the way they are shown, tree children flattened under their parent
      * whether or not they are expanded. Downloads the file (default name
-     * `table.csv`) and returns the text.
+     * `table.csv`) and returns the text. Built on {@link getExportRows}.
      */
     exportCsv(options?: MkTableExportOptions): string;
     private setTreeExpanded;
@@ -876,4 +910,4 @@ declare class MkTableDataSource<T> {
 }
 
 export { MkSort, MkSortHeader, MkTable, MkTableCell, MkTableDataSource, MkTableRowDetail, mkDownloadText, mkExportCsv, mkToCsv };
-export type { MkCellEdit, MkColumnResize, MkCsvColumn, MkCsvExportOptions, MkCsvOptions, MkDataFetcher, MkDataPage, MkDataRequest, MkGroupToggle, MkSortChange, MkSortDirection, MkSortState, MkSortable, MkTableAlign, MkTableCellContext, MkTableColumn, MkTableDataSourceOptions, MkTableDensity, MkTableExportOptions, MkTableGroup, MkTreeToggle };
+export type { MkCellEdit, MkColumnResize, MkCsvColumn, MkCsvExportOptions, MkCsvOptions, MkDataFetcher, MkDataPage, MkDataRequest, MkGroupToggle, MkSortChange, MkSortDirection, MkSortState, MkSortable, MkTableAlign, MkTableCellContext, MkTableColumn, MkTableDataSourceOptions, MkTableDensity, MkTableExportOptions, MkTableExportRows, MkTableExportRowsOptions, MkTableGroup, MkTreeToggle };