@mk-kit/ui 0.42.0 → 0.44.0

package/README.md

@@ -79,16 +79,16 @@ export class AppRoot {
 
 | Group | Highlights |
 |---|---|
-| **Forms & inputs** (54) | text, number, password (strength meter), OTP, phone (country prefix), postal code, currency, card number, IBAN, tax id, masked input, tag input, select, autocomplete, multi-select, tree-select, transfer list, checkbox, radio, switch, slider, range slider, rating, colour picker, file upload (dropzone), signature pad, numeric keypad & on-screen keyboard, repeater (`FormArray`), form field with automatic validation messages, form error summary, listbox, cascader (multi-column select), floating labels, dynamic form (JSON schema → form) |
+| **Forms & inputs** (54) | text, number, password (strength meter), OTP, phone (country prefix), postal code, currency, card number, IBAN, tax id, masked input, tag input, select, autocomplete, multi-select, tree-select, transfer list, checkbox, radio, switch, slider, range slider, rating, colour picker, file upload (dropzone), signature pad, numeric keypad & on-screen keyboard, repeater (`FormArray`), form field with automatic validation messages, form error summary, listbox, cascader (multi-column select), floating labels, dynamic form (JSON schema → form); every control binds with reactive forms, `ngModel` **and Angular 22 Signal Forms (`[formField]`)**, with `mk-form-field` / the error summary reading the field state and `mkDynamicFormToSignalSchema` converting a dynamic-form definition to a `schema()` |
 | **Date & time** | calendar, date picker, date-range picker, time picker, month/year picker, week picker, inline mini date, event calendar with editable week/day grid (drag to move / resize) |
 | **Tables & grids** (7) | data table — sort, multi-select, expandable rows, tree rows, grouping, sticky header, column resize / reorder / pin, inline cell edit, responsive stacking, CSV export, print styles — plus `MkTableDataSource` for server-side sort/page/filter, query builder (`mk-query-builder` → predicate / readable text / `MkTableDataSource.setQuery()`) |
 | **Charts** (12) | line/area, bar (stacked, horizontal, label fitting), donut, gauge, progress ring, scatter/bubble, radar, funnel, treemap, heatmap, calendar heatmap, sparkline — SVG, themed, accessible |
-| **Data display** (26) | cards, lists, stat cards, badges, badge overlay (`[mkBadgeOverlay]`), tags, chips, avatars & groups, timeline, description list, tree, empty state, countdown, QR code, diff view, JSON viewer, code block, virtual scroll, carousel, kanban |
+| **Data display** (27) | cards, lists, stat cards, badges, badge overlay (`[mkBadgeOverlay]`), tags, chips, avatars & groups, timeline, description list, tree, org chart, empty state, countdown, QR code, diff view, JSON viewer, code block, virtual scroll, carousel, kanban |
 | **Navigation & layout** (21) | app shell (responsive sidebar), stack / flex / grid layout primitives, nav list & groups, tabs, stepper, breadcrumb, pagination, menu, context menu, command palette (⌘K), page header, toolbar, splitter, drawer, scroll area, FAB, back-to-top |
 | **Feedback & overlays** (21) | dialogs (+ `confirm()` / `alert()` / `prompt()`), bottom sheet, drawer, popover, popconfirm, hovercard, tooltip, toast, snackbar, alert, banner, result page, notification center, product tour, progress bar, loading bar, spinner, skeletons, block UI (region / page overlay), draggable & resizable dialogs |
 | **Editors & interactions** (31) | block editor (Notion-style, HTML round-trip), rich text, markdown renderer, code editor, log viewer, drag & drop, sortable list, @mentions, hotkeys, undo/redo history, permissions (`*mkCan`), clipboard, intersect, infinite scroll, ripple, scrollspy, chat (streaming message log, tool cards, prompt box), `Intl` formatting pipes (currency, relative time, file size, initials, truncate, pluralize) |
 | **Media** (6) | image with states, gallery, lightbox, cropper, media manager |
-| **Core services** | theme (light/dark/system + density + high contrast), breakpoints, overlay & anchored panels, focus trap, live announcer, icon registry (426 built-in icons), i18n |
+| **Core services** | theme (light/dark/system + density + high contrast), breakpoints, overlay & anchored panels, focus trap, live announcer, icon registry (121 default icons always on + 305 opt-in Lucide-derived, tree-shakeable by themed subset or lazy-loaded via `provideMkIcons()`), i18n |
 
 The full, searchable index lives in the docs (`/components-index`).
 
@@ -176,6 +176,8 @@ modals, an Escape that closes only the topmost overlay, live-region
 announcements for async state, contrast-checked tokens in both themes,
 `prefers-reduced-motion` and `forced-colors` support. Axe runs over rendered
 fixtures in the test suite; information is never conveyed by colour alone.
+The [accessibility statement](https://mk-kit.dev/accessibility) lists what is
+verified automatically and the known gaps.
 
 ## SSR & zoneless
 

package/THIRD_PARTY_NOTICES.md

@@ -2,8 +2,10 @@
 
 ## Lucide Icons
 
-Part of the built-in icon set (`MK_EXTENDED_ICONS`, generated by
-`scripts/gen-icons.mjs`) is derived from [Lucide](https://lucide.dev),
+The opt-in extended icon set (`MK_EXTENDED_ICONS` in
+`@mk-kit/ui/icon/extended`) and a handful of the default icons (those the
+library's own components render — `default-icons.lucide.ts`), both generated
+by `scripts/gen-icons.mjs`, are derived from [Lucide](https://lucide.dev),
 distributed under the ISC licence:
 
 ```

package/fesm2022/mk-kit-ui-block-editor.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { InjectionToken, inject, signal, computed, Injectable, input, booleanAttribute, output, ChangeDetectionStrategy, Component, viewChild, DOCUMENT, ElementRef, DestroyRef, model, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from '@mk-kit/ui/core';
-import { MK_I18N, mkUniqueId } from '@mk-kit/ui/core';
+import { MK_I18N, mkUniqueId, mkInjectFieldTouched } from '@mk-kit/ui/core';
 import { MkRichTextEngine, sanitizeInlineHtml } from '@mk-kit/ui/rich-text';
 export { sanitizeInlineHtml } from '@mk-kit/ui/rich-text';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -1893,7 +1893,9 @@ class MkBlockEditor {
     cvaDisabled = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
     /** Invalid visual, forced by the `invalid` input. */
-    isInvalid = computed(() => this.invalid(), /* @ts-ignore */
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
+    isInvalid = computed(() => this.invalid() && this.fieldTouched(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
     onChange = () => { };
     onTouched = () => { };