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

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

@@ -1,16 +1,17 @@
 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, viewChild, model, afterNextRender, ViewContainerRef, Injectable, Injector, numberAttribute } from '@angular/core';
+import { InjectionToken, inject, ElementRef, Directive, input, booleanAttribute, computed, output, linkedSignal, signal, Component, contentChild, forwardRef, ChangeDetectionStrategy, DestroyRef, TemplateRef, viewChild, model, afterNextRender, Renderer2, ViewContainerRef, Injectable, PLATFORM_ID, numberAttribute, Injector } 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';
+import { NgTemplateOutlet, isPlatformBrowser, NgClass, NgComponentOutlet, DOCUMENT } from '@angular/common';
 import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 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 { CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
+import { CdkOverlayOrigin, CdkConnectedOverlay, Overlay } 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 { ComponentPortal } from '@angular/cdk/portal';
 import * as i1$2 from '@angular/cdk/menu';
 import { CdkMenu, CdkTargetMenuAim, CdkMenuItem, CdkMenuItemCheckbox, CdkMenuGroup, CdkMenuItemRadio, CdkMenuTrigger, CdkContextMenuTrigger } from '@angular/cdk/menu';
 import * as i1$3 from '@frame-ui-ng/components/dropdown-menu';
@@ -22,23 +23,29 @@ import { clampNumber, coerceNumber } from '@frame-ui-ng/components/utils';
 const ACCORDION_ROOT = new InjectionToken('FrAccordion');
 const ACCORDION_ITEM = new InjectionToken('FrAccordionItem');
 
+/** Content slot for accordion. */
 class FrAccordionContent {
     host = inject(ElementRef);
     item = inject(ACCORDION_ITEM);
     initialized = false;
+    lastOpen = false;
     rafIds = [];
-    constructor() {
-        effect((onCleanup) => {
-            const open = this.item.open();
-            this.cancelAnimationFrame();
-            if (!this.initialized) {
-                this.applyStaticState(open);
-                this.initialized = true;
-                return;
-            }
-            this.animate(open);
-            onCleanup(() => this.cancelAnimationFrame());
-        });
+    ngAfterViewInit() {
+        this.lastOpen = this.item.open();
+        this.applyStaticState(this.lastOpen);
+        this.initialized = true;
+    }
+    ngDoCheck() {
+        const open = this.item.open();
+        if (!this.initialized || open === this.lastOpen) {
+            return;
+        }
+        this.cancelAnimationFrame();
+        this.lastOpen = open;
+        this.animate(open);
+    }
+    ngOnDestroy() {
+        this.cancelAnimationFrame();
     }
     onTransitionEnd(event) {
         if (event.target !== this.host.nativeElement || event.propertyName !== 'height') {
@@ -115,9 +122,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         'role': 'region',
                     },
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 let accordionItemId = 0;
+/** Item slot for accordion. */
 class FrAccordionItem {
     root = inject(ACCORDION_ROOT);
     itemId = ++accordionItemId;
@@ -150,18 +158,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
+/** Accordion component primitive. */
 class FrAccordion {
     type = input('single', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
     border = input(true, { ...(ngDevMode ? { debugName: "border" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     collapsible = input(false, { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     defaultValue = input(null, ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
     valueChange = output();
-    openItems = signal([], ...(ngDevMode ? [{ debugName: "openItems" }] : /* istanbul ignore next */ []));
-    constructor() {
-        effect(() => {
-            this.openItems.set(this.normalizeValues(this.defaultValue(), this.type()));
-        });
-    }
+    openItems = linkedSignal(() => this.normalizeValues(this.defaultValue(), this.type()), ...(ngDevMode ? [{ debugName: "openItems" }] : /* istanbul ignore next */ []));
     isItemOpen(value) {
         return this.openItems().includes(value);
     }
@@ -217,8 +221,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '[attr.data-type]': 'type()',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
+/** Trigger control for accordion. */
 class FrAccordionTrigger {
     item = inject(ACCORDION_ITEM);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrAccordionTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -242,6 +247,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Icon slot for accordion. */
 class FrAccordionIcon {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrAccordionIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrAccordionIcon, isStandalone: true, selector: "[frAccordionIcon]", host: { attributes: { "aria-hidden": "true" }, classAttribute: "frame-accordion__icon" }, ngImport: i0 });
@@ -267,6 +273,7 @@ const FR_ALERT_VARIANTS = [
     'danger',
     'info',
 ];
+/** Alert component primitive. */
 class FrAlert {
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrAlert, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -283,6 +290,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+/** Icon slot for alert. */
 class FrAlertIcon {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrAlertIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrAlertIcon, isStandalone: true, selector: "[frAlertIcon]", host: { attributes: { "aria-hidden": "true" }, classAttribute: "frame-alert__icon" }, ngImport: i0 });
@@ -297,6 +305,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Title slot for alert. */
 class FrAlertTitle {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrAlertTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrAlertTitle, isStandalone: true, selector: "[frAlertTitle]", host: { classAttribute: "frame-alert__title" }, ngImport: i0 });
@@ -310,6 +319,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Description slot for alert. */
 class FrAlertDescription {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrAlertDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrAlertDescription, isStandalone: true, selector: "[frAlertDescription]", host: { classAttribute: "frame-alert__description" }, ngImport: i0 });
@@ -324,6 +334,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }] });
 
+/** Badge slot for avatar. */
 class FrAvatarBadge {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrAvatarBadge, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrAvatarBadge, isStandalone: true, selector: "[frAvatarBadge]", host: { classAttribute: "frame-avatar__badge" }, ngImport: i0 });
@@ -341,6 +352,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 
 const AVATAR_ROOT = new InjectionToken('FrAvatar');
 
+/** Avatar fallback component primitive. */
 class FrAvatarFallback {
     root = inject(AVATAR_ROOT);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrAvatarFallback, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -359,6 +371,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }] });
 
+/** Group slot for avatar. */
 class FrAvatarGroup {
     expandOnHover = input(false, { ...(ngDevMode ? { debugName: "expandOnHover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -377,6 +390,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { expandOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandOnHover", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+/** Avatar group count component primitive. */
 class FrAvatarGroupCount {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrAvatarGroupCount, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrAvatarGroupCount, isStandalone: true, selector: "[frAvatarGroupCount]", host: { classAttribute: "frame-avatar-group__count" }, ngImport: i0 });
@@ -392,6 +406,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }] });
 
+/** Icon slot for avatar. */
 class FrAvatarIcon {
     root = inject(AVATAR_ROOT);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrAvatarIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -410,6 +425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }] });
 
+/** Avatar image component primitive. */
 class FrAvatarImage {
     host = inject(ElementRef);
     root = inject(AVATAR_ROOT);
@@ -445,6 +461,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }] });
 
+/** Avatar component primitive. */
 class FrAvatar {
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     status = signal('idle', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
@@ -481,6 +498,7 @@ const FR_BADGE_VARIANTS = [
     'link',
 ];
 const FR_BADGE_ICON_POSITIONS = ['inline-start', 'inline-end'];
+/** Inline badge host with variant styling. */
 class FrBadge {
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrBadge, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -496,6 +514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+/** Icon slot for badge. */
 class FrBadgeIcon {
     position = input('inline-start', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrBadgeIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -512,6 +531,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
+/** Label slot for badge. */
 class FrBadgeLabel {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrBadgeLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrBadgeLabel, isStandalone: true, selector: "[frBadgeLabel]", host: { classAttribute: "frame-badge__label" }, ngImport: i0 });
@@ -525,6 +545,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Loading indicator slot for badge. */
 class FrBadgeSpinner {
     position = input('inline-start', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrBadgeSpinner, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -550,6 +571,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
 
+/** Breadcrumb navigation landmark. */
 class FrBreadcrumb {
     ariaLabel = input('breadcrumb', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrBreadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -565,6 +587,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }] } });
+/** List slot for breadcrumb. */
 class FrBreadcrumbList {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrBreadcrumbList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrBreadcrumbList, isStandalone: true, selector: "ol[frBreadcrumbList], ul[frBreadcrumbList], [frBreadcrumbList]", host: { classAttribute: "frame-breadcrumb__list" }, ngImport: i0 });
@@ -578,6 +601,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Item slot for breadcrumb. */
 class FrBreadcrumbItem {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrBreadcrumbItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrBreadcrumbItem, isStandalone: true, selector: "li[frBreadcrumbItem], [frBreadcrumbItem]", host: { classAttribute: "frame-breadcrumb__item" }, ngImport: i0 });
@@ -591,6 +615,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Navigable link inside a breadcrumb item. */
 class FrBreadcrumbLink {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrBreadcrumbLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrBreadcrumbLink, isStandalone: true, selector: "a[frBreadcrumbLink], [frBreadcrumbLink]", host: { classAttribute: "frame-breadcrumb__link" }, ngImport: i0 });
@@ -604,6 +629,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Page slot for breadcrumb. */
 class FrBreadcrumbPage {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrBreadcrumbPage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrBreadcrumbPage, isStandalone: true, selector: "[frBreadcrumbPage]", host: { attributes: { "aria-current": "page" }, classAttribute: "frame-breadcrumb__page" }, ngImport: i0 });
@@ -618,6 +644,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Separator slot for breadcrumb. */
 class FrBreadcrumbSeparator {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrBreadcrumbSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrBreadcrumbSeparator, isStandalone: true, selector: "[frBreadcrumbSeparator]", host: { attributes: { "aria-hidden": "true", "role": "presentation" }, classAttribute: "frame-breadcrumb__separator" }, ngImport: i0 });
@@ -633,12 +660,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Ellipsis slot for breadcrumb. */
 class FrBreadcrumbEllipsis {
     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: FrBreadcrumbEllipsis, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: FrBreadcrumbEllipsis, isStandalone: true, selector: "[frBreadcrumbEllipsis], frame-breadcrumb-ellipsis", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, classAttribute: "frame-breadcrumb__ellipsis" }, ngImport: i0, template: `
-    <span aria-hidden="true">...</span>
-    <span class="frame-breadcrumb__sr-only">{{ label() }}</span>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: FrBreadcrumbEllipsis, isStandalone: true, selector: "[frBreadcrumbEllipsis], frame-breadcrumb-ellipsis", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, classAttribute: "frame-breadcrumb__ellipsis" }, ngImport: i0, template: `
+    <span aria-hidden="true">...</span>
+    <span class="frame-breadcrumb__sr-only">{{ label() }}</span>
   `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrBreadcrumbEllipsis, decorators: [{
@@ -649,9 +677,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         class: 'frame-breadcrumb__ellipsis',
                         'role': 'presentation',
                     },
-                    template: `
-    <span aria-hidden="true">...</span>
-    <span class="frame-breadcrumb__sr-only">{{ label() }}</span>
+                    template: `
+    <span aria-hidden="true">...</span>
+    <span class="frame-breadcrumb__sr-only">{{ label() }}</span>
   `,
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
@@ -664,6 +692,7 @@ const FR_BUTTON_APPEARANCES = [
 const FR_BUTTON_LOADING_DISPLAYS = ['inline', 'replace'];
 const FR_BUTTON_RADII = ['full', 'lg', 'md', 'none', 'sm'];
 const FR_BUTTON_SIZES = ['sm', 'md', 'lg'];
+/** Button host with FrameUI size and appearance variants. */
 class FrButton {
     loadingIndicator = contentChild(FrButtonLoading, ...(ngDevMode ? [{ debugName: "loadingIndicator" }] : /* istanbul ignore next */ []));
     spinnerIndicator = contentChild(FrSpinner, ...(ngDevMode ? [{ debugName: "spinnerIndicator" }] : /* istanbul ignore next */ []));
@@ -699,6 +728,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { loadingIndicator: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FrButtonLoading), { isSignal: true }] }], spinnerIndicator: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FrSpinner), { isSignal: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingDisplay", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+/** Icon-only button host with square sizing. */
 class FrIconButton {
     ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrIconButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -721,6 +751,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }] } });
+/** Icon slot for button. */
 class FrButtonIcon {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrButtonIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrButtonIcon, isStandalone: true, selector: "[frButtonIcon]", host: { attributes: { "aria-hidden": "true" }, classAttribute: "frame-button__icon" }, ngImport: i0 });
@@ -735,6 +766,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Label slot for button. */
 class FrButtonLabel {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrButtonLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrButtonLabel, isStandalone: true, selector: "[frButtonLabel]", host: { classAttribute: "frame-button__label" }, ngImport: i0 });
@@ -748,6 +780,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Loading indicator slot for button. */
 class FrButtonLoading {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrButtonLoading, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrButtonLoading, isStandalone: true, selector: "[frButtonLoading]", host: { attributes: { "aria-hidden": "true" }, classAttribute: "frame-button__loading" }, ngImport: i0 });
@@ -764,6 +797,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         }] });
 
 const FR_BUTTON_GROUP_ORIENTATIONS = ['horizontal', 'vertical'];
+/** Groups related buttons with shared orientation. */
 class FrButtonGroup {
     orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrButtonGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -786,6 +820,7 @@ const VALUE_ACCESSOR = {
     useExisting: forwardRef(() => FrCalendar),
     multi: true,
 };
+/** Calendar control for single-date and range selection. */
 class FrCalendar {
     mode = input('single', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
     captionLayout = input('label', ...(ngDevMode ? [{ debugName: "captionLayout" }] : /* istanbul ignore next */ []));
@@ -930,6 +965,7 @@ class FrCalendar {
     }
     resolveActiveDate() {
         const focused = this.focusedDate();
+        // Prefer the roving-focus target, then selection, then today, then first enabled day.
         if (focused && this.findDay(focused) && !this.isDayDisabled(focused)) {
             return cloneDate(focused);
         }
@@ -977,6 +1013,7 @@ class FrCalendar {
         if (this.focusDayElement(date)) {
             return;
         }
+        // Month navigation may render the target button one tick later.
         setTimeout(() => {
             this.focusDayElement(date);
         });
@@ -995,6 +1032,7 @@ class FrCalendar {
         const start = startOfMonth(monthDate);
         const gridStart = startOfWeek(start, this.firstDayOfWeek());
         const weeks = [];
+        // Always build a six-week grid so layout height stays stable across months.
         for (let week = 0; week < 6; week++) {
             const days = [];
             for (let dayIndex = 0; dayIndex < 7; dayIndex++) {
@@ -1427,23 +1465,16 @@ const FR_CARD_SPACING_VALUES = {
     lg: '1.25rem',
     xl: '2rem',
 };
+/** Card container with size and spacing controls. */
 class FrCard {
-    elementRef = inject(ElementRef);
-    renderer = inject(Renderer2);
     size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     spacing = input(null, ...(ngDevMode ? [{ debugName: "spacing" }] : /* istanbul ignore next */ []));
-    constructor() {
-        effect(() => {
-            const spacing = this.spacing();
-            if (!spacing) {
-                this.renderer.removeStyle(this.elementRef.nativeElement, '--frame-card-spacing', RendererStyleFlags2.DashCase);
-                return;
-            }
-            this.renderer.setStyle(this.elementRef.nativeElement, '--frame-card-spacing', FR_CARD_SPACING_VALUES[spacing], RendererStyleFlags2.DashCase);
-        });
-    }
+    spacingValue = computed(() => {
+        const spacing = this.spacing();
+        return spacing ? FR_CARD_SPACING_VALUES[spacing] : null;
+    }, ...(ngDevMode ? [{ debugName: "spacingValue" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCard, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrCard, isStandalone: true, selector: "[frCard], frame-card", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "attr.data-spacing": "spacing()" }, classAttribute: "frame-card" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrCard, isStandalone: true, selector: "[frCard], frame-card", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "attr.data-spacing": "spacing()", "style.--frame-card-spacing": "spacingValue()" }, classAttribute: "frame-card" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCard, decorators: [{
             type: Directive,
@@ -1453,9 +1484,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         class: 'frame-card',
                         '[attr.data-size]': 'size()',
                         '[attr.data-spacing]': 'spacing()',
+                        '[style.--frame-card-spacing]': 'spacingValue()',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }] } });
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }] } });
+/** Header slot for card. */
 class FrCardHeader {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCardHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrCardHeader, isStandalone: true, selector: "[frCardHeader]", host: { classAttribute: "frame-card__header" }, ngImport: i0 });
@@ -1469,6 +1502,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Title slot for card. */
 class FrCardTitle {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCardTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrCardTitle, isStandalone: true, selector: "[frCardTitle]", host: { classAttribute: "frame-card__title" }, ngImport: i0 });
@@ -1482,6 +1516,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Description slot for card. */
 class FrCardDescription {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCardDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrCardDescription, isStandalone: true, selector: "[frCardDescription]", host: { classAttribute: "frame-card__description" }, ngImport: i0 });
@@ -1495,6 +1530,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Action slot for card. */
 class FrCardAction {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCardAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrCardAction, isStandalone: true, selector: "[frCardAction]", host: { classAttribute: "frame-card__action" }, ngImport: i0 });
@@ -1508,6 +1544,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Content slot for card. */
 class FrCardContent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCardContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrCardContent, isStandalone: true, selector: "[frCardContent]", host: { classAttribute: "frame-card__content" }, ngImport: i0 });
@@ -1521,6 +1558,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Footer slot for card. */
 class FrCardFooter {
     align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCardFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -1541,6 +1579,7 @@ const FR_CAROUSEL_ORIENTATIONS = ['horizontal', 'vertical'];
 const FR_CAROUSEL_ALIGNS = ['start', 'center', 'end'];
 const FR_CAROUSEL_DIRECTIONS = ['ltr', 'rtl'];
 const FR_CAROUSEL = new InjectionToken('FrCarousel');
+/** Carousel root that coordinates scroll state and navigation. */
 class FrCarousel {
     destroyRef = inject(DestroyRef);
     listeners = new Map();
@@ -1552,6 +1591,8 @@ class FrCarousel {
     loopBoundaryClone = null;
     contentElement = null;
     itemElements = [];
+    lastLoop = false;
+    lastPlugins = null;
     align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
     loop = input(false, { ...(ngDevMode ? { debugName: "loop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
@@ -1575,27 +1616,20 @@ class FrCarousel {
         on: (event, callback) => this.on(event, callback),
     };
     constructor() {
-        effect(() => {
-            const plugins = this.plugins();
-            this.pluginCleanups.splice(0).forEach((cleanup) => cleanup());
-            for (const plugin of plugins) {
-                const cleanup = plugin(this.api);
-                if (typeof cleanup === 'function') {
-                    this.pluginCleanups.push(cleanup);
-                }
-            }
-        });
-        effect(() => {
-            if (!this.effectiveLoop()) {
-                this.removeLoopClone();
-            }
-        });
         this.destroyRef.onDestroy(() => {
             this.pluginCleanups.splice(0).forEach((cleanup) => cleanup());
             this.clearLoopResetTimer();
             this.clearScrollSyncTimer();
         });
     }
+    ngDoCheck() {
+        this.syncPlugins();
+        const loop = this.effectiveLoop();
+        if (!loop && loop !== this.lastLoop) {
+            this.removeLoopClone();
+        }
+        this.lastLoop = loop;
+    }
     ngAfterViewInit() {
         queueMicrotask(() => {
             this.recalculate();
@@ -1669,6 +1703,20 @@ class FrCarousel {
     emit(event) {
         this.listeners.get(event)?.forEach((callback) => callback());
     }
+    syncPlugins() {
+        const plugins = this.plugins();
+        if (plugins === this.lastPlugins) {
+            return;
+        }
+        this.pluginCleanups.splice(0).forEach((cleanup) => cleanup());
+        for (const plugin of plugins) {
+            const cleanup = plugin(this.api);
+            if (typeof cleanup === 'function') {
+                this.pluginCleanups.push(cleanup);
+            }
+        }
+        this.lastPlugins = plugins;
+    }
     recalculate() {
         this.snapCount.set(this.itemElements.length);
         this.emit('reInit');
@@ -1677,6 +1725,7 @@ class FrCarousel {
         if (this.isProgrammaticScroll || !this.contentElement || !this.itemElements.length) {
             return;
         }
+        // Derive the active item from the nearest snap point during user-driven scrolling.
         const current = this.getCurrentScrollOffset();
         const closest = this.itemElements.reduce((best, item, index) => {
             const targetOffset = this.getItemScrollOffset(item);
@@ -1748,6 +1797,7 @@ class FrCarousel {
         if (!this.contentElement || !this.effectiveLoop() || this.snapCount() < 2) {
             return;
         }
+        // Scroll to a temporary clone first, then jump back to the real edge item invisibly.
         const finalIndex = direction === 'next' ? 0 : this.snapCount() - 1;
         const cloneSource = direction === 'next' ? this.itemElements[0] : this.itemElements[this.snapCount() - 1];
         const resetTarget = this.itemElements[finalIndex];
@@ -1795,6 +1845,7 @@ class FrCarousel {
         if (!this.contentElement) {
             return;
         }
+        // `scrollend` is not universal, so keep a timeout fallback for the loop reset.
         let didReset = false;
         const reset = () => {
             if (didReset) {
@@ -1853,6 +1904,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     providers: [{ provide: FR_CAROUSEL, useExisting: FrCarousel }],
                 }]
         }], ctorParameters: () => [], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], opts: [{ type: i0.Input, args: [{ isSignal: true, alias: "opts", required: false }] }], plugins: [{ type: i0.Input, args: [{ isSignal: true, alias: "plugins", required: false }] }], apiReady: [{ type: i0.Output, args: ["apiReady"] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }] } });
+/** Content slot for carousel. */
 class FrCarouselContent {
     carousel = inject(FR_CAROUSEL);
     elementRef = inject(ElementRef);
@@ -1872,6 +1924,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Item slot for carousel. */
 class FrCarouselItem {
     carousel = inject(FR_CAROUSEL);
     destroyRef = inject(DestroyRef);
@@ -1894,6 +1947,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Previous-slide control for carousel. */
 class FrCarouselPrevious {
     carousel = inject(FR_CAROUSEL);
     label = input('Previous slide', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -1919,6 +1973,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+/** Next-slide control for carousel. */
 class FrCarouselNext {
     carousel = inject(FR_CAROUSEL);
     label = input('Next slide', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -1945,16 +2000,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
+/** Checkbox input styled as a FrameUI control. */
 class FrCheckbox {
-    elementRef = inject((ElementRef));
     indeterminate = input(false, { ...(ngDevMode ? { debugName: "indeterminate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    constructor() {
-        effect(() => {
-            this.elementRef.nativeElement.indeterminate = this.indeterminate();
-        });
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrCheckbox, isStandalone: true, selector: "input[type=checkbox][frCheckbox]", inputs: { indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-checked": "indeterminate() ? \"mixed\" : null", "attr.data-indeterminate": "indeterminate() ? \"\" : null" }, classAttribute: "frame-checkbox" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrCheckbox, isStandalone: true, selector: "input[type=checkbox][frCheckbox]", inputs: { indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-checked": "indeterminate() ? \"mixed\" : null", "attr.data-indeterminate": "indeterminate() ? \"\" : null", "indeterminate": "indeterminate()" }, classAttribute: "frame-checkbox" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCheckbox, decorators: [{
             type: Directive,
@@ -1964,9 +2014,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         class: 'frame-checkbox',
                         '[attr.aria-checked]': 'indeterminate() ? "mixed" : null',
                         '[attr.data-indeterminate]': 'indeterminate() ? "" : null',
+                        '[indeterminate]': 'indeterminate()',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }] } });
+        }], propDecorators: { indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }] } });
+/** Field slot for checkbox. */
 class FrCheckboxField {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCheckboxField, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrCheckboxField, isStandalone: true, selector: "label[frCheckboxField]", host: { classAttribute: "frame-checkbox-field" }, ngImport: i0 });
@@ -1980,6 +2032,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Label slot for checkbox. */
 class FrCheckboxLabel {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCheckboxLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrCheckboxLabel, isStandalone: true, selector: "[frCheckboxLabel]", host: { classAttribute: "frame-checkbox-label" }, ngImport: i0 });
@@ -1996,23 +2049,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 
 const FR_COLLAPSIBLE = new InjectionToken('FrCollapsible');
 
+/** Content slot for collapsible. */
 class FrCollapsibleContent {
     host = inject(ElementRef);
     collapsible = inject(FR_COLLAPSIBLE);
     initialized = false;
+    lastOpen = false;
     rafId = -1;
-    constructor() {
-        effect((onCleanup) => {
-            const open = this.collapsible.open();
-            this.cancelAnimationFrame();
-            if (!this.initialized) {
-                this.applyStaticState(open);
-                this.initialized = true;
-                return;
-            }
-            this.animate(open);
-            onCleanup(() => this.cancelAnimationFrame());
-        });
+    ngAfterViewInit() {
+        this.lastOpen = this.collapsible.open();
+        this.applyStaticState(this.lastOpen);
+        this.initialized = true;
+    }
+    ngDoCheck() {
+        const open = this.collapsible.open();
+        if (!this.initialized || open === this.lastOpen) {
+            return;
+        }
+        this.cancelAnimationFrame();
+        this.lastOpen = open;
+        this.animate(open);
+    }
+    ngOnDestroy() {
+        this.cancelAnimationFrame();
     }
     onTransitionEnd(event) {
         if (event.target !== this.host.nativeElement || event.propertyName !== 'height') {
@@ -2074,12 +2133,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         role: 'region',
                     },
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 let collapsibleId = 0;
+/** Root controller for expandable collapsible content. */
 class FrCollapsible {
     collapsibleId = ++collapsibleId;
-    internalOpen = signal(false, ...(ngDevMode ? [{ debugName: "internalOpen" }] : /* istanbul ignore next */ []));
+    internalOpen = linkedSignal(() => this.defaultOpen(), ...(ngDevMode ? [{ debugName: "internalOpen" }] : /* istanbul ignore next */ []));
     defaultOpen = input(false, { ...(ngDevMode ? { debugName: "defaultOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     openInput = input(undefined, { ...(ngDevMode ? { debugName: "openInput" } : /* istanbul ignore next */ {}), alias: 'open' });
@@ -2087,13 +2147,6 @@ class FrCollapsible {
     open = computed(() => this.openInput() ?? this.internalOpen(), ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     triggerId = computed(() => `frame-collapsible-trigger-${this.collapsibleId}`, ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
     contentId = computed(() => `frame-collapsible-content-${this.collapsibleId}`, ...(ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []));
-    constructor() {
-        effect(() => {
-            if (this.openInput() === undefined) {
-                this.internalOpen.set(this.defaultOpen());
-            }
-        });
-    }
     toggle() {
         if (this.disabled()) {
             return;
@@ -2125,8 +2178,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '[attr.data-state]': 'open() ? "open" : "closed"',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], openInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }] } });
+        }], propDecorators: { defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], openInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }] } });
 
+/** Trigger control for collapsible. */
 class FrCollapsibleTrigger {
     collapsible = inject(FR_COLLAPSIBLE);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCollapsibleTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -2151,6 +2205,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }] });
 
+/** Content slot for combobox. */
 class FrComboboxContent {
     templateRef = inject((TemplateRef));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -2163,6 +2218,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     exportAs: 'frComboboxContent',
                 }]
         }] });
+/** Panel slot for combobox. */
 class FrComboboxPanel {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrComboboxPanel, isStandalone: true, selector: "[frComboboxPanel], frame-combobox-panel", host: { attributes: { "role": "listbox" }, classAttribute: "frame-combobox__panel" }, ngImport: i0 });
@@ -2177,6 +2233,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** List slot for combobox. */
 class FrComboboxList {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrComboboxList, isStandalone: true, selector: "[frComboboxList], frame-combobox-list", host: { classAttribute: "frame-combobox__list" }, ngImport: i0 });
@@ -2190,6 +2247,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Empty-state slot for combobox results. */
 class FrComboboxEmpty {
     root = inject(FrComboboxRootLookup);
     hidden() {
@@ -2208,6 +2266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Group slot for combobox. */
 class FrComboboxGroup {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrComboboxGroup, isStandalone: true, selector: "[frComboboxGroup], frame-combobox-group", host: { classAttribute: "frame-combobox__group" }, ngImport: i0 });
@@ -2221,6 +2280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Label slot for combobox. */
 class FrComboboxLabel {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrComboboxLabel, isStandalone: true, selector: "[frComboboxLabel], frame-combobox-label", host: { classAttribute: "frame-combobox__label" }, ngImport: i0 });
@@ -2234,6 +2294,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Separator slot for combobox. */
 class FrComboboxSeparator {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrComboboxSeparator, isStandalone: true, selector: "[frComboboxSeparator], frame-combobox-separator", host: { attributes: { "role": "separator" }, classAttribute: "frame-combobox__separator" }, ngImport: i0 });
@@ -2248,6 +2309,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Collection host for combobox options. */
 class FrComboboxCollection {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxCollection, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrComboboxCollection, isStandalone: true, selector: "[frComboboxCollection], frame-combobox-collection", host: { classAttribute: "frame-combobox__collection" }, ngImport: i0 });
@@ -2262,6 +2324,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }] });
 // Resolved by the root file to avoid a circular import in decorator metadata.
+/** Base API for combobox root lookup. */
 class FrComboboxRootLookup {
 }
 
@@ -2281,12 +2344,16 @@ const POSITIONS$1 = [
         offsetY: -4,
     },
 ];
+/** Combobox control with single and multi-value support. */
 class FrCombobox extends FrControlValueAccessor$1 {
     destroyRef = inject(DestroyRef);
     elementRef = inject(ElementRef);
     items = new Set();
     itemsVersion = signal(0, ...(ngDevMode ? [{ debugName: "itemsVersion" }] : /* istanbul ignore next */ []));
     selectedLabels = new Map();
+    lastAutoHighlight = false;
+    lastItemsVersion = -1;
+    lastQuery = '';
     resizeObserver = null;
     origin = viewChild(CdkOverlayOrigin, ...(ngDevMode ? [{ debugName: "origin" }] : /* istanbul ignore next */ []));
     content = contentChild(FrComboboxContent, ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
@@ -2323,18 +2390,6 @@ class FrCombobox extends FrControlValueAccessor$1 {
     hasValue = computed(() => this.selectedValues().length > 0 || this.query().length > 0, ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
     constructor() {
         super();
-        effect(() => {
-            if (this.debugVisible()) {
-                afterNextRender(() => this.open());
-            }
-        });
-        effect(() => {
-            this.query();
-            this.itemsVersion();
-            if (this.autoHighlight()) {
-                this.highlightedIndex.set(0);
-            }
-        });
         queueMicrotask(() => {
             this.measureAnchor();
             this.attachResizeObserver();
@@ -2343,6 +2398,29 @@ class FrCombobox extends FrControlValueAccessor$1 {
             this.resizeObserver?.disconnect();
         });
     }
+    ngAfterViewInit() {
+        if (this.debugVisible()) {
+            this.open();
+        }
+    }
+    ngDoCheck() {
+        if (this.debugVisible() && !this.isOpen()) {
+            this.open();
+        }
+        const autoHighlight = this.autoHighlight();
+        const itemsVersion = this.itemsVersion();
+        const query = this.query();
+        if (autoHighlight &&
+            (query !== this.lastQuery ||
+                itemsVersion !== this.lastItemsVersion ||
+                autoHighlight !== this.lastAutoHighlight)) {
+            // Filtering can invalidate the current index, so restart highlight at the first visible item.
+            this.highlightedIndex.set(0);
+        }
+        this.lastAutoHighlight = autoHighlight;
+        this.lastItemsVersion = itemsVersion;
+        this.lastQuery = query;
+    }
     registerItem(item) {
         this.items.add(item);
         this.bumpItems();
@@ -2351,6 +2429,9 @@ class FrCombobox extends FrControlValueAccessor$1 {
         this.items.delete(item);
         this.bumpItems();
     }
+    refreshItems() {
+        this.bumpItems();
+    }
     visibleItems() {
         this.itemsVersion();
         return Array.from(this.items).filter((item) => item.isVisible());
@@ -2460,6 +2541,7 @@ class FrCombobox extends FrControlValueAccessor$1 {
             this.anchorWidth.set(null);
             return;
         }
+        // Match the overlay width to the trigger even when content is rendered in the CDK overlay.
         this.anchorWidth.set(element.getBoundingClientRect().width || null);
     }
     attachResizeObserver() {
@@ -2546,6 +2628,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }], 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"] }] } });
 
+/** Search input for combobox filtering. */
 class FrComboboxInput {
     root = inject(FrCombobox);
     elementRef = inject(ElementRef);
@@ -2603,6 +2686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Trigger control for combobox. */
 class FrComboboxTrigger {
     root = inject(FrCombobox);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -2622,6 +2706,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Clear control for combobox values. */
 class FrComboboxClear {
     root = inject(FrCombobox);
     hidden() {
@@ -2643,6 +2728,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }] });
 
+/** Item slot for combobox. */
 class FrComboboxItem {
     destroyRef = inject(DestroyRef);
     elementRef = inject(ElementRef);
@@ -2652,6 +2738,7 @@ class FrComboboxItem {
     itemLabel = input(null, { ...(ngDevMode ? { debugName: "itemLabel" } : /* istanbul ignore next */ {}), alias: 'label' });
     value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     resolvedLabel = signal('', ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []));
+    lastItemStateKey = '';
     label = computed(() => this.itemLabel() ?? this.resolvedLabel(), ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     visible = computed(() => this.root.itemVisible(this.label()), ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
     constructor() {
@@ -2664,11 +2751,17 @@ class FrComboboxItem {
             this.refreshResolvedLabel();
             this.observeTextChanges();
         });
-        effect(() => {
-            if (this.root.isSelected(this.value())) {
-                this.root.rememberItemLabel(this.value(), this.label());
-            }
-        });
+    }
+    ngDoCheck() {
+        const itemStateKey = `${this.label()}|${this.disabled()}|${this.root.isSelected(this.value())}`;
+        if (itemStateKey === this.lastItemStateKey) {
+            return;
+        }
+        this.lastItemStateKey = itemStateKey;
+        this.root.refreshItems();
+        if (this.root.isSelected(this.value())) {
+            this.root.rememberItemLabel(this.value(), this.label());
+        }
     }
     isVisible() {
         return this.visible();
@@ -2695,11 +2788,13 @@ class FrComboboxItem {
     }
     refreshResolvedLabel() {
         this.resolvedLabel.set(this.resolveLabel());
+        this.root.refreshItems();
     }
     observeTextChanges() {
         if (typeof MutationObserver === 'undefined' || this.itemLabel() !== null) {
             return;
         }
+        // Items without explicit labels derive filtering text from projected content.
         this.mutationObserver = new MutationObserver(() => this.refreshResolvedLabel());
         this.mutationObserver.observe(this.elementRef.nativeElement, {
             characterData: true,
@@ -2728,6 +2823,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], itemLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
+/** Indicator slot for combobox item. */
 class FrComboboxItemIndicator {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxItemIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrComboboxItemIndicator, isStandalone: true, selector: "[frComboboxItemIndicator]", host: { attributes: { "aria-hidden": "true" }, classAttribute: "frame-combobox__item-indicator" }, ngImport: i0 });
@@ -2743,6 +2839,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }] });
 
+/** Chip list for multi-value combobox selections. */
 class FrComboboxChips {
     root = inject(FrCombobox);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxChips, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -2759,6 +2856,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** List slot for combobox value. */
 class FrComboboxValueList {
     root = inject(FrCombobox);
     values() {
@@ -2777,6 +2875,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Selected value chip for combobox. */
 class FrComboboxChip {
     root = inject(FrCombobox);
     elementRef = inject(ElementRef);
@@ -2824,6 +2923,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }] } });
+/** Remove control for a combobox chip. */
 class FrComboboxChipRemove {
     chip = inject(FrComboboxChip);
     remove(event) {
@@ -2845,6 +2945,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Inline text input inside combobox chips. */
 class FrComboboxChipsInput {
     root = inject(FrCombobox);
     handleInput(event) {
@@ -2887,6 +2988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Error slot for combobox. */
 class FrComboboxError {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxError, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrComboboxError, isStandalone: true, selector: "[frComboboxError], frame-combobox-error", host: { attributes: { "aria-live": "polite" }, classAttribute: "frame-combobox__error" }, ngImport: i0 });
@@ -2904,6 +3006,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 
 const DEFAULT_PANEL_CLASS$2 = 'frame-command-dialog__overlay-pane';
 const DEFAULT_BACKDROP_CLASS$2 = 'frame-command-dialog__backdrop';
+/** Template configuration for a command dialog. */
 class FrCommandDialog {
     templateRef = inject((TemplateRef));
     ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
@@ -2956,6 +3059,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     standalone: true,
                 }]
         }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], backdropClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClass", required: false }] }], closeOnDestroy: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnDestroy", required: false }] }], closeOnNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnNavigation", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], disableClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableClose", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
+/** Trigger control for command dialog. */
 class FrCommandDialogTrigger {
     commandDialog = inject(FrCommandService);
     destroyRef = inject(DestroyRef);
@@ -3005,6 +3109,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "frCommandDialogTrigger", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+/** Service for opening command dialogs. */
 class FrCommandService {
     dialog = inject(Dialog);
     open(content, config = {}) {
@@ -3050,6 +3155,7 @@ function mergeClassList$2(classList, defaultClass) {
     return Array.from(new Set([defaultClass, ...classes].filter(Boolean)));
 }
 
+/** Footer slot for command. */
 class FrCommandFooter {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrCommandFooter, isStandalone: true, selector: "[frCommandFooter]", host: { classAttribute: "frame-command__footer" }, ngImport: i0 });
@@ -3067,6 +3173,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 const FR_COMMAND = new InjectionToken('FrCommand');
 const FR_COMMAND_GROUP = new InjectionToken('FrCommandGroup');
 
+/** Group slot for command. */
 class FrCommandGroup {
     items = new Set();
     itemsVersion = signal(0, ...(ngDevMode ? [{ debugName: "itemsVersion" }] : /* istanbul ignore next */ []));
@@ -3105,6 +3212,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { forceMount: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceMount", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }] } });
+/** Heading slot for a command group. */
 class FrCommandGroupHeading {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandGroupHeading, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrCommandGroupHeading, isStandalone: true, selector: "[frCommandGroupHeading]", host: { classAttribute: "frame-command__group-heading" }, ngImport: i0 });
@@ -3120,6 +3228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }] });
 
+/** Command input component primitive. */
 class FrCommandInput {
     elementRef = inject(ElementRef);
     command = inject(FR_COMMAND);
@@ -3150,6 +3259,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
 
+/** Item slot for command. */
 class FrCommandItem {
     destroyRef = inject(DestroyRef);
     elementRef = inject(ElementRef);
@@ -3171,6 +3281,7 @@ class FrCommandItem {
     }, ...(ngDevMode ? [{ debugName: "keywords" }] : /* istanbul ignore next */ []));
     value = computed(() => this.valueInput() ?? this.label(), ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     visible = computed(() => this.command.filteredItemVisible(this.label(), this.keywords()), ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    lastSearchKey = '';
     constructor() {
         this.command.registerItem(this);
         this.group?.registerItem(this);
@@ -3183,11 +3294,14 @@ class FrCommandItem {
             this.refreshResolvedLabel();
             this.observeTextChanges();
         });
-        effect(() => {
-            this.label();
-            this.keywords();
-            this.command.visibleCount();
-        });
+    }
+    ngDoCheck() {
+        const searchKey = `${this.label()}|${this.keywords().join('|')}|${this.disabled()}`;
+        if (searchKey === this.lastSearchKey) {
+            return;
+        }
+        this.lastSearchKey = searchKey;
+        this.command.refreshItems();
     }
     isVisible() {
         return this.visible();
@@ -3222,11 +3336,13 @@ class FrCommandItem {
     }
     refreshResolvedLabel() {
         this.resolvedLabel.set(this.resolveLabel());
+        this.command.refreshItems();
     }
     observeTextChanges() {
         if (typeof MutationObserver === 'undefined' || this.itemLabel() !== null) {
             return;
         }
+        // Items without explicit labels derive search text from projected content.
         this.mutationObserver = new MutationObserver(() => this.refreshResolvedLabel());
         this.mutationObserver.observe(this.elementRef.nativeElement, {
             characterData: true,
@@ -3259,6 +3375,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], itemKeywords: [{ type: i0.Input, args: [{ isSignal: true, alias: "keywords", required: false }] }], itemLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], itemSelected: [{ type: i0.Output, args: ["selected"] }] } });
+/** Icon slot for command item. */
 class FrCommandItemIcon {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandItemIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrCommandItemIcon, isStandalone: true, selector: "[frCommandItemIcon]", host: { attributes: { "aria-hidden": "true" }, classAttribute: "frame-command__item-icon" }, ngImport: i0 });
@@ -3274,6 +3391,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Shortcut slot for command. */
 class FrCommandShortcut {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandShortcut, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrCommandShortcut, isStandalone: true, selector: "[frCommandShortcut]", host: { attributes: { "aria-hidden": "true" }, classAttribute: "frame-command__shortcut" }, ngImport: i0 });
@@ -3290,6 +3408,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }] });
 
+/** List slot for command. */
 class FrCommandList {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrCommandList, isStandalone: true, selector: "[frCommandList]", host: { attributes: { "role": "listbox" }, classAttribute: "frame-command__list" }, ngImport: i0 });
@@ -3305,6 +3424,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Empty-state slot for command results. */
 class FrCommandEmpty {
     command = inject(FR_COMMAND);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -3329,10 +3449,15 @@ const DEFAULT_FILTER = (query, label, keywords) => {
     }
     return [label, ...keywords].some((value) => value.toLowerCase().includes(normalizedQuery));
 };
+/** Command menu root that coordinates filtering and selection. */
 class FrCommand {
     dialogRef = inject(DialogRef, { optional: true });
     items = new Set();
     itemsVersion = signal(0, ...(ngDevMode ? [{ debugName: "itemsVersion" }] : /* istanbul ignore next */ []));
+    lastFilter = null;
+    lastHighlightedIndex = 0;
+    lastItemsVersion = -1;
+    lastQuery = '';
     closeOnSelect = input(false, { ...(ngDevMode ? { debugName: "closeOnSelect" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     filter = input(DEFAULT_FILTER, ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
@@ -3343,17 +3468,21 @@ class FrCommand {
     query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
     highlightedIndex = signal(0, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : /* istanbul ignore next */ []));
     selectedValue = computed(() => this.value(), ...(ngDevMode ? [{ debugName: "selectedValue" }] : /* istanbul ignore next */ []));
-    constructor() {
-        effect(() => {
-            this.query();
-            this.itemsVersion();
+    ngDoCheck() {
+        const filter = this.filter();
+        const highlightedIndex = this.highlightedIndex();
+        const itemsVersion = this.itemsVersion();
+        const query = this.query();
+        if (query !== this.lastQuery || itemsVersion !== this.lastItemsVersion || filter !== this.lastFilter) {
             this.normalizeHighlight();
-        });
-        effect(() => {
-            this.highlightedIndex();
-            this.itemsVersion();
+        }
+        if (highlightedIndex !== this.lastHighlightedIndex || itemsVersion !== this.lastItemsVersion) {
             this.scrollHighlightedItemIntoView();
-        });
+        }
+        this.lastFilter = filter;
+        this.lastHighlightedIndex = this.highlightedIndex();
+        this.lastItemsVersion = itemsVersion;
+        this.lastQuery = query;
     }
     registerItem(item) {
         this.items.add(item);
@@ -3363,6 +3492,9 @@ class FrCommand {
         this.items.delete(item);
         this.bumpItems();
     }
+    refreshItems() {
+        this.bumpItems();
+    }
     visibleItems() {
         this.itemsVersion();
         return Array.from(this.items).filter((item) => item.isVisible() && !item.disabled());
@@ -3484,8 +3616,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '(keydown)': 'handleKeydown($event)',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], queryChange: [{ type: i0.Output, args: ["queryChange"] }] } });
+        }], propDecorators: { closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], queryChange: [{ type: i0.Output, args: ["queryChange"] }] } });
 
+/** Separator slot for command. */
 class FrCommandSeparator {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrCommandSeparator, isStandalone: true, selector: "[frCommandSeparator]", host: { attributes: { "role": "separator" }, classAttribute: "frame-command__separator" }, ngImport: i0 });
@@ -3502,7 +3635,405 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }] });
 
+let nextConfirmPopoverId = 0;
+/** Flexible confirmation popover trigger that can attach to any host element. */
+class FrConfirmPopover {
+    destroyRef = inject(DestroyRef);
+    elementRef = inject(ElementRef);
+    overlay = inject(Overlay);
+    platformId = inject(PLATFORM_ID);
+    config = input({}, { ...(ngDevMode ? { debugName: "config" } : /* istanbul ignore next */ {}), alias: 'frConfirmPopover' });
+    align = input(undefined, { ...(ngDevMode ? { debugName: "align" } : /* istanbul ignore next */ {}), alias: 'frConfirmPopoverAlign' });
+    alignOffset = input(undefined, { ...(ngDevMode ? { debugName: "alignOffset" } : /* istanbul ignore next */ {}), alias: 'frConfirmPopoverAlignOffset',
+        transform: optionalNumberAttribute });
+    buttonSize = input(undefined, { ...(ngDevMode ? { debugName: "buttonSize" } : /* istanbul ignore next */ {}), alias: 'frConfirmPopoverButtonSize' });
+    cancelAppearance = input(undefined, { ...(ngDevMode ? { debugName: "cancelAppearance" } : /* istanbul ignore next */ {}), alias: 'frConfirmPopoverCancelAppearance' });
+    cancelLabel = input(undefined, { ...(ngDevMode ? { debugName: "cancelLabel" } : /* istanbul ignore next */ {}), alias: 'frConfirmPopoverCancelLabel' });
+    confirmAppearance = input(undefined, { ...(ngDevMode ? { debugName: "confirmAppearance" } : /* istanbul ignore next */ {}), alias: 'frConfirmPopoverConfirmAppearance' });
+    confirmLabel = input(undefined, { ...(ngDevMode ? { debugName: "confirmLabel" } : /* istanbul ignore next */ {}), alias: 'frConfirmPopoverConfirmLabel' });
+    description = input(undefined, { ...(ngDevMode ? { debugName: "description" } : /* istanbul ignore next */ {}), alias: 'frConfirmPopoverDescription' });
+    disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), alias: 'frConfirmPopoverDisabled',
+        transform: optionalBooleanAttribute });
+    side = input(undefined, { ...(ngDevMode ? { debugName: "side" } : /* istanbul ignore next */ {}), alias: 'frConfirmPopoverSide' });
+    sideOffset = input(undefined, { ...(ngDevMode ? { debugName: "sideOffset" } : /* istanbul ignore next */ {}), alias: 'frConfirmPopoverSideOffset',
+        transform: optionalNumberAttribute });
+    title = input(undefined, { ...(ngDevMode ? { debugName: "title" } : /* istanbul ignore next */ {}), alias: 'frConfirmPopoverTitle' });
+    closed = output({ alias: 'frConfirmPopoverClosed' });
+    cancelled = output({ alias: 'frConfirmPopoverCancelled' });
+    confirmed = output({ alias: 'frConfirmPopoverConfirmed' });
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    overlayRef = null;
+    panelRef = null;
+    currentSide = 'bottom';
+    constructor() {
+        this.destroyRef.onDestroy(() => this.destroy());
+    }
+    open() {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        const config = this.resolvedConfig();
+        if (config.disabled) {
+            return;
+        }
+        if (!this.overlayRef) {
+            this.overlayRef = this.createOverlay(config);
+        }
+        if (!this.overlayRef.hasAttached()) {
+            this.panelRef = this.overlayRef.attach(new ComponentPortal(FrConfirmPopoverPanel));
+            this.panelRef.instance.cancelled.subscribe(() => this.close('cancel'));
+            this.panelRef.instance.confirmed.subscribe(() => this.close('confirm'));
+            this.syncCustomPropertiesToOverlay();
+        }
+        this.updatePanelInputs(config);
+        this.isOpen.set(true);
+    }
+    close(result) {
+        this.detachPanel({ dispose: true });
+        this.closed.emit(result);
+        if (result === 'confirm') {
+            this.confirmed.emit();
+            return;
+        }
+        if (result === 'cancel') {
+            this.cancelled.emit();
+        }
+    }
+    toggle() {
+        if (this.isOpen()) {
+            this.close();
+            return;
+        }
+        this.open();
+    }
+    handleClick(event) {
+        event.preventDefault();
+        this.toggle();
+    }
+    handleKeydown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.close();
+            return;
+        }
+        if (this.isNativeInteractiveElement()) {
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.toggle();
+        }
+    }
+    createOverlay(config) {
+        this.currentSide = config.side;
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.elementRef.nativeElement)
+            .withPositions(buildConfirmPopoverPositions(config))
+            .withPush(true)
+            .withViewportMargin(12);
+        positionStrategy.positionChanges.subscribe((event) => this.handlePositionChange(event));
+        const overlayRef = this.overlay.create({
+            hasBackdrop: true,
+            backdropClass: 'frame-popover__backdrop',
+            panelClass: [
+                'frame-popover-overlay',
+                'frame-confirm-popover-overlay',
+                `frame-popover-overlay--${config.side}`,
+            ],
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+        });
+        overlayRef.backdropClick().subscribe(() => this.close());
+        overlayRef.keydownEvents().subscribe((event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                this.close();
+            }
+        });
+        return overlayRef;
+    }
+    handlePositionChange(event) {
+        const pair = event.connectionPair;
+        const side = pair.overlayY === 'top'
+            ? 'bottom'
+            : pair.overlayY === 'bottom'
+                ? 'top'
+                : pair.overlayX === 'start'
+                    ? 'right'
+                    : 'left';
+        this.currentSide = side;
+        this.panelRef?.setInput('side', side);
+        this.overlayRef?.removePanelClass([
+            'frame-popover-overlay--top',
+            'frame-popover-overlay--right',
+            'frame-popover-overlay--bottom',
+            'frame-popover-overlay--left',
+        ]);
+        this.overlayRef?.addPanelClass(`frame-popover-overlay--${side}`);
+    }
+    updatePanelInputs(config) {
+        const panelRef = this.panelRef;
+        if (!panelRef) {
+            return;
+        }
+        const panelId = `frame-confirm-popover-${nextConfirmPopoverId++}`;
+        panelRef.setInput('buttonSize', config.buttonSize);
+        panelRef.setInput('cancelAppearance', config.cancelAppearance);
+        panelRef.setInput('cancelLabel', config.cancelLabel);
+        panelRef.setInput('confirmAppearance', config.confirmAppearance);
+        panelRef.setInput('confirmLabel', config.confirmLabel);
+        panelRef.setInput('description', config.description);
+        panelRef.setInput('descriptionId', config.description ? `${panelId}-description` : null);
+        panelRef.setInput('side', this.currentSide);
+        panelRef.setInput('title', config.title);
+        panelRef.setInput('titleId', `${panelId}-title`);
+    }
+    resolvedConfig() {
+        const config = this.config();
+        const baseConfig = typeof config === 'string' ? { title: config } : config;
+        return {
+            align: this.align() ?? baseConfig.align ?? 'center',
+            alignOffset: this.alignOffset() ?? baseConfig.alignOffset ?? 0,
+            buttonSize: this.buttonSize() ?? baseConfig.buttonSize ?? 'sm',
+            cancelAppearance: this.cancelAppearance() ?? baseConfig.cancelAppearance ?? 'outline',
+            cancelLabel: this.cancelLabel() ?? baseConfig.cancelLabel ?? 'Cancel',
+            confirmAppearance: this.confirmAppearance() ?? baseConfig.confirmAppearance ?? 'primary',
+            confirmLabel: this.confirmLabel() ?? baseConfig.confirmLabel ?? 'Confirm',
+            description: this.description() ?? baseConfig.description,
+            disabled: this.disabled() ?? baseConfig.disabled ?? false,
+            side: this.side() ?? baseConfig.side ?? 'bottom',
+            sideOffset: this.sideOffset() ?? baseConfig.sideOffset ?? 8,
+            title: this.title() ?? baseConfig.title ?? 'Are you sure?',
+        };
+    }
+    syncCustomPropertiesToOverlay() {
+        const overlayPane = this.overlayRef?.overlayElement;
+        const panel = overlayPane?.querySelector('.frame-confirm-popover__content');
+        if (!overlayPane || !panel || typeof getComputedStyle === 'undefined') {
+            return;
+        }
+        const sourceStyles = getComputedStyle(this.elementRef.nativeElement);
+        // Overlay content is portaled, so copy popover-compatible token overrides from the trigger.
+        for (let index = 0; index < sourceStyles.length; index += 1) {
+            const propertyName = sourceStyles.item(index);
+            if (!propertyName.startsWith('--frame-popover-') && !propertyName.startsWith('--frame-confirm-popover-')) {
+                continue;
+            }
+            const propertyValue = sourceStyles.getPropertyValue(propertyName);
+            overlayPane.style.setProperty(propertyName, propertyValue);
+            panel.style.setProperty(propertyName, propertyValue);
+        }
+    }
+    isNativeInteractiveElement() {
+        const tagName = this.elementRef.nativeElement.tagName.toLowerCase();
+        return ['a', 'button', 'input', 'select', 'textarea'].includes(tagName);
+    }
+    destroy() {
+        this.detachPanel({ dispose: true });
+    }
+    detachPanel(options = {}) {
+        this.overlayRef?.detach();
+        this.panelRef = null;
+        this.isOpen.set(false);
+        if (options.dispose) {
+            this.overlayRef?.dispose();
+            this.overlayRef = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrConfirmPopover, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrConfirmPopover, isStandalone: true, selector: "\n    [frConfirmPopover],\n    [frConfirmPopoverAlign],\n    [frConfirmPopoverAlignOffset],\n    [frConfirmPopoverButtonSize],\n    [frConfirmPopoverCancelAppearance],\n    [frConfirmPopoverCancelLabel],\n    [frConfirmPopoverConfirmAppearance],\n    [frConfirmPopoverConfirmLabel],\n    [frConfirmPopoverDescription],\n    [frConfirmPopoverDisabled],\n    [frConfirmPopoverSide],\n    [frConfirmPopoverSideOffset],\n    [frConfirmPopoverTitle]\n  ", inputs: { config: { classPropertyName: "config", publicName: "frConfirmPopover", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "frConfirmPopoverAlign", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "frConfirmPopoverAlignOffset", isSignal: true, isRequired: false, transformFunction: null }, buttonSize: { classPropertyName: "buttonSize", publicName: "frConfirmPopoverButtonSize", isSignal: true, isRequired: false, transformFunction: null }, cancelAppearance: { classPropertyName: "cancelAppearance", publicName: "frConfirmPopoverCancelAppearance", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "frConfirmPopoverCancelLabel", isSignal: true, isRequired: false, transformFunction: null }, confirmAppearance: { classPropertyName: "confirmAppearance", publicName: "frConfirmPopoverConfirmAppearance", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "frConfirmPopoverConfirmLabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "frConfirmPopoverDescription", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "frConfirmPopoverDisabled", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "frConfirmPopoverSide", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "frConfirmPopoverSideOffset", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "frConfirmPopoverTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "frConfirmPopoverClosed", cancelled: "frConfirmPopoverCancelled", confirmed: "frConfirmPopoverConfirmed" }, host: { listeners: { "click": "handleClick($event)", "keydown": "handleKeydown($event)" }, properties: { "attr.aria-expanded": "isOpen()", "attr.aria-haspopup": "\"dialog\"", "attr.data-state": "isOpen() ? \"open\" : \"closed\"" }, classAttribute: "frame-confirm-popover__trigger" }, exportAs: ["frConfirmPopover"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrConfirmPopover, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `
+    [frConfirmPopover],
+    [frConfirmPopoverAlign],
+    [frConfirmPopoverAlignOffset],
+    [frConfirmPopoverButtonSize],
+    [frConfirmPopoverCancelAppearance],
+    [frConfirmPopoverCancelLabel],
+    [frConfirmPopoverConfirmAppearance],
+    [frConfirmPopoverConfirmLabel],
+    [frConfirmPopoverDescription],
+    [frConfirmPopoverDisabled],
+    [frConfirmPopoverSide],
+    [frConfirmPopoverSideOffset],
+    [frConfirmPopoverTitle]
+  `,
+                    exportAs: 'frConfirmPopover',
+                    host: {
+                        class: 'frame-confirm-popover__trigger',
+                        '[attr.aria-expanded]': 'isOpen()',
+                        '[attr.aria-haspopup]': '"dialog"',
+                        '[attr.data-state]': 'isOpen() ? "open" : "closed"',
+                        '(click)': 'handleClick($event)',
+                        '(keydown)': 'handleKeydown($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "frConfirmPopover", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "frConfirmPopoverAlign", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "frConfirmPopoverAlignOffset", required: false }] }], buttonSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "frConfirmPopoverButtonSize", required: false }] }], cancelAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "frConfirmPopoverCancelAppearance", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "frConfirmPopoverCancelLabel", required: false }] }], confirmAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "frConfirmPopoverConfirmAppearance", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "frConfirmPopoverConfirmLabel", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "frConfirmPopoverDescription", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "frConfirmPopoverDisabled", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "frConfirmPopoverSide", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "frConfirmPopoverSideOffset", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "frConfirmPopoverTitle", required: false }] }], closed: [{ type: i0.Output, args: ["frConfirmPopoverClosed"] }], cancelled: [{ type: i0.Output, args: ["frConfirmPopoverCancelled"] }], confirmed: [{ type: i0.Output, args: ["frConfirmPopoverConfirmed"] }] } });
+class FrConfirmPopoverPanel {
+    buttonSize = input('sm', ...(ngDevMode ? [{ debugName: "buttonSize" }] : /* istanbul ignore next */ []));
+    cancelAppearance = input('outline', ...(ngDevMode ? [{ debugName: "cancelAppearance" }] : /* istanbul ignore next */ []));
+    cancelLabel = input('Cancel', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
+    confirmAppearance = input('primary', ...(ngDevMode ? [{ debugName: "confirmAppearance" }] : /* istanbul ignore next */ []));
+    confirmLabel = input('Confirm', ...(ngDevMode ? [{ debugName: "confirmLabel" }] : /* istanbul ignore next */ []));
+    description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    descriptionId = input(null, ...(ngDevMode ? [{ debugName: "descriptionId" }] : /* istanbul ignore next */ []));
+    side = input('bottom', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    title = input('Are you sure?', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    titleId = input.required(...(ngDevMode ? [{ debugName: "titleId" }] : /* istanbul ignore next */ []));
+    cancelled = output();
+    confirmed = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrConfirmPopoverPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrConfirmPopoverPanel, isStandalone: true, selector: "frame-confirm-popover-panel", inputs: { buttonSize: { classPropertyName: "buttonSize", publicName: "buttonSize", isSignal: true, isRequired: false, transformFunction: null }, cancelAppearance: { classPropertyName: "cancelAppearance", publicName: "cancelAppearance", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, confirmAppearance: { classPropertyName: "confirmAppearance", publicName: "confirmAppearance", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, descriptionId: { classPropertyName: "descriptionId", publicName: "descriptionId", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleId: { classPropertyName: "titleId", publicName: "titleId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { cancelled: "cancelled", confirmed: "confirmed" }, ngImport: i0, template: `
+    <div
+      class="frame-popover__content frame-confirm-popover__content"
+      role="alertdialog"
+      [attr.aria-describedby]="descriptionId()"
+      [attr.aria-labelledby]="titleId()"
+      [attr.data-side]="side()"
+    >
+      <div class="frame-popover__header frame-confirm-popover__header">
+        <h3 class="frame-popover__title frame-confirm-popover__title" [id]="titleId()">
+          {{ title() }}
+        </h3>
+
+        @if (description()) {
+          <p class="frame-popover__description frame-confirm-popover__description" [id]="descriptionId()">
+            {{ description() }}
+          </p>
+        }
+      </div>
+
+      <div class="frame-popover__footer frame-confirm-popover__footer">
+        <button
+          frButton
+          type="button"
+          [appearance]="cancelAppearance()"
+          [size]="buttonSize()"
+          (click)="cancelled.emit()"
+        >
+          <span frButtonLabel>{{ cancelLabel() }}</span>
+        </button>
+        <button
+          frButton
+          type="button"
+          [appearance]="confirmAppearance()"
+          [size]="buttonSize()"
+          (click)="confirmed.emit()"
+        >
+          <span frButtonLabel>{{ confirmLabel() }}</span>
+        </button>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: FrButton$1, selector: "a[frButton], button[frButton]", inputs: ["appearance", "disabled", "loading", "loadingDisplay", "radius", "size"] }, { kind: "directive", type: FrButtonLabel$1, selector: "[frButtonLabel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrConfirmPopoverPanel, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'frame-confirm-popover-panel',
+                    imports: [FrButton$1, FrButtonLabel$1],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <div
+      class="frame-popover__content frame-confirm-popover__content"
+      role="alertdialog"
+      [attr.aria-describedby]="descriptionId()"
+      [attr.aria-labelledby]="titleId()"
+      [attr.data-side]="side()"
+    >
+      <div class="frame-popover__header frame-confirm-popover__header">
+        <h3 class="frame-popover__title frame-confirm-popover__title" [id]="titleId()">
+          {{ title() }}
+        </h3>
+
+        @if (description()) {
+          <p class="frame-popover__description frame-confirm-popover__description" [id]="descriptionId()">
+            {{ description() }}
+          </p>
+        }
+      </div>
+
+      <div class="frame-popover__footer frame-confirm-popover__footer">
+        <button
+          frButton
+          type="button"
+          [appearance]="cancelAppearance()"
+          [size]="buttonSize()"
+          (click)="cancelled.emit()"
+        >
+          <span frButtonLabel>{{ cancelLabel() }}</span>
+        </button>
+        <button
+          frButton
+          type="button"
+          [appearance]="confirmAppearance()"
+          [size]="buttonSize()"
+          (click)="confirmed.emit()"
+        >
+          <span frButtonLabel>{{ confirmLabel() }}</span>
+        </button>
+      </div>
+    </div>
+  `,
+                }]
+        }], propDecorators: { buttonSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonSize", required: false }] }], cancelAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelAppearance", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], confirmAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmAppearance", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], descriptionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptionId", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], titleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleId", required: true }] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }] } });
+function buildConfirmPopoverPositions(options) {
+    const primary = buildPosition$2(options.side, options);
+    const fallback = buildPosition$2(oppositeSide$2(options.side), options);
+    return [primary, fallback];
+}
+function buildPosition$2(side, options) {
+    if (side === 'top' || side === 'bottom') {
+        const isBottom = side === 'bottom';
+        return {
+            originX: options.align,
+            originY: isBottom ? 'bottom' : 'top',
+            overlayX: options.align,
+            overlayY: isBottom ? 'top' : 'bottom',
+            offsetX: options.alignOffset,
+            offsetY: isBottom ? options.sideOffset : -options.sideOffset,
+        };
+    }
+    const isRight = side === 'right';
+    return {
+        originX: isRight ? 'end' : 'start',
+        originY: verticalPosition(options.align),
+        overlayX: isRight ? 'start' : 'end',
+        overlayY: verticalPosition(options.align),
+        offsetX: isRight ? options.sideOffset : -options.sideOffset,
+        offsetY: options.alignOffset,
+    };
+}
+function verticalPosition(align) {
+    if (align === 'center') {
+        return 'center';
+    }
+    return align === 'start' ? 'top' : 'bottom';
+}
+function oppositeSide$2(side) {
+    if (side === 'top') {
+        return 'bottom';
+    }
+    if (side === 'bottom') {
+        return 'top';
+    }
+    if (side === 'left') {
+        return 'right';
+    }
+    return 'left';
+}
+function optionalBooleanAttribute(value) {
+    return value == null ? undefined : booleanAttribute(value);
+}
+function optionalNumberAttribute(value) {
+    return value == null ? undefined : numberAttribute(value);
+}
+
 const FR_CONTEXT_MENU_CONTENT = new InjectionToken('FrContextMenuContent');
+/** Content slot for context menu. */
 class FrContextMenuContent {
     templateRef = inject((TemplateRef));
     align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
@@ -3551,6 +4082,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     ],
                 }]
         }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignOffset", required: false }] }], debugVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "debugVisible", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }] } });
+/** Panel slot for context menu. */
 class FrContextMenuPanel {
     side = inject(FR_CONTEXT_MENU_CONTENT).side;
     tree = inject(FrDropdownMenuTree$1);
@@ -3579,6 +4111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }] });
 
+/** Item slot for context menu. */
 class FrContextMenuItem {
     inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
@@ -3597,16 +4130,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+/** Item slot for context menu checkbox. */
 class FrContextMenuCheckboxItem {
     checkboxItem = inject(CdkMenuItemCheckbox);
+    lastChecked = false;
     checked = input(false, { ...(ngDevMode ? { debugName: "checked" } : /* istanbul ignore next */ {}), alias: 'checked',
         transform: booleanAttribute });
     inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    constructor() {
-        effect(() => {
-            this.checkboxItem.checked = this.checked();
-        });
+    ngDoCheck() {
+        const checked = this.checked();
+        if (checked === this.lastChecked) {
+            return;
+        }
+        this.lastChecked = checked;
+        this.checkboxItem.checked = checked;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuCheckboxItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrContextMenuCheckboxItem, isStandalone: true, selector: "button[frContextMenuCheckboxItem]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-checked": "checkboxItem.checked ? \"\" : null", "attr.data-inset": "inset() ? \"\" : null", "attr.data-variant": "variant()" }, classAttribute: "frame-context-menu__item frame-context-menu__checkbox-item frame-dropdown-menu__item frame-dropdown-menu__checkbox-item" }, hostDirectives: [{ directive: i1$2.CdkMenuItemCheckbox }], ngImport: i0 });
@@ -3623,7 +4161,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '[attr.data-variant]': 'variant()',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+/** Group slot for context menu radio. */
 class FrContextMenuRadioGroup {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrContextMenuRadioGroup, isStandalone: true, selector: "[frContextMenuRadioGroup]", host: { classAttribute: "frame-context-menu__radio-group frame-dropdown-menu__radio-group" }, hostDirectives: [{ directive: i1$2.CdkMenuGroup }], ngImport: i0 });
@@ -3638,16 +4177,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Item slot for context menu radio. */
 class FrContextMenuRadioItem {
     radioItem = inject(CdkMenuItemRadio);
+    lastChecked = false;
     checked = input(false, { ...(ngDevMode ? { debugName: "checked" } : /* istanbul ignore next */ {}), alias: 'checked',
         transform: booleanAttribute });
     inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    constructor() {
-        effect(() => {
-            this.radioItem.checked = this.checked();
-        });
+    ngDoCheck() {
+        const checked = this.checked();
+        if (checked === this.lastChecked) {
+            return;
+        }
+        this.lastChecked = checked;
+        this.radioItem.checked = checked;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuRadioItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrContextMenuRadioItem, isStandalone: true, selector: "button[frContextMenuRadioItem]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-checked": "radioItem.checked ? \"\" : null", "attr.data-inset": "inset() ? \"\" : null", "attr.data-variant": "variant()" }, classAttribute: "frame-context-menu__item frame-context-menu__radio-item frame-dropdown-menu__item frame-dropdown-menu__radio-item" }, hostDirectives: [{ directive: i1$2.CdkMenuItemRadio }], ngImport: i0 });
@@ -3664,7 +4208,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '[attr.data-variant]': 'variant()',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+/** Label slot for context menu. */
 class FrContextMenuLabel {
     inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -3680,6 +4225,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }] } });
+/** Separator slot for context menu. */
 class FrContextMenuSeparator {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrContextMenuSeparator, isStandalone: true, selector: "[frContextMenuSeparator]", host: { attributes: { "role": "separator" }, classAttribute: "frame-context-menu__separator frame-dropdown-menu__separator" }, ngImport: i0 });
@@ -3694,6 +4240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Shortcut slot for context menu. */
 class FrContextMenuShortcut {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuShortcut, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrContextMenuShortcut, isStandalone: true, selector: "[frContextMenuShortcut]", host: { classAttribute: "frame-context-menu__shortcut frame-dropdown-menu__shortcut" }, ngImport: i0 });
@@ -3707,6 +4254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Indicator slot for context menu item. */
 class FrContextMenuItemIndicator {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuItemIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrContextMenuItemIndicator, isStandalone: true, selector: "[frContextMenuItemIndicator]", host: { attributes: { "aria-hidden": "true" }, classAttribute: "frame-context-menu__indicator frame-dropdown-menu__indicator" }, ngImport: i0 });
@@ -3722,6 +4270,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }] });
 
+/** Root controller for context menu interactions. */
 class FrContextMenu {
     closeDelay = input(140, ...(ngDevMode ? [{ debugName: "closeDelay" }] : /* istanbul ignore next */ []));
     triggerMode = input('both', ...(ngDevMode ? [{ debugName: "triggerMode" }] : /* istanbul ignore next */ []));
@@ -3750,18 +4299,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], triggerMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerMode", required: false }] }] } });
+/** Nested submenu controller for context menu. */
 class FrContextMenuSub {
     parent = inject(FR_DROPDOWN_MENU_PARENT$1, { skipSelf: true });
     closeDelayInput = input(null, { ...(ngDevMode ? { debugName: "closeDelayInput" } : /* istanbul ignore next */ {}), alias: 'closeDelay' });
     triggerModeInput = input(null, { ...(ngDevMode ? { debugName: "triggerModeInput" } : /* istanbul ignore next */ {}), alias: 'triggerMode' });
-    closeDelay = signal(this.parent.closeDelay(), ...(ngDevMode ? [{ debugName: "closeDelay" }] : /* istanbul ignore next */ []));
-    triggerMode = signal(this.parent.triggerMode(), ...(ngDevMode ? [{ debugName: "triggerMode" }] : /* istanbul ignore next */ []));
-    constructor() {
-        effect(() => {
-            this.closeDelay.set(this.closeDelayInput() ?? this.parent.closeDelay());
-            this.triggerMode.set(this.triggerModeInput() ?? this.parent.triggerMode());
-        });
-    }
+    closeDelay = computed(() => this.closeDelayInput() ?? this.parent.closeDelay(), ...(ngDevMode ? [{ debugName: "closeDelay" }] : /* istanbul ignore next */ []));
+    triggerMode = computed(() => this.triggerModeInput() ?? this.parent.triggerMode(), ...(ngDevMode ? [{ debugName: "triggerMode" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuSub, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrContextMenuSub, isStandalone: true, selector: "[frContextMenuSub]", inputs: { closeDelayInput: { classPropertyName: "closeDelayInput", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, triggerModeInput: { classPropertyName: "triggerModeInput", publicName: "triggerMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "frame-context-menu-sub frame-dropdown-menu-sub" }, providers: [
             {
@@ -3784,8 +4328,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         class: 'frame-context-menu-sub frame-dropdown-menu-sub',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { closeDelayInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], triggerModeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerMode", required: false }] }] } });
+        }], propDecorators: { closeDelayInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], triggerModeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerMode", required: false }] }] } });
 
+/** Trigger control for context menu sub. */
 class FrContextMenuSubTrigger {
     cdkMenuTrigger = inject(CdkMenuTrigger);
     destroyRef = inject(DestroyRef);
@@ -3798,18 +4343,7 @@ class FrContextMenuSubTrigger {
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
     constructor() {
         this.tree.register(this);
-        effect(() => {
-            const content = this.menuContent();
-            this.cdkMenuTrigger.menuTemplateRef = content?.templateRef ?? null;
-            this.cdkMenuTrigger.menuPosition = this.resolvePositions();
-            if (content?.isDebugVisible() && !this.cdkMenuTrigger.isOpen()) {
-                queueMicrotask(() => {
-                    if (!this.cdkMenuTrigger.isOpen()) {
-                        this.cdkMenuTrigger.open();
-                    }
-                });
-            }
-        });
+        queueMicrotask(() => this.syncCdkTrigger());
         this.cdkMenuTrigger.opened.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             this.tree.cancelClose();
             this.isOpen.set(true);
@@ -3826,6 +4360,21 @@ class FrContextMenuSubTrigger {
             this.isOpen.set(false);
         });
     }
+    ngDoCheck() {
+        this.syncCdkTrigger();
+    }
+    syncCdkTrigger() {
+        const content = this.menuContent();
+        this.cdkMenuTrigger.menuTemplateRef = content?.templateRef ?? null;
+        this.cdkMenuTrigger.menuPosition = this.resolvePositions();
+        if (content?.isDebugVisible() && !this.cdkMenuTrigger.isOpen()) {
+            queueMicrotask(() => {
+                if (!this.cdkMenuTrigger.isOpen()) {
+                    this.cdkMenuTrigger.open();
+                }
+            });
+        }
+    }
     close() {
         if (this.menuContent()?.isDebugVisible()) {
             return;
@@ -3879,6 +4428,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { menuContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "frContextMenuSubTrigger", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], triggerModeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerMode", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
+/** Trigger control for context menu. */
 class FrContextMenuTrigger {
     static CUSTOM_PROPERTY_PREFIX = '--frame-dropdown-menu-';
     cdkContextMenuTrigger = inject(CdkContextMenuTrigger);
@@ -3892,19 +4442,7 @@ class FrContextMenuTrigger {
     closed = output();
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
     constructor() {
-        effect(() => {
-            const content = this.menuContent();
-            this.cdkContextMenuTrigger.menuTemplateRef = content?.templateRef ?? null;
-            this.cdkContextMenuTrigger.menuPosition = this.resolvePositions();
-            this.cdkContextMenuTrigger.disabled = this.disabled();
-            if (content?.isDebugVisible() && !this.cdkContextMenuTrigger.isOpen()) {
-                queueMicrotask(() => {
-                    if (!this.cdkContextMenuTrigger.isOpen()) {
-                        this.openAtCenter();
-                    }
-                });
-            }
-        });
+        queueMicrotask(() => this.syncCdkTrigger());
         this.cdkContextMenuTrigger.opened.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             this.isOpen.set(true);
             this.opened.emit();
@@ -3925,6 +4463,22 @@ class FrContextMenuTrigger {
             this.closed.emit();
         });
     }
+    ngDoCheck() {
+        this.syncCdkTrigger();
+    }
+    syncCdkTrigger() {
+        const content = this.menuContent();
+        this.cdkContextMenuTrigger.menuTemplateRef = content?.templateRef ?? null;
+        this.cdkContextMenuTrigger.menuPosition = this.resolvePositions();
+        this.cdkContextMenuTrigger.disabled = this.disabled();
+        if (content?.isDebugVisible() && !this.cdkContextMenuTrigger.isOpen()) {
+            queueMicrotask(() => {
+                if (!this.cdkContextMenuTrigger.isOpen()) {
+                    this.openAtCenter();
+                }
+            });
+        }
+    }
     openAt(coordinates) {
         if (this.disabled() || !this.menuContent()) {
             return;
@@ -3939,6 +4493,7 @@ class FrContextMenuTrigger {
             return;
         }
         this.clearLongPress();
+        // Touch and pen users need a delayed open because they do not have a native contextmenu gesture.
         this.longPressTimeoutId = setTimeout(() => {
             event.preventDefault();
             this.openAt({ x: event.clientX, y: event.clientY });
@@ -3969,6 +4524,7 @@ class FrContextMenuTrigger {
         }
         const menuPanel = overlayElement.querySelector('.frame-dropdown-menu__content') ?? overlayElement;
         const sourceStyles = getComputedStyle(this.elementRef.nativeElement);
+        // CDK portals the menu, so trigger-scoped CSS variables must be mirrored manually.
         for (let index = 0; index < sourceStyles.length; index += 1) {
             const propertyName = sourceStyles.item(index);
             if (!propertyName.startsWith(FrContextMenuTrigger.CUSTOM_PROPERTY_PREFIX)) {
@@ -4015,6 +4571,7 @@ const POSITIONS = [
         offsetY: -8,
     },
 ];
+/** Date picker control backed by the calendar primitive. */
 class FrDatePicker extends FrControlValueAccessor$1 {
     mode = input('single', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
     captionLayout = input('label', ...(ngDevMode ? [{ debugName: "captionLayout" }] : /* istanbul ignore next */ []));
@@ -4116,6 +4673,7 @@ class FrDatePicker extends FrControlValueAccessor$1 {
     }
     selectCalendarValue(value) {
         const previous = this.singleDate();
+        // Preserve the existing time when a calendar click only changes the date portion.
         const next = this.showTime() && value instanceof Date && previous ? mergeTime(value, previous) : value;
         this.commitValue(normalizeValue(next, this.mode()));
         if (this.closeOnSelect() && isCompleteValue(this.value(), this.mode())) {
@@ -4427,6 +4985,7 @@ function normalizeValue(value, mode) {
     if (!value) {
         return mode === 'range' ? { from: null, to: null } : null;
     }
+    // Normalize across modes so form writes, presets, and calendar selections share one shape.
     if (mode === 'range') {
         if (isRange(value)) {
             return {
@@ -4597,6 +5156,7 @@ function horizontalOverlayY(align) {
 }
 
 const FR_DROPDOWN_MENU_PARENT = new InjectionToken('FrDropdownMenuParent');
+/** Shared registry for nested dropdown menu state. */
 class FrDropdownMenuTree {
     triggers = new Set();
     closeTimeoutId = null;
@@ -4641,6 +5201,7 @@ class FrDropdownMenuTree {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuTree, decorators: [{
             type: Injectable
         }] });
+/** Root controller for dropdown menu interactions. */
 class FrDropdownMenu {
     closeDelay = input(140, ...(ngDevMode ? [{ debugName: "closeDelay" }] : /* istanbul ignore next */ []));
     triggerMode = input('click', ...(ngDevMode ? [{ debugName: "triggerMode" }] : /* istanbul ignore next */ []));
@@ -4669,18 +5230,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], triggerMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerMode", required: false }] }] } });
+/** Nested submenu controller for dropdown menu. */
 class FrDropdownMenuSub {
     parent = inject(FR_DROPDOWN_MENU_PARENT, { skipSelf: true });
     closeDelayInput = input(null, { ...(ngDevMode ? { debugName: "closeDelayInput" } : /* istanbul ignore next */ {}), alias: 'closeDelay' });
     triggerModeInput = input(null, { ...(ngDevMode ? { debugName: "triggerModeInput" } : /* istanbul ignore next */ {}), alias: 'triggerMode' });
-    closeDelay = signal(this.parent.closeDelay(), ...(ngDevMode ? [{ debugName: "closeDelay" }] : /* istanbul ignore next */ []));
-    triggerMode = signal(this.parent.triggerMode(), ...(ngDevMode ? [{ debugName: "triggerMode" }] : /* istanbul ignore next */ []));
-    constructor() {
-        effect(() => {
-            this.closeDelay.set(this.closeDelayInput() ?? this.parent.closeDelay());
-            this.triggerMode.set(this.triggerModeInput() ?? this.parent.triggerMode());
-        });
-    }
+    closeDelay = computed(() => this.closeDelayInput() ?? this.parent.closeDelay(), ...(ngDevMode ? [{ debugName: "closeDelay" }] : /* istanbul ignore next */ []));
+    triggerMode = computed(() => this.triggerModeInput() ?? this.parent.triggerMode(), ...(ngDevMode ? [{ debugName: "triggerMode" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuSub, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrDropdownMenuSub, isStandalone: true, selector: "[frDropdownMenuSub]", inputs: { closeDelayInput: { classPropertyName: "closeDelayInput", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, triggerModeInput: { classPropertyName: "triggerModeInput", publicName: "triggerMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "frame-dropdown-menu-sub" }, providers: [
             {
@@ -4703,9 +5259,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         class: 'frame-dropdown-menu-sub',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { closeDelayInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], triggerModeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerMode", required: false }] }] } });
+        }], propDecorators: { closeDelayInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], triggerModeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerMode", required: false }] }] } });
 
 const FR_DROPDOWN_MENU_CONTENT = new InjectionToken('FrDropdownMenuContent');
+/** Content slot for dropdown menu. */
 class FrDropdownMenuContent {
     templateRef = inject((TemplateRef));
     align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
@@ -4746,6 +5303,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     ],
                 }]
         }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignOffset", required: false }] }], debugVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "debugVisible", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }] } });
+/** Panel slot for dropdown menu. */
 class FrDropdownMenuPanel {
     side = inject(FR_DROPDOWN_MENU_CONTENT).side;
     tree = inject(FrDropdownMenuTree);
@@ -4774,6 +5332,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }] });
 
+/** Item slot for dropdown menu. */
 class FrDropdownMenuItem {
     inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
@@ -4792,16 +5351,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+/** Item slot for dropdown menu checkbox. */
 class FrDropdownMenuCheckboxItem {
     checkboxItem = inject(CdkMenuItemCheckbox);
+    lastChecked = false;
     checked = input(false, { ...(ngDevMode ? { debugName: "checked" } : /* istanbul ignore next */ {}), alias: 'checked',
         transform: booleanAttribute });
     inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    constructor() {
-        effect(() => {
-            this.checkboxItem.checked = this.checked();
-        });
+    ngDoCheck() {
+        const checked = this.checked();
+        if (checked === this.lastChecked) {
+            return;
+        }
+        this.lastChecked = checked;
+        this.checkboxItem.checked = checked;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuCheckboxItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrDropdownMenuCheckboxItem, isStandalone: true, selector: "button[frDropdownMenuCheckboxItem]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-checked": "checkboxItem.checked ? \"\" : null", "attr.data-inset": "inset() ? \"\" : null", "attr.data-variant": "variant()" }, classAttribute: "frame-dropdown-menu__item frame-dropdown-menu__checkbox-item" }, hostDirectives: [{ directive: i1$2.CdkMenuItemCheckbox }], ngImport: i0 });
@@ -4818,7 +5382,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '[attr.data-variant]': 'variant()',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+/** Group slot for dropdown menu radio. */
 class FrDropdownMenuRadioGroup {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrDropdownMenuRadioGroup, isStandalone: true, selector: "[frDropdownMenuRadioGroup]", host: { classAttribute: "frame-dropdown-menu__radio-group" }, hostDirectives: [{ directive: i1$2.CdkMenuGroup }], ngImport: i0 });
@@ -4833,16 +5398,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Item slot for dropdown menu radio. */
 class FrDropdownMenuRadioItem {
     radioItem = inject(CdkMenuItemRadio);
+    lastChecked = false;
     checked = input(false, { ...(ngDevMode ? { debugName: "checked" } : /* istanbul ignore next */ {}), alias: 'checked',
         transform: booleanAttribute });
     inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    constructor() {
-        effect(() => {
-            this.radioItem.checked = this.checked();
-        });
+    ngDoCheck() {
+        const checked = this.checked();
+        if (checked === this.lastChecked) {
+            return;
+        }
+        this.lastChecked = checked;
+        this.radioItem.checked = checked;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuRadioItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrDropdownMenuRadioItem, isStandalone: true, selector: "button[frDropdownMenuRadioItem]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-checked": "radioItem.checked ? \"\" : null", "attr.data-inset": "inset() ? \"\" : null", "attr.data-variant": "variant()" }, classAttribute: "frame-dropdown-menu__item frame-dropdown-menu__radio-item" }, hostDirectives: [{ directive: i1$2.CdkMenuItemRadio }], ngImport: i0 });
@@ -4859,7 +5429,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '[attr.data-variant]': 'variant()',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+/** Label slot for dropdown menu. */
 class FrDropdownMenuLabel {
     inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -4875,6 +5446,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }] } });
+/** Separator slot for dropdown menu. */
 class FrDropdownMenuSeparator {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrDropdownMenuSeparator, isStandalone: true, selector: "[frDropdownMenuSeparator]", host: { attributes: { "role": "separator" }, classAttribute: "frame-dropdown-menu__separator" }, ngImport: i0 });
@@ -4889,6 +5461,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Shortcut slot for dropdown menu. */
 class FrDropdownMenuShortcut {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuShortcut, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrDropdownMenuShortcut, isStandalone: true, selector: "[frDropdownMenuShortcut]", host: { classAttribute: "frame-dropdown-menu__shortcut" }, ngImport: i0 });
@@ -4902,6 +5475,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Indicator slot for dropdown menu item. */
 class FrDropdownMenuItemIndicator {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuItemIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrDropdownMenuItemIndicator, isStandalone: true, selector: "[frDropdownMenuItemIndicator]", host: { attributes: { "aria-hidden": "true" }, classAttribute: "frame-dropdown-menu__indicator" }, ngImport: i0 });
@@ -4917,6 +5491,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }] });
 
+/** Shared trigger behavior for root and nested dropdown menus. */
 class FrDropdownMenuTriggerBase {
     static CUSTOM_PROPERTY_PREFIX = '--frame-dropdown-menu-';
     cdkMenuTrigger = inject(CdkMenuTrigger);
@@ -4925,20 +5500,10 @@ class FrDropdownMenuTriggerBase {
     tree = inject(FrDropdownMenuTree);
     parent = inject(FR_DROPDOWN_MENU_PARENT);
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    menuContentOverride;
     constructor() {
         this.tree.register(this);
-        effect(() => {
-            const content = this.menuContent();
-            this.cdkMenuTrigger.menuTemplateRef = content?.templateRef ?? null;
-            this.cdkMenuTrigger.menuPosition = this.resolvePositions();
-            if (content?.isDebugVisible() && !this.cdkMenuTrigger.isOpen()) {
-                queueMicrotask(() => {
-                    if (!this.cdkMenuTrigger.isOpen()) {
-                        this.cdkMenuTrigger.open();
-                    }
-                });
-            }
-        });
+        queueMicrotask(() => this.syncCdkTrigger());
         this.cdkMenuTrigger.opened.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             this.tree.cancelClose();
             this.isOpen.set(true);
@@ -4947,7 +5512,7 @@ class FrDropdownMenuTriggerBase {
             });
         });
         this.cdkMenuTrigger.closed.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-            if (this.menuContent()?.isDebugVisible()) {
+            if (this.currentMenuContent()?.isDebugVisible()) {
                 queueMicrotask(() => {
                     if (!this.cdkMenuTrigger.isOpen()) {
                         this.cdkMenuTrigger.open();
@@ -4958,6 +5523,9 @@ class FrDropdownMenuTriggerBase {
             this.isOpen.set(false);
         });
     }
+    ngDoCheck() {
+        this.syncCdkTrigger();
+    }
     get triggerMode() {
         return this.triggerModeInput() ?? this.parent.triggerMode();
     }
@@ -4965,9 +5533,24 @@ class FrDropdownMenuTriggerBase {
         return this.parent.closeDelay();
     }
     resolvePositions() {
-        return (this.menuContent()?.getPositions(this.isSubmenuTrigger) ??
+        return (this.currentMenuContent()?.getPositions(this.isSubmenuTrigger) ??
             defaultPositions(this.isSubmenuTrigger));
     }
+    syncCdkTrigger() {
+        const content = this.currentMenuContent();
+        this.cdkMenuTrigger.menuTemplateRef = content?.templateRef ?? null;
+        this.cdkMenuTrigger.menuPosition = this.resolvePositions();
+        if (content?.isDebugVisible() && !this.cdkMenuTrigger.isOpen()) {
+            queueMicrotask(() => {
+                if (!this.cdkMenuTrigger.isOpen()) {
+                    this.cdkMenuTrigger.open();
+                }
+            });
+        }
+    }
+    currentMenuContent() {
+        return this.menuContentOverride !== undefined ? this.menuContentOverride : this.menuContent();
+    }
     openFromHover() {
         if (this.triggerMode === 'hover' || this.triggerMode === 'both') {
             this.tree.cancelClose();
@@ -4981,7 +5564,7 @@ class FrDropdownMenuTriggerBase {
         this.openFromHover();
     }
     handleMouseLeave() {
-        if (this.menuContent()?.isDebugVisible()) {
+        if (this.currentMenuContent()?.isDebugVisible()) {
             return;
         }
         if (this.triggerMode === 'hover' || this.triggerMode === 'both') {
@@ -4989,13 +5572,23 @@ class FrDropdownMenuTriggerBase {
         }
     }
     close() {
-        if (this.menuContent()?.isDebugVisible()) {
+        if (this.currentMenuContent()?.isDebugVisible()) {
             return;
         }
         if (this.cdkMenuTrigger.isOpen()) {
             this.cdkMenuTrigger.close();
         }
     }
+    open() {
+        this.syncCdkTrigger();
+        if (!this.cdkMenuTrigger.isOpen()) {
+            this.cdkMenuTrigger.open();
+        }
+    }
+    setMenuContentOverride(content) {
+        this.menuContentOverride = content;
+        this.syncCdkTrigger();
+    }
     ngOnDestroy() {
         this.tree.unregister(this);
     }
@@ -5008,6 +5601,7 @@ class FrDropdownMenuTriggerBase {
         }
         const menuPanel = overlayElement.querySelector('.frame-dropdown-menu__content') ?? overlayElement;
         const sourceStyles = getComputedStyle(this.elementRef.nativeElement);
+        // CDK portals the menu, so trigger-scoped CSS variables must be mirrored manually.
         for (let index = 0; index < sourceStyles.length; index += 1) {
             const propertyName = sourceStyles.item(index);
             if (!propertyName.startsWith(FrDropdownMenuTriggerBase.CUSTOM_PROPERTY_PREFIX)) {
@@ -5030,6 +5624,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], ctorParameters: () => [] });
+/** Trigger control for dropdown menu. */
 class FrDropdownMenuTrigger extends FrDropdownMenuTriggerBase {
     menuContent = input(null, { ...(ngDevMode ? { debugName: "menuContent" } : /* istanbul ignore next */ {}), alias: 'frDropdownMenuTrigger' });
     triggerModeInput = input(null, { ...(ngDevMode ? { debugName: "triggerModeInput" } : /* istanbul ignore next */ {}), alias: 'triggerMode' });
@@ -5048,6 +5643,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { menuContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "frDropdownMenuTrigger", required: false }] }], triggerModeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerMode", required: false }] }] } });
+/** Trigger control for dropdown menu sub. */
 class FrDropdownMenuSubTrigger extends FrDropdownMenuTriggerBase {
     menuContent = input(null, { ...(ngDevMode ? { debugName: "menuContent" } : /* istanbul ignore next */ {}), alias: 'frDropdownMenuSubTrigger' });
     inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -5079,6 +5675,7 @@ const FR_DROPDOWN_MENU_ITEM_VARIANTS = ['default', 'destructive'];
 const FR_EMPTY_MEDIA_VARIANTS = ['default', 'icon'];
 const FR_EMPTY_ORIENTATIONS = ['vertical', 'horizontal'];
 const FR_EMPTY_VARIANTS = ['default', 'outline', 'soft'];
+/** Empty-state container with orientation and variant controls. */
 class FrEmpty {
     orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
@@ -5096,6 +5693,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+/** Header slot for empty. */
 class FrEmptyHeader {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrEmptyHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrEmptyHeader, isStandalone: true, selector: "[frEmptyHeader], frame-empty-header", host: { classAttribute: "frame-empty__header" }, ngImport: i0 });
@@ -5109,6 +5707,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Media slot for empty. */
 class FrEmptyMedia {
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrEmptyMedia, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -5124,6 +5723,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+/** Title slot for empty. */
 class FrEmptyTitle {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrEmptyTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrEmptyTitle, isStandalone: true, selector: "[frEmptyTitle], frame-empty-title", host: { classAttribute: "frame-empty__title" }, ngImport: i0 });
@@ -5137,6 +5737,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Description slot for empty. */
 class FrEmptyDescription {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrEmptyDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrEmptyDescription, isStandalone: true, selector: "[frEmptyDescription], frame-empty-description", host: { classAttribute: "frame-empty__description" }, ngImport: i0 });
@@ -5150,6 +5751,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Content slot for empty. */
 class FrEmptyContent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrEmptyContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrEmptyContent, isStandalone: true, selector: "[frEmptyContent], frame-empty-content", host: { classAttribute: "frame-empty__content" }, ngImport: i0 });
@@ -5166,6 +5768,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 
 const FR_FIELD_LEGEND_VARIANTS = ['legend', 'label'];
 const FR_FIELD_ORIENTATIONS = ['vertical', 'horizontal'];
+/** Fieldset wrapper for related form fields. */
 class FrFieldSet {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrFieldSet, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrFieldSet, isStandalone: true, selector: "fieldset[frFieldSet], frame-field-set", host: { classAttribute: "frame-field-set" }, ngImport: i0 });
@@ -5179,6 +5782,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Legend slot for field. */
 class FrFieldLegend {
     variant = input('legend', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrFieldLegend, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -5194,6 +5798,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+/** Group slot for field. */
 class FrFieldGroup {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrFieldGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrFieldGroup, isStandalone: true, selector: "[frFieldGroup], frame-field-group", host: { classAttribute: "frame-field-group" }, ngImport: i0 });
@@ -5207,6 +5812,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Form field row with orientation and responsive layout. */
 class FrField {
     orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -5227,6 +5833,7 @@ 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 }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }] } });
+/** Content slot for field. */
 class FrFieldContent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrFieldContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrFieldContent, isStandalone: true, selector: "[frFieldContent], frame-field-content", host: { classAttribute: "frame-field-content" }, ngImport: i0 });
@@ -5240,6 +5847,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Label slot for field. */
 class FrFieldLabel {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrFieldLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrFieldLabel, isStandalone: true, selector: "[frFieldLabel], frame-field-label", host: { classAttribute: "frame-field-label" }, ngImport: i0 });
@@ -5253,6 +5861,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Description slot for field. */
 class FrFieldDescription {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrFieldDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrFieldDescription, isStandalone: true, selector: "[frFieldDescription], frame-field-description", host: { classAttribute: "frame-field-description" }, ngImport: i0 });
@@ -5266,6 +5875,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Separator slot for field. */
 class FrFieldSeparator {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrFieldSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrFieldSeparator, isStandalone: true, selector: "[frFieldSeparator], frame-field-separator", host: { attributes: { "role": "separator" }, classAttribute: "frame-field-separator" }, ngImport: i0 });
@@ -5280,6 +5890,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Error slot for field. */
 class FrFieldError {
     errors = input(undefined, ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
     message() {
@@ -5290,12 +5901,12 @@ class FrFieldError {
         return error?.message ?? '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrFieldError, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrFieldError, isStandalone: true, selector: "[frFieldError], frame-field-error", inputs: { errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-live": "polite" }, classAttribute: "frame-field-error" }, ngImport: i0, template: `
-    @if (message()) {
-      <span>{{ message() }}</span>
-    } @else {
-      <ng-content />
-    }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrFieldError, isStandalone: true, selector: "[frFieldError], frame-field-error", inputs: { errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-live": "polite" }, classAttribute: "frame-field-error" }, ngImport: i0, template: `
+    @if (message()) {
+      <span>{{ message() }}</span>
+    } @else {
+      <ng-content />
+    }
   `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrFieldError, decorators: [{
@@ -5306,12 +5917,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         class: 'frame-field-error',
                         'aria-live': 'polite',
                     },
-                    template: `
-    @if (message()) {
-      <span>{{ message() }}</span>
-    } @else {
-      <ng-content />
-    }
+                    template: `
+    @if (message()) {
+      <span>{{ message() }}</span>
+    } @else {
+      <ng-content />
+    }
   `,
                 }]
         }], propDecorators: { errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }] } });
@@ -5323,6 +5934,7 @@ function provideDsValueAccessor(type) {
         multi: true,
     };
 }
+/** Base ControlValueAccessor implementation for FrameUI form controls. */
 class FrControlValueAccessor {
     injector = inject(Injector);
     FrControlDestroyRef = inject(DestroyRef);
@@ -5448,6 +6060,7 @@ function oppositeSide$1(side) {
 
 const FR_HOVER_CARD_CONTROLLER = new InjectionToken('FrHoverCardController');
 
+/** Content slot for hover card. */
 class FrHoverCardContent {
     templateRef = inject((TemplateRef));
     align = input('center', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
@@ -5473,6 +6086,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     exportAs: 'frHoverCardContent',
                 }]
         }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignOffset", required: false }] }], debugVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "debugVisible", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }] } });
+/** Panel slot for hover card. */
 class FrHoverCardPanel {
     content = inject(FrHoverCardContent);
     root = inject(FR_HOVER_CARD_CONTROLLER);
@@ -5504,6 +6118,7 @@ const DEFAULT_POSITIONS$1 = buildHoverCardPositions({
     side: 'bottom',
     sideOffset: 8,
 });
+/** Root controller for hover card. */
 class FrHoverCardRoot {
     openDelay = input(700, ...(ngDevMode ? [{ debugName: "openDelay" }] : /* istanbul ignore next */ []));
     closeDelay = input(300, ...(ngDevMode ? [{ debugName: "closeDelay" }] : /* istanbul ignore next */ []));
@@ -5637,24 +6252,24 @@ class FrHoverCardRoot {
                 provide: FR_HOVER_CARD_CONTROLLER,
                 useExisting: FrHoverCardRoot,
             },
-        ], exportAs: ["frHoverCard"], ngImport: i0, template: `
-    <span cdkOverlayOrigin #origin="cdkOverlayOrigin" class="frame-hover-card__anchor">
-      <ng-content />
-    </span>
-
-    <ng-template
-      cdkConnectedOverlay
-      [cdkConnectedOverlayOrigin]="origin"
-      [cdkConnectedOverlayOpen]="isOpen()"
-      [cdkConnectedOverlayPositions]="positions()"
-      [cdkConnectedOverlayPanelClass]="overlayPanelClasses()"
-      [cdkConnectedOverlayPush]="true"
-      [cdkConnectedOverlayViewportMargin]="12"
-      (detach)="close()"
-      (positionChange)="handlePositionChange($event)"
-    >
-      <ng-container [ngTemplateOutlet]="content()?.templateRef ?? null" />
-    </ng-template>
+        ], exportAs: ["frHoverCard"], ngImport: i0, template: `
+    <span cdkOverlayOrigin #origin="cdkOverlayOrigin" class="frame-hover-card__anchor">
+      <ng-content />
+    </span>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="isOpen()"
+      [cdkConnectedOverlayPositions]="positions()"
+      [cdkConnectedOverlayPanelClass]="overlayPanelClasses()"
+      [cdkConnectedOverlayPush]="true"
+      [cdkConnectedOverlayViewportMargin]="12"
+      (detach)="close()"
+      (positionChange)="handlePositionChange($event)"
+    >
+      <ng-container [ngTemplateOutlet]="content()?.templateRef ?? null" />
+    </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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrHoverCardRoot, decorators: [{
@@ -5674,40 +6289,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         class: 'frame-hover-card',
                         '[attr.data-state]': 'isOpen() ? "open" : "closed"',
                     },
-                    template: `
-    <span cdkOverlayOrigin #origin="cdkOverlayOrigin" class="frame-hover-card__anchor">
-      <ng-content />
-    </span>
-
-    <ng-template
-      cdkConnectedOverlay
-      [cdkConnectedOverlayOrigin]="origin"
-      [cdkConnectedOverlayOpen]="isOpen()"
-      [cdkConnectedOverlayPositions]="positions()"
-      [cdkConnectedOverlayPanelClass]="overlayPanelClasses()"
-      [cdkConnectedOverlayPush]="true"
-      [cdkConnectedOverlayViewportMargin]="12"
-      (detach)="close()"
-      (positionChange)="handlePositionChange($event)"
-    >
-      <ng-container [ngTemplateOutlet]="content()?.templateRef ?? null" />
-    </ng-template>
+                    template: `
+    <span cdkOverlayOrigin #origin="cdkOverlayOrigin" class="frame-hover-card__anchor">
+      <ng-content />
+    </span>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="isOpen()"
+      [cdkConnectedOverlayPositions]="positions()"
+      [cdkConnectedOverlayPanelClass]="overlayPanelClasses()"
+      [cdkConnectedOverlayPush]="true"
+      [cdkConnectedOverlayViewportMargin]="12"
+      (detach)="close()"
+      (positionChange)="handlePositionChange($event)"
+    >
+      <ng-container [ngTemplateOutlet]="content()?.templateRef ?? null" />
+    </ng-template>
   `,
                 }]
         }], ctorParameters: () => [], propDecorators: { openDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDelay", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], debugVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "debugVisible", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }] } });
 
+/** Trigger control for hover card. */
 class FrHoverCardTrigger {
     content = input(null, { ...(ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {}), alias: 'frHoverCardTrigger' });
     root = inject(FR_HOVER_CARD_CONTROLLER);
     elementRef = inject(ElementRef);
+    lastContent = null;
     constructor() {
         this.root.registerTrigger(this.elementRef.nativeElement);
-        effect(() => {
-            const content = this.content();
-            if (content) {
-                this.root.setContent(content);
-            }
-        });
+    }
+    ngDoCheck() {
+        const content = this.content();
+        if (content && content !== this.lastContent) {
+            this.root.setContent(content);
+        }
+        this.lastContent = content;
     }
     handleMouseEnter() {
         this.root.setContent(this.content());
@@ -5753,6 +6371,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 const FR_HOVER_CARD_ALIGNMENTS = ['start', 'center', 'end'];
 const FR_HOVER_CARD_SIDES = ['top', 'right', 'bottom', 'left'];
 
+/** Input wrapper for labels, controls, and validation text. */
 class FrInput {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrInput, isStandalone: true, selector: "input[frInput]", host: { classAttribute: "frame-input" }, ngImport: i0 });
@@ -5766,6 +6385,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Field slot for input. */
 class FrInputField {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputField, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrInputField, isStandalone: true, selector: "[frInputField], frame-input-field", host: { classAttribute: "frame-input-field" }, ngImport: i0 });
@@ -5779,6 +6399,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Header slot for input. */
 class FrInputHeader {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrInputHeader, isStandalone: true, selector: "[frInputHeader], frame-input-header", host: { classAttribute: "frame-input-header" }, ngImport: i0 });
@@ -5792,6 +6413,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Control slot for input. */
 class FrInputControl {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputControl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrInputControl, isStandalone: true, selector: "[frInputControl], frame-input-control", host: { classAttribute: "frame-input-control" }, ngImport: i0 });
@@ -5805,6 +6427,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Group slot for input field. */
 class FrInputFieldGroup {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputFieldGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrInputFieldGroup, isStandalone: true, selector: "[frInputFieldGroup], frame-input-field-group", host: { classAttribute: "frame-input-field-group" }, ngImport: i0 });
@@ -5818,6 +6441,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Label slot for input. */
 class FrInputLabel {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrInputLabel, isStandalone: true, selector: "[frInputLabel], frame-input-label", host: { classAttribute: "frame-input-label" }, ngImport: i0 });
@@ -5831,6 +6455,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Description slot for input. */
 class FrInputDescription {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrInputDescription, isStandalone: true, selector: "[frInputDescription], frame-input-description", host: { classAttribute: "frame-input-description" }, ngImport: i0 });
@@ -5844,6 +6469,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Error slot for input. */
 class FrInputError {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputError, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrInputError, isStandalone: true, selector: "[frInputError], frame-input-error", host: { attributes: { "aria-live": "polite" }, classAttribute: "frame-input-error" }, ngImport: i0 });
@@ -5858,6 +6484,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Badge slot for input. */
 class FrInputBadge {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputBadge, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrInputBadge, isStandalone: true, selector: "[frInputBadge], frame-input-badge", host: { classAttribute: "frame-input-badge" }, ngImport: i0 });
@@ -5874,6 +6501,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 
 const FR_INPUT_GROUP_ADDON_ALIGNS = ['inline-start', 'inline-end'];
 const FR_INPUT_GROUP_ADDON_VARIANTS = ['default', 'ghost'];
+/** Group slot for input. */
 class FrInputGroup {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrInputGroup, isStandalone: true, selector: "[frInputGroup], frame-input-group", host: { classAttribute: "frame-input-group" }, ngImport: i0 });
@@ -5887,6 +6515,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Addon slot for grouped inputs. */
 class FrInputGroupAddon {
     align = input('inline-start', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
@@ -5904,6 +6533,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+/** Text slot for grouped inputs. */
 class FrInputGroupText {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputGroupText, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrInputGroupText, isStandalone: true, selector: "[frInputGroupText], frame-input-group-text", host: { classAttribute: "frame-input-group__text" }, ngImport: i0 });
@@ -5917,6 +6547,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Input control slot inside an input group. */
 class FrInputGroupInput {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputGroupInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrInputGroupInput, isStandalone: true, selector: "input[frInputGroupInput]", host: { classAttribute: "frame-input-group__input" }, hostDirectives: [{ directive: FrInput }], ngImport: i0 });
@@ -5935,6 +6566,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 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');
+/** One-time-code input with grouped slots. */
 class FrInputOtp extends FrControlValueAccessor$1 {
     nativeInput = viewChild('nativeInput', ...(ngDevMode ? [{ debugName: "nativeInput" }] : /* istanbul ignore next */ []));
     maxLength = input(6, { ...(ngDevMode ? { debugName: "maxLength" } : /* istanbul ignore next */ {}), transform: numberAttribute });
@@ -6037,6 +6669,7 @@ class FrInputOtp extends FrControlValueAccessor$1 {
     replaceFrom(index, text) {
         const value = this.value();
         const start = clampNumber(index, 0, this.maxLength());
+        // The hidden input is the source of truth; visual slots are projections of this string.
         const next = `${value.slice(0, start)}${text}${value.slice(start + text.length)}`;
         return this.sanitize(next);
     }
@@ -6134,6 +6767,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
   `,
                 }]
         }], 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"] }] } });
+/** Group slot for input otp. */
 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 });
@@ -6147,6 +6781,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Input slot for one OTP character. */
 class FrInputOtpSlot {
     root = inject(FR_INPUT_OTP_CONTROLLER);
     index = input.required(...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
@@ -6183,6 +6818,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
   `,
                 }]
         }], propDecorators: { index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
+/** Separator slot for input otp. */
 class FrInputOtpSeparator {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputOtpSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrInputOtpSeparator, isStandalone: true, selector: "[frInputOtpSeparator], frame-input-otp-separator", host: { attributes: { "role": "separator", "aria-hidden": "true" }, classAttribute: "frame-input-otp__separator" }, ngImport: i0 });
@@ -6215,6 +6851,7 @@ function toMatcher(pattern) {
 const FR_ITEM_VARIANTS = ['default', 'outline', 'muted'];
 const FR_ITEM_SIZES = ['default', 'sm', 'xs'];
 const FR_ITEM_MEDIA_VARIANTS = ['default', 'icon', 'image', 'avatar'];
+/** Composable item row for lists and menus. */
 class FrItem {
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -6236,6 +6873,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+/** Group slot for item. */
 class FrItemGroup {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrItemGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrItemGroup, isStandalone: true, selector: "[frItemGroup], frame-item-group", host: { classAttribute: "frame-item-group" }, ngImport: i0 });
@@ -6249,6 +6887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Separator slot for item. */
 class FrItemSeparator {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrItemSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrItemSeparator, isStandalone: true, selector: "[frItemSeparator], frame-item-separator", host: { attributes: { "role": "separator" }, classAttribute: "frame-item-separator" }, ngImport: i0 });
@@ -6263,6 +6902,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Header slot for item. */
 class FrItemHeader {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrItemHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrItemHeader, isStandalone: true, selector: "[frItemHeader], frame-item-header", host: { classAttribute: "frame-item__header" }, ngImport: i0 });
@@ -6276,6 +6916,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Media slot for item. */
 class FrItemMedia {
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrItemMedia, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -6291,6 +6932,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+/** Content slot for item. */
 class FrItemContent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrItemContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrItemContent, isStandalone: true, selector: "[frItemContent], frame-item-content", host: { classAttribute: "frame-item__content" }, ngImport: i0 });
@@ -6304,6 +6946,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Title slot for item. */
 class FrItemTitle {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrItemTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrItemTitle, isStandalone: true, selector: "[frItemTitle], frame-item-title", host: { classAttribute: "frame-item__title" }, ngImport: i0 });
@@ -6317,6 +6960,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Description slot for item. */
 class FrItemDescription {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrItemDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrItemDescription, isStandalone: true, selector: "[frItemDescription], frame-item-description", host: { classAttribute: "frame-item__description" }, ngImport: i0 });
@@ -6330,6 +6974,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Actions slot for item. */
 class FrItemActions {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrItemActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrItemActions, isStandalone: true, selector: "[frItemActions], frame-item-actions", host: { classAttribute: "frame-item__actions" }, ngImport: i0 });
@@ -6343,6 +6988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Footer slot for item. */
 class FrItemFooter {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrItemFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrItemFooter, isStandalone: true, selector: "[frItemFooter], frame-item-footer", host: { classAttribute: "frame-item__footer" }, ngImport: i0 });
@@ -6358,6 +7004,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         }] });
 
 const FR_MENUBAR_PARENT = new InjectionToken('FrMenuBarParent');
+/** Menubar root for top-level menu interactions. */
 class FrMenuBar {
     closeDelay = input(140, ...(ngDevMode ? [{ debugName: "closeDelay" }] : /* istanbul ignore next */ []));
     triggerMode = input('both', ...(ngDevMode ? [{ debugName: "triggerMode" }] : /* istanbul ignore next */ []));
@@ -6395,6 +7042,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], triggerMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerMode", required: false }] }] } });
+/** Top-level menu scope inside a menubar. */
 class FrMenuBarMenu {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrMenuBarMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrMenuBarMenu, isStandalone: true, selector: "[frMenuBarMenu], frame-menubar-menu", host: { attributes: { "role": "none" }, classAttribute: "frame-menubar__menu" }, ngImport: i0 });
@@ -6409,6 +7057,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Trigger control for menu bar. */
 class FrMenuBarTrigger {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrMenuBarTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrMenuBarTrigger, isStandalone: true, selector: "[frMenuBarTrigger]", host: { attributes: { "role": "menuitem" }, classAttribute: "frame-menubar__trigger" }, hostDirectives: [{ directive: i1$3.FrDropdownMenuTrigger, inputs: ["frDropdownMenuTrigger", "frMenuBarTrigger", "triggerMode", "triggerMode"] }], ngImport: i0 });
@@ -6429,6 +7078,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Content slot for menu bar. */
 class FrMenuBarContent extends FrDropdownMenuContent$1 {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrMenuBarContent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrMenuBarContent, isStandalone: true, selector: "ng-template[frMenuBarContent], ng-template[frMenuBarSubContent]", providers: [
@@ -6459,6 +7109,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     ],
                 }]
         }] });
+/** Panel slot for menu bar. */
 class FrMenuBarPanel {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrMenuBarPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrMenuBarPanel, isStandalone: true, selector: "[frMenuBarPanel]", host: { classAttribute: "frame-menubar__content" }, hostDirectives: [{ directive: i1$3.FrDropdownMenuPanel }], ngImport: i0 });
@@ -6473,6 +7124,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Item slot for menu bar. */
 class FrMenuBarItem {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrMenuBarItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrMenuBarItem, isStandalone: true, selector: "[frMenuBarItem]", host: { classAttribute: "frame-menubar__item" }, hostDirectives: [{ directive: i1$3.FrDropdownMenuItem, inputs: ["inset", "inset", "variant", "variant"] }], ngImport: i0 });
@@ -6492,6 +7144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Item slot for menu bar checkbox. */
 class FrMenuBarCheckboxItem {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrMenuBarCheckboxItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrMenuBarCheckboxItem, isStandalone: true, selector: "button[frMenuBarCheckboxItem]", host: { classAttribute: "frame-menubar__checkbox-item" }, hostDirectives: [{ directive: i1$3.FrDropdownMenuCheckboxItem, inputs: ["checked", "checked", "inset", "inset", "variant", "variant"] }], ngImport: i0 });
@@ -6511,6 +7164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Group slot for menu bar radio. */
 class FrMenuBarRadioGroup {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrMenuBarRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrMenuBarRadioGroup, isStandalone: true, selector: "[frMenuBarRadioGroup]", host: { classAttribute: "frame-menubar__radio-group" }, hostDirectives: [{ directive: i1$3.FrDropdownMenuRadioGroup }], ngImport: i0 });
@@ -6525,6 +7179,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Item slot for menu bar radio. */
 class FrMenuBarRadioItem {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrMenuBarRadioItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrMenuBarRadioItem, isStandalone: true, selector: "button[frMenuBarRadioItem]", host: { classAttribute: "frame-menubar__radio-item" }, hostDirectives: [{ directive: i1$3.FrDropdownMenuRadioItem, inputs: ["checked", "checked", "inset", "inset", "variant", "variant"] }], ngImport: i0 });
@@ -6544,6 +7199,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Label slot for menu bar. */
 class FrMenuBarLabel {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrMenuBarLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrMenuBarLabel, isStandalone: true, selector: "[frMenuBarLabel]", host: { classAttribute: "frame-menubar__label" }, hostDirectives: [{ directive: i1$3.FrDropdownMenuLabel, inputs: ["inset", "inset"] }], ngImport: i0 });
@@ -6563,6 +7219,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Separator slot for menu bar. */
 class FrMenuBarSeparator {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrMenuBarSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrMenuBarSeparator, isStandalone: true, selector: "[frMenuBarSeparator]", host: { classAttribute: "frame-menubar__separator" }, hostDirectives: [{ directive: i1$3.FrDropdownMenuSeparator }], ngImport: i0 });
@@ -6577,6 +7234,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Shortcut slot for menu bar. */
 class FrMenuBarShortcut {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrMenuBarShortcut, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrMenuBarShortcut, isStandalone: true, selector: "[frMenuBarShortcut]", host: { classAttribute: "frame-menubar__shortcut" }, hostDirectives: [{ directive: i1$3.FrDropdownMenuShortcut }], ngImport: i0 });
@@ -6591,6 +7249,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Indicator slot for menu bar item. */
 class FrMenuBarItemIndicator {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrMenuBarItemIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrMenuBarItemIndicator, isStandalone: true, selector: "[frMenuBarItemIndicator]", host: { classAttribute: "frame-menubar__indicator" }, hostDirectives: [{ directive: i1$3.FrDropdownMenuItemIndicator }], ngImport: i0 });
@@ -6605,6 +7264,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Nested submenu scope inside a menubar. */
 class FrMenuBarSub {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrMenuBarSub, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrMenuBarSub, isStandalone: true, selector: "[frMenuBarSub]", host: { classAttribute: "frame-menubar__sub" }, hostDirectives: [{ directive: i1$3.FrDropdownMenuSub, inputs: ["closeDelay", "closeDelay", "triggerMode", "triggerMode"] }], ngImport: i0 });
@@ -6624,6 +7284,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Trigger control for menu bar sub. */
 class FrMenuBarSubTrigger {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrMenuBarSubTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrMenuBarSubTrigger, isStandalone: true, selector: "[frMenuBarSubTrigger]", host: { classAttribute: "frame-menubar__sub-trigger" }, hostDirectives: [{ directive: i1$3.FrDropdownMenuSubTrigger, inputs: ["frDropdownMenuSubTrigger", "frMenuBarSubTrigger", "inset", "inset", "triggerMode", "triggerMode", "variant", "variant"] }], ngImport: i0 });
@@ -6644,6 +7305,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }] });
 
+/** Content slot for modal. */
 class FrModalContent {
     templateRef = inject((TemplateRef));
     ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
@@ -6696,6 +7358,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], backdropClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClass", required: false }] }], closeOnDestroy: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnDestroy", required: false }] }], closeOnNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnNavigation", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], disableClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableClose", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
 
+/** Close control for modal. */
 class FrModalClose {
     dialogRef = inject(DialogRef, { optional: true });
     result = input(undefined, { ...(ngDevMode ? { debugName: "result" } : /* istanbul ignore next */ {}), alias: 'frModalClose' });
@@ -6715,24 +7378,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { result: [{ type: i0.Input, args: [{ isSignal: true, alias: "frModalClose", required: false }] }] } });
+/** Panel slot for modal. */
 class FrModalPanel {
     scrollable = input(false, { ...(ngDevMode ? { debugName: "scrollable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     showCloseButton = input(true, { ...(ngDevMode ? { debugName: "showCloseButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     stickyFooter = input(false, { ...(ngDevMode ? { debugName: "stickyFooter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrModalPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrModalPanel, isStandalone: true, selector: "[frModalPanel], frame-modal-panel", inputs: { scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, stickyFooter: { classPropertyName: "stickyFooter", publicName: "stickyFooter", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-scrollable": "scrollable() ? \"\" : null", "attr.data-sticky-footer": "stickyFooter() ? \"\" : null", "attr.data-size": "size()" }, classAttribute: "frame-modal__panel" }, ngImport: i0, template: `
-    <ng-content />
-    @if (showCloseButton()) {
-      <button
-        class="frame-modal__close"
-        frModalClose
-        type="button"
-        aria-label="Close dialog"
-      >
-        <span aria-hidden="true">×</span>
-      </button>
-    }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrModalPanel, isStandalone: true, selector: "[frModalPanel], frame-modal-panel", inputs: { scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, stickyFooter: { classPropertyName: "stickyFooter", publicName: "stickyFooter", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-scrollable": "scrollable() ? \"\" : null", "attr.data-sticky-footer": "stickyFooter() ? \"\" : null", "attr.data-size": "size()" }, classAttribute: "frame-modal__panel" }, ngImport: i0, template: `
+    <ng-content />
+    @if (showCloseButton()) {
+      <button
+        class="frame-modal__close"
+        frModalClose
+        type="button"
+        aria-label="Close dialog"
+      >
+        <span aria-hidden="true">×</span>
+      </button>
+    }
   `, isInline: true, dependencies: [{ kind: "directive", type: FrModalClose, selector: "[frModalClose]", inputs: ["frModalClose"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrModalPanel, decorators: [{
@@ -6745,22 +7409,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '[attr.data-sticky-footer]': 'stickyFooter() ? "" : null',
                         '[attr.data-size]': 'size()',
                     },
-                    template: `
-    <ng-content />
-    @if (showCloseButton()) {
-      <button
-        class="frame-modal__close"
-        frModalClose
-        type="button"
-        aria-label="Close dialog"
-      >
-        <span aria-hidden="true">×</span>
-      </button>
-    }
+                    template: `
+    <ng-content />
+    @if (showCloseButton()) {
+      <button
+        class="frame-modal__close"
+        frModalClose
+        type="button"
+        aria-label="Close dialog"
+      >
+        <span aria-hidden="true">×</span>
+      </button>
+    }
   `,
                     imports: [FrModalClose],
                 }]
         }], propDecorators: { scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], stickyFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyFooter", required: false }] }] } });
+/** Header slot for modal. */
 class FrModalHeader {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrModalHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrModalHeader, isStandalone: true, selector: "[frModalHeader], frame-modal-header", host: { classAttribute: "frame-modal__header" }, ngImport: i0 });
@@ -6774,6 +7439,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Body slot for modal. */
 class FrModalBody {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrModalBody, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrModalBody, isStandalone: true, selector: "[frModalBody], frame-modal-body", host: { classAttribute: "frame-modal__body" }, ngImport: i0 });
@@ -6787,6 +7453,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Footer slot for modal. */
 class FrModalFooter {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrModalFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrModalFooter, isStandalone: true, selector: "[frModalFooter], frame-modal-footer", host: { classAttribute: "frame-modal__footer" }, ngImport: i0 });
@@ -6800,6 +7467,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Title slot for modal. */
 class FrModalTitle {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrModalTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrModalTitle, isStandalone: true, selector: "[frModalTitle], frame-modal-title", host: { classAttribute: "frame-modal__title" }, ngImport: i0 });
@@ -6813,6 +7481,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Description slot for modal. */
 class FrModalDescription {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrModalDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrModalDescription, isStandalone: true, selector: "[frModalDescription], frame-modal-description", host: { classAttribute: "frame-modal__description" }, ngImport: i0 });
@@ -6827,12 +7496,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }] });
 
+/** Reference handle for an opened modal. */
 class FrModalRef extends DialogRef {
 }
 
 const FR_MODAL_DATA = DIALOG_DATA;
 const FR_MODAL_REF = FrModalRef;
 
+/** Default shell for modal content, title, and footer actions. */
 class FrModalShell {
     dialogRef = inject((DialogRef));
     injector = inject(Injector);
@@ -6852,51 +7523,51 @@ class FrModalShell {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrModalShell, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrModalShell, isStandalone: true, selector: "frame-modal-shell", ngImport: i0, template: `
-    <div
-      frModalPanel
-      [size]="options.size ?? 'md'"
-      [showCloseButton]="options.showCloseButton ?? true"
-      [scrollable]="options.scrollable ?? false"
-      [stickyFooter]="options.stickyFooter ?? false"
-    >
-      @if (options.title || options.description) {
-        <div frModalHeader>
-          @if (options.title) {
-            <h2 frModalTitle>{{ options.title }}</h2>
-          }
-
-          @if (options.description) {
-            <p frModalDescription>{{ options.description }}</p>
-          }
-        </div>
-      }
-
-      <div frModalBody>
-        <ng-container
-          [ngComponentOutlet]="options.bodyComponent"
-          [ngComponentOutletInputs]="options.bodyInputs ?? {}"
-          [ngComponentOutletInjector]="bodyInjector"
-        />
-      </div>
-
-      @if (options.footerActions?.length) {
-        <div frModalFooter>
-          @for (action of options.footerActions; track action.label) {
-            <button
-              frButton
-              type="button"
-              [appearance]="action.appearance ?? 'primary'"
-              [disabled]="action.disabled ?? false"
-              [attr.aria-label]="action.ariaLabel ?? null"
-              (click)="handleAction(action)"
-            >
-              <span frButtonLabel>{{ action.label }}</span>
-            </button>
-          }
-        </div>
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrModalShell, isStandalone: true, selector: "frame-modal-shell", ngImport: i0, template: `
+    <div
+      frModalPanel
+      [size]="options.size ?? 'md'"
+      [showCloseButton]="options.showCloseButton ?? true"
+      [scrollable]="options.scrollable ?? false"
+      [stickyFooter]="options.stickyFooter ?? false"
+    >
+      @if (options.title || options.description) {
+        <div frModalHeader>
+          @if (options.title) {
+            <h2 frModalTitle>{{ options.title }}</h2>
+          }
+
+          @if (options.description) {
+            <p frModalDescription>{{ options.description }}</p>
+          }
+        </div>
+      }
+
+      <div frModalBody>
+        <ng-container
+          [ngComponentOutlet]="options.bodyComponent"
+          [ngComponentOutletInputs]="options.bodyInputs ?? {}"
+          [ngComponentOutletInjector]="bodyInjector"
+        />
+      </div>
+
+      @if (options.footerActions?.length) {
+        <div frModalFooter>
+          @for (action of options.footerActions; track action.label) {
+            <button
+              frButton
+              type="button"
+              [appearance]="action.appearance ?? 'primary'"
+              [disabled]="action.disabled ?? false"
+              [attr.aria-label]="action.ariaLabel ?? null"
+              (click)="handleAction(action)"
+            >
+              <span frButtonLabel>{{ action.label }}</span>
+            </button>
+          }
+        </div>
+      }
+    </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: FrButton$1, selector: "a[frButton], button[frButton]", inputs: ["appearance", "disabled", "loading", "loadingDisplay", "radius", "size"] }, { kind: "directive", type: FrButtonLabel$1, selector: "[frButtonLabel]" }, { kind: "directive", type: FrModalBody, selector: "[frModalBody], frame-modal-body" }, { kind: "directive", type: FrModalDescription, selector: "[frModalDescription], frame-modal-description" }, { kind: "directive", type: FrModalFooter, selector: "[frModalFooter], frame-modal-footer" }, { kind: "directive", type: FrModalHeader, selector: "[frModalHeader], frame-modal-header" }, { kind: "component", type: FrModalPanel, selector: "[frModalPanel], frame-modal-panel", inputs: ["scrollable", "showCloseButton", "size", "stickyFooter"] }, { kind: "directive", type: FrModalTitle, selector: "[frModalTitle], frame-modal-title" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrModalShell, decorators: [{
@@ -6914,57 +7585,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         FrModalTitle,
                         NgComponentOutlet,
                     ],
-                    template: `
-    <div
-      frModalPanel
-      [size]="options.size ?? 'md'"
-      [showCloseButton]="options.showCloseButton ?? true"
-      [scrollable]="options.scrollable ?? false"
-      [stickyFooter]="options.stickyFooter ?? false"
-    >
-      @if (options.title || options.description) {
-        <div frModalHeader>
-          @if (options.title) {
-            <h2 frModalTitle>{{ options.title }}</h2>
-          }
-
-          @if (options.description) {
-            <p frModalDescription>{{ options.description }}</p>
-          }
-        </div>
-      }
-
-      <div frModalBody>
-        <ng-container
-          [ngComponentOutlet]="options.bodyComponent"
-          [ngComponentOutletInputs]="options.bodyInputs ?? {}"
-          [ngComponentOutletInjector]="bodyInjector"
-        />
-      </div>
-
-      @if (options.footerActions?.length) {
-        <div frModalFooter>
-          @for (action of options.footerActions; track action.label) {
-            <button
-              frButton
-              type="button"
-              [appearance]="action.appearance ?? 'primary'"
-              [disabled]="action.disabled ?? false"
-              [attr.aria-label]="action.ariaLabel ?? null"
-              (click)="handleAction(action)"
-            >
-              <span frButtonLabel>{{ action.label }}</span>
-            </button>
-          }
-        </div>
-      }
-    </div>
+                    template: `
+    <div
+      frModalPanel
+      [size]="options.size ?? 'md'"
+      [showCloseButton]="options.showCloseButton ?? true"
+      [scrollable]="options.scrollable ?? false"
+      [stickyFooter]="options.stickyFooter ?? false"
+    >
+      @if (options.title || options.description) {
+        <div frModalHeader>
+          @if (options.title) {
+            <h2 frModalTitle>{{ options.title }}</h2>
+          }
+
+          @if (options.description) {
+            <p frModalDescription>{{ options.description }}</p>
+          }
+        </div>
+      }
+
+      <div frModalBody>
+        <ng-container
+          [ngComponentOutlet]="options.bodyComponent"
+          [ngComponentOutletInputs]="options.bodyInputs ?? {}"
+          [ngComponentOutletInjector]="bodyInjector"
+        />
+      </div>
+
+      @if (options.footerActions?.length) {
+        <div frModalFooter>
+          @for (action of options.footerActions; track action.label) {
+            <button
+              frButton
+              type="button"
+              [appearance]="action.appearance ?? 'primary'"
+              [disabled]="action.disabled ?? false"
+              [attr.aria-label]="action.ariaLabel ?? null"
+              (click)="handleAction(action)"
+            >
+              <span frButtonLabel>{{ action.label }}</span>
+            </button>
+          }
+        </div>
+      }
+    </div>
   `,
                 }]
         }] });
 
 const DEFAULT_PANEL_CLASS$1 = 'frame-modal__overlay-pane';
 const DEFAULT_BACKDROP_CLASS$1 = 'frame-modal__backdrop';
+/** Service for opening modal dialogs. */
 class FrModalService {
     dialog = inject(Dialog);
     open(content, dataOrConfig, config) {
@@ -7036,6 +7708,7 @@ function resolveOpenConfig(content, dataOrConfig, config) {
     if (!isComponentType$1(content)) {
         return (dataOrConfig ?? {});
     }
+    // Component opens support the shorthand `open(Component, data, config)` shape.
     if (config) {
         return {
             ...config,
@@ -7045,6 +7718,7 @@ function resolveOpenConfig(content, dataOrConfig, config) {
     if (dataOrConfig === undefined) {
         return {};
     }
+    // Without a third argument, distinguish raw data from a full modal config by known keys.
     if (isModalConfig(dataOrConfig)) {
         return dataOrConfig;
     }
@@ -7112,6 +7786,7 @@ function withModalRefProvider(providers) {
     return [modalRefProvider, ...(providers ?? [])];
 }
 
+/** Trigger control for modal. */
 class FrModalTrigger {
     static CUSTOM_PROPERTY_PREFIX = '--frame-modal-';
     destroyRef = inject(DestroyRef);
@@ -7182,6 +7857,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "frModalTrigger", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 const FR_NAVIGATION_MENU_PARENT = new InjectionToken('FrNavigationMenuParent');
+/** Navigation menu root for hover and focus interactions. */
 class FrNavigationMenu {
     closeDelay = input(140, ...(ngDevMode ? [{ debugName: "closeDelay" }] : /* istanbul ignore next */ []));
     triggerMode = input('both', ...(ngDevMode ? [{ debugName: "triggerMode" }] : /* istanbul ignore next */ []));
@@ -7219,6 +7895,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], triggerMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerMode", required: false }] }] } });
+/** List slot for navigation menu. */
 class FrNavigationMenuList {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrNavigationMenuList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrNavigationMenuList, isStandalone: true, selector: "[frNavigationMenuList], frame-navigation-menu-list", host: { attributes: { "role": "list" }, classAttribute: "frame-navigation-menu__list" }, ngImport: i0 });
@@ -7233,6 +7910,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Item slot for navigation menu. */
 class FrNavigationMenuItem {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrNavigationMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrNavigationMenuItem, isStandalone: true, selector: "[frNavigationMenuItem], frame-navigation-menu-item", host: { attributes: { "role": "listitem" }, classAttribute: "frame-navigation-menu__item" }, ngImport: i0 });
@@ -7247,6 +7925,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Trigger control for navigation menu. */
 class FrNavigationMenuTrigger {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrNavigationMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrNavigationMenuTrigger, isStandalone: true, selector: "[frNavigationMenuTrigger]", host: { attributes: { "type": "button" }, classAttribute: "frame-navigation-menu__trigger" }, hostDirectives: [{ directive: i1$3.FrDropdownMenuTrigger, inputs: ["frDropdownMenuTrigger", "frNavigationMenuTrigger", "triggerMode", "triggerMode"] }], ngImport: i0 });
@@ -7267,6 +7946,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Content slot for navigation menu. */
 class FrNavigationMenuContent extends FrDropdownMenuContent$1 {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrNavigationMenuContent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrNavigationMenuContent, isStandalone: true, selector: "ng-template[frNavigationMenuContent]", providers: [
@@ -7297,6 +7977,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     ],
                 }]
         }] });
+/** Panel slot for navigation menu. */
 class FrNavigationMenuPanel {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrNavigationMenuPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrNavigationMenuPanel, isStandalone: true, selector: "[frNavigationMenuPanel]", host: { classAttribute: "frame-navigation-menu__content" }, hostDirectives: [{ directive: i1$3.FrDropdownMenuPanel }], ngImport: i0 });
@@ -7311,6 +7992,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Link primitive inside a navigation menu panel. */
 class FrNavigationMenuLink {
     active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrNavigationMenuLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -7326,6 +8008,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }] } });
+/** Grid layout helper for navigation menu content. */
 class FrNavigationMenuGrid {
     columns = input(1, ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrNavigationMenuGrid, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -7341,6 +8024,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }] } });
+/** Featured content slot inside navigation menu panels. */
 class FrNavigationMenuFeature {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrNavigationMenuFeature, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrNavigationMenuFeature, isStandalone: true, selector: "[frNavigationMenuFeature]", host: { classAttribute: "frame-navigation-menu__feature" }, ngImport: i0 });
@@ -7354,6 +8038,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Title slot for navigation menu link. */
 class FrNavigationMenuLinkTitle {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrNavigationMenuLinkTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrNavigationMenuLinkTitle, isStandalone: true, selector: "[frNavigationMenuLinkTitle]", host: { classAttribute: "frame-navigation-menu__link-title" }, ngImport: i0 });
@@ -7367,6 +8052,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Description slot for navigation menu link. */
 class FrNavigationMenuLinkDescription {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrNavigationMenuLinkDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrNavigationMenuLinkDescription, isStandalone: true, selector: "[frNavigationMenuLinkDescription]", host: { classAttribute: "frame-navigation-menu__link-description" }, ngImport: i0 });
@@ -7380,6 +8066,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Separator slot for navigation link. */
 class FrNavigationLinkSeparator {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrNavigationLinkSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrNavigationLinkSeparator, isStandalone: true, selector: "[frNavigationLinkSeparator]", host: { attributes: { "role": "separator", "aria-hidden": "true" }, classAttribute: "frame-navigation-menu__link-separator" }, ngImport: i0 });
@@ -7395,6 +8082,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Indicator slot for navigation menu. */
 class FrNavigationMenuIndicator {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrNavigationMenuIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrNavigationMenuIndicator, isStandalone: true, selector: "[frNavigationMenuIndicator], frame-navigation-menu-indicator", host: { attributes: { "aria-hidden": "true" }, classAttribute: "frame-navigation-menu__indicator" }, ngImport: i0 });
@@ -7409,6 +8097,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Viewport slot for navigation menu. */
 class FrNavigationMenuViewport {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrNavigationMenuViewport, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrNavigationMenuViewport, isStandalone: true, selector: "[frNavigationMenuViewport], frame-navigation-menu-viewport", host: { classAttribute: "frame-navigation-menu__viewport" }, ngImport: i0 });
@@ -7423,6 +8112,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }] });
 
+/** Pagination navigation container. */
 class FrPagination {
     ariaLabel = input('pagination', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     boundaryCount = input(1, ...(ngDevMode ? [{ debugName: "boundaryCount" }] : /* istanbul ignore next */ []));
@@ -7488,6 +8178,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], boundaryCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundaryCount", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], siblingCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "siblingCount", required: false }] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: false }] }] } });
+/** Content slot for pagination. */
 class FrPaginationContent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrPaginationContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrPaginationContent, isStandalone: true, selector: "ul[frPaginationContent], ol[frPaginationContent], [frPaginationContent]", host: { classAttribute: "frame-pagination__content" }, ngImport: i0 });
@@ -7501,6 +8192,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Item slot for pagination. */
 class FrPaginationItem {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrPaginationItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrPaginationItem, isStandalone: true, selector: "li[frPaginationItem], [frPaginationItem]", host: { classAttribute: "frame-pagination__item" }, ngImport: i0 });
@@ -7514,6 +8206,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Page link with active and disabled states. */
 class FrPaginationLink {
     pagination = inject(FrPagination, { optional: true });
     active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -7555,6 +8248,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }] } });
+/** Icon slot for pagination. */
 class FrPaginationIcon {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrPaginationIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrPaginationIcon, isStandalone: true, selector: "[frPaginationIcon]", host: { attributes: { "aria-hidden": "true" }, classAttribute: "frame-pagination__projected-icon" }, ngImport: i0 });
@@ -7569,6 +8263,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Previous-page pagination control. */
 class FrPaginationPrevious {
     pagination = inject(FrPagination, { optional: true });
     ariaLabel = input('Go to previous page', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
@@ -7621,6 +8316,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
   `,
                 }]
         }], 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 }] }] } });
+/** Next-page pagination control. */
 class FrPaginationNext {
     pagination = inject(FrPagination, { optional: true });
     ariaLabel = input('Go to next page', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
@@ -7673,6 +8369,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
   `,
                 }]
         }], 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 }] }] } });
+/** Ellipsis slot for pagination. */
 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 });
@@ -7746,6 +8443,7 @@ function oppositeSide(side) {
 
 const FR_POPOVER_CONTROLLER = new InjectionToken('FrPopoverController');
 
+/** Content slot for popover. */
 class FrPopoverContent {
     templateRef = inject((TemplateRef));
     align = input('center', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
@@ -7771,6 +8469,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     exportAs: 'frPopoverContent',
                 }]
         }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignOffset", required: false }] }], debugVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "debugVisible", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }] } });
+/** Panel slot for popover. */
 class FrPopoverPanel {
     content = inject(FrPopoverContent);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrPopoverPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -7788,6 +8487,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Header slot for popover. */
 class FrPopoverHeader {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrPopoverHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrPopoverHeader, isStandalone: true, selector: "[frPopoverHeader]", host: { classAttribute: "frame-popover__header" }, ngImport: i0 });
@@ -7801,6 +8501,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Title slot for popover. */
 class FrPopoverTitle {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrPopoverTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrPopoverTitle, isStandalone: true, selector: "[frPopoverTitle]", host: { classAttribute: "frame-popover__title" }, ngImport: i0 });
@@ -7814,6 +8515,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Description slot for popover. */
 class FrPopoverDescription {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrPopoverDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrPopoverDescription, isStandalone: true, selector: "[frPopoverDescription]", host: { classAttribute: "frame-popover__description" }, ngImport: i0 });
@@ -7827,6 +8529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Body slot for popover. */
 class FrPopoverBody {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrPopoverBody, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrPopoverBody, isStandalone: true, selector: "[frPopoverBody]", host: { classAttribute: "frame-popover__body" }, ngImport: i0 });
@@ -7840,6 +8543,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Footer slot for popover. */
 class FrPopoverFooter {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrPopoverFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrPopoverFooter, isStandalone: true, selector: "[frPopoverFooter]", host: { classAttribute: "frame-popover__footer" }, ngImport: i0 });
@@ -7853,6 +8557,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Close control for popover. */
 class FrPopoverClose {
     root = inject(FR_POPOVER_CONTROLLER);
     handleClick(event) {
@@ -7879,6 +8584,7 @@ const DEFAULT_POSITIONS = buildPopoverPositions({
     side: 'bottom',
     sideOffset: 8,
 });
+/** Root controller for popover. */
 class FrPopoverRoot {
     defaultOpen = input(false, { ...(ngDevMode ? { debugName: "defaultOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     debugVisible = input(false, { ...(ngDevMode ? { debugName: "debugVisible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -7969,28 +8675,28 @@ class FrPopoverRoot {
                 provide: FR_POPOVER_CONTROLLER,
                 useExisting: FrPopoverRoot,
             },
-        ], exportAs: ["frPopover"], ngImport: i0, template: `
-    <span cdkOverlayOrigin #origin="cdkOverlayOrigin" class="frame-popover__anchor">
-      <ng-content />
-    </span>
-
-    <ng-template
-      cdkConnectedOverlay
-      [cdkConnectedOverlayOrigin]="origin"
-      [cdkConnectedOverlayOpen]="isOpen()"
-      [cdkConnectedOverlayPositions]="positions()"
-      [cdkConnectedOverlayPanelClass]="overlayPanelClasses()"
-      [cdkConnectedOverlayPush]="true"
-      [cdkConnectedOverlayViewportMargin]="12"
-      [cdkConnectedOverlayHasBackdrop]="true"
-      [cdkConnectedOverlayBackdropClass]="'frame-popover__backdrop'"
-      (backdropClick)="close()"
-      (detach)="close()"
-      (overlayKeydown)="handleOverlayKeydown($event)"
-      (positionChange)="handlePositionChange($event)"
-    >
-      <ng-container [ngTemplateOutlet]="content()?.templateRef ?? null" />
-    </ng-template>
+        ], exportAs: ["frPopover"], ngImport: i0, template: `
+    <span cdkOverlayOrigin #origin="cdkOverlayOrigin" class="frame-popover__anchor">
+      <ng-content />
+    </span>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="isOpen()"
+      [cdkConnectedOverlayPositions]="positions()"
+      [cdkConnectedOverlayPanelClass]="overlayPanelClasses()"
+      [cdkConnectedOverlayPush]="true"
+      [cdkConnectedOverlayViewportMargin]="12"
+      [cdkConnectedOverlayHasBackdrop]="true"
+      [cdkConnectedOverlayBackdropClass]="'frame-popover__backdrop'"
+      (backdropClick)="close()"
+      (detach)="close()"
+      (overlayKeydown)="handleOverlayKeydown($event)"
+      (positionChange)="handlePositionChange($event)"
+    >
+      <ng-container [ngTemplateOutlet]="content()?.templateRef ?? null" />
+    </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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrPopoverRoot, decorators: [{
@@ -8010,44 +8716,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         class: 'frame-popover',
                         '[attr.data-state]': 'isOpen() ? "open" : "closed"',
                     },
-                    template: `
-    <span cdkOverlayOrigin #origin="cdkOverlayOrigin" class="frame-popover__anchor">
-      <ng-content />
-    </span>
-
-    <ng-template
-      cdkConnectedOverlay
-      [cdkConnectedOverlayOrigin]="origin"
-      [cdkConnectedOverlayOpen]="isOpen()"
-      [cdkConnectedOverlayPositions]="positions()"
-      [cdkConnectedOverlayPanelClass]="overlayPanelClasses()"
-      [cdkConnectedOverlayPush]="true"
-      [cdkConnectedOverlayViewportMargin]="12"
-      [cdkConnectedOverlayHasBackdrop]="true"
-      [cdkConnectedOverlayBackdropClass]="'frame-popover__backdrop'"
-      (backdropClick)="close()"
-      (detach)="close()"
-      (overlayKeydown)="handleOverlayKeydown($event)"
-      (positionChange)="handlePositionChange($event)"
-    >
-      <ng-container [ngTemplateOutlet]="content()?.templateRef ?? null" />
-    </ng-template>
+                    template: `
+    <span cdkOverlayOrigin #origin="cdkOverlayOrigin" class="frame-popover__anchor">
+      <ng-content />
+    </span>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="isOpen()"
+      [cdkConnectedOverlayPositions]="positions()"
+      [cdkConnectedOverlayPanelClass]="overlayPanelClasses()"
+      [cdkConnectedOverlayPush]="true"
+      [cdkConnectedOverlayViewportMargin]="12"
+      [cdkConnectedOverlayHasBackdrop]="true"
+      [cdkConnectedOverlayBackdropClass]="'frame-popover__backdrop'"
+      (backdropClick)="close()"
+      (detach)="close()"
+      (overlayKeydown)="handleOverlayKeydown($event)"
+      (positionChange)="handlePositionChange($event)"
+    >
+      <ng-container [ngTemplateOutlet]="content()?.templateRef ?? null" />
+    </ng-template>
   `,
                 }]
         }], ctorParameters: () => [], propDecorators: { defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], debugVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "debugVisible", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] } });
 
+/** Trigger control for popover. */
 class FrPopoverTrigger {
     content = input(null, { ...(ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {}), alias: 'frPopoverTrigger' });
     root = inject(FR_POPOVER_CONTROLLER);
     elementRef = inject(ElementRef);
+    lastContent = null;
     constructor() {
         this.root.registerTrigger(this.elementRef.nativeElement);
-        effect(() => {
-            const content = this.content();
-            if (content) {
-                this.root.setContent(content);
-            }
-        });
+    }
+    ngDoCheck() {
+        const content = this.content();
+        if (content && content !== this.lastContent) {
+            this.root.setContent(content);
+        }
+        this.lastContent = content;
     }
     handleClick(event) {
         event.preventDefault();
@@ -8097,6 +8806,7 @@ function coerceProgressMax(value) {
     const parsed = Number(value);
     return Number.isFinite(parsed) && parsed > 0 ? parsed : 100;
 }
+/** Progress bar host with value and max state. */
 class FrProgress {
     value = input(0, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), transform: coerceProgressValue });
     max = input(100, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: coerceProgressMax });
@@ -8138,6 +8848,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] } });
+/** Indicator slot for progress. */
 class FrProgressIndicator {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrProgressIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrProgressIndicator, isStandalone: true, selector: "[frProgressIndicator], frame-progress-indicator", host: { classAttribute: "frame-progress__indicator" }, ngImport: i0 });
@@ -8154,6 +8865,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 
 const FR_RADIO_GROUP_ORIENTATIONS = ['vertical', 'horizontal'];
 const FR_RADIO_GROUP_VARIANTS = ['default', 'cards'];
+/** Radio group host with orientation and variant controls. */
 class FrRadioGroup {
     orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
@@ -8175,6 +8887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+/** Item slot for radio group. */
 class FrRadioGroupItem {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrRadioGroupItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrRadioGroupItem, isStandalone: true, selector: "input[type=radio][frRadioGroupItem]", host: { classAttribute: "frame-radio-group__item" }, ngImport: i0 });
@@ -8188,6 +8901,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Field slot for radio group. */
 class FrRadioGroupField {
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -8207,6 +8921,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }] } });
+/** Card layout option for radio group choices. */
 class FrRadioGroupCard {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrRadioGroupCard, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrRadioGroupCard, isStandalone: true, selector: "label[frRadioGroupCard]", host: { classAttribute: "frame-radio-group__card" }, ngImport: i0 });
@@ -8220,6 +8935,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Meta slot for radio group card. */
 class FrRadioGroupCardMeta {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrRadioGroupCardMeta, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrRadioGroupCardMeta, isStandalone: true, selector: "[frRadioGroupCardMeta]", host: { classAttribute: "frame-radio-group__card-meta" }, ngImport: i0 });
@@ -8236,6 +8952,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 
 const FR_RESIZABLE_ORIENTATIONS = ['horizontal', 'vertical'];
 let nextResizableId = 0;
+/** Resizable panel group that coordinates pane sizes. */
 class FrResizablePanelGroup {
     elementRef = inject((ElementRef));
     groupId = `frame-resizable-${++nextResizableId}`;
@@ -8301,6 +9018,7 @@ class FrResizablePanelGroup {
         const startPrevious = this.panelSize(previousPanel) ?? 0;
         const startNext = this.panelSize(nextPanel) ?? 0;
         const pairTotal = startPrevious + startNext;
+        // Keep pair resizing local so adjacent panels trade space without changing total layout.
         const rtlMultiplier = this.orientation() === 'horizontal' && getComputedStyle(this.elementRef.nativeElement).direction === 'rtl'
             ? -1
             : 1;
@@ -8363,6 +9081,7 @@ class FrResizablePanelGroup {
         }
     }
     resizePair(previousPanel, nextPanel, pairTotal, requestedPreviousSize) {
+        // Clamp the previous panel first; the next panel receives the remaining pair size.
         const previousMin = this.minSize(previousPanel);
         const previousMax = Math.min(this.maxSize(previousPanel), pairTotal - this.minSize(nextPanel));
         const previousSize = clampNumber(requestedPreviousSize, previousMin, previousMax);
@@ -8375,6 +9094,7 @@ class FrResizablePanelGroup {
     applyPanelSize(panel, size) {
         const normalizedSize = Math.max(size, 0);
         const collapsedThreshold = this.collapsible(panel) ? this.collapsedSize(panel) : 0;
+        // Collapsible panels snap to their collapsed size instead of shrinking below it.
         const collapsed = normalizedSize <= collapsedThreshold;
         const appliedSize = collapsed ? collapsedThreshold : normalizedSize;
         panel.style.flexBasis = `${appliedSize}%`;
@@ -8454,6 +9174,7 @@ 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"] }] } });
+/** Panel slot for resizable. */
 class FrResizablePanel {
     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) });
@@ -8477,6 +9198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { defaultSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultSize", required: false }] }], minSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSize", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsedSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedSize", required: false }] }] } });
+/** Resize handle between adjacent resizable panels. */
 class FrResizableHandle {
     group = inject(FrResizablePanelGroup);
     elementRef = inject((ElementRef));
@@ -8515,6 +9237,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         }], propDecorators: { withHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "withHandle", required: false }] }] } });
 
 const FR_SELECT_POSITIONS = ['item-aligned', 'popper'];
+/** Content slot for select. */
 class FrSelectContent extends FrDropdownMenuContent$1 {
     destroyRef = inject(DestroyRef);
     viewContainerRef = inject(ViewContainerRef);
@@ -8542,10 +9265,12 @@ class FrSelectContent extends FrDropdownMenuContent$1 {
         if (this.registrationView) {
             return;
         }
+        // Render once offscreen so projected items can register before the menu opens.
         this.registrationView = this.viewContainerRef.createEmbeddedView(this.templateRef);
         this.registrationView.detectChanges();
         const index = this.viewContainerRef.indexOf(this.registrationView);
         if (index >= 0) {
+            // Keep registrations alive without inserting the template into the DOM twice.
             this.viewContainerRef.detach(index);
         }
     }
@@ -8604,6 +9329,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     ],
                 }]
         }], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
+/** Panel slot for select. */
 class FrSelectPanel {
     content = inject(FrSelectContent);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSelectPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -8623,14 +9349,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         }] });
 
 const FR_SELECT_INDICATOR_POSITIONS = ['start', 'end'];
+/** Select control backed by dropdown menu primitives. */
 class FrSelect extends FrControlValueAccessor$1 {
     destroyRef = inject(DestroyRef);
     dropdownTrigger = inject(FrDropdownMenuTrigger$1);
     elementRef = inject(ElementRef);
     selectedLabel = signal(null, ...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []));
     labels = new Map();
+    lastContent = null;
+    lastContentDebugVisible = false;
+    lastDebugVisible = false;
+    lastTriggerWidth = 0;
     resizeObserver = null;
     value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    menuContent = input(null, { ...(ngDevMode ? { debugName: "menuContent" } : /* istanbul ignore next */ {}), alias: 'frSelect' });
     debugVisible = input(false, { ...(ngDevMode ? { debugName: "debugVisible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled', transform: booleanAttribute });
     indicatorPosition = input('start', ...(ngDevMode ? [{ debugName: "indicatorPosition" }] : /* istanbul ignore next */ []));
@@ -8646,22 +9378,21 @@ class FrSelect extends FrControlValueAccessor$1 {
     }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
     constructor() {
         super();
-        effect(() => {
-            const content = this.dropdownTrigger.menuContent();
-            if (content) {
-                content.select = this;
-                content.setDebugVisibleOverride(this.debugVisible() ? true : null);
-                content.setTriggerWidth(this.elementRef.nativeElement.offsetWidth);
-                content.ensureItemsRegistered();
-            }
-        });
+        afterNextRender(() => this.syncContent());
         queueMicrotask(() => {
+            this.syncContent();
             this.attachResizeObserver();
         });
         this.destroyRef.onDestroy(() => {
             this.resizeObserver?.disconnect();
         });
     }
+    ngDoCheck() {
+        this.syncContent();
+    }
+    ngAfterViewChecked() {
+        this.syncContent();
+    }
     registerItem(value, label) {
         this.labels.set(value, label);
         if (this.value() === value) {
@@ -8689,13 +9420,45 @@ class FrSelect extends FrControlValueAccessor$1 {
         }
         const element = this.elementRef.nativeElement;
         this.resizeObserver = new ResizeObserver(() => {
-            const content = this.dropdownTrigger.menuContent();
+            const content = this.resolveContent();
             content?.setTriggerWidth(element.offsetWidth);
         });
         this.resizeObserver.observe(element);
     }
+    syncContent() {
+        const content = this.resolveContent();
+        if (!content) {
+            this.lastContent = null;
+            this.dropdownTrigger.setMenuContentOverride(null);
+            return;
+        }
+        const debugVisible = this.debugVisible();
+        const contentDebugVisible = debugVisible || content.debugVisible();
+        const triggerWidth = this.elementRef.nativeElement.offsetWidth;
+        if (content === this.lastContent &&
+            debugVisible === this.lastDebugVisible &&
+            contentDebugVisible === this.lastContentDebugVisible &&
+            triggerWidth === this.lastTriggerWidth) {
+            return;
+        }
+        content.select = this;
+        content.setDebugVisibleOverride(debugVisible ? true : null);
+        content.setTriggerWidth(triggerWidth);
+        content.ensureItemsRegistered();
+        this.dropdownTrigger.setMenuContentOverride(content);
+        if (content.isDebugVisible()) {
+            queueMicrotask(() => this.dropdownTrigger.open());
+        }
+        this.lastContent = content;
+        this.lastContentDebugVisible = contentDebugVisible;
+        this.lastDebugVisible = debugVisible;
+        this.lastTriggerWidth = triggerWidth;
+    }
+    resolveContent() {
+        return this.menuContent() ?? this.dropdownTrigger.menuContent();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrSelect, isStandalone: true, selector: "button[frSelect]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, debugVisible: { classPropertyName: "debugVisible", publicName: "debugVisible", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indicatorPosition: { classPropertyName: "indicatorPosition", publicName: "indicatorPosition", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "aria-autocomplete": "none", "aria-haspopup": "listbox", "type": "button", "role": "combobox" }, properties: { "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-invalid": "invalid() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-invalid": "invalid() ? \"\" : null", "attr.disabled": "disabled() ? \"\" : null" }, classAttribute: "frame-select__trigger" }, providers: [provideDsValueAccessor$1(FrSelect)], usesInheritance: true, hostDirectives: [{ directive: i1$3.FrDropdownMenu, inputs: ["closeDelay", "closeDelay", "triggerMode", "triggerMode"] }, { directive: i1$3.FrDropdownMenuTrigger, inputs: ["frDropdownMenuTrigger", "frSelect"] }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrSelect, isStandalone: true, selector: "button[frSelect]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, menuContent: { classPropertyName: "menuContent", publicName: "frSelect", isSignal: true, isRequired: false, transformFunction: null }, debugVisible: { classPropertyName: "debugVisible", publicName: "debugVisible", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indicatorPosition: { classPropertyName: "indicatorPosition", publicName: "indicatorPosition", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "aria-autocomplete": "none", "aria-haspopup": "listbox", "type": "button", "role": "combobox" }, properties: { "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-invalid": "invalid() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-invalid": "invalid() ? \"\" : null", "attr.disabled": "disabled() ? \"\" : null" }, classAttribute: "frame-select__trigger" }, providers: [provideDsValueAccessor$1(FrSelect)], usesInheritance: true, hostDirectives: [{ directive: i1$3.FrDropdownMenu, inputs: ["closeDelay", "closeDelay", "triggerMode", "triggerMode"] }, { directive: i1$3.FrDropdownMenuTrigger }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSelect, decorators: [{
             type: Directive,
@@ -8708,7 +9471,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         },
                         {
                             directive: FrDropdownMenuTrigger$1,
-                            inputs: ['frDropdownMenuTrigger: frSelect'],
                         },
                     ],
                     providers: [provideDsValueAccessor$1(FrSelect)],
@@ -8725,9 +9487,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         role: 'combobox',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], debugVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "debugVisible", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indicatorPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorPosition", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], menuContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "frSelect", required: false }] }], debugVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "debugVisible", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indicatorPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorPosition", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }] } });
 
 const FR_SELECT_ICON_POSITIONS = ['leading', 'trailing'];
+/** Value slot for select. */
 class FrSelectValue {
     select = inject(FrSelect);
     placeholder = input('Select an option', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
@@ -8747,6 +9510,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
+/** Indicator slot for select item. */
 class FrSelectItemIndicator {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSelectItemIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSelectItemIndicator, isStandalone: true, selector: "[frSelectItemIndicator], frame-select-item-indicator", host: { attributes: { "aria-hidden": "true" }, classAttribute: "frame-select__item-indicator" }, ngImport: i0 });
@@ -8761,6 +9525,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Icon slot for select. */
 class FrSelectIcon {
     position = input('trailing', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSelectIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -8777,6 +9542,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
+/** Error slot for select. */
 class FrSelectError {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSelectError, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSelectError, isStandalone: true, selector: "[frSelectError], frame-select-error", host: { attributes: { "aria-live": "polite" }, classAttribute: "frame-select__error" }, ngImport: i0 });
@@ -8792,6 +9558,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }] });
 
+/** Group slot for select. */
 class FrSelectGroup {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSelectGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSelectGroup, isStandalone: true, selector: "[frSelectGroup], frame-select-group", host: { classAttribute: "frame-select__group" }, ngImport: i0 });
@@ -8805,6 +9572,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Label slot for select. */
 class FrSelectLabel {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSelectLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSelectLabel, isStandalone: true, selector: "[frSelectLabel], frame-select-label", host: { classAttribute: "frame-select__label" }, hostDirectives: [{ directive: i1$3.FrDropdownMenuLabel }], ngImport: i0 });
@@ -8819,6 +9587,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Separator slot for select. */
 class FrSelectSeparator {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSelectSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSelectSeparator, isStandalone: true, selector: "[frSelectSeparator], frame-select-separator", host: { classAttribute: "frame-select__separator" }, hostDirectives: [{ directive: i1$3.FrDropdownMenuSeparator }], ngImport: i0 });
@@ -8833,6 +9602,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Item slot for select. */
 class FrSelectItem {
     elementRef = inject((ElementRef));
     content = inject(FrSelectContent);
@@ -8895,10 +9665,12 @@ function coerceValue(value) {
     }
     return [coerceNumber(value, 0)];
 }
+/** Slider control with single and range value support. */
 class FrSlider extends FrControlValueAccessor$1 {
     elementRef = inject(ElementRef);
     document = inject(DOCUMENT);
     controlledByInput = false;
+    lastInputKey = '';
     min = input(0, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     max = input(100, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     step = input(1, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: numberAttribute });
@@ -8924,19 +9696,28 @@ class FrSlider extends FrControlValueAccessor$1 {
         const values = this.values();
         return this.percentForValue(values.at(-1) ?? this.min());
     }, ...(ngDevMode ? [{ debugName: "rangeEndPercent" }] : /* istanbul ignore next */ []));
-    constructor() {
-        super();
-        effect(() => {
-            const controlledValue = this.valueInput();
-            if (controlledValue !== null) {
-                this.controlledByInput = true;
-                this.values.set(this.normalizeValues(coerceValue(controlledValue)));
-                return;
-            }
-            if (!this.controlledByInput) {
-                this.values.set(this.normalizeValues(coerceValue(this.defaultValue())));
-            }
-        });
+    ngDoCheck() {
+        const inputKey = [
+            this.valueInput(),
+            this.defaultValue(),
+            this.min(),
+            this.max(),
+            this.step(),
+            this.minStepsBetweenThumbs(),
+        ].map((value) => (Array.isArray(value) ? value.join(',') : String(value))).join('|');
+        if (inputKey === this.lastInputKey) {
+            return;
+        }
+        this.lastInputKey = inputKey;
+        const controlledValue = this.valueInput();
+        if (controlledValue !== null) {
+            this.controlledByInput = true;
+            this.values.set(this.normalizeValues(coerceValue(controlledValue)));
+            return;
+        }
+        if (!this.controlledByInput) {
+            this.values.set(this.normalizeValues(coerceValue(this.defaultValue())));
+        }
     }
     setViewValue(value) {
         if (value === null || value === undefined) {
@@ -9016,6 +9797,7 @@ class FrSlider extends FrControlValueAccessor$1 {
         const step = Math.max(this.step(), 0.000001);
         const minDistance = Math.max(this.minStepsBetweenThumbs(), 0) * step;
         const normalized = values.length ? values : [min];
+        // Only the active thumb is bounded by neighbors; passive thumbs keep their full range.
         return normalized.map((value, index) => {
             const previous = index > 0 ? normalized[index - 1] + minDistance : min;
             const next = index < normalized.length - 1 ? normalized[index + 1] - minDistance : max;
@@ -9038,6 +9820,7 @@ class FrSlider extends FrControlValueAccessor$1 {
         const offset = horizontal ? event.clientX - rect.left : rect.bottom - event.clientY;
         const direction = horizontal && this.isRtl() ? -1 : 1;
         let percent = size > 0 ? offset / size : 0;
+        // Convert visual position into logical value direction for RTL and inverted sliders.
         if (direction === -1) {
             percent = 1 - percent;
         }
@@ -9056,7 +9839,7 @@ class FrSlider extends FrControlValueAccessor$1 {
     isRtl() {
         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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSlider, deps: null, 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>
@@ -9128,12 +9911,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
     }
   `,
                 }]
-        }], 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"] }] } });
+        }], 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"] }] } });
 
 const FR_SEPARATOR_ORIENTATIONS = ['horizontal', 'vertical'];
 function coerceSeparatorOrientation(value) {
     return value === 'vertical' ? 'vertical' : 'horizontal';
 }
+/** Visual or semantic separator with orientation support. */
 class FrSeparator {
     orientation = input('horizontal', { ...(ngDevMode ? { debugName: "orientation" } : /* istanbul ignore next */ {}), transform: coerceSeparatorOrientation });
     decorative = input(true, { ...(ngDevMode ? { debugName: "decorative" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -9155,6 +9939,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }] } });
 
+/** Content slot for sheet. */
 class FrSheetContent {
     templateRef = inject((TemplateRef));
     ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
@@ -9211,6 +9996,7 @@ const FR_SHEET_SIDES = ['top', 'right', 'bottom', 'left'];
 function coerceSheetSide(value) {
     return value === 'top' || value === 'bottom' || value === 'left' ? value : 'right';
 }
+/** Close control for sheet. */
 class FrSheetClose {
     dialogRef = inject(DialogRef, { optional: true });
     result = input(undefined, { ...(ngDevMode ? { debugName: "result" } : /* istanbul ignore next */ {}), alias: 'frSheetClose' });
@@ -9230,6 +10016,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { result: [{ type: i0.Input, args: [{ isSignal: true, alias: "frSheetClose", required: false }] }] } });
+/** Panel slot for sheet. */
 class FrSheetPanel {
     dialogRef = inject(DialogRef, { optional: true });
     scrollable = input(false, { ...(ngDevMode ? { debugName: "scrollable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -9267,6 +10054,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
   `,
                 }]
         }], 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 }] }] } });
+/** Header slot for sheet. */
 class FrSheetHeader {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSheetHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSheetHeader, isStandalone: true, selector: "[frSheetHeader], frame-sheet-header", host: { classAttribute: "frame-sheet__header" }, ngImport: i0 });
@@ -9280,6 +10068,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Body slot for sheet. */
 class FrSheetBody {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSheetBody, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSheetBody, isStandalone: true, selector: "[frSheetBody], frame-sheet-body", host: { classAttribute: "frame-sheet__body" }, ngImport: i0 });
@@ -9293,6 +10082,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Footer slot for sheet. */
 class FrSheetFooter {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSheetFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSheetFooter, isStandalone: true, selector: "[frSheetFooter], frame-sheet-footer", host: { classAttribute: "frame-sheet__footer" }, ngImport: i0 });
@@ -9306,6 +10096,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Title slot for sheet. */
 class FrSheetTitle {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSheetTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSheetTitle, isStandalone: true, selector: "[frSheetTitle], frame-sheet-title", host: { classAttribute: "frame-sheet__title" }, ngImport: i0 });
@@ -9319,6 +10110,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Description slot for sheet. */
 class FrSheetDescription {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSheetDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSheetDescription, isStandalone: true, selector: "[frSheetDescription], frame-sheet-description", host: { classAttribute: "frame-sheet__description" }, ngImport: i0 });
@@ -9335,6 +10127,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 
 const FR_SHEET_DATA = DIALOG_DATA;
 
+/** Default shell for sheet content, title, and footer actions. */
 class FrSheetShell {
     dialogRef = inject((DialogRef));
     injector = inject(Injector);
@@ -9354,50 +10147,50 @@ class FrSheetShell {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSheetShell, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrSheetShell, isStandalone: true, selector: "frame-sheet-shell", ngImport: i0, template: `
-    <div
-      frSheetPanel
-      [side]="options.side ?? 'right'"
-      [showCloseButton]="options.showCloseButton ?? true"
-      [scrollable]="options.scrollable ?? false"
-    >
-      @if (options.title || options.description) {
-        <div frSheetHeader>
-          @if (options.title) {
-            <h2 frSheetTitle>{{ options.title }}</h2>
-          }
-
-          @if (options.description) {
-            <p frSheetDescription>{{ options.description }}</p>
-          }
-        </div>
-      }
-
-      <div frSheetBody>
-        <ng-container
-          [ngComponentOutlet]="options.bodyComponent"
-          [ngComponentOutletInputs]="options.bodyInputs ?? {}"
-          [ngComponentOutletInjector]="bodyInjector"
-        />
-      </div>
-
-      @if (options.footerActions?.length) {
-        <div frSheetFooter>
-          @for (action of options.footerActions; track action.label) {
-            <button
-              frButton
-              type="button"
-              [appearance]="action.appearance ?? 'primary'"
-              [disabled]="action.disabled ?? false"
-              [attr.aria-label]="action.ariaLabel ?? null"
-              (click)="handleAction(action)"
-            >
-              <span frButtonLabel>{{ action.label }}</span>
-            </button>
-          }
-        </div>
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrSheetShell, isStandalone: true, selector: "frame-sheet-shell", ngImport: i0, template: `
+    <div
+      frSheetPanel
+      [side]="options.side ?? 'right'"
+      [showCloseButton]="options.showCloseButton ?? true"
+      [scrollable]="options.scrollable ?? false"
+    >
+      @if (options.title || options.description) {
+        <div frSheetHeader>
+          @if (options.title) {
+            <h2 frSheetTitle>{{ options.title }}</h2>
+          }
+
+          @if (options.description) {
+            <p frSheetDescription>{{ options.description }}</p>
+          }
+        </div>
+      }
+
+      <div frSheetBody>
+        <ng-container
+          [ngComponentOutlet]="options.bodyComponent"
+          [ngComponentOutletInputs]="options.bodyInputs ?? {}"
+          [ngComponentOutletInjector]="bodyInjector"
+        />
+      </div>
+
+      @if (options.footerActions?.length) {
+        <div frSheetFooter>
+          @for (action of options.footerActions; track action.label) {
+            <button
+              frButton
+              type="button"
+              [appearance]="action.appearance ?? 'primary'"
+              [disabled]="action.disabled ?? false"
+              [attr.aria-label]="action.ariaLabel ?? null"
+              (click)="handleAction(action)"
+            >
+              <span frButtonLabel>{{ action.label }}</span>
+            </button>
+          }
+        </div>
+      }
+    </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: FrButton$1, selector: "a[frButton], button[frButton]", inputs: ["appearance", "disabled", "loading", "loadingDisplay", "radius", "size"] }, { kind: "directive", type: FrButtonLabel$1, selector: "[frButtonLabel]" }, { kind: "directive", type: FrSheetBody, selector: "[frSheetBody], frame-sheet-body" }, { kind: "directive", type: FrSheetDescription, selector: "[frSheetDescription], frame-sheet-description" }, { kind: "directive", type: FrSheetFooter, selector: "[frSheetFooter], frame-sheet-footer" }, { kind: "directive", type: FrSheetHeader, selector: "[frSheetHeader], frame-sheet-header" }, { kind: "component", type: FrSheetPanel, selector: "[frSheetPanel], frame-sheet-panel", inputs: ["scrollable", "showCloseButton", "side"] }, { kind: "directive", type: FrSheetTitle, selector: "[frSheetTitle], frame-sheet-title" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSheetShell, decorators: [{
@@ -9415,56 +10208,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         FrSheetTitle,
                         NgComponentOutlet,
                     ],
-                    template: `
-    <div
-      frSheetPanel
-      [side]="options.side ?? 'right'"
-      [showCloseButton]="options.showCloseButton ?? true"
-      [scrollable]="options.scrollable ?? false"
-    >
-      @if (options.title || options.description) {
-        <div frSheetHeader>
-          @if (options.title) {
-            <h2 frSheetTitle>{{ options.title }}</h2>
-          }
-
-          @if (options.description) {
-            <p frSheetDescription>{{ options.description }}</p>
-          }
-        </div>
-      }
-
-      <div frSheetBody>
-        <ng-container
-          [ngComponentOutlet]="options.bodyComponent"
-          [ngComponentOutletInputs]="options.bodyInputs ?? {}"
-          [ngComponentOutletInjector]="bodyInjector"
-        />
-      </div>
-
-      @if (options.footerActions?.length) {
-        <div frSheetFooter>
-          @for (action of options.footerActions; track action.label) {
-            <button
-              frButton
-              type="button"
-              [appearance]="action.appearance ?? 'primary'"
-              [disabled]="action.disabled ?? false"
-              [attr.aria-label]="action.ariaLabel ?? null"
-              (click)="handleAction(action)"
-            >
-              <span frButtonLabel>{{ action.label }}</span>
-            </button>
-          }
-        </div>
-      }
-    </div>
+                    template: `
+    <div
+      frSheetPanel
+      [side]="options.side ?? 'right'"
+      [showCloseButton]="options.showCloseButton ?? true"
+      [scrollable]="options.scrollable ?? false"
+    >
+      @if (options.title || options.description) {
+        <div frSheetHeader>
+          @if (options.title) {
+            <h2 frSheetTitle>{{ options.title }}</h2>
+          }
+
+          @if (options.description) {
+            <p frSheetDescription>{{ options.description }}</p>
+          }
+        </div>
+      }
+
+      <div frSheetBody>
+        <ng-container
+          [ngComponentOutlet]="options.bodyComponent"
+          [ngComponentOutletInputs]="options.bodyInputs ?? {}"
+          [ngComponentOutletInjector]="bodyInjector"
+        />
+      </div>
+
+      @if (options.footerActions?.length) {
+        <div frSheetFooter>
+          @for (action of options.footerActions; track action.label) {
+            <button
+              frButton
+              type="button"
+              [appearance]="action.appearance ?? 'primary'"
+              [disabled]="action.disabled ?? false"
+              [attr.aria-label]="action.ariaLabel ?? null"
+              (click)="handleAction(action)"
+            >
+              <span frButtonLabel>{{ action.label }}</span>
+            </button>
+          }
+        </div>
+      }
+    </div>
   `,
                 }]
         }] });
 
 const DEFAULT_PANEL_CLASS = 'frame-sheet__overlay-pane';
 const DEFAULT_BACKDROP_CLASS = 'frame-sheet__backdrop';
+/** Service for opening sheet dialogs. */
 class FrSheetService {
     dialog = inject(Dialog);
     open(content, config = {}) {
@@ -9537,6 +10331,7 @@ function mergeClassList(classList, defaultClass) {
     return Array.from(new Set([defaultClass, ...classes].filter(Boolean)));
 }
 
+/** Trigger control for sheet. */
 class FrSheetTrigger {
     static CUSTOM_PROPERTY_PREFIX = '--frame-sheet-';
     destroyRef = inject(DestroyRef);
@@ -9634,10 +10429,11 @@ function coerceOptionalNumber(value) {
     const coerced = numberAttribute(value, Number.NaN);
     return Number.isFinite(coerced) ? coerced : null;
 }
+/** Shared state provider for sidebar. */
 class FrSidebarProvider {
     document = inject(DOCUMENT);
     elementRef = inject(ElementRef);
-    internalOpen = signal(true, ...(ngDevMode ? [{ debugName: "internalOpen" }] : /* istanbul ignore next */ []));
+    internalOpen = linkedSignal(() => this.defaultOpen(), ...(ngDevMode ? [{ debugName: "internalOpen" }] : /* istanbul ignore next */ []));
     internalOpenMobile = signal(false, ...(ngDevMode ? [{ debugName: "internalOpenMobile" }] : /* istanbul ignore next */ []));
     resizing = signal(false, ...(ngDevMode ? [{ debugName: "resizing" }] : /* istanbul ignore next */ []));
     defaultOpen = input(true, { ...(ngDevMode ? { debugName: "defaultOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -9651,15 +10447,6 @@ class FrSidebarProvider {
     openMobile = computed(() => this.internalOpenMobile(), ...(ngDevMode ? [{ debugName: "openMobile" }] : /* istanbul ignore next */ []));
     state = computed(() => (this.open() ? 'expanded' : 'collapsed'), ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
     constructor() {
-        this.internalOpen.set(this.defaultOpen());
-        effect(() => {
-            if (this.openInput() === null) {
-                this.internalOpen.set(this.defaultOpen());
-            }
-        });
-        effect(() => {
-            this.elementRef.nativeElement.style.setProperty('--frame-sidebar-state', this.state());
-        });
         const defaultView = this.document.defaultView;
         if (!defaultView?.matchMedia) {
             return;
@@ -9704,7 +10491,7 @@ class FrSidebarProvider {
         this.toggleSidebar();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarProvider, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrSidebarProvider, isStandalone: true, selector: "[frSidebarProvider], frame-sidebar-provider", inputs: { defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, openInput: { classPropertyName: "openInput", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null }, keyboardShortcut: { classPropertyName: "keyboardShortcut", publicName: "keyboardShortcut", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange", openMobileChange: "openMobileChange" }, host: { listeners: { "document:keydown": "handleKeydown($event)" }, properties: { "attr.data-state": "state()", "attr.data-open": "open()", "attr.data-mobile-open": "openMobile()", "attr.data-mobile": "isMobile() ? \"\" : null", "attr.data-resizing": "resizing() ? \"\" : null" }, classAttribute: "frame-sidebar-provider" }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrSidebarProvider, isStandalone: true, selector: "[frSidebarProvider], frame-sidebar-provider", inputs: { defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, openInput: { classPropertyName: "openInput", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null }, keyboardShortcut: { classPropertyName: "keyboardShortcut", publicName: "keyboardShortcut", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange", openMobileChange: "openMobileChange" }, host: { listeners: { "document:keydown": "handleKeydown($event)" }, properties: { "attr.data-state": "state()", "attr.data-open": "open()", "attr.data-mobile-open": "openMobile()", "attr.data-mobile": "isMobile() ? \"\" : null", "attr.data-resizing": "resizing() ? \"\" : null", "style.--frame-sidebar-state": "state()" }, classAttribute: "frame-sidebar-provider" }, providers: [
             {
                 provide: FR_SIDEBAR_PROVIDER,
                 useExisting: FrSidebarProvider,
@@ -9729,10 +10516,12 @@ 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',
+                        '[style.--frame-sidebar-state]': 'state()',
                         '(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 }] }] } });
+/** Sidebar root driven by provider state. */
 class FrSidebar {
     elementRef = inject(ElementRef);
     provider = inject(FR_SIDEBAR_PROVIDER, { optional: true });
@@ -9760,6 +10549,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], 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 }] }] } });
+/** Trigger control for sidebar. */
 class FrSidebarTrigger {
     provider = inject(FR_SIDEBAR_PROVIDER, { optional: true });
     ariaLabel = input('Toggle sidebar', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
@@ -9782,6 +10572,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }] } });
+/** Rail slot for sidebar. */
 class FrSidebarRail {
     document = inject(DOCUMENT);
     sidebar = inject(FrSidebar, { optional: true });
@@ -9851,6 +10642,7 @@ class FrSidebarRail {
         if (this.frameId !== -1) {
             return;
         }
+        // Batch rapid pointer moves into one width write per animation frame.
         this.frameId = requestAnimationFrame(() => {
             this.provider?.setSidebarWidth(this.pendingWidth);
             this.frameId = -1;
@@ -9878,6 +10670,7 @@ class FrSidebarRail {
         if (!this.sidebar) {
             return 192;
         }
+        // Use rendered child width as a fallback min-size when consumers do not provide one.
         const sidebarElement = this.sidebar.elementRef.nativeElement;
         const sidebarRect = sidebarElement.getBoundingClientRect();
         let measuredWidth = 0;
@@ -9911,6 +10704,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Inset slot for sidebar. */
 class FrSidebarInset {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarInset, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSidebarInset, isStandalone: true, selector: "[frSidebarInset], frame-sidebar-inset", host: { classAttribute: "frame-sidebar-inset" }, ngImport: i0 });
@@ -9924,6 +10718,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Header slot for sidebar. */
 class FrSidebarHeader {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSidebarHeader, isStandalone: true, selector: "[frSidebarHeader], frame-sidebar-header", host: { classAttribute: "frame-sidebar__header" }, ngImport: i0 });
@@ -9937,6 +10732,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Footer slot for sidebar. */
 class FrSidebarFooter {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSidebarFooter, isStandalone: true, selector: "[frSidebarFooter], frame-sidebar-footer", host: { classAttribute: "frame-sidebar__footer" }, ngImport: i0 });
@@ -9950,6 +10746,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Content slot for sidebar. */
 class FrSidebarContent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSidebarContent, isStandalone: true, selector: "[frSidebarContent], frame-sidebar-content", host: { classAttribute: "frame-sidebar__content" }, ngImport: i0 });
@@ -9963,6 +10760,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Group slot for sidebar. */
 class FrSidebarGroup {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSidebarGroup, isStandalone: true, selector: "[frSidebarGroup], frame-sidebar-group", host: { classAttribute: "frame-sidebar__group" }, ngImport: i0 });
@@ -9976,6 +10774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Label slot for sidebar group. */
 class FrSidebarGroupLabel {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarGroupLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSidebarGroupLabel, isStandalone: true, selector: "[frSidebarGroupLabel], frame-sidebar-group-label", host: { classAttribute: "frame-sidebar__group-label" }, ngImport: i0 });
@@ -9989,6 +10788,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Action slot for sidebar group. */
 class FrSidebarGroupAction {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarGroupAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSidebarGroupAction, isStandalone: true, selector: "[frSidebarGroupAction], frame-sidebar-group-action", host: { attributes: { "type": "button" }, classAttribute: "frame-sidebar__group-action" }, ngImport: i0 });
@@ -10003,6 +10803,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Content slot for sidebar group. */
 class FrSidebarGroupContent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarGroupContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSidebarGroupContent, isStandalone: true, selector: "[frSidebarGroupContent], frame-sidebar-group-content", host: { classAttribute: "frame-sidebar__group-content" }, ngImport: i0 });
@@ -10016,6 +10817,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Menu list inside sidebar navigation. */
 class FrSidebarMenu {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSidebarMenu, isStandalone: true, selector: "[frSidebarMenu], frame-sidebar-menu", host: { attributes: { "role": "list" }, classAttribute: "frame-sidebar__menu" }, ngImport: i0 });
@@ -10030,6 +10832,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Item slot for sidebar menu. */
 class FrSidebarMenuItem {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSidebarMenuItem, isStandalone: true, selector: "[frSidebarMenuItem], frame-sidebar-menu-item", host: { attributes: { "role": "listitem" }, classAttribute: "frame-sidebar__menu-item" }, ngImport: i0 });
@@ -10044,6 +10847,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Interactive button or link inside a sidebar menu item. */
 class FrSidebarMenuButton {
     active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -10075,6 +10879,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }] } });
+/** Action slot for sidebar menu. */
 class FrSidebarMenuAction {
     showOnHover = input(false, { ...(ngDevMode ? { debugName: "showOnHover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarMenuAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -10091,6 +10896,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { showOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOnHover", required: false }] }] } });
+/** Badge slot for sidebar menu. */
 class FrSidebarMenuBadge {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarMenuBadge, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSidebarMenuBadge, isStandalone: true, selector: "[frSidebarMenuBadge], frame-sidebar-menu-badge", host: { classAttribute: "frame-sidebar__menu-badge" }, ngImport: i0 });
@@ -10104,6 +10910,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Nested menu list inside sidebar navigation. */
 class FrSidebarMenuSub {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarMenuSub, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSidebarMenuSub, isStandalone: true, selector: "[frSidebarMenuSub], frame-sidebar-menu-sub", host: { attributes: { "role": "list" }, classAttribute: "frame-sidebar__menu-sub" }, ngImport: i0 });
@@ -10118,6 +10925,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Item slot for sidebar menu sub. */
 class FrSidebarMenuSubItem {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSidebarMenuSubItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSidebarMenuSubItem, isStandalone: true, selector: "[frSidebarMenuSubItem], frame-sidebar-menu-sub-item", host: { attributes: { "role": "listitem" }, classAttribute: "frame-sidebar__menu-sub-item" }, ngImport: i0 });
@@ -10132,6 +10940,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Interactive button or link inside a sidebar submenu. */
 class FrSidebarMenuSubButton {
     active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -10157,6 +10966,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+/** Skeleton slot for sidebar menu. */
 class FrSidebarMenuSkeleton {
     showIcon = input(false, { ...(ngDevMode ? { debugName: "showIcon" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     width = input('72%', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
@@ -10176,6 +10986,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         }], propDecorators: { showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
 
 const FR_SWITCH_SIZES = ['sm', 'default'];
+/** Switch input styled as a FrameUI control. */
 class FrSwitch {
     size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSwitch, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -10192,6 +11003,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+/** Field slot for switch. */
 class FrSwitchField {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSwitchField, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSwitchField, isStandalone: true, selector: "[frSwitchField], frame-switch-field", host: { classAttribute: "frame-switch-field" }, ngImport: i0 });
@@ -10205,6 +11017,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Content slot for switch. */
 class FrSwitchContent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSwitchContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSwitchContent, isStandalone: true, selector: "[frSwitchContent], frame-switch-content", host: { classAttribute: "frame-switch-content" }, ngImport: i0 });
@@ -10218,6 +11031,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Label slot for switch. */
 class FrSwitchLabel {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSwitchLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSwitchLabel, isStandalone: true, selector: "[frSwitchLabel], frame-switch-label", host: { classAttribute: "frame-switch-label" }, ngImport: i0 });
@@ -10231,6 +11045,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Description slot for switch. */
 class FrSwitchDescription {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSwitchDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSwitchDescription, isStandalone: true, selector: "[frSwitchDescription], frame-switch-description", host: { classAttribute: "frame-switch-description" }, ngImport: i0 });
@@ -10244,6 +11059,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Error slot for switch. */
 class FrSwitchError {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSwitchError, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSwitchError, isStandalone: true, selector: "[frSwitchError], frame-switch-error", host: { attributes: { "aria-live": "polite" }, classAttribute: "frame-switch-error" }, ngImport: i0 });
@@ -10259,6 +11075,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }] });
 
+/** Textarea control with FrameUI field styling. */
 class FrTextarea {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrTextarea, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrTextarea, isStandalone: true, selector: "textarea[frTextarea]", host: { classAttribute: "frame-textarea" }, ngImport: i0 });
@@ -10316,6 +11133,7 @@ function calculateScrollOffsetForIndex(index, alignment, itemSize, viewportSize,
     }
 }
 
+/** Viewport controller for virtual scrolling. */
 class FrVirtualViewport {
     destroyRef = inject(DestroyRef);
     elementRef = inject(ElementRef);
@@ -10359,6 +11177,7 @@ class FrVirtualViewport {
     }
     scrollToIndex(index, alignment = 'auto') {
         const element = this.elementRef.nativeElement;
+        // Virtual scrolling assumes fixed item heights, so index math can stay O(1).
         const nextScrollTop = calculateScrollOffsetForIndex(index, alignment, this.itemSize(), element.clientHeight, this.totalCount(), element.scrollTop);
         element.scrollTop = nextScrollTop;
         this.scrollTop.set(nextScrollTop);
@@ -10392,6 +11211,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { itemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemSize", required: true }] }], overscan: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscan", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
 
+/** Measured content wrapper for virtual scrolling. */
 class FrVirtualContent {
     viewport = inject(FrVirtualViewport);
     before = computed(() => this.viewport.before(), ...(ngDevMode ? [{ debugName: "before" }] : /* istanbul ignore next */ []));
@@ -10411,6 +11231,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }] });
 
+/** Structural directive for rendering virtualized ranges. */
 class FrVirtualFor {
     templateRef = inject(TemplateRef);
     viewContainerRef = inject(ViewContainerRef);
@@ -10418,6 +11239,7 @@ class FrVirtualFor {
     views = [];
     frVirtualForOf = input.required(...(ngDevMode ? [{ debugName: "frVirtualForOf" }] : /* istanbul ignore next */ []));
     frVirtualForTrackBy = input(null, ...(ngDevMode ? [{ debugName: "frVirtualForTrackBy" }] : /* istanbul ignore next */ []));
+    lastRenderKey = '';
     slice = computed(() => {
         const items = this.frVirtualForOf();
         const start = this.viewport.startIndex();
@@ -10428,12 +11250,21 @@ class FrVirtualFor {
             visible: items.slice(start, end),
         };
     }, ...(ngDevMode ? [{ debugName: "slice" }] : /* istanbul ignore next */ []));
-    constructor() {
-        effect(() => {
-            const items = this.frVirtualForOf();
-            this.viewport.setTotalCount(items.length);
-            this.render();
-        });
+    ngDoCheck() {
+        const items = this.frVirtualForOf();
+        const renderKey = [
+            items,
+            items.length,
+            this.viewport.startIndex(),
+            this.viewport.endIndex(),
+            this.frVirtualForTrackBy(),
+        ].map(String).join('|');
+        this.viewport.setTotalCount(items.length);
+        if (renderKey === this.lastRenderKey) {
+            return;
+        }
+        this.lastRenderKey = renderKey;
+        this.render();
     }
     static ngTemplateContextGuard(_directive, _context) {
         return true;
@@ -10486,8 +11317,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
             args: [{
                     selector: '[frVirtualFor][frVirtualForOf]',
                 }]
-        }], ctorParameters: () => [], propDecorators: { frVirtualForOf: [{ type: i0.Input, args: [{ isSignal: true, alias: "frVirtualForOf", required: true }] }], frVirtualForTrackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "frVirtualForTrackBy", required: false }] }] } });
+        }], propDecorators: { frVirtualForOf: [{ type: i0.Input, args: [{ isSignal: true, alias: "frVirtualForOf", required: true }] }], frVirtualForTrackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "frVirtualForTrackBy", required: false }] }] } });
 
+/** List wrapper for virtualized items. */
 class FrVirtualList {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrVirtualList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrVirtualList, isStandalone: true, selector: "[frVirtualList], frame-virtual-list", host: { classAttribute: "frame-virtual-scroll__list" }, ngImport: i0 });
@@ -10501,6 +11333,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Panel wrapper for virtualized content. */
 class FrVirtualPanel {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrVirtualPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrVirtualPanel, isStandalone: true, selector: "[frVirtualPanel], frame-virtual-panel", host: { classAttribute: "frame-virtual-scroll__panel" }, ngImport: i0 });
@@ -10514,6 +11347,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Item wrapper for virtualized rows. */
 class FrVirtualItem {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrVirtualItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrVirtualItem, isStandalone: true, selector: "[frVirtualItem], frame-virtual-item", host: { classAttribute: "frame-virtual-scroll__item" }, ngImport: i0 });
@@ -10527,6 +11361,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
+/** Meta slot for virtual item. */
 class FrVirtualItemMeta {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrVirtualItemMeta, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrVirtualItemMeta, isStandalone: true, selector: "[frVirtualItemMeta], frame-virtual-item-meta", host: { classAttribute: "frame-virtual-scroll__item-meta" }, ngImport: i0 });
@@ -10545,5 +11380,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_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 };
+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, FrConfirmPopover, FrConfirmPopoverPanel, 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