@cocoar/ui-components 0.1.0-beta.122 → 0.1.0-beta.126

package/fesm2022/cocoar-ui-components.mjs

@@ -643,7 +643,9 @@ function transformStepperButtons(value) {
 class CoarNumberInputComponent extends CoarControlValueAccessor {
     destroyRef = inject(DestroyRef);
     localizationService = inject(CoarLocalizationService, { optional: true });
-    currentLanguage = toSignal(this.localizationService?.languageChanged$ ?? of(navigator.language));
+    currentLanguage = toSignal(this.localizationService?.languageState.value$ ?? of(navigator.language), {
+        initialValue: this.localizationService?.languageState.value ?? navigator.language,
+    });
     maskitoInstance;
     /** Label text displayed above the input */
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
@@ -841,9 +843,7 @@ class CoarNumberInputComponent extends CoarControlValueAccessor {
             return null;
         const format = this.resolveNumberFormat();
         // Remove thousand separators first (before converting decimal)
-        const withoutThousands = format.thousand
-            ? str.replace(new RegExp(`\\${format.thousand}`, 'g'), '')
-            : str;
+        const withoutThousands = format.thousand ? str.replace(new RegExp(`\\${format.thousand}`, 'g'), '') : str;
         // Replace locale-specific decimal separator with period for parseFloat
         const normalized = withoutThousands.replace(format.decimal, '.');
         const parsed = parseFloat(normalized);
@@ -3990,22 +3990,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                     }, styles: [":host{display:block}.coar-table-wrapper{overflow-x:auto;border:1px solid var(--coar-border-neutral-tertiary);border-radius:var(--coar-radius-xs);background:var(--coar-background-neutral-primary)}.coar-table{width:100%;border-collapse:collapse;font-family:var(--coar-body-base-family);font-size:.875rem;line-height:1.5}.coar-table ::ng-deep thead{background:var(--coar-background-neutral-secondary)}.coar-table ::ng-deep th{padding:.75rem 1rem;text-align:left;font-weight:600;font-size:.8125rem;color:var(--coar-text-neutral-primary);border-bottom:1px solid var(--coar-border-neutral-tertiary);white-space:nowrap;text-transform:uppercase;letter-spacing:.025em}.coar-table ::ng-deep tbody tr:nth-child(odd){background:var(--coar-background-neutral-primary)}.coar-table ::ng-deep tbody tr:nth-child(2n){background:var(--coar-background-neutral-secondary)}.coar-table ::ng-deep td{padding:.75rem 1rem;text-align:left;color:var(--coar-text-neutral-secondary);vertical-align:top}.coar-table ::ng-deep code{font-family:Consolas,Monaco,Courier New,monospace;font-size:.8125rem;color:var(--coar-text-accent-secondary);white-space:nowrap}:host(.coar-table--plain) .coar-table ::ng-deep tbody tr:nth-child(odd),:host(.coar-table--plain) .coar-table ::ng-deep tbody tr:nth-child(2n){background:var(--coar-background-neutral-primary)}:host(.coar-table--plain) .coar-table ::ng-deep td{border-bottom:1px solid var(--coar-border-neutral-tertiary)}:host(.coar-table--plain) .coar-table ::ng-deep tbody tr:last-child td{border-bottom:none}:host(.coar-table--bordered) .coar-table-wrapper{border:none}:host(.coar-table--bordered) .coar-table ::ng-deep th,:host(.coar-table--bordered) .coar-table ::ng-deep td{border:1px solid var(--coar-border-neutral-tertiary)}:host(.coar-table--bordered) .coar-table ::ng-deep tbody tr:nth-child(odd),:host(.coar-table--bordered) .coar-table ::ng-deep tbody tr:nth-child(2n){background:var(--coar-background-neutral-primary)}:host(.coar-table--compact) .coar-table ::ng-deep th,:host(.coar-table--compact) .coar-table ::ng-deep td{padding:.5rem .75rem;font-size:.8125rem}:host(.coar-table--hover) .coar-table ::ng-deep tbody tr:hover{background:var(--coar-background-neutral-secondary)}.coar-table ::ng-deep .text-right{text-align:right}.coar-table ::ng-deep .text-center{text-align:center}.coar-table ::ng-deep .nowrap{white-space:nowrap}.coar-table ::ng-deep .prop-name code{color:var(--coar-text-accent-primary);font-weight:500}.coar-table ::ng-deep .type{color:var(--coar-text-neutral-tertiary)}.coar-table ::ng-deep .default{color:var(--coar-text-neutral-tertiary)}.coar-table ::ng-deep .required-badge{display:inline-block;margin-left:.5rem;padding:.125rem .375rem;font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--coar-text-semantic-warning-bold);background:var(--coar-background-semantic-warning-subtle);border-radius:var(--coar-radius-xxs);vertical-align:middle}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }] } });
 
-/**
- * Generate localized weekday names using Intl.DateTimeFormat.
- * Uses a reference week (Jan 2024 starts on Monday) for consistent day mapping.
- */
-function getLocalizedWeekdays(locale, firstDayOfWeek) {
+function coarDetectDateFormatPatternFromIntl(locale) {
+    try {
+        const formatter = new Intl.DateTimeFormat(locale);
+        const parts = formatter.formatToParts(new Date(2024, 0, 15));
+        const dayIndex = parts.findIndex((p) => p.type === 'day');
+        const monthIndex = parts.findIndex((p) => p.type === 'month');
+        const yearIndex = parts.findIndex((p) => p.type === 'year');
+        if (dayIndex === -1 || monthIndex === -1 || yearIndex === -1) {
+            return null;
+        }
+        if (dayIndex < monthIndex && monthIndex < yearIndex)
+            return 'dd.mm.yyyy';
+        if (monthIndex < dayIndex && dayIndex < yearIndex)
+            return 'mm/dd/yyyy';
+        if (yearIndex < monthIndex && monthIndex < dayIndex)
+            return 'yyyy-mm-dd';
+        return null;
+    }
+    catch {
+        return null;
+    }
+}
+function coarGetDateSeparatorForPattern(pattern) {
+    if (pattern.includes('.'))
+        return '.';
+    if (pattern.includes('/'))
+        return '/';
+    return '-';
+}
+function coarGetLocalizedWeekdays(locale, firstDayOfWeek) {
     const formatter = new Intl.DateTimeFormat(locale, { weekday: 'short' });
-    // Jan 1, 2024 is a Monday - use this as reference for day mapping
+    // Jan 1, 2024 is a Monday - use this as reference for day mapping.
     const weekdays = [];
     for (let i = 0; i < 7; i++) {
-        // Start from Monday (Jan 1) and go through the week
         const date = new Date(2024, 0, 1 + i);
         weekdays.push(formatter.format(date));
     }
-    // weekdays is now [Mon, Tue, Wed, Thu, Fri, Sat, Sun]
+    // weekdays is now [Mon, Tue, Wed, Thu, Fri, Sat, Sun].
     if (firstDayOfWeek === 7) {
-        // Rotate to start with Sunday
         const sunday = weekdays.pop();
         if (sunday) {
             weekdays.unshift(sunday);
@@ -4013,6 +4036,370 @@ function getLocalizedWeekdays(locale, firstDayOfWeek) {
     }
     return weekdays;
 }
+function coarFormatPlainDate(date, pattern) {
+    const sep = coarGetDateSeparatorForPattern(pattern);
+    const day = String(date.day).padStart(2, '0');
+    const month = String(date.month).padStart(2, '0');
+    const year = String(date.year);
+    switch (pattern) {
+        case 'dd.mm.yyyy':
+        case 'dd/mm/yyyy':
+            return `${day}${sep}${month}${sep}${year}`;
+        case 'mm/dd/yyyy':
+            return `${month}${sep}${day}${sep}${year}`;
+        case 'yyyy-mm-dd':
+            return `${year}${sep}${month}${sep}${day}`;
+        default:
+            return `${day}${sep}${month}${sep}${year}`;
+    }
+}
+function coarParsePlainDateFromInput(text, pattern, constraints) {
+    if (!text)
+        return null;
+    const sep = coarGetDateSeparatorForPattern(pattern);
+    const parts = text.split(sep);
+    if (parts.length !== 3)
+        return null;
+    if (parts.some((p) => p.length === 0 || !/^\d+$/.test(p)))
+        return null;
+    let year;
+    let month;
+    let day;
+    try {
+        switch (pattern) {
+            case 'dd.mm.yyyy':
+            case 'dd/mm/yyyy':
+                day = parseInt(parts[0], 10);
+                month = parseInt(parts[1], 10);
+                year = parseInt(parts[2], 10);
+                break;
+            case 'mm/dd/yyyy':
+                month = parseInt(parts[0], 10);
+                day = parseInt(parts[1], 10);
+                year = parseInt(parts[2], 10);
+                break;
+            case 'yyyy-mm-dd':
+                year = parseInt(parts[0], 10);
+                month = parseInt(parts[1], 10);
+                day = parseInt(parts[2], 10);
+                break;
+            default:
+                return null;
+        }
+        if (year < 1 || month < 1 || month > 12 || day < 1 || day > 31) {
+            return null;
+        }
+        const date = Temporal.PlainDate.from({ year, month, day });
+        const minDate = constraints?.min ?? null;
+        const maxDate = constraints?.max ?? null;
+        if (minDate && Temporal.PlainDate.compare(date, minDate) < 0) {
+            return null;
+        }
+        if (maxDate && Temporal.PlainDate.compare(date, maxDate) > 0) {
+            return null;
+        }
+        return date;
+    }
+    catch {
+        return null;
+    }
+}
+function coarTemporalPlainDateToDate(date) {
+    return new Date(date.year, date.month - 1, date.day);
+}
+function coarCalculateIsoWeekNumber(date) {
+    const jsDate = coarTemporalPlainDateToDate(date);
+    const dayOfWeek = jsDate.getDay() || 7;
+    jsDate.setDate(jsDate.getDate() + 4 - dayOfWeek);
+    const yearStart = new Date(jsDate.getFullYear(), 0, 1);
+    return Math.ceil(((jsDate.getTime() - yearStart.getTime()) / 86400000 + 1) / 7);
+}
+function coarClampPlainDate(date, constraints) {
+    const minDate = constraints?.min ?? null;
+    const maxDate = constraints?.max ?? null;
+    if (minDate && Temporal.PlainDate.compare(date, minDate) < 0) {
+        return minDate;
+    }
+    if (maxDate && Temporal.PlainDate.compare(date, maxDate) > 0) {
+        return maxDate;
+    }
+    return date;
+}
+/**
+ * Returns a fixed 6x7 calendar grid (42 cells) for the given month.
+ * Includes leading/trailing days from adjacent months to fill the grid.
+ */
+function coarGetCalendarGridDates(viewMonth, firstDayOfWeek) {
+    const firstDay = viewMonth.toPlainDate({ day: 1 });
+    const daysInMonth = viewMonth.daysInMonth;
+    const startDayOfWeek = firstDay.dayOfWeek; // Temporal: 1=Mon ... 7=Sun
+    let daysFromPrevMonth;
+    if (firstDayOfWeek === 1) {
+        // Monday first: Monday=0, Tuesday=1, ..., Sunday=6
+        daysFromPrevMonth = (startDayOfWeek - 1 + 7) % 7;
+    }
+    else {
+        // Sunday first: Sunday=0, Monday=1, ..., Saturday=6
+        // Temporal uses: Sunday=7, so we convert via modulo
+        daysFromPrevMonth = startDayOfWeek % 7;
+    }
+    const cells = [];
+    if (daysFromPrevMonth > 0) {
+        const prevMonth = viewMonth.subtract({ months: 1 });
+        const prevMonthDays = prevMonth.daysInMonth;
+        for (let i = daysFromPrevMonth - 1; i >= 0; i--) {
+            const day = prevMonth.toPlainDate({ day: prevMonthDays - i });
+            cells.push({ date: day, isOutsideMonth: true });
+        }
+    }
+    for (let d = 1; d <= daysInMonth; d++) {
+        const day = viewMonth.toPlainDate({ day: d });
+        cells.push({ date: day, isOutsideMonth: false });
+    }
+    const remainingDays = 42 - cells.length;
+    const nextMonth = viewMonth.add({ months: 1 });
+    for (let d = 1; d <= remainingDays; d++) {
+        const day = nextMonth.toPlainDate({ day: d });
+        cells.push({ date: day, isOutsideMonth: true });
+    }
+    return cells;
+}
+
+class CoarMiniCalendarComponent {
+    /** Current selected date (two-way bindable with [(value)]) */
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    valueChange = output();
+    /** Minimum selectable date */
+    min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : []));
+    /** Maximum selectable date */
+    max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    /** Locale identifier for calendar month/week labels */
+    locale = input(navigator.language, ...(ngDevMode ? [{ debugName: "locale" }] : []));
+    /** Date format configuration (pattern and first day of week) */
+    dateFormatConfig = input(...(ngDevMode ? [undefined, { debugName: "dateFormatConfig" }] : []));
+    /** Whether to show a "Today" button */
+    showTodayButton = input(true, { ...(ngDevMode ? { debugName: "showTodayButton" } : {}), transform: booleanAttribute });
+    /** Whether to show week numbers */
+    showWeekNumbers = input(false, { ...(ngDevMode ? { debugName: "showWeekNumbers" } : {}), transform: booleanAttribute });
+    /** Whether to highlight weekend days (Saturday/Sunday) with a subtle background */
+    highlightWeekends = input(false, { ...(ngDevMode ? { debugName: "highlightWeekends" } : {}), transform: booleanAttribute });
+    /** Date markers for highlighting special dates (holidays, events, etc.) */
+    markers = input([], ...(ngDevMode ? [{ debugName: "markers" }] : []));
+    /** Maximum number of lines shown in the marker popover (including "+N" line). */
+    markerPopoverMaxLines = 5;
+    /** Visible markers before switching to "+N other events". */
+    markerPopoverVisibleMarkers = 4;
+    today = Temporal.Now.plainDateISO();
+    /** Currently viewed month/year in the calendar */
+    viewDate = signal(this.today.toPlainYearMonth(), ...(ngDevMode ? [{ debugName: "viewDate" }] : []));
+    /** Focused date in the calendar (for keyboard navigation) */
+    focusedDate = signal(null, ...(ngDevMode ? [{ debugName: "focusedDate" }] : []));
+    effectiveDateFormat = computed(() => {
+        const directConfig = this.dateFormatConfig();
+        if (directConfig)
+            return directConfig;
+        const detectedPattern = coarDetectDateFormatPatternFromIntl(this.locale());
+        return { pattern: detectedPattern ?? 'dd.mm.yyyy', firstDayOfWeek: 1 };
+    }, ...(ngDevMode ? [{ debugName: "effectiveDateFormat" }] : []));
+    firstDayOfWeek = computed(() => this.effectiveDateFormat().firstDayOfWeek, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : []));
+    daysOfWeek = computed(() => coarGetLocalizedWeekdays(this.locale(), this.firstDayOfWeek()), ...(ngDevMode ? [{ debugName: "daysOfWeek" }] : []));
+    calendarDays = computed(() => {
+        const viewMonth = this.viewDate();
+        const grid = coarGetCalendarGridDates(viewMonth, this.firstDayOfWeek());
+        return grid.map((cell) => this.createCalendarDay(cell.date, cell.isOutsideMonth));
+    }, ...(ngDevMode ? [{ debugName: "calendarDays" }] : []));
+    viewMonth = computed(() => {
+        const viewMonth = this.viewDate();
+        const formatter = new Intl.DateTimeFormat(this.locale(), { month: 'long' });
+        const jsDate = new Date(viewMonth.year, viewMonth.month - 1, 1);
+        return formatter.format(jsDate);
+    }, ...(ngDevMode ? [{ debugName: "viewMonth" }] : []));
+    viewYear = computed(() => this.viewDate().year, ...(ngDevMode ? [{ debugName: "viewYear" }] : []));
+    weekNumbers = computed(() => {
+        const days = this.calendarDays();
+        const weeks = [];
+        for (let i = 0; i < 6; i++) {
+            const firstDayOfWeek = days[i * 7];
+            if (firstDayOfWeek) {
+                const weekNum = firstDayOfWeek.date.weekOfYear ?? coarCalculateIsoWeekNumber(firstDayOfWeek.date);
+                weeks.push(weekNum);
+            }
+        }
+        return weeks;
+    }, ...(ngDevMode ? [{ debugName: "weekNumbers" }] : []));
+    constructor() {
+        // Keep the view month in sync when a value is provided/changed.
+        effect(() => {
+            const val = this.value();
+            if (!val)
+                return;
+            this.viewDate.set(val.toPlainYearMonth());
+            // Set a sensible default focus when a value arrives.
+            if (!this.focusedDate()) {
+                this.focusedDate.set(val);
+            }
+        });
+        // Default focus when no value is set.
+        effect(() => {
+            if (this.value())
+                return;
+            if (this.focusedDate())
+                return;
+            this.focusedDate.set(this.today);
+        });
+    }
+    previousMonth() {
+        this.viewDate.update((d) => d.subtract({ months: 1 }));
+    }
+    nextMonth() {
+        this.viewDate.update((d) => d.add({ months: 1 }));
+    }
+    previousYear() {
+        this.viewDate.update((d) => d.subtract({ years: 1 }));
+    }
+    nextYear() {
+        this.viewDate.update((d) => d.add({ years: 1 }));
+    }
+    goToToday() {
+        this.viewDate.set(this.today.toPlainYearMonth());
+        this.focusedDate.set(this.today);
+    }
+    selectDate(date) {
+        if (this.isDateDisabled(date))
+            return;
+        this.value.set(date);
+        this.valueChange.emit(date);
+        this.focusedDate.set(date);
+    }
+    onKeydown(event) {
+        switch (event.key) {
+            case 'Enter':
+            case ' ': {
+                event.preventDefault();
+                const focused = this.focusedDate();
+                if (focused) {
+                    this.selectDate(focused);
+                }
+                break;
+            }
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.moveFocus(-1, 'day');
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                this.moveFocus(1, 'day');
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.moveFocus(-7, 'day');
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                this.moveFocus(7, 'day');
+                break;
+            case 'PageUp':
+                event.preventDefault();
+                if (event.shiftKey) {
+                    this.moveFocus(-1, 'year');
+                }
+                else {
+                    this.moveFocus(-1, 'month');
+                }
+                break;
+            case 'PageDown':
+                event.preventDefault();
+                if (event.shiftKey) {
+                    this.moveFocus(1, 'year');
+                }
+                else {
+                    this.moveFocus(1, 'month');
+                }
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.goToToday();
+                break;
+        }
+    }
+    getVisibleMarkers(markers) {
+        if (markers.length <= this.markerPopoverMaxLines) {
+            return markers;
+        }
+        return markers.slice(0, this.markerPopoverVisibleMarkers);
+    }
+    getHiddenMarkerCount(markers) {
+        if (markers.length <= this.markerPopoverMaxLines) {
+            return 0;
+        }
+        return Math.max(0, markers.length - this.markerPopoverVisibleMarkers);
+    }
+    getMarkersForDate(date) {
+        const markers = this.markers();
+        const matches = [];
+        for (const marker of markers) {
+            const start = marker.startDate;
+            const end = marker.endDate ?? marker.startDate;
+            if (Temporal.PlainDate.compare(date, start) >= 0 &&
+                Temporal.PlainDate.compare(date, end) <= 0) {
+                matches.push(marker);
+            }
+        }
+        return matches;
+    }
+    isDateDisabled(date) {
+        const minDate = this.min();
+        const maxDate = this.max();
+        if (minDate && Temporal.PlainDate.compare(date, minDate) < 0)
+            return true;
+        if (maxDate && Temporal.PlainDate.compare(date, maxDate) > 0)
+            return true;
+        return false;
+    }
+    moveFocus(amount, unit) {
+        const current = this.focusedDate() ?? this.value() ?? this.today;
+        let newDate;
+        switch (unit) {
+            case 'day':
+                newDate = current.add({ days: amount });
+                break;
+            case 'month':
+                newDate = current.add({ months: amount });
+                break;
+            case 'year':
+                newDate = current.add({ years: amount });
+                break;
+        }
+        newDate = coarClampPlainDate(newDate, { min: this.min(), max: this.max() });
+        this.focusedDate.set(newDate);
+        this.viewDate.set(newDate.toPlainYearMonth());
+    }
+    createCalendarDay(date, isOutsideMonth) {
+        const selected = this.value();
+        const focused = this.focusedDate();
+        const dayOfWeek = date.dayOfWeek;
+        const markers = this.getMarkersForDate(date);
+        return {
+            date,
+            day: date.day,
+            isOutsideMonth,
+            isToday: Temporal.PlainDate.compare(date, this.today) === 0,
+            isSelected: selected ? Temporal.PlainDate.compare(date, selected) === 0 : false,
+            isFocused: focused ? Temporal.PlainDate.compare(date, focused) === 0 : false,
+            isDisabled: this.isDateDisabled(date),
+            isWeekend: dayOfWeek === 6 || dayOfWeek === 7,
+            markers,
+            markerCssClass: markers[0]?.cssClass ?? null,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarMiniCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarMiniCalendarComponent, isStandalone: true, selector: "coar-mini-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 }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dateFormatConfig: { classPropertyName: "dateFormatConfig", publicName: "dateFormatConfig", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, highlightWeekends: { classPropertyName: "highlightWeekends", publicName: "highlightWeekends", isSignal: true, isRequired: false, transformFunction: null }, markers: { classPropertyName: "markers", publicName: "markers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange" }, providers: [CoarPopoverGroupService], ngImport: i0, template: "<div class=\"coar-mini-calendar\" role=\"application\" (keydown)=\"onKeydown($event)\">\n  <div class=\"coar-mini-calendar-header\">\n    <button type=\"button\" class=\"coar-mini-calendar-nav\" aria-label=\"Previous year\" (click)=\"previousYear()\">\n      <coar-icon name=\"chevrons-left\" source=\"coar-builtin\" size=\"sm\" />\n    </button>\n    <button type=\"button\" class=\"coar-mini-calendar-nav\" aria-label=\"Previous month\" (click)=\"previousMonth()\">\n      <coar-icon name=\"chevron-left\" source=\"coar-builtin\" size=\"sm\" />\n    </button>\n\n    <span class=\"coar-mini-calendar-month-year\">\n      <span class=\"coar-mini-calendar-month\">{{ viewMonth() }}</span>\n      <span class=\"coar-mini-calendar-year\">{{ viewYear() }}</span>\n    </span>\n\n    <button type=\"button\" class=\"coar-mini-calendar-nav coar-mini-calendar-nav--next\" aria-label=\"Next month\" (click)=\"nextMonth()\">\n      <coar-icon name=\"chevron-right\" source=\"coar-builtin\" size=\"sm\" />\n    </button>\n    <button type=\"button\" class=\"coar-mini-calendar-nav coar-mini-calendar-nav--next\" aria-label=\"Next year\" (click)=\"nextYear()\">\n      <coar-icon name=\"chevrons-right\" source=\"coar-builtin\" size=\"sm\" />\n    </button>\n  </div>\n\n  <div class=\"coar-mini-calendar-weekdays\" [class.coar-mini-calendar-weekdays--with-weeks]=\"showWeekNumbers()\">\n    @if (showWeekNumbers()) {\n      <span class=\"coar-mini-calendar-week-spacer\"></span>\n    }\n    @for (day of daysOfWeek(); track day) {\n      <span class=\"coar-mini-calendar-weekday\">{{ day }}</span>\n    }\n  </div>\n\n  <div class=\"coar-mini-calendar-grid\" [class.coar-mini-calendar-grid--with-weeks]=\"showWeekNumbers()\" role=\"grid\">\n    @for (day of calendarDays(); track day.date.toString(); let i = $index) {\n      @if (showWeekNumbers() && i % 7 === 0) {\n        <span class=\"coar-mini-calendar-week-number\">{{ weekNumbers()[i / 7] }}</span>\n      }\n\n      <coar-popover [disabled]=\"day.isDisabled || day.markers.length === 0\" [openOnClick]=\"true\" [openOnHover]=\"true\" [interactive]=\"false\">\n        <button\n          coarPopoverTrigger\n          type=\"button\"\n          class=\"coar-mini-calendar-day\"\n          [class.coar-mini-calendar-day--outside]=\"day.isOutsideMonth\"\n          [class.coar-mini-calendar-day--today]=\"day.isToday\"\n          [class.coar-mini-calendar-day--selected]=\"day.isSelected\"\n          [class.coar-mini-calendar-day--focused]=\"day.isFocused\"\n          [class.coar-mini-calendar-day--disabled]=\"day.isDisabled\"\n          [class.coar-mini-calendar-day--weekend]=\"highlightWeekends() && day.isWeekend\"\n          [class.coar-mini-calendar-day--marked]=\"day.markers.length > 0\"\n          [class]=\"day.markerCssClass\"\n          [disabled]=\"day.isDisabled\"\n          [attr.aria-selected]=\"day.isSelected\"\n          [attr.aria-current]=\"day.isToday ? 'date' : null\"\n          [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n          (click)=\"selectDate(day.date)\"\n        >\n          {{ day.day }}\n        </button>\n\n        @if (day.markers.length > 0) {\n          <div coarPopoverContent class=\"coar-mini-calendar-marker-popover\">\n            <div class=\"coar-mini-calendar-marker-popover__list\">\n              @for (marker of getVisibleMarkers(day.markers); track marker.description) {\n                <div class=\"coar-mini-calendar-marker-popover__item\">\n                  {{ marker.description }}\n                </div>\n              }\n\n              @if (getHiddenMarkerCount(day.markers) > 0) {\n                <div class=\"coar-mini-calendar-marker-popover__more\">+{{ getHiddenMarkerCount(day.markers) }} other events</div>\n              }\n            </div>\n          </div>\n        }\n      </coar-popover>\n    }\n  </div>\n\n  @if (showTodayButton()) {\n    <div class=\"coar-mini-calendar-footer\">\n      <button type=\"button\" class=\"coar-mini-calendar-today\" (click)=\"selectDate(today)\">Today</button>\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.coar-mini-calendar{padding:var(--coar-spacing-m);min-width:280px;background:var(--coar-background-neutral-primary)}.coar-mini-calendar-header{display:flex;align-items:center;justify-content:space-between;gap:var(--coar-spacing-xs);margin-bottom:var(--coar-spacing-m)}.coar-mini-calendar-nav{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-secondary);cursor:pointer;border-radius:var(--coar-radius-xs);transition:background-color .15s ease,color .15s ease}.coar-mini-calendar-nav:hover{background:var(--coar-background-neutral-secondary);color:var(--coar-icon-neutral-primary)}.coar-mini-calendar-month-year{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;font-family:var(--coar-body-base-family);color:var(--coar-text-neutral-primary);line-height:1.2}.coar-mini-calendar-month{font-size:var(--coar-body-base-size);font-weight:var(--coar-body-base-weight)}.coar-mini-calendar-year{font-size:var(--coar-body-sm-size);font-weight:var(--coar-body-sm-weight);color:var(--coar-text-neutral-secondary)}.coar-mini-calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:var(--coar-spacing-xs)}.coar-mini-calendar-weekdays--with-weeks{grid-template-columns:32px repeat(7,1fr)}.coar-mini-calendar-weekday{display:flex;align-items:center;justify-content:center;height:32px;font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-secondary);text-transform:uppercase}.coar-mini-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.coar-mini-calendar-grid--with-weeks{position:relative;grid-template-columns:32px repeat(7,1fr)}.coar-mini-calendar-grid--with-weeks:before{content:\"\";position:absolute;left:30px;top:0;bottom:0;width:1px;background:var(--coar-border-neutral-secondary);opacity:.15}.coar-mini-calendar-week-number{display:flex;align-items:center;justify-content:center;min-height:32px;font-family:var(--coar-body-caption-family);font-size:10px;color:var(--coar-text-neutral-tertiary);opacity:.6}.coar-mini-calendar-day{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;min-height:32px;padding:2px;border:none;border-radius:0;background:transparent;background-clip:content-box;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);cursor:pointer;outline:none;transition:background-color .15s ease,color .15s ease}.coar-mini-calendar-day:hover:not(:disabled):not(.coar-mini-calendar-day--selected){background:var(--coar-background-neutral-secondary)}.coar-mini-calendar-day--outside{color:var(--coar-text-neutral-tertiary);opacity:.5}.coar-mini-calendar-day--today:not(.coar-mini-calendar-day--selected){font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-accent-primary);background:var(--coar-background-accent-tertiary)}.coar-mini-calendar-day--selected{background:var(--coar-background-accent-primary);color:var(--coar-text-on-bold);font-weight:var(--coar-body-small-bold-weight)}.coar-mini-calendar-day--selected:hover{background:var(--coar-background-accent-hover)}.coar-mini-calendar-day--focused:not(.coar-mini-calendar-day--selected){outline:2px solid var(--coar-border-accent-primary);outline-offset:-2px}.coar-mini-calendar-day--disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-mini-calendar-day--disabled:hover{background:transparent}.coar-mini-calendar-day--weekend{background:var(--coar-background-neutral-secondary)}.coar-mini-calendar-day--weekend:hover:not(:disabled):not(.coar-mini-calendar-day--selected){background:var(--coar-background-neutral-tertiary)}.coar-mini-calendar-day--weekend.coar-mini-calendar-day--selected{background:var(--coar-background-accent-primary)}.coar-mini-calendar-day--weekend.coar-mini-calendar-day--selected:hover{background:var(--coar-background-accent-hover)}.coar-mini-calendar-day--marked{position:relative}.coar-mini-calendar-day--marked:after{content:\"\";position:absolute;top:2px;left:2px;right:2px;height:3px;border-radius:1px;background:var(--coar-border-semantic-info-subtle);pointer-events:none}.coar-mini-calendar-day--marked.coar-mini-calendar-day--selected:after{background:var(--coar-text-on-bold)}.coar-mini-calendar-marker-popover__list{display:flex;flex-direction:column;gap:var(--coar-spacing-xs)}.coar-mini-calendar-marker-popover__item{font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);line-height:1.3}.coar-mini-calendar-marker-popover__more{font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-secondary);line-height:1.3}.coar-mini-calendar-footer{display:flex;justify-content:center;margin-top:var(--coar-spacing-m);padding-top:var(--coar-spacing-m);border-top:1px solid var(--coar-border-neutral-tertiary)}.coar-mini-calendar-today{padding:var(--coar-spacing-xs) var(--coar-spacing-m);border:none;border-radius:var(--coar-radius-xs);background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-accent-primary);cursor:pointer;transition:background-color .15s ease}.coar-mini-calendar-today:hover{background:var(--coar-background-accent-tertiary)}\n"], dependencies: [{ kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "source", "size", "rotate", "rotateTransition", "spin", "color", "label"] }, { kind: "component", type: CoarPopoverComponent, selector: "coar-popover", inputs: ["disabled", "openOnHover", "openOnClick", "interactive", "fallbackToBestFit", "clampToViewport"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarMiniCalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'coar-mini-calendar', standalone: true, imports: [CoarIconComponent, CoarPopoverComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [CoarPopoverGroupService], template: "<div class=\"coar-mini-calendar\" role=\"application\" (keydown)=\"onKeydown($event)\">\n  <div class=\"coar-mini-calendar-header\">\n    <button type=\"button\" class=\"coar-mini-calendar-nav\" aria-label=\"Previous year\" (click)=\"previousYear()\">\n      <coar-icon name=\"chevrons-left\" source=\"coar-builtin\" size=\"sm\" />\n    </button>\n    <button type=\"button\" class=\"coar-mini-calendar-nav\" aria-label=\"Previous month\" (click)=\"previousMonth()\">\n      <coar-icon name=\"chevron-left\" source=\"coar-builtin\" size=\"sm\" />\n    </button>\n\n    <span class=\"coar-mini-calendar-month-year\">\n      <span class=\"coar-mini-calendar-month\">{{ viewMonth() }}</span>\n      <span class=\"coar-mini-calendar-year\">{{ viewYear() }}</span>\n    </span>\n\n    <button type=\"button\" class=\"coar-mini-calendar-nav coar-mini-calendar-nav--next\" aria-label=\"Next month\" (click)=\"nextMonth()\">\n      <coar-icon name=\"chevron-right\" source=\"coar-builtin\" size=\"sm\" />\n    </button>\n    <button type=\"button\" class=\"coar-mini-calendar-nav coar-mini-calendar-nav--next\" aria-label=\"Next year\" (click)=\"nextYear()\">\n      <coar-icon name=\"chevrons-right\" source=\"coar-builtin\" size=\"sm\" />\n    </button>\n  </div>\n\n  <div class=\"coar-mini-calendar-weekdays\" [class.coar-mini-calendar-weekdays--with-weeks]=\"showWeekNumbers()\">\n    @if (showWeekNumbers()) {\n      <span class=\"coar-mini-calendar-week-spacer\"></span>\n    }\n    @for (day of daysOfWeek(); track day) {\n      <span class=\"coar-mini-calendar-weekday\">{{ day }}</span>\n    }\n  </div>\n\n  <div class=\"coar-mini-calendar-grid\" [class.coar-mini-calendar-grid--with-weeks]=\"showWeekNumbers()\" role=\"grid\">\n    @for (day of calendarDays(); track day.date.toString(); let i = $index) {\n      @if (showWeekNumbers() && i % 7 === 0) {\n        <span class=\"coar-mini-calendar-week-number\">{{ weekNumbers()[i / 7] }}</span>\n      }\n\n      <coar-popover [disabled]=\"day.isDisabled || day.markers.length === 0\" [openOnClick]=\"true\" [openOnHover]=\"true\" [interactive]=\"false\">\n        <button\n          coarPopoverTrigger\n          type=\"button\"\n          class=\"coar-mini-calendar-day\"\n          [class.coar-mini-calendar-day--outside]=\"day.isOutsideMonth\"\n          [class.coar-mini-calendar-day--today]=\"day.isToday\"\n          [class.coar-mini-calendar-day--selected]=\"day.isSelected\"\n          [class.coar-mini-calendar-day--focused]=\"day.isFocused\"\n          [class.coar-mini-calendar-day--disabled]=\"day.isDisabled\"\n          [class.coar-mini-calendar-day--weekend]=\"highlightWeekends() && day.isWeekend\"\n          [class.coar-mini-calendar-day--marked]=\"day.markers.length > 0\"\n          [class]=\"day.markerCssClass\"\n          [disabled]=\"day.isDisabled\"\n          [attr.aria-selected]=\"day.isSelected\"\n          [attr.aria-current]=\"day.isToday ? 'date' : null\"\n          [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n          (click)=\"selectDate(day.date)\"\n        >\n          {{ day.day }}\n        </button>\n\n        @if (day.markers.length > 0) {\n          <div coarPopoverContent class=\"coar-mini-calendar-marker-popover\">\n            <div class=\"coar-mini-calendar-marker-popover__list\">\n              @for (marker of getVisibleMarkers(day.markers); track marker.description) {\n                <div class=\"coar-mini-calendar-marker-popover__item\">\n                  {{ marker.description }}\n                </div>\n              }\n\n              @if (getHiddenMarkerCount(day.markers) > 0) {\n                <div class=\"coar-mini-calendar-marker-popover__more\">+{{ getHiddenMarkerCount(day.markers) }} other events</div>\n              }\n            </div>\n          </div>\n        }\n      </coar-popover>\n    }\n  </div>\n\n  @if (showTodayButton()) {\n    <div class=\"coar-mini-calendar-footer\">\n      <button type=\"button\" class=\"coar-mini-calendar-today\" (click)=\"selectDate(today)\">Today</button>\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.coar-mini-calendar{padding:var(--coar-spacing-m);min-width:280px;background:var(--coar-background-neutral-primary)}.coar-mini-calendar-header{display:flex;align-items:center;justify-content:space-between;gap:var(--coar-spacing-xs);margin-bottom:var(--coar-spacing-m)}.coar-mini-calendar-nav{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-secondary);cursor:pointer;border-radius:var(--coar-radius-xs);transition:background-color .15s ease,color .15s ease}.coar-mini-calendar-nav:hover{background:var(--coar-background-neutral-secondary);color:var(--coar-icon-neutral-primary)}.coar-mini-calendar-month-year{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;font-family:var(--coar-body-base-family);color:var(--coar-text-neutral-primary);line-height:1.2}.coar-mini-calendar-month{font-size:var(--coar-body-base-size);font-weight:var(--coar-body-base-weight)}.coar-mini-calendar-year{font-size:var(--coar-body-sm-size);font-weight:var(--coar-body-sm-weight);color:var(--coar-text-neutral-secondary)}.coar-mini-calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:var(--coar-spacing-xs)}.coar-mini-calendar-weekdays--with-weeks{grid-template-columns:32px repeat(7,1fr)}.coar-mini-calendar-weekday{display:flex;align-items:center;justify-content:center;height:32px;font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-secondary);text-transform:uppercase}.coar-mini-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.coar-mini-calendar-grid--with-weeks{position:relative;grid-template-columns:32px repeat(7,1fr)}.coar-mini-calendar-grid--with-weeks:before{content:\"\";position:absolute;left:30px;top:0;bottom:0;width:1px;background:var(--coar-border-neutral-secondary);opacity:.15}.coar-mini-calendar-week-number{display:flex;align-items:center;justify-content:center;min-height:32px;font-family:var(--coar-body-caption-family);font-size:10px;color:var(--coar-text-neutral-tertiary);opacity:.6}.coar-mini-calendar-day{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;min-height:32px;padding:2px;border:none;border-radius:0;background:transparent;background-clip:content-box;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);cursor:pointer;outline:none;transition:background-color .15s ease,color .15s ease}.coar-mini-calendar-day:hover:not(:disabled):not(.coar-mini-calendar-day--selected){background:var(--coar-background-neutral-secondary)}.coar-mini-calendar-day--outside{color:var(--coar-text-neutral-tertiary);opacity:.5}.coar-mini-calendar-day--today:not(.coar-mini-calendar-day--selected){font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-accent-primary);background:var(--coar-background-accent-tertiary)}.coar-mini-calendar-day--selected{background:var(--coar-background-accent-primary);color:var(--coar-text-on-bold);font-weight:var(--coar-body-small-bold-weight)}.coar-mini-calendar-day--selected:hover{background:var(--coar-background-accent-hover)}.coar-mini-calendar-day--focused:not(.coar-mini-calendar-day--selected){outline:2px solid var(--coar-border-accent-primary);outline-offset:-2px}.coar-mini-calendar-day--disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-mini-calendar-day--disabled:hover{background:transparent}.coar-mini-calendar-day--weekend{background:var(--coar-background-neutral-secondary)}.coar-mini-calendar-day--weekend:hover:not(:disabled):not(.coar-mini-calendar-day--selected){background:var(--coar-background-neutral-tertiary)}.coar-mini-calendar-day--weekend.coar-mini-calendar-day--selected{background:var(--coar-background-accent-primary)}.coar-mini-calendar-day--weekend.coar-mini-calendar-day--selected:hover{background:var(--coar-background-accent-hover)}.coar-mini-calendar-day--marked{position:relative}.coar-mini-calendar-day--marked:after{content:\"\";position:absolute;top:2px;left:2px;right:2px;height:3px;border-radius:1px;background:var(--coar-border-semantic-info-subtle);pointer-events:none}.coar-mini-calendar-day--marked.coar-mini-calendar-day--selected:after{background:var(--coar-text-on-bold)}.coar-mini-calendar-marker-popover__list{display:flex;flex-direction:column;gap:var(--coar-spacing-xs)}.coar-mini-calendar-marker-popover__item{font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);line-height:1.3}.coar-mini-calendar-marker-popover__more{font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-secondary);line-height:1.3}.coar-mini-calendar-footer{display:flex;justify-content:center;margin-top:var(--coar-spacing-m);padding-top:var(--coar-spacing-m);border-top:1px solid var(--coar-border-neutral-tertiary)}.coar-mini-calendar-today{padding:var(--coar-spacing-xs) var(--coar-spacing-m);border:none;border-radius:var(--coar-radius-xs);background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-accent-primary);cursor:pointer;transition:background-color .15s ease}.coar-mini-calendar-today:hover{background:var(--coar-background-accent-tertiary)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueChange: [{ 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 }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], dateFormatConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormatConfig", required: false }] }], showTodayButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTodayButton", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], highlightWeekends: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightWeekends", required: false }] }], markers: [{ type: i0.Input, args: [{ isSignal: true, alias: "markers", required: false }] }] } });
+
 /**
  * Date picker component using Temporal API.
  *
@@ -4029,19 +4416,15 @@ function getLocalizedWeekdays(locale, firstDayOfWeek) {
  * ```
  */
 class CoarDatePickerComponent extends CoarControlValueAccessor {
-    elementRef = inject(ElementRef);
     destroyRef = inject(DestroyRef);
     overlayBuilder = createOverlayBuilder();
     localizationService = inject(CoarLocalizationService, { optional: true });
     localizationDataStore = inject(CoarLocalizationDataStore, { optional: true });
     overlayRef = null;
     /** Current language from localization service (reactive) */
-    currentLanguage = computed(() => {
-        // Use the language Signal from service if available, otherwise undefined
-        const lang = this.localizationService?.language();
-        console.debug('[CoarDatePicker] currentLanguage computed:', lang);
-        return lang;
-    }, ...(ngDevMode ? [{ debugName: "currentLanguage" }] : []));
+    currentLanguage = toSignal(this.localizationService?.languageState.value$ ?? of(''), {
+        initialValue: this.localizationService?.languageState.value ?? '',
+    });
     // ============================================================
     // Inputs
     // ============================================================
@@ -4084,28 +4467,6 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
     /** Date markers for highlighting special dates (holidays, events, etc.) */
     markers = input([], ...(ngDevMode ? [{ debugName: "markers" }] : []));
     // ============================================================
-    // Marker Popover Rendering
-    // ============================================================
-    /** Maximum number of lines shown in the marker popover (including "+N" line). */
-    markerPopoverMaxLines = 5;
-    /**
-     * Visible markers before switching to "+N other events".
-     * With a max of 5 lines, we show 4 markers + one summary line.
-     */
-    markerPopoverVisibleMarkers = 4;
-    getVisibleMarkers(markers) {
-        if (markers.length <= this.markerPopoverMaxLines) {
-            return markers;
-        }
-        return markers.slice(0, this.markerPopoverVisibleMarkers);
-    }
-    getHiddenMarkerCount(markers) {
-        if (markers.length <= this.markerPopoverMaxLines) {
-            return 0;
-        }
-        return Math.max(0, markers.length - this.markerPopoverVisibleMarkers);
-    }
-    // ============================================================
     // Model & Outputs
     // ============================================================
     /** Current selected date (two-way bindable with [(value)]) */
@@ -4135,20 +4496,8 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
     /** Calendar dropdown position (chosen before opening) */
     calendarPosition = signal('bottom', ...(ngDevMode ? [{ debugName: "calendarPosition" }] : []));
-    /** Currently viewed month/year in the calendar */
-    viewDate = signal(Temporal.Now.plainDateISO().toPlainYearMonth(), ...(ngDevMode ? [{ debugName: "viewDate" }] : []));
-    /** Focused date in the calendar (for keyboard navigation) */
-    focusedDate = signal(null, ...(ngDevMode ? [{ debugName: "focusedDate" }] : []));
     /** Display value for the input field */
     displayValue = signal('', ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
-    /** Days of week header (localized based on locale and firstDayOfWeek) */
-    daysOfWeek = computed(() => {
-        const locale = this.effectiveLocale();
-        const firstDay = this.firstDayOfWeek();
-        const days = getLocalizedWeekdays(locale, firstDay);
-        console.debug('[CoarDatePicker] daysOfWeek - locale:', locale, 'firstDay:', firstDay, 'days:', days);
-        return days;
-    }, ...(ngDevMode ? [{ debugName: "daysOfWeek" }] : []));
     /** Reference to the input element */
     inputRef = viewChild('dateInput', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
     /** Reference to the trigger element */
@@ -4169,9 +4518,9 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
             return directConfig;
         }
         // 2. Try to get from localization data store (which uses Intl with proper firstDayOfWeek detection)
-        const currentLang = this.localizationService?.getCurrentLanguage();
-        const localeData = currentLang
-            ? this.localizationDataStore?.getLocaleData(currentLang)
+        const storeLocale = this.locale() ?? this.currentLanguage();
+        const localeData = storeLocale
+            ? this.localizationDataStore?.getLocaleData(storeLocale)
             : undefined;
         if (localeData?.date) {
             return {
@@ -4181,25 +4530,8 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
         }
         // 3. Fallback to Intl detection (for components without localization service)
         const locale = this.effectiveLocale();
-        try {
-            const formatter = new Intl.DateTimeFormat(locale);
-            const parts = formatter.formatToParts(new Date(2024, 0, 15));
-            const dayIndex = parts.findIndex((p) => p.type === 'day');
-            const monthIndex = parts.findIndex((p) => p.type === 'month');
-            const yearIndex = parts.findIndex((p) => p.type === 'year');
-            let pattern = 'dd.mm.yyyy';
-            if (dayIndex < monthIndex && monthIndex < yearIndex)
-                pattern = 'dd.mm.yyyy';
-            else if (monthIndex < dayIndex && dayIndex < yearIndex)
-                pattern = 'mm/dd/yyyy';
-            else if (yearIndex < monthIndex && monthIndex < dayIndex)
-                pattern = 'yyyy-mm-dd';
-            return { pattern, firstDayOfWeek: 1 };
-        }
-        catch {
-            // 4. Final fallback
-            return { pattern: 'dd.mm.yyyy', firstDayOfWeek: 1 };
-        }
+        const detectedPattern = coarDetectDateFormatPatternFromIntl(locale);
+        return { pattern: detectedPattern ?? 'dd.mm.yyyy', firstDayOfWeek: 1 };
     }, ...(ngDevMode ? [{ debugName: "effectiveDateFormat" }] : []));
     /** Get the date format pattern */
     dateFormat = computed(() => this.effectiveDateFormat().pattern, ...(ngDevMode ? [{ debugName: "dateFormat" }] : []));
@@ -4207,12 +4539,7 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
     firstDayOfWeek = computed(() => this.effectiveDateFormat().firstDayOfWeek, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : []));
     /** Get the separator character for the current date format */
     separator = computed(() => {
-        const format = this.dateFormat();
-        if (format.includes('.'))
-            return '.';
-        if (format.includes('/'))
-            return '/';
-        return '-';
+        return coarGetDateSeparatorForPattern(this.dateFormat());
     }, ...(ngDevMode ? [{ debugName: "separator" }] : []));
     /** Get placeholder text based on date format */
     inputPlaceholder = computed(() => {
@@ -4223,94 +4550,12 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
      * Priority: input locale > locale service language > browser locale
      */
     effectiveLocale = computed(() => {
-        const localeInput = this.locale();
-        const currentLang = this.currentLanguage();
-        const effective = localeInput ?? currentLang ?? navigator.language;
-        console.debug('[CoarDatePicker] effectiveLocale - input:', localeInput, 'currentLang:', currentLang, 'effective:', effective);
-        return effective;
+        return this.locale() ?? this.currentLanguage() ?? navigator.language;
     }, ...(ngDevMode ? [{ debugName: "effectiveLocale" }] : []));
     /** Whether the picker has an error state */
     hasError = computed(() => this.error(), ...(ngDevMode ? [{ debugName: "hasError" }] : []));
     /** Whether the picker is disabled */
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
-    /** Calendar grid for current view month */
-    calendarDays = computed(() => {
-        const viewMonth = this.viewDate();
-        const firstDay = viewMonth.toPlainDate({ day: 1 });
-        const daysInMonth = viewMonth.daysInMonth;
-        // Find what day of week the month starts on (1 = Monday, 7 = Sunday in Temporal)
-        const startDayOfWeek = firstDay.dayOfWeek;
-        const firstDayOfWeekSetting = this.firstDayOfWeek();
-        // Calculate days from previous month to show
-        // If firstDayOfWeek is 1 (Monday): offset from Monday
-        // If firstDayOfWeek is 7 (Sunday): offset from Sunday
-        let daysFromPrevMonth;
-        if (firstDayOfWeekSetting === 1) {
-            // Monday first: Monday=0, Tuesday=1, ..., Sunday=6
-            daysFromPrevMonth = (startDayOfWeek - 1 + 7) % 7;
-        }
-        else {
-            // Sunday first: Sunday=0, Monday=1, ..., Saturday=6
-            // Temporal uses: Sunday=7, so we convert
-            daysFromPrevMonth = startDayOfWeek % 7;
-        }
-        const days = [];
-        // Previous month days
-        if (daysFromPrevMonth > 0) {
-            const prevMonth = viewMonth.subtract({ months: 1 });
-            const prevMonthDays = prevMonth.daysInMonth;
-            for (let i = daysFromPrevMonth - 1; i >= 0; i--) {
-                const day = prevMonth.toPlainDate({ day: prevMonthDays - i });
-                days.push(this.createCalendarDay(day, true));
-            }
-        }
-        // Current month days
-        for (let d = 1; d <= daysInMonth; d++) {
-            const day = viewMonth.toPlainDate({ day: d });
-            days.push(this.createCalendarDay(day, false));
-        }
-        // Next month days to fill the grid (6 rows * 7 days = 42)
-        const remainingDays = 42 - days.length;
-        const nextMonth = viewMonth.add({ months: 1 });
-        for (let d = 1; d <= remainingDays; d++) {
-            const day = nextMonth.toPlainDate({ day: d });
-            days.push(this.createCalendarDay(day, true));
-        }
-        return days;
-    }, ...(ngDevMode ? [{ debugName: "calendarDays" }] : []));
-    /** Month name for calendar header */
-    viewMonth = computed(() => {
-        const viewMonth = this.viewDate();
-        const locale = this.effectiveLocale();
-        const formatter = new Intl.DateTimeFormat(locale, {
-            month: 'long',
-        });
-        const jsDate = new Date(viewMonth.year, viewMonth.month - 1, 1);
-        const monthName = formatter.format(jsDate);
-        console.debug('[CoarDatePicker] viewMonth - locale:', locale, 'month:', viewMonth.month, 'name:', monthName);
-        return monthName;
-    }, ...(ngDevMode ? [{ debugName: "viewMonth" }] : []));
-    /** Year for calendar header */
-    viewYear = computed(() => {
-        return this.viewDate().year;
-    }, ...(ngDevMode ? [{ debugName: "viewYear" }] : []));
-    /** Week numbers for each row (6 rows) */
-    weekNumbers = computed(() => {
-        const days = this.calendarDays();
-        const weeks = [];
-        // Get the first day of each week (every 7 days)
-        for (let i = 0; i < 6; i++) {
-            const firstDayOfWeek = days[i * 7];
-            if (firstDayOfWeek) {
-                // weekOfYear may be undefined in some Temporal implementations
-                const weekNum = firstDayOfWeek.date.weekOfYear ?? this.calculateISOWeek(firstDayOfWeek.date);
-                weeks.push(weekNum);
-            }
-        }
-        return weeks;
-    }, ...(ngDevMode ? [{ debugName: "weekNumbers" }] : []));
-    /** Today's date */
-    today = Temporal.Now.plainDateISO();
     // ============================================================
     // Constructor & Lifecycle
     // ============================================================
@@ -4320,21 +4565,20 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
         effect(() => {
             const val = this.value();
             if (val) {
-                this.displayValue.set(this.formatDateForDisplay(val));
-                if (!this.isOpen()) {
-                    this.viewDate.set(val.toPlainYearMonth());
-                }
+                this.displayValue.set(coarFormatPlainDate(val, this.dateFormat()));
             }
             else {
                 this.displayValue.set('');
             }
         });
-        // Initialize Maskito after render
-        afterNextRender(() => {
+        // Keep Maskito config in sync with date format + constraints.
+        effect(() => {
             const inputElement = this.inputRef()?.nativeElement;
-            if (inputElement) {
-                this.initializeMaskito(inputElement);
+            if (!inputElement) {
+                return;
             }
+            this.maskitoInstance?.destroy();
+            this.initializeMaskito(inputElement);
         });
         // Cleanup on destroy
         this.destroyRef.onDestroy(() => {
@@ -4373,17 +4617,12 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
             .open({});
         this.overlayRef = ref;
         this.isOpen.set(true);
-        // Set initial focus date
-        const current = this.value() ?? this.today;
-        this.focusedDate.set(current);
-        this.viewDate.set(current.toPlainYearMonth());
         this.opened.emit();
         ref.afterClosed$.subscribe(() => {
             if (this.overlayRef !== ref)
                 return;
             this.overlayRef = null;
             this.isOpen.set(false);
-            this.focusedDate.set(null);
             this.closed.emit();
         });
     }
@@ -4395,7 +4634,6 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
         this.overlayRef = null;
         ref?.close();
         this.isOpen.set(false);
-        this.focusedDate.set(null);
         this.closed.emit();
     }
     /** Toggle the calendar dropdown */
@@ -4407,21 +4645,16 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
             this.openCalendar();
         }
     }
-    /** Select a date */
-    selectDate(date) {
+    onMiniCalendarValueChange(date) {
+        if (!date)
+            return;
         if (this.isDateDisabled(date))
             return;
         this.value.set(date);
         this.valueChange.emit(date);
         this.cvaOnChange(date);
-        // Move keyboard focus to selected date
-        this.focusedDate.set(date);
         // Calendar stays open - closes via click outside, Tab, or Escape
     }
-    /** Select today's date */
-    selectToday() {
-        this.selectDate(this.today);
-    }
     /** Clear the selected date */
     clearDate(event) {
         event.stopPropagation();
@@ -4429,27 +4662,6 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
         this.valueChange.emit(null);
         this.cvaOnChange(null);
     }
-    /** Navigate to previous month */
-    previousMonth() {
-        this.viewDate.update((d) => d.subtract({ months: 1 }));
-    }
-    /** Navigate to next month */
-    nextMonth() {
-        this.viewDate.update((d) => d.add({ months: 1 }));
-    }
-    /** Navigate to previous year */
-    previousYear() {
-        this.viewDate.update((d) => d.subtract({ years: 1 }));
-    }
-    /** Navigate to next year */
-    nextYear() {
-        this.viewDate.update((d) => d.add({ years: 1 }));
-    }
-    /** Go to today's month */
-    goToToday() {
-        this.viewDate.set(this.today.toPlainYearMonth());
-        this.focusedDate.set(this.today);
-    }
     // ============================================================
     // CVA Methods
     // ============================================================
@@ -4476,63 +4688,6 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
     onTriggerClick() {
         this.toggleCalendar();
     }
-    onDocumentKeydown(event) {
-        if (!this.isOpen())
-            return;
-        switch (event.key) {
-            case 'Escape':
-                event.preventDefault();
-                this.closeCalendar();
-                break;
-            case 'Enter':
-            case ' ': {
-                event.preventDefault();
-                const focused = this.focusedDate();
-                if (focused) {
-                    this.selectDate(focused);
-                }
-                break;
-            }
-            case 'ArrowLeft':
-                event.preventDefault();
-                this.moveFocus(-1, 'day');
-                break;
-            case 'ArrowRight':
-                event.preventDefault();
-                this.moveFocus(1, 'day');
-                break;
-            case 'ArrowUp':
-                event.preventDefault();
-                this.moveFocus(-7, 'day');
-                break;
-            case 'ArrowDown':
-                event.preventDefault();
-                this.moveFocus(7, 'day');
-                break;
-            case 'PageUp':
-                event.preventDefault();
-                if (event.shiftKey) {
-                    this.moveFocus(-1, 'year');
-                }
-                else {
-                    this.moveFocus(-1, 'month');
-                }
-                break;
-            case 'PageDown':
-                event.preventDefault();
-                if (event.shiftKey) {
-                    this.moveFocus(1, 'year');
-                }
-                else {
-                    this.moveFocus(1, 'month');
-                }
-                break;
-            case 'Home':
-                event.preventDefault();
-                this.goToToday();
-                break;
-        }
-    }
     onTriggerKeydown(event) {
         if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
             event.preventDefault();
@@ -4572,7 +4727,6 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
         const parsed = this.parseDateFromInput(text);
         if (parsed) {
             this.value.set(parsed);
-            this.viewDate.set(parsed.toPlainYearMonth());
             this.cvaOnTouched();
             this.valueChange.emit(parsed);
         }
@@ -4590,7 +4744,7 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
             // Invalid date entered - reset to current value or clear
             const val = this.value();
             if (val) {
-                this.displayValue.set(this.formatDateForDisplay(val));
+                this.displayValue.set(coarFormatPlainDate(val, this.dateFormat()));
             }
             else {
                 this.displayValue.set('');
@@ -4621,145 +4775,20 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
         const options = maskitoDateOptionsGenerator({
             mode: modeMap[format],
             separator,
-            min: minDate ? this.temporalToDate(minDate) : undefined,
-            max: maxDate ? this.temporalToDate(maxDate) : undefined,
+            min: minDate ? coarTemporalPlainDateToDate(minDate) : undefined,
+            max: maxDate ? coarTemporalPlainDateToDate(maxDate) : undefined,
         });
         this.maskitoInstance = new Maskito(inputElement, options);
     }
-    /**
-     * Convert Temporal.PlainDate to native Date for Maskito compatibility.
-     */
-    temporalToDate(temporal) {
-        return new Date(temporal.year, temporal.month - 1, temporal.day);
-    }
-    /**
-     * Calculate ISO week number for a date.
-     * ISO weeks start on Monday and week 1 contains the first Thursday of the year.
-     */
-    calculateISOWeek(date) {
-        const jsDate = this.temporalToDate(date);
-        const dayOfWeek = jsDate.getDay() || 7; // Convert Sunday (0) to 7
-        // Set to nearest Thursday (ISO week date algorithm)
-        jsDate.setDate(jsDate.getDate() + 4 - dayOfWeek);
-        const yearStart = new Date(jsDate.getFullYear(), 0, 1);
-        // Calculate full weeks to nearest Thursday
-        return Math.ceil(((jsDate.getTime() - yearStart.getTime()) / 86400000 + 1) / 7);
-    }
-    /**
-     * Format a Temporal.PlainDate for display according to the configured format.
-     */
-    formatDateForDisplay(date) {
-        const format = this.dateFormat();
-        const sep = this.separator();
-        const day = String(date.day).padStart(2, '0');
-        const month = String(date.month).padStart(2, '0');
-        const year = String(date.year);
-        switch (format) {
-            case 'dd.mm.yyyy':
-            case 'dd/mm/yyyy':
-                return `${day}${sep}${month}${sep}${year}`;
-            case 'mm/dd/yyyy':
-                return `${month}${sep}${day}${sep}${year}`;
-            case 'yyyy-mm-dd':
-                return `${year}${sep}${month}${sep}${day}`;
-            default:
-                return `${day}${sep}${month}${sep}${year}`;
-        }
-    }
     /**
      * Parse a date string in the configured format to Temporal.PlainDate.
      * Returns null if the string is incomplete or invalid.
      */
     parseDateFromInput(text) {
-        if (!text)
-            return null;
-        const sep = this.separator();
-        const parts = text.split(sep);
-        if (parts.length !== 3)
-            return null;
-        // Check all parts are complete numbers
-        if (parts.some((p) => p.length === 0 || !/^\d+$/.test(p)))
-            return null;
-        const format = this.dateFormat();
-        let year, month, day;
-        try {
-            switch (format) {
-                case 'dd.mm.yyyy':
-                case 'dd/mm/yyyy':
-                    day = parseInt(parts[0], 10);
-                    month = parseInt(parts[1], 10);
-                    year = parseInt(parts[2], 10);
-                    break;
-                case 'mm/dd/yyyy':
-                    month = parseInt(parts[0], 10);
-                    day = parseInt(parts[1], 10);
-                    year = parseInt(parts[2], 10);
-                    break;
-                case 'yyyy-mm-dd':
-                    year = parseInt(parts[0], 10);
-                    month = parseInt(parts[1], 10);
-                    day = parseInt(parts[2], 10);
-                    break;
-                default:
-                    return null;
-            }
-            // Validate ranges before creating Temporal.PlainDate
-            if (year < 1 || month < 1 || month > 12 || day < 1 || day > 31) {
-                return null;
-            }
-            const date = Temporal.PlainDate.from({ year, month, day });
-            // Check against min/max bounds
-            const minDate = this.min();
-            const maxDate = this.max();
-            if (minDate && Temporal.PlainDate.compare(date, minDate) < 0) {
-                return null;
-            }
-            if (maxDate && Temporal.PlainDate.compare(date, maxDate) > 0) {
-                return null;
-            }
-            return date;
-        }
-        catch {
-            // Invalid date (e.g., Feb 30)
-            return null;
-        }
-    }
-    createCalendarDay(date, isOutsideMonth) {
-        const selected = this.value();
-        const focused = this.focusedDate();
-        // Temporal dayOfWeek: 1=Monday ... 6=Saturday, 7=Sunday
-        const dayOfWeek = date.dayOfWeek;
-        const markers = this.getMarkersForDate(date);
-        return {
-            date,
-            day: date.day,
-            isOutsideMonth,
-            isToday: Temporal.PlainDate.compare(date, this.today) === 0,
-            isSelected: selected ? Temporal.PlainDate.compare(date, selected) === 0 : false,
-            isFocused: focused ? Temporal.PlainDate.compare(date, focused) === 0 : false,
-            isDisabled: this.isDateDisabled(date),
-            isWeekend: dayOfWeek === 6 || dayOfWeek === 7,
-            markers,
-            markerCssClass: markers[0]?.cssClass ?? null,
-        };
-    }
-    /**
-     * Find all markers that apply to the given date.
-     * Checks if date falls within any marker's range.
-     */
-    getMarkersForDate(date) {
-        const markers = this.markers();
-        const matches = [];
-        for (const marker of markers) {
-            const start = marker.startDate;
-            const end = marker.endDate ?? marker.startDate;
-            // Check if date is within marker range (inclusive)
-            if (Temporal.PlainDate.compare(date, start) >= 0 &&
-                Temporal.PlainDate.compare(date, end) <= 0) {
-                matches.push(marker);
-            }
-        }
-        return matches;
+        return coarParsePlainDateFromInput(text, this.dateFormat(), {
+            min: this.min(),
+            max: this.max(),
+        });
     }
     isDateDisabled(date) {
         const minDate = this.min();
@@ -4772,38 +4801,12 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
         }
         return false;
     }
-    moveFocus(amount, unit) {
-        const current = this.focusedDate() ?? this.value() ?? this.today;
-        let newDate;
-        switch (unit) {
-            case 'day':
-                newDate = current.add({ days: amount });
-                break;
-            case 'month':
-                newDate = current.add({ months: amount });
-                break;
-            case 'year':
-                newDate = current.add({ years: amount });
-                break;
-        }
-        // Check bounds
-        const minDate = this.min();
-        const maxDate = this.max();
-        if (minDate && Temporal.PlainDate.compare(newDate, minDate) < 0) {
-            newDate = minDate;
-        }
-        if (maxDate && Temporal.PlainDate.compare(newDate, maxDate) > 0) {
-            newDate = maxDate;
-        }
-        this.focusedDate.set(newDate);
-        this.viewDate.set(newDate.toPlainYearMonth());
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarDatePickerComponent, isStandalone: true, selector: "coar-date-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", 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 }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dateFormatConfig: { classPropertyName: "dateFormatConfig", publicName: "dateFormatConfig", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, highlightWeekends: { classPropertyName: "highlightWeekends", publicName: "highlightWeekends", isSignal: true, isRequired: false, transformFunction: null }, markers: { classPropertyName: "markers", publicName: "markers", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:keydown": "onDocumentKeydown($event)" }, properties: { "class.coar-date-picker--xs": "size() === \"xs\"", "class.coar-date-picker--sm": "size() === \"sm\"", "class.coar-date-picker--md": "size() === \"md\"", "class.coar-date-picker--lg": "size() === \"lg\"", "class.coar-date-picker--disabled": "isDisabled()", "class.coar-date-picker--readonly": "readonly()", "class.coar-date-picker--error": "hasError()", "class.coar-date-picker--open": "isOpen()" } }, providers: [coarProvideValueAccessor(() => CoarDatePickerComponent), CoarPopoverGroupService], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "calendarTemplateRef", first: true, predicate: ["calendarTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coar-date-picker-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n    <span class=\"coar-date-picker-label\" [attr.id]=\"labelId()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"coar-date-picker-required\" aria-hidden=\"true\">*</span>\n      }\n    </span>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    class=\"coar-date-picker-trigger\"\n    [class.coar-date-picker-trigger--disabled]=\"isDisabled()\"\n    [class.coar-date-picker-trigger--readonly]=\"readonly()\"\n    [class.coar-date-picker-trigger--error]=\"hasError()\"\n    [class.coar-date-picker-trigger--open]=\"isOpen()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-controls]=\"isOpen() ? calendarId() : null\"\n    role=\"combobox\"\n  >\n    <!-- Clear Button (left side) - always present to prevent CLS -->\n    <coar-icon\n      name=\"x\"\n      source=\"coar-builtin\"\n      size=\"auto\"\n      class=\"coar-date-picker-clear\"\n      [class.coar-date-picker-clear--hidden]=\"!value() || isDisabled() || readonly()\"\n      aria-hidden=\"true\"\n      (click)=\"clearDate($event)\"\n    />\n\n    <!-- Date Input -->\n    <input\n      #dateInput\n      type=\"text\"\n      class=\"coar-date-picker-input\"\n      [attr.id]=\"inputId()\"\n      [value]=\"displayValue()\"\n      [placeholder]=\"placeholder() || inputPlaceholder()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\n      [attr.aria-invalid]=\"hasError()\"\n      autocomplete=\"off\"\n      (input)=\"onInputChange($event)\"\n      (blur)=\"onInputBlur()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n    />\n\n    <!-- Calendar Icon (right side) -->\n    <button\n      type=\"button\"\n      class=\"coar-date-picker-calendar-btn\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled() || readonly()\"\n      (click)=\"onTriggerClick()\"\n    >\n      <coar-icon name=\"calendar\" source=\"coar-builtin\" size=\"sm\" />\n    </button>\n  </div>\n\n  <!-- Calendar Dropdown (rendered via @cocoar/ui-overlay) -->\n  <ng-template #calendarTemplate>\n    <div\n      class=\"coar-date-picker-calendar coar-date-picker-calendar--overlay\"\n      [class.coar-date-picker-calendar--top]=\"calendarPosition() === 'top'\"\n      [attr.id]=\"calendarId()\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"Calendar\"\n    >\n      <!-- Calendar Header -->\n      <div class=\"coar-date-picker-header\">\n        <button type=\"button\" class=\"coar-date-picker-nav\" aria-label=\"Previous year\" (click)=\"previousYear()\">\n          <coar-icon name=\"chevrons-left\" source=\"coar-builtin\" size=\"sm\" />\n        </button>\n        <button type=\"button\" class=\"coar-date-picker-nav\" aria-label=\"Previous month\" (click)=\"previousMonth()\">\n          <coar-icon name=\"chevron-left\" source=\"coar-builtin\" size=\"sm\" />\n        </button>\n\n        <span class=\"coar-date-picker-month-year\">\n          <span class=\"coar-date-picker-month\">{{ viewMonth() }}</span>\n          <span class=\"coar-date-picker-year\">{{ viewYear() }}</span>\n        </span>\n\n        <button type=\"button\" class=\"coar-date-picker-nav coar-date-picker-nav--next\" aria-label=\"Next month\" (click)=\"nextMonth()\">\n          <coar-icon name=\"chevron-right\" source=\"coar-builtin\" size=\"sm\" />\n        </button>\n        <button type=\"button\" class=\"coar-date-picker-nav coar-date-picker-nav--next\" aria-label=\"Next year\" (click)=\"nextYear()\">\n          <coar-icon name=\"chevrons-right\" source=\"coar-builtin\" size=\"sm\" />\n        </button>\n      </div>\n\n      <!-- Days of Week Header -->\n      <div class=\"coar-date-picker-weekdays\" [class.coar-date-picker-weekdays--with-weeks]=\"showWeekNumbers()\">\n        @if (showWeekNumbers()) {\n          <span class=\"coar-date-picker-week-spacer\"></span>\n        }\n        @for (day of daysOfWeek(); track day) {\n          <span class=\"coar-date-picker-weekday\">{{ day }}</span>\n        }\n      </div>\n\n      <!-- Calendar Grid -->\n      <div class=\"coar-date-picker-grid\" [class.coar-date-picker-grid--with-weeks]=\"showWeekNumbers()\" role=\"grid\">\n        @for (day of calendarDays(); track day.date.toString(); let i = $index) {\n          <!-- Week number at start of each row -->\n          @if (showWeekNumbers() && i % 7 === 0) {\n            <span class=\"coar-date-picker-week-number\">{{ weekNumbers()[i / 7] }}</span>\n          }\n          <coar-popover [disabled]=\"day.isDisabled || day.markers.length === 0\" [openOnClick]=\"true\" [openOnHover]=\"true\" [interactive]=\"false\">\n            <button\n              coarPopoverTrigger\n              type=\"button\"\n              class=\"coar-date-picker-day\"\n              [class.coar-date-picker-day--outside]=\"day.isOutsideMonth\"\n              [class.coar-date-picker-day--today]=\"day.isToday\"\n              [class.coar-date-picker-day--selected]=\"day.isSelected\"\n              [class.coar-date-picker-day--focused]=\"day.isFocused\"\n              [class.coar-date-picker-day--disabled]=\"day.isDisabled\"\n              [class.coar-date-picker-day--weekend]=\"highlightWeekends() && day.isWeekend\"\n              [class.coar-date-picker-day--marked]=\"day.markers.length > 0\"\n              [class]=\"day.markerCssClass\"\n              [disabled]=\"day.isDisabled\"\n              [attr.aria-selected]=\"day.isSelected\"\n              [attr.aria-current]=\"day.isToday ? 'date' : null\"\n              [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n              (click)=\"selectDate(day.date)\"\n            >\n              {{ day.day }}\n            </button>\n\n            @if (day.markers.length > 0) {\n              <div coarPopoverContent class=\"coar-date-picker-marker-popover\">\n                <div class=\"coar-date-picker-marker-popover__list\">\n                  @for (marker of getVisibleMarkers(day.markers); track marker.description) {\n                    <div class=\"coar-date-picker-marker-popover__item\">\n                      {{ marker.description }}\n                    </div>\n                  }\n\n                  @if (getHiddenMarkerCount(day.markers) > 0) {\n                    <div class=\"coar-date-picker-marker-popover__more\">+{{ getHiddenMarkerCount(day.markers) }} other events</div>\n                  }\n                </div>\n              </div>\n            }\n          </coar-popover>\n        }\n      </div>\n\n      <!-- Footer with Today Button -->\n      @if (showTodayButton()) {\n        <div class=\"coar-date-picker-footer\">\n          <button type=\"button\" class=\"coar-date-picker-today\" (click)=\"selectToday()\">Today</button>\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <!-- Helper/Error Message -->\n  @if (message()) {\n    <span class=\"coar-date-picker-message\" [class.coar-date-picker-message--error]=\"hasError()\">\n      {{ message() }}\n    </span>\n  }\n</div>\n", styles: [":host{display:block;position:relative}.coar-date-picker-wrapper{display:flex;flex-direction:column;width:100%}.coar-date-picker-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-date-picker-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}:host(.coar-date-picker--xs) .coar-date-picker-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-date-picker--sm) .coar-date-picker-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-date-picker--lg) .coar-date-picker-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-date-picker-trigger{display:flex;align-items:center;gap:var(--coar-spacing-s);height:var(--coar-component-md-height);padding:0;border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.coar-date-picker-trigger:hover:not(.coar-date-picker-trigger--disabled):not(.coar-date-picker-trigger--readonly):not(.coar-date-picker-trigger--error){border-color:var(--coar-border-input-hover)}.coar-date-picker-trigger:focus,.coar-date-picker-trigger:focus-within{outline:none;border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-date-picker-trigger--open:not(.coar-date-picker-trigger--error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-date-picker-trigger--disabled{background:var(--coar-surface-input-disabled);cursor:not-allowed;opacity:.6}.coar-date-picker-trigger--readonly{cursor:default}.coar-date-picker-trigger--error{border-color:var(--coar-border-semantic-error-bold)}.coar-date-picker-trigger--error:focus,.coar-date-picker-trigger--error.coar-date-picker-trigger--open{box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold)}:host(.coar-date-picker--xs) .coar-date-picker-trigger{height:var(--coar-component-xs-height);padding:0 var(--coar-spacing-s);gap:var(--coar-spacing-xs)}:host(.coar-date-picker--sm) .coar-date-picker-trigger{height:var(--coar-component-sm-height);padding:0 var(--coar-spacing-s)}:host(.coar-date-picker--lg) .coar-date-picker-trigger{height:var(--coar-component-lg-height);padding:0 var(--coar-spacing-l)}.coar-date-picker-input{flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);outline:none;cursor:text;text-align:right}.coar-date-picker-input::selection{text-align:right}.coar-date-picker-input::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-date-picker-input:disabled{cursor:not-allowed;color:var(--coar-text-neutral-disabled)}.coar-date-picker-input:read-only{cursor:default}:host(.coar-date-picker--xs) .coar-date-picker-input{font-size:var(--coar-component-xs-font-size)}:host(.coar-date-picker--sm) .coar-date-picker-input{font-size:var(--coar-component-sm-font-size)}:host(.coar-date-picker--lg) .coar-date-picker-input{font-size:var(--coar-component-lg-font-size)}.coar-date-picker-clear{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--coar-spacing-s);color:var(--coar-icon-neutral-disabled);cursor:pointer;transition:color .15s ease,opacity .15s ease;opacity:.4}.coar-date-picker-clear--hidden{opacity:0;pointer-events:none}.coar-date-picker-trigger:hover .coar-date-picker-clear:not(.coar-date-picker-clear--hidden){opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-date-picker--open) .coar-date-picker-clear:not(.coar-date-picker-clear--hidden){opacity:1;color:var(--coar-icon-neutral-tertiary)}.coar-date-picker-clear:hover:not(.coar-date-picker-clear--hidden){opacity:1;color:var(--coar-icon-neutral-primary)}.coar-date-picker-calendar-btn{display:flex;align-items:center;justify-content:center;padding:0;margin-right:var(--coar-spacing-s);border:none;background:transparent;color:var(--coar-icon-neutral-secondary);cursor:pointer;transition:color .15s ease}.coar-date-picker-calendar-btn:hover:not(:disabled){color:var(--coar-icon-neutral-primary)}.coar-date-picker-calendar-btn:disabled{cursor:not-allowed;color:var(--coar-icon-neutral-disabled)}.coar-date-picker-calendar{position:absolute;top:100%;left:0;z-index:1000;margin-top:var(--coar-spacing-xs);padding:var(--coar-spacing-m);min-width:280px;background:var(--coar-background-neutral-primary);border:1px solid var(--coar-border-neutral);border-radius:var(--coar-radius-s);box-shadow:var(--coar-shadow-m)}.coar-date-picker-calendar--overlay{position:static;inset:auto;margin-top:0;margin-bottom:0;z-index:auto}.coar-date-picker-calendar--portal{margin-top:0;margin-bottom:0}.coar-date-picker-calendar--css-anchor{top:anchor(bottom);left:anchor(left);bottom:auto;margin-top:var(--coar-spacing-xs)}.coar-date-picker-calendar--css-anchor.coar-date-picker-calendar--top{top:auto;bottom:anchor(top);margin-top:0;margin-bottom:var(--coar-spacing-xs)}.coar-date-picker-calendar--top:not(.coar-date-picker-calendar--overlay):not(.coar-date-picker-calendar--portal):not(.coar-date-picker-calendar--css-anchor){top:auto;bottom:100%;margin-top:0;margin-bottom:var(--coar-spacing-xs)}.coar-date-picker-header{display:flex;align-items:center;justify-content:space-between;gap:var(--coar-spacing-xs);margin-bottom:var(--coar-spacing-m)}.coar-date-picker-nav{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-secondary);cursor:pointer;border-radius:var(--coar-radius-xs);transition:background-color .15s ease,color .15s ease}.coar-date-picker-nav:hover{background:var(--coar-background-neutral-secondary);color:var(--coar-icon-neutral-primary)}.coar-date-picker-month-year{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;font-family:var(--coar-body-base-family);color:var(--coar-text-neutral-primary);line-height:1.2}.coar-date-picker-month{font-size:var(--coar-body-base-size);font-weight:var(--coar-body-base-weight)}.coar-date-picker-year{font-size:var(--coar-body-sm-size);font-weight:var(--coar-body-sm-weight);color:var(--coar-text-neutral-secondary)}.coar-date-picker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:var(--coar-spacing-xs)}.coar-date-picker-weekdays--with-weeks{grid-template-columns:32px repeat(7,1fr)}.coar-date-picker-weekday{display:flex;align-items:center;justify-content:center;height:32px;font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-secondary);text-transform:uppercase}.coar-date-picker-grid{display:grid;grid-template-columns:repeat(7,1fr)}.coar-date-picker-grid--with-weeks{position:relative;grid-template-columns:32px repeat(7,1fr)}.coar-date-picker-grid--with-weeks:before{content:\"\";position:absolute;left:30px;top:0;bottom:0;width:1px;background:var(--coar-border-neutral-secondary);opacity:.15}.coar-date-picker-week-number{display:flex;align-items:center;justify-content:center;min-height:32px;font-family:var(--coar-body-caption-family);font-size:10px;color:var(--coar-text-neutral-tertiary);opacity:.6}.coar-date-picker-day{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;min-height:32px;padding:2px;border:none;border-radius:0;background:transparent;background-clip:content-box;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);cursor:pointer;outline:none;transition:background-color .15s ease,color .15s ease}.coar-date-picker-day:hover:not(:disabled):not(.coar-date-picker-day--selected){background:var(--coar-background-neutral-secondary)}.coar-date-picker-day--outside{color:var(--coar-text-neutral-tertiary);opacity:.5}.coar-date-picker-day--today:not(.coar-date-picker-day--selected){font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-accent-primary);background:var(--coar-background-accent-tertiary)}.coar-date-picker-day--selected{background:var(--coar-background-accent-primary);color:var(--coar-text-on-bold);font-weight:var(--coar-body-small-bold-weight)}.coar-date-picker-day--selected:hover{background:var(--coar-background-accent-hover)}.coar-date-picker-day--focused:not(.coar-date-picker-day--selected){outline:2px solid var(--coar-border-accent-primary);outline-offset:-2px}.coar-date-picker-day--disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-date-picker-day--disabled:hover{background:transparent}.coar-date-picker-day--weekend{background:var(--coar-background-neutral-secondary)}.coar-date-picker-day--weekend:hover:not(:disabled):not(.coar-date-picker-day--selected){background:var(--coar-background-neutral-tertiary)}.coar-date-picker-day--weekend.coar-date-picker-day--selected{background:var(--coar-background-accent-primary)}.coar-date-picker-day--weekend.coar-date-picker-day--selected:hover{background:var(--coar-background-accent-hover)}.coar-date-picker-day--marked{position:relative}.coar-date-picker-day--marked:after{content:\"\";position:absolute;top:2px;left:2px;right:2px;height:3px;border-radius:1px;background:var(--coar-border-semantic-info-subtle);pointer-events:none}.coar-date-picker-day--marked.coar-date-picker-day--selected:after{background:var(--coar-text-on-bold)}.coar-date-picker-marker-popover__list{display:flex;flex-direction:column;gap:var(--coar-spacing-xs)}.coar-date-picker-marker-popover__item{font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);line-height:1.3}.coar-date-picker-marker-popover__more{font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-secondary);line-height:1.3}.coar-date-picker-footer{display:flex;justify-content:center;margin-top:var(--coar-spacing-m);padding-top:var(--coar-spacing-m);border-top:1px solid var(--coar-border-neutral-tertiary)}.coar-date-picker-today{padding:var(--coar-spacing-xs) var(--coar-spacing-m);border:none;border-radius:var(--coar-radius-xs);background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-accent-primary);cursor:pointer;transition:background-color .15s ease}.coar-date-picker-today:hover{background:var(--coar-background-accent-tertiary)}.coar-date-picker-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);color:var(--coar-text-neutral-secondary)}.coar-date-picker-message--error{color:var(--coar-text-semantic-error-bold)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "source", "size", "rotate", "rotateTransition", "spin", "color", "label"] }, { kind: "component", type: CoarPopoverComponent, selector: "coar-popover", inputs: ["disabled", "openOnHover", "openOnClick", "interactive", "fallbackToBestFit", "clampToViewport"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarDatePickerComponent, isStandalone: true, selector: "coar-date-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", 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 }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dateFormatConfig: { classPropertyName: "dateFormatConfig", publicName: "dateFormatConfig", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, highlightWeekends: { classPropertyName: "highlightWeekends", publicName: "highlightWeekends", isSignal: true, isRequired: false, transformFunction: null }, markers: { classPropertyName: "markers", publicName: "markers", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", opened: "opened", closed: "closed" }, host: { properties: { "class.coar-date-picker--xs": "size() === \"xs\"", "class.coar-date-picker--sm": "size() === \"sm\"", "class.coar-date-picker--md": "size() === \"md\"", "class.coar-date-picker--lg": "size() === \"lg\"", "class.coar-date-picker--disabled": "isDisabled()", "class.coar-date-picker--readonly": "readonly()", "class.coar-date-picker--error": "hasError()", "class.coar-date-picker--open": "isOpen()" } }, providers: [coarProvideValueAccessor(() => CoarDatePickerComponent)], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "calendarTemplateRef", first: true, predicate: ["calendarTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coar-date-picker-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n    <span class=\"coar-date-picker-label\" [attr.id]=\"labelId()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"coar-date-picker-required\" aria-hidden=\"true\">*</span>\n      }\n    </span>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    class=\"coar-date-picker-trigger\"\n    [class.coar-date-picker-trigger--disabled]=\"isDisabled()\"\n    [class.coar-date-picker-trigger--readonly]=\"readonly()\"\n    [class.coar-date-picker-trigger--error]=\"hasError()\"\n    [class.coar-date-picker-trigger--open]=\"isOpen()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-controls]=\"isOpen() ? calendarId() : null\"\n    role=\"combobox\"\n  >\n    <!-- Clear Button (left side) - always present to prevent CLS -->\n    <coar-icon\n      name=\"x\"\n      source=\"coar-builtin\"\n      size=\"auto\"\n      class=\"coar-date-picker-clear\"\n      [class.coar-date-picker-clear--hidden]=\"!value() || isDisabled() || readonly()\"\n      aria-hidden=\"true\"\n      (click)=\"clearDate($event)\"\n    />\n\n    <!-- Date Input -->\n    <input\n      #dateInput\n      type=\"text\"\n      class=\"coar-date-picker-input\"\n      [attr.id]=\"inputId()\"\n      [value]=\"displayValue()\"\n      [placeholder]=\"placeholder() || inputPlaceholder()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\n      [attr.aria-invalid]=\"hasError()\"\n      autocomplete=\"off\"\n      (input)=\"onInputChange($event)\"\n      (blur)=\"onInputBlur()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n    />\n\n    <!-- Calendar Icon (right side) -->\n    <button\n      type=\"button\"\n      class=\"coar-date-picker-calendar-btn\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled() || readonly()\"\n      (click)=\"onTriggerClick()\"\n    >\n      <coar-icon name=\"calendar\" source=\"coar-builtin\" size=\"sm\" />\n    </button>\n  </div>\n\n  <!-- Calendar Dropdown (rendered via @cocoar/ui-overlay) -->\n  <ng-template #calendarTemplate>\n    <div class=\"coar-date-picker-calendar-host\" [attr.id]=\"calendarId()\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Calendar\">\n      <coar-mini-calendar\n        [value]=\"value()\"\n        (valueChange)=\"onMiniCalendarValueChange($event)\"\n        [min]=\"min()\"\n        [max]=\"max()\"\n        [locale]=\"effectiveLocale()\"\n        [dateFormatConfig]=\"effectiveDateFormat()\"\n        [showTodayButton]=\"showTodayButton()\"\n        [showWeekNumbers]=\"showWeekNumbers()\"\n        [highlightWeekends]=\"highlightWeekends()\"\n        [markers]=\"markers()\"\n      />\n    </div>\n  </ng-template>\n\n  <!-- Helper/Error Message -->\n  @if (message()) {\n    <span class=\"coar-date-picker-message\" [class.coar-date-picker-message--error]=\"hasError()\">\n      {{ message() }}\n    </span>\n  }\n</div>\n", styles: [":host{display:block;position:relative}.coar-date-picker-wrapper{display:flex;flex-direction:column;width:100%}.coar-date-picker-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-date-picker-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}:host(.coar-date-picker--xs) .coar-date-picker-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-date-picker--sm) .coar-date-picker-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-date-picker--lg) .coar-date-picker-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-date-picker-trigger{display:flex;align-items:center;gap:var(--coar-spacing-s);height:var(--coar-component-md-height);padding:0;border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.coar-date-picker-trigger:hover:not(.coar-date-picker-trigger--disabled):not(.coar-date-picker-trigger--readonly):not(.coar-date-picker-trigger--error){border-color:var(--coar-border-input-hover)}.coar-date-picker-trigger:focus,.coar-date-picker-trigger:focus-within{outline:none;border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-date-picker-trigger--open:not(.coar-date-picker-trigger--error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-date-picker-trigger--disabled{background:var(--coar-surface-input-disabled);cursor:not-allowed;opacity:.6}.coar-date-picker-trigger--readonly{cursor:default}.coar-date-picker-trigger--error{border-color:var(--coar-border-semantic-error-bold)}.coar-date-picker-trigger--error:focus,.coar-date-picker-trigger--error.coar-date-picker-trigger--open{box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold)}:host(.coar-date-picker--xs) .coar-date-picker-trigger{height:var(--coar-component-xs-height);padding:0 var(--coar-spacing-s);gap:var(--coar-spacing-xs)}:host(.coar-date-picker--sm) .coar-date-picker-trigger{height:var(--coar-component-sm-height);padding:0 var(--coar-spacing-s)}:host(.coar-date-picker--lg) .coar-date-picker-trigger{height:var(--coar-component-lg-height);padding:0 var(--coar-spacing-l)}.coar-date-picker-input{flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);outline:none;cursor:text;text-align:right}.coar-date-picker-input::selection{text-align:right}.coar-date-picker-input::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-date-picker-input:disabled{cursor:not-allowed;color:var(--coar-text-neutral-disabled)}.coar-date-picker-input:read-only{cursor:default}:host(.coar-date-picker--xs) .coar-date-picker-input{font-size:var(--coar-component-xs-font-size)}:host(.coar-date-picker--sm) .coar-date-picker-input{font-size:var(--coar-component-sm-font-size)}:host(.coar-date-picker--lg) .coar-date-picker-input{font-size:var(--coar-component-lg-font-size)}.coar-date-picker-clear{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--coar-spacing-s);color:var(--coar-icon-neutral-disabled);cursor:pointer;transition:color .15s ease,opacity .15s ease;opacity:.4}.coar-date-picker-clear--hidden{opacity:0;pointer-events:none}.coar-date-picker-trigger:hover .coar-date-picker-clear:not(.coar-date-picker-clear--hidden){opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-date-picker--open) .coar-date-picker-clear:not(.coar-date-picker-clear--hidden){opacity:1;color:var(--coar-icon-neutral-tertiary)}.coar-date-picker-clear:hover:not(.coar-date-picker-clear--hidden){opacity:1;color:var(--coar-icon-neutral-primary)}.coar-date-picker-calendar-btn{display:flex;align-items:center;justify-content:center;padding:0;margin-right:var(--coar-spacing-s);border:none;background:transparent;color:var(--coar-icon-neutral-secondary);cursor:pointer;transition:color .15s ease}.coar-date-picker-calendar-btn:hover:not(:disabled){color:var(--coar-icon-neutral-primary)}.coar-date-picker-calendar-btn:disabled{cursor:not-allowed;color:var(--coar-icon-neutral-disabled)}.coar-date-picker-calendar-host{display:block;border:1px solid var(--coar-border-neutral);border-radius:var(--coar-radius-s);box-shadow:var(--coar-shadow-m)}.coar-date-picker-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);color:var(--coar-text-neutral-secondary)}.coar-date-picker-message--error{color:var(--coar-text-semantic-error-bold)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "source", "size", "rotate", "rotateTransition", "spin", "color", "label"] }, { kind: "component", type: CoarMiniCalendarComponent, selector: "coar-mini-calendar", inputs: ["value", "min", "max", "locale", "dateFormatConfig", "showTodayButton", "showWeekNumbers", "highlightWeekends", "markers"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarDatePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'coar-date-picker', standalone: true, imports: [FormsModule, CoarIconComponent, CoarPopoverComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [coarProvideValueAccessor(() => CoarDatePickerComponent), CoarPopoverGroupService], host: {
+            args: [{ selector: 'coar-date-picker', standalone: true, imports: [FormsModule, CoarIconComponent, CoarMiniCalendarComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [coarProvideValueAccessor(() => CoarDatePickerComponent)], host: {
                         '[class.coar-date-picker--xs]': 'size() === "xs"',
                         '[class.coar-date-picker--sm]': 'size() === "sm"',
                         '[class.coar-date-picker--md]': 'size() === "md"',
@@ -4812,13 +4815,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         '[class.coar-date-picker--readonly]': 'readonly()',
                         '[class.coar-date-picker--error]': 'hasError()',
                         '[class.coar-date-picker--open]': 'isOpen()',
-                        '(document:keydown)': 'onDocumentKeydown($event)',
-                    }, template: "<div class=\"coar-date-picker-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n    <span class=\"coar-date-picker-label\" [attr.id]=\"labelId()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"coar-date-picker-required\" aria-hidden=\"true\">*</span>\n      }\n    </span>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    class=\"coar-date-picker-trigger\"\n    [class.coar-date-picker-trigger--disabled]=\"isDisabled()\"\n    [class.coar-date-picker-trigger--readonly]=\"readonly()\"\n    [class.coar-date-picker-trigger--error]=\"hasError()\"\n    [class.coar-date-picker-trigger--open]=\"isOpen()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-controls]=\"isOpen() ? calendarId() : null\"\n    role=\"combobox\"\n  >\n    <!-- Clear Button (left side) - always present to prevent CLS -->\n    <coar-icon\n      name=\"x\"\n      source=\"coar-builtin\"\n      size=\"auto\"\n      class=\"coar-date-picker-clear\"\n      [class.coar-date-picker-clear--hidden]=\"!value() || isDisabled() || readonly()\"\n      aria-hidden=\"true\"\n      (click)=\"clearDate($event)\"\n    />\n\n    <!-- Date Input -->\n    <input\n      #dateInput\n      type=\"text\"\n      class=\"coar-date-picker-input\"\n      [attr.id]=\"inputId()\"\n      [value]=\"displayValue()\"\n      [placeholder]=\"placeholder() || inputPlaceholder()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\n      [attr.aria-invalid]=\"hasError()\"\n      autocomplete=\"off\"\n      (input)=\"onInputChange($event)\"\n      (blur)=\"onInputBlur()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n    />\n\n    <!-- Calendar Icon (right side) -->\n    <button\n      type=\"button\"\n      class=\"coar-date-picker-calendar-btn\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled() || readonly()\"\n      (click)=\"onTriggerClick()\"\n    >\n      <coar-icon name=\"calendar\" source=\"coar-builtin\" size=\"sm\" />\n    </button>\n  </div>\n\n  <!-- Calendar Dropdown (rendered via @cocoar/ui-overlay) -->\n  <ng-template #calendarTemplate>\n    <div\n      class=\"coar-date-picker-calendar coar-date-picker-calendar--overlay\"\n      [class.coar-date-picker-calendar--top]=\"calendarPosition() === 'top'\"\n      [attr.id]=\"calendarId()\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"Calendar\"\n    >\n      <!-- Calendar Header -->\n      <div class=\"coar-date-picker-header\">\n        <button type=\"button\" class=\"coar-date-picker-nav\" aria-label=\"Previous year\" (click)=\"previousYear()\">\n          <coar-icon name=\"chevrons-left\" source=\"coar-builtin\" size=\"sm\" />\n        </button>\n        <button type=\"button\" class=\"coar-date-picker-nav\" aria-label=\"Previous month\" (click)=\"previousMonth()\">\n          <coar-icon name=\"chevron-left\" source=\"coar-builtin\" size=\"sm\" />\n        </button>\n\n        <span class=\"coar-date-picker-month-year\">\n          <span class=\"coar-date-picker-month\">{{ viewMonth() }}</span>\n          <span class=\"coar-date-picker-year\">{{ viewYear() }}</span>\n        </span>\n\n        <button type=\"button\" class=\"coar-date-picker-nav coar-date-picker-nav--next\" aria-label=\"Next month\" (click)=\"nextMonth()\">\n          <coar-icon name=\"chevron-right\" source=\"coar-builtin\" size=\"sm\" />\n        </button>\n        <button type=\"button\" class=\"coar-date-picker-nav coar-date-picker-nav--next\" aria-label=\"Next year\" (click)=\"nextYear()\">\n          <coar-icon name=\"chevrons-right\" source=\"coar-builtin\" size=\"sm\" />\n        </button>\n      </div>\n\n      <!-- Days of Week Header -->\n      <div class=\"coar-date-picker-weekdays\" [class.coar-date-picker-weekdays--with-weeks]=\"showWeekNumbers()\">\n        @if (showWeekNumbers()) {\n          <span class=\"coar-date-picker-week-spacer\"></span>\n        }\n        @for (day of daysOfWeek(); track day) {\n          <span class=\"coar-date-picker-weekday\">{{ day }}</span>\n        }\n      </div>\n\n      <!-- Calendar Grid -->\n      <div class=\"coar-date-picker-grid\" [class.coar-date-picker-grid--with-weeks]=\"showWeekNumbers()\" role=\"grid\">\n        @for (day of calendarDays(); track day.date.toString(); let i = $index) {\n          <!-- Week number at start of each row -->\n          @if (showWeekNumbers() && i % 7 === 0) {\n            <span class=\"coar-date-picker-week-number\">{{ weekNumbers()[i / 7] }}</span>\n          }\n          <coar-popover [disabled]=\"day.isDisabled || day.markers.length === 0\" [openOnClick]=\"true\" [openOnHover]=\"true\" [interactive]=\"false\">\n            <button\n              coarPopoverTrigger\n              type=\"button\"\n              class=\"coar-date-picker-day\"\n              [class.coar-date-picker-day--outside]=\"day.isOutsideMonth\"\n              [class.coar-date-picker-day--today]=\"day.isToday\"\n              [class.coar-date-picker-day--selected]=\"day.isSelected\"\n              [class.coar-date-picker-day--focused]=\"day.isFocused\"\n              [class.coar-date-picker-day--disabled]=\"day.isDisabled\"\n              [class.coar-date-picker-day--weekend]=\"highlightWeekends() && day.isWeekend\"\n              [class.coar-date-picker-day--marked]=\"day.markers.length > 0\"\n              [class]=\"day.markerCssClass\"\n              [disabled]=\"day.isDisabled\"\n              [attr.aria-selected]=\"day.isSelected\"\n              [attr.aria-current]=\"day.isToday ? 'date' : null\"\n              [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n              (click)=\"selectDate(day.date)\"\n            >\n              {{ day.day }}\n            </button>\n\n            @if (day.markers.length > 0) {\n              <div coarPopoverContent class=\"coar-date-picker-marker-popover\">\n                <div class=\"coar-date-picker-marker-popover__list\">\n                  @for (marker of getVisibleMarkers(day.markers); track marker.description) {\n                    <div class=\"coar-date-picker-marker-popover__item\">\n                      {{ marker.description }}\n                    </div>\n                  }\n\n                  @if (getHiddenMarkerCount(day.markers) > 0) {\n                    <div class=\"coar-date-picker-marker-popover__more\">+{{ getHiddenMarkerCount(day.markers) }} other events</div>\n                  }\n                </div>\n              </div>\n            }\n          </coar-popover>\n        }\n      </div>\n\n      <!-- Footer with Today Button -->\n      @if (showTodayButton()) {\n        <div class=\"coar-date-picker-footer\">\n          <button type=\"button\" class=\"coar-date-picker-today\" (click)=\"selectToday()\">Today</button>\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <!-- Helper/Error Message -->\n  @if (message()) {\n    <span class=\"coar-date-picker-message\" [class.coar-date-picker-message--error]=\"hasError()\">\n      {{ message() }}\n    </span>\n  }\n</div>\n", styles: [":host{display:block;position:relative}.coar-date-picker-wrapper{display:flex;flex-direction:column;width:100%}.coar-date-picker-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-date-picker-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}:host(.coar-date-picker--xs) .coar-date-picker-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-date-picker--sm) .coar-date-picker-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-date-picker--lg) .coar-date-picker-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-date-picker-trigger{display:flex;align-items:center;gap:var(--coar-spacing-s);height:var(--coar-component-md-height);padding:0;border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.coar-date-picker-trigger:hover:not(.coar-date-picker-trigger--disabled):not(.coar-date-picker-trigger--readonly):not(.coar-date-picker-trigger--error){border-color:var(--coar-border-input-hover)}.coar-date-picker-trigger:focus,.coar-date-picker-trigger:focus-within{outline:none;border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-date-picker-trigger--open:not(.coar-date-picker-trigger--error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-date-picker-trigger--disabled{background:var(--coar-surface-input-disabled);cursor:not-allowed;opacity:.6}.coar-date-picker-trigger--readonly{cursor:default}.coar-date-picker-trigger--error{border-color:var(--coar-border-semantic-error-bold)}.coar-date-picker-trigger--error:focus,.coar-date-picker-trigger--error.coar-date-picker-trigger--open{box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold)}:host(.coar-date-picker--xs) .coar-date-picker-trigger{height:var(--coar-component-xs-height);padding:0 var(--coar-spacing-s);gap:var(--coar-spacing-xs)}:host(.coar-date-picker--sm) .coar-date-picker-trigger{height:var(--coar-component-sm-height);padding:0 var(--coar-spacing-s)}:host(.coar-date-picker--lg) .coar-date-picker-trigger{height:var(--coar-component-lg-height);padding:0 var(--coar-spacing-l)}.coar-date-picker-input{flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);outline:none;cursor:text;text-align:right}.coar-date-picker-input::selection{text-align:right}.coar-date-picker-input::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-date-picker-input:disabled{cursor:not-allowed;color:var(--coar-text-neutral-disabled)}.coar-date-picker-input:read-only{cursor:default}:host(.coar-date-picker--xs) .coar-date-picker-input{font-size:var(--coar-component-xs-font-size)}:host(.coar-date-picker--sm) .coar-date-picker-input{font-size:var(--coar-component-sm-font-size)}:host(.coar-date-picker--lg) .coar-date-picker-input{font-size:var(--coar-component-lg-font-size)}.coar-date-picker-clear{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--coar-spacing-s);color:var(--coar-icon-neutral-disabled);cursor:pointer;transition:color .15s ease,opacity .15s ease;opacity:.4}.coar-date-picker-clear--hidden{opacity:0;pointer-events:none}.coar-date-picker-trigger:hover .coar-date-picker-clear:not(.coar-date-picker-clear--hidden){opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-date-picker--open) .coar-date-picker-clear:not(.coar-date-picker-clear--hidden){opacity:1;color:var(--coar-icon-neutral-tertiary)}.coar-date-picker-clear:hover:not(.coar-date-picker-clear--hidden){opacity:1;color:var(--coar-icon-neutral-primary)}.coar-date-picker-calendar-btn{display:flex;align-items:center;justify-content:center;padding:0;margin-right:var(--coar-spacing-s);border:none;background:transparent;color:var(--coar-icon-neutral-secondary);cursor:pointer;transition:color .15s ease}.coar-date-picker-calendar-btn:hover:not(:disabled){color:var(--coar-icon-neutral-primary)}.coar-date-picker-calendar-btn:disabled{cursor:not-allowed;color:var(--coar-icon-neutral-disabled)}.coar-date-picker-calendar{position:absolute;top:100%;left:0;z-index:1000;margin-top:var(--coar-spacing-xs);padding:var(--coar-spacing-m);min-width:280px;background:var(--coar-background-neutral-primary);border:1px solid var(--coar-border-neutral);border-radius:var(--coar-radius-s);box-shadow:var(--coar-shadow-m)}.coar-date-picker-calendar--overlay{position:static;inset:auto;margin-top:0;margin-bottom:0;z-index:auto}.coar-date-picker-calendar--portal{margin-top:0;margin-bottom:0}.coar-date-picker-calendar--css-anchor{top:anchor(bottom);left:anchor(left);bottom:auto;margin-top:var(--coar-spacing-xs)}.coar-date-picker-calendar--css-anchor.coar-date-picker-calendar--top{top:auto;bottom:anchor(top);margin-top:0;margin-bottom:var(--coar-spacing-xs)}.coar-date-picker-calendar--top:not(.coar-date-picker-calendar--overlay):not(.coar-date-picker-calendar--portal):not(.coar-date-picker-calendar--css-anchor){top:auto;bottom:100%;margin-top:0;margin-bottom:var(--coar-spacing-xs)}.coar-date-picker-header{display:flex;align-items:center;justify-content:space-between;gap:var(--coar-spacing-xs);margin-bottom:var(--coar-spacing-m)}.coar-date-picker-nav{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-secondary);cursor:pointer;border-radius:var(--coar-radius-xs);transition:background-color .15s ease,color .15s ease}.coar-date-picker-nav:hover{background:var(--coar-background-neutral-secondary);color:var(--coar-icon-neutral-primary)}.coar-date-picker-month-year{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;font-family:var(--coar-body-base-family);color:var(--coar-text-neutral-primary);line-height:1.2}.coar-date-picker-month{font-size:var(--coar-body-base-size);font-weight:var(--coar-body-base-weight)}.coar-date-picker-year{font-size:var(--coar-body-sm-size);font-weight:var(--coar-body-sm-weight);color:var(--coar-text-neutral-secondary)}.coar-date-picker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:var(--coar-spacing-xs)}.coar-date-picker-weekdays--with-weeks{grid-template-columns:32px repeat(7,1fr)}.coar-date-picker-weekday{display:flex;align-items:center;justify-content:center;height:32px;font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-secondary);text-transform:uppercase}.coar-date-picker-grid{display:grid;grid-template-columns:repeat(7,1fr)}.coar-date-picker-grid--with-weeks{position:relative;grid-template-columns:32px repeat(7,1fr)}.coar-date-picker-grid--with-weeks:before{content:\"\";position:absolute;left:30px;top:0;bottom:0;width:1px;background:var(--coar-border-neutral-secondary);opacity:.15}.coar-date-picker-week-number{display:flex;align-items:center;justify-content:center;min-height:32px;font-family:var(--coar-body-caption-family);font-size:10px;color:var(--coar-text-neutral-tertiary);opacity:.6}.coar-date-picker-day{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;min-height:32px;padding:2px;border:none;border-radius:0;background:transparent;background-clip:content-box;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);cursor:pointer;outline:none;transition:background-color .15s ease,color .15s ease}.coar-date-picker-day:hover:not(:disabled):not(.coar-date-picker-day--selected){background:var(--coar-background-neutral-secondary)}.coar-date-picker-day--outside{color:var(--coar-text-neutral-tertiary);opacity:.5}.coar-date-picker-day--today:not(.coar-date-picker-day--selected){font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-accent-primary);background:var(--coar-background-accent-tertiary)}.coar-date-picker-day--selected{background:var(--coar-background-accent-primary);color:var(--coar-text-on-bold);font-weight:var(--coar-body-small-bold-weight)}.coar-date-picker-day--selected:hover{background:var(--coar-background-accent-hover)}.coar-date-picker-day--focused:not(.coar-date-picker-day--selected){outline:2px solid var(--coar-border-accent-primary);outline-offset:-2px}.coar-date-picker-day--disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-date-picker-day--disabled:hover{background:transparent}.coar-date-picker-day--weekend{background:var(--coar-background-neutral-secondary)}.coar-date-picker-day--weekend:hover:not(:disabled):not(.coar-date-picker-day--selected){background:var(--coar-background-neutral-tertiary)}.coar-date-picker-day--weekend.coar-date-picker-day--selected{background:var(--coar-background-accent-primary)}.coar-date-picker-day--weekend.coar-date-picker-day--selected:hover{background:var(--coar-background-accent-hover)}.coar-date-picker-day--marked{position:relative}.coar-date-picker-day--marked:after{content:\"\";position:absolute;top:2px;left:2px;right:2px;height:3px;border-radius:1px;background:var(--coar-border-semantic-info-subtle);pointer-events:none}.coar-date-picker-day--marked.coar-date-picker-day--selected:after{background:var(--coar-text-on-bold)}.coar-date-picker-marker-popover__list{display:flex;flex-direction:column;gap:var(--coar-spacing-xs)}.coar-date-picker-marker-popover__item{font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);line-height:1.3}.coar-date-picker-marker-popover__more{font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-secondary);line-height:1.3}.coar-date-picker-footer{display:flex;justify-content:center;margin-top:var(--coar-spacing-m);padding-top:var(--coar-spacing-m);border-top:1px solid var(--coar-border-neutral-tertiary)}.coar-date-picker-today{padding:var(--coar-spacing-xs) var(--coar-spacing-m);border:none;border-radius:var(--coar-radius-xs);background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-accent-primary);cursor:pointer;transition:background-color .15s ease}.coar-date-picker-today:hover{background:var(--coar-background-accent-tertiary)}.coar-date-picker-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);color:var(--coar-text-neutral-secondary)}.coar-date-picker-message--error{color:var(--coar-text-semantic-error-bold)}\n"] }]
+                    }, template: "<div class=\"coar-date-picker-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n    <span class=\"coar-date-picker-label\" [attr.id]=\"labelId()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"coar-date-picker-required\" aria-hidden=\"true\">*</span>\n      }\n    </span>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    class=\"coar-date-picker-trigger\"\n    [class.coar-date-picker-trigger--disabled]=\"isDisabled()\"\n    [class.coar-date-picker-trigger--readonly]=\"readonly()\"\n    [class.coar-date-picker-trigger--error]=\"hasError()\"\n    [class.coar-date-picker-trigger--open]=\"isOpen()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-controls]=\"isOpen() ? calendarId() : null\"\n    role=\"combobox\"\n  >\n    <!-- Clear Button (left side) - always present to prevent CLS -->\n    <coar-icon\n      name=\"x\"\n      source=\"coar-builtin\"\n      size=\"auto\"\n      class=\"coar-date-picker-clear\"\n      [class.coar-date-picker-clear--hidden]=\"!value() || isDisabled() || readonly()\"\n      aria-hidden=\"true\"\n      (click)=\"clearDate($event)\"\n    />\n\n    <!-- Date Input -->\n    <input\n      #dateInput\n      type=\"text\"\n      class=\"coar-date-picker-input\"\n      [attr.id]=\"inputId()\"\n      [value]=\"displayValue()\"\n      [placeholder]=\"placeholder() || inputPlaceholder()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\n      [attr.aria-invalid]=\"hasError()\"\n      autocomplete=\"off\"\n      (input)=\"onInputChange($event)\"\n      (blur)=\"onInputBlur()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n    />\n\n    <!-- Calendar Icon (right side) -->\n    <button\n      type=\"button\"\n      class=\"coar-date-picker-calendar-btn\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled() || readonly()\"\n      (click)=\"onTriggerClick()\"\n    >\n      <coar-icon name=\"calendar\" source=\"coar-builtin\" size=\"sm\" />\n    </button>\n  </div>\n\n  <!-- Calendar Dropdown (rendered via @cocoar/ui-overlay) -->\n  <ng-template #calendarTemplate>\n    <div class=\"coar-date-picker-calendar-host\" [attr.id]=\"calendarId()\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Calendar\">\n      <coar-mini-calendar\n        [value]=\"value()\"\n        (valueChange)=\"onMiniCalendarValueChange($event)\"\n        [min]=\"min()\"\n        [max]=\"max()\"\n        [locale]=\"effectiveLocale()\"\n        [dateFormatConfig]=\"effectiveDateFormat()\"\n        [showTodayButton]=\"showTodayButton()\"\n        [showWeekNumbers]=\"showWeekNumbers()\"\n        [highlightWeekends]=\"highlightWeekends()\"\n        [markers]=\"markers()\"\n      />\n    </div>\n  </ng-template>\n\n  <!-- Helper/Error Message -->\n  @if (message()) {\n    <span class=\"coar-date-picker-message\" [class.coar-date-picker-message--error]=\"hasError()\">\n      {{ message() }}\n    </span>\n  }\n</div>\n", styles: [":host{display:block;position:relative}.coar-date-picker-wrapper{display:flex;flex-direction:column;width:100%}.coar-date-picker-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-date-picker-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}:host(.coar-date-picker--xs) .coar-date-picker-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-date-picker--sm) .coar-date-picker-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-date-picker--lg) .coar-date-picker-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-date-picker-trigger{display:flex;align-items:center;gap:var(--coar-spacing-s);height:var(--coar-component-md-height);padding:0;border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.coar-date-picker-trigger:hover:not(.coar-date-picker-trigger--disabled):not(.coar-date-picker-trigger--readonly):not(.coar-date-picker-trigger--error){border-color:var(--coar-border-input-hover)}.coar-date-picker-trigger:focus,.coar-date-picker-trigger:focus-within{outline:none;border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-date-picker-trigger--open:not(.coar-date-picker-trigger--error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-date-picker-trigger--disabled{background:var(--coar-surface-input-disabled);cursor:not-allowed;opacity:.6}.coar-date-picker-trigger--readonly{cursor:default}.coar-date-picker-trigger--error{border-color:var(--coar-border-semantic-error-bold)}.coar-date-picker-trigger--error:focus,.coar-date-picker-trigger--error.coar-date-picker-trigger--open{box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold)}:host(.coar-date-picker--xs) .coar-date-picker-trigger{height:var(--coar-component-xs-height);padding:0 var(--coar-spacing-s);gap:var(--coar-spacing-xs)}:host(.coar-date-picker--sm) .coar-date-picker-trigger{height:var(--coar-component-sm-height);padding:0 var(--coar-spacing-s)}:host(.coar-date-picker--lg) .coar-date-picker-trigger{height:var(--coar-component-lg-height);padding:0 var(--coar-spacing-l)}.coar-date-picker-input{flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);outline:none;cursor:text;text-align:right}.coar-date-picker-input::selection{text-align:right}.coar-date-picker-input::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-date-picker-input:disabled{cursor:not-allowed;color:var(--coar-text-neutral-disabled)}.coar-date-picker-input:read-only{cursor:default}:host(.coar-date-picker--xs) .coar-date-picker-input{font-size:var(--coar-component-xs-font-size)}:host(.coar-date-picker--sm) .coar-date-picker-input{font-size:var(--coar-component-sm-font-size)}:host(.coar-date-picker--lg) .coar-date-picker-input{font-size:var(--coar-component-lg-font-size)}.coar-date-picker-clear{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--coar-spacing-s);color:var(--coar-icon-neutral-disabled);cursor:pointer;transition:color .15s ease,opacity .15s ease;opacity:.4}.coar-date-picker-clear--hidden{opacity:0;pointer-events:none}.coar-date-picker-trigger:hover .coar-date-picker-clear:not(.coar-date-picker-clear--hidden){opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-date-picker--open) .coar-date-picker-clear:not(.coar-date-picker-clear--hidden){opacity:1;color:var(--coar-icon-neutral-tertiary)}.coar-date-picker-clear:hover:not(.coar-date-picker-clear--hidden){opacity:1;color:var(--coar-icon-neutral-primary)}.coar-date-picker-calendar-btn{display:flex;align-items:center;justify-content:center;padding:0;margin-right:var(--coar-spacing-s);border:none;background:transparent;color:var(--coar-icon-neutral-secondary);cursor:pointer;transition:color .15s ease}.coar-date-picker-calendar-btn:hover:not(:disabled){color:var(--coar-icon-neutral-primary)}.coar-date-picker-calendar-btn:disabled{cursor:not-allowed;color:var(--coar-icon-neutral-disabled)}.coar-date-picker-calendar-host{display:block;border:1px solid var(--coar-border-neutral);border-radius:var(--coar-radius-s);box-shadow:var(--coar-shadow-m)}.coar-date-picker-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);color:var(--coar-text-neutral-secondary)}.coar-date-picker-message--error{color:var(--coar-text-semantic-error-bold)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], dateFormatConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormatConfig", required: false }] }], showTodayButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTodayButton", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], highlightWeekends: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightWeekends", required: false }] }], markers: [{ type: i0.Input, args: [{ isSignal: true, alias: "markers", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], inputRef: [{ type: i0.ViewChild, args: ['dateInput', { isSignal: true }] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], calendarTemplateRef: [{ type: i0.ViewChild, args: ['calendarTemplate', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { COAR_BUILTIN_ICON_SOURCE_KEY, COAR_DEFAULT_ICON_SOURCE_KEY, COAR_ICON_SOURCE_ENTRY, CoarBadgeComponent, CoarButtonComponent, CoarCardComponent, CoarCheckboxComponent, CoarCodeBlockComponent, CoarControlValueAccessor, CoarDatePickerComponent, CoarDividerComponent, CoarIconComponent, CoarIconService, CoarLabelComponent, CoarMultiSelectComponent, CoarNoteComponent, CoarNumberInputComponent, CoarPasswordInputComponent, CoarPopoverComponent, CoarPopoverGroupService, CoarScrollbarDirective, CoarSidebarComponent, CoarSingleSelectComponent, CoarTabComponent, CoarTabGroupComponent, CoarTableComponent, CoarTagComponent, CoarTagSelectComponent, CoarTextInputComponent, CoarTooltipDirective, coarProvideValueAccessor, provideCoarDefaultIconSource, provideCoarHttpIconSource, provideCoarIconBuiltInOverrides, provideCoarIconMapSource, provideCoarIconSource };
+export { COAR_BUILTIN_ICON_SOURCE_KEY, COAR_DEFAULT_ICON_SOURCE_KEY, COAR_ICON_SOURCE_ENTRY, CoarBadgeComponent, CoarButtonComponent, CoarCardComponent, CoarCheckboxComponent, CoarCodeBlockComponent, CoarControlValueAccessor, CoarDatePickerComponent, CoarDividerComponent, CoarIconComponent, CoarIconService, CoarLabelComponent, CoarMiniCalendarComponent, CoarMultiSelectComponent, CoarNoteComponent, CoarNumberInputComponent, CoarPasswordInputComponent, CoarPopoverComponent, CoarPopoverGroupService, CoarScrollbarDirective, CoarSidebarComponent, CoarSingleSelectComponent, CoarTabComponent, CoarTabGroupComponent, CoarTableComponent, CoarTagComponent, CoarTagSelectComponent, CoarTextInputComponent, CoarTooltipDirective, coarCalculateIsoWeekNumber, coarClampPlainDate, coarDetectDateFormatPatternFromIntl, coarFormatPlainDate, coarGetCalendarGridDates, coarGetDateSeparatorForPattern, coarGetLocalizedWeekdays, coarParsePlainDateFromInput, coarProvideValueAccessor, coarTemporalPlainDateToDate, provideCoarDefaultIconSource, provideCoarHttpIconSource, provideCoarIconBuiltInOverrides, provideCoarIconMapSource, provideCoarIconSource };
 //# sourceMappingURL=cocoar-ui-components.mjs.map