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

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, effect, Directive, input, booleanAttribute, computed, output, signal, Component, contentChild, forwardRef, ChangeDetectionStrategy, Renderer2, RendererStyleFlags2, DestroyRef, TemplateRef, model, afterNextRender, ViewChild, ViewContainerRef, Injectable, Injector, numberAttribute, HostListener } from '@angular/core';
+import { InjectionToken, inject, ElementRef, effect, Directive, input, booleanAttribute, computed, output, signal, Component, contentChild, forwardRef, ChangeDetectionStrategy, Renderer2, RendererStyleFlags2, DestroyRef, TemplateRef, model, afterNextRender, ViewChild, ViewContainerRef, Injectable, viewChild, Injector, numberAttribute, HostListener } from '@angular/core';
 import * as i1 from '@frame-ui-ng/components/spinner';
 import { FrSpinner } from '@frame-ui-ng/components/spinner';
 import { NgTemplateOutlet, NgClass, NgComponentOutlet, DOCUMENT } from '@angular/common';
@@ -812,9 +812,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(() => {
@@ -831,6 +833,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) {
@@ -875,6 +878,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',
@@ -891,6 +913,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$1(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);
@@ -933,137 +1027,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: [{
@@ -1080,137 +1180,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"] }] } });
@@ -2918,7 +3024,7 @@ class FrCommandService {
     withDefaultClasses(config) {
         return {
             ariaModal: true,
-            autoFocus: 'first-tabbable',
+            autoFocus: '[frCommandInput]',
             restoreFocus: true,
             width: 'min(calc(100vw - 2rem), 48rem)',
             maxWidth: 'calc(100vw - 2rem)',
@@ -3953,6 +4059,7 @@ class FrDatePicker extends FrControlValueAccessor$1 {
     valueChange = output();
     openChange = output();
     monthChange = output();
+    calendar = viewChild(FrCalendar$1, ...(ngDevMode ? [{ debugName: "calendar" }] : /* istanbul ignore next */ []));
     positions = POSITIONS;
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
     overlaySide = signal('bottom', ...(ngDevMode ? [{ debugName: "overlaySide" }] : /* istanbul ignore next */ []));
@@ -4053,6 +4160,9 @@ class FrDatePicker extends FrControlValueAccessor$1 {
     handlePositionChange(event) {
         this.overlaySide.set(event.connectionPair.overlayY === 'bottom' ? 'top' : 'bottom');
     }
+    focusCalendar() {
+        this.calendar()?.focusActiveDate();
+    }
     overlayPanelClasses() {
         return ['frame-date-picker-overlay', `frame-date-picker-overlay--${this.overlaySide()}`];
     }
@@ -4068,118 +4178,119 @@ class FrDatePicker extends FrControlValueAccessor$1 {
         this.markAsTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrDatePicker, isStandalone: true, selector: "frame-date-picker", 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 }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonlyInput", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, debugVisible: { classPropertyName: "debugVisible", publicName: "debugVisible", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", 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 }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, formatter: { classPropertyName: "formatter", publicName: "formatter", isSignal: true, isRequired: false, transformFunction: null }, parser: { classPropertyName: "parser", publicName: "parser", isSignal: true, isRequired: false, transformFunction: null }, timeLabel: { classPropertyName: "timeLabel", publicName: "timeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", openChange: "openChange", monthChange: "monthChange" }, host: { properties: { "attr.data-open": "isOpen() ? \"\" : null", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-invalid": "invalid() ? \"\" : null", "attr.data-mode": "mode()", "attr.dir": "dir()" }, classAttribute: "frame-date-picker" }, providers: [provideDsValueAccessor$1(FrDatePicker)], exportAs: ["frDatePicker"], usesInheritance: true, ngImport: i0, template: `
-    <span cdkOverlayOrigin #origin="cdkOverlayOrigin" class="frame-date-picker__anchor">
-      @if (editable()) {
-        <span class="frame-date-picker__input-wrap">
-          <span class="frame-date-picker__icon" aria-hidden="true">{{ icon() }}</span>
-          <input
-            class="frame-date-picker__input"
-            type="text"
-            [disabled]="disabled()"
-            [readOnly]="readonlyInput()"
-            [placeholder]="placeholder()"
-            [value]="inputValue()"
-            [attr.aria-expanded]="isOpen()"
-            [attr.aria-invalid]="invalid() ? 'true' : null"
-            aria-haspopup="dialog"
-            (focus)="open()"
-            (click)="open()"
-            (input)="handleInput($any($event.target).value)"
-            (change)="commitInput($any($event.target).value)"
-            (keydown)="handleTriggerKeydown($event)"
-            (blur)="markAsTouched()"
-          />
-        </span>
-      } @else {
-        <button
-          class="frame-date-picker__trigger"
-          type="button"
-          [disabled]="disabled()"
-          [attr.aria-expanded]="isOpen()"
-          [attr.aria-invalid]="invalid() ? 'true' : null"
-          aria-haspopup="dialog"
-          (click)="toggle()"
-          (keydown)="handleTriggerKeydown($event)"
-        >
-          <span class="frame-date-picker__icon" aria-hidden="true">{{ icon() }}</span>
-          <span class="frame-date-picker__trigger-label" [attr.data-placeholder]="hasValue() ? null : ''">
-            {{ displayValue() || placeholder() }}
-          </span>
-        </button>
-      }
-    </span>
-
-    <ng-template
-      cdkConnectedOverlay
-      [cdkConnectedOverlayOrigin]="origin"
-      [cdkConnectedOverlayOpen]="isOpen()"
-      [cdkConnectedOverlayPositions]="positions"
-      [cdkConnectedOverlayPanelClass]="overlayPanelClasses()"
-      [cdkConnectedOverlayPush]="true"
-      [cdkConnectedOverlayViewportMargin]="12"
-      (overlayOutsideClick)="close()"
-      (detach)="close()"
-      (positionChange)="handlePositionChange($event)"
-    >
-      <div class="frame-date-picker__content" role="dialog" [attr.aria-label]="dialogLabel()">
-        @if (presets().length) {
-          <div class="frame-date-picker__presets" aria-label="Date presets">
-            @for (preset of presets(); track preset.label) {
-              <button class="frame-date-picker__preset" type="button" (click)="selectPreset(preset)">
-                {{ preset.label }}
-              </button>
-            }
-          </div>
-        }
-
-        <ng-container [ngTemplateOutlet]="headerTemplate() ?? null" />
-
-        <frame-calendar
-          [mode]="mode()"
-          [captionLayout]="captionLayout()"
-          [numberOfMonths]="numberOfMonths()"
-          [firstDayOfWeek]="firstDayOfWeek()"
-          [locale]="locale()"
-          [timeZone]="timeZone()"
-          [dir]="dir()"
-          [fromYear]="fromYear()"
-          [toYear]="toYear()"
-          [showOutsideDays]="showOutsideDays()"
-          [showWeekNumber]="showWeekNumber()"
-          [disabled]="disabled()"
-          [disabledDates]="disabledDates()"
-          [dateLabels]="dateLabels()"
-          [disabledMatcher]="disabledMatcher()"
-          [cellTemplate]="cellTemplate()"
-          [previousMonthTemplate]="previousMonthTemplate()"
-          [nextMonthTemplate]="nextMonthTemplate()"
-          [previousMonthIcon]="previousMonthIcon()"
-          [nextMonthIcon]="nextMonthIcon()"
-          [previousMonthLabel]="previousMonthLabel()"
-          [nextMonthLabel]="nextMonthLabel()"
-          [month]="month()"
-          [selected]="calendarValue()"
-          (selectedChange)="selectCalendarValue($any($event))"
-          (monthChange)="monthChange.emit($event)"
-        />
-
-        @if (showTime() && mode() === 'single') {
-          <label class="frame-date-picker__time">
-            <span class="frame-date-picker__time-label">{{ timeLabel() }}</span>
-            <input
-              class="frame-date-picker__time-input"
-              type="time"
-              [disabled]="disabled() || !singleDate()"
-              [value]="timeValue()"
-              (change)="setTime($any($event.target).value)"
-            />
-          </label>
-        }
-
-        <ng-container [ngTemplateOutlet]="footerTemplate() ?? null" />
-      </div>
-    </ng-template>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrDatePicker, isStandalone: true, selector: "frame-date-picker", 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 }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonlyInput", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, debugVisible: { classPropertyName: "debugVisible", publicName: "debugVisible", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", 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 }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, formatter: { classPropertyName: "formatter", publicName: "formatter", isSignal: true, isRequired: false, transformFunction: null }, parser: { classPropertyName: "parser", publicName: "parser", isSignal: true, isRequired: false, transformFunction: null }, timeLabel: { classPropertyName: "timeLabel", publicName: "timeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", openChange: "openChange", monthChange: "monthChange" }, host: { properties: { "attr.data-open": "isOpen() ? \"\" : null", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-invalid": "invalid() ? \"\" : null", "attr.data-mode": "mode()", "attr.dir": "dir()" }, classAttribute: "frame-date-picker" }, providers: [provideDsValueAccessor$1(FrDatePicker)], viewQueries: [{ propertyName: "calendar", first: true, predicate: FrCalendar$1, descendants: true, isSignal: true }], exportAs: ["frDatePicker"], usesInheritance: true, ngImport: i0, template: `
+    <span cdkOverlayOrigin #origin="cdkOverlayOrigin" class="frame-date-picker__anchor">
+      @if (editable()) {
+        <span class="frame-date-picker__input-wrap">
+          <span class="frame-date-picker__icon" aria-hidden="true">{{ icon() }}</span>
+          <input
+            class="frame-date-picker__input"
+            type="text"
+            [disabled]="disabled()"
+            [readOnly]="readonlyInput()"
+            [placeholder]="placeholder()"
+            [value]="inputValue()"
+            [attr.aria-expanded]="isOpen()"
+            [attr.aria-invalid]="invalid() ? 'true' : null"
+            aria-haspopup="dialog"
+            (focus)="open()"
+            (click)="open()"
+            (input)="handleInput($any($event.target).value)"
+            (change)="commitInput($any($event.target).value)"
+            (keydown)="handleTriggerKeydown($event)"
+            (blur)="markAsTouched()"
+          />
+        </span>
+      } @else {
+        <button
+          class="frame-date-picker__trigger"
+          type="button"
+          [disabled]="disabled()"
+          [attr.aria-expanded]="isOpen()"
+          [attr.aria-invalid]="invalid() ? 'true' : null"
+          aria-haspopup="dialog"
+          (click)="toggle()"
+          (keydown)="handleTriggerKeydown($event)"
+        >
+          <span class="frame-date-picker__icon" aria-hidden="true">{{ icon() }}</span>
+          <span class="frame-date-picker__trigger-label" [attr.data-placeholder]="hasValue() ? null : ''">
+            {{ displayValue() || placeholder() }}
+          </span>
+        </button>
+      }
+    </span>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="isOpen()"
+      [cdkConnectedOverlayPositions]="positions"
+      [cdkConnectedOverlayPanelClass]="overlayPanelClasses()"
+      [cdkConnectedOverlayPush]="true"
+      [cdkConnectedOverlayViewportMargin]="12"
+      (overlayOutsideClick)="close()"
+      (attach)="focusCalendar()"
+      (detach)="close()"
+      (positionChange)="handlePositionChange($event)"
+    >
+      <div class="frame-date-picker__content" role="dialog" [attr.aria-label]="dialogLabel()">
+        @if (presets().length) {
+          <div class="frame-date-picker__presets" aria-label="Date presets">
+            @for (preset of presets(); track preset.label) {
+              <button class="frame-date-picker__preset" type="button" (click)="selectPreset(preset)">
+                {{ preset.label }}
+              </button>
+            }
+          </div>
+        }
+
+        <ng-container [ngTemplateOutlet]="headerTemplate() ?? null" />
+
+        <frame-calendar
+          [mode]="mode()"
+          [captionLayout]="captionLayout()"
+          [numberOfMonths]="numberOfMonths()"
+          [firstDayOfWeek]="firstDayOfWeek()"
+          [locale]="locale()"
+          [timeZone]="timeZone()"
+          [dir]="dir()"
+          [fromYear]="fromYear()"
+          [toYear]="toYear()"
+          [showOutsideDays]="showOutsideDays()"
+          [showWeekNumber]="showWeekNumber()"
+          [disabled]="disabled()"
+          [disabledDates]="disabledDates()"
+          [dateLabels]="dateLabels()"
+          [disabledMatcher]="disabledMatcher()"
+          [cellTemplate]="cellTemplate()"
+          [previousMonthTemplate]="previousMonthTemplate()"
+          [nextMonthTemplate]="nextMonthTemplate()"
+          [previousMonthIcon]="previousMonthIcon()"
+          [nextMonthIcon]="nextMonthIcon()"
+          [previousMonthLabel]="previousMonthLabel()"
+          [nextMonthLabel]="nextMonthLabel()"
+          [month]="month()"
+          [selected]="calendarValue()"
+          (selectedChange)="selectCalendarValue($any($event))"
+          (monthChange)="monthChange.emit($event)"
+        />
+
+        @if (showTime() && mode() === 'single') {
+          <label class="frame-date-picker__time">
+            <span class="frame-date-picker__time-label">{{ timeLabel() }}</span>
+            <input
+              class="frame-date-picker__time-input"
+              type="time"
+              [disabled]="disabled() || !singleDate()"
+              [value]="timeValue()"
+              (change)="setTime($any($event.target).value)"
+            />
+          </label>
+        }
+
+        <ng-container [ngTemplateOutlet]="footerTemplate() ?? null" />
+      </div>
+    </ng-template>
   `, isInline: true, dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: FrCalendar$1, selector: "frame-calendar", inputs: ["mode", "captionLayout", "numberOfMonths", "firstDayOfWeek", "locale", "timeZone", "dir", "fromYear", "toYear", "showOutsideDays", "showWeekNumber", "disabled", "disabledDates", "dateLabels", "disabledMatcher", "cellTemplate", "previousMonthTemplate", "nextMonthTemplate", "previousMonthIcon", "nextMonthIcon", "previousMonthLabel", "nextMonthLabel", "month", "selected"], outputs: ["selectedChange", "monthChange"] }, { 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: FrDatePicker, decorators: [{
@@ -4198,121 +4309,122 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '[attr.data-mode]': 'mode()',
                         '[attr.dir]': 'dir()',
                     },
-                    template: `
-    <span cdkOverlayOrigin #origin="cdkOverlayOrigin" class="frame-date-picker__anchor">
-      @if (editable()) {
-        <span class="frame-date-picker__input-wrap">
-          <span class="frame-date-picker__icon" aria-hidden="true">{{ icon() }}</span>
-          <input
-            class="frame-date-picker__input"
-            type="text"
-            [disabled]="disabled()"
-            [readOnly]="readonlyInput()"
-            [placeholder]="placeholder()"
-            [value]="inputValue()"
-            [attr.aria-expanded]="isOpen()"
-            [attr.aria-invalid]="invalid() ? 'true' : null"
-            aria-haspopup="dialog"
-            (focus)="open()"
-            (click)="open()"
-            (input)="handleInput($any($event.target).value)"
-            (change)="commitInput($any($event.target).value)"
-            (keydown)="handleTriggerKeydown($event)"
-            (blur)="markAsTouched()"
-          />
-        </span>
-      } @else {
-        <button
-          class="frame-date-picker__trigger"
-          type="button"
-          [disabled]="disabled()"
-          [attr.aria-expanded]="isOpen()"
-          [attr.aria-invalid]="invalid() ? 'true' : null"
-          aria-haspopup="dialog"
-          (click)="toggle()"
-          (keydown)="handleTriggerKeydown($event)"
-        >
-          <span class="frame-date-picker__icon" aria-hidden="true">{{ icon() }}</span>
-          <span class="frame-date-picker__trigger-label" [attr.data-placeholder]="hasValue() ? null : ''">
-            {{ displayValue() || placeholder() }}
-          </span>
-        </button>
-      }
-    </span>
-
-    <ng-template
-      cdkConnectedOverlay
-      [cdkConnectedOverlayOrigin]="origin"
-      [cdkConnectedOverlayOpen]="isOpen()"
-      [cdkConnectedOverlayPositions]="positions"
-      [cdkConnectedOverlayPanelClass]="overlayPanelClasses()"
-      [cdkConnectedOverlayPush]="true"
-      [cdkConnectedOverlayViewportMargin]="12"
-      (overlayOutsideClick)="close()"
-      (detach)="close()"
-      (positionChange)="handlePositionChange($event)"
-    >
-      <div class="frame-date-picker__content" role="dialog" [attr.aria-label]="dialogLabel()">
-        @if (presets().length) {
-          <div class="frame-date-picker__presets" aria-label="Date presets">
-            @for (preset of presets(); track preset.label) {
-              <button class="frame-date-picker__preset" type="button" (click)="selectPreset(preset)">
-                {{ preset.label }}
-              </button>
-            }
-          </div>
-        }
-
-        <ng-container [ngTemplateOutlet]="headerTemplate() ?? null" />
-
-        <frame-calendar
-          [mode]="mode()"
-          [captionLayout]="captionLayout()"
-          [numberOfMonths]="numberOfMonths()"
-          [firstDayOfWeek]="firstDayOfWeek()"
-          [locale]="locale()"
-          [timeZone]="timeZone()"
-          [dir]="dir()"
-          [fromYear]="fromYear()"
-          [toYear]="toYear()"
-          [showOutsideDays]="showOutsideDays()"
-          [showWeekNumber]="showWeekNumber()"
-          [disabled]="disabled()"
-          [disabledDates]="disabledDates()"
-          [dateLabels]="dateLabels()"
-          [disabledMatcher]="disabledMatcher()"
-          [cellTemplate]="cellTemplate()"
-          [previousMonthTemplate]="previousMonthTemplate()"
-          [nextMonthTemplate]="nextMonthTemplate()"
-          [previousMonthIcon]="previousMonthIcon()"
-          [nextMonthIcon]="nextMonthIcon()"
-          [previousMonthLabel]="previousMonthLabel()"
-          [nextMonthLabel]="nextMonthLabel()"
-          [month]="month()"
-          [selected]="calendarValue()"
-          (selectedChange)="selectCalendarValue($any($event))"
-          (monthChange)="monthChange.emit($event)"
-        />
-
-        @if (showTime() && mode() === 'single') {
-          <label class="frame-date-picker__time">
-            <span class="frame-date-picker__time-label">{{ timeLabel() }}</span>
-            <input
-              class="frame-date-picker__time-input"
-              type="time"
-              [disabled]="disabled() || !singleDate()"
-              [value]="timeValue()"
-              (change)="setTime($any($event.target).value)"
-            />
-          </label>
-        }
-
-        <ng-container [ngTemplateOutlet]="footerTemplate() ?? null" />
-      </div>
-    </ng-template>
+                    template: `
+    <span cdkOverlayOrigin #origin="cdkOverlayOrigin" class="frame-date-picker__anchor">
+      @if (editable()) {
+        <span class="frame-date-picker__input-wrap">
+          <span class="frame-date-picker__icon" aria-hidden="true">{{ icon() }}</span>
+          <input
+            class="frame-date-picker__input"
+            type="text"
+            [disabled]="disabled()"
+            [readOnly]="readonlyInput()"
+            [placeholder]="placeholder()"
+            [value]="inputValue()"
+            [attr.aria-expanded]="isOpen()"
+            [attr.aria-invalid]="invalid() ? 'true' : null"
+            aria-haspopup="dialog"
+            (focus)="open()"
+            (click)="open()"
+            (input)="handleInput($any($event.target).value)"
+            (change)="commitInput($any($event.target).value)"
+            (keydown)="handleTriggerKeydown($event)"
+            (blur)="markAsTouched()"
+          />
+        </span>
+      } @else {
+        <button
+          class="frame-date-picker__trigger"
+          type="button"
+          [disabled]="disabled()"
+          [attr.aria-expanded]="isOpen()"
+          [attr.aria-invalid]="invalid() ? 'true' : null"
+          aria-haspopup="dialog"
+          (click)="toggle()"
+          (keydown)="handleTriggerKeydown($event)"
+        >
+          <span class="frame-date-picker__icon" aria-hidden="true">{{ icon() }}</span>
+          <span class="frame-date-picker__trigger-label" [attr.data-placeholder]="hasValue() ? null : ''">
+            {{ displayValue() || placeholder() }}
+          </span>
+        </button>
+      }
+    </span>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="isOpen()"
+      [cdkConnectedOverlayPositions]="positions"
+      [cdkConnectedOverlayPanelClass]="overlayPanelClasses()"
+      [cdkConnectedOverlayPush]="true"
+      [cdkConnectedOverlayViewportMargin]="12"
+      (overlayOutsideClick)="close()"
+      (attach)="focusCalendar()"
+      (detach)="close()"
+      (positionChange)="handlePositionChange($event)"
+    >
+      <div class="frame-date-picker__content" role="dialog" [attr.aria-label]="dialogLabel()">
+        @if (presets().length) {
+          <div class="frame-date-picker__presets" aria-label="Date presets">
+            @for (preset of presets(); track preset.label) {
+              <button class="frame-date-picker__preset" type="button" (click)="selectPreset(preset)">
+                {{ preset.label }}
+              </button>
+            }
+          </div>
+        }
+
+        <ng-container [ngTemplateOutlet]="headerTemplate() ?? null" />
+
+        <frame-calendar
+          [mode]="mode()"
+          [captionLayout]="captionLayout()"
+          [numberOfMonths]="numberOfMonths()"
+          [firstDayOfWeek]="firstDayOfWeek()"
+          [locale]="locale()"
+          [timeZone]="timeZone()"
+          [dir]="dir()"
+          [fromYear]="fromYear()"
+          [toYear]="toYear()"
+          [showOutsideDays]="showOutsideDays()"
+          [showWeekNumber]="showWeekNumber()"
+          [disabled]="disabled()"
+          [disabledDates]="disabledDates()"
+          [dateLabels]="dateLabels()"
+          [disabledMatcher]="disabledMatcher()"
+          [cellTemplate]="cellTemplate()"
+          [previousMonthTemplate]="previousMonthTemplate()"
+          [nextMonthTemplate]="nextMonthTemplate()"
+          [previousMonthIcon]="previousMonthIcon()"
+          [nextMonthIcon]="nextMonthIcon()"
+          [previousMonthLabel]="previousMonthLabel()"
+          [nextMonthLabel]="nextMonthLabel()"
+          [month]="month()"
+          [selected]="calendarValue()"
+          (selectedChange)="selectCalendarValue($any($event))"
+          (monthChange)="monthChange.emit($event)"
+        />
+
+        @if (showTime() && mode() === 'single') {
+          <label class="frame-date-picker__time">
+            <span class="frame-date-picker__time-label">{{ timeLabel() }}</span>
+            <input
+              class="frame-date-picker__time-input"
+              type="time"
+              [disabled]="disabled() || !singleDate()"
+              [value]="timeValue()"
+              (change)="setTime($any($event.target).value)"
+            />
+          </label>
+        }
+
+        <ng-container [ngTemplateOutlet]="footerTemplate() ?? null" />
+      </div>
+    </ng-template>
   `,
                 }]
-        }], ctorParameters: () => [], 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 }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyInput", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], debugVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "debugVisible", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], dialogLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", 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 }] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: false }] }], footerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerTemplate", required: false }] }], month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], formatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatter", required: false }] }], parser: [{ type: i0.Input, args: [{ isSignal: true, alias: "parser", required: false }] }], timeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], openChange: [{ type: i0.Output, args: ["openChange"] }], monthChange: [{ type: i0.Output, args: ["monthChange"] }] } });
+        }], ctorParameters: () => [], 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 }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyInput", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], debugVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "debugVisible", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], dialogLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", 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 }] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: false }] }], footerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerTemplate", required: false }] }], month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], formatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatter", required: false }] }], parser: [{ type: i0.Input, args: [{ isSignal: true, alias: "parser", required: false }] }], timeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], openChange: [{ type: i0.Output, args: ["openChange"] }], monthChange: [{ type: i0.Output, args: ["monthChange"] }], calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => FrCalendar$1), { isSignal: true }] }] } });
 function normalizeValue(value, mode) {
     if (!value) {
         return mode === 'range' ? { from: null, to: null } : null;
@@ -4377,27 +4489,41 @@ function mergeTime(date, timeSource) {
     return next;
 }
 
+const DEFAULT_SIDE_OFFSET = 4;
+const MIN_SUBMENU_SIDE_OFFSET = 16;
 function defaultPositions(isSubmenu) {
     return buildConnectedPositions({
         align: 'start',
         alignOffset: 0,
         isSubmenu,
-        side: isSubmenu ? 'right' : 'bottom',
-        sideOffset: 4,
+        side: 'auto',
+        sideOffset: DEFAULT_SIDE_OFFSET,
     });
 }
 function buildConnectedPositions(options) {
-    const placements = primaryPlacement(options);
-    return [placements.primary, placements.fallback];
+    const side = normalizeSide(options.side, options.isSubmenu);
+    if (side === 'auto') {
+        return autoSides(options.isSubmenu).flatMap((side) => primaryPlacement({
+            ...options,
+            side,
+        }));
+    }
+    return primaryPlacement({
+        ...options,
+        side,
+    });
 }
 function primaryPlacement(options) {
-    if (options.isSubmenu) {
-        const isRight = options.side !== 'left';
-        const horizontalOffset = isRight ? options.sideOffset : -options.sideOffset;
-        const originY = submenuOriginY(options.align);
-        const overlayY = submenuOverlayY(options.align);
-        return {
-            primary: {
+    if (options.side === 'left' || options.side === 'right') {
+        const isRight = options.side === 'right';
+        const sideOffset = options.isSubmenu
+            ? Math.max(options.sideOffset, MIN_SUBMENU_SIDE_OFFSET)
+            : options.sideOffset;
+        const horizontalOffset = isRight ? sideOffset : -sideOffset;
+        const originY = horizontalOriginY(options.align);
+        const overlayY = horizontalOverlayY(options.align);
+        return [
+            {
                 originX: isRight ? 'end' : 'start',
                 originY,
                 overlayX: isRight ? 'start' : 'end',
@@ -4405,7 +4531,7 @@ function primaryPlacement(options) {
                 offsetX: horizontalOffset,
                 offsetY: options.alignOffset,
             },
-            fallback: {
+            {
                 originX: isRight ? 'start' : 'end',
                 originY,
                 overlayX: isRight ? 'end' : 'start',
@@ -4413,14 +4539,14 @@ function primaryPlacement(options) {
                 offsetX: -horizontalOffset,
                 offsetY: options.alignOffset,
             },
-        };
+        ];
     }
-    const isBottom = options.side !== 'top';
+    const isBottom = options.side === 'bottom';
     const verticalOffset = isBottom ? options.sideOffset : -options.sideOffset;
     const originX = rootOriginX(options.align);
     const overlayX = rootOverlayX(options.align);
-    return {
-        primary: {
+    return [
+        {
             originX,
             originY: isBottom ? 'bottom' : 'top',
             overlayX,
@@ -4428,7 +4554,7 @@ function primaryPlacement(options) {
             offsetX: options.alignOffset,
             offsetY: verticalOffset,
         },
-        fallback: {
+        {
             originX,
             originY: isBottom ? 'top' : 'bottom',
             overlayX,
@@ -4436,7 +4562,16 @@ function primaryPlacement(options) {
             offsetX: options.alignOffset,
             offsetY: -verticalOffset,
         },
-    };
+    ];
+}
+function normalizeSide(side, isSubmenu) {
+    if (!isSubmenu || side === 'left' || side === 'right') {
+        return side;
+    }
+    return 'auto';
+}
+function autoSides(isSubmenu) {
+    return isSubmenu ? ['right', 'left'] : ['bottom', 'top', 'right', 'left'];
 }
 function rootOriginX(align) {
     if (align === 'center') {
@@ -4450,13 +4585,13 @@ function rootOverlayX(align) {
     }
     return align;
 }
-function submenuOriginY(align) {
+function horizontalOriginY(align) {
     if (align === 'center') {
         return 'center';
     }
     return align === 'end' ? 'bottom' : 'top';
 }
-function submenuOverlayY(align) {
+function horizontalOverlayY(align) {
     if (align === 'center') {
         return 'center';
     }
@@ -4578,7 +4713,7 @@ class FrDropdownMenuContent {
     align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
     alignOffset = input(0, ...(ngDevMode ? [{ debugName: "alignOffset" }] : /* istanbul ignore next */ []));
     debugVisible = input(false, { ...(ngDevMode ? { debugName: "debugVisible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    side = input('bottom', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    side = input('auto', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
     sideOffset = input(4, ...(ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []));
     isDebugVisible() {
         return this.debugVisible();
@@ -4939,7 +5074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         }], propDecorators: { menuContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "frDropdownMenuSubTrigger", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], triggerModeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerMode", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
 const FR_DROPDOWN_MENU_ALIGNMENTS = ['center', 'end', 'start'];
-const FR_DROPDOWN_MENU_SIDES = ['bottom', 'left', 'right', 'top'];
+const FR_DROPDOWN_MENU_SIDES = ['auto', 'bottom', 'left', 'right', 'top'];
 const FR_DROPDOWN_MENU_TRIGGER_MODES = ['both', 'click', 'hover'];
 const FR_DROPDOWN_MENU_ITEM_VARIANTS = ['default', 'destructive'];
 
@@ -5740,6 +5875,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         }] });
 
 const FR_INPUT_GROUP_ADDON_ALIGNS = ['inline-start', 'inline-end'];
+const FR_INPUT_GROUP_ADDON_VARIANTS = ['default', 'ghost'];
 class FrInputGroup {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrInputGroup, isStandalone: true, selector: "[frInputGroup], frame-input-group", host: { classAttribute: "frame-input-group" }, ngImport: i0 });
@@ -5755,8 +5891,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         }] });
 class FrInputGroupAddon {
     align = input('inline-start', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputGroupAddon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrInputGroupAddon, isStandalone: true, selector: "[frInputGroupAddon], frame-input-group-addon", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-align": "align()" }, classAttribute: "frame-input-group__addon" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrInputGroupAddon, isStandalone: true, selector: "[frInputGroupAddon], frame-input-group-addon", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-align": "align()", "attr.data-variant": "variant()" }, classAttribute: "frame-input-group__addon" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputGroupAddon, decorators: [{
             type: Directive,
@@ -5765,9 +5902,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     host: {
                         class: 'frame-input-group__addon',
                         '[attr.data-align]': 'align()',
+                        '[attr.data-variant]': 'variant()',
                     },
                 }]
-        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }] } });
+        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 class FrInputGroupText {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputGroupText, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrInputGroupText, isStandalone: true, selector: "[frInputGroupText], frame-input-group-text", host: { classAttribute: "frame-input-group__text" }, ngImport: i0 });
@@ -8530,6 +8668,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], debugVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "debugVisible", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indicatorPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorPosition", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }] } });
 
+const FR_SELECT_ICON_POSITIONS = ['leading', 'trailing'];
 class FrSelectValue {
     select = inject(FrSelect);
     placeholder = input('Select an option', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
@@ -8564,8 +8703,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }] });
 class FrSelectIcon {
+    position = input('trailing', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSelectIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSelectIcon, isStandalone: true, selector: "[frSelectIcon], frame-select-icon", host: { attributes: { "aria-hidden": "true" }, classAttribute: "frame-select__icon" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrSelectIcon, isStandalone: true, selector: "[frSelectIcon], frame-select-icon", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "attr.data-position": "position()" }, classAttribute: "frame-select__icon" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSelectIcon, decorators: [{
             type: Directive,
@@ -8574,9 +8714,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     host: {
                         class: 'frame-select__icon',
                         'aria-hidden': 'true',
+                        '[attr.data-position]': 'position()',
                     },
                 }]
-        }] });
+        }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
 class FrSelectError {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSelectError, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSelectError, isStandalone: true, selector: "[frSelectError], frame-select-error", host: { attributes: { "aria-live": "polite" }, classAttribute: "frame-select__error" }, ngImport: i0 });
@@ -9431,6 +9572,13 @@ function coerceMenuButtonSize(value) {
 function coerceMenuButtonVariant(value) {
     return value === 'outline' ? 'outline' : 'default';
 }
+function coerceOptionalNumber(value) {
+    if (value === null || value === undefined || value === '') {
+        return null;
+    }
+    const coerced = numberAttribute(value, Number.NaN);
+    return Number.isFinite(coerced) ? coerced : null;
+}
 class FrSidebarProvider {
     document = inject(DOCUMENT);
     elementRef = inject(ElementRef);
@@ -9538,8 +9686,10 @@ class FrSidebar {
     side = input('left', { ...(ngDevMode ? { debugName: "side" } : /* istanbul ignore next */ {}), transform: coerceSide });
     variant = input('sidebar', { ...(ngDevMode ? { debugName: "variant" } : /* istanbul ignore next */ {}), transform: coerceVariant });
     collapsible = input('offcanvas', { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: coerceCollapsible });
+    minSize = input(null, { ...(ngDevMode ? { debugName: "minSize" } : /* istanbul ignore next */ {}), transform: coerceOptionalNumber });
+    maxSize = input(384, { ...(ngDevMode ? { debugName: "maxSize" } : /* istanbul ignore next */ {}), transform: coerceOptionalNumber });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrSidebar, isStandalone: true, selector: "[frSidebar], frame-sidebar", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-side": "side()", "attr.data-variant": "variant()", "attr.data-collapsible": "collapsible()", "attr.data-state": "provider?.state() ?? \"expanded\"", "attr.data-mobile-open": "provider?.openMobile() ?? false" }, classAttribute: "frame-sidebar" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrSidebar, isStandalone: true, selector: "[frSidebar], frame-sidebar", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-side": "side()", "attr.data-variant": "variant()", "attr.data-collapsible": "collapsible()", "attr.data-state": "provider?.state() ?? \"expanded\"", "attr.data-mobile-open": "provider?.openMobile() ?? false" }, classAttribute: "frame-sidebar" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebar, decorators: [{
             type: Directive,
@@ -9554,7 +9704,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '[attr.data-mobile-open]': 'provider?.openMobile() ?? false',
                     },
                 }]
-        }], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }] } });
+        }], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], minSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSize", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }] } });
 class FrSidebarTrigger {
     provider = inject(FR_SIDEBAR_PROVIDER, { optional: true });
     ariaLabel = input('Toggle sidebar', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
@@ -9586,6 +9736,8 @@ class FrSidebarRail {
     suppressClick = false;
     frameId = -1;
     pendingWidth = 0;
+    resizeMinSize = 192;
+    resizeMaxSize = 384;
     provider = inject(FR_SIDEBAR_PROVIDER, { optional: true });
     toggle() {
         if (this.suppressClick) {
@@ -9601,6 +9753,7 @@ class FrSidebarRail {
         this.startWidth = this.sidebar.elementRef.nativeElement.getBoundingClientRect().width;
         this.dragging = false;
         this.pendingWidth = this.startWidth;
+        this.captureResizeBounds();
         this.provider.setResizing(true);
         event.preventDefault();
         const move = (moveEvent) => this.resize(moveEvent);
@@ -9612,6 +9765,8 @@ class FrSidebarRail {
             this.suppressClick = this.dragging;
             this.dragging = false;
             this.pendingWidth = 0;
+            this.resizeMinSize = 192;
+            this.resizeMaxSize = 384;
             setTimeout(() => {
                 this.suppressClick = false;
             });
@@ -9625,7 +9780,7 @@ class FrSidebarRail {
         }
         const delta = event.clientX - this.startX;
         const direction = this.sidebar.side() === 'right' ? -1 : 1;
-        const nextWidth = Math.min(Math.max(this.startWidth + delta * direction, 192), 384);
+        const nextWidth = this.clampWidth(this.startWidth + delta * direction);
         if (Math.abs(delta) > 3) {
             this.dragging = true;
         }
@@ -9647,6 +9802,35 @@ class FrSidebarRail {
             this.provider?.setSidebarWidth(this.pendingWidth);
         }
     }
+    clampWidth(width) {
+        return Math.min(Math.max(width, this.resizeMinSize), this.resizeMaxSize);
+    }
+    captureResizeBounds() {
+        if (!this.sidebar) {
+            return;
+        }
+        const minSize = this.sidebar.minSize() ?? this.measureContentMinSize();
+        const maxSize = this.sidebar.maxSize() ?? Number.POSITIVE_INFINITY;
+        this.resizeMinSize = minSize;
+        this.resizeMaxSize = Math.max(minSize, maxSize);
+    }
+    measureContentMinSize() {
+        if (!this.sidebar) {
+            return 192;
+        }
+        const sidebarElement = this.sidebar.elementRef.nativeElement;
+        const sidebarRect = sidebarElement.getBoundingClientRect();
+        let measuredWidth = 0;
+        for (const element of Array.from(sidebarElement.querySelectorAll('*'))) {
+            if (element.hasAttribute('frSidebarRail') || element.tagName.toLowerCase() === 'frame-sidebar-rail') {
+                continue;
+            }
+            const rect = element.getBoundingClientRect();
+            const inlineStart = Math.max(0, rect.left - sidebarRect.left);
+            measuredWidth = Math.max(measuredWidth, inlineStart + element.scrollWidth);
+        }
+        return Math.max(Math.ceil(measuredWidth), 192);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarRail, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSidebarRail, isStandalone: true, selector: "[frSidebarRail], frame-sidebar-rail", host: { attributes: { "role": "separator", "tabindex": "0", "aria-label": "Resize sidebar", "aria-orientation": "vertical" }, listeners: { "click": "toggle()", "pointerdown": "startResize($event)", "keydown.enter": "toggle()", "keydown.space": "toggle(); $event.preventDefault()" }, classAttribute: "frame-sidebar__rail" }, ngImport: i0 });
 }
@@ -10304,5 +10488,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { FR_ACCORDION_TYPES, FR_ALERT_VARIANTS, FR_AVATAR_SIZES, FR_BADGE_ICON_POSITIONS, FR_BADGE_VARIANTS, FR_BUTTON_APPEARANCES, FR_BUTTON_GROUP_ORIENTATIONS, FR_BUTTON_LOADING_DISPLAYS, FR_BUTTON_RADII, FR_BUTTON_SIZES, FR_CARD_FOOTER_ALIGNS, FR_CARD_SIZES, FR_CARD_SPACINGS, FR_CAROUSEL_ALIGNS, FR_CAROUSEL_DIRECTIONS, FR_CAROUSEL_ORIENTATIONS, FR_CONTEXT_MENU_CONTENT, FR_DROPDOWN_MENU_ALIGNMENTS, FR_DROPDOWN_MENU_CONTENT, FR_DROPDOWN_MENU_ITEM_VARIANTS, FR_DROPDOWN_MENU_PARENT, FR_DROPDOWN_MENU_SIDES, FR_DROPDOWN_MENU_TRIGGER_MODES, FR_EMPTY_MEDIA_VARIANTS, FR_EMPTY_ORIENTATIONS, FR_EMPTY_VARIANTS, FR_FIELD_LEGEND_VARIANTS, FR_FIELD_ORIENTATIONS, FR_HOVER_CARD_ALIGNMENTS, FR_HOVER_CARD_SIDES, FR_INPUT_GROUP_ADDON_ALIGNS, FR_INPUT_OTP_PATTERN_DIGITS, FR_INPUT_OTP_PATTERN_DIGITS_AND_CHARS, FR_ITEM_MEDIA_VARIANTS, FR_ITEM_SIZES, FR_ITEM_VARIANTS, FR_MENUBAR_PARENT, FR_MODAL_DATA, FR_NAVIGATION_MENU_PARENT, FR_POPOVER_ALIGNMENTS, FR_POPOVER_SIDES, FR_RADIO_GROUP_ORIENTATIONS, FR_RADIO_GROUP_VARIANTS, FR_RESIZABLE_ORIENTATIONS, FR_SELECT_INDICATOR_POSITIONS, FR_SELECT_POSITIONS, FR_SEPARATOR_ORIENTATIONS, FR_SHEET_DATA, FR_SHEET_SIDES, FR_SIDEBAR_COLLAPSIBLES, FR_SIDEBAR_MENU_BUTTON_SIZES, FR_SIDEBAR_MENU_BUTTON_VARIANTS, FR_SIDEBAR_PROVIDER, FR_SIDEBAR_SIDES, FR_SIDEBAR_VARIANTS, FR_SLIDER_ORIENTATIONS, FR_SWITCH_SIZES, FrAccordion, FrAccordionContent, FrAccordionIcon, FrAccordionItem, FrAccordionTrigger, FrAlert, FrAlertDescription, FrAlertIcon, FrAlertTitle, FrAvatar, FrAvatarBadge, FrAvatarFallback, FrAvatarGroup, FrAvatarGroupCount, FrAvatarIcon, FrAvatarImage, FrBadge, FrBadgeIcon, FrBadgeLabel, FrBadgeSpinner, FrBreadcrumb, FrBreadcrumbEllipsis, FrBreadcrumbItem, FrBreadcrumbLink, FrBreadcrumbList, FrBreadcrumbPage, FrBreadcrumbSeparator, FrButton, FrButtonGroup, FrButtonIcon, FrButtonLabel, FrButtonLoading, FrCalendar, FrCard, FrCardAction, FrCardContent, FrCardDescription, FrCardFooter, FrCardHeader, FrCardTitle, FrCarousel, FrCarouselContent, FrCarouselItem, FrCarouselNext, FrCarouselPrevious, FrCheckbox, FrCheckboxField, FrCheckboxLabel, FrCollapsible, FrCollapsibleContent, FrCollapsibleTrigger, FrCombobox, FrComboboxChip, FrComboboxChipRemove, FrComboboxChips, FrComboboxChipsInput, FrComboboxClear, FrComboboxCollection, FrComboboxContent, FrComboboxEmpty, FrComboboxError, FrComboboxGroup, FrComboboxInput, FrComboboxItem, FrComboboxItemIndicator, FrComboboxLabel, FrComboboxList, FrComboboxPanel, FrComboboxRootLookup, FrComboboxSeparator, FrComboboxTrigger, FrComboboxValueList, FrCommand, FrCommandDialog, FrCommandDialogTrigger, FrCommandEmpty, FrCommandFooter, FrCommandGroup, FrCommandGroupHeading, FrCommandInput, FrCommandItem, FrCommandItemIcon, FrCommandList, FrCommandSeparator, FrCommandService, FrCommandShortcut, FrContextMenu, FrContextMenuCheckboxItem, FrContextMenuContent, FrContextMenuItem, FrContextMenuItemIndicator, FrContextMenuLabel, FrContextMenuPanel, FrContextMenuRadioGroup, FrContextMenuRadioItem, FrContextMenuSeparator, FrContextMenuShortcut, FrContextMenuSub, FrContextMenuSubTrigger, FrContextMenuTrigger, FrControlValueAccessor, FrDatePicker, FrDropdownMenu, FrDropdownMenuCheckboxItem, FrDropdownMenuContent, FrDropdownMenuItem, FrDropdownMenuItemIndicator, FrDropdownMenuLabel, FrDropdownMenuPanel, FrDropdownMenuRadioGroup, FrDropdownMenuRadioItem, FrDropdownMenuSeparator, FrDropdownMenuShortcut, FrDropdownMenuSub, FrDropdownMenuSubTrigger, FrDropdownMenuTree, FrDropdownMenuTrigger, FrEmpty, FrEmptyContent, FrEmptyDescription, FrEmptyHeader, FrEmptyMedia, FrEmptyTitle, FrField, FrFieldContent, FrFieldDescription, FrFieldError, FrFieldGroup, FrFieldLabel, FrFieldLegend, FrFieldSeparator, FrFieldSet, FrHoverCardRoot as FrHoverCard, FrHoverCardContent, FrHoverCardPanel, FrHoverCardTrigger, FrIconButton, FrInput, FrInputBadge, FrInputControl, FrInputDescription, FrInputError, FrInputField, FrInputFieldGroup, FrInputGroup, FrInputGroupAddon, FrInputGroupInput, FrInputGroupText, FrInputHeader, FrInputLabel, FrInputOtp, FrInputOtpGroup, FrInputOtpSeparator, FrInputOtpSlot, FrItem, FrItemActions, FrItemContent, FrItemDescription, FrItemFooter, FrItemGroup, FrItemHeader, FrItemMedia, FrItemSeparator, FrItemTitle, FrMenuBar, FrMenuBarCheckboxItem, FrMenuBarContent, FrMenuBarItem, FrMenuBarItemIndicator, FrMenuBarLabel, FrMenuBarMenu, FrMenuBarPanel, FrMenuBarRadioGroup, FrMenuBarRadioItem, FrMenuBarSeparator, FrMenuBarShortcut, FrMenuBarSub, FrMenuBarSubTrigger, FrMenuBarTrigger, FrModalBody, FrModalClose, FrModalContent, FrModalDescription, FrModalFooter, FrModalHeader, FrModalPanel, FrModalService, FrModalShell, FrModalTitle, FrModalTrigger, FrNavigationLinkSeparator, FrNavigationMenu, FrNavigationMenuContent, FrNavigationMenuFeature, FrNavigationMenuGrid, FrNavigationMenuIndicator, FrNavigationMenuItem, FrNavigationMenuLink, FrNavigationMenuLinkDescription, FrNavigationMenuLinkTitle, FrNavigationMenuList, FrNavigationMenuPanel, FrNavigationMenuTrigger, FrNavigationMenuViewport, FrPagination, FrPaginationContent, FrPaginationEllipsis, FrPaginationIcon, FrPaginationItem, FrPaginationLink, FrPaginationNext, FrPaginationPrevious, FrPopoverRoot as FrPopover, FrPopoverBody, FrPopoverClose, FrPopoverContent, FrPopoverDescription, FrPopoverFooter, FrPopoverHeader, FrPopoverPanel, FrPopoverTitle, FrPopoverTrigger, FrProgress, FrProgressIndicator, FrRadioGroup, FrRadioGroupCard, FrRadioGroupCardMeta, FrRadioGroupField, FrRadioGroupItem, FrResizableHandle, FrResizablePanel, FrResizablePanelGroup, FrSelect, FrSelectContent, FrSelectError, FrSelectGroup, FrSelectIcon, FrSelectItem, FrSelectItemIndicator, FrSelectLabel, FrSelectPanel, FrSelectSeparator, FrSelectValue, FrSeparator, FrSheetBody, FrSheetClose, FrSheetContent, FrSheetDescription, FrSheetFooter, FrSheetHeader, FrSheetPanel, FrSheetService, FrSheetShell, FrSheetTitle, FrSheetTrigger, FrSidebar, FrSidebarContent, FrSidebarFooter, FrSidebarGroup, FrSidebarGroupAction, FrSidebarGroupContent, FrSidebarGroupLabel, FrSidebarHeader, FrSidebarInset, FrSidebarMenu, FrSidebarMenuAction, FrSidebarMenuBadge, FrSidebarMenuButton, FrSidebarMenuItem, FrSidebarMenuSkeleton, FrSidebarMenuSub, FrSidebarMenuSubButton, FrSidebarMenuSubItem, FrSidebarProvider, FrSidebarRail, FrSidebarTrigger, FrSlider, FrSwitch, FrSwitchContent, FrSwitchDescription, FrSwitchError, FrSwitchField, FrSwitchLabel, FrTextarea, FrVirtualContent, FrVirtualFor, FrVirtualItem, FrVirtualItemMeta, FrVirtualList, FrVirtualPanel, FrVirtualViewport, buildConnectedPositions, calculateScrollOffsetForIndex, calculateVirtualRange, defaultPositions, provideDsValueAccessor };
+export { FR_ACCORDION_TYPES, FR_ALERT_VARIANTS, FR_AVATAR_SIZES, FR_BADGE_ICON_POSITIONS, FR_BADGE_VARIANTS, FR_BUTTON_APPEARANCES, FR_BUTTON_GROUP_ORIENTATIONS, FR_BUTTON_LOADING_DISPLAYS, FR_BUTTON_RADII, FR_BUTTON_SIZES, FR_CARD_FOOTER_ALIGNS, FR_CARD_SIZES, FR_CARD_SPACINGS, FR_CAROUSEL_ALIGNS, FR_CAROUSEL_DIRECTIONS, FR_CAROUSEL_ORIENTATIONS, FR_CONTEXT_MENU_CONTENT, FR_DROPDOWN_MENU_ALIGNMENTS, FR_DROPDOWN_MENU_CONTENT, FR_DROPDOWN_MENU_ITEM_VARIANTS, FR_DROPDOWN_MENU_PARENT, FR_DROPDOWN_MENU_SIDES, FR_DROPDOWN_MENU_TRIGGER_MODES, FR_EMPTY_MEDIA_VARIANTS, FR_EMPTY_ORIENTATIONS, FR_EMPTY_VARIANTS, FR_FIELD_LEGEND_VARIANTS, FR_FIELD_ORIENTATIONS, FR_HOVER_CARD_ALIGNMENTS, FR_HOVER_CARD_SIDES, FR_INPUT_GROUP_ADDON_ALIGNS, FR_INPUT_GROUP_ADDON_VARIANTS, FR_INPUT_OTP_PATTERN_DIGITS, FR_INPUT_OTP_PATTERN_DIGITS_AND_CHARS, FR_ITEM_MEDIA_VARIANTS, FR_ITEM_SIZES, FR_ITEM_VARIANTS, FR_MENUBAR_PARENT, FR_MODAL_DATA, FR_NAVIGATION_MENU_PARENT, FR_POPOVER_ALIGNMENTS, FR_POPOVER_SIDES, FR_RADIO_GROUP_ORIENTATIONS, FR_RADIO_GROUP_VARIANTS, FR_RESIZABLE_ORIENTATIONS, FR_SELECT_ICON_POSITIONS, FR_SELECT_INDICATOR_POSITIONS, FR_SELECT_POSITIONS, FR_SEPARATOR_ORIENTATIONS, FR_SHEET_DATA, FR_SHEET_SIDES, FR_SIDEBAR_COLLAPSIBLES, FR_SIDEBAR_MENU_BUTTON_SIZES, FR_SIDEBAR_MENU_BUTTON_VARIANTS, FR_SIDEBAR_PROVIDER, FR_SIDEBAR_SIDES, FR_SIDEBAR_VARIANTS, FR_SLIDER_ORIENTATIONS, FR_SWITCH_SIZES, FrAccordion, FrAccordionContent, FrAccordionIcon, FrAccordionItem, FrAccordionTrigger, FrAlert, FrAlertDescription, FrAlertIcon, FrAlertTitle, FrAvatar, FrAvatarBadge, FrAvatarFallback, FrAvatarGroup, FrAvatarGroupCount, FrAvatarIcon, FrAvatarImage, FrBadge, FrBadgeIcon, FrBadgeLabel, FrBadgeSpinner, FrBreadcrumb, FrBreadcrumbEllipsis, FrBreadcrumbItem, FrBreadcrumbLink, FrBreadcrumbList, FrBreadcrumbPage, FrBreadcrumbSeparator, FrButton, FrButtonGroup, FrButtonIcon, FrButtonLabel, FrButtonLoading, FrCalendar, FrCard, FrCardAction, FrCardContent, FrCardDescription, FrCardFooter, FrCardHeader, FrCardTitle, FrCarousel, FrCarouselContent, FrCarouselItem, FrCarouselNext, FrCarouselPrevious, FrCheckbox, FrCheckboxField, FrCheckboxLabel, FrCollapsible, FrCollapsibleContent, FrCollapsibleTrigger, FrCombobox, FrComboboxChip, FrComboboxChipRemove, FrComboboxChips, FrComboboxChipsInput, FrComboboxClear, FrComboboxCollection, FrComboboxContent, FrComboboxEmpty, FrComboboxError, FrComboboxGroup, FrComboboxInput, FrComboboxItem, FrComboboxItemIndicator, FrComboboxLabel, FrComboboxList, FrComboboxPanel, FrComboboxRootLookup, FrComboboxSeparator, FrComboboxTrigger, FrComboboxValueList, FrCommand, FrCommandDialog, FrCommandDialogTrigger, FrCommandEmpty, FrCommandFooter, FrCommandGroup, FrCommandGroupHeading, FrCommandInput, FrCommandItem, FrCommandItemIcon, FrCommandList, FrCommandSeparator, FrCommandService, FrCommandShortcut, FrContextMenu, FrContextMenuCheckboxItem, FrContextMenuContent, FrContextMenuItem, FrContextMenuItemIndicator, FrContextMenuLabel, FrContextMenuPanel, FrContextMenuRadioGroup, FrContextMenuRadioItem, FrContextMenuSeparator, FrContextMenuShortcut, FrContextMenuSub, FrContextMenuSubTrigger, FrContextMenuTrigger, FrControlValueAccessor, FrDatePicker, FrDropdownMenu, FrDropdownMenuCheckboxItem, FrDropdownMenuContent, FrDropdownMenuItem, FrDropdownMenuItemIndicator, FrDropdownMenuLabel, FrDropdownMenuPanel, FrDropdownMenuRadioGroup, FrDropdownMenuRadioItem, FrDropdownMenuSeparator, FrDropdownMenuShortcut, FrDropdownMenuSub, FrDropdownMenuSubTrigger, FrDropdownMenuTree, FrDropdownMenuTrigger, FrEmpty, FrEmptyContent, FrEmptyDescription, FrEmptyHeader, FrEmptyMedia, FrEmptyTitle, FrField, FrFieldContent, FrFieldDescription, FrFieldError, FrFieldGroup, FrFieldLabel, FrFieldLegend, FrFieldSeparator, FrFieldSet, FrHoverCardRoot as FrHoverCard, FrHoverCardContent, FrHoverCardPanel, FrHoverCardTrigger, FrIconButton, FrInput, FrInputBadge, FrInputControl, FrInputDescription, FrInputError, FrInputField, FrInputFieldGroup, FrInputGroup, FrInputGroupAddon, FrInputGroupInput, FrInputGroupText, FrInputHeader, FrInputLabel, FrInputOtp, FrInputOtpGroup, FrInputOtpSeparator, FrInputOtpSlot, FrItem, FrItemActions, FrItemContent, FrItemDescription, FrItemFooter, FrItemGroup, FrItemHeader, FrItemMedia, FrItemSeparator, FrItemTitle, FrMenuBar, FrMenuBarCheckboxItem, FrMenuBarContent, FrMenuBarItem, FrMenuBarItemIndicator, FrMenuBarLabel, FrMenuBarMenu, FrMenuBarPanel, FrMenuBarRadioGroup, FrMenuBarRadioItem, FrMenuBarSeparator, FrMenuBarShortcut, FrMenuBarSub, FrMenuBarSubTrigger, FrMenuBarTrigger, FrModalBody, FrModalClose, FrModalContent, FrModalDescription, FrModalFooter, FrModalHeader, FrModalPanel, FrModalService, FrModalShell, FrModalTitle, FrModalTrigger, FrNavigationLinkSeparator, FrNavigationMenu, FrNavigationMenuContent, FrNavigationMenuFeature, FrNavigationMenuGrid, FrNavigationMenuIndicator, FrNavigationMenuItem, FrNavigationMenuLink, FrNavigationMenuLinkDescription, FrNavigationMenuLinkTitle, FrNavigationMenuList, FrNavigationMenuPanel, FrNavigationMenuTrigger, FrNavigationMenuViewport, FrPagination, FrPaginationContent, FrPaginationEllipsis, FrPaginationIcon, FrPaginationItem, FrPaginationLink, FrPaginationNext, FrPaginationPrevious, FrPopoverRoot as FrPopover, FrPopoverBody, FrPopoverClose, FrPopoverContent, FrPopoverDescription, FrPopoverFooter, FrPopoverHeader, FrPopoverPanel, FrPopoverTitle, FrPopoverTrigger, FrProgress, FrProgressIndicator, FrRadioGroup, FrRadioGroupCard, FrRadioGroupCardMeta, FrRadioGroupField, FrRadioGroupItem, FrResizableHandle, FrResizablePanel, FrResizablePanelGroup, FrSelect, FrSelectContent, FrSelectError, FrSelectGroup, FrSelectIcon, FrSelectItem, FrSelectItemIndicator, FrSelectLabel, FrSelectPanel, FrSelectSeparator, FrSelectValue, FrSeparator, FrSheetBody, FrSheetClose, FrSheetContent, FrSheetDescription, FrSheetFooter, FrSheetHeader, FrSheetPanel, FrSheetService, FrSheetShell, FrSheetTitle, FrSheetTrigger, FrSidebar, FrSidebarContent, FrSidebarFooter, FrSidebarGroup, FrSidebarGroupAction, FrSidebarGroupContent, FrSidebarGroupLabel, FrSidebarHeader, FrSidebarInset, FrSidebarMenu, FrSidebarMenuAction, FrSidebarMenuBadge, FrSidebarMenuButton, FrSidebarMenuItem, FrSidebarMenuSkeleton, FrSidebarMenuSub, FrSidebarMenuSubButton, FrSidebarMenuSubItem, FrSidebarProvider, FrSidebarRail, FrSidebarTrigger, FrSlider, FrSwitch, FrSwitchContent, FrSwitchDescription, FrSwitchError, FrSwitchField, FrSwitchLabel, FrTextarea, FrVirtualContent, FrVirtualFor, FrVirtualItem, FrVirtualItemMeta, FrVirtualList, FrVirtualPanel, FrVirtualViewport, buildConnectedPositions, calculateScrollOffsetForIndex, calculateVirtualRange, defaultPositions, provideDsValueAccessor };
 //# sourceMappingURL=frame-ui-ng-components.mjs.map