@mk-kit/ui 0.41.0 → 0.43.0

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

@@ -111,9 +111,9 @@ declare class MkCalendar implements ControlValueAccessor, Validator {
     /** Two-way selected date (single-date mode). */
     readonly value: _angular_core.ModelSignal<Date | null>;
     /** Earliest selectable date (inclusive, day granularity). */
-    readonly min: _angular_core.InputSignal<Date | null>;
+    readonly min: _angular_core.InputSignalWithTransform<Date | null, Date | null | undefined>;
     /** Latest selectable date (inclusive, day granularity). */
-    readonly max: _angular_core.InputSignal<Date | null>;
+    readonly max: _angular_core.InputSignalWithTransform<Date | null, Date | null | undefined>;
     /** First column of the week: 0 = Sunday … 6 = Saturday. */
     readonly firstDayOfWeek: _angular_core.InputSignalWithTransform<number, unknown>;
     /** Disable the whole calendar. */
@@ -158,6 +158,8 @@ declare class MkCalendar implements ControlValueAccessor, Validator {
     protected readonly hoveredDate: _angular_core.WritableSignal<Date | null>;
     /** Disabled by the `disabled` input or by the bound form control. */
     protected readonly isControlDisabled: _angular_core.Signal<boolean>;
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    private readonly fieldTouched;
     protected readonly isInvalid: _angular_core.Signal<boolean>;
     /** First day of the visible month. */
     protected readonly viewMonth: _angular_core.Signal<Date>;
@@ -235,6 +237,8 @@ declare class MkCalendar implements ControlValueAccessor, Validator {
 declare class MkDatePicker implements ControlValueAccessor, Validator {
     protected readonly i18n: _mk_kit_ui_core.MkI18nStrings;
     private readonly field;
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    private readonly fieldTouched;
     private readonly host;
     private readonly injector;
     private readonly inputRef;
@@ -246,9 +250,9 @@ declare class MkDatePicker implements ControlValueAccessor, Validator {
     /** Accessible name when the picker is used without an `mk-form-field` label. */
     readonly ariaLabel: _angular_core.InputSignal<string>;
     protected readonly ariaLabelAttr: _angular_core.Signal<string | null>;
-    readonly min: _angular_core.InputSignal<Date | null>;
+    readonly min: _angular_core.InputSignalWithTransform<Date | null, Date | null | undefined>;
     /** Latest selectable date (inclusive). */
-    readonly max: _angular_core.InputSignal<Date | null>;
+    readonly max: _angular_core.InputSignalWithTransform<Date | null, Date | null | undefined>;
     /** Predicate marking individual days as disabled (threaded to the calendar). */
     readonly disabledDate: _angular_core.InputSignal<((d: Date) => boolean) | null>;
     /** Placeholder shown when empty. */
@@ -261,6 +265,8 @@ declare class MkDatePicker implements ControlValueAccessor, Validator {
     readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Force invalid styling + `aria-invalid`. */
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Mark required (adds `aria-required`). Set by Signal Forms' `[formField]` from the schema. */
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** First column of the calendar week (0 = Sunday). */
     readonly firstDayOfWeek: _angular_core.InputSignalWithTransform<number, unknown>;
     /** Control size. Ignored when nested in an `mk-form-field`. */
@@ -314,7 +320,7 @@ declare class MkDatePicker implements ControlValueAccessor, Validator {
     validate(control: AbstractControl): ValidationErrors | null;
     registerOnValidatorChange(fn: () => void): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkDatePicker, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkDatePicker, "mk-date-picker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "disabledDate": { "alias": "disabledDate"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "displayFormat": { "alias": "displayFormat"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkDatePicker, "mk-date-picker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "disabledDate": { "alias": "disabledDate"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "displayFormat": { "alias": "displayFormat"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 /** A selectable time option. */
@@ -354,6 +360,8 @@ interface MkTimeOption$1 {
 declare class MkTimePicker implements ControlValueAccessor, Validator {
     protected readonly i18n: _mk_kit_ui_core.MkI18nStrings;
     private readonly field;
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    private readonly fieldTouched;
     private readonly host;
     private readonly injector;
     private readonly inputRef;
@@ -371,9 +379,9 @@ declare class MkTimePicker implements ControlValueAccessor, Validator {
     protected readonly ariaLabelAttr: _angular_core.Signal<string | null>;
     readonly valueFormat: _angular_core.InputSignal<"string" | "date">;
     /** Earliest selectable time `HH:mm` (inclusive). */
-    readonly min: _angular_core.InputSignal<string | null>;
+    readonly min: _angular_core.InputSignalWithTransform<string | null, string | null | undefined>;
     /** Latest selectable time `HH:mm` (inclusive). */
-    readonly max: _angular_core.InputSignal<string | null>;
+    readonly max: _angular_core.InputSignalWithTransform<string | null, string | null | undefined>;
     /** Interval between generated options, in minutes. */
     readonly step: _angular_core.InputSignalWithTransform<number, unknown>;
     /** Display 12-hour time with AM/PM (the model stays 24h). */
@@ -386,6 +394,8 @@ declare class MkTimePicker implements ControlValueAccessor, Validator {
     readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Force invalid styling + `aria-invalid`. */
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Mark required (adds `aria-required`). Set by Signal Forms' `[formField]` from the schema. */
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Control size. Ignored when nested in an `mk-form-field`. */
     readonly size: _angular_core.InputSignal<MkSize>;
     protected readonly open: _angular_core.WritableSignal<boolean>;
@@ -459,7 +469,7 @@ declare class MkTimePicker implements ControlValueAccessor, Validator {
     validate(control: AbstractControl): ValidationErrors | null;
     registerOnValidatorChange(fn: () => void): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkTimePicker, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkTimePicker, "mk-time-picker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "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; }; "hour12": { "alias": "hour12"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "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<MkTimePicker, "mk-time-picker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "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; }; "hour12": { "alias": "hour12"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "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; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 /** A selectable time-of-day option in the panel's list. */
@@ -499,6 +509,8 @@ interface MkTimeOption {
 declare class MkDateTimePicker implements ControlValueAccessor, Validator {
     protected readonly i18n: _mk_kit_ui_core.MkI18nStrings;
     private readonly field;
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    private readonly fieldTouched;
     private readonly host;
     private readonly injector;
     private readonly inputRef;
@@ -508,9 +520,9 @@ declare class MkDateTimePicker implements ControlValueAccessor, Validator {
     /** Two-way selected date-time (local; seconds and ms are zero). */
     readonly value: _angular_core.ModelSignal<Date | null>;
     /** Earliest selectable instant (inclusive, minute precision). */
-    readonly min: _angular_core.InputSignal<Date | null>;
+    readonly min: _angular_core.InputSignalWithTransform<Date | null, Date | null | undefined>;
     /** Latest selectable instant (inclusive, minute precision). */
-    readonly max: _angular_core.InputSignal<Date | null>;
+    readonly max: _angular_core.InputSignalWithTransform<Date | null, Date | null | undefined>;
     /** Predicate marking individual days as disabled (threaded to the calendar). */
     readonly disabledDate: _angular_core.InputSignal<((d: Date) => boolean) | null>;
     /** Placeholder shown when empty. */
@@ -530,6 +542,8 @@ declare class MkDateTimePicker implements ControlValueAccessor, Validator {
     readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Force invalid styling + `aria-invalid`. */
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Mark required (adds `aria-required`). Set by Signal Forms' `[formField]` from the schema. */
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** First column of the calendar week (0 = Sunday). */
     readonly firstDayOfWeek: _angular_core.InputSignalWithTransform<number, unknown>;
     /** Control size. Ignored when nested in an `mk-form-field`. */
@@ -614,7 +628,7 @@ declare class MkDateTimePicker implements ControlValueAccessor, Validator {
     validate(control: AbstractControl): ValidationErrors | null;
     registerOnValidatorChange(fn: () => void): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkDateTimePicker, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkDateTimePicker, "mk-datetime-picker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "disabledDate": { "alias": "disabledDate"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "displayFormat": { "alias": "displayFormat"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "hour12": { "alias": "hour12"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkDateTimePicker, "mk-datetime-picker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "disabledDate": { "alias": "disabledDate"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "displayFormat": { "alias": "displayFormat"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "hour12": { "alias": "hour12"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 /** A selected date range. Either endpoint may be `null` while incomplete. */
@@ -636,6 +650,8 @@ interface MkDateRange {
 declare class MkDateRangePicker implements ControlValueAccessor, Validator {
     protected readonly i18n: _mk_kit_ui_core.MkI18nStrings;
     private readonly field;
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    private readonly fieldTouched;
     private readonly host;
     private readonly injector;
     private readonly triggerRef;
@@ -644,9 +660,9 @@ declare class MkDateRangePicker implements ControlValueAccessor, Validator {
     /** Two-way selected range. */
     readonly value: _angular_core.ModelSignal<MkDateRange>;
     /** Earliest selectable date (inclusive). */
-    readonly min: _angular_core.InputSignal<Date | null>;
+    readonly min: _angular_core.InputSignalWithTransform<Date | null, Date | null | undefined>;
     /** Latest selectable date (inclusive). */
-    readonly max: _angular_core.InputSignal<Date | null>;
+    readonly max: _angular_core.InputSignalWithTransform<Date | null, Date | null | undefined>;
     /** Predicate marking individual days as disabled. */
     readonly disabledDate: _angular_core.InputSignal<((d: Date) => boolean) | null>;
     /** Placeholder shown when no range is selected. */
@@ -744,6 +760,8 @@ interface Cell {
 declare class MkMonthPicker implements ControlValueAccessor, Validator {
     protected readonly i18n: _mk_kit_ui_core.MkI18nStrings;
     private readonly field;
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    private readonly fieldTouched;
     private readonly host;
     private readonly injector;
     private readonly triggerRef;
@@ -754,9 +772,9 @@ declare class MkMonthPicker implements ControlValueAccessor, Validator {
     /** Pick a month or a whole year. */
     readonly mode: _angular_core.InputSignal<MkMonthPickerMode>;
     /** Earliest selectable date. */
-    readonly min: _angular_core.InputSignal<Date | null>;
+    readonly min: _angular_core.InputSignalWithTransform<Date | null, Date | null | undefined>;
     /** Latest selectable date. */
-    readonly max: _angular_core.InputSignal<Date | null>;
+    readonly max: _angular_core.InputSignalWithTransform<Date | null, Date | null | undefined>;
     /** Placeholder shown when empty. */
     readonly placeholder: _angular_core.InputSignal<string>;
     /** Display pattern (defaults to `MMM yyyy` / `yyyy`). */
@@ -840,6 +858,8 @@ interface MkWeek {
 declare class MkWeekPicker implements ControlValueAccessor, Validator {
     protected readonly i18n: _mk_kit_ui_core.MkI18nStrings;
     private readonly field;
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    private readonly fieldTouched;
     private readonly host;
     private readonly injector;
     private readonly triggerRef;
@@ -847,9 +867,9 @@ declare class MkWeekPicker implements ControlValueAccessor, Validator {
     /** Two-way selected week. */
     readonly value: _angular_core.ModelSignal<MkWeek | null>;
     /** Earliest selectable date (inclusive). */
-    readonly min: _angular_core.InputSignal<Date | null>;
+    readonly min: _angular_core.InputSignalWithTransform<Date | null, Date | null | undefined>;
     /** Latest selectable date (inclusive). */
-    readonly max: _angular_core.InputSignal<Date | null>;
+    readonly max: _angular_core.InputSignalWithTransform<Date | null, Date | null | undefined>;
     /** First column of the calendar week (0 = Sunday). Also anchors the week. */
     readonly firstDayOfWeek: _angular_core.InputSignalWithTransform<number, unknown>;
     /** Placeholder shown when empty. */
@@ -1251,12 +1271,14 @@ interface MkDatePart {
  */
 declare class MkMiniDate implements ControlValueAccessor, Validator {
     private readonly field;
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    private readonly fieldTouched;
     protected readonly i18n: _mk_kit_ui_core.MkI18nStrings;
     private readonly segEls;
     /** Minimum selectable date (inclusive). */
-    readonly min: _angular_core.InputSignal<Date | null>;
+    readonly min: _angular_core.InputSignalWithTransform<Date | null, Date | null | undefined>;
     /** Maximum selectable date (inclusive). */
-    readonly max: _angular_core.InputSignal<Date | null>;
+    readonly max: _angular_core.InputSignalWithTransform<Date | null, Date | null | undefined>;
     /** Two-way value — a real `Date`, or `null` while incomplete. */
     readonly value: _angular_core.ModelSignal<Date | null>;
     /** Disable the control. */

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. */