@frame-ui-ng/components 0.3.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, viewChild, 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');
@@ -2287,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 });
@@ -2454,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;
@@ -2465,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;
         }
@@ -2479,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: [{
@@ -2520,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);
@@ -4490,7 +4488,7 @@ function mergeTime(date, timeSource) {
 }
 
 const DEFAULT_SIDE_OFFSET = 4;
-const MIN_SUBMENU_SIDE_OFFSET = 16;
+const MIN_SUBMENU_SIDE_OFFSET = 8;
 function defaultPositions(isSubmenu) {
     return buildConnectedPositions({
         align: 'start',
@@ -5938,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 });
@@ -5955,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);
@@ -6006,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();
@@ -6038,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);
     }
@@ -6057,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: [{
@@ -6110,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 });
@@ -6160,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: [{
@@ -6181,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 }] }] } });
@@ -6216,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'];
@@ -6835,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));
@@ -6971,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();
@@ -7004,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 });
@@ -7022,6 +7020,7 @@ function hasShellOptions$1(config) {
         config.bodyInputs,
         config.description,
         config.footerActions,
+        config.inputs,
         config.scrollable,
         config.showCloseButton,
         config.size,
@@ -7030,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
@@ -7041,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-';
@@ -7363,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);
@@ -7378,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);
@@ -7518,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: [{
@@ -7541,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 }] }] } });
@@ -7570,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: [{
@@ -7593,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: [{
@@ -7619,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 }] }] } });
@@ -8036,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(() => {
@@ -8166,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}`;
@@ -8212,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);
@@ -8302,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();
@@ -8362,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');
@@ -8392,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 });
 }
@@ -8445,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 {
@@ -8827,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));
@@ -8966,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) {
@@ -8989,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) => {
@@ -9002,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: [{
@@ -9046,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) {
@@ -9179,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,
@@ -9201,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 {
@@ -9674,12 +9729,10 @@ 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 });
@@ -9688,8 +9741,9 @@ class FrSidebar {
     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 }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-side": "side()", "attr.data-variant": "variant()", "attr.data-collapsible": "collapsible()", "attr.data-state": "provider?.state() ?? \"expanded\"", "attr.data-mobile-open": "provider?.openMobile() ?? false" }, classAttribute: "frame-sidebar" }, ngImport: i0 });
+    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,
@@ -9700,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 }] }], minSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSize", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", 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' });
@@ -9743,10 +9798,13 @@ class FrSidebarRail {
         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;
@@ -9760,7 +9818,9 @@ class FrSidebarRail {
         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;
@@ -9780,9 +9840,12 @@ class FrSidebarRail {
         }
         const delta = event.clientX - this.startX;
         const direction = this.sidebar.side() === 'right' ? -1 : 1;
-        const nextWidth = this.clampWidth(this.startWidth + delta * direction);
+        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) {
@@ -9802,9 +9865,6 @@ class FrSidebarRail {
             this.provider?.setSidebarWidth(this.pendingWidth);
         }
     }
-    clampWidth(width) {
-        return Math.min(Math.max(width, this.resizeMinSize), this.resizeMaxSize);
-    }
     captureResizeBounds() {
         if (!this.sidebar) {
             return;
@@ -10220,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,
@@ -10233,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);
@@ -10488,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_GROUP_ADDON_VARIANTS, FR_INPUT_OTP_PATTERN_DIGITS, FR_INPUT_OTP_PATTERN_DIGITS_AND_CHARS, FR_ITEM_MEDIA_VARIANTS, FR_ITEM_SIZES, FR_ITEM_VARIANTS, FR_MENUBAR_PARENT, FR_MODAL_DATA, FR_NAVIGATION_MENU_PARENT, FR_POPOVER_ALIGNMENTS, FR_POPOVER_SIDES, FR_RADIO_GROUP_ORIENTATIONS, FR_RADIO_GROUP_VARIANTS, FR_RESIZABLE_ORIENTATIONS, FR_SELECT_ICON_POSITIONS, FR_SELECT_INDICATOR_POSITIONS, FR_SELECT_POSITIONS, FR_SEPARATOR_ORIENTATIONS, FR_SHEET_DATA, FR_SHEET_SIDES, FR_SIDEBAR_COLLAPSIBLES, FR_SIDEBAR_MENU_BUTTON_SIZES, FR_SIDEBAR_MENU_BUTTON_VARIANTS, FR_SIDEBAR_PROVIDER, FR_SIDEBAR_SIDES, FR_SIDEBAR_VARIANTS, FR_SLIDER_ORIENTATIONS, FR_SWITCH_SIZES, FrAccordion, FrAccordionContent, FrAccordionIcon, FrAccordionItem, FrAccordionTrigger, FrAlert, FrAlertDescription, FrAlertIcon, FrAlertTitle, FrAvatar, FrAvatarBadge, FrAvatarFallback, FrAvatarGroup, FrAvatarGroupCount, FrAvatarIcon, FrAvatarImage, FrBadge, FrBadgeIcon, FrBadgeLabel, FrBadgeSpinner, FrBreadcrumb, FrBreadcrumbEllipsis, FrBreadcrumbItem, FrBreadcrumbLink, FrBreadcrumbList, FrBreadcrumbPage, FrBreadcrumbSeparator, FrButton, FrButtonGroup, FrButtonIcon, FrButtonLabel, FrButtonLoading, FrCalendar, FrCard, FrCardAction, FrCardContent, FrCardDescription, FrCardFooter, FrCardHeader, FrCardTitle, FrCarousel, FrCarouselContent, FrCarouselItem, FrCarouselNext, FrCarouselPrevious, FrCheckbox, FrCheckboxField, FrCheckboxLabel, FrCollapsible, FrCollapsibleContent, FrCollapsibleTrigger, FrCombobox, FrComboboxChip, FrComboboxChipRemove, FrComboboxChips, FrComboboxChipsInput, FrComboboxClear, FrComboboxCollection, FrComboboxContent, FrComboboxEmpty, FrComboboxError, FrComboboxGroup, FrComboboxInput, FrComboboxItem, FrComboboxItemIndicator, FrComboboxLabel, FrComboboxList, FrComboboxPanel, FrComboboxRootLookup, FrComboboxSeparator, FrComboboxTrigger, FrComboboxValueList, FrCommand, FrCommandDialog, FrCommandDialogTrigger, FrCommandEmpty, FrCommandFooter, FrCommandGroup, FrCommandGroupHeading, FrCommandInput, FrCommandItem, FrCommandItemIcon, FrCommandList, FrCommandSeparator, FrCommandService, FrCommandShortcut, FrContextMenu, FrContextMenuCheckboxItem, FrContextMenuContent, FrContextMenuItem, FrContextMenuItemIndicator, FrContextMenuLabel, FrContextMenuPanel, FrContextMenuRadioGroup, FrContextMenuRadioItem, FrContextMenuSeparator, FrContextMenuShortcut, FrContextMenuSub, FrContextMenuSubTrigger, FrContextMenuTrigger, FrControlValueAccessor, FrDatePicker, FrDropdownMenu, FrDropdownMenuCheckboxItem, FrDropdownMenuContent, FrDropdownMenuItem, FrDropdownMenuItemIndicator, FrDropdownMenuLabel, FrDropdownMenuPanel, FrDropdownMenuRadioGroup, FrDropdownMenuRadioItem, FrDropdownMenuSeparator, FrDropdownMenuShortcut, FrDropdownMenuSub, FrDropdownMenuSubTrigger, FrDropdownMenuTree, FrDropdownMenuTrigger, FrEmpty, FrEmptyContent, FrEmptyDescription, FrEmptyHeader, FrEmptyMedia, FrEmptyTitle, FrField, FrFieldContent, FrFieldDescription, FrFieldError, FrFieldGroup, FrFieldLabel, FrFieldLegend, FrFieldSeparator, FrFieldSet, FrHoverCardRoot as FrHoverCard, FrHoverCardContent, FrHoverCardPanel, FrHoverCardTrigger, FrIconButton, FrInput, FrInputBadge, FrInputControl, FrInputDescription, FrInputError, FrInputField, FrInputFieldGroup, FrInputGroup, FrInputGroupAddon, FrInputGroupInput, FrInputGroupText, FrInputHeader, FrInputLabel, FrInputOtp, FrInputOtpGroup, FrInputOtpSeparator, FrInputOtpSlot, FrItem, FrItemActions, FrItemContent, FrItemDescription, FrItemFooter, FrItemGroup, FrItemHeader, FrItemMedia, FrItemSeparator, FrItemTitle, FrMenuBar, FrMenuBarCheckboxItem, FrMenuBarContent, FrMenuBarItem, FrMenuBarItemIndicator, FrMenuBarLabel, FrMenuBarMenu, FrMenuBarPanel, FrMenuBarRadioGroup, FrMenuBarRadioItem, FrMenuBarSeparator, FrMenuBarShortcut, FrMenuBarSub, FrMenuBarSubTrigger, FrMenuBarTrigger, FrModalBody, FrModalClose, FrModalContent, FrModalDescription, FrModalFooter, FrModalHeader, FrModalPanel, FrModalService, FrModalShell, FrModalTitle, FrModalTrigger, FrNavigationLinkSeparator, FrNavigationMenu, FrNavigationMenuContent, FrNavigationMenuFeature, FrNavigationMenuGrid, FrNavigationMenuIndicator, FrNavigationMenuItem, FrNavigationMenuLink, FrNavigationMenuLinkDescription, FrNavigationMenuLinkTitle, FrNavigationMenuList, FrNavigationMenuPanel, FrNavigationMenuTrigger, FrNavigationMenuViewport, FrPagination, FrPaginationContent, FrPaginationEllipsis, FrPaginationIcon, FrPaginationItem, FrPaginationLink, FrPaginationNext, FrPaginationPrevious, FrPopoverRoot as FrPopover, FrPopoverBody, FrPopoverClose, FrPopoverContent, FrPopoverDescription, FrPopoverFooter, FrPopoverHeader, FrPopoverPanel, FrPopoverTitle, FrPopoverTrigger, FrProgress, FrProgressIndicator, FrRadioGroup, FrRadioGroupCard, FrRadioGroupCardMeta, FrRadioGroupField, FrRadioGroupItem, FrResizableHandle, FrResizablePanel, FrResizablePanelGroup, FrSelect, FrSelectContent, FrSelectError, FrSelectGroup, FrSelectIcon, FrSelectItem, FrSelectItemIndicator, FrSelectLabel, FrSelectPanel, FrSelectSeparator, FrSelectValue, FrSeparator, FrSheetBody, FrSheetClose, FrSheetContent, FrSheetDescription, FrSheetFooter, FrSheetHeader, FrSheetPanel, FrSheetService, FrSheetShell, FrSheetTitle, FrSheetTrigger, FrSidebar, FrSidebarContent, FrSidebarFooter, FrSidebarGroup, FrSidebarGroupAction, FrSidebarGroupContent, FrSidebarGroupLabel, FrSidebarHeader, FrSidebarInset, FrSidebarMenu, FrSidebarMenuAction, FrSidebarMenuBadge, FrSidebarMenuButton, FrSidebarMenuItem, FrSidebarMenuSkeleton, FrSidebarMenuSub, FrSidebarMenuSubButton, FrSidebarMenuSubItem, FrSidebarProvider, FrSidebarRail, FrSidebarTrigger, FrSlider, FrSwitch, FrSwitchContent, FrSwitchDescription, FrSwitchError, FrSwitchField, FrSwitchLabel, FrTextarea, FrVirtualContent, FrVirtualFor, FrVirtualItem, FrVirtualItemMeta, FrVirtualList, FrVirtualPanel, FrVirtualViewport, buildConnectedPositions, calculateScrollOffsetForIndex, calculateVirtualRange, defaultPositions, provideDsValueAccessor };
+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