@frame-ui-ng/components 0.2.0-beta.0 → 0.4.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, viewChild, model, afterNextRender, ViewContainerRef, Injectable, Injector, numberAttribute } 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';
@@ -8,7 +8,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { fromEvent } from 'rxjs';
 import * as i1$1 from '@frame-ui-ng/components/button';
 import { FrButton as FrButton$1, FrButtonLabel as FrButtonLabel$1 } from '@frame-ui-ng/components/button';
-import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import { CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { FrControlValueAccessor as FrControlValueAccessor$1, provideDsValueAccessor as provideDsValueAccessor$1 } from '@frame-ui-ng/components/forms';
 import { Dialog, DialogRef, DIALOG_DATA } from '@angular/cdk/dialog';
 import * as i1$2 from '@angular/cdk/menu';
@@ -17,6 +17,7 @@ import * as i1$3 from '@frame-ui-ng/components/dropdown-menu';
 import { buildConnectedPositions as buildConnectedPositions$1, FR_DROPDOWN_MENU_CONTENT as FR_DROPDOWN_MENU_CONTENT$1, FrDropdownMenuTree as FrDropdownMenuTree$1, FR_DROPDOWN_MENU_PARENT as FR_DROPDOWN_MENU_PARENT$1, defaultPositions as defaultPositions$1, FrDropdownMenuTrigger as FrDropdownMenuTrigger$1, FrDropdownMenuContent as FrDropdownMenuContent$1, FrDropdownMenuPanel as FrDropdownMenuPanel$1, FrDropdownMenuItem as FrDropdownMenuItem$1, FrDropdownMenuCheckboxItem as FrDropdownMenuCheckboxItem$1, FrDropdownMenuRadioGroup as FrDropdownMenuRadioGroup$1, FrDropdownMenuRadioItem as FrDropdownMenuRadioItem$1, FrDropdownMenuLabel as FrDropdownMenuLabel$1, FrDropdownMenuSeparator as FrDropdownMenuSeparator$1, FrDropdownMenuShortcut as FrDropdownMenuShortcut$1, FrDropdownMenuItemIndicator as FrDropdownMenuItemIndicator$1, FrDropdownMenuSub as FrDropdownMenuSub$1, FrDropdownMenuSubTrigger as FrDropdownMenuSubTrigger$1, FrDropdownMenu as FrDropdownMenu$1 } from '@frame-ui-ng/components/dropdown-menu';
 import { FrCalendar as FrCalendar$1 } from '@frame-ui-ng/components/calendar';
 import { FrInput as FrInput$1 } from '@frame-ui-ng/components/input';
+import { clampNumber, coerceNumber } from '@frame-ui-ng/components/utils';
 
 const ACCORDION_ROOT = new InjectionToken('FrAccordion');
 const ACCORDION_ITEM = new InjectionToken('FrAccordionItem');
@@ -812,9 +813,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 +834,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 +879,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 +914,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 +1028,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 +1181,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"] }] } });
@@ -2181,7 +2288,7 @@ class FrCombobox extends FrControlValueAccessor$1 {
     itemsVersion = signal(0, ...(ngDevMode ? [{ debugName: "itemsVersion" }] : /* istanbul ignore next */ []));
     selectedLabels = new Map();
     resizeObserver = null;
-    origin;
+    origin = viewChild(CdkOverlayOrigin, ...(ngDevMode ? [{ debugName: "origin" }] : /* istanbul ignore next */ []));
     content = contentChild(FrComboboxContent, ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
     autoHighlight = input(false, { ...(ngDevMode ? { debugName: "autoHighlight" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     debugVisible = input(false, { ...(ngDevMode ? { debugName: "debugVisible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -2348,7 +2455,7 @@ class FrCombobox extends FrControlValueAccessor$1 {
         this.itemsVersion.update((value) => value + 1);
     }
     measureAnchor() {
-        const element = this.origin?.elementRef.nativeElement ?? this.elementRef.nativeElement;
+        const element = this.origin()?.elementRef.nativeElement ?? this.elementRef.nativeElement;
         if (typeof element?.getBoundingClientRect !== 'function') {
             this.anchorWidth.set(null);
             return;
@@ -2359,7 +2466,7 @@ class FrCombobox extends FrControlValueAccessor$1 {
         if (typeof ResizeObserver === 'undefined') {
             return;
         }
-        const element = this.origin?.elementRef.nativeElement ?? this.elementRef.nativeElement;
+        const element = this.origin()?.elementRef.nativeElement ?? this.elementRef.nativeElement;
         if (typeof element?.getBoundingClientRect !== 'function') {
             return;
         }
@@ -2373,27 +2480,27 @@ class FrCombobox extends FrControlValueAccessor$1 {
                 provide: FrComboboxRootLookup,
                 useExisting: FrCombobox,
             },
-        ], queries: [{ propertyName: "content", first: true, predicate: FrComboboxContent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "origin", first: true, predicate: CdkOverlayOrigin, descendants: true }], exportAs: ["frCombobox"], usesInheritance: true, ngImport: i0, template: `
-    <span cdkOverlayOrigin #origin="cdkOverlayOrigin" class="frame-combobox__anchor">
-      <ng-content />
-    </span>
-
-    <ng-template
-      cdkConnectedOverlay
-      [cdkConnectedOverlayOrigin]="origin"
-      [cdkConnectedOverlayOpen]="isOpen()"
-      [cdkConnectedOverlayPositions]="positions"
-      [cdkConnectedOverlayPanelClass]="overlayPanelClasses()"
-      [cdkConnectedOverlayWidth]="overlayMinWidth()"
-      [cdkConnectedOverlayMinWidth]="overlayMinWidth()"
-      (overlayOutsideClick)="close()"
-      (positionChange)="handlePositionChange($event)"
-      (detach)="close()"
-    >
-      @if (content()) {
-        <ng-container [ngTemplateOutlet]="content()!.templateRef" />
-      }
-    </ng-template>
+        ], queries: [{ propertyName: "content", first: true, predicate: FrComboboxContent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "origin", first: true, predicate: CdkOverlayOrigin, descendants: true, isSignal: true }], exportAs: ["frCombobox"], usesInheritance: true, ngImport: i0, template: `
+    <span cdkOverlayOrigin #origin="cdkOverlayOrigin" class="frame-combobox__anchor">
+      <ng-content />
+    </span>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="isOpen()"
+      [cdkConnectedOverlayPositions]="positions"
+      [cdkConnectedOverlayPanelClass]="overlayPanelClasses()"
+      [cdkConnectedOverlayWidth]="overlayMinWidth()"
+      [cdkConnectedOverlayMinWidth]="overlayMinWidth()"
+      (overlayOutsideClick)="close()"
+      (positionChange)="handlePositionChange($event)"
+      (detach)="close()"
+    >
+      @if (content()) {
+        <ng-container [ngTemplateOutlet]="content()!.templateRef" />
+      }
+    </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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCombobox, decorators: [{
@@ -2414,33 +2521,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '[attr.data-disabled]': 'disabled() ? "" : null',
                         '[attr.data-invalid]': 'invalid() ? "" : null'
                     },
-                    template: `
-    <span cdkOverlayOrigin #origin="cdkOverlayOrigin" class="frame-combobox__anchor">
-      <ng-content />
-    </span>
-
-    <ng-template
-      cdkConnectedOverlay
-      [cdkConnectedOverlayOrigin]="origin"
-      [cdkConnectedOverlayOpen]="isOpen()"
-      [cdkConnectedOverlayPositions]="positions"
-      [cdkConnectedOverlayPanelClass]="overlayPanelClasses()"
-      [cdkConnectedOverlayWidth]="overlayMinWidth()"
-      [cdkConnectedOverlayMinWidth]="overlayMinWidth()"
-      (overlayOutsideClick)="close()"
-      (positionChange)="handlePositionChange($event)"
-      (detach)="close()"
-    >
-      @if (content()) {
-        <ng-container [ngTemplateOutlet]="content()!.templateRef" />
-      }
-    </ng-template>
+                    template: `
+    <span cdkOverlayOrigin #origin="cdkOverlayOrigin" class="frame-combobox__anchor">
+      <ng-content />
+    </span>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="isOpen()"
+      [cdkConnectedOverlayPositions]="positions"
+      [cdkConnectedOverlayPanelClass]="overlayPanelClasses()"
+      [cdkConnectedOverlayWidth]="overlayMinWidth()"
+      [cdkConnectedOverlayMinWidth]="overlayMinWidth()"
+      (overlayOutsideClick)="close()"
+      (positionChange)="handlePositionChange($event)"
+      (detach)="close()"
+    >
+      @if (content()) {
+        <ng-container [ngTemplateOutlet]="content()!.templateRef" />
+      }
+    </ng-template>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { origin: [{
-                type: ViewChild,
-                args: [CdkOverlayOrigin]
-            }], content: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FrComboboxContent), { isSignal: true }] }], autoHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHighlight", required: false }] }], debugVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "debugVisible", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], itemToStringValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemToStringValue", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { origin: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkOverlayOrigin), { isSignal: true }] }], content: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FrComboboxContent), { isSignal: true }] }], autoHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHighlight", required: false }] }], debugVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "debugVisible", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], itemToStringValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemToStringValue", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 class FrComboboxInput {
     root = inject(FrCombobox);
@@ -2918,7 +3022,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 +4057,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 +4158,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 +4176,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 +4307,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 +4487,41 @@ function mergeTime(date, timeSource) {
     return next;
 }
 
+const DEFAULT_SIDE_OFFSET = 4;
+const MIN_SUBMENU_SIDE_OFFSET = 8;
 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 +4529,7 @@ function primaryPlacement(options) {
                 offsetX: horizontalOffset,
                 offsetY: options.alignOffset,
             },
-            fallback: {
+            {
                 originX: isRight ? 'start' : 'end',
                 originY,
                 overlayX: isRight ? 'end' : 'start',
@@ -4413,14 +4537,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 +4552,7 @@ function primaryPlacement(options) {
             offsetX: options.alignOffset,
             offsetY: verticalOffset,
         },
-        fallback: {
+        {
             originX,
             originY: isBottom ? 'top' : 'bottom',
             overlayX,
@@ -4436,7 +4560,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 +4583,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 +4711,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 +5072,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 +5873,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 +5889,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 +5900,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 });
@@ -5800,7 +5936,7 @@ const FR_INPUT_OTP_PATTERN_DIGITS = /^[0-9]$/;
 const FR_INPUT_OTP_PATTERN_DIGITS_AND_CHARS = /^[a-zA-Z0-9]$/;
 const FR_INPUT_OTP_CONTROLLER = new InjectionToken('FrInputOtpController');
 class FrInputOtp extends FrControlValueAccessor$1 {
-    nativeInput;
+    nativeInput = viewChild('nativeInput', ...(ngDevMode ? [{ debugName: "nativeInput" }] : /* istanbul ignore next */ []));
     maxLength = input(6, { ...(ngDevMode ? { debugName: "maxLength" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     pattern = input(FR_INPUT_OTP_PATTERN_DIGITS, ...(ngDevMode ? [{ debugName: "pattern" }] : /* istanbul ignore next */ []));
     disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled', transform: booleanAttribute });
@@ -5817,11 +5953,11 @@ class FrInputOtp extends FrControlValueAccessor$1 {
         if (this.disabled()) {
             return;
         }
-        const inputElement = this.nativeInput?.nativeElement;
+        const inputElement = this.nativeInput()?.nativeElement;
         if (!inputElement) {
             return;
         }
-        const nextIndex = clamp$2(index, 0, this.maxLength());
+        const nextIndex = clampNumber(index, 0, this.maxLength());
         inputElement.focus();
         inputElement.setSelectionRange(nextIndex, nextIndex);
         this.activeIndex.set(nextIndex);
@@ -5868,9 +6004,9 @@ class FrInputOtp extends FrControlValueAccessor$1 {
         this.focus(Math.min(next.length, this.maxLength()));
     }
     syncActiveIndex() {
-        const inputElement = this.nativeInput?.nativeElement;
+        const inputElement = this.nativeInput()?.nativeElement;
         const index = inputElement?.selectionStart ?? this.value().length;
-        this.activeIndex.set(clamp$2(index, 0, this.maxLength()));
+        this.activeIndex.set(clampNumber(index, 0, this.maxLength()));
     }
     markTouched() {
         this.markAsTouched();
@@ -5900,7 +6036,7 @@ class FrInputOtp extends FrControlValueAccessor$1 {
     }
     replaceFrom(index, text) {
         const value = this.value();
-        const start = clamp$2(index, 0, this.maxLength());
+        const start = clampNumber(index, 0, this.maxLength());
         const next = `${value.slice(0, start)}${text}${value.slice(start + text.length)}`;
         return this.sanitize(next);
     }
@@ -5919,35 +6055,35 @@ class FrInputOtp extends FrControlValueAccessor$1 {
         return characters.slice(0, this.maxLength()).join('');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputOtp, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: FrInputOtp, isStandalone: true, selector: "frame-input-otp", inputs: { maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", complete: "complete" }, host: { attributes: { "role": "group" }, listeners: { "click": "focus(activeIndex())" }, properties: { "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-invalid": "invalid() ? \"\" : null", "attr.data-complete": "isComplete() ? \"\" : null" }, classAttribute: "frame-input-otp" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.16", type: FrInputOtp, isStandalone: true, selector: "frame-input-otp", inputs: { maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", complete: "complete" }, host: { attributes: { "role": "group" }, listeners: { "click": "focus(activeIndex())" }, properties: { "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-invalid": "invalid() ? \"\" : null", "attr.data-complete": "isComplete() ? \"\" : null" }, classAttribute: "frame-input-otp" }, providers: [
             provideDsValueAccessor$1(FrInputOtp),
             {
                 provide: FR_INPUT_OTP_CONTROLLER,
                 useExisting: FrInputOtp,
             },
-        ], viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["nativeInput"], descendants: true }], exportAs: ["frInputOtp"], usesInheritance: true, ngImport: i0, template: `
-    <input
-      #nativeInput
-      frInput
-      class="frame-input-otp__native"
-      type="text"
-      inputmode="numeric"
-      autocomplete="one-time-code"
-      [attr.aria-invalid]="invalid() ? 'true' : null"
-      [attr.aria-label]="ariaLabel()"
-      [disabled]="disabled()"
-      [maxLength]="maxLength()"
-      [value]="value()"
-      (blur)="markTouched()"
-      (focus)="syncActiveIndex()"
-      (input)="handleNativeInput($any($event.target).value)"
-      (keydown)="handleKeydown($event)"
-      (paste)="handlePaste($event)"
-      (select)="syncActiveIndex()"
-      (click)="syncActiveIndex()"
-    />
-
-    <ng-content />
+        ], viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }], exportAs: ["frInputOtp"], usesInheritance: true, ngImport: i0, template: `
+    <input
+      #nativeInput
+      frInput
+      class="frame-input-otp__native"
+      type="text"
+      inputmode="numeric"
+      autocomplete="one-time-code"
+      [attr.aria-invalid]="invalid() ? 'true' : null"
+      [attr.aria-label]="ariaLabel()"
+      [disabled]="disabled()"
+      [maxLength]="maxLength()"
+      [value]="value()"
+      (blur)="markTouched()"
+      (focus)="syncActiveIndex()"
+      (input)="handleNativeInput($any($event.target).value)"
+      (keydown)="handleKeydown($event)"
+      (paste)="handlePaste($event)"
+      (select)="syncActiveIndex()"
+      (click)="syncActiveIndex()"
+    />
+
+    <ng-content />
   `, isInline: true, dependencies: [{ kind: "directive", type: FrInput$1, selector: "input[frInput]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputOtp, decorators: [{
@@ -5972,35 +6108,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '[attr.data-complete]': 'isComplete() ? "" : null',
                         '(click)': 'focus(activeIndex())',
                     },
-                    template: `
-    <input
-      #nativeInput
-      frInput
-      class="frame-input-otp__native"
-      type="text"
-      inputmode="numeric"
-      autocomplete="one-time-code"
-      [attr.aria-invalid]="invalid() ? 'true' : null"
-      [attr.aria-label]="ariaLabel()"
-      [disabled]="disabled()"
-      [maxLength]="maxLength()"
-      [value]="value()"
-      (blur)="markTouched()"
-      (focus)="syncActiveIndex()"
-      (input)="handleNativeInput($any($event.target).value)"
-      (keydown)="handleKeydown($event)"
-      (paste)="handlePaste($event)"
-      (select)="syncActiveIndex()"
-      (click)="syncActiveIndex()"
-    />
-
-    <ng-content />
+                    template: `
+    <input
+      #nativeInput
+      frInput
+      class="frame-input-otp__native"
+      type="text"
+      inputmode="numeric"
+      autocomplete="one-time-code"
+      [attr.aria-invalid]="invalid() ? 'true' : null"
+      [attr.aria-label]="ariaLabel()"
+      [disabled]="disabled()"
+      [maxLength]="maxLength()"
+      [value]="value()"
+      (blur)="markTouched()"
+      (focus)="syncActiveIndex()"
+      (input)="handleNativeInput($any($event.target).value)"
+      (keydown)="handleKeydown($event)"
+      (paste)="handlePaste($event)"
+      (select)="syncActiveIndex()"
+      (click)="syncActiveIndex()"
+    />
+
+    <ng-content />
   `,
                 }]
-        }], propDecorators: { nativeInput: [{
-                type: ViewChild,
-                args: ['nativeInput']
-            }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], complete: [{ type: i0.Output, args: ["complete"] }] } });
+        }], propDecorators: { nativeInput: [{ type: i0.ViewChild, args: ['nativeInput', { isSignal: true }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], complete: [{ type: i0.Output, args: ["complete"] }] } });
 class FrInputOtpGroup {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputOtpGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrInputOtpGroup, isStandalone: true, selector: "[frInputOtpGroup], frame-input-otp-group", host: { classAttribute: "frame-input-otp__group" }, ngImport: i0 });
@@ -6022,10 +6155,10 @@ class FrInputOtpSlot {
     filled = computed(() => !!this.char(), ...(ngDevMode ? [{ debugName: "filled" }] : /* istanbul ignore next */ []));
     active = computed(() => this.root.activeIndex() === this.index(), ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputOtpSlot, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: FrInputOtpSlot, isStandalone: true, selector: "[frInputOtpSlot], frame-input-otp-slot", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, listeners: { "click": "root.focus(index())" }, properties: { "attr.data-active": "active() ? \"\" : null", "attr.data-filled": "filled() ? \"\" : null", "attr.data-invalid": "root.invalid() ? \"\" : null", "attr.data-disabled": "root.disabled() ? \"\" : null" }, classAttribute: "frame-input-otp__slot" }, ngImport: i0, template: `
-    <span class="frame-input-otp__slot-char" [ngClass]="{ 'frame-input-otp__slot-char--empty': !filled() }">
-      {{ char() || placeholder() }}
-    </span>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: FrInputOtpSlot, isStandalone: true, selector: "[frInputOtpSlot], frame-input-otp-slot", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, listeners: { "click": "root.focus(index())" }, properties: { "attr.data-active": "active() ? \"\" : null", "attr.data-filled": "filled() ? \"\" : null", "attr.data-invalid": "root.invalid() ? \"\" : null", "attr.data-disabled": "root.disabled() ? \"\" : null" }, classAttribute: "frame-input-otp__slot" }, ngImport: i0, template: `
+    <span class="frame-input-otp__slot-char" [ngClass]="{ 'frame-input-otp__slot-char--empty': !filled() }">
+      {{ char() || placeholder() }}
+    </span>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputOtpSlot, decorators: [{
@@ -6043,10 +6176,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '[attr.data-disabled]': 'root.disabled() ? "" : null',
                         '(click)': 'root.focus(index())',
                     },
-                    template: `
-    <span class="frame-input-otp__slot-char" [ngClass]="{ 'frame-input-otp__slot-char--empty': !filled() }">
-      {{ char() || placeholder() }}
-    </span>
+                    template: `
+    <span class="frame-input-otp__slot-char" [ngClass]="{ 'frame-input-otp__slot-char--empty': !filled() }">
+      {{ char() || placeholder() }}
+    </span>
   `,
                 }]
         }], propDecorators: { index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
@@ -6078,9 +6211,6 @@ function toMatcher(pattern) {
     const regex = new RegExp(pattern);
     return (character) => regex.test(character);
 }
-function clamp$2(value, min, max) {
-    return Math.max(min, Math.min(max, value));
-}
 
 const FR_ITEM_VARIANTS = ['default', 'outline', 'muted'];
 const FR_ITEM_SIZES = ['default', 'sm', 'xs'];
@@ -6697,7 +6827,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }] });
 
+class FrModalRef extends DialogRef {
+}
+
 const FR_MODAL_DATA = DIALOG_DATA;
+const FR_MODAL_REF = FrModalRef;
 
 class FrModalShell {
     dialogRef = inject((DialogRef));
@@ -6833,26 +6967,27 @@ const DEFAULT_PANEL_CLASS$1 = 'frame-modal__overlay-pane';
 const DEFAULT_BACKDROP_CLASS$1 = 'frame-modal__backdrop';
 class FrModalService {
     dialog = inject(Dialog);
-    open(content, config = {}) {
-        if (isComponentType$1(content) && hasShellOptions$1(config)) {
+    open(content, dataOrConfig, config) {
+        const resolvedConfig = resolveOpenConfig(content, dataOrConfig, config);
+        if (isComponentType$1(content) && hasShellOptions$1(resolvedConfig)) {
             const shellConfig = {
-                ...withoutShellOptions$1(config),
+                ...withoutShellOptions$1(resolvedConfig),
                 data: {
                     bodyComponent: content,
-                    bodyData: config.bodyData ?? config.data,
-                    bodyInputs: config.bodyInputs,
-                    description: config.description,
-                    footerActions: config.footerActions,
-                    scrollable: config.scrollable,
-                    showCloseButton: config.showCloseButton,
-                    size: config.size,
-                    stickyFooter: config.stickyFooter,
-                    title: config.title,
+                    bodyData: resolvedConfig.bodyData ?? resolvedConfig.data,
+                    bodyInputs: resolvedConfig.inputs ?? resolvedConfig.bodyInputs,
+                    description: resolvedConfig.description,
+                    footerActions: resolvedConfig.footerActions,
+                    scrollable: resolvedConfig.scrollable,
+                    showCloseButton: resolvedConfig.showCloseButton,
+                    size: resolvedConfig.size,
+                    stickyFooter: resolvedConfig.stickyFooter,
+                    title: resolvedConfig.title,
                 },
             };
             return this.dialog.open(FrModalShell, this.withDefaultClasses(shellConfig));
         }
-        return this.dialog.open(content, this.withDefaultClasses(config));
+        return this.dialog.open(content, this.withDefaultClasses(resolvedConfig));
     }
     closeAll() {
         this.dialog.closeAll();
@@ -6866,6 +7001,7 @@ class FrModalService {
             ...config,
             panelClass: mergeClassList$1(config.panelClass, DEFAULT_PANEL_CLASS$1),
             backdropClass: mergeClassList$1(config.backdropClass, DEFAULT_BACKDROP_CLASS$1),
+            providers: withModalRefProvider(config.providers),
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -6884,6 +7020,7 @@ function hasShellOptions$1(config) {
         config.bodyInputs,
         config.description,
         config.footerActions,
+        config.inputs,
         config.scrollable,
         config.showCloseButton,
         config.size,
@@ -6892,9 +7029,70 @@ function hasShellOptions$1(config) {
     ].some((value) => value !== undefined);
 }
 function withoutShellOptions$1(config) {
-    const { bodyData: _bodyData, bodyInputs: _bodyInputs, description: _description, footerActions: _footerActions, scrollable: _scrollable, showCloseButton: _showCloseButton, size: _size, stickyFooter: _stickyFooter, title: _title, ...dialogConfig } = config;
+    const { bodyData: _bodyData, bodyInputs: _bodyInputs, description: _description, footerActions: _footerActions, inputs: _inputs, scrollable: _scrollable, showCloseButton: _showCloseButton, size: _size, stickyFooter: _stickyFooter, title: _title, ...dialogConfig } = config;
     return dialogConfig;
 }
+function resolveOpenConfig(content, dataOrConfig, config) {
+    if (!isComponentType$1(content)) {
+        return (dataOrConfig ?? {});
+    }
+    if (config) {
+        return {
+            ...config,
+            data: dataOrConfig,
+        };
+    }
+    if (dataOrConfig === undefined) {
+        return {};
+    }
+    if (isModalConfig(dataOrConfig)) {
+        return dataOrConfig;
+    }
+    return {
+        data: dataOrConfig,
+    };
+}
+const CONFIG_KEYS = new Set([
+    'ariaDescribedBy',
+    'ariaLabel',
+    'ariaLabelledBy',
+    'ariaModal',
+    'autoFocus',
+    'backdropClass',
+    'bodyData',
+    'bodyInputs',
+    'closeOnDestroy',
+    'closeOnNavigation',
+    'data',
+    'description',
+    'direction',
+    'disableClose',
+    'footerActions',
+    'height',
+    'inputs',
+    'maxHeight',
+    'maxWidth',
+    'minHeight',
+    'minWidth',
+    'panelClass',
+    'positionStrategy',
+    'providers',
+    'restoreFocus',
+    'role',
+    'scrollable',
+    'showCloseButton',
+    'size',
+    'stickyFooter',
+    'title',
+    'viewContainerRef',
+    'width',
+]);
+function isModalConfig(value) {
+    if (!value || typeof value !== 'object' || Array.isArray(value)) {
+        return false;
+    }
+    return Object.keys(value).some((key) => CONFIG_KEYS.has(key));
+}
 function mergeClassList$1(classList, defaultClass) {
     const classes = Array.isArray(classList)
         ? classList
@@ -6903,6 +7101,16 @@ function mergeClassList$1(classList, defaultClass) {
             : [];
     return Array.from(new Set([defaultClass, ...classes].filter(Boolean)));
 }
+function withModalRefProvider(providers) {
+    const modalRefProvider = { provide: FrModalRef, useExisting: DialogRef };
+    if (typeof providers === 'function') {
+        return (dialogRef, config, container) => [
+            modalRefProvider,
+            ...providers(dialogRef, config, container),
+        ];
+    }
+    return [modalRefProvider, ...(providers ?? [])];
+}
 
 class FrModalTrigger {
     static CUSTOM_PROPERTY_PREFIX = '--frame-modal-';
@@ -7225,7 +7433,7 @@ class FrPagination {
     canNext = computed(() => this.page() < this.normalizedTotalPages(), ...(ngDevMode ? [{ debugName: "canNext" }] : /* istanbul ignore next */ []));
     pages = computed(() => this.buildPages(), ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
     goToPage(page) {
-        this.page.set(Math.min(Math.max(page, 1), this.normalizedTotalPages()));
+        this.page.set(clampNumber(page, 1, this.normalizedTotalPages()));
     }
     goToPreviousPage() {
         this.goToPage(this.page() - 1);
@@ -7240,7 +7448,7 @@ class FrPagination {
         const totalPages = this.normalizedTotalPages();
         const boundaryCount = Math.max(0, Math.floor(this.boundaryCount()));
         const siblingCount = Math.max(0, Math.floor(this.siblingCount()));
-        const currentPage = Math.min(Math.max(this.page(), 1), totalPages);
+        const currentPage = clampNumber(this.page(), 1, totalPages);
         const pages = new Set();
         for (let page = 1; page <= Math.min(boundaryCount, totalPages); page += 1) {
             pages.add(page);
@@ -7380,13 +7588,13 @@ class FrPaginationPrevious {
         this.pagination.goToPreviousPage();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrPaginationPrevious, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrPaginationPrevious, isStandalone: true, selector: "a[frPaginationPrevious], button[frPaginationPrevious]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "handleClick($event)" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-disabled": "isDisabled() ? \"true\" : null", "attr.data-disabled": "isDisabled() ? \"\" : null", "attr.data-icon-only": "iconOnly() ? \"\" : null", "attr.disabled": "isDisabled() ? \"\" : null", "attr.tabindex": "isDisabled() ? \"-1\" : null" }, classAttribute: "frame-pagination__link frame-pagination__previous" }, ngImport: i0, template: `
-    <span class="frame-pagination__control-icon" aria-hidden="true">
-      <ng-content select="[frPaginationIcon]">‹</ng-content>
-    </span>
-    @if (!iconOnly()) {
-      <span class="frame-pagination__control-text">{{ text() }}</span>
-    }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrPaginationPrevious, isStandalone: true, selector: "a[frPaginationPrevious], button[frPaginationPrevious]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "handleClick($event)" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-disabled": "isDisabled() ? \"true\" : null", "attr.data-disabled": "isDisabled() ? \"\" : null", "attr.data-icon-only": "iconOnly() ? \"\" : null", "attr.disabled": "isDisabled() ? \"\" : null", "attr.tabindex": "isDisabled() ? \"-1\" : null" }, classAttribute: "frame-pagination__link frame-pagination__previous" }, ngImport: i0, template: `
+    <span class="frame-pagination__control-icon" aria-hidden="true">
+      <ng-content select="[frPaginationIcon]">‹</ng-content>
+    </span>
+    @if (!iconOnly()) {
+      <span class="frame-pagination__control-text">{{ text() }}</span>
+    }
   `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrPaginationPrevious, decorators: [{
@@ -7403,13 +7611,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '[attr.tabindex]': 'isDisabled() ? "-1" : null',
                         '(click)': 'handleClick($event)',
                     },
-                    template: `
-    <span class="frame-pagination__control-icon" aria-hidden="true">
-      <ng-content select="[frPaginationIcon]">‹</ng-content>
-    </span>
-    @if (!iconOnly()) {
-      <span class="frame-pagination__control-text">{{ text() }}</span>
-    }
+                    template: `
+    <span class="frame-pagination__control-icon" aria-hidden="true">
+      <ng-content select="[frPaginationIcon]">‹</ng-content>
+    </span>
+    @if (!iconOnly()) {
+      <span class="frame-pagination__control-text">{{ text() }}</span>
+    }
   `,
                 }]
         }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }] } });
@@ -7432,13 +7640,13 @@ class FrPaginationNext {
         this.pagination.goToNextPage();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrPaginationNext, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrPaginationNext, isStandalone: true, selector: "a[frPaginationNext], button[frPaginationNext]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "handleClick($event)" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-disabled": "isDisabled() ? \"true\" : null", "attr.data-disabled": "isDisabled() ? \"\" : null", "attr.data-icon-only": "iconOnly() ? \"\" : null", "attr.disabled": "isDisabled() ? \"\" : null", "attr.tabindex": "isDisabled() ? \"-1\" : null" }, classAttribute: "frame-pagination__link frame-pagination__next" }, ngImport: i0, template: `
-    @if (!iconOnly()) {
-      <span class="frame-pagination__control-text">{{ text() }}</span>
-    }
-    <span class="frame-pagination__control-icon" aria-hidden="true">
-      <ng-content select="[frPaginationIcon]">›</ng-content>
-    </span>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrPaginationNext, isStandalone: true, selector: "a[frPaginationNext], button[frPaginationNext]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "handleClick($event)" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-disabled": "isDisabled() ? \"true\" : null", "attr.data-disabled": "isDisabled() ? \"\" : null", "attr.data-icon-only": "iconOnly() ? \"\" : null", "attr.disabled": "isDisabled() ? \"\" : null", "attr.tabindex": "isDisabled() ? \"-1\" : null" }, classAttribute: "frame-pagination__link frame-pagination__next" }, ngImport: i0, template: `
+    @if (!iconOnly()) {
+      <span class="frame-pagination__control-text">{{ text() }}</span>
+    }
+    <span class="frame-pagination__control-icon" aria-hidden="true">
+      <ng-content select="[frPaginationIcon]">›</ng-content>
+    </span>
   `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrPaginationNext, decorators: [{
@@ -7455,22 +7663,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '[attr.tabindex]': 'isDisabled() ? "-1" : null',
                         '(click)': 'handleClick($event)',
                     },
-                    template: `
-    @if (!iconOnly()) {
-      <span class="frame-pagination__control-text">{{ text() }}</span>
-    }
-    <span class="frame-pagination__control-icon" aria-hidden="true">
-      <ng-content select="[frPaginationIcon]">›</ng-content>
-    </span>
+                    template: `
+    @if (!iconOnly()) {
+      <span class="frame-pagination__control-text">{{ text() }}</span>
+    }
+    <span class="frame-pagination__control-icon" aria-hidden="true">
+      <ng-content select="[frPaginationIcon]">›</ng-content>
+    </span>
   `,
                 }]
         }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }] } });
 class FrPaginationEllipsis {
     label = input('More pages', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrPaginationEllipsis, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: FrPaginationEllipsis, isStandalone: true, selector: "[frPaginationEllipsis], frame-pagination-ellipsis", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, classAttribute: "frame-pagination__ellipsis" }, ngImport: i0, template: `
-    <span aria-hidden="true">...</span>
-    <span class="frame-pagination__sr-only">{{ label() }}</span>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: FrPaginationEllipsis, isStandalone: true, selector: "[frPaginationEllipsis], frame-pagination-ellipsis", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, classAttribute: "frame-pagination__ellipsis" }, ngImport: i0, template: `
+    <span aria-hidden="true">...</span>
+    <span class="frame-pagination__sr-only">{{ label() }}</span>
   `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrPaginationEllipsis, decorators: [{
@@ -7481,9 +7689,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         class: 'frame-pagination__ellipsis',
                         role: 'presentation',
                     },
-                    template: `
-    <span aria-hidden="true">...</span>
-    <span class="frame-pagination__sr-only">{{ label() }}</span>
+                    template: `
+    <span aria-hidden="true">...</span>
+    <span class="frame-pagination__sr-only">{{ label() }}</span>
   `,
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
@@ -7898,7 +8106,7 @@ class FrProgress {
         if (value === null) {
             return 0;
         }
-        return Math.min(Math.max(value, 0), this.max());
+        return clampNumber(value, 0, this.max());
     }, ...(ngDevMode ? [{ debugName: "normalizedValue" }] : /* istanbul ignore next */ []));
     percentage = computed(() => (this.normalizedValue() / this.max()) * 100, ...(ngDevMode ? [{ debugName: "percentage" }] : /* istanbul ignore next */ []));
     state = computed(() => {
@@ -8028,13 +8236,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 
 const FR_RESIZABLE_ORIENTATIONS = ['horizontal', 'vertical'];
 let nextResizableId = 0;
-function coerceSize(value, fallback) {
-    const parsed = Number(value);
-    return Number.isFinite(parsed) ? parsed : fallback;
-}
-function clampSize(value, min, max) {
-    return Math.min(Math.max(value, min), max);
-}
 class FrResizablePanelGroup {
     elementRef = inject((ElementRef));
     groupId = `frame-resizable-${++nextResizableId}`;
@@ -8074,7 +8275,7 @@ class FrResizablePanelGroup {
             panel.style.flexGrow = '0';
             panel.style.flexShrink = '0';
             if (!panel.style.flexBasis) {
-                this.applyPanelSize(panel, clampSize(this.defaultSize(panel) ?? fallbackSize, this.minSize(panel), this.maxSize(panel)));
+                this.applyPanelSize(panel, clampNumber(this.defaultSize(panel) ?? fallbackSize, this.minSize(panel), this.maxSize(panel)));
             }
             else {
                 this.applyPanelSize(panel, this.panelSize(panel) ?? 0);
@@ -8164,8 +8365,8 @@ class FrResizablePanelGroup {
     resizePair(previousPanel, nextPanel, pairTotal, requestedPreviousSize) {
         const previousMin = this.minSize(previousPanel);
         const previousMax = Math.min(this.maxSize(previousPanel), pairTotal - this.minSize(nextPanel));
-        const previousSize = clampSize(requestedPreviousSize, previousMin, previousMax);
-        const nextSize = clampSize(pairTotal - previousSize, this.minSize(nextPanel), this.maxSize(nextPanel));
+        const previousSize = clampNumber(requestedPreviousSize, previousMin, previousMax);
+        const nextSize = clampNumber(pairTotal - previousSize, this.minSize(nextPanel), this.maxSize(nextPanel));
         this.applyPanelSize(previousPanel, previousSize);
         this.applyPanelSize(nextPanel, nextSize);
         this.updateHandleMetadata();
@@ -8224,16 +8425,16 @@ class FrResizablePanelGroup {
     }
     defaultSize(panel) {
         const value = panel.getAttribute('data-default-size');
-        return value === null ? null : coerceSize(value, 0);
+        return value === null ? null : coerceNumber(value, 0);
     }
     minSize(panel) {
-        return coerceSize(panel.getAttribute('data-min-size'), 0);
+        return coerceNumber(panel.getAttribute('data-min-size'), 0);
     }
     maxSize(panel) {
-        return coerceSize(panel.getAttribute('data-max-size'), 100);
+        return coerceNumber(panel.getAttribute('data-max-size'), 100);
     }
     collapsedSize(panel) {
-        return coerceSize(panel.getAttribute('data-collapsed-size'), 0);
+        return coerceNumber(panel.getAttribute('data-collapsed-size'), 0);
     }
     collapsible(panel) {
         return panel.hasAttribute('data-collapsible');
@@ -8254,11 +8455,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], layoutChange: [{ type: i0.Output, args: ["layoutChange"] }] } });
 class FrResizablePanel {
-    defaultSize = input(0, { ...(ngDevMode ? { debugName: "defaultSize" } : /* istanbul ignore next */ {}), transform: (value) => coerceSize(value, 0) });
-    minSize = input(0, { ...(ngDevMode ? { debugName: "minSize" } : /* istanbul ignore next */ {}), transform: (value) => coerceSize(value, 0) });
-    maxSize = input(100, { ...(ngDevMode ? { debugName: "maxSize" } : /* istanbul ignore next */ {}), transform: (value) => coerceSize(value, 100) });
+    defaultSize = input(0, { ...(ngDevMode ? { debugName: "defaultSize" } : /* istanbul ignore next */ {}), transform: (value) => coerceNumber(value, 0) });
+    minSize = input(0, { ...(ngDevMode ? { debugName: "minSize" } : /* istanbul ignore next */ {}), transform: (value) => coerceNumber(value, 0) });
+    maxSize = input(100, { ...(ngDevMode ? { debugName: "maxSize" } : /* istanbul ignore next */ {}), transform: (value) => coerceNumber(value, 100) });
     collapsible = input(false, { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    collapsedSize = input(0, { ...(ngDevMode ? { debugName: "collapsedSize" } : /* istanbul ignore next */ {}), transform: (value) => coerceSize(value, 0) });
+    collapsedSize = input(0, { ...(ngDevMode ? { debugName: "collapsedSize" } : /* istanbul ignore next */ {}), transform: (value) => coerceNumber(value, 0) });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrResizablePanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrResizablePanel, isStandalone: true, selector: "[frResizablePanel], frame-resizable-panel", inputs: { defaultSize: { classPropertyName: "defaultSize", publicName: "defaultSize", 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 }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsedSize: { classPropertyName: "collapsedSize", publicName: "collapsedSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-default-size": "defaultSize()", "attr.data-min-size": "minSize()", "attr.data-max-size": "maxSize()", "attr.data-collapsible": "collapsible() ? \"\" : null", "attr.data-collapsed-size": "collapsedSize()" }, classAttribute: "frame-resizable__panel" }, ngImport: i0 });
 }
@@ -8307,15 +8508,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '[attr.data-orientation]': 'group.orientation()',
                         '[attr.data-handle]': 'withHandle() ? "" : null',
                         '[attr.data-disabled]': 'group.disabled() ? "" : null',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(keydown)': 'onKeydown($event)',
                     },
                 }]
-        }], propDecorators: { withHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "withHandle", required: false }] }], onPointerDown: [{
-                type: HostListener,
-                args: ['pointerdown', ['$event']]
-            }], onKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }] } });
+        }], propDecorators: { withHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "withHandle", required: false }] }] } });
 
 const FR_SELECT_POSITIONS = ['item-aligned', 'popper'];
 class FrSelectContent extends FrDropdownMenuContent$1 {
@@ -8530,6 +8727,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 +8762,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 +8773,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 });
@@ -8686,10 +8886,6 @@ const FR_SLIDER_ORIENTATIONS = ['horizontal', 'vertical'];
 function coerceOrientation(value) {
     return value === 'vertical' ? 'vertical' : 'horizontal';
 }
-function coerceNumber(value, fallback) {
-    const parsed = Number(value);
-    return Number.isFinite(parsed) ? parsed : fallback;
-}
 function coerceValue(value) {
     if (Array.isArray(value)) {
         return value.map((item) => coerceNumber(item, 0));
@@ -8825,7 +9021,7 @@ class FrSlider extends FrControlValueAccessor$1 {
             const next = index < normalized.length - 1 ? normalized[index + 1] - minDistance : max;
             const lower = activeIndex === index ? previous : min;
             const upper = activeIndex === index ? next : max;
-            return this.snap(clamp$1(value, lower, upper), min, step);
+            return this.snap(clampNumber(value, lower, upper), min, step);
         });
     }
     snap(value, min, step) {
@@ -8848,7 +9044,7 @@ class FrSlider extends FrControlValueAccessor$1 {
         if (this.inverted()) {
             percent = 1 - percent;
         }
-        return this.min() + clamp$1(percent, 0, 1) * (this.max() - this.min());
+        return this.min() + clampNumber(percent, 0, 1) * (this.max() - this.min());
     }
     closestThumbIndex(value) {
         return this.values().reduce((closestIndex, thumb, index, values) => {
@@ -8861,31 +9057,31 @@ class FrSlider extends FrControlValueAccessor$1 {
         return getComputedStyle(this.elementRef.nativeElement).direction === 'rtl';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrSlider, isStandalone: true, selector: "frame-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, minStepsBetweenThumbs: { classPropertyName: "minStepsBetweenThumbs", publicName: "minStepsBetweenThumbs", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", 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 }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, formatValue: { classPropertyName: "formatValue", publicName: "formatValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { listeners: { "pointerdown": "handlePointerDown($event)" }, properties: { "attr.data-orientation": "orientation()", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-invalid": "invalid() ? \"\" : null", "attr.data-inverted": "inverted() ? \"\" : null", "style.--frame-slider-start-percent": "rangeStartPercent() + \"%\"", "style.--frame-slider-end-percent": "rangeEndPercent() + \"%\"" }, classAttribute: "frame-slider" }, providers: [provideDsValueAccessor$1(FrSlider)], exportAs: ["frSlider"], usesInheritance: true, ngImport: i0, template: `
-    <span class="frame-slider__track">
-      <span class="frame-slider__range"></span>
-    </span>
-
-    @for (thumb of values(); track $index) {
-      <input
-        class="frame-slider__native"
-        type="range"
-        [attr.aria-label]="thumbLabel($index)"
-        [attr.aria-valuetext]="valueText(thumb)"
-        [disabled]="disabled()"
-        [min]="min()"
-        [max]="max()"
-        [step]="step()"
-        [value]="thumb"
-        (blur)="markTouched()"
-        (input)="handleNativeInput($index, $any($event.target).value)"
-      />
-      <span
-        class="frame-slider__thumb"
-        [attr.data-active]="activeThumb() === $index ? '' : null"
-        [style.--frame-slider-thumb-percent]="percentForValue(thumb) + '%'"
-      ></span>
-    }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrSlider, isStandalone: true, selector: "frame-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, minStepsBetweenThumbs: { classPropertyName: "minStepsBetweenThumbs", publicName: "minStepsBetweenThumbs", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", 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 }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, formatValue: { classPropertyName: "formatValue", publicName: "formatValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { listeners: { "pointerdown": "handlePointerDown($event)" }, properties: { "attr.data-orientation": "orientation()", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-invalid": "invalid() ? \"\" : null", "attr.data-inverted": "inverted() ? \"\" : null", "style.--frame-slider-start-percent": "rangeStartPercent() + \"%\"", "style.--frame-slider-end-percent": "rangeEndPercent() + \"%\"" }, classAttribute: "frame-slider" }, providers: [provideDsValueAccessor$1(FrSlider)], exportAs: ["frSlider"], usesInheritance: true, ngImport: i0, template: `
+    <span class="frame-slider__track">
+      <span class="frame-slider__range"></span>
+    </span>
+
+    @for (thumb of values(); track $index) {
+      <input
+        class="frame-slider__native"
+        type="range"
+        [attr.aria-label]="thumbLabel($index)"
+        [attr.aria-valuetext]="valueText(thumb)"
+        [disabled]="disabled()"
+        [min]="min()"
+        [max]="max()"
+        [step]="step()"
+        [value]="thumb"
+        (blur)="markTouched()"
+        (input)="handleNativeInput($index, $any($event.target).value)"
+      />
+      <span
+        class="frame-slider__thumb"
+        [attr.data-active]="activeThumb() === $index ? '' : null"
+        [style.--frame-slider-thumb-percent]="percentForValue(thumb) + '%'"
+      ></span>
+    }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSlider, decorators: [{
@@ -8905,37 +9101,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '[style.--frame-slider-end-percent]': 'rangeEndPercent() + "%"',
                         '(pointerdown)': 'handlePointerDown($event)',
                     },
-                    template: `
-    <span class="frame-slider__track">
-      <span class="frame-slider__range"></span>
-    </span>
-
-    @for (thumb of values(); track $index) {
-      <input
-        class="frame-slider__native"
-        type="range"
-        [attr.aria-label]="thumbLabel($index)"
-        [attr.aria-valuetext]="valueText(thumb)"
-        [disabled]="disabled()"
-        [min]="min()"
-        [max]="max()"
-        [step]="step()"
-        [value]="thumb"
-        (blur)="markTouched()"
-        (input)="handleNativeInput($index, $any($event.target).value)"
-      />
-      <span
-        class="frame-slider__thumb"
-        [attr.data-active]="activeThumb() === $index ? '' : null"
-        [style.--frame-slider-thumb-percent]="percentForValue(thumb) + '%'"
-      ></span>
-    }
+                    template: `
+    <span class="frame-slider__track">
+      <span class="frame-slider__range"></span>
+    </span>
+
+    @for (thumb of values(); track $index) {
+      <input
+        class="frame-slider__native"
+        type="range"
+        [attr.aria-label]="thumbLabel($index)"
+        [attr.aria-valuetext]="valueText(thumb)"
+        [disabled]="disabled()"
+        [min]="min()"
+        [max]="max()"
+        [step]="step()"
+        [value]="thumb"
+        (blur)="markTouched()"
+        (input)="handleNativeInput($index, $any($event.target).value)"
+      />
+      <span
+        class="frame-slider__thumb"
+        [attr.data-active]="activeThumb() === $index ? '' : null"
+        [style.--frame-slider-thumb-percent]="percentForValue(thumb) + '%'"
+      ></span>
+    }
   `,
                 }]
         }], ctorParameters: () => [], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], minStepsBetweenThumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "minStepsBetweenThumbs", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], inverted: [{ type: i0.Input, args: [{ isSignal: true, alias: "inverted", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], formatValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatValue", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
-function clamp$1(value, min, max) {
-    return Math.min(Math.max(value, min), max);
-}
 
 const FR_SEPARATOR_ORIENTATIONS = ['horizontal', 'vertical'];
 function coerceSeparatorOrientation(value) {
@@ -9038,18 +9231,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }], propDecorators: { result: [{ type: i0.Input, args: [{ isSignal: true, alias: "frSheetClose", required: false }] }] } });
 class FrSheetPanel {
+    dialogRef = inject(DialogRef, { optional: true });
     scrollable = input(false, { ...(ngDevMode ? { debugName: "scrollable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     showCloseButton = input(true, { ...(ngDevMode ? { debugName: "showCloseButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     side = input('right', { ...(ngDevMode ? { debugName: "side" } : /* istanbul ignore next */ {}), transform: coerceSheetSide });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSheetPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrSheetPanel, isStandalone: true, selector: "[frSheetPanel], frame-sheet-panel", inputs: { scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-scrollable": "scrollable() ? \"\" : null", "attr.data-side": "side()" }, classAttribute: "frame-sheet__panel" }, ngImport: i0, template: `
-    <ng-content />
-    @if (showCloseButton()) {
-      <button class="frame-sheet__close" frSheetClose type="button" aria-label="Close sheet">
-        <span aria-hidden="true">×</span>
-      </button>
+    close() {
+        this.dialogRef?.close();
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: FrSheetClose, selector: "[frSheetClose]", inputs: ["frSheetClose"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSheetPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrSheetPanel, isStandalone: true, selector: "[frSheetPanel], frame-sheet-panel", inputs: { scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-scrollable": "scrollable() ? \"\" : null", "attr.data-side": "side()" }, classAttribute: "frame-sheet__panel" }, ngImport: i0, template: `
+    <ng-content />
+    @if (showCloseButton()) {
+      <button class="frame-sheet__close" type="button" aria-label="Close sheet" (click)="close()">
+        <span aria-hidden="true">×</span>
+      </button>
+    }
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSheetPanel, decorators: [{
             type: Component,
@@ -9060,15 +9257,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '[attr.data-scrollable]': 'scrollable() ? "" : null',
                         '[attr.data-side]': 'side()',
                     },
-                    template: `
-    <ng-content />
-    @if (showCloseButton()) {
-      <button class="frame-sheet__close" frSheetClose type="button" aria-label="Close sheet">
-        <span aria-hidden="true">×</span>
-      </button>
-    }
+                    template: `
+    <ng-content />
+    @if (showCloseButton()) {
+      <button class="frame-sheet__close" type="button" aria-label="Close sheet" (click)="close()">
+        <span aria-hidden="true">×</span>
+      </button>
+    }
   `,
-                    imports: [FrSheetClose],
                 }]
         }], propDecorators: { scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }] } });
 class FrSheetHeader {
@@ -9431,6 +9627,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);
@@ -9526,20 +9729,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '[attr.data-mobile-open]': 'openMobile()',
                         '[attr.data-mobile]': 'isMobile() ? "" : null',
                         '[attr.data-resizing]': 'resizing() ? "" : null',
+                        '(document:keydown)': 'handleKeydown($event)',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], openInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }], openMobileChange: [{ type: i0.Output, args: ["openMobileChange"] }], shortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortcut", required: false }] }], keyboardShortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardShortcut", required: false }] }], handleKeydown: [{
-                type: HostListener,
-                args: ['document:keydown', ['$event']]
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], openInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }], openMobileChange: [{ type: i0.Output, args: ["openMobileChange"] }], shortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortcut", required: false }] }], keyboardShortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardShortcut", required: false }] }] } });
 class FrSidebar {
     elementRef = inject(ElementRef);
     provider = inject(FR_SIDEBAR_PROVIDER, { optional: true });
     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 });
+    resizable = input(true, { ...(ngDevMode ? { debugName: "resizable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     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 }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-side": "side()", "attr.data-variant": "variant()", "attr.data-collapsible": "collapsible()", "attr.data-resizable": "resizable() ? \"\" : null", "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,
@@ -9550,11 +9754,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '[attr.data-side]': 'side()',
                         '[attr.data-variant]': 'variant()',
                         '[attr.data-collapsible]': 'collapsible()',
+                        '[attr.data-resizable]': 'resizable() ? "" : null',
                         '[attr.data-state]': 'provider?.state() ?? "expanded"',
                         '[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 }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", 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,32 +9791,42 @@ class FrSidebarRail {
     suppressClick = false;
     frameId = -1;
     pendingWidth = 0;
+    resizeMinSize = 192;
+    resizeMaxSize = 384;
     provider = inject(FR_SIDEBAR_PROVIDER, { optional: true });
     toggle() {
         if (this.suppressClick) {
             return;
         }
+        if (this.sidebar?.collapsible() === 'icon') {
+            return;
+        }
         this.provider?.toggleSidebar();
     }
     startResize(event) {
-        if (!this.sidebar || !this.provider || this.provider.isMobile()) {
+        if (!this.sidebar || !this.provider || this.provider.isMobile() || !this.sidebar.resizable()) {
             return;
         }
         this.startX = event.clientX;
         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);
         const up = () => {
             this.document.removeEventListener('pointermove', move);
             this.document.removeEventListener('pointerup', up);
-            this.flushResize();
+            if (this.dragging) {
+                this.flushResize();
+            }
             this.provider?.setResizing(false);
             this.suppressClick = this.dragging;
             this.dragging = false;
             this.pendingWidth = 0;
+            this.resizeMinSize = 192;
+            this.resizeMaxSize = 384;
             setTimeout(() => {
                 this.suppressClick = false;
             });
@@ -9625,9 +9840,12 @@ 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 = clampNumber(this.startWidth + delta * direction, this.resizeMinSize, this.resizeMaxSize);
         if (Math.abs(delta) > 3) {
             this.dragging = true;
+            if (this.sidebar.collapsible() === 'icon' && !this.provider.open()) {
+                this.provider.setOpen(true);
+            }
         }
         this.pendingWidth = nextWidth;
         if (this.frameId !== -1) {
@@ -9647,6 +9865,32 @@ class FrSidebarRail {
             this.provider?.setSidebarWidth(this.pendingWidth);
         }
     }
+    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 });
 }
@@ -10036,8 +10280,8 @@ function calculateVirtualRange(options) {
     const overscan = Math.max(Math.trunc(options.overscan), 0);
     const visibleCount = Math.max(Math.ceil(viewportSize / itemSize), 1);
     const rawStart = Math.floor(Math.max(options.scrollTop, 0) / itemSize) - overscan;
-    const start = clamp(rawStart, 0, totalCount);
-    const end = clamp(start + visibleCount + overscan * 2, start, totalCount);
+    const start = clampNumber(rawStart, 0, totalCount);
+    const end = clampNumber(start + visibleCount + overscan * 2, start, totalCount);
     return {
         start,
         end,
@@ -10049,31 +10293,28 @@ function calculateScrollOffsetForIndex(index, alignment, itemSize, viewportSize,
     const normalizedItemSize = Math.max(itemSize, 1);
     const normalizedViewportSize = Math.max(viewportSize, 0);
     const maxScrollTop = Math.max(totalCount * normalizedItemSize - normalizedViewportSize, 0);
-    const clampedIndex = clamp(index, 0, Math.max(totalCount - 1, 0));
+    const clampedIndex = clampNumber(index, 0, Math.max(totalCount - 1, 0));
     const itemStart = clampedIndex * normalizedItemSize;
     const itemEnd = itemStart + normalizedItemSize;
     switch (alignment) {
         case 'start':
-            return clamp(itemStart, 0, maxScrollTop);
+            return clampNumber(itemStart, 0, maxScrollTop);
         case 'center':
-            return clamp(itemStart - (normalizedViewportSize - normalizedItemSize) / 2, 0, maxScrollTop);
+            return clampNumber(itemStart - (normalizedViewportSize - normalizedItemSize) / 2, 0, maxScrollTop);
         case 'end':
-            return clamp(itemEnd - normalizedViewportSize, 0, maxScrollTop);
+            return clampNumber(itemEnd - normalizedViewportSize, 0, maxScrollTop);
         case 'nearest':
         case 'auto':
         default:
             if (itemStart < currentScrollTop) {
-                return clamp(itemStart, 0, maxScrollTop);
+                return clampNumber(itemStart, 0, maxScrollTop);
             }
             if (itemEnd > currentScrollTop + normalizedViewportSize) {
-                return clamp(itemEnd - normalizedViewportSize, 0, maxScrollTop);
+                return clampNumber(itemEnd - normalizedViewportSize, 0, maxScrollTop);
             }
-            return clamp(currentScrollTop, 0, maxScrollTop);
+            return clampNumber(currentScrollTop, 0, maxScrollTop);
     }
 }
-function clamp(value, min, max) {
-    return Math.min(Math.max(value, min), max);
-}
 
 class FrVirtualViewport {
     destroyRef = inject(DestroyRef);
@@ -10304,5 +10545,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_MODAL_REF, 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, FrModalRef, 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