@mk-kit/ui 0.34.0

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

@@ -0,0 +1,3409 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Injector, model, input, numberAttribute, booleanAttribute, output, signal, computed, effect, untracked, afterNextRender, forwardRef, ChangeDetectionStrategy, Component, viewChild, viewChildren } from '@angular/core';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import { MK_I18N, MkLiveAnnouncer, mkUniqueId, mkValidatorChange, MkAnchoredPanel } from '@mk-kit/ui/core';
+import { MkFormField } from '@mk-kit/ui/forms';
+import { DOCUMENT } from '@angular/common';
+
+/** English full month names, January (index 0) → December (index 11). */
+const MONTH_NAMES = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+];
+/** English abbreviated month names (`MMM`). */
+const MONTH_NAMES_SHORT = [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec',
+];
+/** English full weekday names, Sunday (index 0) → Saturday (index 6). */
+const WEEKDAY_NAMES = [
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday',
+];
+/** English abbreviated weekday names (`ddd`). */
+const WEEKDAY_NAMES_SHORT = [
+    'Sun',
+    'Mon',
+    'Tue',
+    'Wed',
+    'Thu',
+    'Fri',
+    'Sat',
+];
+/** English single-letter weekday names (narrow). */
+const WEEKDAY_NAMES_NARROW = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+function pad2$1(n) {
+    return n < 10 ? `0${n}` : `${n}`;
+}
+/** True when both dates fall on the same calendar day (local time). */
+function isSameDay(a, b) {
+    return (a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate());
+}
+/** True when both dates fall in the same calendar month of the same year. */
+function isSameMonth(a, b) {
+    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+/** Midnight (00:00:00.000) on the first day of `date`'s month. */
+function startOfMonth(date) {
+    return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+/** Midnight on the last day of `date`'s month. */
+function endOfMonth(date) {
+    return new Date(date.getFullYear(), date.getMonth() + 1, 0);
+}
+/** A new date `count` months after `date` (negative to subtract). Clamps the
+ * day of month so e.g. Jan 31 + 1 month = Feb 28/29, not Mar 3. */
+function addMonths(date, count) {
+    const targetMonth = date.getMonth() + count;
+    const result = new Date(date.getFullYear(), targetMonth, 1, date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
+    const lastDay = new Date(result.getFullYear(), result.getMonth() + 1, 0).getDate();
+    result.setDate(Math.min(date.getDate(), lastDay));
+    return result;
+}
+/** A new date `count` days after `date` (negative to subtract). */
+function addDays(date, count) {
+    const result = new Date(date);
+    result.setDate(result.getDate() + count);
+    return result;
+}
+/** Midnight (00:00:00.000) on `date`'s calendar day. */
+function startOfDay(date) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+/**
+ * The first day of the week containing `date`, at midnight. `firstDayOfWeek`
+ * is the week's starting weekday (0 = Sunday … 6 = Saturday).
+ */
+function startOfWeek(date, firstDayOfWeek = 0) {
+    const start = startOfDay(date);
+    const diff = (start.getDay() - firstDayOfWeek + 7) % 7;
+    return addDays(start, -diff);
+}
+/** The last day of the week containing `date`, at midnight. */
+function endOfWeek(date, firstDayOfWeek = 0) {
+    return addDays(startOfWeek(date, firstDayOfWeek), 6);
+}
+/**
+ * ISO-8601 week number (1–53) of `date`. Weeks start on Monday and week 1 is
+ * the week containing the first Thursday of the year.
+ */
+function getISOWeek(date) {
+    // Shift to the Thursday of this ISO week, then count weeks from Jan 1.
+    const d = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    const day = (d.getDay() + 6) % 7; // Monday = 0 … Sunday = 6
+    d.setDate(d.getDate() - day + 3);
+    const firstThursday = new Date(d.getFullYear(), 0, 4);
+    const firstDay = (firstThursday.getDay() + 6) % 7;
+    firstThursday.setDate(firstThursday.getDate() - firstDay + 3);
+    return (1 + Math.round((d.getTime() - firstThursday.getTime()) / (7 * 86400000)));
+}
+/** True when `a` is strictly before `b` (full timestamp comparison). */
+function isBefore(a, b) {
+    return a.getTime() < b.getTime();
+}
+/** True when `a` is strictly after `b` (full timestamp comparison). */
+function isAfter(a, b) {
+    return a.getTime() > b.getTime();
+}
+/** Clamp `date` into the inclusive `[min, max]` range (either bound optional). */
+function clampDate(date, min, max) {
+    if (min && isBefore(date, min))
+        return new Date(min);
+    if (max && isAfter(date, max))
+        return new Date(max);
+    return date;
+}
+/** Format `date` as an ISO calendar date `YYYY-MM-DD` (local time). */
+function formatISODate(date) {
+    return `${date.getFullYear().toString().padStart(4, '0')}-${pad2$1(date.getMonth() + 1)}-${pad2$1(date.getDate())}`;
+}
+/** Parse a `YYYY-MM-DD` string into a local-time `Date`, or `null` if invalid. */
+function parseISODate(value) {
+    if (!value)
+        return null;
+    const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value.trim());
+    if (!match)
+        return null;
+    const year = Number(match[1]);
+    const month = Number(match[2]) - 1;
+    const day = Number(match[3]);
+    const date = new Date(year, month, day);
+    // Reject rollovers like 2024-02-31.
+    if (date.getFullYear() !== year ||
+        date.getMonth() !== month ||
+        date.getDate() !== day) {
+        return null;
+    }
+    return date;
+}
+/**
+ * Format `date` using a small pattern set. Supported tokens:
+ * `yyyy` (4-digit year), `MMMM` (full month), `MMM` (short month),
+ * `MM` (2-digit month), `dd` (2-digit day), `d` (day), `ddd` (short weekday).
+ * Longer tokens are matched first so `MMMM` wins over `MM`.
+ * Month/weekday names come from `names` when given, else English.
+ */
+function formatDate(date, pattern, names) {
+    const tokens = [
+        ['yyyy', () => date.getFullYear().toString().padStart(4, '0')],
+        ['MMMM', () => (names?.months ?? MONTH_NAMES)[date.getMonth()]],
+        ['MMM', () => (names?.monthsShort ?? MONTH_NAMES_SHORT)[date.getMonth()]],
+        ['MM', () => pad2$1(date.getMonth() + 1)],
+        // Longest-first: 'ddd' (short weekday) must be matched before 'dd'/'d',
+        // otherwise 'ddd' is consumed as 'dd' + 'd' and produces day numbers.
+        ['ddd', () => (names?.weekdaysShort ?? WEEKDAY_NAMES_SHORT)[date.getDay()]],
+        ['dd', () => pad2$1(date.getDate())],
+        ['d', () => date.getDate().toString()],
+    ];
+    let result = '';
+    let i = 0;
+    outer: while (i < pattern.length) {
+        for (const [token, resolve] of tokens) {
+            if (pattern.startsWith(token, i)) {
+                result += resolve();
+                i += token.length;
+                continue outer;
+            }
+        }
+        result += pattern[i];
+        i += 1;
+    }
+    return result;
+}
+/**
+ * Build a fixed 6×7 matrix of `Date` cells for `viewDate`'s month, including
+ * the leading days from the previous month and trailing days from the next so
+ * every row is full. `firstDayOfWeek` is 0 (Sunday) … 6 (Saturday).
+ */
+function buildMonthMatrix(viewDate, firstDayOfWeek = 0) {
+    const first = startOfMonth(viewDate);
+    const firstDow = first.getDay();
+    const offset = (firstDow - firstDayOfWeek + 7) % 7;
+    const gridStart = addDays(first, -offset);
+    const weeks = [];
+    let cursor = gridStart;
+    for (let week = 0; week < 6; week++) {
+        const row = [];
+        for (let day = 0; day < 7; day++) {
+            row.push(cursor);
+            cursor = addDays(cursor, 1);
+        }
+        weeks.push(row);
+    }
+    return weeks;
+}
+/** Full month names, index 0 = January (from `names`, else English). */
+function getMonthNames(names) {
+    return names?.months ?? MONTH_NAMES;
+}
+/**
+ * Weekday header labels ordered to start at `firstDayOfWeek`.
+ * `format` selects `'short'` (e.g. `Mon`) or `'narrow'` (e.g. `M`).
+ * Labels come from `names` when given, else English.
+ */
+function getWeekdayNames(firstDayOfWeek = 0, format = 'short', names) {
+    const source = format === 'narrow'
+        ? (names?.weekdaysNarrow ?? WEEKDAY_NAMES_NARROW)
+        : (names?.weekdaysShort ?? WEEKDAY_NAMES_SHORT);
+    const start = ((firstDayOfWeek % 7) + 7) % 7;
+    const labels = [];
+    for (let i = 0; i < 7; i++) {
+        labels.push(source[(start + i) % 7]);
+    }
+    return labels;
+}
+/** Full weekday name for `date` (for screen-reader labels). */
+function getWeekdayFullName(date, names) {
+    return (names?.weekdays ?? WEEKDAY_NAMES)[date.getDay()];
+}
+
+/**
+ * Calendar — an accessible month-grid date picker following the WAI-ARIA
+ * grid / date-picker pattern. It is the reusable core behind
+ * `mk-date-picker` and `mk-date-range-picker`.
+ *
+ * Keyboard (when a day has focus): Arrow keys move by day/week (crossing month
+ * boundaries updates the view), Home/End jump to the start/end of the week,
+ * PageUp/PageDown change month, Shift+PageUp/PageDown change year, and
+ * Enter/Space selects the focused day. A roving tabindex keeps a single tab
+ * stop. Month changes are announced via {@link MkLiveAnnouncer}.
+ *
+ * Exposes a two-way `value` model and implements `ControlValueAccessor`, so it
+ * also works directly with `ngModel` / `formControl` (single-date mode).
+ * Additive range inputs (`rangeMode`,
+ * `rangeStart`, `rangeEnd`) let it highlight an in-progress selection without
+ * affecting single-date use; range hosts listen to `dateSelected`.
+ *
+ * ```html
+ * <mk-calendar [(value)]="date" [min]="minDate" [firstDayOfWeek]="1" />
+ * ```
+ */
+class MkCalendar {
+    host = inject(ElementRef);
+    i18n = inject(MK_I18N);
+    injector = inject(Injector);
+    announcer = inject(MkLiveAnnouncer);
+    /** Two-way selected date (single-date mode). */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Earliest selectable date (inclusive, day granularity). */
+    min = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Latest selectable date (inclusive, day granularity). */
+    max = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** First column of the week: 0 = Sunday … 6 = Saturday. */
+    firstDayOfWeek = input(0, { ...(ngDevMode ? { debugName: "firstDayOfWeek" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Disable the whole calendar. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Force the invalid visual + `aria-invalid` when used standalone. */
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Predicate marking individual days as disabled. */
+    disabledDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledDate" }] : /* istanbul ignore next */ []));
+    /** Control size. */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Stretch to fill the container instead of sizing to content.
+     *
+     * Off by default, because the common host is a date-picker popover that must
+     * stay a compact widget. Turn it on when the calendar is laid out as part of
+     * a page — a sidebar or a column — where sizing to content leaves the space
+     * beside it empty. Cells share the width evenly and `--_cell-size` becomes
+     * their minimum rather than their fixed size.
+     */
+    fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    // --- Range mode (additive; does not affect single-date use) --------------
+    /** Enable range highlighting. Hosts drive selection via `dateSelected`. */
+    rangeMode = input(false, { ...(ngDevMode ? { debugName: "rangeMode" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Range start endpoint to highlight (range mode). */
+    rangeStart = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rangeStart" }] : /* istanbul ignore next */ []));
+    /** Range end endpoint to highlight (range mode). */
+    rangeEnd = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rangeEnd" }] : /* istanbul ignore next */ []));
+    /** Emitted whenever a (non-disabled) day is activated. */
+    dateSelected = output();
+    /**
+     * Emitted (in range mode) as the pointer hovers days — the hovered day, or
+     * `null` on leave. Lets hosts preview a selection (e.g. a whole-week
+     * highlight in `mk-week-picker`).
+     */
+    dateHovered = output();
+    /** id of the visible month/year label — wire as the grid's label. */
+    labelId = mkUniqueId('mk-calendar-label');
+    /** Disabled state driven by forms (`setDisabledState`). */
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    /** The day that currently owns the roving tabindex; also drives the view. */
+    focusedDate = signal(this.initialFocus(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedDate" }] : /* istanbul ignore next */ []));
+    /** Hovered day used to preview a range before the end is picked. */
+    hoveredDate = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoveredDate" }] : /* istanbul ignore next */ []));
+    /** Disabled by the `disabled` input or by the bound form control. */
+    isControlDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isControlDisabled" }] : /* istanbul ignore next */ []));
+    isInvalid = computed(() => this.invalid(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
+    /** First day of the visible month. */
+    viewMonth = computed(() => startOfMonth(this.focusedDate()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewMonth" }] : /* istanbul ignore next */ []));
+    /** Human label for the visible month, e.g. `July 2026`. */
+    monthLabel = computed(() => formatDate(this.viewMonth(), 'MMMM yyyy', this.i18n.dateNames), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthLabel" }] : /* istanbul ignore next */ []));
+    /** 6×7 grid of dates for the visible month. */
+    weeks = computed(() => buildMonthMatrix(this.viewMonth(), this.firstDayOfWeek()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weeks" }] : /* istanbul ignore next */ []));
+    /** Weekday column headers ordered from `firstDayOfWeek`. */
+    weekdays = computed(() => this.weeks()[0].map((d) => ({
+        short: formatDate(d, 'ddd', this.i18n.dateNames),
+        full: getWeekdayFullName(d, this.i18n.dateNames),
+    })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []));
+    announcedMonth = this.monthLabel();
+    constructor() {
+        // Follow external value changes into the view/focus. Read focusedDate
+        // untracked so this effect only reacts to `value` — otherwise navigating
+        // months (which moves focusedDate) would re-run it and snap the view back.
+        effect(() => {
+            const v = this.value();
+            if (v && !isSameDay(v, untracked(this.focusedDate))) {
+                this.focusedDate.set(startOfDay(v));
+            }
+        });
+        // Announce month transitions for screen-reader users.
+        effect(() => {
+            const label = this.monthLabel();
+            if (label !== this.announcedMonth) {
+                this.announcedMonth = label;
+                this.announcer.announce(label);
+            }
+        });
+    }
+    // --- ControlValueAccessor ---------------------------------------------------
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value.set(value instanceof Date ? startOfDay(value) : null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    /** Marks the control touched when focus leaves the calendar entirely. */
+    onFocusout(event) {
+        const next = event.relatedTarget;
+        if (!next || !this.host.nativeElement.contains(next))
+            this.onTouched();
+    }
+    initialFocus() {
+        const base = this.value() ?? new Date();
+        return startOfDay(clampDate(startOfDay(base), this.min(), this.max()));
+    }
+    // --- Day classification ---------------------------------------------------
+    isOutside(d) {
+        return !isSameMonth(d, this.viewMonth());
+    }
+    isDisabled(d) {
+        if (this.isControlDisabled())
+            return true;
+        const day = startOfDay(d);
+        const min = this.min();
+        const max = this.max();
+        if (min && isBefore(day, startOfDay(min)))
+            return true;
+        if (max && isAfter(day, startOfDay(max)))
+            return true;
+        return this.disabledDate()?.(d) ?? false;
+    }
+    isToday(d) {
+        return isSameDay(d, new Date());
+    }
+    isSelected(d) {
+        const v = this.value();
+        return !this.rangeMode() && !!v && isSameDay(d, v);
+    }
+    isFocused(d) {
+        return isSameDay(d, this.focusedDate());
+    }
+    /** Effective range end while previewing (falls back to the hovered day). */
+    previewEnd() {
+        return this.rangeEnd() ?? this.hoveredDate();
+    }
+    isRangeStart(d) {
+        const s = this.rangeStart();
+        return this.rangeMode() && !!s && isSameDay(d, s);
+    }
+    isRangeEnd(d) {
+        if (!this.rangeMode())
+            return false;
+        const end = this.previewEnd();
+        return !!end && isSameDay(d, end);
+    }
+    isInRange(d) {
+        if (!this.rangeMode())
+            return false;
+        const s = this.rangeStart();
+        const end = this.previewEnd();
+        if (!s || !end)
+            return false;
+        const [lo, hi] = isAfter(end, s) ? [s, end] : [end, s];
+        const day = startOfDay(d);
+        return isAfter(day, startOfDay(lo)) && isBefore(day, startOfDay(hi));
+    }
+    /**
+     * `aria-selected` state of a day's gridcell. Single-date mode mirrors
+     * `isSelected`; range mode exposes the committed endpoints and the days
+     * between them (hover previews stay visual-only so the accessibility tree
+     * doesn't churn while the pointer moves).
+     */
+    isAriaSelected(d) {
+        if (!this.rangeMode())
+            return this.isSelected(d);
+        const s = this.rangeStart();
+        const e = this.rangeEnd();
+        if (s && isSameDay(d, s))
+            return true;
+        if (e && isSameDay(d, e))
+            return true;
+        if (!s || !e)
+            return false;
+        const [lo, hi] = isAfter(e, s) ? [s, e] : [e, s];
+        const day = startOfDay(d);
+        return isAfter(day, startOfDay(lo)) && isBefore(day, startOfDay(hi));
+    }
+    dayLabel(d) {
+        return formatDate(d, 'MMMM d, yyyy', this.i18n.dateNames);
+    }
+    // --- Interaction ----------------------------------------------------------
+    select(d) {
+        if (this.isDisabled(d))
+            return;
+        const day = startOfDay(d);
+        this.focusedDate.set(day);
+        if (!this.rangeMode()) {
+            this.value.set(day);
+            this.onChange(day);
+        }
+        this.dateSelected.emit(day);
+        this.focusActiveCell();
+    }
+    onHover(d) {
+        if (!this.rangeMode())
+            return;
+        const day = startOfDay(d);
+        this.hoveredDate.set(day);
+        this.dateHovered.emit(day);
+    }
+    clearHover() {
+        if (!this.rangeMode())
+            return;
+        this.hoveredDate.set(null);
+        this.dateHovered.emit(null);
+    }
+    prevMonth() {
+        this.moveFocus(addMonths(this.focusedDate(), -1));
+    }
+    nextMonth() {
+        this.moveFocus(addMonths(this.focusedDate(), 1));
+    }
+    prevYear() {
+        this.moveFocus(addMonths(this.focusedDate(), -12));
+    }
+    nextYear() {
+        this.moveFocus(addMonths(this.focusedDate(), 12));
+    }
+    onGridKeydown(event) {
+        const e = event;
+        const current = this.focusedDate();
+        let next = null;
+        switch (e.key) {
+            case 'ArrowLeft':
+                next = addDays(current, -1);
+                break;
+            case 'ArrowRight':
+                next = addDays(current, 1);
+                break;
+            case 'ArrowUp':
+                next = addDays(current, -7);
+                break;
+            case 'ArrowDown':
+                next = addDays(current, 7);
+                break;
+            case 'Home':
+                next = addDays(current, -this.weekdayOffset(current));
+                break;
+            case 'End':
+                next = addDays(current, 6 - this.weekdayOffset(current));
+                break;
+            case 'PageUp':
+                next = addMonths(current, e.shiftKey ? -12 : -1);
+                break;
+            case 'PageDown':
+                next = addMonths(current, e.shiftKey ? 12 : 1);
+                break;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                this.select(current);
+                return;
+            default:
+                return;
+        }
+        e.preventDefault();
+        if (next)
+            this.moveFocus(next);
+    }
+    weekdayOffset(d) {
+        return (d.getDay() - this.firstDayOfWeek() + 7) % 7;
+    }
+    moveFocus(target) {
+        this.focusedDate.set(startOfDay(target));
+        this.focusActiveCell();
+    }
+    focusActiveCell() {
+        afterNextRender({
+            write: () => {
+                const el = this.host.nativeElement.querySelector('.mk-calendar__day[tabindex="0"]');
+                el?.focus();
+            },
+        }, { injector: this.injector });
+    }
+    // --- Validator ------------------------------------------------------------
+    validatorChange = mkValidatorChange(() => {
+        this.min();
+        this.max();
+        this.disabledDate();
+    });
+    /**
+     * Reports `mkMinDate` / `mkMaxDate` for a date outside `[min]`/`[max]`, and
+     * `mkDateFilter` for one rejected by `[disabledDate]`.
+     */
+    validate(control) {
+        const v = control.value;
+        if (!(v instanceof Date) || Number.isNaN(v.getTime()))
+            return null;
+        const day = startOfDay(v);
+        const min = this.min();
+        if (min && isBefore(day, startOfDay(min)))
+            return { mkMinDate: { min, actual: v } };
+        const max = this.max();
+        if (max && isAfter(day, startOfDay(max)))
+            return { mkMaxDate: { max, actual: v } };
+        return this.disabledDate()?.(v) ? { mkDateFilter: true } : null;
+    }
+    registerOnValidatorChange(fn) {
+        this.validatorChange.register(fn);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkCalendar, isStandalone: true, selector: "mk-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabledDate: { classPropertyName: "disabledDate", publicName: "disabledDate", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, rangeMode: { classPropertyName: "rangeMode", publicName: "rangeMode", isSignal: true, isRequired: false, transformFunction: null }, rangeStart: { classPropertyName: "rangeStart", publicName: "rangeStart", isSignal: true, isRequired: false, transformFunction: null }, rangeEnd: { classPropertyName: "rangeEnd", publicName: "rangeEnd", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", dateSelected: "dateSelected", dateHovered: "dateHovered" }, host: { listeners: { "focusout": "onFocusout($event)" }, properties: { "class.mk-calendar--disabled": "isControlDisabled()", "class.mk-calendar--sm": "size() === 'sm'", "class.mk-calendar--md": "size() === 'md'", "class.mk-calendar--lg": "size() === 'lg'", "class.mk-calendar--full": "fullWidth()", "class.mk-calendar--range": "rangeMode()", "class.mk-calendar--invalid": "isInvalid()", "attr.aria-invalid": "isInvalid() || null" }, classAttribute: "mk-calendar" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MkCalendar),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => MkCalendar),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"mk-calendar__header\">\n  <button\n    type=\"button\"\n    class=\"mk-calendar__nav\"\n    [attr.aria-label]=\"i18n.previousMonth\"\n    (click)=\"prevMonth()\"\n  >\n    <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n      <path\n        d=\"M15 5l-7 7 7 7\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  </button>\n\n  <span class=\"mk-calendar__label\" [id]=\"labelId\" aria-live=\"polite\">{{\n    monthLabel()\n  }}</span>\n\n  <button\n    type=\"button\"\n    class=\"mk-calendar__nav\"\n    [attr.aria-label]=\"i18n.nextMonth\"\n    (click)=\"nextMonth()\"\n  >\n    <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n      <path\n        d=\"M9 5l7 7-7 7\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  </button>\n</div>\n\n<table\n  class=\"mk-calendar__grid\"\n  role=\"grid\"\n  [attr.aria-labelledby]=\"labelId\"\n  (keydown)=\"onGridKeydown($event)\"\n>\n  <thead>\n    <tr>\n      @for (wd of weekdays(); track $index) {\n        <th class=\"mk-calendar__weekday\" scope=\"col\">\n          <abbr [title]=\"wd.full\">{{ wd.short }}</abbr>\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody (mouseleave)=\"clearHover()\">\n    @for (week of weeks(); track $index) {\n      <tr>\n        @for (day of week; track day.getTime()) {\n          <td\n            class=\"mk-calendar__cell\"\n            role=\"gridcell\"\n            [attr.aria-selected]=\"isAriaSelected(day) || null\"\n          >\n            <button\n              type=\"button\"\n              class=\"mk-calendar__day\"\n              [class.mk-calendar__day--outside]=\"isOutside(day)\"\n              [class.mk-calendar__day--today]=\"isToday(day)\"\n              [class.mk-calendar__day--selected]=\"isSelected(day)\"\n              [class.mk-calendar__day--range-start]=\"isRangeStart(day)\"\n              [class.mk-calendar__day--range-end]=\"isRangeEnd(day)\"\n              [class.mk-calendar__day--in-range]=\"isInRange(day)\"\n              [class.mk-calendar__day--disabled]=\"isDisabled(day)\"\n              [attr.tabindex]=\"isFocused(day) ? 0 : -1\"\n              [attr.aria-label]=\"dayLabel(day)\"\n              [attr.aria-current]=\"isToday(day) ? 'date' : null\"\n              [attr.aria-disabled]=\"isDisabled(day) || null\"\n              (click)=\"select(day)\"\n              (mouseenter)=\"onHover(day)\"\n            >\n              <span class=\"mk-calendar__day-num\">{{ day.getDate() }}</span>\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{--_cell-size: 2.5rem;display:inline-block;width:fit-content;max-width:100%;padding:var(--mk-space-4);font-family:var(--mk-font-sans);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-xs)}:host(.mk-calendar--full){display:block;width:100%;min-width:min-content}:host(.mk-calendar--full) .mk-calendar__grid{width:100%}:host(.mk-calendar--full) .mk-calendar__weekday{width:auto;min-width:var(--_cell-size)}:host(.mk-calendar--full) .mk-calendar__day{width:100%;min-width:var(--_cell-size)}:host(.mk-calendar--sm){--_cell-size: 2.1rem;padding:var(--mk-space-3);font-size:var(--mk-font-size-sm)}:host(.mk-calendar--lg){--_cell-size: 2.9rem;font-size:var(--mk-font-size-lg)}.mk-calendar__header{display:flex;align-items:center;gap:var(--mk-space-1);margin-bottom:var(--mk-space-2)}.mk-calendar__label{flex:1 1 auto;text-align:center;font-weight:var(--mk-font-weight-semibold);font-size:var(--mk-font-size-md);white-space:nowrap}.mk-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--mk-control-height-sm);height:var(--mk-control-height-sm);flex:none;color:var(--mk-text-muted);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-calendar__nav:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-calendar__nav:active{background-color:var(--mk-active-overlay)}.mk-calendar__nav:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-calendar__nav svg{display:block}.mk-calendar__grid{border-collapse:separate;border-spacing:0;table-layout:fixed}.mk-calendar__weekday{width:var(--_cell-size);padding:0 0 var(--mk-space-2);font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold);letter-spacing:var(--mk-letter-spacing-wide);text-transform:uppercase;color:var(--mk-text-subtle)}.mk-calendar__weekday abbr{text-decoration:none;cursor:default}.mk-calendar__cell{padding:1px;text-align:center}.mk-calendar__day{display:inline-flex;align-items:center;justify-content:center;position:relative;width:var(--_cell-size);height:var(--_cell-size);font-family:inherit;font-size:var(--mk-font-size-sm);color:var(--mk-text);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-calendar__day:hover:not(.mk-calendar__day--disabled){background-color:var(--mk-hover-overlay)}.mk-calendar__day:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1)}.mk-calendar__day--outside{color:var(--mk-text-disabled)}.mk-calendar__day--today:after{content:\"\";position:absolute;left:50%;bottom:4px;width:4px;height:4px;border-radius:var(--mk-radius-circle);background-color:var(--mk-primary);transform:translate(-50%)}.mk-calendar__day--in-range{background-color:var(--mk-primary-subtle);border-radius:0}.mk-calendar__day--selected,.mk-calendar__day--range-start,.mk-calendar__day--range-end{background-color:var(--mk-primary);color:var(--mk-primary-contrast);font-weight:var(--mk-font-weight-semibold)}.mk-calendar__day--selected:hover,.mk-calendar__day--range-start:hover,.mk-calendar__day--range-end:hover{background-color:var(--mk-primary-hover)}.mk-calendar__day--range-start{border-start-end-radius:0;border-end-end-radius:0}.mk-calendar__day--range-end{border-start-start-radius:0;border-end-start-radius:0}.mk-calendar__day--today.mk-calendar__day--selected:after,.mk-calendar__day--today.mk-calendar__day--range-start:after,.mk-calendar__day--today.mk-calendar__day--range-end:after{background-color:var(--mk-primary-contrast)}.mk-calendar__day--disabled{color:var(--mk-text-disabled);cursor:not-allowed;opacity:.6}.mk-calendar__day-num{line-height:1}@media(prefers-reduced-motion:reduce){.mk-calendar__nav,.mk-calendar__day{transition:none}}.mk-calendar--disabled{opacity:.55;pointer-events:none}:host(.mk-calendar--invalid){border-color:var(--mk-danger)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkCalendar, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-calendar', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MkCalendar),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => MkCalendar),
+                            multi: true,
+                        },
+                    ], host: {
+                        class: 'mk-calendar',
+                        '[class.mk-calendar--disabled]': 'isControlDisabled()',
+                        '(focusout)': 'onFocusout($event)',
+                        '[class.mk-calendar--sm]': "size() === 'sm'",
+                        '[class.mk-calendar--md]': "size() === 'md'",
+                        '[class.mk-calendar--lg]': "size() === 'lg'",
+                        '[class.mk-calendar--full]': 'fullWidth()',
+                        '[class.mk-calendar--range]': 'rangeMode()',
+                        '[class.mk-calendar--invalid]': 'isInvalid()',
+                        '[attr.aria-invalid]': 'isInvalid() || null',
+                    }, template: "<div class=\"mk-calendar__header\">\n  <button\n    type=\"button\"\n    class=\"mk-calendar__nav\"\n    [attr.aria-label]=\"i18n.previousMonth\"\n    (click)=\"prevMonth()\"\n  >\n    <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n      <path\n        d=\"M15 5l-7 7 7 7\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  </button>\n\n  <span class=\"mk-calendar__label\" [id]=\"labelId\" aria-live=\"polite\">{{\n    monthLabel()\n  }}</span>\n\n  <button\n    type=\"button\"\n    class=\"mk-calendar__nav\"\n    [attr.aria-label]=\"i18n.nextMonth\"\n    (click)=\"nextMonth()\"\n  >\n    <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n      <path\n        d=\"M9 5l7 7-7 7\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  </button>\n</div>\n\n<table\n  class=\"mk-calendar__grid\"\n  role=\"grid\"\n  [attr.aria-labelledby]=\"labelId\"\n  (keydown)=\"onGridKeydown($event)\"\n>\n  <thead>\n    <tr>\n      @for (wd of weekdays(); track $index) {\n        <th class=\"mk-calendar__weekday\" scope=\"col\">\n          <abbr [title]=\"wd.full\">{{ wd.short }}</abbr>\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody (mouseleave)=\"clearHover()\">\n    @for (week of weeks(); track $index) {\n      <tr>\n        @for (day of week; track day.getTime()) {\n          <td\n            class=\"mk-calendar__cell\"\n            role=\"gridcell\"\n            [attr.aria-selected]=\"isAriaSelected(day) || null\"\n          >\n            <button\n              type=\"button\"\n              class=\"mk-calendar__day\"\n              [class.mk-calendar__day--outside]=\"isOutside(day)\"\n              [class.mk-calendar__day--today]=\"isToday(day)\"\n              [class.mk-calendar__day--selected]=\"isSelected(day)\"\n              [class.mk-calendar__day--range-start]=\"isRangeStart(day)\"\n              [class.mk-calendar__day--range-end]=\"isRangeEnd(day)\"\n              [class.mk-calendar__day--in-range]=\"isInRange(day)\"\n              [class.mk-calendar__day--disabled]=\"isDisabled(day)\"\n              [attr.tabindex]=\"isFocused(day) ? 0 : -1\"\n              [attr.aria-label]=\"dayLabel(day)\"\n              [attr.aria-current]=\"isToday(day) ? 'date' : null\"\n              [attr.aria-disabled]=\"isDisabled(day) || null\"\n              (click)=\"select(day)\"\n              (mouseenter)=\"onHover(day)\"\n            >\n              <span class=\"mk-calendar__day-num\">{{ day.getDate() }}</span>\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{--_cell-size: 2.5rem;display:inline-block;width:fit-content;max-width:100%;padding:var(--mk-space-4);font-family:var(--mk-font-sans);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-xs)}:host(.mk-calendar--full){display:block;width:100%;min-width:min-content}:host(.mk-calendar--full) .mk-calendar__grid{width:100%}:host(.mk-calendar--full) .mk-calendar__weekday{width:auto;min-width:var(--_cell-size)}:host(.mk-calendar--full) .mk-calendar__day{width:100%;min-width:var(--_cell-size)}:host(.mk-calendar--sm){--_cell-size: 2.1rem;padding:var(--mk-space-3);font-size:var(--mk-font-size-sm)}:host(.mk-calendar--lg){--_cell-size: 2.9rem;font-size:var(--mk-font-size-lg)}.mk-calendar__header{display:flex;align-items:center;gap:var(--mk-space-1);margin-bottom:var(--mk-space-2)}.mk-calendar__label{flex:1 1 auto;text-align:center;font-weight:var(--mk-font-weight-semibold);font-size:var(--mk-font-size-md);white-space:nowrap}.mk-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--mk-control-height-sm);height:var(--mk-control-height-sm);flex:none;color:var(--mk-text-muted);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-calendar__nav:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-calendar__nav:active{background-color:var(--mk-active-overlay)}.mk-calendar__nav:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-calendar__nav svg{display:block}.mk-calendar__grid{border-collapse:separate;border-spacing:0;table-layout:fixed}.mk-calendar__weekday{width:var(--_cell-size);padding:0 0 var(--mk-space-2);font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold);letter-spacing:var(--mk-letter-spacing-wide);text-transform:uppercase;color:var(--mk-text-subtle)}.mk-calendar__weekday abbr{text-decoration:none;cursor:default}.mk-calendar__cell{padding:1px;text-align:center}.mk-calendar__day{display:inline-flex;align-items:center;justify-content:center;position:relative;width:var(--_cell-size);height:var(--_cell-size);font-family:inherit;font-size:var(--mk-font-size-sm);color:var(--mk-text);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-calendar__day:hover:not(.mk-calendar__day--disabled){background-color:var(--mk-hover-overlay)}.mk-calendar__day:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1)}.mk-calendar__day--outside{color:var(--mk-text-disabled)}.mk-calendar__day--today:after{content:\"\";position:absolute;left:50%;bottom:4px;width:4px;height:4px;border-radius:var(--mk-radius-circle);background-color:var(--mk-primary);transform:translate(-50%)}.mk-calendar__day--in-range{background-color:var(--mk-primary-subtle);border-radius:0}.mk-calendar__day--selected,.mk-calendar__day--range-start,.mk-calendar__day--range-end{background-color:var(--mk-primary);color:var(--mk-primary-contrast);font-weight:var(--mk-font-weight-semibold)}.mk-calendar__day--selected:hover,.mk-calendar__day--range-start:hover,.mk-calendar__day--range-end:hover{background-color:var(--mk-primary-hover)}.mk-calendar__day--range-start{border-start-end-radius:0;border-end-end-radius:0}.mk-calendar__day--range-end{border-start-start-radius:0;border-end-start-radius:0}.mk-calendar__day--today.mk-calendar__day--selected:after,.mk-calendar__day--today.mk-calendar__day--range-start:after,.mk-calendar__day--today.mk-calendar__day--range-end:after{background-color:var(--mk-primary-contrast)}.mk-calendar__day--disabled{color:var(--mk-text-disabled);cursor:not-allowed;opacity:.6}.mk-calendar__day-num{line-height:1}@media(prefers-reduced-motion:reduce){.mk-calendar__nav,.mk-calendar__day{transition:none}}.mk-calendar--disabled{opacity:.55;pointer-events:none}:host(.mk-calendar--invalid){border-color:var(--mk-danger)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabledDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDate", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], rangeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeMode", required: false }] }], rangeStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeStart", required: false }] }], rangeEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeEnd", required: false }] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }], dateHovered: [{ type: i0.Output, args: ["dateHovered"] }] } });
+
+/**
+ * DatePicker — a text field paired with a calendar popover. Type a date (parsed
+ * on blur/Enter) or pick one from the `mk-calendar`. Implements
+ * `ControlValueAccessor` and a two-way `value` model, so it works with
+ * `[(ngModel)]`, reactive forms and `[(value)]`.
+ *
+ * The calendar opens below the field, closes on Escape / outside click / after
+ * a selection, and wires `aria-expanded` / `aria-haspopup` / `aria-invalid`.
+ * When nested in an `mk-form-field` it adopts the field's id and aria wiring.
+ *
+ * ```html
+ * <mk-date-picker [(value)]="date" [min]="minDate" clearable />
+ * ```
+ */
+class MkDatePicker {
+    i18n = inject(MK_I18N);
+    field = inject(MkFormField, { optional: true });
+    host = inject(ElementRef);
+    injector = inject(Injector);
+    inputRef = viewChild('textInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    /** The calendar panel — lives in the top layer once opened. */
+    panelRef = viewChild('panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
+    /** Two-way selected date. */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Earliest selectable date (inclusive). */
+    min = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Latest selectable date (inclusive). */
+    max = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Predicate marking individual days as disabled (threaded to the calendar). */
+    disabledDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledDate" }] : /* istanbul ignore next */ []));
+    /** Placeholder shown when empty. */
+    placeholder = input(this.i18n.selectDate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Pattern used to render the selected date in the field. */
+    displayFormat = input('MMM d, yyyy', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayFormat" }] : /* istanbul ignore next */ []));
+    /** Disable the control. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Show a clear button when a date is selected. */
+    clearable = input(false, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Force invalid styling + `aria-invalid`. */
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** First column of the calendar week (0 = Sunday). */
+    firstDayOfWeek = input(0, { ...(ngDevMode ? { debugName: "firstDayOfWeek" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Control size. Ignored when nested in an `mk-form-field`. */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Editable text mirror of the field. */
+    inputText = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputText" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    inputId = this.field?.controlId ?? mkUniqueId('mk-date-picker');
+    panelId = mkUniqueId('mk-date-picker-panel');
+    effectiveSize = computed(() => this.field ? this.field.size() : this.size(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
+    isRequired = computed(() => this.field?.isRequired() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => this.field?.describedBy() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    showClear = computed(() => this.clearable() && !!this.value() && !this.isDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Keep the text field in sync with the model (typing does not touch value).
+        effect(() => {
+            const v = this.value();
+            this.inputText.set(v ? formatDate(v, this.displayFormat(), this.i18n.dateNames) : '');
+        });
+    }
+    toggle() {
+        if (this.isDisabled())
+            return;
+        this.open() ? this.close() : this.openPanel();
+    }
+    openPanel() {
+        if (this.isDisabled() || this.open())
+            return;
+        this.open.set(true);
+        afterNextRender({
+            write: () => {
+                const el = this.panelRef()?.nativeElement.querySelector('.mk-calendar__day[tabindex="0"]');
+                el?.focus();
+            },
+        }, { injector: this.injector });
+    }
+    close() {
+        if (this.open())
+            this.open.set(false);
+    }
+    onCalendarPick(date) {
+        this.setValue(date);
+        this.close();
+        this.inputRef()?.nativeElement.focus();
+    }
+    onInput(event) {
+        this.inputText.set(event.target.value);
+    }
+    onInputKeydown(event) {
+        const e = event;
+        if (this.isDisabled())
+            return;
+        switch (e.key) {
+            case 'Enter':
+                e.preventDefault();
+                this.commitInput();
+                break;
+            case 'ArrowDown':
+                e.preventDefault();
+                this.openPanel();
+                break;
+            case 'Escape':
+                if (this.open()) {
+                    e.preventDefault();
+                    this.close();
+                }
+                break;
+        }
+    }
+    clear() {
+        this.setValue(null);
+        this.inputRef()?.nativeElement.focus();
+    }
+    commitInput() {
+        const text = this.inputText().trim();
+        if (!text) {
+            this.setValue(null);
+            return;
+        }
+        const parsed = this.parse(text);
+        if (parsed) {
+            this.setValue(clampDate(parsed, this.min(), this.max()));
+        }
+        else {
+            // Invalid entry — revert to the current model's display.
+            const v = this.value();
+            this.inputText.set(v ? formatDate(v, this.displayFormat(), this.i18n.dateNames) : '');
+        }
+    }
+    parse(text) {
+        const iso = parseISODate(text);
+        if (iso)
+            return iso;
+        const ms = Date.parse(text);
+        return Number.isNaN(ms) ? null : startOfDay(new Date(ms));
+    }
+    setValue(date) {
+        this.value.set(date);
+        this.onChange(date);
+    }
+    onFocusOut(event) {
+        const related = event.relatedTarget;
+        // Ignore focus moving into the field or the (top-layer) calendar panel.
+        if (related && this.host.nativeElement.contains(related))
+            return;
+        if (related && this.panelRef()?.nativeElement.contains(related))
+            return;
+        this.commitInput();
+        this.close();
+        this.onTouched();
+    }
+    /**
+     * Escape pressed inside the (teleported) calendar panel — close and return
+     * focus to the input. `preventDefault` + `stopPropagation` keep any outer
+     * Escape handling (e.g. a containing dialog) from also firing.
+     */
+    onPanelEscape(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.close();
+        this.inputRef()?.nativeElement.focus();
+    }
+    /**
+     * Focus left the teleported panel. The host `(focusout)` never sees this —
+     * the panel lives under `document.body` — so Tab-out of the calendar is
+     * handled here: close unless focus moved back into the field or the panel.
+     */
+    onPanelFocusout(event) {
+        const related = event.relatedTarget;
+        // Focus fell to a non-focusable spot (body) — keep open; an outside
+        // pointerdown is dismissed by the anchored panel itself.
+        if (!related)
+            return;
+        if (this.host.nativeElement.contains(related))
+            return;
+        if (this.panelRef()?.nativeElement.contains(related))
+            return;
+        this.commitInput();
+        this.close();
+        this.onTouched();
+    }
+    // --- ControlValueAccessor -------------------------------------------------
+    writeValue(value) {
+        this.value.set(value ?? null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    // --- Validator ------------------------------------------------------------
+    validatorChange = mkValidatorChange(() => {
+        this.min();
+        this.max();
+    });
+    /**
+     * Reports `mkMinDate` / `mkMaxDate` against the `[min]` and `[max]` inputs.
+     */
+    validate(control) {
+        const v = control.value;
+        if (!(v instanceof Date) || Number.isNaN(v.getTime()))
+            return null;
+        const day = startOfDay(v);
+        const min = this.min();
+        if (min && isBefore(day, startOfDay(min)))
+            return { mkMinDate: { min, actual: v } };
+        const max = this.max();
+        if (max && isAfter(day, startOfDay(max)))
+            return { mkMaxDate: { max, actual: v } };
+        return null;
+    }
+    registerOnValidatorChange(fn) {
+        this.validatorChange.register(fn);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkDatePicker, isStandalone: true, selector: "mk-date-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabledDate: { classPropertyName: "disabledDate", publicName: "disabledDate", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "focusout": "onFocusOut($event)" }, properties: { "class.mk-date-picker--sm": "effectiveSize() === 'sm'", "class.mk-date-picker--md": "effectiveSize() === 'md'", "class.mk-date-picker--lg": "effectiveSize() === 'lg'", "class.mk-date-picker--open": "open()", "class.mk-date-picker--invalid": "isInvalid()", "class.mk-date-picker--disabled": "isDisabled()" }, classAttribute: "mk-date-picker" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MkDatePicker),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => MkDatePicker),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["textInput"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #field class=\"mk-date-picker__field\">\n  <input\n    #textInput\n    type=\"text\"\n    class=\"mk-date-picker__input\"\n    [id]=\"inputId\"\n    [value]=\"inputText()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    autocomplete=\"off\"\n    role=\"combobox\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onInputKeydown($event)\"\n  />\n\n  @if (showClear()) {\n    <button\n      type=\"button\"\n      class=\"mk-date-picker__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      (click)=\"clear()\"\n    >\n      <span class=\"mk-date-picker__clear-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n\n  <button\n    type=\"button\"\n    class=\"mk-date-picker__toggle\"\n    [attr.aria-label]=\"i18n.openCalendar\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\"\n  >\n    <svg\n      class=\"mk-date-picker__icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"18\"\n      height=\"18\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      aria-hidden=\"true\"\n    >\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"17\" rx=\"2\" />\n      <path d=\"M3 9h18M8 2v4M16 2v4\" />\n    </svg>\n  </button>\n</div>\n\n@if (open()) {\n  <div\n    #panel\n    class=\"mk-date-picker__panel\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    (dismiss)=\"close()\"\n    [id]=\"panelId\"\n    role=\"dialog\"\n    [attr.aria-label]=\"i18n.chooseDate\"\n    (keydown.escape)=\"onPanelEscape($event)\"\n    (focusout)=\"onPanelFocusout($event)\"\n  >\n    <mk-calendar\n      [value]=\"value()\"\n      (valueChange)=\"onCalendarPick($event)\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      [size]=\"effectiveSize()\"\n      [disabledDate]=\"disabledDate()\"\n    />\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-date-picker__field{display:flex;align-items:center;width:100%;height:var(--mk-control-height-md);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-date-picker--sm) .mk-date-picker__field{height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-date-picker--lg) .mk-date-picker__field{height:var(--mk-control-height-lg)}.mk-date-picker__field:hover{border-color:var(--mk-border-strong)}.mk-date-picker__field:focus-within{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-date-picker--invalid) .mk-date-picker__field{border-color:var(--mk-danger)}:host(.mk-date-picker--invalid) .mk-date-picker__field:focus-within{outline-color:var(--mk-danger)}:host(.mk-date-picker--disabled) .mk-date-picker__field{background-color:var(--mk-surface-2);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-date-picker__input{flex:1 1 auto;min-width:0;height:100%;padding:0 var(--mk-space-3);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background:transparent;border:0;outline:none}:host(.mk-date-picker--sm) .mk-date-picker__input{padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm)}:host(.mk-date-picker--lg) .mk-date-picker__input{padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-date-picker__input::placeholder{color:var(--mk-text-subtle);opacity:1}.mk-date-picker__input:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-date-picker__toggle,.mk-date-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex:none;height:100%;padding:0 var(--mk-space-2);color:var(--mk-text-muted);background:transparent;border:0;cursor:pointer;transition:color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-date-picker__toggle:hover:not(:disabled),.mk-date-picker__clear:hover{color:var(--mk-text)}.mk-date-picker__toggle:focus-visible,.mk-date-picker__clear:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1);border-radius:var(--mk-radius-sm)}.mk-date-picker__toggle:disabled{cursor:not-allowed}.mk-date-picker__clear-icon{position:relative;width:.85rem;height:.85rem}.mk-date-picker__clear-icon:before,.mk-date-picker__clear-icon:after{content:\"\";position:absolute;top:50%;left:0;width:100%;height:2px;background-color:currentColor}.mk-date-picker__clear-icon:before{transform:rotate(45deg)}.mk-date-picker__clear-icon:after{transform:rotate(-45deg)}.mk-date-picker__panel{box-shadow:var(--mk-shadow-lg);border-radius:var(--mk-radius-lg)}@media(prefers-reduced-motion:reduce){.mk-date-picker__field,.mk-date-picker__toggle,.mk-date-picker__clear{transition:none}}@media(pointer:coarse){.mk-date-picker__input{font-size:max(var(--mk-font-size-md),16px)}:host(.mk-date-picker--sm) .mk-date-picker__input{font-size:max(var(--mk-font-size-sm),16px)}}\n"], dependencies: [{ kind: "component", type: MkCalendar, selector: "mk-calendar", inputs: ["value", "min", "max", "firstDayOfWeek", "disabled", "invalid", "disabledDate", "size", "fullWidth", "rangeMode", "rangeStart", "rangeEnd"], outputs: ["valueChange", "dateSelected", "dateHovered"] }, { kind: "directive", type: MkAnchoredPanel, selector: "[mkAnchoredPanel]", inputs: ["mkAnchoredPanelFor", "anchorRect", "placement", "gap", "matchWidth", "flip", "clamp"], outputs: ["dismiss"], exportAs: ["mkAnchoredPanel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDatePicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MkCalendar, MkAnchoredPanel], host: {
+                        class: 'mk-date-picker',
+                        '[class.mk-date-picker--sm]': "effectiveSize() === 'sm'",
+                        '[class.mk-date-picker--md]': "effectiveSize() === 'md'",
+                        '[class.mk-date-picker--lg]': "effectiveSize() === 'lg'",
+                        '[class.mk-date-picker--open]': 'open()',
+                        '[class.mk-date-picker--invalid]': 'isInvalid()',
+                        '[class.mk-date-picker--disabled]': 'isDisabled()',
+                        '(focusout)': 'onFocusOut($event)',
+                    }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MkDatePicker),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => MkDatePicker),
+                            multi: true,
+                        },
+                    ], template: "<div #field class=\"mk-date-picker__field\">\n  <input\n    #textInput\n    type=\"text\"\n    class=\"mk-date-picker__input\"\n    [id]=\"inputId\"\n    [value]=\"inputText()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    autocomplete=\"off\"\n    role=\"combobox\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onInputKeydown($event)\"\n  />\n\n  @if (showClear()) {\n    <button\n      type=\"button\"\n      class=\"mk-date-picker__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      (click)=\"clear()\"\n    >\n      <span class=\"mk-date-picker__clear-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n\n  <button\n    type=\"button\"\n    class=\"mk-date-picker__toggle\"\n    [attr.aria-label]=\"i18n.openCalendar\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\"\n  >\n    <svg\n      class=\"mk-date-picker__icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"18\"\n      height=\"18\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      aria-hidden=\"true\"\n    >\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"17\" rx=\"2\" />\n      <path d=\"M3 9h18M8 2v4M16 2v4\" />\n    </svg>\n  </button>\n</div>\n\n@if (open()) {\n  <div\n    #panel\n    class=\"mk-date-picker__panel\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    (dismiss)=\"close()\"\n    [id]=\"panelId\"\n    role=\"dialog\"\n    [attr.aria-label]=\"i18n.chooseDate\"\n    (keydown.escape)=\"onPanelEscape($event)\"\n    (focusout)=\"onPanelFocusout($event)\"\n  >\n    <mk-calendar\n      [value]=\"value()\"\n      (valueChange)=\"onCalendarPick($event)\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      [size]=\"effectiveSize()\"\n      [disabledDate]=\"disabledDate()\"\n    />\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-date-picker__field{display:flex;align-items:center;width:100%;height:var(--mk-control-height-md);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-date-picker--sm) .mk-date-picker__field{height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-date-picker--lg) .mk-date-picker__field{height:var(--mk-control-height-lg)}.mk-date-picker__field:hover{border-color:var(--mk-border-strong)}.mk-date-picker__field:focus-within{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-date-picker--invalid) .mk-date-picker__field{border-color:var(--mk-danger)}:host(.mk-date-picker--invalid) .mk-date-picker__field:focus-within{outline-color:var(--mk-danger)}:host(.mk-date-picker--disabled) .mk-date-picker__field{background-color:var(--mk-surface-2);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-date-picker__input{flex:1 1 auto;min-width:0;height:100%;padding:0 var(--mk-space-3);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background:transparent;border:0;outline:none}:host(.mk-date-picker--sm) .mk-date-picker__input{padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm)}:host(.mk-date-picker--lg) .mk-date-picker__input{padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-date-picker__input::placeholder{color:var(--mk-text-subtle);opacity:1}.mk-date-picker__input:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-date-picker__toggle,.mk-date-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex:none;height:100%;padding:0 var(--mk-space-2);color:var(--mk-text-muted);background:transparent;border:0;cursor:pointer;transition:color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-date-picker__toggle:hover:not(:disabled),.mk-date-picker__clear:hover{color:var(--mk-text)}.mk-date-picker__toggle:focus-visible,.mk-date-picker__clear:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1);border-radius:var(--mk-radius-sm)}.mk-date-picker__toggle:disabled{cursor:not-allowed}.mk-date-picker__clear-icon{position:relative;width:.85rem;height:.85rem}.mk-date-picker__clear-icon:before,.mk-date-picker__clear-icon:after{content:\"\";position:absolute;top:50%;left:0;width:100%;height:2px;background-color:currentColor}.mk-date-picker__clear-icon:before{transform:rotate(45deg)}.mk-date-picker__clear-icon:after{transform:rotate(-45deg)}.mk-date-picker__panel{box-shadow:var(--mk-shadow-lg);border-radius:var(--mk-radius-lg)}@media(prefers-reduced-motion:reduce){.mk-date-picker__field,.mk-date-picker__toggle,.mk-date-picker__clear{transition:none}}@media(pointer:coarse){.mk-date-picker__input{font-size:max(var(--mk-font-size-md),16px)}:host(.mk-date-picker--sm) .mk-date-picker__input{font-size:max(var(--mk-font-size-sm),16px)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['textInput', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabledDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDate", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+function pad2(n) {
+    return n < 10 ? `0${n}` : `${n}`;
+}
+/**
+ * TimePicker — a 24-hour-canonical time field with an editable input plus a
+ * scrollable list of times generated from `step`. The time itself is always
+ * 24h canonical regardless of the `hour12` display. Implements
+ * `ControlValueAccessor` and a two-way `value` model.
+ *
+ * The form value is either a `HH:mm` string (`"14:30"`, default) or a `Date`
+ * carrying the time in its **local** hours/minutes (`valueFormat="date"`, for
+ * hosts whose model is a datetime — e.g. migrating off Material's
+ * `mat-timepicker`); both modes read back either shape and `null` when empty.
+ * Only the *emitted* value depends on `valueFormat` — internally the time is
+ * always normalised to `HH:mm`, which is also what `min` / `max` compare.
+ *
+ * In `date` mode seconds and milliseconds are zeroed, and the **date part** is
+ * taken from the current model value when that is already a `Date` (so editing
+ * the time repeatedly never drifts the day); otherwise today's local date is
+ * used. Assign a `Date` first if the day matters.
+ *
+ * Type a time (`14:30`, `2:30 pm`) or pick from the ARIA listbox
+ * (Up/Down/Home/End/Enter/Esc; the active option scrolls into view). When
+ * nested in an `mk-form-field` it adopts the field's id and aria wiring.
+ *
+ * ```html
+ * <mk-time-picker [(value)]="time" [step]="15" hour12 clearable />
+ * <mk-time-picker valueFormat="date" [(value)]="pickupAt" [step]="15" />
+ * ```
+ */
+class MkTimePicker {
+    i18n = inject(MK_I18N);
+    field = inject(MkFormField, { optional: true });
+    host = inject(ElementRef);
+    injector = inject(Injector);
+    inputRef = viewChild('textInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    /** The listbox panel — lives in the top layer once opened. */
+    listRef = viewChild('list', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listRef" }] : /* istanbul ignore next */ []));
+    /**
+     * Two-way selected time: a canonical `HH:mm` (24h) string, a `Date` when
+     * `valueFormat="date"`, or `null`. Either shape may be assigned in either
+     * mode; it is normalised to the configured format.
+     */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Shape of the form value: a `HH:mm` string or a `Date`. */
+    valueFormat = input('string', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueFormat" }] : /* istanbul ignore next */ []));
+    /** Earliest selectable time `HH:mm` (inclusive). */
+    min = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Latest selectable time `HH:mm` (inclusive). */
+    max = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Interval between generated options, in minutes. */
+    step = input(30, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Display 12-hour time with AM/PM (the model stays 24h). */
+    hour12 = input(false, { ...(ngDevMode ? { debugName: "hour12" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Disable the control. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Placeholder shown when empty. */
+    placeholder = input(this.i18n.selectTime, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Show a clear button when a time is selected. */
+    clearable = input(false, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Force invalid styling + `aria-invalid`. */
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Control size. Ignored when nested in an `mk-form-field`. */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    inputText = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputText" }] : /* istanbul ignore next */ []));
+    /** The canonical `HH:mm` time behind whatever shape `value` carries. */
+    time = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "time" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    /** The last value this component itself wrote into the `value` model. */
+    lastDerived = null;
+    /** The day `date`-mode values land on — see {@link toDate}. */
+    datePart = null;
+    inputId = this.field?.controlId ?? mkUniqueId('mk-time-picker');
+    listId = mkUniqueId('mk-time-picker-list');
+    effectiveSize = computed(() => this.field ? this.field.size() : this.size(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
+    isRequired = computed(() => this.field?.isRequired() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => this.field?.describedBy() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    showClear = computed(() => this.clearable() && !!this.time() && !this.isDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
+    /** Generated, min/max-filtered list of selectable times. */
+    options = computed(() => {
+        const step = Math.max(1, Math.floor(this.step()));
+        const min = this.min();
+        const max = this.max();
+        const out = [];
+        for (let mins = 0; mins < 24 * 60; mins += step) {
+            const value = `${pad2(Math.floor(mins / 60))}:${pad2(mins % 60)}`;
+            if (min && value < min)
+                continue;
+            if (max && value > max)
+                continue;
+            out.push({ value, label: this.display(value) });
+        }
+        return out;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    selectedIndex = computed(() => this.options().findIndex((o) => o.value === this.time()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const v = this.time();
+            // hour12 is read so the label follows the display mode.
+            this.inputText.set(v ? this.display(v) : '');
+        });
+        // Parse values assigned from outside ([(value)] writes we didn't derive),
+        // and re-shape the model when `valueFormat` changes.
+        effect(() => {
+            const v = this.value();
+            const external = v !== this.lastDerived;
+            this.valueFormat();
+            untracked(() => {
+                if (external)
+                    this.applyExternal(v);
+                this.deriveValue(false);
+            });
+        });
+    }
+    optionId(index) {
+        return `${this.listId}-opt-${index}`;
+    }
+    display(hhmm) {
+        const [h, m] = hhmm.split(':').map(Number);
+        if (this.hour12()) {
+            const ap = h < 12 ? 'AM' : 'PM';
+            const hh = h % 12 || 12;
+            return `${hh}:${pad2(m)} ${ap}`;
+        }
+        return `${pad2(h)}:${pad2(m)}`;
+    }
+    parse(text) {
+        const m = /^\s*(\d{1,2})(?::(\d{2}))?\s*(am|pm)?\s*$/i.exec(text);
+        if (!m)
+            return null;
+        let h = Number(m[1]);
+        const min = m[2] ? Number(m[2]) : 0;
+        const ap = m[3]?.toLowerCase();
+        if (ap) {
+            if (h < 1 || h > 12)
+                return null;
+            if (ap === 'pm' && h !== 12)
+                h += 12;
+            if (ap === 'am' && h === 12)
+                h = 0;
+        }
+        if (h > 23 || min > 59)
+            return null;
+        return `${pad2(h)}:${pad2(min)}`;
+    }
+    toggle() {
+        if (this.isDisabled())
+            return;
+        this.open() ? this.close() : this.openList();
+    }
+    openList() {
+        if (this.isDisabled() || this.open())
+            return;
+        this.open.set(true);
+        const sel = this.selectedIndex();
+        this.activeIndex.set(sel >= 0 ? sel : 0);
+        this.scrollActiveIntoView();
+    }
+    close() {
+        if (this.open()) {
+            this.open.set(false);
+            this.activeIndex.set(-1);
+        }
+    }
+    selectOption(index) {
+        const opt = this.options()[index];
+        if (!opt)
+            return;
+        this.setValue(opt.value);
+        this.close();
+        this.inputRef()?.nativeElement.focus();
+    }
+    clear() {
+        this.setValue(null);
+        this.inputRef()?.nativeElement.focus();
+    }
+    onInput(event) {
+        this.inputText.set(event.target.value);
+    }
+    onInputKeydown(event) {
+        const e = event;
+        if (this.isDisabled())
+            return;
+        if (!this.open()) {
+            if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                e.preventDefault();
+                this.openList();
+            }
+            else if (e.key === 'Enter') {
+                e.preventDefault();
+                this.commitInput();
+            }
+            return;
+        }
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                this.moveActive(1);
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                this.moveActive(-1);
+                break;
+            case 'Home':
+                e.preventDefault();
+                this.activeIndex.set(0);
+                this.scrollActiveIntoView();
+                break;
+            case 'End':
+                e.preventDefault();
+                this.activeIndex.set(this.options().length - 1);
+                this.scrollActiveIntoView();
+                break;
+            case 'Enter':
+                e.preventDefault();
+                if (this.activeIndex() >= 0)
+                    this.selectOption(this.activeIndex());
+                else
+                    this.commitInput();
+                break;
+            case 'Escape':
+                e.preventDefault();
+                this.close();
+                break;
+        }
+    }
+    moveActive(delta) {
+        const len = this.options().length;
+        if (!len)
+            return;
+        const next = (this.activeIndex() + delta + len) % len;
+        this.activeIndex.set(next);
+        this.scrollActiveIntoView();
+    }
+    commitInput() {
+        const text = this.inputText().trim();
+        if (!text) {
+            this.setValue(null);
+            this.close();
+            return;
+        }
+        const parsed = this.parse(text);
+        if (parsed && this.withinBounds(parsed)) {
+            this.setValue(parsed);
+        }
+        else {
+            const v = this.time();
+            this.inputText.set(v ? this.display(v) : '');
+        }
+        this.close();
+    }
+    withinBounds(value) {
+        const min = this.min();
+        const max = this.max();
+        if (min && value < min)
+            return false;
+        if (max && value > max)
+            return false;
+        return true;
+    }
+    // --- Value plumbing -------------------------------------------------------
+    setValue(value) {
+        this.time.set(value);
+        this.deriveValue(true);
+    }
+    /** Compute the outward value and push it to the model (+ form when `emit`). */
+    deriveValue(emit) {
+        const hhmm = this.time();
+        const next = hhmm === null ? null : this.valueFormat() === 'date' ? this.toDate(hhmm) : hhmm;
+        // Keep the previous instance when it means the same time, so repeated
+        // edits don't churn `Date` identities (nor the date part they carry).
+        if (!this.sameValue(next, this.lastDerived) || this.value() !== this.lastDerived) {
+            this.lastDerived = next;
+            this.value.set(next);
+        }
+        if (emit)
+            this.onChange(this.lastDerived);
+    }
+    sameValue(a, b) {
+        if (a === b)
+            return true;
+        if (a instanceof Date && b instanceof Date)
+            return a.getTime() === b.getTime();
+        return false;
+    }
+    /**
+     * Interpret an externally-assigned value (`writeValue` or `[value]`): it
+     * seeds the canonical time and, when it is a `Date`, the day that `date`-mode
+     * values land on.
+     */
+    applyExternal(v) {
+        this.datePart = v instanceof Date && !Number.isNaN(v.getTime()) ? new Date(v) : null;
+        this.time.set(this.toHhmm(v));
+    }
+    /** Normalise any accepted shape to canonical `HH:mm`, or `null`. */
+    toHhmm(v) {
+        if (v instanceof Date) {
+            return Number.isNaN(v.getTime()) ? null : `${pad2(v.getHours())}:${pad2(v.getMinutes())}`;
+        }
+        if (typeof v !== 'string' || !v.trim())
+            return null;
+        return this.parse(v);
+    }
+    /**
+     * Put `hh:mm` on a `Date`. The date part comes from the current value when
+     * that is already a `Date` (so repeated edits never drift the day),
+     * otherwise from today — always via the local accessors, never the UTC ones.
+     */
+    toDate(hhmm) {
+        const [h, m] = hhmm.split(':').map(Number);
+        const base = this.datePart ? new Date(this.datePart) : new Date();
+        base.setHours(h, m, 0, 0);
+        this.datePart = base;
+        return base;
+    }
+    scrollActiveIntoView() {
+        afterNextRender({
+            write: () => {
+                const el = this.listRef()?.nativeElement.querySelector('.mk-time-picker__option--active');
+                el?.scrollIntoView({ block: 'nearest' });
+            },
+        }, { injector: this.injector });
+    }
+    onFocusOut(event) {
+        const related = event.relatedTarget;
+        if (related && this.host.nativeElement.contains(related))
+            return;
+        if (related && this.listRef()?.nativeElement.contains(related))
+            return;
+        this.commitInput();
+        this.onTouched();
+    }
+    // --- ControlValueAccessor -------------------------------------------------
+    writeValue(value) {
+        this.applyExternal(value);
+        this.deriveValue(false);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    // --- Validator ------------------------------------------------------------
+    validatorChange = mkValidatorChange(() => {
+        this.min();
+        this.max();
+    });
+    /**
+     * Reports `mkMinTime` / `mkMaxTime` against the `[min]` and `[max]` inputs.
+     * The control value is normalised to `HH:mm` first (so a `Date` model
+     * validates too); both sides are then zero-padded `HH:mm`, so a
+     * lexicographic compare is a chronological one.
+     */
+    validate(control) {
+        const v = this.toHhmm(control.value);
+        if (!v)
+            return null;
+        const min = this.min();
+        if (min && v < min)
+            return { mkMinTime: { min, actual: v } };
+        const max = this.max();
+        if (max && v > max)
+            return { mkMaxTime: { max, actual: v } };
+        return null;
+    }
+    registerOnValidatorChange(fn) {
+        this.validatorChange.register(fn);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTimePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkTimePicker, isStandalone: true, selector: "mk-time-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, hour12: { classPropertyName: "hour12", publicName: "hour12", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "focusout": "onFocusOut($event)" }, properties: { "class.mk-time-picker--sm": "effectiveSize() === 'sm'", "class.mk-time-picker--md": "effectiveSize() === 'md'", "class.mk-time-picker--lg": "effectiveSize() === 'lg'", "class.mk-time-picker--open": "open()", "class.mk-time-picker--invalid": "isInvalid()", "class.mk-time-picker--disabled": "isDisabled()" }, classAttribute: "mk-time-picker" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MkTimePicker),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => MkTimePicker),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["textInput"], descendants: true, isSignal: true }, { propertyName: "listRef", first: true, predicate: ["list"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #field class=\"mk-time-picker__field\">\n  <input\n    #textInput\n    type=\"text\"\n    class=\"mk-time-picker__input\"\n    [id]=\"inputId\"\n    [value]=\"inputText()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    autocomplete=\"off\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    aria-autocomplete=\"none\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"listId\"\n    [attr.aria-activedescendant]=\"\n      open() && activeIndex() >= 0 ? optionId(activeIndex()) : null\n    \"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onInputKeydown($event)\"\n  />\n\n  @if (showClear()) {\n    <button\n      type=\"button\"\n      class=\"mk-time-picker__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      (click)=\"clear()\"\n    >\n      <span class=\"mk-time-picker__clear-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n\n  <button\n    type=\"button\"\n    class=\"mk-time-picker__toggle\"\n    [attr.aria-label]=\"i18n.openTimeList\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"listId\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\"\n  >\n    <svg\n      class=\"mk-time-picker__icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"18\"\n      height=\"18\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      aria-hidden=\"true\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"9\" />\n      <path d=\"M12 7v5l3 2\" />\n    </svg>\n  </button>\n</div>\n\n@if (open()) {\n  <ul\n    #list\n    class=\"mk-time-picker__list\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    [matchWidth]=\"true\"\n    (dismiss)=\"close()\"\n    [id]=\"listId\"\n    role=\"listbox\"\n  >\n    @for (opt of options(); track opt.value; let i = $index) {\n      <li\n        class=\"mk-time-picker__option\"\n        [id]=\"optionId(i)\"\n        role=\"option\"\n        [attr.aria-selected]=\"i === selectedIndex()\"\n        [class.mk-time-picker__option--active]=\"i === activeIndex()\"\n        [class.mk-time-picker__option--selected]=\"i === selectedIndex()\"\n        (mousedown)=\"$event.preventDefault()\"\n        (mousemove)=\"activeIndex.set(i)\"\n        (click)=\"selectOption(i)\"\n      >\n        {{ opt.label }}\n      </li>\n    } @empty {\n      <li class=\"mk-time-picker__empty\" role=\"presentation\">\n        {{ i18n.noOptions }}\n      </li>\n    }\n  </ul>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-time-picker__field{display:flex;align-items:center;width:100%;height:var(--mk-control-height-md);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-time-picker--sm) .mk-time-picker__field{height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-time-picker--lg) .mk-time-picker__field{height:var(--mk-control-height-lg)}.mk-time-picker__field:hover{border-color:var(--mk-border-strong)}.mk-time-picker__field:focus-within{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-time-picker--invalid) .mk-time-picker__field{border-color:var(--mk-danger)}:host(.mk-time-picker--invalid) .mk-time-picker__field:focus-within{outline-color:var(--mk-danger)}:host(.mk-time-picker--disabled) .mk-time-picker__field{background-color:var(--mk-surface-2);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-time-picker__input{flex:1 1 auto;min-width:0;height:100%;padding:0 var(--mk-space-3);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background:transparent;border:0;outline:none}:host(.mk-time-picker--sm) .mk-time-picker__input{padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm)}:host(.mk-time-picker--lg) .mk-time-picker__input{padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-time-picker__input::placeholder{color:var(--mk-text-subtle);opacity:1}.mk-time-picker__input:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-time-picker__toggle,.mk-time-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex:none;height:100%;padding:0 var(--mk-space-2);color:var(--mk-text-muted);background:transparent;border:0;cursor:pointer;transition:color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-time-picker__toggle:hover:not(:disabled),.mk-time-picker__clear:hover{color:var(--mk-text)}.mk-time-picker__toggle:focus-visible,.mk-time-picker__clear:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1);border-radius:var(--mk-radius-sm)}.mk-time-picker__toggle:disabled{cursor:not-allowed}.mk-time-picker__clear-icon{position:relative;width:.85rem;height:.85rem}.mk-time-picker__clear-icon:before,.mk-time-picker__clear-icon:after{content:\"\";position:absolute;top:50%;left:0;width:100%;height:2px;background-color:currentColor}.mk-time-picker__clear-icon:before{transform:rotate(45deg)}.mk-time-picker__clear-icon:after{transform:rotate(-45deg)}.mk-time-picker__list{padding:var(--mk-space-1);list-style:none;max-height:15rem;overflow-y:auto;background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg)}.mk-time-picker__option{padding:var(--mk-space-2) var(--mk-space-3);font-size:var(--mk-font-size-md);color:var(--mk-text);border-radius:var(--mk-radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.mk-time-picker__option--active{background-color:var(--mk-selected-bg)}.mk-time-picker__option--selected{color:var(--mk-selected-text);font-weight:var(--mk-font-weight-medium)}.mk-time-picker__empty{padding:var(--mk-space-2) var(--mk-space-3);color:var(--mk-text-subtle);font-size:var(--mk-font-size-sm)}@media(prefers-reduced-motion:reduce){.mk-time-picker__field,.mk-time-picker__toggle,.mk-time-picker__clear{transition:none}}@media(pointer:coarse){.mk-time-picker__input{font-size:max(var(--mk-font-size-md),16px)}:host(.mk-time-picker--sm) .mk-time-picker__input{font-size:max(var(--mk-font-size-sm),16px)}}\n"], dependencies: [{ kind: "directive", type: MkAnchoredPanel, selector: "[mkAnchoredPanel]", inputs: ["mkAnchoredPanelFor", "anchorRect", "placement", "gap", "matchWidth", "flip", "clamp"], outputs: ["dismiss"], exportAs: ["mkAnchoredPanel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTimePicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-time-picker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MkAnchoredPanel], host: {
+                        class: 'mk-time-picker',
+                        '[class.mk-time-picker--sm]': "effectiveSize() === 'sm'",
+                        '[class.mk-time-picker--md]': "effectiveSize() === 'md'",
+                        '[class.mk-time-picker--lg]': "effectiveSize() === 'lg'",
+                        '[class.mk-time-picker--open]': 'open()',
+                        '[class.mk-time-picker--invalid]': 'isInvalid()',
+                        '[class.mk-time-picker--disabled]': 'isDisabled()',
+                        '(focusout)': 'onFocusOut($event)',
+                    }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MkTimePicker),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => MkTimePicker),
+                            multi: true,
+                        },
+                    ], template: "<div #field class=\"mk-time-picker__field\">\n  <input\n    #textInput\n    type=\"text\"\n    class=\"mk-time-picker__input\"\n    [id]=\"inputId\"\n    [value]=\"inputText()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    autocomplete=\"off\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    aria-autocomplete=\"none\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"listId\"\n    [attr.aria-activedescendant]=\"\n      open() && activeIndex() >= 0 ? optionId(activeIndex()) : null\n    \"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onInputKeydown($event)\"\n  />\n\n  @if (showClear()) {\n    <button\n      type=\"button\"\n      class=\"mk-time-picker__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      (click)=\"clear()\"\n    >\n      <span class=\"mk-time-picker__clear-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n\n  <button\n    type=\"button\"\n    class=\"mk-time-picker__toggle\"\n    [attr.aria-label]=\"i18n.openTimeList\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"listId\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\"\n  >\n    <svg\n      class=\"mk-time-picker__icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"18\"\n      height=\"18\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      aria-hidden=\"true\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"9\" />\n      <path d=\"M12 7v5l3 2\" />\n    </svg>\n  </button>\n</div>\n\n@if (open()) {\n  <ul\n    #list\n    class=\"mk-time-picker__list\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    [matchWidth]=\"true\"\n    (dismiss)=\"close()\"\n    [id]=\"listId\"\n    role=\"listbox\"\n  >\n    @for (opt of options(); track opt.value; let i = $index) {\n      <li\n        class=\"mk-time-picker__option\"\n        [id]=\"optionId(i)\"\n        role=\"option\"\n        [attr.aria-selected]=\"i === selectedIndex()\"\n        [class.mk-time-picker__option--active]=\"i === activeIndex()\"\n        [class.mk-time-picker__option--selected]=\"i === selectedIndex()\"\n        (mousedown)=\"$event.preventDefault()\"\n        (mousemove)=\"activeIndex.set(i)\"\n        (click)=\"selectOption(i)\"\n      >\n        {{ opt.label }}\n      </li>\n    } @empty {\n      <li class=\"mk-time-picker__empty\" role=\"presentation\">\n        {{ i18n.noOptions }}\n      </li>\n    }\n  </ul>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-time-picker__field{display:flex;align-items:center;width:100%;height:var(--mk-control-height-md);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-time-picker--sm) .mk-time-picker__field{height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-time-picker--lg) .mk-time-picker__field{height:var(--mk-control-height-lg)}.mk-time-picker__field:hover{border-color:var(--mk-border-strong)}.mk-time-picker__field:focus-within{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-time-picker--invalid) .mk-time-picker__field{border-color:var(--mk-danger)}:host(.mk-time-picker--invalid) .mk-time-picker__field:focus-within{outline-color:var(--mk-danger)}:host(.mk-time-picker--disabled) .mk-time-picker__field{background-color:var(--mk-surface-2);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-time-picker__input{flex:1 1 auto;min-width:0;height:100%;padding:0 var(--mk-space-3);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background:transparent;border:0;outline:none}:host(.mk-time-picker--sm) .mk-time-picker__input{padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm)}:host(.mk-time-picker--lg) .mk-time-picker__input{padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-time-picker__input::placeholder{color:var(--mk-text-subtle);opacity:1}.mk-time-picker__input:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-time-picker__toggle,.mk-time-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex:none;height:100%;padding:0 var(--mk-space-2);color:var(--mk-text-muted);background:transparent;border:0;cursor:pointer;transition:color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-time-picker__toggle:hover:not(:disabled),.mk-time-picker__clear:hover{color:var(--mk-text)}.mk-time-picker__toggle:focus-visible,.mk-time-picker__clear:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1);border-radius:var(--mk-radius-sm)}.mk-time-picker__toggle:disabled{cursor:not-allowed}.mk-time-picker__clear-icon{position:relative;width:.85rem;height:.85rem}.mk-time-picker__clear-icon:before,.mk-time-picker__clear-icon:after{content:\"\";position:absolute;top:50%;left:0;width:100%;height:2px;background-color:currentColor}.mk-time-picker__clear-icon:before{transform:rotate(45deg)}.mk-time-picker__clear-icon:after{transform:rotate(-45deg)}.mk-time-picker__list{padding:var(--mk-space-1);list-style:none;max-height:15rem;overflow-y:auto;background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg)}.mk-time-picker__option{padding:var(--mk-space-2) var(--mk-space-3);font-size:var(--mk-font-size-md);color:var(--mk-text);border-radius:var(--mk-radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.mk-time-picker__option--active{background-color:var(--mk-selected-bg)}.mk-time-picker__option--selected{color:var(--mk-selected-text);font-weight:var(--mk-font-weight-medium)}.mk-time-picker__empty{padding:var(--mk-space-2) var(--mk-space-3);color:var(--mk-text-subtle);font-size:var(--mk-font-size-sm)}@media(prefers-reduced-motion:reduce){.mk-time-picker__field,.mk-time-picker__toggle,.mk-time-picker__clear{transition:none}}@media(pointer:coarse){.mk-time-picker__input{font-size:max(var(--mk-font-size-md),16px)}:host(.mk-time-picker--sm) .mk-time-picker__input{font-size:max(var(--mk-font-size-sm),16px)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['textInput', { isSignal: true }] }], listRef: [{ type: i0.ViewChild, args: ['list', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], hour12: [{ type: i0.Input, args: [{ isSignal: true, alias: "hour12", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/**
+ * DateRangePicker — select a start + end date from a single calendar popover.
+ * The first click sets the start, the second sets the end (endpoints are
+ * swapped if picked in reverse), and the hovered range is previewed live.
+ * Implements `ControlValueAccessor` and a two-way `value` model of
+ * {@link MkDateRange}.
+ *
+ * ```html
+ * <mk-date-range-picker [(value)]="range" [min]="minDate" clearable />
+ * ```
+ */
+class MkDateRangePicker {
+    i18n = inject(MK_I18N);
+    field = inject(MkFormField, { optional: true });
+    host = inject(ElementRef);
+    injector = inject(Injector);
+    triggerRef = viewChild('trigger', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
+    /** The calendar panel — lives in the top layer once opened. */
+    panelRef = viewChild('panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
+    /** Two-way selected range. */
+    value = model({ start: null, end: null }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Earliest selectable date (inclusive). */
+    min = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Latest selectable date (inclusive). */
+    max = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Predicate marking individual days as disabled. */
+    disabledDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledDate" }] : /* istanbul ignore next */ []));
+    /** Placeholder shown when no range is selected. */
+    placeholder = input(this.i18n.selectRange, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Pattern used to render each endpoint. */
+    displayFormat = input('MMM d, yyyy', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayFormat" }] : /* istanbul ignore next */ []));
+    /** Disable the control. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Show a clear button when a range is selected. */
+    clearable = input(false, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Force invalid styling + `aria-invalid`. */
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** First column of the calendar week (0 = Sunday). */
+    firstDayOfWeek = input(0, { ...(ngDevMode ? { debugName: "firstDayOfWeek" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Control size. Ignored when nested in an `mk-form-field`. */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** In-progress start endpoint (drives calendar highlighting). */
+    selStart = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selStart" }] : /* istanbul ignore next */ []));
+    /** In-progress end endpoint. */
+    selEnd = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selEnd" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    triggerId = this.field?.controlId ?? mkUniqueId('mk-date-range');
+    panelId = mkUniqueId('mk-date-range-panel');
+    effectiveSize = computed(() => this.field ? this.field.size() : this.size(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
+    isRequired = computed(() => this.field?.isRequired() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
+    labelledBy = computed(() => this.field?.labelId ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => this.field?.describedBy() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    showClear = computed(() => {
+        const v = this.value();
+        return this.clearable() && !!(v.start || v.end) && !this.isDisabled();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
+    /** Display label, e.g. `Jul 1, 2026 – Jul 9, 2026`. */
+    displayLabel = computed(() => {
+        const { start, end } = this.value();
+        const fmt = this.displayFormat();
+        if (!start && !end)
+            return '';
+        const names = this.i18n.dateNames;
+        const s = start ? formatDate(start, fmt, names) : '…';
+        const e = end ? formatDate(end, fmt, names) : '…';
+        return `${s} – ${e}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
+    toggle() {
+        if (this.isDisabled())
+            return;
+        this.open() ? this.close() : this.openPanel();
+    }
+    openPanel() {
+        if (this.isDisabled() || this.open())
+            return;
+        const v = this.value();
+        this.selStart.set(v.start);
+        this.selEnd.set(v.end);
+        this.open.set(true);
+        afterNextRender({
+            write: () => {
+                const el = this.panelRef()?.nativeElement.querySelector('.mk-calendar__day[tabindex="0"]');
+                el?.focus();
+            },
+        }, { injector: this.injector });
+    }
+    close() {
+        if (this.open())
+            this.open.set(false);
+    }
+    onPick(date) {
+        const start = this.selStart();
+        const end = this.selEnd();
+        const day = startOfDay(date);
+        if (!start || (start && end)) {
+            // Begin a fresh range.
+            this.selStart.set(day);
+            this.selEnd.set(null);
+            return;
+        }
+        // Complete the range, swapping if picked in reverse.
+        if (isBefore(day, start)) {
+            this.selStart.set(day);
+            this.selEnd.set(start);
+        }
+        else {
+            this.selEnd.set(day);
+        }
+        this.commit();
+        this.close();
+        this.triggerRef()?.nativeElement.focus();
+    }
+    clear() {
+        this.selStart.set(null);
+        this.selEnd.set(null);
+        this.setValue({ start: null, end: null });
+        this.triggerRef()?.nativeElement.focus();
+    }
+    commit() {
+        this.setValue({ start: this.selStart(), end: this.selEnd() });
+    }
+    setValue(range) {
+        this.value.set(range);
+        this.onChange(range);
+    }
+    onFocusOut(event) {
+        const related = event.relatedTarget;
+        if (related && this.host.nativeElement.contains(related))
+            return;
+        if (related && this.panelRef()?.nativeElement.contains(related))
+            return;
+        this.close();
+        this.onTouched();
+    }
+    /**
+     * Escape pressed inside the (teleported) calendar panel — close and return
+     * focus to the trigger. `preventDefault` + `stopPropagation` keep any outer
+     * Escape handling (e.g. a containing dialog) from also firing.
+     */
+    onPanelEscape(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.close();
+        this.triggerRef()?.nativeElement.focus();
+    }
+    /**
+     * Focus left the teleported panel. The host `(focusout)` never sees this —
+     * the panel lives under `document.body` — so Tab-out of the calendar is
+     * handled here: close unless focus moved back into the field or the panel.
+     */
+    onPanelFocusout(event) {
+        const related = event.relatedTarget;
+        // Focus fell to a non-focusable spot (body) — keep open; an outside
+        // pointerdown is dismissed by the anchored panel itself.
+        if (!related)
+            return;
+        if (this.host.nativeElement.contains(related))
+            return;
+        if (this.panelRef()?.nativeElement.contains(related))
+            return;
+        this.close();
+        this.onTouched();
+    }
+    // --- ControlValueAccessor -------------------------------------------------
+    writeValue(value) {
+        this.value.set(value ?? { start: null, end: null });
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    // --- Validator ------------------------------------------------------------
+    validatorChange = mkValidatorChange(() => {
+        this.min();
+        this.max();
+        this.disabledDate();
+    });
+    /**
+     * Reports `mkDateRangeIncomplete` for a half-picked range, `mkMinDate` /
+     * `mkMaxDate` for ends outside `[min]`/`[max]`, and `mkDateFilter` for an
+     * end rejected by `[disabledDate]`. A fully empty range passes; compose
+     * with `Validators.required` to reject it.
+     */
+    validate(control) {
+        const v = control.value;
+        const start = v?.start instanceof Date ? v.start : null;
+        const end = v?.end instanceof Date ? v.end : null;
+        if (!start && !end)
+            return null;
+        if (!start || !end)
+            return { mkDateRangeIncomplete: true };
+        const min = this.min();
+        if (min && isBefore(startOfDay(start), startOfDay(min))) {
+            return { mkMinDate: { min, actual: start } };
+        }
+        const max = this.max();
+        if (max && isAfter(startOfDay(end), startOfDay(max))) {
+            return { mkMaxDate: { max, actual: end } };
+        }
+        const filter = this.disabledDate();
+        if (filter?.(start) || filter?.(end))
+            return { mkDateFilter: true };
+        return null;
+    }
+    registerOnValidatorChange(fn) {
+        this.validatorChange.register(fn);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkDateRangePicker, isStandalone: true, selector: "mk-date-range-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabledDate: { classPropertyName: "disabledDate", publicName: "disabledDate", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "focusout": "onFocusOut($event)" }, properties: { "class.mk-date-range-picker--sm": "effectiveSize() === 'sm'", "class.mk-date-range-picker--md": "effectiveSize() === 'md'", "class.mk-date-range-picker--lg": "effectiveSize() === 'lg'", "class.mk-date-range-picker--open": "open()", "class.mk-date-range-picker--invalid": "isInvalid()", "class.mk-date-range-picker--disabled": "isDisabled()" }, classAttribute: "mk-date-range-picker" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MkDateRangePicker),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => MkDateRangePicker),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #field class=\"mk-date-range-picker__field\">\n  <button\n    #trigger\n    type=\"button\"\n    class=\"mk-date-range-picker__trigger\"\n    [id]=\"triggerId\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\"\n  >\n    @if (displayLabel()) {\n      <span class=\"mk-date-range-picker__value\">{{ displayLabel() }}</span>\n    } @else {\n      <span class=\"mk-date-range-picker__value mk-date-range-picker__value--placeholder\">{{\n        placeholder()\n      }}</span>\n    }\n  </button>\n\n  @if (showClear()) {\n    <button\n      type=\"button\"\n      class=\"mk-date-range-picker__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      (click)=\"clear()\"\n    >\n      <span class=\"mk-date-range-picker__clear-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n\n  <button\n    type=\"button\"\n    class=\"mk-date-range-picker__toggle\"\n    [attr.aria-label]=\"i18n.openCalendar\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\"\n  >\n    <svg\n      class=\"mk-date-range-picker__icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"18\"\n      height=\"18\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      aria-hidden=\"true\"\n    >\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"17\" rx=\"2\" />\n      <path d=\"M3 9h18M8 2v4M16 2v4\" />\n    </svg>\n  </button>\n</div>\n\n@if (open()) {\n  <div\n    #panel\n    class=\"mk-date-range-picker__panel\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    (dismiss)=\"close()\"\n    [id]=\"panelId\"\n    role=\"dialog\"\n    [attr.aria-label]=\"i18n.chooseDateRange\"\n    (keydown.escape)=\"onPanelEscape($event)\"\n    (focusout)=\"onPanelFocusout($event)\"\n  >\n    <mk-calendar\n      [rangeMode]=\"true\"\n      [rangeStart]=\"selStart()\"\n      [rangeEnd]=\"selEnd()\"\n      (dateSelected)=\"onPick($event)\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [disabledDate]=\"disabledDate()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      [size]=\"effectiveSize()\"\n    />\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-date-range-picker__field{display:flex;align-items:center;width:100%;height:var(--mk-control-height-md);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-date-range-picker--sm) .mk-date-range-picker__field{height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-date-range-picker--lg) .mk-date-range-picker__field{height:var(--mk-control-height-lg)}.mk-date-range-picker__field:hover{border-color:var(--mk-border-strong)}.mk-date-range-picker__field:focus-within{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-date-range-picker--invalid) .mk-date-range-picker__field{border-color:var(--mk-danger)}:host(.mk-date-range-picker--invalid) .mk-date-range-picker__field:focus-within{outline-color:var(--mk-danger)}:host(.mk-date-range-picker--disabled) .mk-date-range-picker__field{background-color:var(--mk-surface-2);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-date-range-picker__trigger{flex:1 1 auto;min-width:0;height:100%;padding:0 var(--mk-space-3);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);text-align:start;background:transparent;border:0;outline:none;cursor:pointer}:host(.mk-date-range-picker--sm) .mk-date-range-picker__trigger{padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm)}:host(.mk-date-range-picker--lg) .mk-date-range-picker__trigger{padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-date-range-picker__trigger:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-date-range-picker__value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-date-range-picker__value--placeholder{color:var(--mk-text-subtle)}.mk-date-range-picker__toggle,.mk-date-range-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex:none;height:100%;padding:0 var(--mk-space-2);color:var(--mk-text-muted);background:transparent;border:0;cursor:pointer;transition:color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-date-range-picker__toggle:hover:not(:disabled),.mk-date-range-picker__clear:hover{color:var(--mk-text)}.mk-date-range-picker__toggle:focus-visible,.mk-date-range-picker__clear:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1);border-radius:var(--mk-radius-sm)}.mk-date-range-picker__toggle:disabled{cursor:not-allowed}.mk-date-range-picker__clear-icon{position:relative;width:.85rem;height:.85rem}.mk-date-range-picker__clear-icon:before,.mk-date-range-picker__clear-icon:after{content:\"\";position:absolute;top:50%;left:0;width:100%;height:2px;background-color:currentColor}.mk-date-range-picker__clear-icon:before{transform:rotate(45deg)}.mk-date-range-picker__clear-icon:after{transform:rotate(-45deg)}.mk-date-range-picker__panel{box-shadow:var(--mk-shadow-lg);border-radius:var(--mk-radius-lg)}@media(prefers-reduced-motion:reduce){.mk-date-range-picker__field,.mk-date-range-picker__toggle,.mk-date-range-picker__clear{transition:none}}\n"], dependencies: [{ kind: "component", type: MkCalendar, selector: "mk-calendar", inputs: ["value", "min", "max", "firstDayOfWeek", "disabled", "invalid", "disabledDate", "size", "fullWidth", "rangeMode", "rangeStart", "rangeEnd"], outputs: ["valueChange", "dateSelected", "dateHovered"] }, { kind: "directive", type: MkAnchoredPanel, selector: "[mkAnchoredPanel]", inputs: ["mkAnchoredPanelFor", "anchorRect", "placement", "gap", "matchWidth", "flip", "clamp"], outputs: ["dismiss"], exportAs: ["mkAnchoredPanel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDateRangePicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-date-range-picker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MkCalendar, MkAnchoredPanel], host: {
+                        class: 'mk-date-range-picker',
+                        '[class.mk-date-range-picker--sm]': "effectiveSize() === 'sm'",
+                        '[class.mk-date-range-picker--md]': "effectiveSize() === 'md'",
+                        '[class.mk-date-range-picker--lg]': "effectiveSize() === 'lg'",
+                        '[class.mk-date-range-picker--open]': 'open()',
+                        '[class.mk-date-range-picker--invalid]': 'isInvalid()',
+                        '[class.mk-date-range-picker--disabled]': 'isDisabled()',
+                        '(focusout)': 'onFocusOut($event)',
+                    }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MkDateRangePicker),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => MkDateRangePicker),
+                            multi: true,
+                        },
+                    ], template: "<div #field class=\"mk-date-range-picker__field\">\n  <button\n    #trigger\n    type=\"button\"\n    class=\"mk-date-range-picker__trigger\"\n    [id]=\"triggerId\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\"\n  >\n    @if (displayLabel()) {\n      <span class=\"mk-date-range-picker__value\">{{ displayLabel() }}</span>\n    } @else {\n      <span class=\"mk-date-range-picker__value mk-date-range-picker__value--placeholder\">{{\n        placeholder()\n      }}</span>\n    }\n  </button>\n\n  @if (showClear()) {\n    <button\n      type=\"button\"\n      class=\"mk-date-range-picker__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      (click)=\"clear()\"\n    >\n      <span class=\"mk-date-range-picker__clear-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n\n  <button\n    type=\"button\"\n    class=\"mk-date-range-picker__toggle\"\n    [attr.aria-label]=\"i18n.openCalendar\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\"\n  >\n    <svg\n      class=\"mk-date-range-picker__icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"18\"\n      height=\"18\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      aria-hidden=\"true\"\n    >\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"17\" rx=\"2\" />\n      <path d=\"M3 9h18M8 2v4M16 2v4\" />\n    </svg>\n  </button>\n</div>\n\n@if (open()) {\n  <div\n    #panel\n    class=\"mk-date-range-picker__panel\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    (dismiss)=\"close()\"\n    [id]=\"panelId\"\n    role=\"dialog\"\n    [attr.aria-label]=\"i18n.chooseDateRange\"\n    (keydown.escape)=\"onPanelEscape($event)\"\n    (focusout)=\"onPanelFocusout($event)\"\n  >\n    <mk-calendar\n      [rangeMode]=\"true\"\n      [rangeStart]=\"selStart()\"\n      [rangeEnd]=\"selEnd()\"\n      (dateSelected)=\"onPick($event)\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [disabledDate]=\"disabledDate()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      [size]=\"effectiveSize()\"\n    />\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-date-range-picker__field{display:flex;align-items:center;width:100%;height:var(--mk-control-height-md);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-date-range-picker--sm) .mk-date-range-picker__field{height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-date-range-picker--lg) .mk-date-range-picker__field{height:var(--mk-control-height-lg)}.mk-date-range-picker__field:hover{border-color:var(--mk-border-strong)}.mk-date-range-picker__field:focus-within{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-date-range-picker--invalid) .mk-date-range-picker__field{border-color:var(--mk-danger)}:host(.mk-date-range-picker--invalid) .mk-date-range-picker__field:focus-within{outline-color:var(--mk-danger)}:host(.mk-date-range-picker--disabled) .mk-date-range-picker__field{background-color:var(--mk-surface-2);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-date-range-picker__trigger{flex:1 1 auto;min-width:0;height:100%;padding:0 var(--mk-space-3);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);text-align:start;background:transparent;border:0;outline:none;cursor:pointer}:host(.mk-date-range-picker--sm) .mk-date-range-picker__trigger{padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm)}:host(.mk-date-range-picker--lg) .mk-date-range-picker__trigger{padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-date-range-picker__trigger:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-date-range-picker__value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-date-range-picker__value--placeholder{color:var(--mk-text-subtle)}.mk-date-range-picker__toggle,.mk-date-range-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex:none;height:100%;padding:0 var(--mk-space-2);color:var(--mk-text-muted);background:transparent;border:0;cursor:pointer;transition:color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-date-range-picker__toggle:hover:not(:disabled),.mk-date-range-picker__clear:hover{color:var(--mk-text)}.mk-date-range-picker__toggle:focus-visible,.mk-date-range-picker__clear:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1);border-radius:var(--mk-radius-sm)}.mk-date-range-picker__toggle:disabled{cursor:not-allowed}.mk-date-range-picker__clear-icon{position:relative;width:.85rem;height:.85rem}.mk-date-range-picker__clear-icon:before,.mk-date-range-picker__clear-icon:after{content:\"\";position:absolute;top:50%;left:0;width:100%;height:2px;background-color:currentColor}.mk-date-range-picker__clear-icon:before{transform:rotate(45deg)}.mk-date-range-picker__clear-icon:after{transform:rotate(-45deg)}.mk-date-range-picker__panel{box-shadow:var(--mk-shadow-lg);border-radius:var(--mk-radius-lg)}@media(prefers-reduced-motion:reduce){.mk-date-range-picker__field,.mk-date-range-picker__toggle,.mk-date-range-picker__clear{transition:none}}\n"] }]
+        }], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabledDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDate", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/**
+ * MonthPicker — a compact field + popover for picking a **month** (`MMM yyyy`)
+ * or a **year**. The panel shows a 12-month grid (with year nav) or a 12-year
+ * grid (with decade nav). Value is a `Date` at the first day of the selection.
+ * Implements `ControlValueAccessor` + a two-way `value` model; the panel renders
+ * in the top layer so it is never clipped.
+ *
+ * ```html
+ * <mk-month-picker [(value)]="month" />
+ * <mk-month-picker mode="year" [(value)]="year" />
+ * ```
+ */
+class MkMonthPicker {
+    i18n = inject(MK_I18N);
+    field = inject(MkFormField, { optional: true });
+    host = inject(ElementRef);
+    injector = inject(Injector);
+    triggerRef = viewChild('trigger', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
+    panelRef = viewChild('panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
+    cellRefs = viewChildren('cell', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cellRefs" }] : /* istanbul ignore next */ []));
+    /** Two-way selected date (first of the month / year). */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Pick a month or a whole year. */
+    mode = input('month', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Earliest selectable date. */
+    min = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Latest selectable date. */
+    max = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Placeholder shown when empty. */
+    placeholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Display pattern (defaults to `MMM yyyy` / `yyyy`). */
+    displayFormat = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayFormat" }] : /* istanbul ignore next */ []));
+    /** Disable the control. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Show a clear button when a value is selected. */
+    clearable = input(false, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Force invalid styling. */
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Control size. Ignored when nested in an `mk-form-field`. */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** The year currently shown in the panel (base for the month/decade grid). */
+    viewYear = signal(new Date().getFullYear(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewYear" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    triggerId = this.field?.controlId ?? mkUniqueId('mk-month-picker');
+    panelId = mkUniqueId('mk-month-picker-panel');
+    effectiveSize = computed(() => this.field ? this.field.size() : this.size(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
+    isRequired = computed(() => this.field?.isRequired() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
+    labelledBy = computed(() => this.field?.labelId ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => this.field?.describedBy() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    resolvedPlaceholder = computed(() => this.placeholder() ||
+        (this.mode() === 'year' ? this.i18n.selectYear : this.i18n.selectMonth), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedPlaceholder" }] : /* istanbul ignore next */ []));
+    pattern = computed(() => this.displayFormat() || (this.mode() === 'year' ? 'yyyy' : 'MMM yyyy'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pattern" }] : /* istanbul ignore next */ []));
+    displayLabel = computed(() => {
+        const v = this.value();
+        return v ? formatDate(v, this.pattern(), this.i18n.dateNames) : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
+    /** The decade start when in year mode. */
+    decadeStart = computed(() => Math.floor(this.viewYear() / 12) * 12, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "decadeStart" }] : /* istanbul ignore next */ []));
+    /** Header label (year, or decade range). */
+    headerLabel = computed(() => {
+        if (this.mode() === 'year') {
+            const s = this.decadeStart();
+            return `${s} – ${s + 11}`;
+        }
+        return `${this.viewYear()}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerLabel" }] : /* istanbul ignore next */ []));
+    /** Abbreviated month labels for the grid, from the active locale. */
+    months = this.i18n.dateNames.monthsShort;
+    /** The 12 grid cells (months or years). */
+    cells = computed(() => {
+        const value = this.value();
+        if (this.mode() === 'year') {
+            const start = this.decadeStart();
+            return Array.from({ length: 12 }, (_, i) => {
+                const year = start + i;
+                const date = new Date(year, 0, 1);
+                return {
+                    label: `${year}`,
+                    year,
+                    month: 0,
+                    disabled: this.outOfRange(date, new Date(year, 11, 31)),
+                    selected: value?.getFullYear() === year,
+                };
+            });
+        }
+        const year = this.viewYear();
+        return this.months.map((label, m) => {
+            const date = new Date(year, m, 1);
+            return {
+                label,
+                year,
+                month: m,
+                disabled: this.outOfRange(date, endOfMonth(date)),
+                selected: value?.getFullYear() === year && value?.getMonth() === m,
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cells" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Keep the panel's view year in sync with the selected value.
+        effect(() => {
+            const v = this.value();
+            if (v)
+                this.viewYear.set(v.getFullYear());
+        });
+    }
+    toggle() {
+        if (this.isDisabled())
+            return;
+        this.open() ? this.close() : this.openPanel();
+    }
+    openPanel() {
+        if (this.isDisabled() || this.open())
+            return;
+        const v = this.value();
+        if (v)
+            this.viewYear.set(v.getFullYear());
+        // Focus the selected (or first enabled) cell once the panel is in the DOM.
+        const cells = this.cells();
+        const sel = cells.findIndex((c) => c.selected);
+        this.activeIndex.set(sel >= 0 ? sel : cells.findIndex((c) => !c.disabled));
+        this.open.set(true);
+        afterNextRender(() => this.focusActive(), { injector: this.injector });
+    }
+    close(restoreFocus = false) {
+        if (!this.open())
+            return;
+        this.open.set(false);
+        if (restoreFocus)
+            this.triggerRef()?.nativeElement.focus();
+    }
+    shiftView(delta) {
+        const step = this.mode() === 'year' ? 12 : 1;
+        this.viewYear.set(this.viewYear() + delta * step);
+    }
+    selectCell(cell) {
+        if (cell.disabled)
+            return;
+        const date = new Date(cell.year, this.mode() === 'year' ? 0 : cell.month, 1);
+        this.value.set(date);
+        this.onChange(date);
+        this.close(true);
+    }
+    clear(event) {
+        event.stopPropagation();
+        this.value.set(null);
+        this.onChange(null);
+        this.triggerRef()?.nativeElement.focus();
+    }
+    onGridKeydown(event) {
+        const cols = 3;
+        const total = this.cells().length;
+        let next = this.activeIndex();
+        switch (event.key) {
+            case 'ArrowRight':
+                next += 1;
+                break;
+            case 'ArrowLeft':
+                next -= 1;
+                break;
+            case 'ArrowDown':
+                next += cols;
+                break;
+            case 'ArrowUp':
+                next -= cols;
+                break;
+            case 'Home':
+                next = 0;
+                break;
+            case 'End':
+                next = total - 1;
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.close(true);
+                return;
+            default:
+                return;
+        }
+        event.preventDefault();
+        this.activeIndex.set(Math.max(0, Math.min(total - 1, next)));
+        this.focusActive();
+    }
+    focusActive() {
+        this.cellRefs()[this.activeIndex()]?.nativeElement.focus();
+    }
+    onFocusOut(event) {
+        const related = event.relatedTarget;
+        if (related && this.host.nativeElement.contains(related))
+            return;
+        if (related && this.panelRef()?.nativeElement.contains(related))
+            return;
+        this.close();
+        this.onTouched();
+    }
+    outOfRange(start, end) {
+        const min = this.min();
+        const max = this.max();
+        if (min && isBefore(end, min))
+            return true;
+        if (max && isAfter(start, max))
+            return true;
+        return false;
+    }
+    // --- ControlValueAccessor -------------------------------------------------
+    writeValue(value) {
+        this.value.set(value ?? null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    // --- Validator ------------------------------------------------------------
+    validatorChange = mkValidatorChange(() => {
+        this.min();
+        this.max();
+    });
+    /**
+     * Reports `mkMinDate` / `mkMaxDate` against the `[min]` and `[max]` inputs,
+     * compared at month granularity.
+     */
+    validate(control) {
+        const v = control.value;
+        if (!(v instanceof Date) || Number.isNaN(v.getTime()))
+            return null;
+        const month = startOfMonth(v);
+        const min = this.min();
+        if (min && isBefore(month, startOfMonth(min)))
+            return { mkMinDate: { min, actual: v } };
+        const max = this.max();
+        if (max && isAfter(month, startOfMonth(max)))
+            return { mkMaxDate: { max, actual: v } };
+        return null;
+    }
+    registerOnValidatorChange(fn) {
+        this.validatorChange.register(fn);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkMonthPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkMonthPicker, isStandalone: true, selector: "mk-month-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "focusout": "onFocusOut($event)" }, properties: { "class.mk-month-picker--sm": "effectiveSize() === 'sm'", "class.mk-month-picker--lg": "effectiveSize() === 'lg'", "class.mk-month-picker--open": "open()", "class.mk-month-picker--invalid": "isInvalid()", "class.mk-month-picker--disabled": "isDisabled()" }, classAttribute: "mk-month-picker" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MkMonthPicker),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => MkMonthPicker),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "cellRefs", predicate: ["cell"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #field class=\"mk-month-picker__field\">\n  <button\n    #trigger\n    type=\"button\"\n    class=\"mk-month-picker__trigger\"\n    [id]=\"triggerId\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\"\n  >\n    @if (displayLabel()) {\n      <span class=\"mk-month-picker__value\">{{ displayLabel() }}</span>\n    } @else {\n      <span class=\"mk-month-picker__value mk-month-picker__value--placeholder\">{{\n        resolvedPlaceholder()\n      }}</span>\n    }\n    <span class=\"mk-month-picker__icon\" aria-hidden=\"true\"></span>\n  </button>\n\n  @if (clearable() && value() && !isDisabled()) {\n    <button\n      type=\"button\"\n      class=\"mk-month-picker__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      (click)=\"clear($event)\"\n    >\n      <span class=\"mk-month-picker__clear-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n</div>\n\n@if (open()) {\n  <div\n    #panel\n    class=\"mk-month-picker__panel\"\n    role=\"dialog\"\n    [id]=\"panelId\"\n    [attr.aria-label]=\"mode() === 'year' ? i18n.chooseYear : i18n.chooseMonth\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    (dismiss)=\"close()\"\n  >\n    <div class=\"mk-month-picker__header\">\n      <button\n        type=\"button\"\n        class=\"mk-month-picker__nav\"\n        [attr.aria-label]=\"mode() === 'year' ? i18n.previousYears : i18n.previousYear\"\n        (click)=\"shiftView(-1)\"\n      >\n        \u2039\n      </button>\n      <span class=\"mk-month-picker__header-label\" aria-live=\"polite\">{{ headerLabel() }}</span>\n      <button\n        type=\"button\"\n        class=\"mk-month-picker__nav\"\n        [attr.aria-label]=\"mode() === 'year' ? i18n.nextYears : i18n.nextYear\"\n        (click)=\"shiftView(1)\"\n      >\n        \u203A\n      </button>\n    </div>\n\n    <div class=\"mk-month-picker__grid\" role=\"grid\" (keydown)=\"onGridKeydown($event)\">\n      @for (cell of cells(); track cell.label; let i = $index) {\n        <button\n          #cell\n          type=\"button\"\n          class=\"mk-month-picker__cell\"\n          [class.mk-month-picker__cell--selected]=\"cell.selected\"\n          [attr.tabindex]=\"i === activeIndex() ? 0 : -1\"\n          [attr.aria-selected]=\"cell.selected\"\n          [disabled]=\"cell.disabled\"\n          (click)=\"selectCell(cell)\"\n        >\n          {{ cell.label }}\n        </button>\n      }\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-month-picker__field{display:flex;align-items:center;position:relative}.mk-month-picker__trigger{flex:1 1 auto;display:flex;align-items:center;gap:var(--mk-space-2);width:100%;height:var(--mk-control-height-md);padding:0 var(--mk-space-3);text-align:start;font:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);cursor:pointer}:host(.mk-month-picker--sm) .mk-month-picker__trigger{height:var(--mk-control-height-sm);padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm);border-radius:var(--mk-radius-sm)}:host(.mk-month-picker--lg) .mk-month-picker__trigger{height:var(--mk-control-height-lg);padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-month-picker__trigger:hover:not(:disabled){border-color:var(--mk-border-strong)}.mk-month-picker__trigger:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-month-picker--invalid) .mk-month-picker__trigger{border-color:var(--mk-danger)}:host(.mk-month-picker--disabled) .mk-month-picker__trigger{background-color:var(--mk-surface-2);color:var(--mk-text-disabled);cursor:not-allowed;opacity:.7}.mk-month-picker__value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-month-picker__value--placeholder{color:var(--mk-text-subtle)}.mk-month-picker__icon{flex:none;width:1rem;height:1rem;border:2px solid var(--mk-text-muted);border-radius:2px;position:relative}.mk-month-picker__icon:before{content:\"\";position:absolute;top:-3px;left:2px;right:2px;border-top:2px solid var(--mk-text-muted)}.mk-month-picker__clear{position:absolute;inset-inline-end:var(--mk-space-8);display:grid;place-items:center;width:1.25rem;height:1.25rem;color:var(--mk-text-muted);background:transparent;border:none;border-radius:var(--mk-radius-circle);cursor:pointer}.mk-month-picker__clear:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-month-picker__clear-icon:before,.mk-month-picker__clear-icon:after{content:\"\";position:absolute;width:.7rem;height:2px;background-color:currentColor}.mk-month-picker__clear-icon:before{transform:rotate(45deg)}.mk-month-picker__clear-icon:after{transform:rotate(-45deg)}.mk-month-picker__panel{width:17rem;padding:var(--mk-space-2);background:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-lg)}.mk-month-picker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--mk-space-1)}.mk-month-picker__header-label{font-weight:var(--mk-font-weight-semibold);color:var(--mk-text)}.mk-month-picker__nav{display:grid;place-items:center;width:2rem;height:2rem;font-size:var(--mk-font-size-lg);color:var(--mk-text-muted);background:transparent;border:none;border-radius:var(--mk-radius-sm);cursor:pointer}.mk-month-picker__nav:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-month-picker__nav:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-month-picker__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--mk-space-1)}.mk-month-picker__cell{padding:var(--mk-space-2) 0;font-size:var(--mk-font-size-sm);color:var(--mk-text);background:transparent;border:none;border-radius:var(--mk-radius-sm);cursor:pointer}.mk-month-picker__cell:hover:not(:disabled){background-color:var(--mk-hover-overlay)}.mk-month-picker__cell:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-month-picker__cell--selected{background-color:var(--mk-primary);color:var(--mk-primary-contrast)}.mk-month-picker__cell--selected:hover:not(:disabled){background-color:var(--mk-primary)}.mk-month-picker__cell:disabled{color:var(--mk-text-disabled);cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: MkAnchoredPanel, selector: "[mkAnchoredPanel]", inputs: ["mkAnchoredPanelFor", "anchorRect", "placement", "gap", "matchWidth", "flip", "clamp"], outputs: ["dismiss"], exportAs: ["mkAnchoredPanel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkMonthPicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-month-picker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MkAnchoredPanel], host: {
+                        class: 'mk-month-picker',
+                        '[class.mk-month-picker--sm]': "effectiveSize() === 'sm'",
+                        '[class.mk-month-picker--lg]': "effectiveSize() === 'lg'",
+                        '[class.mk-month-picker--open]': 'open()',
+                        '[class.mk-month-picker--invalid]': 'isInvalid()',
+                        '[class.mk-month-picker--disabled]': 'isDisabled()',
+                        '(focusout)': 'onFocusOut($event)',
+                    }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MkMonthPicker),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => MkMonthPicker),
+                            multi: true,
+                        },
+                    ], template: "<div #field class=\"mk-month-picker__field\">\n  <button\n    #trigger\n    type=\"button\"\n    class=\"mk-month-picker__trigger\"\n    [id]=\"triggerId\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\"\n  >\n    @if (displayLabel()) {\n      <span class=\"mk-month-picker__value\">{{ displayLabel() }}</span>\n    } @else {\n      <span class=\"mk-month-picker__value mk-month-picker__value--placeholder\">{{\n        resolvedPlaceholder()\n      }}</span>\n    }\n    <span class=\"mk-month-picker__icon\" aria-hidden=\"true\"></span>\n  </button>\n\n  @if (clearable() && value() && !isDisabled()) {\n    <button\n      type=\"button\"\n      class=\"mk-month-picker__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      (click)=\"clear($event)\"\n    >\n      <span class=\"mk-month-picker__clear-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n</div>\n\n@if (open()) {\n  <div\n    #panel\n    class=\"mk-month-picker__panel\"\n    role=\"dialog\"\n    [id]=\"panelId\"\n    [attr.aria-label]=\"mode() === 'year' ? i18n.chooseYear : i18n.chooseMonth\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    (dismiss)=\"close()\"\n  >\n    <div class=\"mk-month-picker__header\">\n      <button\n        type=\"button\"\n        class=\"mk-month-picker__nav\"\n        [attr.aria-label]=\"mode() === 'year' ? i18n.previousYears : i18n.previousYear\"\n        (click)=\"shiftView(-1)\"\n      >\n        \u2039\n      </button>\n      <span class=\"mk-month-picker__header-label\" aria-live=\"polite\">{{ headerLabel() }}</span>\n      <button\n        type=\"button\"\n        class=\"mk-month-picker__nav\"\n        [attr.aria-label]=\"mode() === 'year' ? i18n.nextYears : i18n.nextYear\"\n        (click)=\"shiftView(1)\"\n      >\n        \u203A\n      </button>\n    </div>\n\n    <div class=\"mk-month-picker__grid\" role=\"grid\" (keydown)=\"onGridKeydown($event)\">\n      @for (cell of cells(); track cell.label; let i = $index) {\n        <button\n          #cell\n          type=\"button\"\n          class=\"mk-month-picker__cell\"\n          [class.mk-month-picker__cell--selected]=\"cell.selected\"\n          [attr.tabindex]=\"i === activeIndex() ? 0 : -1\"\n          [attr.aria-selected]=\"cell.selected\"\n          [disabled]=\"cell.disabled\"\n          (click)=\"selectCell(cell)\"\n        >\n          {{ cell.label }}\n        </button>\n      }\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-month-picker__field{display:flex;align-items:center;position:relative}.mk-month-picker__trigger{flex:1 1 auto;display:flex;align-items:center;gap:var(--mk-space-2);width:100%;height:var(--mk-control-height-md);padding:0 var(--mk-space-3);text-align:start;font:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);cursor:pointer}:host(.mk-month-picker--sm) .mk-month-picker__trigger{height:var(--mk-control-height-sm);padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm);border-radius:var(--mk-radius-sm)}:host(.mk-month-picker--lg) .mk-month-picker__trigger{height:var(--mk-control-height-lg);padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-month-picker__trigger:hover:not(:disabled){border-color:var(--mk-border-strong)}.mk-month-picker__trigger:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-month-picker--invalid) .mk-month-picker__trigger{border-color:var(--mk-danger)}:host(.mk-month-picker--disabled) .mk-month-picker__trigger{background-color:var(--mk-surface-2);color:var(--mk-text-disabled);cursor:not-allowed;opacity:.7}.mk-month-picker__value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-month-picker__value--placeholder{color:var(--mk-text-subtle)}.mk-month-picker__icon{flex:none;width:1rem;height:1rem;border:2px solid var(--mk-text-muted);border-radius:2px;position:relative}.mk-month-picker__icon:before{content:\"\";position:absolute;top:-3px;left:2px;right:2px;border-top:2px solid var(--mk-text-muted)}.mk-month-picker__clear{position:absolute;inset-inline-end:var(--mk-space-8);display:grid;place-items:center;width:1.25rem;height:1.25rem;color:var(--mk-text-muted);background:transparent;border:none;border-radius:var(--mk-radius-circle);cursor:pointer}.mk-month-picker__clear:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-month-picker__clear-icon:before,.mk-month-picker__clear-icon:after{content:\"\";position:absolute;width:.7rem;height:2px;background-color:currentColor}.mk-month-picker__clear-icon:before{transform:rotate(45deg)}.mk-month-picker__clear-icon:after{transform:rotate(-45deg)}.mk-month-picker__panel{width:17rem;padding:var(--mk-space-2);background:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-lg)}.mk-month-picker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--mk-space-1)}.mk-month-picker__header-label{font-weight:var(--mk-font-weight-semibold);color:var(--mk-text)}.mk-month-picker__nav{display:grid;place-items:center;width:2rem;height:2rem;font-size:var(--mk-font-size-lg);color:var(--mk-text-muted);background:transparent;border:none;border-radius:var(--mk-radius-sm);cursor:pointer}.mk-month-picker__nav:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-month-picker__nav:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-month-picker__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--mk-space-1)}.mk-month-picker__cell{padding:var(--mk-space-2) 0;font-size:var(--mk-font-size-sm);color:var(--mk-text);background:transparent;border:none;border-radius:var(--mk-radius-sm);cursor:pointer}.mk-month-picker__cell:hover:not(:disabled){background-color:var(--mk-hover-overlay)}.mk-month-picker__cell:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-month-picker__cell--selected{background-color:var(--mk-primary);color:var(--mk-primary-contrast)}.mk-month-picker__cell--selected:hover:not(:disabled){background-color:var(--mk-primary)}.mk-month-picker__cell:disabled{color:var(--mk-text-disabled);cursor:not-allowed}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], cellRefs: [{ type: i0.ViewChildren, args: ['cell', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/**
+ * WeekPicker — pick a whole calendar week from a popover calendar. Hovering a
+ * day previews its entire week; clicking selects it. The value is an
+ * {@link MkWeek} (`{ start, end }`, aligned to `firstDayOfWeek`). Implements
+ * `ControlValueAccessor` and a two-way `value` model; the panel renders in the
+ * top layer so it is never clipped.
+ *
+ * ```html
+ * <mk-week-picker [(value)]="week" [firstDayOfWeek]="1" clearable />
+ * ```
+ */
+class MkWeekPicker {
+    i18n = inject(MK_I18N);
+    field = inject(MkFormField, { optional: true });
+    host = inject(ElementRef);
+    injector = inject(Injector);
+    triggerRef = viewChild('trigger', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
+    panelRef = viewChild('panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
+    /** Two-way selected week. */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Earliest selectable date (inclusive). */
+    min = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Latest selectable date (inclusive). */
+    max = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** First column of the calendar week (0 = Sunday). Also anchors the week. */
+    firstDayOfWeek = input(0, { ...(ngDevMode ? { debugName: "firstDayOfWeek" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Placeholder shown when empty. */
+    placeholder = input(this.i18n.selectWeek, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Pattern used to render each endpoint of the week range. */
+    displayFormat = input('MMM d', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayFormat" }] : /* istanbul ignore next */ []));
+    /** Prefix the label with the ISO week number, e.g. `W28 · …`. */
+    showWeekNumber = input(false, { ...(ngDevMode ? { debugName: "showWeekNumber" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Disable the control. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Show a clear button when a week is selected. */
+    clearable = input(false, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Force invalid styling + `aria-invalid`. */
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Control size. Ignored when nested in an `mk-form-field`. */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** The week currently previewed under the pointer (drives highlighting). */
+    hoverWeek = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoverWeek" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    triggerId = this.field?.controlId ?? mkUniqueId('mk-week-picker');
+    panelId = mkUniqueId('mk-week-picker-panel');
+    effectiveSize = computed(() => this.field ? this.field.size() : this.size(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
+    isRequired = computed(() => this.field?.isRequired() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
+    labelledBy = computed(() => this.field?.labelId ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => this.field?.describedBy() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    showClear = computed(() => this.clearable() && !!this.value() && !this.isDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
+    /** The week to highlight: the hovered one while previewing, else the value. */
+    highlightWeek = computed(() => this.hoverWeek() ?? this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highlightWeek" }] : /* istanbul ignore next */ []));
+    /** Display label, e.g. `W28 · Jul 6 – Jul 12, 2026`. */
+    displayLabel = computed(() => {
+        const week = this.value();
+        if (!week)
+            return '';
+        const fmt = this.displayFormat();
+        const names = this.i18n.dateNames;
+        const range = `${formatDate(week.start, fmt, names)} – ${formatDate(week.end, `${fmt}, yyyy`, names)}`;
+        return this.showWeekNumber() ? `W${getISOWeek(week.start)} · ${range}` : range;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
+    toggle() {
+        if (this.isDisabled())
+            return;
+        this.open() ? this.close() : this.openPanel();
+    }
+    openPanel() {
+        if (this.isDisabled() || this.open())
+            return;
+        this.open.set(true);
+        afterNextRender({
+            write: () => {
+                const el = this.panelRef()?.nativeElement.querySelector('.mk-calendar__day[tabindex="0"]');
+                el?.focus();
+            },
+        }, { injector: this.injector });
+    }
+    close() {
+        if (this.open()) {
+            this.open.set(false);
+            this.hoverWeek.set(null);
+        }
+    }
+    /** A day inside the calendar was activated — select its whole week. */
+    onPick(date) {
+        const week = this.weekOf(date);
+        this.value.set(week);
+        this.onChange(week);
+        this.close();
+        this.triggerRef()?.nativeElement.focus();
+    }
+    /** Preview the hovered day's week. */
+    onHover(date) {
+        this.hoverWeek.set(date ? this.weekOf(date) : null);
+    }
+    clear() {
+        this.value.set(null);
+        this.onChange(null);
+        this.triggerRef()?.nativeElement.focus();
+    }
+    weekOf(date) {
+        const fdow = this.firstDayOfWeek();
+        return { start: startOfWeek(date, fdow), end: endOfWeek(date, fdow) };
+    }
+    /** Reference date the calendar should open on (the selected week's start). */
+    calendarValue = computed(() => this.value()?.start ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendarValue" }] : /* istanbul ignore next */ []));
+    onFocusOut(event) {
+        const related = event.relatedTarget;
+        if (related && this.host.nativeElement.contains(related))
+            return;
+        if (related && this.panelRef()?.nativeElement.contains(related))
+            return;
+        this.close();
+        this.onTouched();
+    }
+    // --- ControlValueAccessor -------------------------------------------------
+    writeValue(value) {
+        // Re-anchor any incoming date to a full week for consistent highlighting.
+        if (value?.start)
+            this.value.set(this.weekOf(value.start));
+        else
+            this.value.set(null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    /** Expose the raw highlight endpoints to the template. */
+    highlightStart = computed(() => this.highlightWeek()?.start ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highlightStart" }] : /* istanbul ignore next */ []));
+    highlightEnd = computed(() => this.highlightWeek()?.end ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highlightEnd" }] : /* istanbul ignore next */ []));
+    // --- Validator ------------------------------------------------------------
+    validatorChange = mkValidatorChange(() => {
+        this.min();
+        this.max();
+    });
+    /**
+     * Reports `mkMinDate` / `mkMaxDate` when the selected week starts before
+     * `[min]` or ends after `[max]`.
+     */
+    validate(control) {
+        const v = control.value;
+        const start = v?.start;
+        const end = v?.end;
+        if (!(start instanceof Date) || !(end instanceof Date))
+            return null;
+        const min = this.min();
+        if (min && isBefore(startOfDay(start), startOfDay(min))) {
+            return { mkMinDate: { min, actual: start } };
+        }
+        const max = this.max();
+        if (max && isAfter(startOfDay(end), startOfDay(max))) {
+            return { mkMaxDate: { max, actual: end } };
+        }
+        return null;
+    }
+    registerOnValidatorChange(fn) {
+        this.validatorChange.register(fn);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkWeekPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkWeekPicker, isStandalone: true, selector: "mk-week-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumber: { classPropertyName: "showWeekNumber", publicName: "showWeekNumber", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "focusout": "onFocusOut($event)" }, properties: { "class.mk-week-picker--sm": "effectiveSize() === 'sm'", "class.mk-week-picker--lg": "effectiveSize() === 'lg'", "class.mk-week-picker--open": "open()", "class.mk-week-picker--invalid": "isInvalid()", "class.mk-week-picker--disabled": "isDisabled()" }, classAttribute: "mk-week-picker" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MkWeekPicker),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => MkWeekPicker),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #field class=\"mk-week-picker__field\">\n  <button\n    #trigger\n    type=\"button\"\n    class=\"mk-week-picker__trigger\"\n    [id]=\"triggerId\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\"\n  >\n    @if (displayLabel()) {\n      <span class=\"mk-week-picker__value\">{{ displayLabel() }}</span>\n    } @else {\n      <span class=\"mk-week-picker__value mk-week-picker__value--placeholder\">{{\n        placeholder()\n      }}</span>\n    }\n    <svg\n      class=\"mk-week-picker__icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"18\"\n      height=\"18\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      aria-hidden=\"true\"\n    >\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"17\" rx=\"2\" />\n      <path d=\"M3 9h18M8 2v4M16 2v4\" />\n    </svg>\n  </button>\n\n  @if (showClear()) {\n    <button\n      type=\"button\"\n      class=\"mk-week-picker__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      (click)=\"clear()\"\n    >\n      <span class=\"mk-week-picker__clear-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n</div>\n\n@if (open()) {\n  <div\n    #panel\n    class=\"mk-week-picker__panel\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    (dismiss)=\"close()\"\n    [id]=\"panelId\"\n    role=\"dialog\"\n    [attr.aria-label]=\"i18n.chooseWeek\"\n  >\n    <mk-calendar\n      [value]=\"calendarValue()\"\n      [rangeMode]=\"true\"\n      [rangeStart]=\"highlightStart()\"\n      [rangeEnd]=\"highlightEnd()\"\n      (dateSelected)=\"onPick($event)\"\n      (dateHovered)=\"onHover($event)\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      [size]=\"effectiveSize()\"\n    />\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-week-picker__field{display:flex;align-items:center;width:100%;height:var(--mk-control-height-md);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-week-picker--sm) .mk-week-picker__field{height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-week-picker--lg) .mk-week-picker__field{height:var(--mk-control-height-lg)}.mk-week-picker__field:hover{border-color:var(--mk-border-strong)}.mk-week-picker__field:focus-within{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-week-picker--invalid) .mk-week-picker__field{border-color:var(--mk-danger)}:host(.mk-week-picker--invalid) .mk-week-picker__field:focus-within{outline-color:var(--mk-danger)}:host(.mk-week-picker--disabled) .mk-week-picker__field{background-color:var(--mk-surface-2);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-week-picker__trigger{display:flex;align-items:center;gap:var(--mk-space-2);flex:1 1 auto;min-width:0;height:100%;padding:0 var(--mk-space-3);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);text-align:start;background:transparent;border:0;outline:none;cursor:pointer}:host(.mk-week-picker--sm) .mk-week-picker__trigger{padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm)}:host(.mk-week-picker--lg) .mk-week-picker__trigger{padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-week-picker__trigger:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-week-picker__value{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-week-picker__value--placeholder{color:var(--mk-text-subtle)}.mk-week-picker__icon{flex:none;color:var(--mk-text-muted)}.mk-week-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex:none;height:100%;padding:0 var(--mk-space-2);color:var(--mk-text-muted);background:transparent;border:0;cursor:pointer;transition:color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-week-picker__clear:hover{color:var(--mk-text)}.mk-week-picker__clear:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1);border-radius:var(--mk-radius-sm)}.mk-week-picker__clear-icon{position:relative;width:.85rem;height:.85rem}.mk-week-picker__clear-icon:before,.mk-week-picker__clear-icon:after{content:\"\";position:absolute;top:50%;left:0;width:100%;height:2px;background-color:currentColor}.mk-week-picker__clear-icon:before{transform:rotate(45deg)}.mk-week-picker__clear-icon:after{transform:rotate(-45deg)}.mk-week-picker__panel{box-shadow:var(--mk-shadow-lg);border-radius:var(--mk-radius-lg)}@media(prefers-reduced-motion:reduce){.mk-week-picker__field,.mk-week-picker__clear{transition:none}}\n"], dependencies: [{ kind: "component", type: MkCalendar, selector: "mk-calendar", inputs: ["value", "min", "max", "firstDayOfWeek", "disabled", "invalid", "disabledDate", "size", "fullWidth", "rangeMode", "rangeStart", "rangeEnd"], outputs: ["valueChange", "dateSelected", "dateHovered"] }, { kind: "directive", type: MkAnchoredPanel, selector: "[mkAnchoredPanel]", inputs: ["mkAnchoredPanelFor", "anchorRect", "placement", "gap", "matchWidth", "flip", "clamp"], outputs: ["dismiss"], exportAs: ["mkAnchoredPanel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkWeekPicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-week-picker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MkCalendar, MkAnchoredPanel], host: {
+                        class: 'mk-week-picker',
+                        '[class.mk-week-picker--sm]': "effectiveSize() === 'sm'",
+                        '[class.mk-week-picker--lg]': "effectiveSize() === 'lg'",
+                        '[class.mk-week-picker--open]': 'open()',
+                        '[class.mk-week-picker--invalid]': 'isInvalid()',
+                        '[class.mk-week-picker--disabled]': 'isDisabled()',
+                        '(focusout)': 'onFocusOut($event)',
+                    }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MkWeekPicker),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => MkWeekPicker),
+                            multi: true,
+                        },
+                    ], template: "<div #field class=\"mk-week-picker__field\">\n  <button\n    #trigger\n    type=\"button\"\n    class=\"mk-week-picker__trigger\"\n    [id]=\"triggerId\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\"\n  >\n    @if (displayLabel()) {\n      <span class=\"mk-week-picker__value\">{{ displayLabel() }}</span>\n    } @else {\n      <span class=\"mk-week-picker__value mk-week-picker__value--placeholder\">{{\n        placeholder()\n      }}</span>\n    }\n    <svg\n      class=\"mk-week-picker__icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"18\"\n      height=\"18\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      aria-hidden=\"true\"\n    >\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"17\" rx=\"2\" />\n      <path d=\"M3 9h18M8 2v4M16 2v4\" />\n    </svg>\n  </button>\n\n  @if (showClear()) {\n    <button\n      type=\"button\"\n      class=\"mk-week-picker__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      (click)=\"clear()\"\n    >\n      <span class=\"mk-week-picker__clear-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n</div>\n\n@if (open()) {\n  <div\n    #panel\n    class=\"mk-week-picker__panel\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    (dismiss)=\"close()\"\n    [id]=\"panelId\"\n    role=\"dialog\"\n    [attr.aria-label]=\"i18n.chooseWeek\"\n  >\n    <mk-calendar\n      [value]=\"calendarValue()\"\n      [rangeMode]=\"true\"\n      [rangeStart]=\"highlightStart()\"\n      [rangeEnd]=\"highlightEnd()\"\n      (dateSelected)=\"onPick($event)\"\n      (dateHovered)=\"onHover($event)\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      [size]=\"effectiveSize()\"\n    />\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-week-picker__field{display:flex;align-items:center;width:100%;height:var(--mk-control-height-md);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-week-picker--sm) .mk-week-picker__field{height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-week-picker--lg) .mk-week-picker__field{height:var(--mk-control-height-lg)}.mk-week-picker__field:hover{border-color:var(--mk-border-strong)}.mk-week-picker__field:focus-within{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-week-picker--invalid) .mk-week-picker__field{border-color:var(--mk-danger)}:host(.mk-week-picker--invalid) .mk-week-picker__field:focus-within{outline-color:var(--mk-danger)}:host(.mk-week-picker--disabled) .mk-week-picker__field{background-color:var(--mk-surface-2);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-week-picker__trigger{display:flex;align-items:center;gap:var(--mk-space-2);flex:1 1 auto;min-width:0;height:100%;padding:0 var(--mk-space-3);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);text-align:start;background:transparent;border:0;outline:none;cursor:pointer}:host(.mk-week-picker--sm) .mk-week-picker__trigger{padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm)}:host(.mk-week-picker--lg) .mk-week-picker__trigger{padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-week-picker__trigger:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-week-picker__value{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-week-picker__value--placeholder{color:var(--mk-text-subtle)}.mk-week-picker__icon{flex:none;color:var(--mk-text-muted)}.mk-week-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex:none;height:100%;padding:0 var(--mk-space-2);color:var(--mk-text-muted);background:transparent;border:0;cursor:pointer;transition:color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-week-picker__clear:hover{color:var(--mk-text)}.mk-week-picker__clear:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1);border-radius:var(--mk-radius-sm)}.mk-week-picker__clear-icon{position:relative;width:.85rem;height:.85rem}.mk-week-picker__clear-icon:before,.mk-week-picker__clear-icon:after{content:\"\";position:absolute;top:50%;left:0;width:100%;height:2px;background-color:currentColor}.mk-week-picker__clear-icon:before{transform:rotate(45deg)}.mk-week-picker__clear-icon:after{transform:rotate(-45deg)}.mk-week-picker__panel{box-shadow:var(--mk-shadow-lg);border-radius:var(--mk-radius-lg)}@media(prefers-reduced-motion:reduce){.mk-week-picker__field,.mk-week-picker__clear{transition:none}}\n"] }]
+        }], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], showWeekNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumber", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+function minutes(d) {
+    return d.getHours() * 60 + d.getMinutes();
+}
+/**
+ * Position a day's timed events on an hour grid, packing overlaps side by
+ * side instead of stacking them: within a cluster of transitively-overlapping
+ * events each takes the lowest free lane, and every member of the cluster is
+ * widened to the same lane count so columns line up (the layout every
+ * scheduler UI uses).
+ *
+ * Pure — no Angular, no DOM — so the packing has direct unit tests.
+ */
+function layoutTimedEvents(events, day, startHour, endHour) {
+    const rangeMin = (endHour - startHour) * 60;
+    if (rangeMin <= 0)
+        return [];
+    const timed = events
+        .filter((e) => e.start && isSameDay(e.start, day))
+        .sort((a, b) => a.start.getTime() - b.start.getTime() ||
+        (b.end?.getTime() ?? 0) - (a.end?.getTime() ?? 0));
+    const placed = [];
+    let cluster = [];
+    let clusterEnd = -1;
+    const closeCluster = () => {
+        const lanes = Math.max(1, ...cluster.map((p) => p.lane + 1));
+        for (const p of cluster)
+            p.lanes = lanes;
+        cluster = [];
+        clusterEnd = -1;
+    };
+    for (const event of timed) {
+        const startMin = minutes(event.start);
+        // A missing end reads as 30 minutes — long enough to click.
+        const endMin = event.end && isSameDay(event.end, day)
+            ? Math.max(minutes(event.end), startMin + 15)
+            : startMin + 30;
+        if (cluster.length && startMin >= clusterEnd)
+            closeCluster();
+        // Lowest lane whose latest occupant has finished.
+        const laneEnds = [];
+        for (const p of cluster) {
+            laneEnds[p.lane] = Math.max(laneEnds[p.lane] ?? 0, p.endMin);
+        }
+        let lane = 0;
+        while ((laneEnds[lane] ?? 0) > startMin)
+            lane++;
+        const clampedStart = Math.max(startMin, startHour * 60);
+        const clampedEnd = Math.min(endMin, endHour * 60);
+        if (clampedEnd <= startHour * 60 || clampedStart >= endHour * 60)
+            continue;
+        const item = {
+            event,
+            startMin,
+            endMin,
+            lane,
+            lanes: 1,
+            top: ((clampedStart - startHour * 60) / rangeMin) * 100,
+            height: Math.max(((clampedEnd - clampedStart) / rangeMin) * 100, 2.5),
+        };
+        cluster.push(item);
+        placed.push(item);
+        clusterEnd = Math.max(clusterEnd, endMin);
+    }
+    if (cluster.length)
+        closeCluster();
+    return placed.map(({ startMin: _s, endMin: _e, ...p }) => p);
+}
+/** Events on `day` with no start time — rendered in the all-day strip. */
+function allDayEvents(events, day) {
+    return events.filter((e) => !e.start && isSameDay(e.date, day));
+}
+
+/** Pixels the pointer must travel before a press turns into an edit drag. */
+const DRAG_THRESHOLD = 5;
+/**
+ * Pixels a *touch* pointer may wander during the long-press delay before the
+ * press is treated as a scroll and the pending drag is abandoned.
+ */
+const TOUCH_SLOP = 10;
+/** Long-press delay (ms) before a touch pointer arms an edit drag. */
+const TOUCH_DELAY_MS = 300;
+/** Safety window (ms) for swallowing the synthetic click after a real drag. */
+const CLICK_SWALLOW_MS = 400;
+/** Minutes since local midnight. */
+function minutesOfDay(d) {
+    return d.getHours() * 60 + d.getMinutes();
+}
+/** `minutes` since midnight as a zero-padded `HH:mm` label. */
+function minutesLabel(minutes) {
+    const h = Math.floor(minutes / 60) % 24;
+    const m = Math.round(minutes % 60);
+    return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+}
+function clampNumber(value, lo, hi) {
+    return Math.min(Math.max(value, lo), Math.max(lo, hi));
+}
+/**
+ * `[startMin, endMin]` of a timed event, mirroring the layout's defaults: a
+ * missing end reads as 30 minutes, an end on the same day never less than 15.
+ */
+function eventMinutes(event) {
+    const start = event.start ? minutesOfDay(event.start) : 0;
+    const end = event.end && event.start && isSameDay(event.end, event.start)
+        ? Math.max(minutesOfDay(event.end), start + 15)
+        : start + 30;
+    return [start, end];
+}
+/**
+ * Event calendar — a month-grid scheduler view. Renders a 6×7 grid of day
+ * cells built from {@link buildMonthMatrix}; each cell lists the events whose
+ * `date` falls on that day as coloured pills, capped at `maxPerDay` with a
+ * "+N more" line for the remainder.
+ *
+ * Shares the month-grid rendering, header navigation, and weekday header of
+ * `mk-calendar` but is display-only (no date selection). Exposes the viewed
+ * month as a two-way `viewDate` model plus `dayClick` / `eventClick` outputs.
+ *
+ * With `editable`, the week/day time grids additionally support drag-to-move
+ * and drag-to-resize (pointer *and* keyboard — WCAG 2.5.7): times snap to
+ * `snapMinutes` and the would-be range is emitted via `eventMove` /
+ * `eventResize` — the calendar never mutates `events` itself.
+ *
+ * ```html
+ * <mk-event-calendar [events]="events" [(viewDate)]="month"
+ *   (eventClick)="open($event)" />
+ * ```
+ */
+class MkEventCalendar {
+    i18n = inject(MK_I18N);
+    doc = inject(DOCUMENT);
+    hostEl = inject(ElementRef).nativeElement;
+    announcer = inject(MkLiveAnnouncer);
+    /** Events to plot onto the grid. */
+    events = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "events" }] : /* istanbul ignore next */ []));
+    /** Two-way month being viewed (any day within it). Defaults to today. */
+    viewDate = model(new Date(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewDate" }] : /* istanbul ignore next */ []));
+    /** First column of the week: 0 = Sunday … 6 = Saturday. */
+    firstDayOfWeek = input(0, { ...(ngDevMode ? { debugName: "firstDayOfWeek" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Max event pills per day before collapsing the rest into "+N more". */
+    maxPerDay = input(3, { ...(ngDevMode ? { debugName: "maxPerDay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Presentation: the classic month grid, or a timed `week`/`day` grid. */
+    view = model('month', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+    /** First hour shown on the week/day time grid. */
+    dayStartHour = input(8, { ...(ngDevMode ? { debugName: "dayStartHour" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Hour the time grid ends at (exclusive). */
+    dayEndHour = input(22, { ...(ngDevMode ? { debugName: "dayEndHour" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Week/day views: allow rescheduling events by dragging a pill (move) or its
+     * bottom edge (resize end time), by pointer or keyboard. Off by default —
+     * without it the grid renders exactly as before (no handles, no ARIA
+     * additions, no drag behavior).
+     */
+    editable = input(false, { ...(ngDevMode ? { debugName: "editable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Snap grid (minutes) for drag/keyboard edits; also the minimum duration. */
+    snapMinutes = input(15, { ...(ngDevMode ? { debugName: "snapMinutes" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Emitted when a day cell is activated (click / Enter). */
+    dayClick = output();
+    /**
+     * Emitted when an event pill is clicked (does not also fire `dayClick`).
+     * Mouse-only convenience: the pills are presentational (`aria-hidden`), so
+     * keyboard / screen-reader users reach events via the day button — its label
+     * announces the day's events and activating it fires `dayClick`.
+     */
+    eventClick = output();
+    /** Emitted when the viewed range changes via the prev/next buttons. */
+    monthChange = output();
+    /** Week/day view: an empty hour slot was clicked — the slot's start instant. */
+    slotClick = output();
+    /**
+     * Editable week/day grid: an event pill was dragged (or keyboard-moved) to a
+     * new start time and/or day. Carries the would-be `start`/`end` — the
+     * calendar does **not** mutate `events`; the consumer owns the data and
+     * applies the change, typically:
+     *
+     * ```ts
+     * onMove = ({ event, start, end }: MkCalendarEventEdit) =>
+     *   (this.events = this.events.map((e) =>
+     *     e === event ? { ...e, date: start, start, end } : e,
+     *   ));
+     * ```
+     */
+    eventMove = output();
+    /**
+     * Editable week/day grid: the pill's bottom edge was dragged (or
+     * Shift+Arrow-resized) — only `end` differs, never below `snapMinutes` of
+     * duration. Same consumer-owns-the-data contract as `eventMove`.
+     */
+    eventResize = output();
+    /** id of the visible month/year label — wired as the grid's label. */
+    labelId = mkUniqueId('mk-event-calendar-label');
+    /** First day of the visible month. */
+    viewMonth = computed(() => startOfMonth(this.viewDate()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewMonth" }] : /* istanbul ignore next */ []));
+    /** Header label — month, day, or week range, matching the active view. */
+    monthLabel = computed(() => {
+        const d = this.viewDate();
+        const names = this.i18n.dateNames;
+        switch (this.view()) {
+            case 'day':
+                return formatDate(d, 'MMMM d, yyyy', names);
+            case 'week': {
+                const from = startOfWeek(d, this.firstDayOfWeek());
+                const to = addDays(from, 6);
+                return `${formatDate(from, 'MMM d', names)} – ${formatDate(to, 'MMM d, yyyy', names)}`;
+            }
+            default:
+                return formatDate(d, 'MMMM yyyy', names);
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthLabel" }] : /* istanbul ignore next */ []));
+    /** Days of the active time grid: one for `day`, seven for `week`. */
+    gridDays = computed(() => {
+        const d = startOfDay(this.viewDate());
+        if (this.view() === 'day')
+            return [d];
+        const from = startOfWeek(d, this.firstDayOfWeek());
+        return Array.from({ length: 7 }, (_, i) => addDays(from, i));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridDays" }] : /* istanbul ignore next */ []));
+    /** Hour rows of the time grid. */
+    hours = computed(() => {
+        const from = this.dayStartHour();
+        const to = this.dayEndHour();
+        return Array.from({ length: Math.max(to - from, 0) }, (_, i) => from + i);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hours" }] : /* istanbul ignore next */ []));
+    /**
+     * Timed events bucketed by their start's calendar day — a single pass over
+     * the events, shared by every column of the week/day grid instead of
+     * re-filtering (and re-sorting) the whole array once per day.
+     */
+    timedByDay = computed(() => {
+        const map = new Map();
+        for (const event of this.events()) {
+            if (!event.start)
+                continue;
+            const key = startOfDay(event.start).getTime();
+            const bucket = map.get(key);
+            if (bucket)
+                bucket.push(event);
+            else
+                map.set(key, [event]);
+        }
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timedByDay" }] : /* istanbul ignore next */ []));
+    /** Untimed events (all-day strip) bucketed by `date`'s calendar day. */
+    allDayByDay = computed(() => {
+        const map = new Map();
+        for (const event of this.events()) {
+            if (event.start)
+                continue;
+            const key = startOfDay(event.date).getTime();
+            const bucket = map.get(key);
+            if (bucket)
+                bucket.push(event);
+            else
+                map.set(key, [event]);
+        }
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allDayByDay" }] : /* istanbul ignore next */ []));
+    /**
+     * Per-day positioned events + all-day strip for the time grid. The column
+     * head (`Mon 21`) is precomputed here so the template never calls
+     * `formatDate` during change detection.
+     */
+    timedColumns = computed(() => {
+        const timedByDay = this.timedByDay();
+        const allDayByDay = this.allDayByDay();
+        const startHour = this.dayStartHour();
+        const endHour = this.dayEndHour();
+        const names = this.i18n.dateNames;
+        const today = new Date();
+        // gridDays() are `startOfDay` instants, so `getTime()` matches the keys.
+        return this.gridDays().map((day) => ({
+            day,
+            today: isSameDay(day, today),
+            head: formatDate(day, 'ddd d', names),
+            placements: layoutTimedEvents(timedByDay.get(day.getTime()) ?? [], day, startHour, endHour),
+            allDay: allDayByDay.get(day.getTime()) ?? [],
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timedColumns" }] : /* istanbul ignore next */ []));
+    hourLabel(hour) {
+        return `${String(hour).padStart(2, '0')}:00`;
+    }
+    placementTitle(p) {
+        const from = p.event.start ? minutesLabel(minutesOfDay(p.event.start)) : '';
+        return from ? `${from} ${p.event.title}` : p.event.title;
+    }
+    onSlotClick(day, hour) {
+        const at = new Date(day);
+        at.setHours(hour, 0, 0, 0);
+        this.slotClick.emit(at);
+    }
+    // ===================================================================
+    // Editable time grid — drag-to-move / drag-to-resize (pointer)
+    // ===================================================================
+    /** Template-facing state of the in-flight edit (`null` when idle). */
+    editPreview = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editPreview" }] : /* istanbul ignore next */ []));
+    /** The active pointer gesture, if any (only one at a time). */
+    pointerSession = null;
+    /** The active keyboard "move mode" session, if any. */
+    kbSession = null;
+    /** Pending rAF id for the coalesced pointer-move pass. */
+    editRaf = null;
+    pendingX = 0;
+    pendingY = 0;
+    /** Set after a real drag so the trailing synthetic click never fires `eventClick`. */
+    swallowNextClick = false;
+    pointerMoveHandler = (e) => this.onEditPointerMove(e);
+    pointerUpHandler = (e) => this.onEditPointerUp(e);
+    pointerCancelHandler = () => this.abortPointerEdit();
+    /** Escape aborts an in-flight pointer drag (document-level while dragging). */
+    escHandler = (e) => {
+        if (e.key === 'Escape' && this.pointerSession?.started) {
+            e.stopPropagation();
+            this.abortPointerEdit();
+        }
+    };
+    /**
+     * `touch-action: pan-y` keeps native scrolling alive while the long-press is
+     * pending, so once armed the drag must eat `touchmove` itself
+     * (`passive: false` — same pattern as `MkDrag`).
+     */
+    touchMoveEater = (e) => {
+        if (this.pointerSession?.armed && e.cancelable)
+            e.preventDefault();
+    };
+    /** Android fires `contextmenu` on long-press — keep it off the gesture. */
+    contextMenuHandler = (e) => e.preventDefault();
+    onBlockPointerDown(event, p, colIndex) {
+        const e = event;
+        if (!this.editable() || this.pointerSession || this.kbSession)
+            return;
+        if (e.button !== undefined && e.button !== 0)
+            return;
+        const el = e.currentTarget;
+        const kind = e.target?.closest?.('.mk-event-calendar__resize-handle')
+            ? 'resize'
+            : 'move';
+        const [startMin, endMin] = eventMinutes(p.event);
+        this.pointerSession = {
+            kind,
+            event: p.event,
+            el,
+            pointerId: e.pointerId,
+            started: false,
+            armed: false,
+            startX: e.clientX,
+            startY: e.clientY,
+            touchTimer: null,
+            savedTouchAction: null,
+            colRects: [],
+            pxPerMin: 1,
+            origDay: colIndex,
+            origStartMin: startMin,
+            origEndMin: endMin,
+            day: colIndex,
+            startMin,
+            endMin,
+        };
+        try {
+            el.setPointerCapture(e.pointerId);
+        }
+        catch {
+            // Pointer already lifted (fast tap) — nothing left to capture.
+        }
+        el.addEventListener('pointermove', this.pointerMoveHandler);
+        el.addEventListener('pointerup', this.pointerUpHandler);
+        el.addEventListener('pointercancel', this.pointerCancelHandler);
+        if (e.pointerType === 'touch') {
+            // Touch long-press arming, as in MkDrag: until the timer fires this
+            // press may just be the start of a scroll, so nothing is prevented yet.
+            el.addEventListener('touchmove', this.touchMoveEater, { passive: false });
+            el.addEventListener('contextmenu', this.contextMenuHandler);
+            this.pointerSession.touchTimer =
+                this.doc.defaultView?.setTimeout(() => this.armTouch(), TOUCH_DELAY_MS) ??
+                    null;
+        }
+        else {
+            // Mouse / pen: armed immediately, the 5px threshold does the rest.
+            this.pointerSession.armed = true;
+        }
+    }
+    /** The long-press delay elapsed with the finger still down — arm the drag. */
+    armTouch() {
+        const s = this.pointerSession;
+        if (!s)
+            return;
+        s.touchTimer = null;
+        s.armed = true;
+        s.savedTouchAction = s.el.style.touchAction;
+        s.el.style.touchAction = 'none';
+    }
+    onEditPointerMove(e) {
+        const s = this.pointerSession;
+        if (!s || e.pointerId !== s.pointerId)
+            return;
+        if (!s.armed) {
+            // Long-press still pending: real movement means the user is scrolling.
+            if (Math.hypot(e.clientX - s.startX, e.clientY - s.startY) > TOUCH_SLOP) {
+                this.teardownPointer(false);
+            }
+            return;
+        }
+        if (!s.started) {
+            if (Math.hypot(e.clientX - s.startX, e.clientY - s.startY) < DRAG_THRESHOLD) {
+                return;
+            }
+            this.beginEdit(s);
+        }
+        e.preventDefault();
+        // Only record the coordinates — the math + signal write is rAF-coalesced
+        // (one pass per frame, same pattern as the table's column resize).
+        this.pendingX = e.clientX;
+        this.pendingY = e.clientY;
+        if (this.editRaf !== null)
+            return;
+        const raf = this.doc.defaultView?.requestAnimationFrame(() => {
+            this.editRaf = null;
+            this.applyPendingEdit();
+        });
+        if (raf === undefined)
+            this.applyPendingEdit(); // no window — degrade to sync
+        else
+            this.editRaf = raf;
+    }
+    /**
+     * The drag crossed the threshold — snapshot geometry once (column rects and
+     * the px↔minute scale); every subsequent move works off this cache, so a
+     * drag never forces layout.
+     */
+    beginEdit(s) {
+        s.started = true;
+        const cols = this.hostEl.querySelectorAll('.mk-event-calendar__col');
+        s.colRects = Array.from(cols, (c) => c.getBoundingClientRect());
+        const rangeMin = Math.max((this.dayEndHour() - this.dayStartHour()) * 60, 1);
+        s.pxPerMin = (s.colRects[s.origDay]?.height || rangeMin) / rangeMin;
+        this.doc.addEventListener('keydown', this.escHandler, true);
+        this.updatePreview(s);
+    }
+    /** Per-frame move pass: snap, clamp, and publish the preview signal. */
+    applyPendingEdit() {
+        const s = this.pointerSession;
+        if (!s || !s.started)
+            return;
+        const snap = Math.max(1, this.snapMinutes());
+        const gridStart = this.dayStartHour() * 60;
+        const gridEnd = this.dayEndHour() * 60;
+        const deltaMin = (this.pendingY - s.startY) / s.pxPerMin;
+        const snapped = Math.round(deltaMin / snap) * snap;
+        if (s.kind === 'move') {
+            const duration = s.origEndMin - s.origStartMin;
+            s.startMin = clampNumber(s.origStartMin + snapped, gridStart, Math.max(gridStart, gridEnd - duration));
+            s.endMin = s.startMin + duration;
+            s.day = this.columnAt(s, this.pendingX);
+        }
+        else {
+            s.endMin = clampNumber(s.origEndMin + snapped, s.startMin + snap, gridEnd);
+        }
+        this.updatePreview(s);
+    }
+    /** Column index under `x`, from the rects snapshotted at lift. */
+    columnAt(s, x) {
+        const rects = s.colRects;
+        if (!rects.length || !rects[s.origDay]?.width)
+            return s.day;
+        for (let i = 0; i < rects.length; i++) {
+            if (x >= rects[i].left && x < rects[i].right)
+                return i;
+        }
+        return x < rects[0].left ? 0 : rects.length - 1;
+    }
+    onEditPointerUp(e) {
+        const s = this.pointerSession;
+        if (!s || e.pointerId !== s.pointerId)
+            return;
+        // Flush (don't drop) the last coalesced move so the drop lands exactly
+        // where the pointer ended, not on the last painted frame.
+        if (this.editRaf !== null) {
+            this.doc.defaultView?.cancelAnimationFrame(this.editRaf);
+            this.editRaf = null;
+            this.applyPendingEdit();
+        }
+        const started = s.started;
+        this.teardownPointer(started);
+        if (!started)
+            return; // was a click, never a drag — eventClick may follow
+        this.editPreview.set(null);
+        this.commitEdit(s, 'pointer');
+    }
+    /** Escape / pointercancel: the pill snaps back, nothing is emitted. */
+    abortPointerEdit() {
+        const s = this.pointerSession;
+        if (!s)
+            return;
+        const started = s.started;
+        this.teardownPointer(started);
+        this.editPreview.set(null);
+        if (started)
+            this.announceCancelled('polite');
+    }
+    /** Undo everything `onBlockPointerDown`/`beginEdit` set up. */
+    teardownPointer(swallowClick) {
+        const s = this.pointerSession;
+        if (!s)
+            return;
+        this.pointerSession = null;
+        if (this.editRaf !== null) {
+            this.doc.defaultView?.cancelAnimationFrame(this.editRaf);
+            this.editRaf = null;
+        }
+        const el = s.el;
+        if (s.pointerId !== null) {
+            try {
+                el.releasePointerCapture(s.pointerId);
+            }
+            catch {
+                // Capture may already be gone.
+            }
+        }
+        el.removeEventListener('pointermove', this.pointerMoveHandler);
+        el.removeEventListener('pointerup', this.pointerUpHandler);
+        el.removeEventListener('pointercancel', this.pointerCancelHandler);
+        el.removeEventListener('touchmove', this.touchMoveEater);
+        el.removeEventListener('contextmenu', this.contextMenuHandler);
+        if (s.touchTimer !== null)
+            this.doc.defaultView?.clearTimeout(s.touchTimer);
+        if (s.savedTouchAction !== null)
+            el.style.touchAction = s.savedTouchAction;
+        this.doc.removeEventListener('keydown', this.escHandler, true);
+        if (swallowClick) {
+            // The browser fires a synthetic click right after pointerup, which would
+            // re-fire `eventClick` from a drag (the carousel's click-swallower
+            // pattern, kept as a flag because the Angular listener on the same
+            // element registered first). The timeout covers gestures with no click.
+            this.swallowNextClick = true;
+            this.doc.defaultView?.setTimeout(() => (this.swallowNextClick = false), CLICK_SWALLOW_MS);
+        }
+    }
+    // ===================================================================
+    // Editable time grid — keyboard move mode (WCAG 2.5.7)
+    // ===================================================================
+    onBlockKeydown(event, p, colIndex) {
+        const e = event;
+        if (!this.editable())
+            return;
+        const s = this.kbSession;
+        if (!s || s.event !== p.event) {
+            // Enter/Space arms "move mode" (and, via preventDefault, keeps the
+            // button's synthetic click — and thus `eventClick` — from firing).
+            if ((e.key === 'Enter' || e.key === ' ') && !this.pointerSession) {
+                e.preventDefault();
+                this.armKeyboard(e.currentTarget, p, colIndex);
+            }
+            return;
+        }
+        const snap = Math.max(1, this.snapMinutes());
+        const gridStart = this.dayStartHour() * 60;
+        const gridEnd = this.dayEndHour() * 60;
+        switch (e.key) {
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                this.commitKeyboard();
+                break;
+            case 'Escape':
+                e.preventDefault();
+                this.cancelKeyboard();
+                break;
+            case 'ArrowUp':
+            case 'ArrowDown': {
+                e.preventDefault();
+                const dir = e.key === 'ArrowUp' ? -1 : 1;
+                if (e.shiftKey) {
+                    // Shift+Up/Down resizes the end, never below the snap duration.
+                    s.endMin = clampNumber(s.endMin + dir * snap, s.startMin + snap, gridEnd);
+                }
+                else {
+                    const duration = s.endMin - s.startMin;
+                    s.startMin = clampNumber(s.startMin + dir * snap, gridStart, Math.max(gridStart, gridEnd - duration));
+                    s.endMin = s.startMin + duration;
+                }
+                this.updatePreview(s);
+                this.announceStep(s);
+                break;
+            }
+            case 'ArrowLeft':
+            case 'ArrowRight': {
+                e.preventDefault();
+                const dir = e.key === 'ArrowLeft' ? -1 : 1;
+                s.day = clampNumber(s.day + dir, 0, this.gridDays().length - 1);
+                this.updatePreview(s);
+                this.announceStep(s);
+                break;
+            }
+            default:
+                break;
+        }
+    }
+    /** Losing focus mid-move cancels the keyboard edit (no stuck state). */
+    onBlockBlur() {
+        if (this.kbSession)
+            this.cancelKeyboard();
+    }
+    armKeyboard(el, p, colIndex) {
+        const [startMin, endMin] = eventMinutes(p.event);
+        const cols = this.hostEl.querySelectorAll('.mk-event-calendar__col');
+        const colRects = Array.from(cols, (c) => c.getBoundingClientRect());
+        const rangeMin = Math.max((this.dayEndHour() - this.dayStartHour()) * 60, 1);
+        const s = {
+            kind: 'move',
+            event: p.event,
+            el,
+            pointerId: null,
+            started: true,
+            armed: true,
+            startX: 0,
+            startY: 0,
+            touchTimer: null,
+            savedTouchAction: null,
+            colRects,
+            pxPerMin: (colRects[colIndex]?.height || rangeMin) / rangeMin,
+            origDay: colIndex,
+            origStartMin: startMin,
+            origEndMin: endMin,
+            day: colIndex,
+            startMin,
+            endMin,
+        };
+        this.kbSession = s;
+        this.updatePreview(s);
+        this.announcer.announce(this.i18n.eventCalendarGrabbed(p.event.title, minutesLabel(startMin), minutesLabel(endMin)), 'assertive');
+    }
+    commitKeyboard() {
+        const s = this.kbSession;
+        if (!s)
+            return;
+        this.kbSession = null;
+        this.editPreview.set(null);
+        this.commitEdit(s, 'keyboard');
+    }
+    cancelKeyboard() {
+        this.kbSession = null;
+        this.editPreview.set(null);
+        this.announceCancelled('assertive');
+    }
+    // ===================================================================
+    // Editable time grid — shared commit / preview / template helpers
+    // ===================================================================
+    /**
+     * Emit the edited range (if anything actually changed): `eventResize` when
+     * only the end moved, `eventMove` otherwise. The `events` input is never
+     * touched — applying the change is the consumer's job.
+     */
+    commitEdit(s, source) {
+        const dayChanged = s.day !== s.origDay;
+        const startChanged = s.startMin !== s.origStartMin;
+        const endChanged = s.endMin !== s.origEndMin;
+        if (!dayChanged && !startChanged && !endChanged)
+            return;
+        const day = this.gridDays()[s.day] ?? this.gridDays()[s.origDay];
+        const start = new Date(day);
+        start.setHours(0, s.startMin, 0, 0);
+        const end = new Date(day);
+        end.setHours(0, s.endMin, 0, 0);
+        const detail = { event: s.event, start, end };
+        const resize = !dayChanged && !startChanged;
+        if (resize)
+            this.eventResize.emit(detail);
+        else
+            this.eventMove.emit(detail);
+        this.announcer.announce(resize
+            ? this.i18n.eventCalendarResized(s.event.title, minutesLabel(s.endMin))
+            : this.i18n.eventCalendarMoved(s.event.title, formatDate(day, 'MMMM d, yyyy', this.i18n.dateNames), minutesLabel(s.startMin), minutesLabel(s.endMin)), source === 'keyboard' ? 'assertive' : 'polite');
+    }
+    /** Publish the session's current target as template-facing preview state. */
+    updatePreview(s) {
+        const gridStart = this.dayStartHour() * 60;
+        const gridEnd = this.dayEndHour() * 60;
+        const rangeMin = Math.max(gridEnd - gridStart, 1);
+        const clampedStart = Math.max(s.startMin, gridStart);
+        const clampedEnd = Math.min(s.endMin, gridEnd);
+        const dx = (s.colRects[s.day]?.left ?? 0) - (s.colRects[s.origDay]?.left ?? 0);
+        const dy = (s.startMin - s.origStartMin) * s.pxPerMin;
+        const durationChanged = s.endMin - s.startMin !== s.origEndMin - s.origStartMin;
+        this.editPreview.set({
+            event: s.event,
+            day: s.day,
+            transform: `translate(${dx}px, ${dy}px)`,
+            heightPct: durationChanged
+                ? Math.max(((clampedEnd - clampedStart) / rangeMin) * 100, 2.5)
+                : null,
+            label: `${minutesLabel(s.startMin)} – ${minutesLabel(s.endMin)}`,
+            top: ((clampedStart - gridStart) / rangeMin) * 100,
+            outlineHeight: Math.max(((clampedEnd - clampedStart) / rangeMin) * 100, 1),
+        });
+    }
+    announceCancelled(politeness) {
+        this.announcer.announce(this.i18n.eventCalendarEditCancelled, politeness);
+    }
+    /** Position update after each keyboard step. */
+    announceStep(s) {
+        const day = this.gridDays()[s.day];
+        this.announcer.announce(this.i18n.eventCalendarPosition(s.event.title, formatDate(day, 'MMMM d, yyyy', this.i18n.dateNames), minutesLabel(s.startMin), minutesLabel(s.endMin)), 'assertive');
+    }
+    /** Is this placement the pill currently being edited? */
+    isEditing(p) {
+        return this.editPreview()?.event === p.event;
+    }
+    /** Lift transform for the dragged pill (`null` when idle). */
+    blockTransform(p) {
+        const d = this.editPreview();
+        return d && d.event === p.event ? d.transform : null;
+    }
+    /** Height (%) — the resize preview overrides the layout's height. */
+    blockHeight(p) {
+        const d = this.editPreview();
+        return d && d.event === p.event && d.heightPct !== null ? d.heightPct : p.height;
+    }
+    /** Would-be time range shown on the pill while it is being edited. */
+    dragLabelFor(p) {
+        const d = this.editPreview();
+        return d && d.event === p.event ? d.label : null;
+    }
+    /** Drop-outline geometry when the edit currently targets column `i`. */
+    dropOutlineFor(i) {
+        const d = this.editPreview();
+        return d && d.day === i ? d : null;
+    }
+    /**
+     * Accessible name for an editable pill — the title plus its time range
+     * (composed with, not replacing, the visible title text and tooltip).
+     */
+    blockAriaLabel(p) {
+        const [startMin, endMin] = eventMinutes(p.event);
+        return `${p.event.title}, ${minutesLabel(startMin)} – ${minutesLabel(endMin)}`;
+    }
+    /** `aria-roledescription` for editable pills. */
+    movableRoledescription = this.i18n.eventCalendarMovableEvent;
+    ngOnDestroy() {
+        if (this.pointerSession)
+            this.teardownPointer(false);
+        this.kbSession = null;
+    }
+    /** Raw 6×7 grid of dates for the visible month. */
+    weeks = computed(() => buildMonthMatrix(this.viewDate(), this.firstDayOfWeek()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weeks" }] : /* istanbul ignore next */ []));
+    /** Weekday column headers ordered from `firstDayOfWeek`. */
+    weekdays = computed(() => this.weeks()[0].map((d) => ({
+        short: formatDate(d, 'ddd', this.i18n.dateNames),
+        full: getWeekdayFullName(d, this.i18n.dateNames),
+    })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []));
+    /** Events grouped by local calendar day, keyed by `startOfDay` timestamp. */
+    eventsByDay = computed(() => {
+        const map = new Map();
+        for (const event of this.events()) {
+            const key = startOfDay(event.date).getTime();
+            const bucket = map.get(key);
+            if (bucket)
+                bucket.push(event);
+            else
+                map.set(key, [event]);
+        }
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "eventsByDay" }] : /* istanbul ignore next */ []));
+    /** 6×7 grid of day cells with their (capped) events resolved. */
+    weekCells = computed(() => {
+        const month = this.viewMonth();
+        const today = new Date();
+        const max = this.maxPerDay();
+        const byDay = this.eventsByDay();
+        return this.weeks().map((week) => week.map((date) => {
+            const dayEvents = byDay.get(startOfDay(date).getTime()) ?? [];
+            const cell = {
+                date,
+                outside: !isSameMonth(date, month),
+                today: isSameDay(date, today),
+                visible: dayEvents.slice(0, max),
+                overflow: Math.max(0, dayEvents.length - max),
+            };
+            // Label formatted once per rebuild, not on every CD pass (42 cells).
+            return { ...cell, label: this.dayLabel(cell) };
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekCells" }] : /* istanbul ignore next */ []));
+    /**
+     * Screen-reader label for a day cell. The button's `aria-label` replaces its
+     * visual content, so the label also announces the day's events — count plus
+     * up to three titles — e.g. `July 9, 2026, 2 events: Standup, Demo`.
+     * Precomputed into {@link MkDayCell#label} by `weekCells`.
+     */
+    dayLabel(cell) {
+        const formatted = formatDate(cell.date, 'MMMM d, yyyy', this.i18n.dateNames);
+        const count = cell.visible.length + cell.overflow;
+        if (count === 0)
+            return formatted;
+        const titles = cell.visible
+            .slice(0, 3)
+            .map((e) => e.title)
+            .join(', ');
+        return `${formatted}, ${this.i18n.dayEvents(count, titles)}`;
+    }
+    prevMonth() {
+        this.shiftMonth(-1);
+    }
+    nextMonth() {
+        this.shiftMonth(1);
+    }
+    shiftMonth(delta) {
+        const view = this.view();
+        const next = view === 'month'
+            ? addMonths(this.viewDate(), delta)
+            : addDays(this.viewDate(), delta * (view === 'week' ? 7 : 1));
+        this.viewDate.set(next);
+        this.monthChange.emit(next);
+    }
+    onDayClick(d) {
+        this.dayClick.emit(d);
+    }
+    onEventClick(event, calendarEvent) {
+        event.stopPropagation();
+        // A real drag just ended — the browser's trailing synthetic click must not
+        // read as an event activation.
+        if (this.swallowNextClick) {
+            this.swallowNextClick = false;
+            event.preventDefault();
+            return;
+        }
+        this.eventClick.emit(calendarEvent);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkEventCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkEventCalendar, isStandalone: true, selector: "mk-event-calendar", inputs: { events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, viewDate: { classPropertyName: "viewDate", publicName: "viewDate", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, maxPerDay: { classPropertyName: "maxPerDay", publicName: "maxPerDay", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, dayStartHour: { classPropertyName: "dayStartHour", publicName: "dayStartHour", isSignal: true, isRequired: false, transformFunction: null }, dayEndHour: { classPropertyName: "dayEndHour", publicName: "dayEndHour", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, snapMinutes: { classPropertyName: "snapMinutes", publicName: "snapMinutes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewDate: "viewDateChange", view: "viewChange", dayClick: "dayClick", eventClick: "eventClick", monthChange: "monthChange", slotClick: "slotClick", eventMove: "eventMove", eventResize: "eventResize" }, host: { classAttribute: "mk-event-calendar" }, ngImport: i0, template: "<div class=\"mk-event-calendar__header\">\n  <button\n    type=\"button\"\n    class=\"mk-event-calendar__nav\"\n    [attr.aria-label]=\"i18n.previousMonth\"\n    (click)=\"prevMonth()\"\n  >\n    <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n      <path\n        d=\"M15 5l-7 7 7 7\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  </button>\n\n  <span class=\"mk-event-calendar__label\" [id]=\"labelId\" aria-live=\"polite\">{{\n    monthLabel()\n  }}</span>\n\n  <button\n    type=\"button\"\n    class=\"mk-event-calendar__nav\"\n    [attr.aria-label]=\"i18n.nextMonth\"\n    (click)=\"nextMonth()\"\n  >\n    <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n      <path\n        d=\"M9 5l7 7-7 7\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  </button>\n</div>\n\n@if (view() === 'month') {\n<!--\n  The days are a plain list of buttons (role=\"group\"), not an ARIA grid \u2014 there\n  is no roving-tabindex arrow navigation here, so grid semantics would be wrong.\n-->\n<div class=\"mk-event-calendar__grid\" role=\"group\" [attr.aria-labelledby]=\"labelId\">\n  <div class=\"mk-event-calendar__weekdays\" aria-hidden=\"true\">\n    @for (wd of weekdays(); track $index) {\n      <span class=\"mk-event-calendar__weekday\">\n        <abbr [title]=\"wd.full\">{{ wd.short }}</abbr>\n      </span>\n    }\n  </div>\n\n  @for (week of weekCells(); track $index) {\n    <div class=\"mk-event-calendar__week\">\n      @for (cell of week; track cell.date.getTime()) {\n        <button\n          type=\"button\"\n          class=\"mk-event-calendar__cell\"\n          [class.mk-event-calendar__cell--outside]=\"cell.outside\"\n          [class.mk-event-calendar__cell--today]=\"cell.today\"\n          [attr.aria-label]=\"cell.label\"\n          [attr.aria-current]=\"cell.today ? 'date' : null\"\n          (click)=\"onDayClick(cell.date)\"\n        >\n          <span class=\"mk-event-calendar__day-num\">{{\n            cell.date.getDate()\n          }}</span>\n\n          <!--\n            Presentational for assistive tech: the day button's aria-label\n            already announces the events, and nested interactive content inside\n            a button is invalid. The pill (click) is a mouse-only shortcut to\n            `eventClick`; keyboard users activate the day (`dayClick`) instead.\n          -->\n          <span class=\"mk-event-calendar__events\" aria-hidden=\"true\">\n            @for (event of cell.visible; track $index) {\n              <span\n                class=\"mk-event-calendar__pill\"\n                [style.background-color]=\"event.color || 'var(--mk-primary)'\"\n                [title]=\"event.title\"\n                (click)=\"onEventClick($event, event)\"\n              >\n                {{ event.title }}\n              </span>\n            }\n            @if (cell.overflow > 0) {\n              <span class=\"mk-event-calendar__more\">{{\n                i18n.moreEvents(cell.overflow)\n              }}</span>\n            }\n          </span>\n        </button>\n      }\n    </div>\n  }\n</div>\n} @else {\n  <div\n    class=\"mk-event-calendar__timegrid\"\n    role=\"group\"\n    [attr.aria-labelledby]=\"labelId\"\n  >\n    @if (view() === 'week') {\n      <div class=\"mk-event-calendar__timegrid-head\" aria-hidden=\"true\">\n        <span class=\"mk-event-calendar__gutter-spacer\"></span>\n        @for (col of timedColumns(); track col.day.getTime()) {\n          <span\n            class=\"mk-event-calendar__col-head\"\n            [class.mk-event-calendar__col-head--today]=\"col.today\"\n          >\n            {{ col.head }}\n          </span>\n        }\n      </div>\n    }\n\n    <div class=\"mk-event-calendar__timegrid-body\">\n      <div class=\"mk-event-calendar__gutter\" aria-hidden=\"true\">\n        @for (h of hours(); track h) {\n          <span class=\"mk-event-calendar__hour-label\">{{ hourLabel(h) }}</span>\n        }\n      </div>\n\n      @for (col of timedColumns(); track col.day.getTime(); let ci = $index) {\n        <div\n          class=\"mk-event-calendar__col\"\n          [class.mk-event-calendar__col--today]=\"col.today\"\n        >\n          @for (h of hours(); track h) {\n            <button\n              type=\"button\"\n              class=\"mk-event-calendar__slot\"\n              [attr.aria-label]=\"col.head + ' ' + hourLabel(h)\"\n              (click)=\"onSlotClick(col.day, h)\"\n            ></button>\n          }\n\n          @for (p of col.placements; track $index) {\n            <button\n              type=\"button\"\n              class=\"mk-event-calendar__block\"\n              [class.mk-event-calendar__block--editable]=\"editable()\"\n              [class.mk-event-calendar__block--dragging]=\"isEditing(p)\"\n              [style.top.%]=\"p.top\"\n              [style.height.%]=\"blockHeight(p)\"\n              [style.left.%]=\"(100 / p.lanes) * p.lane\"\n              [style.width.%]=\"100 / p.lanes\"\n              [style.transform]=\"blockTransform(p)\"\n              [style.background-color]=\"p.event.color || 'var(--mk-primary)'\"\n              [title]=\"placementTitle(p)\"\n              [attr.aria-label]=\"editable() ? blockAriaLabel(p) : null\"\n              [attr.aria-roledescription]=\"editable() ? movableRoledescription : null\"\n              (click)=\"onEventClick($event, p.event)\"\n              (pointerdown)=\"onBlockPointerDown($event, p, ci)\"\n              (keydown)=\"onBlockKeydown($event, p, ci)\"\n              (blur)=\"onBlockBlur()\"\n            >\n              @if (dragLabelFor(p); as lbl) {\n                <span class=\"mk-event-calendar__drag-time\" aria-hidden=\"true\">{{\n                  lbl\n                }}</span>\n              }\n              {{ p.event.title }}\n              @if (editable()) {\n                <span\n                  class=\"mk-event-calendar__resize-handle\"\n                  aria-hidden=\"true\"\n                ></span>\n              }\n            </button>\n          }\n\n          @if (dropOutlineFor(ci); as outline) {\n            <div\n              class=\"mk-event-calendar__drop-outline\"\n              aria-hidden=\"true\"\n              [style.top.%]=\"outline.top\"\n              [style.height.%]=\"outline.outlineHeight\"\n            ></div>\n          }\n\n          @if (col.allDay.length) {\n            <span class=\"mk-event-calendar__all-day\" aria-hidden=\"true\">\n              @for (event of col.allDay; track $index) {\n                <span\n                  class=\"mk-event-calendar__pill\"\n                  [style.background-color]=\"event.color || 'var(--mk-primary)'\"\n                  [title]=\"event.title\"\n                  (click)=\"onEventClick($event, event)\"\n                >\n                  {{ event.title }}\n                </span>\n              }\n            </span>\n          }\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;padding:var(--mk-space-4);font-family:var(--mk-font-sans);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md)}.mk-event-calendar__header{display:flex;align-items:center;gap:var(--mk-space-1);margin-bottom:var(--mk-space-3)}.mk-event-calendar__label{flex:1 1 auto;text-align:center;font-weight:var(--mk-font-weight-semibold);font-size:var(--mk-font-size-md);white-space:nowrap}.mk-event-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--mk-control-height-sm);height:var(--mk-control-height-sm);flex:none;color:var(--mk-text-muted);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-event-calendar__nav:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-event-calendar__nav:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-event-calendar__nav svg{display:block}.mk-event-calendar__weekdays,.mk-event-calendar__week{display:grid;grid-template-columns:repeat(7,1fr)}.mk-event-calendar__weekday{padding:0 0 var(--mk-space-2);text-align:center;font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold);letter-spacing:var(--mk-letter-spacing-wide);text-transform:uppercase;color:var(--mk-text-subtle)}.mk-event-calendar__weekday abbr{text-decoration:none;cursor:default}.mk-event-calendar__cell{display:flex;flex-direction:column;align-items:stretch;gap:var(--mk-space-1);min-height:5.5rem;padding:var(--mk-space-1);font-family:inherit;text-align:start;color:var(--mk-text);background:transparent;border:var(--mk-border-width) solid var(--mk-border-subtle);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-event-calendar__cell:hover{background-color:var(--mk-hover-overlay)}.mk-event-calendar__cell:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1)}.mk-event-calendar__cell--outside{color:var(--mk-text-muted);background-color:var(--mk-surface-2)}.mk-event-calendar__day-num{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:1.5rem;padding:0 .25rem;font-size:var(--mk-font-size-sm);line-height:1;border-radius:var(--mk-radius-md)}.mk-event-calendar__cell--today .mk-event-calendar__day-num{color:var(--mk-primary-contrast);background-color:var(--mk-primary);font-weight:var(--mk-font-weight-semibold)}.mk-event-calendar__events{display:flex;flex-direction:column;gap:2px;min-width:0}.mk-event-calendar__pill{display:block;overflow:hidden;padding:1px var(--mk-space-1);font-size:var(--mk-font-size-xs);line-height:1.4;color:var(--mk-primary-contrast);white-space:nowrap;text-overflow:ellipsis;border-radius:var(--mk-radius-md);cursor:pointer}.mk-event-calendar__more{font-size:var(--mk-font-size-xs);color:var(--mk-text-muted)}@media(prefers-reduced-motion:reduce){.mk-event-calendar__nav,.mk-event-calendar__cell{transition:none}}.mk-event-calendar__timegrid{border:var(--mk-border-width) solid var(--mk-border-subtle);border-radius:var(--mk-radius-md);overflow:hidden}.mk-event-calendar__timegrid-head{display:flex;border-bottom:var(--mk-border-width) solid var(--mk-border-subtle);background:var(--mk-surface-2)}.mk-event-calendar__gutter-spacer{flex:0 0 3.25rem}.mk-event-calendar__col-head{flex:1;padding:var(--mk-space-2);text-align:center;font-size:var(--mk-font-size-xs);color:var(--mk-text-muted)}.mk-event-calendar__col-head--today{color:var(--mk-primary);font-weight:var(--mk-font-weight-semibold)}.mk-event-calendar__timegrid-body{display:flex}.mk-event-calendar__gutter{flex:0 0 3.25rem;display:flex;flex-direction:column}.mk-event-calendar__hour-label{flex:1 0 3rem;padding:2px var(--mk-space-2) 0 0;text-align:right;font-size:var(--mk-font-size-xs);color:var(--mk-text-subtle)}.mk-event-calendar__col{position:relative;flex:1;display:flex;flex-direction:column;border-inline-start:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-event-calendar__col--today{background:color-mix(in srgb,var(--mk-primary) 4%,transparent)}.mk-event-calendar__slot{flex:1 0 3rem;border:0;border-top:var(--mk-border-width) solid var(--mk-border-subtle);background:transparent;cursor:pointer;padding:0}.mk-event-calendar__slot:hover{background:var(--mk-hover-overlay)}.mk-event-calendar__slot:focus-visible{outline:2px solid var(--mk-focus-ring);outline-offset:-2px}.mk-event-calendar__block{position:absolute;z-index:1;overflow:hidden;margin:1px;padding:2px var(--mk-space-1);border:0;border-radius:var(--mk-radius-sm);color:var(--mk-primary-contrast);font-size:var(--mk-font-size-xs);text-align:start;cursor:pointer;min-height:1rem}.mk-event-calendar__block:focus-visible{outline:2px solid var(--mk-focus-ring);outline-offset:1px}.mk-event-calendar__block--editable{touch-action:pan-y;-webkit-user-select:none;user-select:none}.mk-event-calendar__block--dragging{z-index:3;opacity:.85;box-shadow:var(--mk-shadow-lg);will-change:transform}.mk-event-calendar__drag-time{display:block;font-weight:var(--mk-font-weight-semibold);white-space:nowrap}.mk-event-calendar__resize-handle{position:absolute;inset-inline:0;bottom:0;height:6px;cursor:ns-resize}@media(pointer:coarse){.mk-event-calendar__resize-handle:before{content:\"\";position:absolute;inset:min(0px,(100% - 24px) / 2)}}.mk-event-calendar__drop-outline{position:absolute;inset-inline:1px;z-index:2;pointer-events:none;border:var(--mk-border-width-strong) dashed var(--mk-primary);border-radius:var(--mk-radius-sm);background:color-mix(in srgb,var(--mk-primary) 8%,transparent)}.mk-event-calendar__all-day{position:absolute;inset-inline:2px;top:2px;z-index:2;display:flex;gap:2px;flex-wrap:wrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkEventCalendar, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-event-calendar', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-event-calendar',
+                    }, template: "<div class=\"mk-event-calendar__header\">\n  <button\n    type=\"button\"\n    class=\"mk-event-calendar__nav\"\n    [attr.aria-label]=\"i18n.previousMonth\"\n    (click)=\"prevMonth()\"\n  >\n    <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n      <path\n        d=\"M15 5l-7 7 7 7\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  </button>\n\n  <span class=\"mk-event-calendar__label\" [id]=\"labelId\" aria-live=\"polite\">{{\n    monthLabel()\n  }}</span>\n\n  <button\n    type=\"button\"\n    class=\"mk-event-calendar__nav\"\n    [attr.aria-label]=\"i18n.nextMonth\"\n    (click)=\"nextMonth()\"\n  >\n    <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n      <path\n        d=\"M9 5l7 7-7 7\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  </button>\n</div>\n\n@if (view() === 'month') {\n<!--\n  The days are a plain list of buttons (role=\"group\"), not an ARIA grid \u2014 there\n  is no roving-tabindex arrow navigation here, so grid semantics would be wrong.\n-->\n<div class=\"mk-event-calendar__grid\" role=\"group\" [attr.aria-labelledby]=\"labelId\">\n  <div class=\"mk-event-calendar__weekdays\" aria-hidden=\"true\">\n    @for (wd of weekdays(); track $index) {\n      <span class=\"mk-event-calendar__weekday\">\n        <abbr [title]=\"wd.full\">{{ wd.short }}</abbr>\n      </span>\n    }\n  </div>\n\n  @for (week of weekCells(); track $index) {\n    <div class=\"mk-event-calendar__week\">\n      @for (cell of week; track cell.date.getTime()) {\n        <button\n          type=\"button\"\n          class=\"mk-event-calendar__cell\"\n          [class.mk-event-calendar__cell--outside]=\"cell.outside\"\n          [class.mk-event-calendar__cell--today]=\"cell.today\"\n          [attr.aria-label]=\"cell.label\"\n          [attr.aria-current]=\"cell.today ? 'date' : null\"\n          (click)=\"onDayClick(cell.date)\"\n        >\n          <span class=\"mk-event-calendar__day-num\">{{\n            cell.date.getDate()\n          }}</span>\n\n          <!--\n            Presentational for assistive tech: the day button's aria-label\n            already announces the events, and nested interactive content inside\n            a button is invalid. The pill (click) is a mouse-only shortcut to\n            `eventClick`; keyboard users activate the day (`dayClick`) instead.\n          -->\n          <span class=\"mk-event-calendar__events\" aria-hidden=\"true\">\n            @for (event of cell.visible; track $index) {\n              <span\n                class=\"mk-event-calendar__pill\"\n                [style.background-color]=\"event.color || 'var(--mk-primary)'\"\n                [title]=\"event.title\"\n                (click)=\"onEventClick($event, event)\"\n              >\n                {{ event.title }}\n              </span>\n            }\n            @if (cell.overflow > 0) {\n              <span class=\"mk-event-calendar__more\">{{\n                i18n.moreEvents(cell.overflow)\n              }}</span>\n            }\n          </span>\n        </button>\n      }\n    </div>\n  }\n</div>\n} @else {\n  <div\n    class=\"mk-event-calendar__timegrid\"\n    role=\"group\"\n    [attr.aria-labelledby]=\"labelId\"\n  >\n    @if (view() === 'week') {\n      <div class=\"mk-event-calendar__timegrid-head\" aria-hidden=\"true\">\n        <span class=\"mk-event-calendar__gutter-spacer\"></span>\n        @for (col of timedColumns(); track col.day.getTime()) {\n          <span\n            class=\"mk-event-calendar__col-head\"\n            [class.mk-event-calendar__col-head--today]=\"col.today\"\n          >\n            {{ col.head }}\n          </span>\n        }\n      </div>\n    }\n\n    <div class=\"mk-event-calendar__timegrid-body\">\n      <div class=\"mk-event-calendar__gutter\" aria-hidden=\"true\">\n        @for (h of hours(); track h) {\n          <span class=\"mk-event-calendar__hour-label\">{{ hourLabel(h) }}</span>\n        }\n      </div>\n\n      @for (col of timedColumns(); track col.day.getTime(); let ci = $index) {\n        <div\n          class=\"mk-event-calendar__col\"\n          [class.mk-event-calendar__col--today]=\"col.today\"\n        >\n          @for (h of hours(); track h) {\n            <button\n              type=\"button\"\n              class=\"mk-event-calendar__slot\"\n              [attr.aria-label]=\"col.head + ' ' + hourLabel(h)\"\n              (click)=\"onSlotClick(col.day, h)\"\n            ></button>\n          }\n\n          @for (p of col.placements; track $index) {\n            <button\n              type=\"button\"\n              class=\"mk-event-calendar__block\"\n              [class.mk-event-calendar__block--editable]=\"editable()\"\n              [class.mk-event-calendar__block--dragging]=\"isEditing(p)\"\n              [style.top.%]=\"p.top\"\n              [style.height.%]=\"blockHeight(p)\"\n              [style.left.%]=\"(100 / p.lanes) * p.lane\"\n              [style.width.%]=\"100 / p.lanes\"\n              [style.transform]=\"blockTransform(p)\"\n              [style.background-color]=\"p.event.color || 'var(--mk-primary)'\"\n              [title]=\"placementTitle(p)\"\n              [attr.aria-label]=\"editable() ? blockAriaLabel(p) : null\"\n              [attr.aria-roledescription]=\"editable() ? movableRoledescription : null\"\n              (click)=\"onEventClick($event, p.event)\"\n              (pointerdown)=\"onBlockPointerDown($event, p, ci)\"\n              (keydown)=\"onBlockKeydown($event, p, ci)\"\n              (blur)=\"onBlockBlur()\"\n            >\n              @if (dragLabelFor(p); as lbl) {\n                <span class=\"mk-event-calendar__drag-time\" aria-hidden=\"true\">{{\n                  lbl\n                }}</span>\n              }\n              {{ p.event.title }}\n              @if (editable()) {\n                <span\n                  class=\"mk-event-calendar__resize-handle\"\n                  aria-hidden=\"true\"\n                ></span>\n              }\n            </button>\n          }\n\n          @if (dropOutlineFor(ci); as outline) {\n            <div\n              class=\"mk-event-calendar__drop-outline\"\n              aria-hidden=\"true\"\n              [style.top.%]=\"outline.top\"\n              [style.height.%]=\"outline.outlineHeight\"\n            ></div>\n          }\n\n          @if (col.allDay.length) {\n            <span class=\"mk-event-calendar__all-day\" aria-hidden=\"true\">\n              @for (event of col.allDay; track $index) {\n                <span\n                  class=\"mk-event-calendar__pill\"\n                  [style.background-color]=\"event.color || 'var(--mk-primary)'\"\n                  [title]=\"event.title\"\n                  (click)=\"onEventClick($event, event)\"\n                >\n                  {{ event.title }}\n                </span>\n              }\n            </span>\n          }\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;padding:var(--mk-space-4);font-family:var(--mk-font-sans);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md)}.mk-event-calendar__header{display:flex;align-items:center;gap:var(--mk-space-1);margin-bottom:var(--mk-space-3)}.mk-event-calendar__label{flex:1 1 auto;text-align:center;font-weight:var(--mk-font-weight-semibold);font-size:var(--mk-font-size-md);white-space:nowrap}.mk-event-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--mk-control-height-sm);height:var(--mk-control-height-sm);flex:none;color:var(--mk-text-muted);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-event-calendar__nav:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-event-calendar__nav:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-event-calendar__nav svg{display:block}.mk-event-calendar__weekdays,.mk-event-calendar__week{display:grid;grid-template-columns:repeat(7,1fr)}.mk-event-calendar__weekday{padding:0 0 var(--mk-space-2);text-align:center;font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold);letter-spacing:var(--mk-letter-spacing-wide);text-transform:uppercase;color:var(--mk-text-subtle)}.mk-event-calendar__weekday abbr{text-decoration:none;cursor:default}.mk-event-calendar__cell{display:flex;flex-direction:column;align-items:stretch;gap:var(--mk-space-1);min-height:5.5rem;padding:var(--mk-space-1);font-family:inherit;text-align:start;color:var(--mk-text);background:transparent;border:var(--mk-border-width) solid var(--mk-border-subtle);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-event-calendar__cell:hover{background-color:var(--mk-hover-overlay)}.mk-event-calendar__cell:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1)}.mk-event-calendar__cell--outside{color:var(--mk-text-muted);background-color:var(--mk-surface-2)}.mk-event-calendar__day-num{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:1.5rem;padding:0 .25rem;font-size:var(--mk-font-size-sm);line-height:1;border-radius:var(--mk-radius-md)}.mk-event-calendar__cell--today .mk-event-calendar__day-num{color:var(--mk-primary-contrast);background-color:var(--mk-primary);font-weight:var(--mk-font-weight-semibold)}.mk-event-calendar__events{display:flex;flex-direction:column;gap:2px;min-width:0}.mk-event-calendar__pill{display:block;overflow:hidden;padding:1px var(--mk-space-1);font-size:var(--mk-font-size-xs);line-height:1.4;color:var(--mk-primary-contrast);white-space:nowrap;text-overflow:ellipsis;border-radius:var(--mk-radius-md);cursor:pointer}.mk-event-calendar__more{font-size:var(--mk-font-size-xs);color:var(--mk-text-muted)}@media(prefers-reduced-motion:reduce){.mk-event-calendar__nav,.mk-event-calendar__cell{transition:none}}.mk-event-calendar__timegrid{border:var(--mk-border-width) solid var(--mk-border-subtle);border-radius:var(--mk-radius-md);overflow:hidden}.mk-event-calendar__timegrid-head{display:flex;border-bottom:var(--mk-border-width) solid var(--mk-border-subtle);background:var(--mk-surface-2)}.mk-event-calendar__gutter-spacer{flex:0 0 3.25rem}.mk-event-calendar__col-head{flex:1;padding:var(--mk-space-2);text-align:center;font-size:var(--mk-font-size-xs);color:var(--mk-text-muted)}.mk-event-calendar__col-head--today{color:var(--mk-primary);font-weight:var(--mk-font-weight-semibold)}.mk-event-calendar__timegrid-body{display:flex}.mk-event-calendar__gutter{flex:0 0 3.25rem;display:flex;flex-direction:column}.mk-event-calendar__hour-label{flex:1 0 3rem;padding:2px var(--mk-space-2) 0 0;text-align:right;font-size:var(--mk-font-size-xs);color:var(--mk-text-subtle)}.mk-event-calendar__col{position:relative;flex:1;display:flex;flex-direction:column;border-inline-start:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-event-calendar__col--today{background:color-mix(in srgb,var(--mk-primary) 4%,transparent)}.mk-event-calendar__slot{flex:1 0 3rem;border:0;border-top:var(--mk-border-width) solid var(--mk-border-subtle);background:transparent;cursor:pointer;padding:0}.mk-event-calendar__slot:hover{background:var(--mk-hover-overlay)}.mk-event-calendar__slot:focus-visible{outline:2px solid var(--mk-focus-ring);outline-offset:-2px}.mk-event-calendar__block{position:absolute;z-index:1;overflow:hidden;margin:1px;padding:2px var(--mk-space-1);border:0;border-radius:var(--mk-radius-sm);color:var(--mk-primary-contrast);font-size:var(--mk-font-size-xs);text-align:start;cursor:pointer;min-height:1rem}.mk-event-calendar__block:focus-visible{outline:2px solid var(--mk-focus-ring);outline-offset:1px}.mk-event-calendar__block--editable{touch-action:pan-y;-webkit-user-select:none;user-select:none}.mk-event-calendar__block--dragging{z-index:3;opacity:.85;box-shadow:var(--mk-shadow-lg);will-change:transform}.mk-event-calendar__drag-time{display:block;font-weight:var(--mk-font-weight-semibold);white-space:nowrap}.mk-event-calendar__resize-handle{position:absolute;inset-inline:0;bottom:0;height:6px;cursor:ns-resize}@media(pointer:coarse){.mk-event-calendar__resize-handle:before{content:\"\";position:absolute;inset:min(0px,(100% - 24px) / 2)}}.mk-event-calendar__drop-outline{position:absolute;inset-inline:1px;z-index:2;pointer-events:none;border:var(--mk-border-width-strong) dashed var(--mk-primary);border-radius:var(--mk-radius-sm);background:color-mix(in srgb,var(--mk-primary) 8%,transparent)}.mk-event-calendar__all-day{position:absolute;inset-inline:2px;top:2px;z-index:2;display:flex;gap:2px;flex-wrap:wrap}\n"] }]
+        }], propDecorators: { events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], viewDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewDate", required: false }] }, { type: i0.Output, args: ["viewDateChange"] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], maxPerDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxPerDay", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], dayStartHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayStartHour", required: false }] }], dayEndHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayEndHour", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], snapMinutes: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapMinutes", required: false }] }], dayClick: [{ type: i0.Output, args: ["dayClick"] }], eventClick: [{ type: i0.Output, args: ["eventClick"] }], monthChange: [{ type: i0.Output, args: ["monthChange"] }], slotClick: [{ type: i0.Output, args: ["slotClick"] }], eventMove: [{ type: i0.Output, args: ["eventMove"] }], eventResize: [{ type: i0.Output, args: ["eventResize"] }] } });
+
+/** Number of days in month `m` (1–12) of `year`. */
+function daysInMonth(m, year) {
+    return new Date(year, m, 0).getDate();
+}
+/**
+ * MiniDate — a compact, popover-free inline date editor with segmented
+ * day / month / year spin fields (like a native `<input type="date">` but
+ * themed and signal-driven). Each segment is an ARIA `spinbutton`: Arrow
+ * Up/Down step the value (day wraps within the month), Home/End jump to the
+ * segment's minimum/maximum, Arrow Left/Right move between segments, and
+ * typing digits fills the focused segment and auto-advances (OTP-style). Implements `ControlValueAccessor` and a two-way
+ * `value` model over a real `Date | null`.
+ *
+ * A non-null `Date` is emitted only when all three segments are set and valid;
+ * the day is clamped to the month's length (e.g. Feb 31 → 28/29) and the
+ * result is clamped to `[min, max]`.
+ *
+ * ```html
+ * <mk-mini-date [(value)]="date" order="dmy" [min]="minDate" />
+ * ```
+ */
+class MkMiniDate {
+    field = inject(MkFormField, { optional: true });
+    i18n = inject(MK_I18N);
+    segEls = viewChildren('seg', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "segEls" }] : /* istanbul ignore next */ []));
+    /** Minimum selectable date (inclusive). */
+    min = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Maximum selectable date (inclusive). */
+    max = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Two-way value — a real `Date`, or `null` while incomplete. */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Disable the control. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Force invalid styling when standalone. */
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Control size. Ignored inside an `mk-form-field`. */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Segment order. */
+    order = input('dmy', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "order" }] : /* istanbul ignore next */ []));
+    /** Lowest selectable year (for the year spinbutton range). */
+    yearMin = input(1900, { ...(ngDevMode ? { debugName: "yearMin" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Highest selectable year (for the year spinbutton range). */
+    yearMax = input(2100, { ...(ngDevMode ? { debugName: "yearMax" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    segId = mkUniqueId('mk-mini-date');
+    // --- Segment state --------------------------------------------------------
+    daySeg = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "daySeg" }] : /* istanbul ignore next */ []));
+    monthSeg = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthSeg" }] : /* istanbul ignore next */ []));
+    yearSeg = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "yearSeg" }] : /* istanbul ignore next */ []));
+    /** Per-segment digit buffer used for OTP-style typing/auto-advance. */
+    buffer = '';
+    bufferKey = null;
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    effectiveSize = computed(() => this.field ? this.field.size() : this.size(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
+    isRequired = computed(() => this.field?.isRequired() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
+    labelledBy = computed(() => this.field?.labelId ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => this.field?.describedBy() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    /** Days available in the current month/year (defaults to a leap year). */
+    monthLength = computed(() => daysInMonth(this.monthSeg() ?? 1, this.yearSeg() ?? 2000), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthLength" }] : /* istanbul ignore next */ []));
+    /** Ordered, rendered segment descriptors. */
+    parts = computed(() => {
+        const names = this.i18n.dateNames;
+        const byKey = {
+            day: {
+                key: 'day',
+                display: this.pad(this.daySeg(), 2, 'dd'),
+                filled: this.daySeg() != null,
+                valueNow: this.daySeg(),
+                valueMin: 1,
+                valueMax: this.monthLength(),
+                valueText: this.daySeg() != null ? String(this.daySeg()) : this.i18n.empty,
+                label: this.i18n.daySegment,
+            },
+            month: {
+                key: 'month',
+                display: this.monthSeg() != null
+                    ? names.monthsShort[this.monthSeg() - 1]
+                    : 'mmm',
+                filled: this.monthSeg() != null,
+                valueNow: this.monthSeg(),
+                valueMin: 1,
+                valueMax: 12,
+                valueText: this.monthSeg() != null
+                    ? names.months[this.monthSeg() - 1]
+                    : this.i18n.empty,
+                label: this.i18n.monthSegment,
+            },
+            year: {
+                key: 'year',
+                display: this.pad(this.yearSeg(), 4, 'yyyy'),
+                filled: this.yearSeg() != null,
+                valueNow: this.yearSeg(),
+                valueMin: this.yearMin(),
+                valueMax: this.yearMax(),
+                valueText: this.yearSeg() != null ? String(this.yearSeg()) : this.i18n.empty,
+                label: this.i18n.yearSegment,
+            },
+        };
+        return this.order()
+            .split('')
+            .map((c) => c === 'd' ? byKey.day : c === 'm' ? byKey.month : byKey.year);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parts" }] : /* istanbul ignore next */ []));
+    // --- Interaction ----------------------------------------------------------
+    onSegKeydown(key, index, e) {
+        if (this.isDisabled())
+            return;
+        switch (e.key) {
+            case 'ArrowUp':
+                e.preventDefault();
+                this.step(key, 1);
+                break;
+            case 'ArrowDown':
+                e.preventDefault();
+                this.step(key, -1);
+                break;
+            case 'ArrowLeft':
+                e.preventDefault();
+                this.focusSeg(index - 1);
+                break;
+            case 'ArrowRight':
+                e.preventDefault();
+                this.focusSeg(index + 1);
+                break;
+            case 'Home':
+                e.preventDefault();
+                this.setSegment(key, this.segMin(key));
+                this.resetBuffer();
+                break;
+            case 'End':
+                e.preventDefault();
+                this.setSegment(key, this.segMax(key));
+                this.resetBuffer();
+                break;
+            case 'Backspace':
+            case 'Delete':
+                e.preventDefault();
+                this.setSegment(key, null);
+                this.resetBuffer();
+                if (e.key === 'Backspace')
+                    this.focusSeg(index - 1);
+                break;
+            default:
+                if (/^[0-9]$/.test(e.key)) {
+                    e.preventDefault();
+                    this.typeDigit(key, index, e.key);
+                }
+        }
+    }
+    onSegFocus(key) {
+        // A fresh focus starts a new typing buffer for that segment.
+        if (this.bufferKey !== key)
+            this.resetBuffer();
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    /** A segment's minimum value (Home key). */
+    segMin(key) {
+        return key === 'year' ? this.yearMin() : 1;
+    }
+    /** A segment's maximum value (End key). */
+    segMax(key) {
+        if (key === 'day')
+            return this.monthLength();
+        if (key === 'month')
+            return 12;
+        return this.yearMax();
+    }
+    /** Step a segment by `delta`; the day wraps within the current month. */
+    step(key, delta) {
+        if (key === 'day') {
+            const len = this.monthLength();
+            const cur = this.daySeg() ?? (delta > 0 ? 0 : len + 1);
+            const next = ((cur - 1 + delta) % len + len) % len + 1;
+            this.setSegment('day', next);
+        }
+        else if (key === 'month') {
+            const cur = this.monthSeg() ?? (delta > 0 ? 0 : 13);
+            const next = ((cur - 1 + delta) % 12 + 12) % 12 + 1;
+            this.setSegment('month', next);
+        }
+        else {
+            const base = this.yearSeg() ?? new Date().getFullYear() - delta;
+            const next = Math.min(this.yearMax(), Math.max(this.yearMin(), base + delta));
+            this.setSegment('year', next);
+        }
+        this.resetBuffer();
+    }
+    /** OTP-style digit entry with auto-advance to the next segment when full. */
+    typeDigit(key, index, digit) {
+        if (this.bufferKey !== key)
+            this.buffer = '';
+        this.bufferKey = key;
+        const maxDigits = key === 'year' ? 4 : 2;
+        const max = key === 'day'
+            ? this.monthLength()
+            : key === 'month'
+                ? 12
+                : this.yearMax();
+        let buf = this.buffer + digit;
+        let num = Number(buf);
+        // If the running value overflows the max, restart the buffer with this digit.
+        if (num > max || buf.length > maxDigits) {
+            buf = digit;
+            num = Number(buf);
+        }
+        this.buffer = buf;
+        this.setSegment(key, num === 0 ? null : num);
+        // Advance when the segment is saturated (full width, or another digit
+        // could only overflow the max).
+        const full = buf.length >= maxDigits || num * 10 > max;
+        if (full) {
+            this.resetBuffer();
+            this.focusSeg(index + 1);
+        }
+    }
+    /** Set a segment, then rebuild + emit the composite date. */
+    setSegment(key, value) {
+        if (key === 'day')
+            this.daySeg.set(value);
+        else if (key === 'month')
+            this.monthSeg.set(value);
+        else
+            this.yearSeg.set(value);
+        this.recompute();
+    }
+    /**
+     * Rebuild the `Date` from the three segments and emit it. Emits `null` unless
+     * all three are set; clamps the day to the month length and the whole date to
+     * `[min, max]`, writing any clamp back into the segments.
+     */
+    recompute() {
+        const d = this.daySeg();
+        const m = this.monthSeg();
+        const y = this.yearSeg();
+        if (d == null || m == null || y == null) {
+            this.emit(null);
+            return;
+        }
+        const len = daysInMonth(m, y);
+        const clampedDay = Math.min(d, len);
+        if (clampedDay !== d)
+            this.daySeg.set(clampedDay);
+        const raw = new Date(y, m - 1, clampedDay);
+        const bounded = clampDate(startOfDay(raw), this.min(), this.max());
+        if (!isSameDay(bounded, raw))
+            this.split(bounded);
+        this.emit(startOfDay(bounded));
+    }
+    emit(v) {
+        this.value.set(v);
+        this.onChange(v);
+    }
+    /** Populate the three segments from a `Date`. */
+    split(date) {
+        this.daySeg.set(date.getDate());
+        this.monthSeg.set(date.getMonth() + 1);
+        this.yearSeg.set(date.getFullYear());
+    }
+    resetBuffer() {
+        this.buffer = '';
+        this.bufferKey = null;
+    }
+    focusSeg(index) {
+        const els = this.segEls();
+        const el = els[Math.max(0, Math.min(els.length - 1, index))];
+        el?.nativeElement.focus();
+        this.resetBuffer();
+    }
+    pad(v, width, placeholder) {
+        return v == null ? placeholder : String(v).padStart(width, '0');
+    }
+    // --- ControlValueAccessor -------------------------------------------------
+    writeValue(value) {
+        if (value instanceof Date && !Number.isNaN(value.getTime())) {
+            this.split(value);
+        }
+        else {
+            this.daySeg.set(null);
+            this.monthSeg.set(null);
+            this.yearSeg.set(null);
+        }
+        this.value.set(value ?? null);
+        this.resetBuffer();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    // --- Validator ------------------------------------------------------------
+    validatorChange = mkValidatorChange(() => {
+        this.min();
+        this.max();
+    });
+    /**
+     * Reports `mkMinDate` / `mkMaxDate` against the `[min]` and `[max]` inputs.
+     */
+    validate(control) {
+        const v = control.value;
+        if (!(v instanceof Date) || Number.isNaN(v.getTime()))
+            return null;
+        const day = startOfDay(v);
+        const min = this.min();
+        if (min && isBefore(day, startOfDay(min)))
+            return { mkMinDate: { min, actual: v } };
+        const max = this.max();
+        if (max && isAfter(day, startOfDay(max)))
+            return { mkMaxDate: { max, actual: v } };
+        return null;
+    }
+    registerOnValidatorChange(fn) {
+        this.validatorChange.register(fn);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkMiniDate, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkMiniDate, isStandalone: true, selector: "mk-mini-date", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, order: { classPropertyName: "order", publicName: "order", isSignal: true, isRequired: false, transformFunction: null }, yearMin: { classPropertyName: "yearMin", publicName: "yearMin", isSignal: true, isRequired: false, transformFunction: null }, yearMax: { classPropertyName: "yearMax", publicName: "yearMax", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "labelledBy()", "attr.aria-describedby": "describedBy()", "attr.aria-invalid": "isInvalid() || null", "attr.aria-required": "isRequired() || null", "class.mk-mini-date--sm": "effectiveSize() === 'sm'", "class.mk-mini-date--lg": "effectiveSize() === 'lg'", "class.mk-mini-date--invalid": "isInvalid()", "class.mk-mini-date--disabled": "isDisabled()" }, classAttribute: "mk-mini-date" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MkMiniDate),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => MkMiniDate),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "segEls", predicate: ["seg"], descendants: true, isSignal: true }], exportAs: ["mkMiniDate"], ngImport: i0, template: "@for (part of parts(); track part.key; let last = $last) {\n  <span\n    #seg\n    class=\"mk-mini-date__seg\"\n    [class.mk-mini-date__seg--empty]=\"!part.filled\"\n    [id]=\"segId + '-' + part.key\"\n    role=\"spinbutton\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    [attr.aria-label]=\"part.label\"\n    [attr.aria-valuenow]=\"part.valueNow\"\n    [attr.aria-valuemin]=\"part.valueMin\"\n    [attr.aria-valuemax]=\"part.valueMax\"\n    [attr.aria-valuetext]=\"part.valueText\"\n    [attr.aria-disabled]=\"isDisabled() || null\"\n    (keydown)=\"onSegKeydown(part.key, $index, $event)\"\n    (focus)=\"onSegFocus(part.key)\"\n    (blur)=\"onBlur()\"\n  >{{ part.display }}</span>\n  @if (!last) {\n    <span class=\"mk-mini-date__sep\" aria-hidden=\"true\">/</span>\n  }\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:.125rem;height:var(--mk-control-height-md);padding:0 var(--mk-space-2);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-md);color:var(--mk-text);transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-mini-date--sm){height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm);font-size:var(--mk-font-size-sm)}:host(.mk-mini-date--lg){height:var(--mk-control-height-lg);font-size:var(--mk-font-size-lg)}:host(:focus-within){border-color:var(--mk-primary);outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}:host(.mk-mini-date--invalid){border-color:var(--mk-danger)}:host(.mk-mini-date--disabled){background-color:var(--mk-surface-2);opacity:.7;pointer-events:none}.mk-mini-date__seg{padding:0 var(--mk-space-1);border-radius:var(--mk-radius-sm);font-variant-numeric:tabular-nums;text-align:center;cursor:default;outline:none;-webkit-user-select:none;user-select:none}.mk-mini-date__seg--empty{color:var(--mk-text-subtle)}.mk-mini-date__seg:focus-visible,.mk-mini-date__seg:focus{background-color:var(--mk-primary);color:var(--mk-primary-contrast)}.mk-mini-date__sep{color:var(--mk-text-muted);-webkit-user-select:none;user-select:none}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkMiniDate, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-mini-date', changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'mkMiniDate', host: {
+                        class: 'mk-mini-date',
+                        role: 'group',
+                        '[attr.aria-labelledby]': 'labelledBy()',
+                        '[attr.aria-describedby]': 'describedBy()',
+                        '[attr.aria-invalid]': 'isInvalid() || null',
+                        '[attr.aria-required]': 'isRequired() || null',
+                        '[class.mk-mini-date--sm]': "effectiveSize() === 'sm'",
+                        '[class.mk-mini-date--lg]': "effectiveSize() === 'lg'",
+                        '[class.mk-mini-date--invalid]': 'isInvalid()',
+                        '[class.mk-mini-date--disabled]': 'isDisabled()',
+                    }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MkMiniDate),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => MkMiniDate),
+                            multi: true,
+                        },
+                    ], template: "@for (part of parts(); track part.key; let last = $last) {\n  <span\n    #seg\n    class=\"mk-mini-date__seg\"\n    [class.mk-mini-date__seg--empty]=\"!part.filled\"\n    [id]=\"segId + '-' + part.key\"\n    role=\"spinbutton\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    [attr.aria-label]=\"part.label\"\n    [attr.aria-valuenow]=\"part.valueNow\"\n    [attr.aria-valuemin]=\"part.valueMin\"\n    [attr.aria-valuemax]=\"part.valueMax\"\n    [attr.aria-valuetext]=\"part.valueText\"\n    [attr.aria-disabled]=\"isDisabled() || null\"\n    (keydown)=\"onSegKeydown(part.key, $index, $event)\"\n    (focus)=\"onSegFocus(part.key)\"\n    (blur)=\"onBlur()\"\n  >{{ part.display }}</span>\n  @if (!last) {\n    <span class=\"mk-mini-date__sep\" aria-hidden=\"true\">/</span>\n  }\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:.125rem;height:var(--mk-control-height-md);padding:0 var(--mk-space-2);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-md);color:var(--mk-text);transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-mini-date--sm){height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm);font-size:var(--mk-font-size-sm)}:host(.mk-mini-date--lg){height:var(--mk-control-height-lg);font-size:var(--mk-font-size-lg)}:host(:focus-within){border-color:var(--mk-primary);outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}:host(.mk-mini-date--invalid){border-color:var(--mk-danger)}:host(.mk-mini-date--disabled){background-color:var(--mk-surface-2);opacity:.7;pointer-events:none}.mk-mini-date__seg{padding:0 var(--mk-space-1);border-radius:var(--mk-radius-sm);font-variant-numeric:tabular-nums;text-align:center;cursor:default;outline:none;-webkit-user-select:none;user-select:none}.mk-mini-date__seg--empty{color:var(--mk-text-subtle)}.mk-mini-date__seg:focus-visible,.mk-mini-date__seg:focus{background-color:var(--mk-primary);color:var(--mk-primary-contrast)}.mk-mini-date__sep{color:var(--mk-text-muted);-webkit-user-select:none;user-select:none}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"] }]
+        }], propDecorators: { segEls: [{ type: i0.ViewChildren, args: ['seg', { isSignal: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], order: [{ type: i0.Input, args: [{ isSignal: true, alias: "order", required: false }] }], yearMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearMin", required: false }] }], yearMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearMax", required: false }] }] } });
+
+/**
+ * DATE & TIME components group barrel for @mk-kit/ui.
+ * Re-exports every public component, the shared date helpers, and the
+ * `MkDateRange` type.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MkCalendar, MkDatePicker, MkDateRangePicker, MkEventCalendar, MkMiniDate, MkMonthPicker, MkTimePicker, MkWeekPicker, addDays, addMonths, buildMonthMatrix, clampDate, endOfMonth, endOfWeek, formatDate, formatISODate, getISOWeek, getMonthNames, getWeekdayFullName, getWeekdayNames, isAfter, isBefore, isSameDay, isSameMonth, parseISODate, startOfDay, startOfMonth, startOfWeek };
+//# sourceMappingURL=mk-kit-ui-datetime.mjs.map