@frame-ui-ng/components 0.2.0-beta.0 → 0.4.0-beta.0

package/fesm2022/frame-ui-ng-components-calendar.mjs

@@ -1,6 +1,6 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { forwardRef, input, booleanAttribute, output, signal, computed, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { forwardRef, input, booleanAttribute, output, signal, inject, ElementRef, computed, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 const VALUE_ACCESSOR = {
@@ -35,9 +35,11 @@ class FrCalendar {
     selected = input(undefined, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
     selectedChange = output();
     monthChange = output();
+    focusedDate = signal(null, ...(ngDevMode ? [{ debugName: "focusedDate" }] : /* istanbul ignore next */ []));
     navigatedMonth = signal(null, ...(ngDevMode ? [{ debugName: "navigatedMonth" }] : /* istanbul ignore next */ []));
     internalValue = signal(null, ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
     cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    host = inject((ElementRef));
     currentMonth = computed(() => startOfMonth(this.navigatedMonth() ?? this.month() ?? new Date()), ...(ngDevMode ? [{ debugName: "currentMonth" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     value = computed(() => {
@@ -54,6 +56,7 @@ class FrCalendar {
     })), ...(ngDevMode ? [{ debugName: "monthOptions" }] : /* istanbul ignore next */ []));
     yearOptions = computed(() => Array.from({ length: Math.max(0, this.toYear() - this.fromYear() + 1) }, (_, index) => this.fromYear() + index), ...(ngDevMode ? [{ debugName: "yearOptions" }] : /* istanbul ignore next */ []));
     months = computed(() => Array.from({ length: Math.max(1, this.numberOfMonths()) }, (_, index) => this.buildMonth(addMonths(this.currentMonth(), index))), ...(ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []));
+    activeDate = computed(() => this.resolveActiveDate(), ...(ngDevMode ? [{ debugName: "activeDate" }] : /* istanbul ignore next */ []));
     onTouched = () => undefined;
     onChange = () => undefined;
     writeValue(value) {
@@ -98,6 +101,25 @@ class FrCalendar {
         this.onChange(nextValue);
         this.selectedChange.emit(nextValue);
     }
+    handleDayKeydown(event, day) {
+        const offset = this.navigationOffset(event.key);
+        if (offset === null || this.isDisabled()) {
+            return;
+        }
+        event.preventDefault();
+        const next = addDays(day.date, offset);
+        this.focusedDate.set(next);
+        if (!this.isDateVisible(next)) {
+            this.updateMonth(startOfMonth(next));
+        }
+        this.focusDay(next);
+    }
+    dayTabIndex(day) {
+        return sameDate(day.date, this.activeDate()) ? 0 : -1;
+    }
+    focusActiveDate() {
+        this.focusDay(this.activeDate());
+    }
     monthLabel(date) {
         return new Intl.DateTimeFormat(this.locale(), {
             month: 'long',
@@ -114,6 +136,78 @@ class FrCalendar {
     weekNumber(date) {
         return isoWeekNumber(date).toString().padStart(2, '0');
     }
+    navigationOffset(key) {
+        switch (key) {
+            case 'ArrowLeft':
+                return this.dir() === 'rtl' ? 1 : -1;
+            case 'ArrowRight':
+                return this.dir() === 'rtl' ? -1 : 1;
+            case 'ArrowUp':
+                return -7;
+            case 'ArrowDown':
+                return 7;
+            default:
+                return null;
+        }
+    }
+    resolveActiveDate() {
+        const focused = this.focusedDate();
+        if (focused && this.findDay(focused) && !this.isDayDisabled(focused)) {
+            return cloneDate(focused);
+        }
+        const selected = this.selectedDate();
+        if (selected && this.findDay(selected) && !this.isDayDisabled(selected)) {
+            return cloneDate(selected);
+        }
+        const today = new Date();
+        if (this.findDay(today) && !this.isDayDisabled(today)) {
+            return cloneDate(today);
+        }
+        const firstEnabled = this.months()
+            .flatMap((month) => month.weeks.flat())
+            .find((day) => !day.disabled);
+        return firstEnabled ? cloneDate(firstEnabled.date) : cloneDate(this.currentMonth());
+    }
+    selectedDate() {
+        const value = this.value();
+        if (value instanceof Date) {
+            return value;
+        }
+        if (isRange(value)) {
+            return value.from ?? value.to;
+        }
+        return null;
+    }
+    isDateVisible(date) {
+        return this.months().some((month) => month.weeks.some((week) => week.some((day) => sameDate(day.date, date))));
+    }
+    findDay(date) {
+        for (const month of this.months()) {
+            for (const week of month.weeks) {
+                const day = week.find((item) => sameDate(item.date, date));
+                if (day) {
+                    return day;
+                }
+            }
+        }
+        return null;
+    }
+    isDayDisabled(date) {
+        return this.findDay(date)?.disabled ?? true;
+    }
+    focusDay(date) {
+        if (this.focusDayElement(date)) {
+            return;
+        }
+        setTimeout(() => {
+            this.focusDayElement(date);
+        });
+    }
+    focusDayElement(date) {
+        const button = this.host.nativeElement.querySelector(`.frame-calendar__day[data-date="${dateKey(date)}"]`);
+        button?.focus();
+        return !!button;
+    }
     updateMonth(month) {
         const next = startOfMonth(month);
         this.navigatedMonth.set(next);
@@ -156,137 +250,143 @@ class FrCalendar {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrCalendar, isStandalone: true, selector: "frame-calendar", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, fromYear: { classPropertyName: "fromYear", publicName: "fromYear", isSignal: true, isRequired: false, transformFunction: null }, toYear: { classPropertyName: "toYear", publicName: "toYear", isSignal: true, isRequired: false, transformFunction: null }, showOutsideDays: { classPropertyName: "showOutsideDays", publicName: "showOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumber: { classPropertyName: "showWeekNumber", publicName: "showWeekNumber", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, dateLabels: { classPropertyName: "dateLabels", publicName: "dateLabels", isSignal: true, isRequired: false, transformFunction: null }, disabledMatcher: { classPropertyName: "disabledMatcher", publicName: "disabledMatcher", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null }, previousMonthTemplate: { classPropertyName: "previousMonthTemplate", publicName: "previousMonthTemplate", isSignal: true, isRequired: false, transformFunction: null }, nextMonthTemplate: { classPropertyName: "nextMonthTemplate", publicName: "nextMonthTemplate", isSignal: true, isRequired: false, transformFunction: null }, previousMonthIcon: { classPropertyName: "previousMonthIcon", publicName: "previousMonthIcon", isSignal: true, isRequired: false, transformFunction: null }, nextMonthIcon: { classPropertyName: "nextMonthIcon", publicName: "nextMonthIcon", isSignal: true, isRequired: false, transformFunction: null }, previousMonthLabel: { classPropertyName: "previousMonthLabel", publicName: "previousMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, nextMonthLabel: { classPropertyName: "nextMonthLabel", publicName: "nextMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", monthChange: "monthChange" }, host: { properties: { "attr.data-mode": "mode()", "attr.data-caption-layout": "captionLayout()", "attr.data-disabled": "isDisabled() ? \"\" : null", "attr.dir": "dir()" }, classAttribute: "frame-calendar" }, providers: [VALUE_ACCESSOR], ngImport: i0, template: `
-    <div class="frame-calendar__header">
-      <button
-        class="frame-calendar__nav-button"
-        type="button"
-        [disabled]="isDisabled()"
-        (click)="previousMonth()"
-        [attr.aria-label]="previousMonthLabel()"
-      >
-        @if (previousMonthTemplate(); as template) {
-          <ng-container [ngTemplateOutlet]="template" />
-        } @else {
-          {{ previousMonthIcon() }}
-        }
-      </button>
-
-      @if (captionLayout() === 'dropdown') {
-        <div class="frame-calendar__caption-controls">
-          <select
-            class="frame-calendar__select"
-            [disabled]="isDisabled()"
-            [value]="currentMonth().getMonth()"
-            aria-label="Month"
-            (change)="setMonth($any($event.target).value)"
-          >
-            @for (month of monthOptions(); track month.value) {
-              <option [value]="month.value" [selected]="month.value === currentMonth().getMonth()">
-                {{ month.label }}
-              </option>
-            }
-          </select>
-
-          <select
-            class="frame-calendar__select"
-            [disabled]="isDisabled()"
-            [value]="currentMonth().getFullYear()"
-            aria-label="Year"
-            (change)="setYear($any($event.target).value)"
-          >
-            @for (year of yearOptions(); track year) {
-              <option [value]="year" [selected]="year === currentMonth().getFullYear()">
-                {{ year }}
-              </option>
-            }
-          </select>
-        </div>
-      } @else {
-        <div class="frame-calendar__caption" aria-live="polite">
-          {{ monthLabel(currentMonth()) }}
-        </div>
-      }
-
-      <button
-        class="frame-calendar__nav-button"
-        type="button"
-        [disabled]="isDisabled()"
-        (click)="nextMonth()"
-        [attr.aria-label]="nextMonthLabel()"
-      >
-        @if (nextMonthTemplate(); as template) {
-          <ng-container [ngTemplateOutlet]="template" />
-        } @else {
-          {{ nextMonthIcon() }}
-        }
-      </button>
-    </div>
-
-    <div class="frame-calendar__months">
-      @for (month of months(); track month.key) {
-        <section class="frame-calendar__month" [attr.aria-label]="month.label">
-          @if (numberOfMonths() > 1 || captionLayout() === 'dropdown') {
-            <h3 class="frame-calendar__month-caption">{{ month.label }}</h3>
-          }
-
-          <table class="frame-calendar__table">
-            <thead>
-              <tr>
-                @if (showWeekNumber()) {
-                  <th class="frame-calendar__week-number-header" scope="col">Wk</th>
-                }
-                @for (weekday of weekdayLabels(); track weekday) {
-                  <th class="frame-calendar__weekday" scope="col">{{ weekday }}</th>
-                }
-              </tr>
-            </thead>
-            <tbody>
-              @for (week of month.weeks; track week[0].key) {
-                <tr>
-                  @if (showWeekNumber()) {
-                    <td class="frame-calendar__week-number">{{ weekNumber(week[0].date) }}</td>
-                  }
-                  @for (day of week; track day.key) {
-                    <td
-                      class="frame-calendar__cell"
-                      [attr.data-outside]="day.outside ? '' : null"
-                      [attr.data-selected]="day.selected ? '' : null"
-                      [attr.data-range-start]="day.rangeStart ? '' : null"
-                      [attr.data-range-middle]="day.rangeMiddle ? '' : null"
-                      [attr.data-range-end]="day.rangeEnd ? '' : null"
-                      [attr.data-today]="day.today ? '' : null"
-                      [attr.data-disabled-date]="day.disabledDate ? '' : null"
-                    >
-                      <button
-                        class="frame-calendar__day"
-                        type="button"
-                        [disabled]="isDisabled() || day.disabled"
-                        [attr.aria-label]="dayLabel(day.date)"
-                        [attr.aria-pressed]="day.selected ? 'true' : 'false'"
-                        (click)="selectDay(day)"
-                      >
-                        @if (cellTemplate(); as template) {
-                          <ng-container
-                            [ngTemplateOutlet]="template"
-                            [ngTemplateOutletContext]="day"
-                          />
-                        } @else {
-                          <span class="frame-calendar__day-number">{{ day.day }}</span>
-                          @if (day.dateLabel) {
-                            <span class="frame-calendar__day-meta">{{ day.dateLabel }}</span>
-                          }
-                        }
-                      </button>
-                    </td>
-                  }
-                </tr>
-              }
-            </tbody>
-          </table>
-        </section>
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrCalendar, isStandalone: true, selector: "frame-calendar", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, fromYear: { classPropertyName: "fromYear", publicName: "fromYear", isSignal: true, isRequired: false, transformFunction: null }, toYear: { classPropertyName: "toYear", publicName: "toYear", isSignal: true, isRequired: false, transformFunction: null }, showOutsideDays: { classPropertyName: "showOutsideDays", publicName: "showOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumber: { classPropertyName: "showWeekNumber", publicName: "showWeekNumber", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, dateLabels: { classPropertyName: "dateLabels", publicName: "dateLabels", isSignal: true, isRequired: false, transformFunction: null }, disabledMatcher: { classPropertyName: "disabledMatcher", publicName: "disabledMatcher", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null }, previousMonthTemplate: { classPropertyName: "previousMonthTemplate", publicName: "previousMonthTemplate", isSignal: true, isRequired: false, transformFunction: null }, nextMonthTemplate: { classPropertyName: "nextMonthTemplate", publicName: "nextMonthTemplate", isSignal: true, isRequired: false, transformFunction: null }, previousMonthIcon: { classPropertyName: "previousMonthIcon", publicName: "previousMonthIcon", isSignal: true, isRequired: false, transformFunction: null }, nextMonthIcon: { classPropertyName: "nextMonthIcon", publicName: "nextMonthIcon", isSignal: true, isRequired: false, transformFunction: null }, previousMonthLabel: { classPropertyName: "previousMonthLabel", publicName: "previousMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, nextMonthLabel: { classPropertyName: "nextMonthLabel", publicName: "nextMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", monthChange: "monthChange" }, host: { properties: { "attr.data-mode": "mode()", "attr.data-caption-layout": "captionLayout()", "attr.data-disabled": "isDisabled() ? \"\" : null", "attr.dir": "dir()" }, classAttribute: "frame-calendar" }, providers: [VALUE_ACCESSOR], ngImport: i0, template: `
+    <div class="frame-calendar__header">
+      <button
+        class="frame-calendar__nav-button"
+        type="button"
+        [disabled]="isDisabled()"
+        (click)="previousMonth()"
+        [attr.aria-label]="previousMonthLabel()"
+      >
+        @if (previousMonthTemplate(); as template) {
+          <ng-container [ngTemplateOutlet]="template" />
+        } @else {
+          {{ previousMonthIcon() }}
+        }
+      </button>
+
+      @if (captionLayout() === 'dropdown') {
+        <div class="frame-calendar__caption-controls">
+          <select
+            class="frame-calendar__select"
+            [disabled]="isDisabled()"
+            [value]="currentMonth().getMonth()"
+            aria-label="Month"
+            (change)="setMonth($any($event.target).value)"
+          >
+            @for (month of monthOptions(); track month.value) {
+              <option [value]="month.value" [selected]="month.value === currentMonth().getMonth()">
+                {{ month.label }}
+              </option>
+            }
+          </select>
+
+          <select
+            class="frame-calendar__select"
+            [disabled]="isDisabled()"
+            [value]="currentMonth().getFullYear()"
+            aria-label="Year"
+            (change)="setYear($any($event.target).value)"
+          >
+            @for (year of yearOptions(); track year) {
+              <option [value]="year" [selected]="year === currentMonth().getFullYear()">
+                {{ year }}
+              </option>
+            }
+          </select>
+        </div>
+      } @else {
+        <div class="frame-calendar__caption" aria-live="polite">
+          {{ monthLabel(currentMonth()) }}
+        </div>
+      }
+
+      <button
+        class="frame-calendar__nav-button"
+        type="button"
+        [disabled]="isDisabled()"
+        (click)="nextMonth()"
+        [attr.aria-label]="nextMonthLabel()"
+      >
+        @if (nextMonthTemplate(); as template) {
+          <ng-container [ngTemplateOutlet]="template" />
+        } @else {
+          {{ nextMonthIcon() }}
+        }
+      </button>
+    </div>
+
+    <div class="frame-calendar__months">
+      @for (month of months(); track month.key) {
+        <section class="frame-calendar__month" [attr.aria-label]="month.label">
+          @if (numberOfMonths() > 1 || captionLayout() === 'dropdown') {
+            <h3 class="frame-calendar__month-caption">{{ month.label }}</h3>
+          }
+
+          <table class="frame-calendar__table" role="grid" [attr.aria-readonly]="true">
+            <thead>
+              <tr>
+                @if (showWeekNumber()) {
+                  <th class="frame-calendar__week-number-header" scope="col">Wk</th>
+                }
+                @for (weekday of weekdayLabels(); track weekday) {
+                  <th class="frame-calendar__weekday" scope="col">{{ weekday }}</th>
+                }
+              </tr>
+            </thead>
+            <tbody>
+              @for (week of month.weeks; track week[0].key) {
+                <tr>
+                  @if (showWeekNumber()) {
+                    <td class="frame-calendar__week-number">{{ weekNumber(week[0].date) }}</td>
+                  }
+                  @for (day of week; track day.key) {
+                    <td
+                      class="frame-calendar__cell"
+                      [attr.data-outside]="day.outside ? '' : null"
+                      [attr.data-selected]="day.selected ? '' : null"
+                      [attr.data-range-start]="day.rangeStart ? '' : null"
+                      [attr.data-range-middle]="day.rangeMiddle ? '' : null"
+                      [attr.data-range-end]="day.rangeEnd ? '' : null"
+                      [attr.data-today]="day.today ? '' : null"
+                      [attr.data-disabled-date]="day.disabledDate ? '' : null"
+                    >
+                      <button
+                        class="frame-calendar__day"
+                        type="button"
+                        [disabled]="isDisabled() || day.disabled"
+                        [attr.data-date]="day.key"
+                        [attr.tabindex]="dayTabIndex(day)"
+                        [attr.aria-label]="dayLabel(day.date)"
+                        [attr.aria-pressed]="day.selected ? 'true' : 'false'"
+                        [attr.aria-selected]="day.selected ? 'true' : 'false'"
+                        [attr.aria-current]="day.today ? 'date' : null"
+                        (click)="selectDay(day)"
+                        (focus)="focusedDate.set(day.date)"
+                        (keydown)="handleDayKeydown($event, day)"
+                      >
+                        @if (cellTemplate(); as template) {
+                          <ng-container
+                            [ngTemplateOutlet]="template"
+                            [ngTemplateOutletContext]="day"
+                          />
+                        } @else {
+                          <span class="frame-calendar__day-number">{{ day.day }}</span>
+                          @if (day.dateLabel) {
+                            <span class="frame-calendar__day-meta">{{ day.dateLabel }}</span>
+                          }
+                        }
+                      </button>
+                    </td>
+                  }
+                </tr>
+              }
+            </tbody>
+          </table>
+        </section>
+      }
+    </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCalendar, decorators: [{
@@ -303,137 +403,143 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '[attr.data-disabled]': 'isDisabled() ? "" : null',
                         '[attr.dir]': 'dir()',
                     },
-                    template: `
-    <div class="frame-calendar__header">
-      <button
-        class="frame-calendar__nav-button"
-        type="button"
-        [disabled]="isDisabled()"
-        (click)="previousMonth()"
-        [attr.aria-label]="previousMonthLabel()"
-      >
-        @if (previousMonthTemplate(); as template) {
-          <ng-container [ngTemplateOutlet]="template" />
-        } @else {
-          {{ previousMonthIcon() }}
-        }
-      </button>
-
-      @if (captionLayout() === 'dropdown') {
-        <div class="frame-calendar__caption-controls">
-          <select
-            class="frame-calendar__select"
-            [disabled]="isDisabled()"
-            [value]="currentMonth().getMonth()"
-            aria-label="Month"
-            (change)="setMonth($any($event.target).value)"
-          >
-            @for (month of monthOptions(); track month.value) {
-              <option [value]="month.value" [selected]="month.value === currentMonth().getMonth()">
-                {{ month.label }}
-              </option>
-            }
-          </select>
-
-          <select
-            class="frame-calendar__select"
-            [disabled]="isDisabled()"
-            [value]="currentMonth().getFullYear()"
-            aria-label="Year"
-            (change)="setYear($any($event.target).value)"
-          >
-            @for (year of yearOptions(); track year) {
-              <option [value]="year" [selected]="year === currentMonth().getFullYear()">
-                {{ year }}
-              </option>
-            }
-          </select>
-        </div>
-      } @else {
-        <div class="frame-calendar__caption" aria-live="polite">
-          {{ monthLabel(currentMonth()) }}
-        </div>
-      }
-
-      <button
-        class="frame-calendar__nav-button"
-        type="button"
-        [disabled]="isDisabled()"
-        (click)="nextMonth()"
-        [attr.aria-label]="nextMonthLabel()"
-      >
-        @if (nextMonthTemplate(); as template) {
-          <ng-container [ngTemplateOutlet]="template" />
-        } @else {
-          {{ nextMonthIcon() }}
-        }
-      </button>
-    </div>
-
-    <div class="frame-calendar__months">
-      @for (month of months(); track month.key) {
-        <section class="frame-calendar__month" [attr.aria-label]="month.label">
-          @if (numberOfMonths() > 1 || captionLayout() === 'dropdown') {
-            <h3 class="frame-calendar__month-caption">{{ month.label }}</h3>
-          }
-
-          <table class="frame-calendar__table">
-            <thead>
-              <tr>
-                @if (showWeekNumber()) {
-                  <th class="frame-calendar__week-number-header" scope="col">Wk</th>
-                }
-                @for (weekday of weekdayLabels(); track weekday) {
-                  <th class="frame-calendar__weekday" scope="col">{{ weekday }}</th>
-                }
-              </tr>
-            </thead>
-            <tbody>
-              @for (week of month.weeks; track week[0].key) {
-                <tr>
-                  @if (showWeekNumber()) {
-                    <td class="frame-calendar__week-number">{{ weekNumber(week[0].date) }}</td>
-                  }
-                  @for (day of week; track day.key) {
-                    <td
-                      class="frame-calendar__cell"
-                      [attr.data-outside]="day.outside ? '' : null"
-                      [attr.data-selected]="day.selected ? '' : null"
-                      [attr.data-range-start]="day.rangeStart ? '' : null"
-                      [attr.data-range-middle]="day.rangeMiddle ? '' : null"
-                      [attr.data-range-end]="day.rangeEnd ? '' : null"
-                      [attr.data-today]="day.today ? '' : null"
-                      [attr.data-disabled-date]="day.disabledDate ? '' : null"
-                    >
-                      <button
-                        class="frame-calendar__day"
-                        type="button"
-                        [disabled]="isDisabled() || day.disabled"
-                        [attr.aria-label]="dayLabel(day.date)"
-                        [attr.aria-pressed]="day.selected ? 'true' : 'false'"
-                        (click)="selectDay(day)"
-                      >
-                        @if (cellTemplate(); as template) {
-                          <ng-container
-                            [ngTemplateOutlet]="template"
-                            [ngTemplateOutletContext]="day"
-                          />
-                        } @else {
-                          <span class="frame-calendar__day-number">{{ day.day }}</span>
-                          @if (day.dateLabel) {
-                            <span class="frame-calendar__day-meta">{{ day.dateLabel }}</span>
-                          }
-                        }
-                      </button>
-                    </td>
-                  }
-                </tr>
-              }
-            </tbody>
-          </table>
-        </section>
-      }
-    </div>
+                    template: `
+    <div class="frame-calendar__header">
+      <button
+        class="frame-calendar__nav-button"
+        type="button"
+        [disabled]="isDisabled()"
+        (click)="previousMonth()"
+        [attr.aria-label]="previousMonthLabel()"
+      >
+        @if (previousMonthTemplate(); as template) {
+          <ng-container [ngTemplateOutlet]="template" />
+        } @else {
+          {{ previousMonthIcon() }}
+        }
+      </button>
+
+      @if (captionLayout() === 'dropdown') {
+        <div class="frame-calendar__caption-controls">
+          <select
+            class="frame-calendar__select"
+            [disabled]="isDisabled()"
+            [value]="currentMonth().getMonth()"
+            aria-label="Month"
+            (change)="setMonth($any($event.target).value)"
+          >
+            @for (month of monthOptions(); track month.value) {
+              <option [value]="month.value" [selected]="month.value === currentMonth().getMonth()">
+                {{ month.label }}
+              </option>
+            }
+          </select>
+
+          <select
+            class="frame-calendar__select"
+            [disabled]="isDisabled()"
+            [value]="currentMonth().getFullYear()"
+            aria-label="Year"
+            (change)="setYear($any($event.target).value)"
+          >
+            @for (year of yearOptions(); track year) {
+              <option [value]="year" [selected]="year === currentMonth().getFullYear()">
+                {{ year }}
+              </option>
+            }
+          </select>
+        </div>
+      } @else {
+        <div class="frame-calendar__caption" aria-live="polite">
+          {{ monthLabel(currentMonth()) }}
+        </div>
+      }
+
+      <button
+        class="frame-calendar__nav-button"
+        type="button"
+        [disabled]="isDisabled()"
+        (click)="nextMonth()"
+        [attr.aria-label]="nextMonthLabel()"
+      >
+        @if (nextMonthTemplate(); as template) {
+          <ng-container [ngTemplateOutlet]="template" />
+        } @else {
+          {{ nextMonthIcon() }}
+        }
+      </button>
+    </div>
+
+    <div class="frame-calendar__months">
+      @for (month of months(); track month.key) {
+        <section class="frame-calendar__month" [attr.aria-label]="month.label">
+          @if (numberOfMonths() > 1 || captionLayout() === 'dropdown') {
+            <h3 class="frame-calendar__month-caption">{{ month.label }}</h3>
+          }
+
+          <table class="frame-calendar__table" role="grid" [attr.aria-readonly]="true">
+            <thead>
+              <tr>
+                @if (showWeekNumber()) {
+                  <th class="frame-calendar__week-number-header" scope="col">Wk</th>
+                }
+                @for (weekday of weekdayLabels(); track weekday) {
+                  <th class="frame-calendar__weekday" scope="col">{{ weekday }}</th>
+                }
+              </tr>
+            </thead>
+            <tbody>
+              @for (week of month.weeks; track week[0].key) {
+                <tr>
+                  @if (showWeekNumber()) {
+                    <td class="frame-calendar__week-number">{{ weekNumber(week[0].date) }}</td>
+                  }
+                  @for (day of week; track day.key) {
+                    <td
+                      class="frame-calendar__cell"
+                      [attr.data-outside]="day.outside ? '' : null"
+                      [attr.data-selected]="day.selected ? '' : null"
+                      [attr.data-range-start]="day.rangeStart ? '' : null"
+                      [attr.data-range-middle]="day.rangeMiddle ? '' : null"
+                      [attr.data-range-end]="day.rangeEnd ? '' : null"
+                      [attr.data-today]="day.today ? '' : null"
+                      [attr.data-disabled-date]="day.disabledDate ? '' : null"
+                    >
+                      <button
+                        class="frame-calendar__day"
+                        type="button"
+                        [disabled]="isDisabled() || day.disabled"
+                        [attr.data-date]="day.key"
+                        [attr.tabindex]="dayTabIndex(day)"
+                        [attr.aria-label]="dayLabel(day.date)"
+                        [attr.aria-pressed]="day.selected ? 'true' : 'false'"
+                        [attr.aria-selected]="day.selected ? 'true' : 'false'"
+                        [attr.aria-current]="day.today ? 'date' : null"
+                        (click)="selectDay(day)"
+                        (focus)="focusedDate.set(day.date)"
+                        (keydown)="handleDayKeydown($event, day)"
+                      >
+                        @if (cellTemplate(); as template) {
+                          <ng-container
+                            [ngTemplateOutlet]="template"
+                            [ngTemplateOutletContext]="day"
+                          />
+                        } @else {
+                          <span class="frame-calendar__day-number">{{ day.day }}</span>
+                          @if (day.dateLabel) {
+                            <span class="frame-calendar__day-meta">{{ day.dateLabel }}</span>
+                          }
+                        }
+                      </button>
+                    </td>
+                  }
+                </tr>
+              }
+            </tbody>
+          </table>
+        </section>
+      }
+    </div>
   `,
                 }]
         }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], fromYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "fromYear", required: false }] }], toYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "toYear", required: false }] }], showOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOutsideDays", required: false }] }], showWeekNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumber", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], dateLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateLabels", required: false }] }], disabledMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMatcher", required: false }] }], cellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplate", required: false }] }], previousMonthTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousMonthTemplate", required: false }] }], nextMonthTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthTemplate", required: false }] }], previousMonthIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousMonthIcon", required: false }] }], nextMonthIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthIcon", required: false }] }], previousMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousMonthLabel", required: false }] }], nextMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthLabel", required: false }] }], month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], monthChange: [{ type: i0.Output, args: ["monthChange"] }] } });