@lifecorner/angular-ui-kit 3.27.2 → 3.29.0

package/fesm2022/lifecorner-angular-ui-kit-datepicker.mjs

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, DOCUMENT, computed, forwardRef, inject, input, linkedSignal, output, signal, viewChild } from "@angular/core";
+import { ChangeDetectionStrategy, Component, DOCUMENT, Injector, afterNextRender, computed, forwardRef, inject, input, linkedSignal, output, signal, viewChild } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import * as i1 from "@angular/cdk/overlay";
 import { OverlayModule } from "@angular/cdk/overlay";
@@ -31,6 +31,11 @@ var DatepickerComponent = class DatepickerComponent {
 	nextMonthAriaLabel = input("Next month", ...ngDevMode ? [{ debugName: "nextMonthAriaLabel" }] : /* istanbul ignore next */ []);
 	todayLabel = input("Today", ...ngDevMode ? [{ debugName: "todayLabel" }] : /* istanbul ignore next */ []);
 	selectedAriaLabel = input("selected", ...ngDevMode ? [{ debugName: "selectedAriaLabel" }] : /* istanbul ignore next */ []);
+	granularity = input("day", ...ngDevMode ? [{ debugName: "granularity" }] : /* istanbul ignore next */ []);
+	previousYearAriaLabel = input("Previous year", ...ngDevMode ? [{ debugName: "previousYearAriaLabel" }] : /* istanbul ignore next */ []);
+	nextYearAriaLabel = input("Next year", ...ngDevMode ? [{ debugName: "nextYearAriaLabel" }] : /* istanbul ignore next */ []);
+	monthDialogAriaLabel = input("Choose month", ...ngDevMode ? [{ debugName: "monthDialogAriaLabel" }] : /* istanbul ignore next */ []);
+	currentMonthLabel = input("This month", ...ngDevMode ? [{ debugName: "currentMonthLabel" }] : /* istanbul ignore next */ []);
 	dateChange = output();
 	opened = output();
 	closed = output();
@@ -40,10 +45,12 @@ var DatepickerComponent = class DatepickerComponent {
 	currentYear = signal((/* @__PURE__ */ new Date()).getFullYear(), ...ngDevMode ? [{ debugName: "currentYear" }] : /* istanbul ignore next */ []);
 	formDisabled = signal(false, ...ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []);
 	isDisabled = computed(() => this.disabled() || this.formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	isMonthMode = computed(() => this.granularity() === "month", ...ngDevMode ? [{ debugName: "isMonthMode" }] : /* istanbul ignore next */ []);
 	formattedDate = computed(() => {
 		const date = this.selectedDate();
 		if (!date) return "";
-		return this.formatDate(date, this.format());
+		const shown = this.isMonthMode() ? new Date(date.getFullYear(), date.getMonth(), 1) : date;
+		return this.formatDate(shown, this.format());
 	}, ...ngDevMode ? [{ debugName: "formattedDate" }] : /* istanbul ignore next */ []);
 	inputValue = linkedSignal(() => this.formattedDate(), ...ngDevMode ? [{ debugName: "inputValue" }] : /* istanbul ignore next */ []);
 	weekDays = [
@@ -79,6 +86,34 @@ var DatepickerComponent = class DatepickerComponent {
 		const names = locale ? Array.from({ length: 7 }, (_, d) => new Date(2023, 0, 1 + d).toLocaleDateString(locale, { weekday: "short" }).replace(/\.$/, "")) : this.weekDays;
 		return Array.from({ length: 7 }, (_, i) => names[(first + i) % 7]);
 	}, ...ngDevMode ? [{ debugName: "weekdayLabels" }] : /* istanbul ignore next */ []);
+	headerTitle = computed(() => this.isMonthMode() ? String(this.currentYear()) : `${this.currentMonthName()} ${this.currentYear()}`, ...ngDevMode ? [{ debugName: "headerTitle" }] : /* istanbul ignore next */ []);
+	monthCells = computed(() => {
+		const year = this.currentYear();
+		const locale = this.locale();
+		const selected = this.selectedDate();
+		const today = /* @__PURE__ */ new Date();
+		return Array.from({ length: 12 }, (_, month) => {
+			const first = new Date(year, month, 1);
+			return {
+				month,
+				name: locale ? first.toLocaleDateString(locale, { month: "long" }) : this.monthNames[month],
+				label: first.toLocaleDateString(locale || "en-US", {
+					month: "long",
+					year: "numeric"
+				}),
+				selected: !!selected && selected.getFullYear() === year && selected.getMonth() === month,
+				current: today.getFullYear() === year && today.getMonth() === month,
+				disabled: this.isMonthDisabled(year, month)
+			};
+		});
+	}, ...ngDevMode ? [{ debugName: "monthCells" }] : /* istanbul ignore next */ []);
+	monthRows = computed(() => [
+		0,
+		3,
+		6,
+		9
+	].map((i) => this.monthCells().slice(i, i + 3)), ...ngDevMode ? [{ debugName: "monthRows" }] : /* istanbul ignore next */ []);
+	monthTabStop = linkedSignal(() => this.defaultMonthTabStop(), ...ngDevMode ? [{ debugName: "monthTabStop" }] : /* istanbul ignore next */ []);
 	gridStart = computed(() => {
 		const day = Math.trunc(Number(this.firstDayOfWeek()));
 		return Number.isFinite(day) ? (day % 7 + 7) % 7 : 0;
@@ -100,6 +135,7 @@ var DatepickerComponent = class DatepickerComponent {
 		return classes.join(" ");
 	}, ...ngDevMode ? [{ debugName: "datepickerClasses" }] : /* istanbul ignore next */ []);
 	document = inject(DOCUMENT);
+	injector = inject(Injector);
 	onChange = () => {};
 	onTouched = () => {};
 	toggle() {
@@ -112,6 +148,7 @@ var DatepickerComponent = class DatepickerComponent {
 		this.isOpen.set(true);
 		const date = this.selectedDate();
 		if (date) this.showMonthOf(date);
+		if (this.isMonthMode()) this.monthTabStop.set(this.defaultMonthTabStop());
 		this.opened.emit();
 	}
 	close() {
@@ -193,6 +230,65 @@ var DatepickerComponent = class DatepickerComponent {
 	goToToday() {
 		this.showMonthOf(/* @__PURE__ */ new Date());
 	}
+	previousYear() {
+		this.currentYear.update((year) => year - 1);
+	}
+	nextYear() {
+		this.currentYear.update((year) => year + 1);
+	}
+	showCurrentYear() {
+		this.currentYear.set((/* @__PURE__ */ new Date()).getFullYear());
+	}
+	selectMonth(month) {
+		const year = this.currentYear();
+		if (this.isDisabled() || this.readonly() || this.isMonthDisabled(year, month)) return;
+		this.commitDate(new Date(year, month, 1));
+		this.close();
+	}
+	onMonthKeydown(event, month) {
+		const year = this.currentYear();
+		const at = year * 12 + month;
+		let target;
+		switch (event.key) {
+			case "ArrowLeft":
+				target = this.nextEnabledMonth(at, -1);
+				break;
+			case "ArrowRight":
+				target = this.nextEnabledMonth(at, 1);
+				break;
+			case "ArrowUp":
+				target = this.nextEnabledMonth(at, -3);
+				break;
+			case "ArrowDown":
+				target = this.nextEnabledMonth(at, 3);
+				break;
+			case "PageUp":
+				target = this.nearestEnabledMonth(year - 1, month);
+				break;
+			case "PageDown":
+				target = this.nearestEnabledMonth(year + 1, month);
+				break;
+			case "Home":
+				target = this.edgeEnabledMonth(year, 1);
+				break;
+			case "End":
+				target = this.edgeEnabledMonth(year, -1);
+				break;
+			case "Enter":
+			case " ":
+				event.preventDefault();
+				this.selectMonth(month);
+				return;
+			case "Escape":
+				event.preventDefault();
+				event.stopPropagation();
+				this.close();
+				return;
+			default: return;
+		}
+		event.preventDefault();
+		if (target !== null) this.moveMonthFocus(target);
+	}
 	onInputChange(value) {
 		this.inputValue.set(value);
 		if (value.trim() === "") {
@@ -200,7 +296,7 @@ var DatepickerComponent = class DatepickerComponent {
 			return;
 		}
 		const date = this.parseDate(value, this.format());
-		if (date && !this.isDateDisabled(date) && !this.isSelectedDate(date)) {
+		if (date && !this.isUnavailable(date) && !this.isSameSelection(date)) {
 			this.commitDate(date);
 			this.showMonthOf(date);
 		}
@@ -210,9 +306,14 @@ var DatepickerComponent = class DatepickerComponent {
 		if (!this.isOpen() && (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ")) {
 			this.open();
 			event.preventDefault();
+			if (this.isMonthMode()) afterNextRender(() => this.focusMonthCell(this.monthTabStop()), { injector: this.injector });
 			return;
 		}
 		if (!this.isOpen()) return;
+		if (this.isMonthMode()) {
+			this.onMonthFieldKeyDown(event);
+			return;
+		}
 		const editing = this.inputValue() !== this.formattedDate();
 		const currentDate = this.selectedDate() || /* @__PURE__ */ new Date();
 		let newDate = null;
@@ -284,6 +385,75 @@ var DatepickerComponent = class DatepickerComponent {
 	isCurrentMonth(date) {
 		return date.getMonth() === this.currentMonth() && date.getFullYear() === this.currentYear();
 	}
+	defaultMonthTabStop() {
+		const cells = this.monthCells().filter((c) => !c.disabled);
+		return (cells.find((c) => c.selected) ?? cells.find((c) => c.current) ?? cells[0])?.month ?? -1;
+	}
+	onMonthFieldKeyDown(event) {
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				this.focusMonthCell(this.monthTabStop());
+				break;
+			case "Escape":
+				this.close();
+				event.preventDefault();
+				event.stopPropagation();
+				break;
+			case "Enter":
+				event.preventDefault();
+				if (this.selectedDate()) this.close();
+		}
+	}
+	isMonthDisabled(year, month) {
+		const min = this.minDate();
+		if (min && new Date(year, month + 1, 0).getTime() < this.startOfDay(min)) return true;
+		const max = this.maxDate();
+		if (max && new Date(year, month, 1).getTime() > this.startOfDay(max)) return true;
+		return this.disabledDates().some((d) => d.getFullYear() === year && d.getMonth() === month);
+	}
+	isUnavailable(date) {
+		return this.isMonthMode() ? this.isMonthDisabled(date.getFullYear(), date.getMonth()) : this.isDateDisabled(date);
+	}
+	isSameSelection(date) {
+		if (!this.isMonthMode()) return this.isSelectedDate(date);
+		const selected = this.selectedDate();
+		return !!selected && selected.getFullYear() === date.getFullYear() && selected.getMonth() === date.getMonth();
+	}
+	monthAt(index) {
+		return {
+			year: Math.floor(index / 12),
+			month: (index % 12 + 12) % 12
+		};
+	}
+	nextEnabledMonth(index, step) {
+		for (let i = 1; i * Math.abs(step) <= 120; i++) {
+			const { year, month } = this.monthAt(index + step * i);
+			if (!this.isMonthDisabled(year, month)) return index + step * i;
+		}
+		return null;
+	}
+	nearestEnabledMonth(year, month) {
+		for (let d = 0; d < 12; d++) for (const m of d === 0 ? [month] : [month - d, month + d]) if (m >= 0 && m < 12 && !this.isMonthDisabled(year, m)) return year * 12 + m;
+		return null;
+	}
+	edgeEnabledMonth(year, dir) {
+		for (let i = 0; i < 12; i++) {
+			const month = dir === 1 ? i : 11 - i;
+			if (!this.isMonthDisabled(year, month)) return year * 12 + month;
+		}
+		return null;
+	}
+	moveMonthFocus(index) {
+		const { year, month } = this.monthAt(index);
+		if (year !== this.currentYear()) this.currentYear.set(year);
+		this.monthTabStop.set(month);
+		this.focusMonthCell(month);
+	}
+	focusMonthCell(month) {
+		if (month < 0) return;
+		this.calendarPanel()?.nativeElement.querySelectorAll(".lc-datepicker-month")[month]?.focus();
+	}
 	commitDate(date) {
 		this.selectedDate.set(date);
 		this.inputValue.set(this.formatDate(date, this.format()));
@@ -313,16 +483,18 @@ var DatepickerComponent = class DatepickerComponent {
 	}
 	parseDate(value, format) {
 		if (value.length !== format.length) return null;
+		const monthMode = this.isMonthMode();
 		const yearIndex = format.indexOf("YYYY");
 		const monthIndex = format.indexOf("MM");
 		const dayIndex = format.indexOf("DD");
-		if (yearIndex < 0 || monthIndex < 0 || dayIndex < 0) return null;
+		if (yearIndex < 0 || monthIndex < 0 || dayIndex < 0 && !monthMode) return null;
 		const yearText = value.substring(yearIndex, yearIndex + 4);
 		const monthText = value.substring(monthIndex, monthIndex + 2);
-		const dayText = value.substring(dayIndex, dayIndex + 2);
+		const dayText = dayIndex < 0 ? "01" : value.substring(dayIndex, dayIndex + 2);
 		if (!/^\d{4}$/.test(yearText) || !/^\d{2}$/.test(monthText) || !/^\d{2}$/.test(dayText)) return null;
 		const date = new Date(Number(yearText), Number(monthText) - 1, Number(dayText));
-		return this.formatDate(date, format) === value ? date : null;
+		if (this.formatDate(date, format) !== value) return null;
+		return monthMode ? new Date(date.getFullYear(), date.getMonth(), 1) : date;
 	}
 	getInputValue(event) {
 		return event.target.value;
@@ -502,6 +674,41 @@ var DatepickerComponent = class DatepickerComponent {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			granularity: {
+				classPropertyName: "granularity",
+				publicName: "granularity",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			previousYearAriaLabel: {
+				classPropertyName: "previousYearAriaLabel",
+				publicName: "previousYearAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			nextYearAriaLabel: {
+				classPropertyName: "nextYearAriaLabel",
+				publicName: "nextYearAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			monthDialogAriaLabel: {
+				classPropertyName: "monthDialogAriaLabel",
+				publicName: "monthDialogAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			currentMonthLabel: {
+				classPropertyName: "currentMonthLabel",
+				publicName: "currentMonthLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		outputs: {
@@ -528,8 +735,8 @@ var DatepickerComponent = class DatepickerComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<div class=\"lc-datepicker-wrapper\">\n  <div class=\"lc-datepicker-input-wrapper\">\n    <input\n      #datepickerInput\n      type=\"text\"\n      [id]=\"inputId\"\n      [class]=\"datepickerClasses()\"\n      role=\"combobox\"\n      aria-haspopup=\"dialog\"\n      autocomplete=\"off\"\n      [attr.aria-expanded]=\"isOpen() ? 'true' : 'false'\"\n      [attr.aria-controls]=\"isOpen() ? inputId + '-calendar' : null\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-required]=\"required() ? 'true' : null\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n      [attr.aria-invalid]=\"error() ? 'true' : null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [readonly]=\"readonly()\"\n      [disabled]=\"isDisabled()\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"inputValue()\"\n      (input)=\"onInputChange(getInputValue($event))\"\n      (click)=\"toggle()\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"onBlur()\"\n    />\n    <div class=\"lc-datepicker-icons\">\n      @if (selectedDate() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-clear\"\n          (click)=\"clear(); $event.stopPropagation()\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n            />\n          </svg>\n        </button>\n      }\n      <svg\n        class=\"lc-datepicker-calendar-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 20 20\"\n        fill=\"currentColor\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M5.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H6a.75.75 0 01-.75-.75V12zM6 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H6zM7.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H8a.75.75 0 01-.75-.75V12zM8 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H8zM9.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V10zM10 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H10zM9.25 14a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V14zM12 9.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V10a.75.75 0 00-.75-.75H12zM11.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H12a.75.75 0 01-.75-.75V12zM12 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H12zM13.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H14a.75.75 0 01-.75-.75V10zM14 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H14z\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </div>\n  </div>\n\n  <!-- Calendar Panel -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"datepickerInput\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n    (backdropClick)=\"onClickOutside()\"\n    (detach)=\"close()\"\n  >\n    <div\n      #calendarPanel\n      class=\"lc-datepicker-calendar\"\n      [class.lc-datepicker-calendar--open]=\"isOpen()\"\n      [id]=\"inputId + '-calendar'\"\n      role=\"dialog\"\n      [attr.aria-label]=\"dialogAriaLabel()\"\n    >\n      <!-- Calendar Header -->\n      <div class=\"lc-datepicker-header\">\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-nav-button\"\n          (click)=\"previousMonth()\"\n          [attr.aria-label]=\"previousMonthAriaLabel()\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </button>\n        \n        <div class=\"lc-datepicker-month-year\" aria-live=\"polite\">\n          {{ currentMonthName() }} {{ currentYear() }}\n        </div>\n        \n        <button\n          type=\"button\"\n          class=\"lc-datepicker-nav-button\"\n          (click)=\"nextMonth()\"\n          [attr.aria-label]=\"nextMonthAriaLabel()\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </button>\n      </div>\n\n      <!-- Quick Actions -->\n      <div class=\"lc-datepicker-quick-actions\">\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-today-button\"\n          (click)=\"goToToday()\"\n        >\n          {{ todayLabel() }}\n        </button>\n      </div>\n\n      <!-- Weekday Headers -->\n      <div class=\"lc-datepicker-weekdays\" aria-hidden=\"true\">\n        @for (day of weekdayLabels(); track $index) {\n          <div class=\"lc-datepicker-weekday\">{{ day }}</div>\n        }\n      </div>\n\n      <!-- Calendar Days -->\n      <div class=\"lc-datepicker-days\">\n        @for (date of generateCalendarDays(); track date.getTime()) {\n          <button\n            type=\"button\"\n            class=\"lc-datepicker-day\"\n            [class.lc-datepicker-day--other-month]=\"!isCurrentMonth(date)\"\n            [class.lc-datepicker-day--today]=\"isToday(date)\"\n            [class.lc-datepicker-day--selected]=\"isSelectedDate(date)\"\n            [class.lc-datepicker-day--disabled]=\"isDateDisabled(date)\"\n            [disabled]=\"isDateDisabled(date)\"\n            [attr.aria-current]=\"isToday(date) ? 'date' : null\"\n            [attr.aria-label]=\"dayAriaLabel(date)\"\n            (click)=\"selectDate(date)\"\n          >\n            {{ date.getDate() }}\n          </button>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Helper/Error Text -->\n  @if (error() && errorMessage()) {\n    <div class=\"lc-datepicker__error\" [id]=\"inputId + '-error'\" role=\"alert\">\n      {{ errorMessage() }}\n    </div>\n  } @else if (helperText()) {\n    <div class=\"lc-datepicker__helper\" [id]=\"inputId + '-helper'\">\n      {{ helperText() }}\n    </div>\n  }\n</div>\n",
-		styles: [".lc-datepicker-wrapper{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1));width:100%;position:relative}.lc-datepicker-input-wrapper{position:relative;width:100%}.lc-datepicker{width:100%;font-family:var(--font-family-sans);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-surface);border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease);cursor:text}.lc-datepicker::placeholder{color:var(--color-text-secondary)}.lc-datepicker:hover:not(:disabled):not([readonly]):not(.lc-datepicker--error):not(:focus){border-color:var(--color-text-secondary)}.lc-datepicker:focus{outline:2px solid var(--color-primary-500);outline-offset:0px;border-color:var(--color-primary-500)}.lc-datepicker:disabled{background-color:var(--color-surface-muted);border-color:var(--color-border);cursor:not-allowed;opacity:.6}.lc-datepicker[readonly]{background-color:var(--color-surface-muted);cursor:default}.lc-datepicker.lc-datepicker--error{border-color:var(--color-error-600)}.lc-datepicker.lc-datepicker--error:focus{outline-color:var(--color-error-600);border-color:var(--color-error-600)}.lc-datepicker.lc-datepicker--xs{height:var(--size-interactive-xs-height);padding:var(--size-interactive-xs-padding);padding-right:var(--spacing-10);font-size:var(--size-interactive-xs-font-size)}.lc-datepicker.lc-datepicker--sm{height:var(--size-interactive-sm-height);padding:var(--size-interactive-sm-padding);padding-right:var(--spacing-12);font-size:var(--size-interactive-sm-font-size)}.lc-datepicker.lc-datepicker--md{height:var(--size-interactive-md-height);padding:var(--size-interactive-md-padding);padding-right:var(--spacing-14);font-size:var(--size-interactive-md-font-size)}.lc-datepicker.lc-datepicker--lg{height:var(--size-interactive-lg-height);padding:var(--size-interactive-lg-padding);padding-right:var(--spacing-16);font-size:var(--size-interactive-lg-font-size)}.lc-datepicker.lc-datepicker--filled{background-color:var(--color-surface-sunken);border-color:var(--color-field-border)}.lc-datepicker.lc-datepicker--filled:hover:not(:disabled):not([readonly]):not(.lc-datepicker--error):not(:focus){background-color:var(--color-surface-hover);border-color:var(--color-text-secondary)}.lc-datepicker.lc-datepicker--filled:focus{background-color:var(--color-surface);border-color:var(--color-primary-500)}.lc-datepicker.lc-datepicker--filled:disabled{background-color:var(--color-surface-muted);border-color:var(--color-border)}.lc-datepicker.lc-datepicker--filled.lc-datepicker--error{border-color:var(--color-error-600)}.lc-datepicker-icons{position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:var(--spacing-1);pointer-events:none}.lc-datepicker-calendar-icon{width:1.25rem;height:1.25rem;color:var(--color-text-secondary)}.lc-datepicker-clear{pointer-events:auto;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;border-radius:var(--border-radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-clear:hover{color:var(--color-text-primary);background-color:var(--color-surface-hover)}.lc-datepicker-clear:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.lc-datepicker-clear svg{width:1rem;height:1rem}.lc-datepicker-calendar{position:absolute;z-index:1000;margin-top:var(--spacing-1);padding:var(--lc-density-padding-md, var(--spacing-4));background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);box-shadow:var(--elevation-3);min-width:280px;opacity:0;transform:translateY(-8px);transition:all var(--animation-duration-base) var(--animation-timing-ease);pointer-events:none}.lc-datepicker-calendar.lc-datepicker-calendar--open{opacity:1;transform:translateY(0);pointer-events:auto}.lc-datepicker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-4)}.lc-datepicker-month-year{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.lc-datepicker-nav-button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:none;border:none;border-radius:var(--border-radius-md);color:var(--color-text-secondary);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-nav-button:hover{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-datepicker-nav-button:active{background-color:var(--color-surface-sunken)}.lc-datepicker-nav-button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.lc-datepicker-nav-button svg{width:1.25rem;height:1.25rem}.lc-datepicker-quick-actions{display:flex;justify-content:center;margin-bottom:var(--spacing-3)}.lc-datepicker-today-button{padding:var(--spacing-1) var(--spacing-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-primary-600);background:none;border:1px solid var(--color-primary-200);border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-today-button:hover{background-color:var(--color-primary-50);border-color:var(--color-primary-300)}.lc-datepicker-today-button:active{background-color:var(--color-primary-100)}.lc-datepicker-today-button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.lc-datepicker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--spacing-1);margin-bottom:var(--spacing-2)}.lc-datepicker-weekday{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);text-align:center;padding:var(--spacing-1)}.lc-datepicker-days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--spacing-1)}.lc-datepicker-day{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);color:var(--color-text-primary);background:none;border:none;border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-day:hover:not(:disabled){background-color:var(--color-surface-hover)}.lc-datepicker-day.lc-datepicker-day--other-month{color:var(--color-text-tertiary)}.lc-datepicker-day.lc-datepicker-day--today{font-weight:var(--font-weight-semibold);color:var(--color-primary-600);background-color:var(--color-primary-50)}.lc-datepicker-day.lc-datepicker-day--selected{font-weight:var(--font-weight-semibold);color:var(--color-on-primary);background-color:var(--color-primary-fill)}.lc-datepicker-day.lc-datepicker-day--selected:hover{background-color:var(--color-primary-fill-hover)}.lc-datepicker-day.lc-datepicker-day--disabled{color:var(--color-text-disabled);cursor:not-allowed;opacity:.5}.lc-datepicker-day.lc-datepicker-day--disabled:hover{background:none}.lc-datepicker-day:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-datepicker__error{font-size:var(--font-size-xs);color:var(--color-error-600);margin-top:var(--spacing-1)}.lc-datepicker__helper{font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-top:var(--spacing-1)}\n"],
+		template: "<div class=\"lc-datepicker-wrapper\">\n  <div class=\"lc-datepicker-input-wrapper\">\n    <input\n      #datepickerInput\n      type=\"text\"\n      [id]=\"inputId\"\n      [class]=\"datepickerClasses()\"\n      role=\"combobox\"\n      aria-haspopup=\"dialog\"\n      autocomplete=\"off\"\n      [attr.aria-expanded]=\"isOpen() ? 'true' : 'false'\"\n      [attr.aria-controls]=\"isOpen() ? inputId + '-calendar' : null\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-required]=\"required() ? 'true' : null\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n      [attr.aria-invalid]=\"error() ? 'true' : null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [readonly]=\"readonly()\"\n      [disabled]=\"isDisabled()\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"inputValue()\"\n      (input)=\"onInputChange(getInputValue($event))\"\n      (click)=\"toggle()\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"onBlur()\"\n    />\n    <div class=\"lc-datepicker-icons\">\n      @if (selectedDate() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-clear\"\n          (click)=\"clear(); $event.stopPropagation()\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n            />\n          </svg>\n        </button>\n      }\n      <svg\n        class=\"lc-datepicker-calendar-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 20 20\"\n        fill=\"currentColor\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M5.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H6a.75.75 0 01-.75-.75V12zM6 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H6zM7.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H8a.75.75 0 01-.75-.75V12zM8 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H8zM9.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V10zM10 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H10zM9.25 14a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V14zM12 9.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V10a.75.75 0 00-.75-.75H12zM11.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H12a.75.75 0 01-.75-.75V12zM12 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H12zM13.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H14a.75.75 0 01-.75-.75V10zM14 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H14z\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </div>\n  </div>\n\n  <!-- Calendar Panel -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"datepickerInput\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n    (backdropClick)=\"onClickOutside()\"\n    (detach)=\"close()\"\n  >\n    <div\n      #calendarPanel\n      class=\"lc-datepicker-calendar\"\n      [class.lc-datepicker-calendar--open]=\"isOpen()\"\n      [class.lc-datepicker-calendar--month]=\"isMonthMode()\"\n      [id]=\"inputId + '-calendar'\"\n      role=\"dialog\"\n      [attr.aria-label]=\"isMonthMode() ? monthDialogAriaLabel() : dialogAriaLabel()\"\n    >\n      <!-- Calendar Header (month mode, 3.29: the year and year buttons) -->\n      <div class=\"lc-datepicker-header\">\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-nav-button\"\n          (click)=\"isMonthMode() ? previousYear() : previousMonth()\"\n          [attr.aria-label]=\"isMonthMode() ? previousYearAriaLabel() : previousMonthAriaLabel()\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </button>\n        \n        <div class=\"lc-datepicker-month-year\" aria-live=\"polite\" [attr.id]=\"isMonthMode() ? inputId + '-year' : null\">\n          {{ headerTitle() }}\n        </div>\n\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-nav-button\"\n          (click)=\"isMonthMode() ? nextYear() : nextMonth()\"\n          [attr.aria-label]=\"isMonthMode() ? nextYearAriaLabel() : nextMonthAriaLabel()\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </button>\n      </div>\n\n      <!-- Quick Actions -->\n      <div class=\"lc-datepicker-quick-actions\">\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-today-button\"\n          (click)=\"isMonthMode() ? showCurrentYear() : goToToday()\"\n        >\n          {{ isMonthMode() ? currentMonthLabel() : todayLabel() }}\n        </button>\n      </div>\n\n      @if (isMonthMode()) {\n        <!-- Month grid (3.29): APG grid, one roving tab stop, named by the year title -->\n        <div class=\"lc-datepicker-months\" role=\"grid\" [attr.aria-labelledby]=\"inputId + '-year'\">\n          @for (row of monthRows(); track $index) {\n            <div class=\"lc-datepicker-month-row\" role=\"row\">\n              @for (cell of row; track cell.month) {\n                <div\n                  role=\"gridcell\"\n                  class=\"lc-datepicker-month\"\n                  [class.lc-datepicker-month--current]=\"cell.current\"\n                  [class.lc-datepicker-month--selected]=\"cell.selected\"\n                  [class.lc-datepicker-month--disabled]=\"cell.disabled\"\n                  [attr.tabindex]=\"cell.month === monthTabStop() ? 0 : -1\"\n                  [attr.aria-selected]=\"cell.selected ? 'true' : null\"\n                  [attr.aria-current]=\"cell.current ? 'date' : null\"\n                  [attr.aria-disabled]=\"cell.disabled ? 'true' : null\"\n                  [attr.aria-label]=\"cell.label\"\n                  (click)=\"selectMonth(cell.month)\"\n                  (keydown)=\"onMonthKeydown($event, cell.month)\"\n                >{{ cell.name }}</div>\n              }\n            </div>\n          }\n        </div>\n      } @else {\n        <!-- Weekday Headers -->\n        <div class=\"lc-datepicker-weekdays\" aria-hidden=\"true\">\n          @for (day of weekdayLabels(); track $index) {\n            <div class=\"lc-datepicker-weekday\">{{ day }}</div>\n          }\n        </div>\n\n        <!-- Calendar Days -->\n        <div class=\"lc-datepicker-days\">\n          @for (date of generateCalendarDays(); track date.getTime()) {\n            <button\n              type=\"button\"\n              class=\"lc-datepicker-day\"\n              [class.lc-datepicker-day--other-month]=\"!isCurrentMonth(date)\"\n              [class.lc-datepicker-day--today]=\"isToday(date)\"\n              [class.lc-datepicker-day--selected]=\"isSelectedDate(date)\"\n              [class.lc-datepicker-day--disabled]=\"isDateDisabled(date)\"\n              [disabled]=\"isDateDisabled(date)\"\n              [attr.aria-current]=\"isToday(date) ? 'date' : null\"\n              [attr.aria-label]=\"dayAriaLabel(date)\"\n              (click)=\"selectDate(date)\"\n            >\n              {{ date.getDate() }}\n            </button>\n          }\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <!-- Helper/Error Text -->\n  @if (error() && errorMessage()) {\n    <div class=\"lc-datepicker__error\" [id]=\"inputId + '-error'\" role=\"alert\">\n      {{ errorMessage() }}\n    </div>\n  } @else if (helperText()) {\n    <div class=\"lc-datepicker__helper\" [id]=\"inputId + '-helper'\">\n      {{ helperText() }}\n    </div>\n  }\n</div>\n",
+		styles: [".lc-datepicker-wrapper{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1));width:100%;position:relative}.lc-datepicker-input-wrapper{position:relative;width:100%}.lc-datepicker{width:100%;font-family:var(--font-family-sans);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-surface);border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease);cursor:text}.lc-datepicker::placeholder{color:var(--color-text-secondary)}.lc-datepicker:hover:not(:disabled):not([readonly]):not(.lc-datepicker--error):not(:focus){border-color:var(--color-text-secondary)}.lc-datepicker:focus{outline:2px solid var(--color-primary-500);outline-offset:0px;border-color:var(--color-primary-500)}.lc-datepicker:disabled{background-color:var(--color-surface-muted);border-color:var(--color-border);cursor:not-allowed;opacity:.6}.lc-datepicker[readonly]{background-color:var(--color-surface-muted);cursor:default}.lc-datepicker.lc-datepicker--error{border-color:var(--color-error-600)}.lc-datepicker.lc-datepicker--error:focus{outline-color:var(--color-error-600);border-color:var(--color-error-600)}.lc-datepicker.lc-datepicker--xs{height:var(--size-interactive-xs-height);padding:var(--size-interactive-xs-padding);padding-right:var(--spacing-10);font-size:var(--size-interactive-xs-font-size)}.lc-datepicker.lc-datepicker--sm{height:var(--size-interactive-sm-height);padding:var(--size-interactive-sm-padding);padding-right:var(--spacing-12);font-size:var(--size-interactive-sm-font-size)}.lc-datepicker.lc-datepicker--md{height:var(--size-interactive-md-height);padding:var(--size-interactive-md-padding);padding-right:var(--spacing-14);font-size:var(--size-interactive-md-font-size)}.lc-datepicker.lc-datepicker--lg{height:var(--size-interactive-lg-height);padding:var(--size-interactive-lg-padding);padding-right:var(--spacing-16);font-size:var(--size-interactive-lg-font-size)}.lc-datepicker.lc-datepicker--filled{background-color:var(--color-surface-sunken);border-color:var(--color-field-border)}.lc-datepicker.lc-datepicker--filled:hover:not(:disabled):not([readonly]):not(.lc-datepicker--error):not(:focus){background-color:var(--color-surface-hover);border-color:var(--color-text-secondary)}.lc-datepicker.lc-datepicker--filled:focus{background-color:var(--color-surface);border-color:var(--color-primary-500)}.lc-datepicker.lc-datepicker--filled:disabled{background-color:var(--color-surface-muted);border-color:var(--color-border)}.lc-datepicker.lc-datepicker--filled.lc-datepicker--error{border-color:var(--color-error-600)}.lc-datepicker-icons{position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:var(--spacing-1);pointer-events:none}.lc-datepicker-calendar-icon{width:1.25rem;height:1.25rem;color:var(--color-text-secondary)}.lc-datepicker-clear{pointer-events:auto;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;border-radius:var(--border-radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-clear:hover{color:var(--color-text-primary);background-color:var(--color-surface-hover)}.lc-datepicker-clear:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.lc-datepicker-clear svg{width:1rem;height:1rem}.lc-datepicker-calendar{position:absolute;z-index:1000;margin-top:var(--spacing-1);padding:var(--lc-density-padding-md, var(--spacing-4));background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);box-shadow:var(--elevation-3);min-width:280px;opacity:0;transform:translateY(-8px);transition:all var(--animation-duration-base) var(--animation-timing-ease);pointer-events:none}.lc-datepicker-calendar.lc-datepicker-calendar--open{opacity:1;transform:translateY(0);pointer-events:auto}.lc-datepicker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-4)}.lc-datepicker-month-year{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.lc-datepicker-nav-button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:none;border:none;border-radius:var(--border-radius-md);color:var(--color-text-secondary);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-nav-button:hover{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-datepicker-nav-button:active{background-color:var(--color-surface-sunken)}.lc-datepicker-nav-button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.lc-datepicker-nav-button svg{width:1.25rem;height:1.25rem}.lc-datepicker-quick-actions{display:flex;justify-content:center;margin-bottom:var(--spacing-3)}.lc-datepicker-today-button{padding:var(--spacing-1) var(--spacing-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-primary-600);background:none;border:1px solid var(--color-primary-200);border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-today-button:hover{background-color:var(--color-primary-50);border-color:var(--color-primary-300)}.lc-datepicker-today-button:active{background-color:var(--color-primary-100)}.lc-datepicker-today-button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.lc-datepicker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--spacing-1);margin-bottom:var(--spacing-2)}.lc-datepicker-weekday{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);text-align:center;padding:var(--spacing-1)}.lc-datepicker-days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--spacing-1)}.lc-datepicker-day{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);color:var(--color-text-primary);background:none;border:none;border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-day:hover:not(:disabled){background-color:var(--color-surface-hover)}.lc-datepicker-day.lc-datepicker-day--other-month{color:var(--color-text-tertiary)}.lc-datepicker-day.lc-datepicker-day--today{font-weight:var(--font-weight-semibold);color:var(--color-primary-600);background-color:var(--color-primary-50)}.lc-datepicker-day.lc-datepicker-day--selected{font-weight:var(--font-weight-semibold);color:var(--color-on-primary);background-color:var(--color-primary-fill)}.lc-datepicker-day.lc-datepicker-day--selected:hover{background-color:var(--color-primary-fill-hover)}.lc-datepicker-day.lc-datepicker-day--disabled{color:var(--color-text-disabled);cursor:not-allowed;opacity:.5}.lc-datepicker-day.lc-datepicker-day--disabled:hover{background:none}.lc-datepicker-day:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-datepicker-calendar--month .lc-datepicker-nav-button{width:2.75rem;height:2.75rem}.lc-datepicker-calendar--month .lc-datepicker-today-button{min-height:2.75rem}.lc-datepicker-months{display:flex;flex-direction:column;gap:var(--spacing-2);inline-size:17.25rem;max-inline-size:calc(100vw - 4.125rem)}.lc-datepicker-month-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-2)}.lc-datepicker-month{display:flex;align-items:center;justify-content:center;min-height:2.75rem;padding:0 var(--spacing-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);text-align:center;overflow-wrap:anywhere;hyphens:auto;color:var(--color-text-primary);border-radius:var(--border-radius-md);cursor:pointer}.lc-datepicker-month:hover:not(.lc-datepicker-month--disabled):not(.lc-datepicker-month--selected){background-color:var(--color-surface-hover)}.lc-datepicker-month.lc-datepicker-month--current{font-weight:var(--font-weight-semibold);color:var(--color-primary-600);background-color:var(--color-primary-50)}.lc-datepicker-month.lc-datepicker-month--selected{font-weight:var(--font-weight-semibold);color:var(--color-on-primary);background-color:var(--color-primary-fill);box-shadow:inset 0 0 0 2px var(--color-primary-500)}.lc-datepicker-month.lc-datepicker-month--disabled{color:var(--color-text-disabled);cursor:not-allowed;opacity:.5}.lc-datepicker-month:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@media(forced-colors:active){.lc-datepicker-month:focus-visible{outline-color:Highlight}.lc-datepicker-month.lc-datepicker-month--selected{forced-color-adjust:none;background-color:Highlight;color:HighlightText}.lc-datepicker-month.lc-datepicker-month--current{text-decoration:underline}.lc-datepicker-month.lc-datepicker-month--disabled{color:GrayText}}.lc-datepicker__error{font-size:var(--font-size-xs);color:var(--color-error-600);margin-top:var(--spacing-1)}.lc-datepicker__helper{font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-top:var(--spacing-1)}\n"],
 		dependencies: [{
 			kind: "ngmodule",
 			type: OverlayModule
@@ -594,8 +801,8 @@ i0.ɵɵngDeclareClassMetadata({
 				useExisting: forwardRef(() => DatepickerComponent),
 				multi: true
 			}],
-			template: "<div class=\"lc-datepicker-wrapper\">\n  <div class=\"lc-datepicker-input-wrapper\">\n    <input\n      #datepickerInput\n      type=\"text\"\n      [id]=\"inputId\"\n      [class]=\"datepickerClasses()\"\n      role=\"combobox\"\n      aria-haspopup=\"dialog\"\n      autocomplete=\"off\"\n      [attr.aria-expanded]=\"isOpen() ? 'true' : 'false'\"\n      [attr.aria-controls]=\"isOpen() ? inputId + '-calendar' : null\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-required]=\"required() ? 'true' : null\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n      [attr.aria-invalid]=\"error() ? 'true' : null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [readonly]=\"readonly()\"\n      [disabled]=\"isDisabled()\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"inputValue()\"\n      (input)=\"onInputChange(getInputValue($event))\"\n      (click)=\"toggle()\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"onBlur()\"\n    />\n    <div class=\"lc-datepicker-icons\">\n      @if (selectedDate() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-clear\"\n          (click)=\"clear(); $event.stopPropagation()\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n            />\n          </svg>\n        </button>\n      }\n      <svg\n        class=\"lc-datepicker-calendar-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 20 20\"\n        fill=\"currentColor\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M5.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H6a.75.75 0 01-.75-.75V12zM6 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H6zM7.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H8a.75.75 0 01-.75-.75V12zM8 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H8zM9.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V10zM10 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H10zM9.25 14a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V14zM12 9.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V10a.75.75 0 00-.75-.75H12zM11.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H12a.75.75 0 01-.75-.75V12zM12 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H12zM13.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H14a.75.75 0 01-.75-.75V10zM14 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H14z\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </div>\n  </div>\n\n  <!-- Calendar Panel -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"datepickerInput\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n    (backdropClick)=\"onClickOutside()\"\n    (detach)=\"close()\"\n  >\n    <div\n      #calendarPanel\n      class=\"lc-datepicker-calendar\"\n      [class.lc-datepicker-calendar--open]=\"isOpen()\"\n      [id]=\"inputId + '-calendar'\"\n      role=\"dialog\"\n      [attr.aria-label]=\"dialogAriaLabel()\"\n    >\n      <!-- Calendar Header -->\n      <div class=\"lc-datepicker-header\">\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-nav-button\"\n          (click)=\"previousMonth()\"\n          [attr.aria-label]=\"previousMonthAriaLabel()\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </button>\n        \n        <div class=\"lc-datepicker-month-year\" aria-live=\"polite\">\n          {{ currentMonthName() }} {{ currentYear() }}\n        </div>\n        \n        <button\n          type=\"button\"\n          class=\"lc-datepicker-nav-button\"\n          (click)=\"nextMonth()\"\n          [attr.aria-label]=\"nextMonthAriaLabel()\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </button>\n      </div>\n\n      <!-- Quick Actions -->\n      <div class=\"lc-datepicker-quick-actions\">\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-today-button\"\n          (click)=\"goToToday()\"\n        >\n          {{ todayLabel() }}\n        </button>\n      </div>\n\n      <!-- Weekday Headers -->\n      <div class=\"lc-datepicker-weekdays\" aria-hidden=\"true\">\n        @for (day of weekdayLabels(); track $index) {\n          <div class=\"lc-datepicker-weekday\">{{ day }}</div>\n        }\n      </div>\n\n      <!-- Calendar Days -->\n      <div class=\"lc-datepicker-days\">\n        @for (date of generateCalendarDays(); track date.getTime()) {\n          <button\n            type=\"button\"\n            class=\"lc-datepicker-day\"\n            [class.lc-datepicker-day--other-month]=\"!isCurrentMonth(date)\"\n            [class.lc-datepicker-day--today]=\"isToday(date)\"\n            [class.lc-datepicker-day--selected]=\"isSelectedDate(date)\"\n            [class.lc-datepicker-day--disabled]=\"isDateDisabled(date)\"\n            [disabled]=\"isDateDisabled(date)\"\n            [attr.aria-current]=\"isToday(date) ? 'date' : null\"\n            [attr.aria-label]=\"dayAriaLabel(date)\"\n            (click)=\"selectDate(date)\"\n          >\n            {{ date.getDate() }}\n          </button>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Helper/Error Text -->\n  @if (error() && errorMessage()) {\n    <div class=\"lc-datepicker__error\" [id]=\"inputId + '-error'\" role=\"alert\">\n      {{ errorMessage() }}\n    </div>\n  } @else if (helperText()) {\n    <div class=\"lc-datepicker__helper\" [id]=\"inputId + '-helper'\">\n      {{ helperText() }}\n    </div>\n  }\n</div>\n",
-			styles: [".lc-datepicker-wrapper{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1));width:100%;position:relative}.lc-datepicker-input-wrapper{position:relative;width:100%}.lc-datepicker{width:100%;font-family:var(--font-family-sans);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-surface);border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease);cursor:text}.lc-datepicker::placeholder{color:var(--color-text-secondary)}.lc-datepicker:hover:not(:disabled):not([readonly]):not(.lc-datepicker--error):not(:focus){border-color:var(--color-text-secondary)}.lc-datepicker:focus{outline:2px solid var(--color-primary-500);outline-offset:0px;border-color:var(--color-primary-500)}.lc-datepicker:disabled{background-color:var(--color-surface-muted);border-color:var(--color-border);cursor:not-allowed;opacity:.6}.lc-datepicker[readonly]{background-color:var(--color-surface-muted);cursor:default}.lc-datepicker.lc-datepicker--error{border-color:var(--color-error-600)}.lc-datepicker.lc-datepicker--error:focus{outline-color:var(--color-error-600);border-color:var(--color-error-600)}.lc-datepicker.lc-datepicker--xs{height:var(--size-interactive-xs-height);padding:var(--size-interactive-xs-padding);padding-right:var(--spacing-10);font-size:var(--size-interactive-xs-font-size)}.lc-datepicker.lc-datepicker--sm{height:var(--size-interactive-sm-height);padding:var(--size-interactive-sm-padding);padding-right:var(--spacing-12);font-size:var(--size-interactive-sm-font-size)}.lc-datepicker.lc-datepicker--md{height:var(--size-interactive-md-height);padding:var(--size-interactive-md-padding);padding-right:var(--spacing-14);font-size:var(--size-interactive-md-font-size)}.lc-datepicker.lc-datepicker--lg{height:var(--size-interactive-lg-height);padding:var(--size-interactive-lg-padding);padding-right:var(--spacing-16);font-size:var(--size-interactive-lg-font-size)}.lc-datepicker.lc-datepicker--filled{background-color:var(--color-surface-sunken);border-color:var(--color-field-border)}.lc-datepicker.lc-datepicker--filled:hover:not(:disabled):not([readonly]):not(.lc-datepicker--error):not(:focus){background-color:var(--color-surface-hover);border-color:var(--color-text-secondary)}.lc-datepicker.lc-datepicker--filled:focus{background-color:var(--color-surface);border-color:var(--color-primary-500)}.lc-datepicker.lc-datepicker--filled:disabled{background-color:var(--color-surface-muted);border-color:var(--color-border)}.lc-datepicker.lc-datepicker--filled.lc-datepicker--error{border-color:var(--color-error-600)}.lc-datepicker-icons{position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:var(--spacing-1);pointer-events:none}.lc-datepicker-calendar-icon{width:1.25rem;height:1.25rem;color:var(--color-text-secondary)}.lc-datepicker-clear{pointer-events:auto;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;border-radius:var(--border-radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-clear:hover{color:var(--color-text-primary);background-color:var(--color-surface-hover)}.lc-datepicker-clear:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.lc-datepicker-clear svg{width:1rem;height:1rem}.lc-datepicker-calendar{position:absolute;z-index:1000;margin-top:var(--spacing-1);padding:var(--lc-density-padding-md, var(--spacing-4));background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);box-shadow:var(--elevation-3);min-width:280px;opacity:0;transform:translateY(-8px);transition:all var(--animation-duration-base) var(--animation-timing-ease);pointer-events:none}.lc-datepicker-calendar.lc-datepicker-calendar--open{opacity:1;transform:translateY(0);pointer-events:auto}.lc-datepicker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-4)}.lc-datepicker-month-year{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.lc-datepicker-nav-button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:none;border:none;border-radius:var(--border-radius-md);color:var(--color-text-secondary);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-nav-button:hover{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-datepicker-nav-button:active{background-color:var(--color-surface-sunken)}.lc-datepicker-nav-button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.lc-datepicker-nav-button svg{width:1.25rem;height:1.25rem}.lc-datepicker-quick-actions{display:flex;justify-content:center;margin-bottom:var(--spacing-3)}.lc-datepicker-today-button{padding:var(--spacing-1) var(--spacing-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-primary-600);background:none;border:1px solid var(--color-primary-200);border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-today-button:hover{background-color:var(--color-primary-50);border-color:var(--color-primary-300)}.lc-datepicker-today-button:active{background-color:var(--color-primary-100)}.lc-datepicker-today-button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.lc-datepicker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--spacing-1);margin-bottom:var(--spacing-2)}.lc-datepicker-weekday{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);text-align:center;padding:var(--spacing-1)}.lc-datepicker-days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--spacing-1)}.lc-datepicker-day{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);color:var(--color-text-primary);background:none;border:none;border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-day:hover:not(:disabled){background-color:var(--color-surface-hover)}.lc-datepicker-day.lc-datepicker-day--other-month{color:var(--color-text-tertiary)}.lc-datepicker-day.lc-datepicker-day--today{font-weight:var(--font-weight-semibold);color:var(--color-primary-600);background-color:var(--color-primary-50)}.lc-datepicker-day.lc-datepicker-day--selected{font-weight:var(--font-weight-semibold);color:var(--color-on-primary);background-color:var(--color-primary-fill)}.lc-datepicker-day.lc-datepicker-day--selected:hover{background-color:var(--color-primary-fill-hover)}.lc-datepicker-day.lc-datepicker-day--disabled{color:var(--color-text-disabled);cursor:not-allowed;opacity:.5}.lc-datepicker-day.lc-datepicker-day--disabled:hover{background:none}.lc-datepicker-day:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-datepicker__error{font-size:var(--font-size-xs);color:var(--color-error-600);margin-top:var(--spacing-1)}.lc-datepicker__helper{font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-top:var(--spacing-1)}\n"]
+			template: "<div class=\"lc-datepicker-wrapper\">\n  <div class=\"lc-datepicker-input-wrapper\">\n    <input\n      #datepickerInput\n      type=\"text\"\n      [id]=\"inputId\"\n      [class]=\"datepickerClasses()\"\n      role=\"combobox\"\n      aria-haspopup=\"dialog\"\n      autocomplete=\"off\"\n      [attr.aria-expanded]=\"isOpen() ? 'true' : 'false'\"\n      [attr.aria-controls]=\"isOpen() ? inputId + '-calendar' : null\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-required]=\"required() ? 'true' : null\"\n      [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n      [attr.aria-invalid]=\"error() ? 'true' : null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [readonly]=\"readonly()\"\n      [disabled]=\"isDisabled()\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"inputValue()\"\n      (input)=\"onInputChange(getInputValue($event))\"\n      (click)=\"toggle()\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"onBlur()\"\n    />\n    <div class=\"lc-datepicker-icons\">\n      @if (selectedDate() && !isDisabled() && !readonly()) {\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-clear\"\n          (click)=\"clear(); $event.stopPropagation()\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n            />\n          </svg>\n        </button>\n      }\n      <svg\n        class=\"lc-datepicker-calendar-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 20 20\"\n        fill=\"currentColor\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M5.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H6a.75.75 0 01-.75-.75V12zM6 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H6zM7.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H8a.75.75 0 01-.75-.75V12zM8 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H8zM9.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V10zM10 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H10zM9.25 14a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V14zM12 9.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V10a.75.75 0 00-.75-.75H12zM11.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H12a.75.75 0 01-.75-.75V12zM12 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H12zM13.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H14a.75.75 0 01-.75-.75V10zM14 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H14z\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </div>\n  </div>\n\n  <!-- Calendar Panel -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"datepickerInput\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n    (backdropClick)=\"onClickOutside()\"\n    (detach)=\"close()\"\n  >\n    <div\n      #calendarPanel\n      class=\"lc-datepicker-calendar\"\n      [class.lc-datepicker-calendar--open]=\"isOpen()\"\n      [class.lc-datepicker-calendar--month]=\"isMonthMode()\"\n      [id]=\"inputId + '-calendar'\"\n      role=\"dialog\"\n      [attr.aria-label]=\"isMonthMode() ? monthDialogAriaLabel() : dialogAriaLabel()\"\n    >\n      <!-- Calendar Header (month mode, 3.29: the year and year buttons) -->\n      <div class=\"lc-datepicker-header\">\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-nav-button\"\n          (click)=\"isMonthMode() ? previousYear() : previousMonth()\"\n          [attr.aria-label]=\"isMonthMode() ? previousYearAriaLabel() : previousMonthAriaLabel()\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </button>\n        \n        <div class=\"lc-datepicker-month-year\" aria-live=\"polite\" [attr.id]=\"isMonthMode() ? inputId + '-year' : null\">\n          {{ headerTitle() }}\n        </div>\n\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-nav-button\"\n          (click)=\"isMonthMode() ? nextYear() : nextMonth()\"\n          [attr.aria-label]=\"isMonthMode() ? nextYearAriaLabel() : nextMonthAriaLabel()\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </button>\n      </div>\n\n      <!-- Quick Actions -->\n      <div class=\"lc-datepicker-quick-actions\">\n        <button\n          type=\"button\"\n          class=\"lc-datepicker-today-button\"\n          (click)=\"isMonthMode() ? showCurrentYear() : goToToday()\"\n        >\n          {{ isMonthMode() ? currentMonthLabel() : todayLabel() }}\n        </button>\n      </div>\n\n      @if (isMonthMode()) {\n        <!-- Month grid (3.29): APG grid, one roving tab stop, named by the year title -->\n        <div class=\"lc-datepicker-months\" role=\"grid\" [attr.aria-labelledby]=\"inputId + '-year'\">\n          @for (row of monthRows(); track $index) {\n            <div class=\"lc-datepicker-month-row\" role=\"row\">\n              @for (cell of row; track cell.month) {\n                <div\n                  role=\"gridcell\"\n                  class=\"lc-datepicker-month\"\n                  [class.lc-datepicker-month--current]=\"cell.current\"\n                  [class.lc-datepicker-month--selected]=\"cell.selected\"\n                  [class.lc-datepicker-month--disabled]=\"cell.disabled\"\n                  [attr.tabindex]=\"cell.month === monthTabStop() ? 0 : -1\"\n                  [attr.aria-selected]=\"cell.selected ? 'true' : null\"\n                  [attr.aria-current]=\"cell.current ? 'date' : null\"\n                  [attr.aria-disabled]=\"cell.disabled ? 'true' : null\"\n                  [attr.aria-label]=\"cell.label\"\n                  (click)=\"selectMonth(cell.month)\"\n                  (keydown)=\"onMonthKeydown($event, cell.month)\"\n                >{{ cell.name }}</div>\n              }\n            </div>\n          }\n        </div>\n      } @else {\n        <!-- Weekday Headers -->\n        <div class=\"lc-datepicker-weekdays\" aria-hidden=\"true\">\n          @for (day of weekdayLabels(); track $index) {\n            <div class=\"lc-datepicker-weekday\">{{ day }}</div>\n          }\n        </div>\n\n        <!-- Calendar Days -->\n        <div class=\"lc-datepicker-days\">\n          @for (date of generateCalendarDays(); track date.getTime()) {\n            <button\n              type=\"button\"\n              class=\"lc-datepicker-day\"\n              [class.lc-datepicker-day--other-month]=\"!isCurrentMonth(date)\"\n              [class.lc-datepicker-day--today]=\"isToday(date)\"\n              [class.lc-datepicker-day--selected]=\"isSelectedDate(date)\"\n              [class.lc-datepicker-day--disabled]=\"isDateDisabled(date)\"\n              [disabled]=\"isDateDisabled(date)\"\n              [attr.aria-current]=\"isToday(date) ? 'date' : null\"\n              [attr.aria-label]=\"dayAriaLabel(date)\"\n              (click)=\"selectDate(date)\"\n            >\n              {{ date.getDate() }}\n            </button>\n          }\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <!-- Helper/Error Text -->\n  @if (error() && errorMessage()) {\n    <div class=\"lc-datepicker__error\" [id]=\"inputId + '-error'\" role=\"alert\">\n      {{ errorMessage() }}\n    </div>\n  } @else if (helperText()) {\n    <div class=\"lc-datepicker__helper\" [id]=\"inputId + '-helper'\">\n      {{ helperText() }}\n    </div>\n  }\n</div>\n",
+			styles: [".lc-datepicker-wrapper{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1));width:100%;position:relative}.lc-datepicker-input-wrapper{position:relative;width:100%}.lc-datepicker{width:100%;font-family:var(--font-family-sans);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-surface);border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease);cursor:text}.lc-datepicker::placeholder{color:var(--color-text-secondary)}.lc-datepicker:hover:not(:disabled):not([readonly]):not(.lc-datepicker--error):not(:focus){border-color:var(--color-text-secondary)}.lc-datepicker:focus{outline:2px solid var(--color-primary-500);outline-offset:0px;border-color:var(--color-primary-500)}.lc-datepicker:disabled{background-color:var(--color-surface-muted);border-color:var(--color-border);cursor:not-allowed;opacity:.6}.lc-datepicker[readonly]{background-color:var(--color-surface-muted);cursor:default}.lc-datepicker.lc-datepicker--error{border-color:var(--color-error-600)}.lc-datepicker.lc-datepicker--error:focus{outline-color:var(--color-error-600);border-color:var(--color-error-600)}.lc-datepicker.lc-datepicker--xs{height:var(--size-interactive-xs-height);padding:var(--size-interactive-xs-padding);padding-right:var(--spacing-10);font-size:var(--size-interactive-xs-font-size)}.lc-datepicker.lc-datepicker--sm{height:var(--size-interactive-sm-height);padding:var(--size-interactive-sm-padding);padding-right:var(--spacing-12);font-size:var(--size-interactive-sm-font-size)}.lc-datepicker.lc-datepicker--md{height:var(--size-interactive-md-height);padding:var(--size-interactive-md-padding);padding-right:var(--spacing-14);font-size:var(--size-interactive-md-font-size)}.lc-datepicker.lc-datepicker--lg{height:var(--size-interactive-lg-height);padding:var(--size-interactive-lg-padding);padding-right:var(--spacing-16);font-size:var(--size-interactive-lg-font-size)}.lc-datepicker.lc-datepicker--filled{background-color:var(--color-surface-sunken);border-color:var(--color-field-border)}.lc-datepicker.lc-datepicker--filled:hover:not(:disabled):not([readonly]):not(.lc-datepicker--error):not(:focus){background-color:var(--color-surface-hover);border-color:var(--color-text-secondary)}.lc-datepicker.lc-datepicker--filled:focus{background-color:var(--color-surface);border-color:var(--color-primary-500)}.lc-datepicker.lc-datepicker--filled:disabled{background-color:var(--color-surface-muted);border-color:var(--color-border)}.lc-datepicker.lc-datepicker--filled.lc-datepicker--error{border-color:var(--color-error-600)}.lc-datepicker-icons{position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:var(--spacing-1);pointer-events:none}.lc-datepicker-calendar-icon{width:1.25rem;height:1.25rem;color:var(--color-text-secondary)}.lc-datepicker-clear{pointer-events:auto;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;border-radius:var(--border-radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-clear:hover{color:var(--color-text-primary);background-color:var(--color-surface-hover)}.lc-datepicker-clear:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.lc-datepicker-clear svg{width:1rem;height:1rem}.lc-datepicker-calendar{position:absolute;z-index:1000;margin-top:var(--spacing-1);padding:var(--lc-density-padding-md, var(--spacing-4));background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);box-shadow:var(--elevation-3);min-width:280px;opacity:0;transform:translateY(-8px);transition:all var(--animation-duration-base) var(--animation-timing-ease);pointer-events:none}.lc-datepicker-calendar.lc-datepicker-calendar--open{opacity:1;transform:translateY(0);pointer-events:auto}.lc-datepicker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-4)}.lc-datepicker-month-year{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.lc-datepicker-nav-button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:none;border:none;border-radius:var(--border-radius-md);color:var(--color-text-secondary);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-nav-button:hover{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-datepicker-nav-button:active{background-color:var(--color-surface-sunken)}.lc-datepicker-nav-button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.lc-datepicker-nav-button svg{width:1.25rem;height:1.25rem}.lc-datepicker-quick-actions{display:flex;justify-content:center;margin-bottom:var(--spacing-3)}.lc-datepicker-today-button{padding:var(--spacing-1) var(--spacing-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-primary-600);background:none;border:1px solid var(--color-primary-200);border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-today-button:hover{background-color:var(--color-primary-50);border-color:var(--color-primary-300)}.lc-datepicker-today-button:active{background-color:var(--color-primary-100)}.lc-datepicker-today-button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.lc-datepicker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--spacing-1);margin-bottom:var(--spacing-2)}.lc-datepicker-weekday{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);text-align:center;padding:var(--spacing-1)}.lc-datepicker-days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--spacing-1)}.lc-datepicker-day{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);color:var(--color-text-primary);background:none;border:none;border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-day:hover:not(:disabled){background-color:var(--color-surface-hover)}.lc-datepicker-day.lc-datepicker-day--other-month{color:var(--color-text-tertiary)}.lc-datepicker-day.lc-datepicker-day--today{font-weight:var(--font-weight-semibold);color:var(--color-primary-600);background-color:var(--color-primary-50)}.lc-datepicker-day.lc-datepicker-day--selected{font-weight:var(--font-weight-semibold);color:var(--color-on-primary);background-color:var(--color-primary-fill)}.lc-datepicker-day.lc-datepicker-day--selected:hover{background-color:var(--color-primary-fill-hover)}.lc-datepicker-day.lc-datepicker-day--disabled{color:var(--color-text-disabled);cursor:not-allowed;opacity:.5}.lc-datepicker-day.lc-datepicker-day--disabled:hover{background:none}.lc-datepicker-day:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-datepicker-calendar--month .lc-datepicker-nav-button{width:2.75rem;height:2.75rem}.lc-datepicker-calendar--month .lc-datepicker-today-button{min-height:2.75rem}.lc-datepicker-months{display:flex;flex-direction:column;gap:var(--spacing-2);inline-size:17.25rem;max-inline-size:calc(100vw - 4.125rem)}.lc-datepicker-month-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-2)}.lc-datepicker-month{display:flex;align-items:center;justify-content:center;min-height:2.75rem;padding:0 var(--spacing-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);text-align:center;overflow-wrap:anywhere;hyphens:auto;color:var(--color-text-primary);border-radius:var(--border-radius-md);cursor:pointer}.lc-datepicker-month:hover:not(.lc-datepicker-month--disabled):not(.lc-datepicker-month--selected){background-color:var(--color-surface-hover)}.lc-datepicker-month.lc-datepicker-month--current{font-weight:var(--font-weight-semibold);color:var(--color-primary-600);background-color:var(--color-primary-50)}.lc-datepicker-month.lc-datepicker-month--selected{font-weight:var(--font-weight-semibold);color:var(--color-on-primary);background-color:var(--color-primary-fill);box-shadow:inset 0 0 0 2px var(--color-primary-500)}.lc-datepicker-month.lc-datepicker-month--disabled{color:var(--color-text-disabled);cursor:not-allowed;opacity:.5}.lc-datepicker-month:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@media(forced-colors:active){.lc-datepicker-month:focus-visible{outline-color:Highlight}.lc-datepicker-month.lc-datepicker-month--selected{forced-color-adjust:none;background-color:Highlight;color:HighlightText}.lc-datepicker-month.lc-datepicker-month--current{text-decoration:underline}.lc-datepicker-month.lc-datepicker-month--disabled{color:GrayText}}.lc-datepicker__error{font-size:var(--font-size-xs);color:var(--color-error-600);margin-top:var(--spacing-1)}.lc-datepicker__helper{font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-top:var(--spacing-1)}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -791,6 +998,46 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		granularity: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "granularity",
+				required: false
+			}]
+		}],
+		previousYearAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "previousYearAriaLabel",
+				required: false
+			}]
+		}],
+		nextYearAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nextYearAriaLabel",
+				required: false
+			}]
+		}],
+		monthDialogAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "monthDialogAriaLabel",
+				required: false
+			}]
+		}],
+		currentMonthLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "currentMonthLabel",
+				required: false
+			}]
+		}],
 		dateChange: [{
 			type: i0.Output,
 			args: ["dateChange"]