@mk-kit/ui 0.40.0 → 0.42.0

package/README.md

@@ -83,12 +83,12 @@ export class AppRoot {
 | **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** (25) | cards, lists, stat cards, badges, 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** (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 |
 | **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** (25) | 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) |
+| **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), 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 (426 built-in icons), i18n |
 
 The full, searchable index lives in the docs (`/components-index`).
 

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

@@ -9,6 +9,9 @@ const STORAGE_KEY = 'mk-kit-theme';
 const THEME_ATTR = 'data-mk-theme';
 const DENSITY_STORAGE_KEY = 'mk-kit-density';
 const DENSITY_ATTR = 'data-mk-density';
+const CONTRAST_STORAGE_KEY = 'mk-kit-contrast';
+const CONTRAST_ATTR = 'data-mk-contrast';
+const CONTRAST_QUERY = '(prefers-contrast: more)';
 /**
  * Reactive theme controller for mk-kit.
  *
@@ -55,10 +58,59 @@ class MkThemeService {
      * it.
      */
     density = this._density.asReadonly();
+    _contrast = signal(this.readInitialContrast(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_contrast" }] : /* istanbul ignore next */ []));
+    /**
+     * The user's contrast preference: `normal`, `high` or `system` (follow the
+     * OS `prefers-contrast` setting — the default). Written as
+     * `data-mk-contrast` on `<html>` and persisted; `system` removes the
+     * attribute so the pure-CSS `prefers-contrast: more` mapping takes over.
+     *
+     * Like density, the attribute also works per subtree: put
+     * `data-mk-contrast="high"` on any element to raise contrast there only.
+     */
+    contrast = this._contrast.asReadonly();
+    _systemPrefersContrast = signal(this.readSystemContrast(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_systemPrefersContrast" }] : /* istanbul ignore next */ []));
+    /** The concrete contrast in effect (`normal` or `high`). */
+    resolvedContrast = computed(() => {
+        const pref = this._contrast();
+        if (pref === 'system') {
+            return this._systemPrefersContrast() ? 'high' : 'normal';
+        }
+        return pref;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedContrast" }] : /* istanbul ignore next */ []));
+    /** Convenience boolean for template bindings. */
+    isHighContrast = computed(() => this.resolvedContrast() === 'high', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isHighContrast" }] : /* istanbul ignore next */ []));
     constructor() {
         if (this.isBrowser) {
             this.watchSystemPreference();
+            this.watchSystemContrast();
         }
+        // Keep the contrast attribute + storage in sync. `system` is the ABSENCE
+        // of the attribute (the stylesheet then follows `prefers-contrast`);
+        // `normal` and `high` name themselves so CSS can tell an explicit opt-out
+        // from "no preference".
+        effect(() => {
+            const contrast = this._contrast();
+            if (!this.isBrowser)
+                return;
+            const root = this.document.documentElement;
+            if (contrast === 'system') {
+                root.removeAttribute(CONTRAST_ATTR);
+            }
+            else {
+                root.setAttribute(CONTRAST_ATTR, contrast);
+            }
+            try {
+                localStorage.setItem(CONTRAST_STORAGE_KEY, contrast);
+            }
+            catch {
+                /* ignore */
+            }
+        });
         // Keep the DOM attribute + storage in sync with the signal.
         effect(() => {
             const pref = this._preference();
@@ -128,6 +180,41 @@ class MkThemeService {
         }
         return 'comfortable';
     }
+    /** Set the contrast preference explicitly. */
+    setContrast(contrast) {
+        this._contrast.set(contrast);
+    }
+    /** Toggle between normal and high contrast (resolving `system` first). */
+    toggleContrast() {
+        this._contrast.set(this.resolvedContrast() === 'high' ? 'normal' : 'high');
+    }
+    readInitialContrast() {
+        if (!this.isBrowserEnv())
+            return 'system';
+        try {
+            const stored = localStorage.getItem(CONTRAST_STORAGE_KEY);
+            if (stored === 'normal' || stored === 'high' || stored === 'system') {
+                return stored;
+            }
+        }
+        catch {
+            /* ignore */
+        }
+        return 'system';
+    }
+    readSystemContrast() {
+        if (!this.isBrowserEnv())
+            return false;
+        return this.document.defaultView?.matchMedia?.(CONTRAST_QUERY).matches ?? false;
+    }
+    watchSystemContrast() {
+        const mql = this.document.defaultView?.matchMedia?.(CONTRAST_QUERY);
+        if (!mql)
+            return;
+        const onChange = (e) => this._systemPrefersContrast.set(e.matches);
+        mql.addEventListener('change', onChange);
+        this.destroyRef.onDestroy(() => mql.removeEventListener('change', onChange));
+    }
     /** Set the theme preference explicitly. */
     setTheme(preference) {
         this._preference.set(preference);