@frame-ui-ng/components 0.5.0-beta.0 → 0.6.0-beta.0

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

@@ -1,200 +1,253 @@
 import * as i0 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 { inject, TemplateRef, Directive, InjectionToken, DestroyRef, signal, contentChild, viewChild, input, booleanAttribute, computed, effect, Component, output, ElementRef, forwardRef, ChangeDetectionStrategy, linkedSignal, model, afterNextRender, Renderer2, ViewContainerRef, Injectable, PLATFORM_ID, numberAttribute, Injector } from '@angular/core';
 import { NgTemplateOutlet, isPlatformBrowser, NgClass, NgComponentOutlet, DOCUMENT } from '@angular/common';
+import * as i1 from '@angular/cdk/accordion';
+import { CdkAccordionItem, CdkAccordion } from '@angular/cdk/accordion';
+import * as i1$1 from '@frame-ui-ng/components/spinner';
+import { FrSpinner } from '@frame-ui-ng/components/spinner';
 import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
+import * as i1$2 from '@frame-ui-ng/components/select';
+import { FrSelectModule } from '@frame-ui-ng/components/select';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { fromEvent } from 'rxjs';
-import * as i1$1 from '@frame-ui-ng/components/button';
+import * as i1$3 from '@frame-ui-ng/components/button';
 import { FrButton as FrButton$1, FrButtonLabel as FrButtonLabel$1 } from '@frame-ui-ng/components/button';
 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 * as i1$4 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';
+import * as i1$5 from '@frame-ui-ng/components/dropdown-menu';
 import { buildConnectedPositions as buildConnectedPositions$1, FR_DROPDOWN_MENU_CONTENT as FR_DROPDOWN_MENU_CONTENT$1, FrDropdownMenuTree as FrDropdownMenuTree$1, FR_DROPDOWN_MENU_PARENT as FR_DROPDOWN_MENU_PARENT$1, defaultPositions as defaultPositions$1, FrDropdownMenuTrigger as FrDropdownMenuTrigger$1, FrDropdownMenuContent as FrDropdownMenuContent$1, FrDropdownMenuPanel as FrDropdownMenuPanel$1, FrDropdownMenuItem as FrDropdownMenuItem$1, FrDropdownMenuCheckboxItem as FrDropdownMenuCheckboxItem$1, FrDropdownMenuRadioGroup as FrDropdownMenuRadioGroup$1, FrDropdownMenuRadioItem as FrDropdownMenuRadioItem$1, FrDropdownMenuLabel as FrDropdownMenuLabel$1, FrDropdownMenuSeparator as FrDropdownMenuSeparator$1, FrDropdownMenuShortcut as FrDropdownMenuShortcut$1, FrDropdownMenuItemIndicator as FrDropdownMenuItemIndicator$1, FrDropdownMenuSub as FrDropdownMenuSub$1, FrDropdownMenuSubTrigger as FrDropdownMenuSubTrigger$1, FrDropdownMenu as FrDropdownMenu$1 } from '@frame-ui-ng/components/dropdown-menu';
 import { FrCalendar as FrCalendar$1 } from '@frame-ui-ng/components/calendar';
 import { FrInput as FrInput$1 } from '@frame-ui-ng/components/input';
 import { clampNumber, valueToCssSize, coerceNumber } from '@frame-ui-ng/components/utils';
 
+/** Content template for accordion items. */
+class FrAccordionContent {
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrAccordionContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrAccordionContent, isStandalone: true, selector: "ng-template[frameAccordionContent]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrAccordionContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[frameAccordionContent]',
+                    standalone: true,
+                }]
+        }] });
+
 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 = [];
-    ngAfterViewInit() {
-        this.lastOpen = this.item.open();
-        this.applyStaticState(this.lastOpen);
-        this.initialized = true;
+/** Accordion item powered by Angular CDK accordion item state. */
+class FrAccordionItem {
+    root = inject(ACCORDION_ROOT);
+    cdkItem = inject(CdkAccordionItem, { self: true });
+    destroyRef = inject(DestroyRef);
+    expanded = signal(false, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    frameId = null;
+    syncingDefaultState = false;
+    content = contentChild(FrAccordionContent, ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    contentPanel = viewChild('contentPanel', ...(ngDevMode ? [{ debugName: "contentPanel" }] : /* istanbul ignore next */ []));
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    open = computed(() => this.expanded(), ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    contentHeight = signal('0px', ...(ngDevMode ? [{ debugName: "contentHeight" }] : /* istanbul ignore next */ []));
+    triggerId = computed(() => `frame-accordion-trigger-${this.cdkItem.id}`, ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
+    contentId = computed(() => `frame-accordion-content-${this.cdkItem.id}`, ...(ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const expandedSubscription = this.cdkItem.expandedChange.subscribe((expanded) => {
+            this.setExpanded(expanded, !this.syncingDefaultState);
+            if (!this.syncingDefaultState) {
+                this.root.itemExpansionChanged(this.value(), expanded);
+            }
+        });
+        this.destroyRef.onDestroy(() => {
+            expandedSubscription.unsubscribe();
+            this.cancelFrame();
+        });
+        effect(() => {
+            this.cdkItem.disabled = this.disabled();
+        });
+        effect(() => {
+            this.syncingDefaultState = true;
+            const shouldBeExpanded = this.root.isDefaultItemOpen(this.value());
+            if (this.cdkItem.expanded !== shouldBeExpanded) {
+                this.cdkItem.expanded = shouldBeExpanded;
+                this.setExpanded(shouldBeExpanded, false);
+            }
+            this.syncingDefaultState = false;
+        });
     }
-    ngDoCheck() {
-        const open = this.item.open();
-        if (!this.initialized || open === this.lastOpen) {
+    toggle() {
+        if (this.disabled()) {
             return;
         }
-        this.cancelAnimationFrame();
-        this.lastOpen = open;
-        this.animate(open);
-    }
-    ngOnDestroy() {
-        this.cancelAnimationFrame();
+        if (this.open() && this.root.type() === 'single' && !this.root.collapsible()) {
+            return;
+        }
+        this.root.syncCdkMode();
+        this.cdkItem.toggle();
     }
-    onTransitionEnd(event) {
-        if (event.target !== this.host.nativeElement || event.propertyName !== 'height') {
+    onContentTransitionEnd(event) {
+        if (event.target !== this.contentPanel()?.nativeElement || event.propertyName !== 'height') {
             return;
         }
-        if (!this.item.open()) {
-            this.host.nativeElement.style.visibility = 'hidden';
+        if (this.open()) {
+            this.contentHeight.set('auto');
             return;
         }
-        this.host.nativeElement.style.height = 'auto';
     }
-    animate(open) {
-        const element = this.host.nativeElement;
-        const currentHeight = element.getBoundingClientRect().height;
-        const contentHeight = this.measureContentHeight();
-        if (open) {
-            element.style.visibility = 'visible';
-            element.style.height = `${currentHeight}px`;
-            if (currentHeight === 0) {
-                element.style.opacity = '0';
-            }
-            void element.offsetHeight;
-            this.requestAnimationFrame(() => {
-                element.style.height = `${contentHeight}px`;
-                element.style.opacity = '1';
-            });
+    setExpanded(expanded, animate) {
+        this.expanded.set(expanded);
+        if (expanded) {
+            this.openContent(animate);
             return;
         }
-        element.style.height = `${currentHeight || contentHeight}px`;
-        element.style.opacity = '1';
-        void element.offsetHeight;
-        this.requestAnimationFrame(() => {
-            element.style.height = '0px';
-            element.style.opacity = '0';
-        });
-    }
-    applyStaticState(open) {
-        const element = this.host.nativeElement;
-        element.style.height = open ? 'auto' : '0px';
-        element.style.opacity = open ? '1' : '0';
-        element.style.visibility = open ? 'visible' : 'hidden';
-    }
-    measureContentHeight() {
-        return this.host.nativeElement.scrollHeight;
+        this.closeContent(animate);
     }
-    cancelAnimationFrame() {
-        for (const rafId of this.rafIds) {
-            cancelAnimationFrame(rafId);
+    openContent(animate) {
+        this.cancelFrame();
+        if (!animate) {
+            this.contentHeight.set('auto');
+            return;
         }
-        this.rafIds = [];
+        this.contentHeight.set('0px');
+        this.scheduleFrame(() => {
+            const panel = this.contentPanel()?.nativeElement;
+            if (!panel || !this.open()) {
+                return;
+            }
+            this.contentHeight.set(`${panel.scrollHeight}px`);
+        });
     }
-    requestAnimationFrame(callback) {
-        const rafId = requestAnimationFrame((time) => {
-            this.rafIds = this.rafIds.filter((id) => id !== rafId);
-            callback(time);
+    closeContent(animate) {
+        this.cancelFrame();
+        const panel = this.contentPanel()?.nativeElement;
+        if (!animate || !panel) {
+            this.contentHeight.set('0px');
+            return;
+        }
+        this.contentHeight.set(`${panel.getBoundingClientRect().height}px`);
+        this.scheduleFrame(() => {
+            if (this.open()) {
+                return;
+            }
+            this.contentHeight.set('0px');
         });
-        this.rafIds.push(rafId);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrAccordionContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrAccordionContent, isStandalone: true, selector: "[frAccordionContent]", host: { attributes: { "role": "region" }, listeners: { "transitionend": "onTransitionEnd($event)" }, properties: { "attr.aria-hidden": "item.open() ? \"false\" : \"true\"", "attr.aria-labelledby": "item.triggerId()", "attr.data-state": "item.open() ? \"open\" : \"closed\"", "attr.id": "item.contentId()" }, classAttribute: "frame-accordion__content" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrAccordionContent, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[frAccordionContent]',
-                    standalone: true,
-                    host: {
-                        class: 'frame-accordion__content',
-                        '[attr.aria-hidden]': 'item.open() ? "false" : "true"',
-                        '[attr.aria-labelledby]': 'item.triggerId()',
-                        '[attr.data-state]': 'item.open() ? "open" : "closed"',
-                        '[attr.id]': 'item.contentId()',
-                        '(transitionend)': 'onTransitionEnd($event)',
-                        'role': 'region',
-                    },
-                }]
-        }] });
-
-let accordionItemId = 0;
-/** Item slot for accordion. */
-class FrAccordionItem {
-    root = inject(ACCORDION_ROOT);
-    itemId = ++accordionItemId;
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    open = computed(() => this.root.isItemOpen(this.value()), ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
-    triggerId = computed(() => `frame-accordion-trigger-${this.itemId}`, ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
-    contentId = computed(() => `frame-accordion-content-${this.itemId}`, ...(ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []));
-    toggle() {
-        if (this.disabled()) {
+    scheduleFrame(callback) {
+        if (typeof globalThis.requestAnimationFrame === 'function') {
+            this.frameId = globalThis.requestAnimationFrame(callback);
+            return;
+        }
+        callback();
+    }
+    cancelFrame() {
+        if (this.frameId == null || typeof globalThis.cancelAnimationFrame !== 'function') {
+            this.frameId = null;
             return;
         }
-        this.root.toggleItem(this.value());
+        globalThis.cancelAnimationFrame(this.frameId);
+        this.frameId = null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrAccordionItem, isStandalone: true, selector: "[frAccordionItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-state": "open() ? \"open\" : \"closed\"" }, classAttribute: "frame-accordion__item" }, providers: [{ provide: ACCORDION_ITEM, useExisting: FrAccordionItem }], exportAs: ["frAccordionItem"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.16", type: FrAccordionItem, isStandalone: true, selector: "frame-accordion-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-state": "open() ? \"open\" : \"closed\"" }, classAttribute: "frame-accordion__item" }, providers: [{ provide: ACCORDION_ITEM, useExisting: FrAccordionItem }], queries: [{ propertyName: "content", first: true, predicate: FrAccordionContent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "contentPanel", first: true, predicate: ["contentPanel"], descendants: true, isSignal: true }], exportAs: ["frameAccordionItem"], hostDirectives: [{ directive: i1.CdkAccordionItem }], ngImport: i0, template: `
+    <ng-content select="button[frameAccordionTrigger]" />
+
+    <div
+      #contentPanel
+      class="frame-accordion__content"
+      [attr.aria-hidden]="open() ? null : 'true'"
+      [attr.aria-labelledby]="triggerId()"
+      [attr.id]="contentId()"
+      [attr.data-state]="open() ? 'open' : 'closed'"
+      [style.height]="contentHeight()"
+      (transitionend)="onContentTransitionEnd($event)"
+      role="region"
+    >
+      <div class="frame-accordion__content-inner">
+        <ng-container [ngTemplateOutlet]="content()?.templateRef ?? null" />
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrAccordionItem, decorators: [{
-            type: Directive,
+            type: Component,
             args: [{
-                    selector: '[frAccordionItem]',
-                    exportAs: 'frAccordionItem',
+                    selector: 'frame-accordion-item',
+                    exportAs: 'frameAccordionItem',
                     standalone: true,
+                    imports: [NgTemplateOutlet],
+                    hostDirectives: [CdkAccordionItem],
                     providers: [{ provide: ACCORDION_ITEM, useExisting: FrAccordionItem }],
                     host: {
                         class: 'frame-accordion__item',
                         '[attr.data-disabled]': 'disabled() ? "" : null',
                         '[attr.data-state]': 'open() ? "open" : "closed"',
                     },
+                    template: `
+    <ng-content select="button[frameAccordionTrigger]" />
+
+    <div
+      #contentPanel
+      class="frame-accordion__content"
+      [attr.aria-hidden]="open() ? null : 'true'"
+      [attr.aria-labelledby]="triggerId()"
+      [attr.id]="contentId()"
+      [attr.data-state]="open() ? 'open' : 'closed'"
+      [style.height]="contentHeight()"
+      (transitionend)="onContentTransitionEnd($event)"
+      role="region"
+    >
+      <div class="frame-accordion__content-inner">
+        <ng-container [ngTemplateOutlet]="content()?.templateRef ?? null" />
+      </div>
+    </div>
+  `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { content: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FrAccordionContent), { isSignal: true }] }], contentPanel: [{ type: i0.ViewChild, args: ['contentPanel', { isSignal: true }] }], 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. */
+/** Accordion root powered by Angular CDK accordion state management. */
 class FrAccordion {
+    cdkAccordion = inject(CdkAccordion, { self: true });
     type = input('single', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-    border = input(true, { ...(ngDevMode ? { debugName: "border" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    border = input(false, { ...(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 = linkedSignal(() => this.normalizeValues(this.defaultValue(), this.type()), ...(ngDevMode ? [{ debugName: "openItems" }] : /* istanbul ignore next */ []));
-    isItemOpen(value) {
-        return this.openItems().includes(value);
-    }
-    toggleItem(value) {
-        const current = this.openItems();
-        const isOpen = current.includes(value);
-        if (this.type() === 'multiple') {
-            const next = isOpen
-                ? current.filter((item) => item !== value)
-                : [...current, value];
-            this.commit(next);
-            return;
-        }
-        if (isOpen) {
-            if (!this.collapsible()) {
-                return;
-            }
-            this.commit([]);
-            return;
-        }
-        this.commit([value]);
+    defaultOpenValues = computed(() => this.normalizeValues(this.defaultValue(), this.type()), ...(ngDevMode ? [{ debugName: "defaultOpenValues" }] : /* istanbul ignore next */ []));
+    currentOpenValues = signal([], ...(ngDevMode ? [{ debugName: "currentOpenValues" }] : /* istanbul ignore next */ []));
+    openValues = computed(() => new Set(this.currentOpenValues()), ...(ngDevMode ? [{ debugName: "openValues" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            this.cdkAccordion.multi = this.type() === 'multiple';
+            this.currentOpenValues.set(this.defaultOpenValues());
+        });
     }
-    commit(next) {
-        this.openItems.set(next);
-        if (this.type() === 'multiple') {
-            this.valueChange.emit(next);
-            return;
-        }
-        this.valueChange.emit(next[0] ?? null);
+    isDefaultItemOpen(value) {
+        return this.currentOpenValues().includes(value);
+    }
+    itemExpansionChanged(value, expanded) {
+        const current = this.openValues();
+        const next = expanded
+            ? this.type() === 'multiple'
+                ? [...new Set([...current, value])]
+                : [value]
+            : [...current].filter((item) => item !== value);
+        this.currentOpenValues.set(next);
+        this.valueChange.emit(this.type() === 'multiple' ? next : (next[0] ?? null));
+    }
+    openAll() {
+        this.cdkAccordion.openAll();
+    }
+    closeAll() {
+        this.cdkAccordion.closeAll();
+    }
+    syncCdkMode() {
+        this.cdkAccordion.multi = this.type() === 'multiple';
     }
     normalizeValues(value, type) {
         if (Array.isArray(value)) {
@@ -205,34 +258,36 @@ class FrAccordion {
         }
         return [value];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrAccordion, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrAccordion, isStandalone: true, selector: "[frAccordion]", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.data-border": "border() ? \"true\" : \"false\"", "attr.data-type": "type()" }, classAttribute: "frame-accordion" }, providers: [{ provide: ACCORDION_ROOT, useExisting: FrAccordion }], exportAs: ["frAccordion"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: FrAccordion, isStandalone: true, selector: "frame-accordion", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.data-border": "border() ? \"true\" : \"false\"", "attr.data-type": "type()" }, classAttribute: "frame-accordion" }, providers: [{ provide: ACCORDION_ROOT, useExisting: FrAccordion }], exportAs: ["frameAccordion"], hostDirectives: [{ directive: i1.CdkAccordion }], ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrAccordion, decorators: [{
-            type: Directive,
+            type: Component,
             args: [{
-                    selector: '[frAccordion]',
-                    exportAs: 'frAccordion',
+                    selector: 'frame-accordion',
+                    exportAs: 'frameAccordion',
                     standalone: true,
+                    hostDirectives: [CdkAccordion],
                     providers: [{ provide: ACCORDION_ROOT, useExisting: FrAccordion }],
                     host: {
                         class: 'frame-accordion',
                         '[attr.data-border]': 'border() ? "true" : "false"',
                         '[attr.data-type]': 'type()',
                     },
+                    template: `<ng-content />`,
                 }]
-        }], 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"] }] } });
+        }], 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"] }] } });
 
-/** Trigger control for accordion. */
+/** Trigger control for accordion items. */
 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 });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrAccordionTrigger, isStandalone: true, selector: "button[frAccordionTrigger]", host: { attributes: { "type": "button" }, listeners: { "click": "item.toggle()" }, properties: { "attr.aria-controls": "item.contentId()", "attr.aria-expanded": "item.open() ? \"true\" : \"false\"", "attr.data-disabled": "item.disabled() ? \"\" : null", "attr.data-state": "item.open() ? \"open\" : \"closed\"", "attr.disabled": "item.disabled() ? \"\" : null", "attr.id": "item.triggerId()" }, classAttribute: "frame-accordion__trigger" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrAccordionTrigger, isStandalone: true, selector: "button[frameAccordionTrigger]", host: { attributes: { "type": "button" }, listeners: { "click": "item.toggle()" }, properties: { "attr.aria-controls": "item.contentId()", "attr.aria-expanded": "item.open() ? \"true\" : \"false\"", "attr.data-disabled": "item.disabled() ? \"\" : null", "attr.data-state": "item.open() ? \"open\" : \"closed\"", "attr.disabled": "item.disabled() ? \"\" : null", "attr.id": "item.triggerId()" }, classAttribute: "frame-accordion__trigger" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrAccordionTrigger, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'button[frAccordionTrigger]',
+                    selector: 'button[frameAccordionTrigger]',
                     standalone: true,
                     host: {
                         class: 'frame-accordion__trigger',
@@ -247,15 +302,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                 }]
         }] });
-/** Icon slot for accordion. */
+/** Optional icon slot for accordion triggers. */
 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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrAccordionIcon, isStandalone: true, selector: "[frameAccordionIcon]", host: { attributes: { "aria-hidden": "true" }, classAttribute: "frame-accordion__icon" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrAccordionIcon, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[frAccordionIcon]',
+                    selector: '[frameAccordionIcon]',
                     standalone: true,
                     host: {
                         class: 'frame-accordion__icon',
@@ -277,14 +332,14 @@ const FR_ALERT_VARIANTS = [
 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 });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrAlert, isStandalone: true, selector: "[frAlert]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "alert" }, properties: { "attr.data-variant": "variant()" }, classAttribute: "frame-alert" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrAlert, isStandalone: true, selector: "[frAlert]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "alert" }, properties: { "attr.data-variant": "variant()" }, classAttribute: "frame-alert frame-corner-handles" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrAlert, decorators: [{
             type: Directive,
             args: [{
                     selector: '[frAlert]',
                     host: {
-                        class: 'frame-alert',
+                        class: 'frame-alert frame-corner-handles',
                         '[attr.data-variant]': 'variant()',
                         'role': 'alert',
                     },
@@ -549,7 +604,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 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 });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrBadgeSpinner, isStandalone: true, selector: "[frBadgeSpinner]", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "attr.data-icon": "position()", "attr.role": "null", "attr.aria-label": "null" }, classAttribute: "frame-badge__spinner" }, hostDirectives: [{ directive: i1.FrSpinner, inputs: ["sizeValue", "sizeValue", "decorative", "decorative", "duration", "duration", "label", "label", "size", "size", "stroke", "stroke"] }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrBadgeSpinner, isStandalone: true, selector: "[frBadgeSpinner]", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "attr.data-icon": "position()", "attr.role": "null", "attr.aria-label": "null" }, classAttribute: "frame-badge__spinner" }, hostDirectives: [{ directive: i1$1.FrSpinner, inputs: ["sizeValue", "sizeValue", "decorative", "decorative", "duration", "duration", "label", "label", "size", "size", "stroke", "stroke"] }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrBadgeSpinner, decorators: [{
             type: Directive,
@@ -665,7 +720,11 @@ 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>
+    <svg aria-hidden="true" viewBox="0 0 24 24" fill="currentColor">
+      <circle cx="5" cy="12" r="1.75"></circle>
+      <circle cx="12" cy="12" r="1.75"></circle>
+      <circle cx="19" cy="12" r="1.75"></circle>
+    </svg>
     <span class="frame-breadcrumb__sr-only">{{ label() }}</span>
   `, isInline: true });
 }
@@ -678,7 +737,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         'role': 'presentation',
                     },
                     template: `
-    <span aria-hidden="true">...</span>
+    <svg aria-hidden="true" viewBox="0 0 24 24" fill="currentColor">
+      <circle cx="5" cy="12" r="1.75"></circle>
+      <circle cx="12" cy="12" r="1.75"></circle>
+      <circle cx="19" cy="12" r="1.75"></circle>
+    </svg>
     <span class="frame-breadcrumb__sr-only">{{ label() }}</span>
   `,
                 }]
@@ -703,14 +766,14 @@ class FrButton {
     hasCustomLoadingIndicator = computed(() => !!this.loadingIndicator() || !!this.spinnerIndicator(), ...(ngDevMode ? [{ debugName: "hasCustomLoadingIndicator" }] : /* istanbul ignore next */ []));
     isUnavailable = computed(() => this.disabled() || this.loading(), ...(ngDevMode ? [{ debugName: "isUnavailable" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.16", type: FrButton, isStandalone: true, selector: "a[frButton], button[frButton]", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingDisplay: { classPropertyName: "loadingDisplay", publicName: "loadingDisplay", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-appearance": "appearance()", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-has-custom-loading": "hasCustomLoadingIndicator() ? \"\" : null", "attr.data-loading": "loading() ? \"\" : null", "attr.data-loading-display": "loadingDisplay()", "attr.data-size": "size()", "attr.aria-busy": "loading() ? \"true\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.disabled": "isUnavailable() ? \"\" : null", "class.frame-button-disabled": "isUnavailable()", "class.frame-button-loading": "loading()" }, classAttribute: "frame-button" }, queries: [{ propertyName: "loadingIndicator", first: true, predicate: FrButtonLoading, descendants: true, isSignal: true }, { propertyName: "spinnerIndicator", first: true, predicate: FrSpinner, descendants: true, isSignal: true }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.16", type: FrButton, isStandalone: true, selector: "a[frButton], button[frButton]", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingDisplay: { classPropertyName: "loadingDisplay", publicName: "loadingDisplay", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-appearance": "appearance()", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-has-custom-loading": "hasCustomLoadingIndicator() ? \"\" : null", "attr.data-loading": "loading() ? \"\" : null", "attr.data-loading-display": "loadingDisplay()", "attr.data-size": "size()", "attr.aria-busy": "loading() ? \"true\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.disabled": "isUnavailable() ? \"\" : null", "class.frame-button-disabled": "isUnavailable()", "class.frame-button-loading": "loading()" }, classAttribute: "frame-button frame-corner-handles" }, queries: [{ propertyName: "loadingIndicator", first: true, predicate: FrButtonLoading, descendants: true, isSignal: true }, { propertyName: "spinnerIndicator", first: true, predicate: FrSpinner, descendants: true, isSignal: true }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrButton, decorators: [{
             type: Directive,
             args: [{
                     selector: 'a[frButton], button[frButton]',
                     host: {
-                        class: 'frame-button',
+                        class: 'frame-button frame-corner-handles',
                         '[attr.data-appearance]': 'appearance()',
                         '[attr.data-disabled]': 'disabled() ? "" : null',
                         '[attr.data-has-custom-loading]': 'hasCustomLoadingIndicator() ? "" : null',
@@ -798,14 +861,14 @@ const FR_BUTTON_GROUP_ORIENTATIONS = ['horizontal', 'vertical'];
 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 });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrButtonGroup, isStandalone: true, selector: "[frButtonGroup], frame-button-group", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.data-orientation": "orientation()" }, classAttribute: "frame-button-group" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrButtonGroup, isStandalone: true, selector: "[frButtonGroup], frame-button-group", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.data-orientation": "orientation()" }, classAttribute: "frame-button-group frame-corner-handles" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrButtonGroup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[frButtonGroup], frame-button-group',
                     host: {
-                        class: 'frame-button-group',
+                        class: 'frame-button-group frame-corner-handles',
                         '[attr.data-orientation]': 'orientation()',
                         role: 'group',
                     },
@@ -837,8 +900,6 @@ class FrCalendar {
     cellTemplate = input(null, ...(ngDevMode ? [{ debugName: "cellTemplate" }] : /* istanbul ignore next */ []));
     previousMonthTemplate = input(null, ...(ngDevMode ? [{ debugName: "previousMonthTemplate" }] : /* istanbul ignore next */ []));
     nextMonthTemplate = input(null, ...(ngDevMode ? [{ debugName: "nextMonthTemplate" }] : /* istanbul ignore next */ []));
-    previousMonthIcon = input('‹', ...(ngDevMode ? [{ debugName: "previousMonthIcon" }] : /* istanbul ignore next */ []));
-    nextMonthIcon = input('›', ...(ngDevMode ? [{ debugName: "nextMonthIcon" }] : /* istanbul ignore next */ []));
     previousMonthLabel = input('Previous month', ...(ngDevMode ? [{ debugName: "previousMonthLabel" }] : /* istanbul ignore next */ []));
     nextMonthLabel = input('Next month', ...(ngDevMode ? [{ debugName: "nextMonthLabel" }] : /* istanbul ignore next */ []));
     month = input(undefined, ...(ngDevMode ? [{ debugName: "month" }] : /* istanbul ignore next */ []));
@@ -851,6 +912,8 @@ class FrCalendar {
     cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
     host = inject((ElementRef));
     currentMonth = computed(() => startOfMonth(this.navigatedMonth() ?? this.month() ?? new Date()), ...(ngDevMode ? [{ debugName: "currentMonth" }] : /* istanbul ignore next */ []));
+    currentMonthValue = computed(() => String(this.currentMonth().getMonth()), ...(ngDevMode ? [{ debugName: "currentMonthValue" }] : /* istanbul ignore next */ []));
+    currentYearValue = computed(() => String(this.currentMonth().getFullYear()), ...(ngDevMode ? [{ debugName: "currentYearValue" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     value = computed(() => {
         const selected = this.selected();
@@ -858,13 +921,13 @@ class FrCalendar {
     }, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     weekdayLabels = computed(() => buildWeekdayLabels(this.locale(), this.firstDayOfWeek(), this.timeZone()), ...(ngDevMode ? [{ debugName: "weekdayLabels" }] : /* istanbul ignore next */ []));
     monthOptions = computed(() => Array.from({ length: 12 }, (_, value) => ({
-        value,
+        value: String(value),
         label: new Intl.DateTimeFormat(this.locale(), {
             month: 'short',
             timeZone: this.timeZone(),
         }).format(new Date(2026, value, 1)),
     })), ...(ngDevMode ? [{ debugName: "monthOptions" }] : /* istanbul ignore next */ []));
-    yearOptions = computed(() => Array.from({ length: Math.max(0, this.toYear() - this.fromYear() + 1) }, (_, index) => this.fromYear() + index), ...(ngDevMode ? [{ debugName: "yearOptions" }] : /* istanbul ignore next */ []));
+    yearOptions = computed(() => Array.from({ length: Math.max(0, this.toYear() - this.fromYear() + 1) }, (_, index) => String(this.fromYear() + index)), ...(ngDevMode ? [{ debugName: "yearOptions" }] : /* istanbul ignore next */ []));
     months = computed(() => Array.from({ length: Math.max(1, this.numberOfMonths()) }, (_, index) => this.buildMonth(addMonths(this.currentMonth(), index))), ...(ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []));
     activeDate = computed(() => this.resolveActiveDate(), ...(ngDevMode ? [{ debugName: "activeDate" }] : /* istanbul ignore next */ []));
     hasDateLabels = computed(() => Object.keys(this.dateLabels()).length > 0, ...(ngDevMode ? [{ debugName: "hasDateLabels" }] : /* istanbul ignore next */ []));
@@ -895,10 +958,16 @@ class FrCalendar {
         this.updateMonth(addMonths(this.currentMonth(), 1));
     }
     setMonth(value) {
+        if (value === null) {
+            return;
+        }
         const month = new Date(this.currentMonth().getFullYear(), Number(value), 1);
         this.updateMonth(month);
     }
     setYear(value) {
+        if (value === null) {
+            return;
+        }
         const month = new Date(Number(value), this.currentMonth().getMonth(), 1);
         this.updateMonth(month);
     }
@@ -1064,7 +1133,7 @@ class FrCalendar {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrCalendar, isStandalone: true, selector: "frame-calendar", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, fromYear: { classPropertyName: "fromYear", publicName: "fromYear", isSignal: true, isRequired: false, transformFunction: null }, toYear: { classPropertyName: "toYear", publicName: "toYear", isSignal: true, isRequired: false, transformFunction: null }, showOutsideDays: { classPropertyName: "showOutsideDays", publicName: "showOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumber: { classPropertyName: "showWeekNumber", publicName: "showWeekNumber", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, dateLabels: { classPropertyName: "dateLabels", publicName: "dateLabels", isSignal: true, isRequired: false, transformFunction: null }, disabledMatcher: { classPropertyName: "disabledMatcher", publicName: "disabledMatcher", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null }, previousMonthTemplate: { classPropertyName: "previousMonthTemplate", publicName: "previousMonthTemplate", isSignal: true, isRequired: false, transformFunction: null }, nextMonthTemplate: { classPropertyName: "nextMonthTemplate", publicName: "nextMonthTemplate", isSignal: true, isRequired: false, transformFunction: null }, previousMonthIcon: { classPropertyName: "previousMonthIcon", publicName: "previousMonthIcon", isSignal: true, isRequired: false, transformFunction: null }, nextMonthIcon: { classPropertyName: "nextMonthIcon", publicName: "nextMonthIcon", isSignal: true, isRequired: false, transformFunction: null }, previousMonthLabel: { classPropertyName: "previousMonthLabel", publicName: "previousMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, nextMonthLabel: { classPropertyName: "nextMonthLabel", publicName: "nextMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", monthChange: "monthChange" }, host: { properties: { "attr.data-mode": "mode()", "attr.data-caption-layout": "captionLayout()", "attr.data-disabled": "isDisabled() ? \"\" : null", "attr.data-week-number": "showWeekNumber() ? \"\" : null", "attr.data-date-labels": "hasDateLabels() ? \"\" : null", "attr.dir": "dir()" }, classAttribute: "frame-calendar" }, providers: [VALUE_ACCESSOR], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrCalendar, isStandalone: true, selector: "frame-calendar", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, fromYear: { classPropertyName: "fromYear", publicName: "fromYear", isSignal: true, isRequired: false, transformFunction: null }, toYear: { classPropertyName: "toYear", publicName: "toYear", isSignal: true, isRequired: false, transformFunction: null }, showOutsideDays: { classPropertyName: "showOutsideDays", publicName: "showOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumber: { classPropertyName: "showWeekNumber", publicName: "showWeekNumber", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, dateLabels: { classPropertyName: "dateLabels", publicName: "dateLabels", isSignal: true, isRequired: false, transformFunction: null }, disabledMatcher: { classPropertyName: "disabledMatcher", publicName: "disabledMatcher", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null }, previousMonthTemplate: { classPropertyName: "previousMonthTemplate", publicName: "previousMonthTemplate", isSignal: true, isRequired: false, transformFunction: null }, nextMonthTemplate: { classPropertyName: "nextMonthTemplate", publicName: "nextMonthTemplate", isSignal: true, isRequired: false, transformFunction: null }, previousMonthLabel: { classPropertyName: "previousMonthLabel", publicName: "previousMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, nextMonthLabel: { classPropertyName: "nextMonthLabel", publicName: "nextMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", monthChange: "monthChange" }, host: { properties: { "attr.data-mode": "mode()", "attr.data-caption-layout": "captionLayout()", "attr.data-disabled": "isDisabled() ? \"\" : null", "attr.data-week-number": "showWeekNumber() ? \"\" : null", "attr.data-date-labels": "hasDateLabels() ? \"\" : null", "attr.dir": "dir()" }, classAttribute: "frame-calendar frame-corner-handles" }, providers: [VALUE_ACCESSOR], ngImport: i0, template: `
     <div class="frame-calendar__header">
       <button
         class="frame-calendar__nav-button"
@@ -1076,39 +1145,100 @@ class FrCalendar {
         @if (previousMonthTemplate(); as template) {
           <ng-container [ngTemplateOutlet]="template" />
         } @else {
-          {{ previousMonthIcon() }}
+          <svg
+            class="frame-calendar__nav-icon"
+            aria-hidden="true"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="m15 18-6-6 6-6"></path>
+          </svg>
         }
       </button>
 
       @if (captionLayout() === 'dropdown') {
         <div class="frame-calendar__caption-controls">
-          <select
+          <button
             class="frame-calendar__select"
+            [frSelect]="monthMenu"
             [disabled]="isDisabled()"
-            [value]="currentMonth().getMonth()"
+            [value]="currentMonthValue()"
+            (valueChange)="setMonth($event)"
+            indicatorPosition="end"
             aria-label="Month"
-            (change)="setMonth($any($event.target).value)"
+            type="button"
           >
-            @for (month of monthOptions(); track month.value) {
-              <option [value]="month.value" [selected]="month.value === currentMonth().getMonth()">
-                {{ month.label }}
-              </option>
-            }
-          </select>
+            <frame-select-value></frame-select-value>
+            <span frSelectIcon>
+              <svg
+                class="frame-calendar__select-icon"
+                aria-hidden="true"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="m6 9 6 6 6-6"></path>
+              </svg>
+            </span>
+          </button>
+
+          <ng-template #monthMenu="frSelectContent" frSelectContent>
+            <frame-select-panel>
+              <frame-select-group>
+              @for (month of monthOptions(); track month.value) {
+                <button frSelectItem [value]="month.value" [label]="month.label" type="button">
+                  {{ month.label }}
+                </button>
+              }
+              </frame-select-group>
+            </frame-select-panel>
+          </ng-template>
 
-          <select
+          <button
             class="frame-calendar__select"
+            [frSelect]="yearMenu"
             [disabled]="isDisabled()"
-            [value]="currentMonth().getFullYear()"
+            [value]="currentYearValue()"
+            (valueChange)="setYear($event)"
+            indicatorPosition="end"
             aria-label="Year"
-            (change)="setYear($any($event.target).value)"
+            type="button"
           >
-            @for (year of yearOptions(); track year) {
-              <option [value]="year" [selected]="year === currentMonth().getFullYear()">
-                {{ year }}
-              </option>
-            }
-          </select>
+            <frame-select-value></frame-select-value>
+            <span frSelectIcon>
+              <svg
+                class="frame-calendar__select-icon"
+                aria-hidden="true"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="m6 9 6 6 6-6"></path>
+              </svg>
+            </span>
+          </button>
+
+          <ng-template #yearMenu="frSelectContent" frSelectContent>
+            <frame-select-panel>
+              <frame-select-group>
+              @for (year of yearOptions(); track year) {
+                <button frSelectItem [value]="year" [label]="year" type="button">
+                  {{ year }}
+                </button>
+              }
+              </frame-select-group>
+            </frame-select-panel>
+          </ng-template>
         </div>
       } @else {
         <div class="frame-calendar__caption" aria-live="polite">
@@ -1126,7 +1256,18 @@ class FrCalendar {
         @if (nextMonthTemplate(); as template) {
           <ng-container [ngTemplateOutlet]="template" />
         } @else {
-          {{ nextMonthIcon() }}
+          <svg
+            class="frame-calendar__nav-icon"
+            aria-hidden="true"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="m9 18 6-6-6-6"></path>
+          </svg>
         }
       </button>
     </div>
@@ -1209,17 +1350,17 @@ class FrCalendar {
         </section>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FrSelectModule }, { kind: "directive", type: i1$2.FrSelect, selector: "button[frSelect]", inputs: ["value", "frSelect", "debugVisible", "disabled", "indicatorPosition", "invalid"], outputs: ["valueChange"] }, { kind: "directive", type: i1$2.FrSelectContent, selector: "ng-template[frSelectContent]", inputs: ["position"], exportAs: ["frSelectContent"] }, { kind: "directive", type: i1$2.FrSelectGroup, selector: "[frSelectGroup], frame-select-group" }, { kind: "directive", type: i1$2.FrSelectIcon, selector: "[frSelectIcon], frame-select-icon", inputs: ["position"] }, { kind: "directive", type: i1$2.FrSelectItem, selector: "button[frSelectItem]", inputs: ["label", "value"] }, { kind: "directive", type: i1$2.FrSelectPanel, selector: "[frSelectPanel], frame-select-panel" }, { kind: "directive", type: i1$2.FrSelectValue, selector: "[frSelectValue], frame-select-value", inputs: ["placeholder"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCalendar, decorators: [{
             type: Component,
             args: [{
                     selector: 'frame-calendar',
-                    imports: [NgTemplateOutlet],
+                    imports: [NgTemplateOutlet, FrSelectModule],
                     providers: [VALUE_ACCESSOR],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
-                        class: 'frame-calendar',
+                        class: 'frame-calendar frame-corner-handles',
                         '[attr.data-mode]': 'mode()',
                         '[attr.data-caption-layout]': 'captionLayout()',
                         '[attr.data-disabled]': 'isDisabled() ? "" : null',
@@ -1239,39 +1380,100 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         @if (previousMonthTemplate(); as template) {
           <ng-container [ngTemplateOutlet]="template" />
         } @else {
-          {{ previousMonthIcon() }}
+          <svg
+            class="frame-calendar__nav-icon"
+            aria-hidden="true"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="m15 18-6-6 6-6"></path>
+          </svg>
         }
       </button>
 
       @if (captionLayout() === 'dropdown') {
         <div class="frame-calendar__caption-controls">
-          <select
+          <button
             class="frame-calendar__select"
+            [frSelect]="monthMenu"
             [disabled]="isDisabled()"
-            [value]="currentMonth().getMonth()"
+            [value]="currentMonthValue()"
+            (valueChange)="setMonth($event)"
+            indicatorPosition="end"
             aria-label="Month"
-            (change)="setMonth($any($event.target).value)"
+            type="button"
           >
-            @for (month of monthOptions(); track month.value) {
-              <option [value]="month.value" [selected]="month.value === currentMonth().getMonth()">
-                {{ month.label }}
-              </option>
-            }
-          </select>
+            <frame-select-value></frame-select-value>
+            <span frSelectIcon>
+              <svg
+                class="frame-calendar__select-icon"
+                aria-hidden="true"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="m6 9 6 6 6-6"></path>
+              </svg>
+            </span>
+          </button>
+
+          <ng-template #monthMenu="frSelectContent" frSelectContent>
+            <frame-select-panel>
+              <frame-select-group>
+              @for (month of monthOptions(); track month.value) {
+                <button frSelectItem [value]="month.value" [label]="month.label" type="button">
+                  {{ month.label }}
+                </button>
+              }
+              </frame-select-group>
+            </frame-select-panel>
+          </ng-template>
 
-          <select
+          <button
             class="frame-calendar__select"
+            [frSelect]="yearMenu"
             [disabled]="isDisabled()"
-            [value]="currentMonth().getFullYear()"
+            [value]="currentYearValue()"
+            (valueChange)="setYear($event)"
+            indicatorPosition="end"
             aria-label="Year"
-            (change)="setYear($any($event.target).value)"
+            type="button"
           >
-            @for (year of yearOptions(); track year) {
-              <option [value]="year" [selected]="year === currentMonth().getFullYear()">
-                {{ year }}
-              </option>
-            }
-          </select>
+            <frame-select-value></frame-select-value>
+            <span frSelectIcon>
+              <svg
+                class="frame-calendar__select-icon"
+                aria-hidden="true"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="m6 9 6 6 6-6"></path>
+              </svg>
+            </span>
+          </button>
+
+          <ng-template #yearMenu="frSelectContent" frSelectContent>
+            <frame-select-panel>
+              <frame-select-group>
+              @for (year of yearOptions(); track year) {
+                <button frSelectItem [value]="year" [label]="year" type="button">
+                  {{ year }}
+                </button>
+              }
+              </frame-select-group>
+            </frame-select-panel>
+          </ng-template>
         </div>
       } @else {
         <div class="frame-calendar__caption" aria-live="polite">
@@ -1289,7 +1491,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         @if (nextMonthTemplate(); as template) {
           <ng-container [ngTemplateOutlet]="template" />
         } @else {
-          {{ nextMonthIcon() }}
+          <svg
+            class="frame-calendar__nav-icon"
+            aria-hidden="true"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="m9 18 6-6-6-6"></path>
+          </svg>
         }
       </button>
     </div>
@@ -1374,7 +1587,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
     </div>
   `,
                 }]
-        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], fromYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "fromYear", required: false }] }], toYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "toYear", required: false }] }], showOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOutsideDays", required: false }] }], showWeekNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumber", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], dateLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateLabels", required: false }] }], disabledMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMatcher", required: false }] }], cellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplate", required: false }] }], previousMonthTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousMonthTemplate", required: false }] }], nextMonthTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthTemplate", required: false }] }], previousMonthIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousMonthIcon", required: false }] }], nextMonthIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthIcon", required: false }] }], previousMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousMonthLabel", required: false }] }], nextMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthLabel", required: false }] }], month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], monthChange: [{ type: i0.Output, args: ["monthChange"] }] } });
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], fromYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "fromYear", required: false }] }], toYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "toYear", required: false }] }], showOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOutsideDays", required: false }] }], showWeekNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumber", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], dateLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateLabels", required: false }] }], disabledMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMatcher", required: false }] }], cellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplate", required: false }] }], previousMonthTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousMonthTemplate", required: false }] }], nextMonthTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthTemplate", required: false }] }], previousMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousMonthLabel", required: false }] }], nextMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthLabel", required: false }] }], month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], monthChange: [{ type: i0.Output, args: ["monthChange"] }] } });
 function buildWeekdayLabels(locale, firstDayOfWeek, timeZone) {
     const baseSunday = new Date(2026, 5, 7);
     return Array.from({ length: 7 }, (_, index) => {
@@ -1490,14 +1703,14 @@ class FrCard {
         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()", "style.--frame-card-spacing": "spacingValue()" }, 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 frame-corner-handles" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCard, decorators: [{
             type: Directive,
             args: [{
                     selector: '[frCard], frame-card',
                     host: {
-                        class: 'frame-card',
+                        class: 'frame-card frame-corner-handles',
                         '[attr.data-size]': 'size()',
                         '[attr.data-spacing]': 'spacing()',
                         '[style.--frame-card-spacing]': 'spacingValue()',
@@ -1900,7 +2113,7 @@ class FrCarousel {
         this.emit('select');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCarousel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrCarousel, isStandalone: true, selector: "[frCarousel], frame-carousel", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, opts: { classPropertyName: "opts", publicName: "opts", isSignal: true, isRequired: false, transformFunction: null }, plugins: { classPropertyName: "plugins", publicName: "plugins", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apiReady: "apiReady", selectedChange: "selectedChange" }, host: { attributes: { "role": "region", "tabindex": "0" }, listeners: { "keydown": "handleKeydown($event)" }, properties: { "attr.aria-roledescription": "\"carousel\"", "attr.data-align": "effectiveAlign()", "attr.data-orientation": "orientation()", "attr.dir": "effectiveDirection()" }, classAttribute: "frame-carousel" }, providers: [{ provide: FR_CAROUSEL, useExisting: FrCarousel }], exportAs: ["frCarousel"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrCarousel, isStandalone: true, selector: "[frCarousel], frame-carousel", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, opts: { classPropertyName: "opts", publicName: "opts", isSignal: true, isRequired: false, transformFunction: null }, plugins: { classPropertyName: "plugins", publicName: "plugins", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apiReady: "apiReady", selectedChange: "selectedChange" }, host: { attributes: { "role": "region", "tabindex": "0" }, listeners: { "keydown": "handleKeydown($event)" }, properties: { "attr.aria-roledescription": "\"carousel\"", "attr.data-align": "effectiveAlign()", "attr.data-orientation": "orientation()", "attr.dir": "effectiveDirection()" }, classAttribute: "frame-carousel frame-corner-handles" }, providers: [{ provide: FR_CAROUSEL, useExisting: FrCarousel }], exportAs: ["frCarousel"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCarousel, decorators: [{
             type: Directive,
@@ -1908,7 +2121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     selector: '[frCarousel], frame-carousel',
                     exportAs: 'frCarousel',
                     host: {
-                        class: 'frame-carousel',
+                        class: 'frame-carousel frame-corner-handles',
                         role: 'region',
                         tabindex: '0',
                         '[attr.aria-roledescription]': '"carousel"',
@@ -1968,7 +2181,7 @@ class FrCarouselPrevious {
     carousel = inject(FR_CAROUSEL);
     label = input('Previous slide', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCarouselPrevious, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrCarouselPrevious, isStandalone: true, selector: "button[frCarouselPrevious]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "carousel.scrollPrev()" }, properties: { "attr.type": "\"button\"", "attr.aria-label": "label()", "attr.disabled": "carousel.canScrollPrev() ? null : \"\"" }, classAttribute: "frame-carousel__control frame-carousel__control--previous" }, hostDirectives: [{ directive: i1$1.FrButton, inputs: ["appearance", "appearance", "disabled", "disabled", "size", "size"] }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrCarouselPrevious, isStandalone: true, selector: "button[frCarouselPrevious]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "carousel.scrollPrev()" }, properties: { "attr.type": "\"button\"", "attr.aria-label": "label()", "attr.disabled": "carousel.canScrollPrev() ? null : \"\"" }, classAttribute: "frame-carousel__control frame-carousel__control--previous" }, hostDirectives: [{ directive: i1$3.FrButton, inputs: ["appearance", "appearance", "disabled", "disabled", "size", "size"] }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCarouselPrevious, decorators: [{
             type: Directive,
@@ -1994,7 +2207,7 @@ class FrCarouselNext {
     carousel = inject(FR_CAROUSEL);
     label = input('Next slide', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCarouselNext, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrCarouselNext, isStandalone: true, selector: "button[frCarouselNext]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "carousel.scrollNext()" }, properties: { "attr.type": "\"button\"", "attr.aria-label": "label()", "attr.disabled": "carousel.canScrollNext() ? null : \"\"" }, classAttribute: "frame-carousel__control frame-carousel__control--next" }, hostDirectives: [{ directive: i1$1.FrButton, inputs: ["appearance", "appearance", "disabled", "disabled", "size", "size"] }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrCarouselNext, isStandalone: true, selector: "button[frCarouselNext]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "carousel.scrollNext()" }, properties: { "attr.type": "\"button\"", "attr.aria-label": "label()", "attr.disabled": "carousel.canScrollNext() ? null : \"\"" }, classAttribute: "frame-carousel__control frame-carousel__control--next" }, hostDirectives: [{ directive: i1$3.FrButton, inputs: ["appearance", "appearance", "disabled", "disabled", "size", "size"] }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCarouselNext, decorators: [{
             type: Directive,
@@ -2069,25 +2282,34 @@ const FR_COLLAPSIBLE = new InjectionToken('FrCollapsible');
 class FrCollapsibleContent {
     host = inject(ElementRef);
     collapsible = inject(FR_COLLAPSIBLE);
+    animationFrameId = -1;
     initialized = false;
     lastOpen = false;
-    rafId = -1;
+    mutationObserver;
+    resizeFrameId = -1;
+    resizeObserver;
+    constructor() {
+        effect(() => {
+            const open = this.collapsible.open();
+            if (!this.initialized || open === this.lastOpen) {
+                this.lastOpen = open;
+                return;
+            }
+            this.lastOpen = open;
+            this.animate(open);
+        });
+    }
     ngAfterViewInit() {
         this.lastOpen = this.collapsible.open();
         this.applyStaticState(this.lastOpen);
+        this.observeContentSize();
         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();
+        this.cancelResizeFrame();
+        this.mutationObserver?.disconnect();
+        this.resizeObserver?.disconnect();
     }
     onTransitionEnd(event) {
         if (event.target !== this.host.nativeElement || event.propertyName !== 'height') {
@@ -2097,26 +2319,27 @@ class FrCollapsibleContent {
             this.host.nativeElement.style.visibility = 'hidden';
             return;
         }
-        this.host.nativeElement.style.height = 'auto';
+        this.setOpenHeight();
     }
     animate(open) {
         const element = this.host.nativeElement;
+        this.cancelAnimationFrame();
+        this.cancelResizeFrame();
         if (open) {
             element.style.visibility = 'visible';
             element.style.height = '0px';
             element.style.opacity = '0';
-            this.rafId = requestAnimationFrame(() => {
+            this.animationFrameId = requestAnimationFrame(() => {
                 element.style.height = `${element.scrollHeight}px`;
                 element.style.opacity = '1';
             });
             return;
         }
-        element.style.height = `${element.scrollHeight}px`;
+        element.style.height = `${element.getBoundingClientRect().height || element.scrollHeight}px`;
         element.style.opacity = '1';
-        this.rafId = requestAnimationFrame(() => {
-            element.style.height = '0px';
-            element.style.opacity = '0';
-        });
+        void element.offsetHeight;
+        element.style.height = '0px';
+        element.style.opacity = '0';
     }
     applyStaticState(open) {
         const element = this.host.nativeElement;
@@ -2125,11 +2348,59 @@ class FrCollapsibleContent {
         element.style.visibility = open ? 'visible' : 'hidden';
     }
     cancelAnimationFrame() {
-        if (this.rafId === -1) {
+        if (this.animationFrameId === -1) {
+            return;
+        }
+        cancelAnimationFrame(this.animationFrameId);
+        this.animationFrameId = -1;
+    }
+    cancelResizeFrame() {
+        if (this.resizeFrameId === -1) {
+            return;
+        }
+        cancelAnimationFrame(this.resizeFrameId);
+        this.resizeFrameId = -1;
+    }
+    observeContentSize() {
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        this.resizeObserver = new ResizeObserver(() => this.scheduleOpenHeightSync());
+        this.observeResizeTargets();
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.mutationObserver = new MutationObserver(() => {
+            this.observeResizeTargets();
+            this.scheduleOpenHeightSync();
+        });
+        this.mutationObserver.observe(this.host.nativeElement, { childList: true });
+    }
+    observeResizeTargets() {
+        if (!this.resizeObserver) {
+            return;
+        }
+        const element = this.host.nativeElement;
+        const targets = Array.from(element.children);
+        this.resizeObserver.disconnect();
+        if (targets.length === 0) {
+            this.resizeObserver.observe(element);
+            return;
+        }
+        targets.forEach((target) => this.resizeObserver?.observe(target));
+    }
+    scheduleOpenHeightSync() {
+        if (!this.initialized || !this.collapsible.open()) {
+            return;
+        }
+        this.cancelResizeFrame();
+        this.resizeFrameId = requestAnimationFrame(() => this.setOpenHeight());
+    }
+    setOpenHeight() {
+        if (!this.collapsible.open()) {
             return;
         }
-        cancelAnimationFrame(this.rafId);
-        this.rafId = -1;
+        this.host.nativeElement.style.height = `${this.host.nativeElement.scrollHeight}px`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCollapsibleContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrCollapsibleContent, isStandalone: true, selector: "[frCollapsibleContent]", host: { attributes: { "role": "region" }, listeners: { "transitionend": "onTransitionEnd($event)" }, properties: { "attr.aria-hidden": "collapsible.open() ? \"false\" : \"true\"", "attr.aria-labelledby": "collapsible.triggerId()", "attr.data-state": "collapsible.open() ? \"open\" : \"closed\"", "attr.id": "collapsible.contentId()" }, classAttribute: "frame-collapsible__content" }, ngImport: i0 });
@@ -2149,7 +2420,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         role: 'region',
                     },
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 let collapsibleId = 0;
 /** Root controller for expandable collapsible content. */
@@ -2284,8 +2555,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         }] });
 /** Group slot for combobox. */
 class FrComboboxGroup {
+    elementRef = inject(ElementRef);
+    root = inject(FrComboboxRootLookup);
+    hidden() {
+        this.root.visibleCount();
+        const items = Array.from(this.elementRef.nativeElement.querySelectorAll('.frame-combobox__item'));
+        return items.length > 0 && items.every((item) => item.hasAttribute('data-hidden'));
+    }
     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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrComboboxGroup, isStandalone: true, selector: "[frComboboxGroup], frame-combobox-group", host: { properties: { "attr.hidden": "hidden() ? \"\" : null" }, classAttribute: "frame-combobox__group" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxGroup, decorators: [{
             type: Directive,
@@ -2293,6 +2571,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     selector: '[frComboboxGroup], frame-combobox-group',
                     host: {
                         class: 'frame-combobox__group',
+                        '[attr.hidden]': 'hidden() ? "" : null',
                     },
                 }]
         }] });
@@ -2367,6 +2646,7 @@ class FrCombobox extends FrControlValueAccessor$1 {
     items = new Set();
     itemsVersion = signal(0, ...(ngDevMode ? [{ debugName: "itemsVersion" }] : /* istanbul ignore next */ []));
     selectedLabels = new Map();
+    selectedLabelsVersion = signal(0, ...(ngDevMode ? [{ debugName: "selectedLabelsVersion" }] : /* istanbul ignore next */ []));
     lastAutoHighlight = false;
     lastItemsVersion = -1;
     lastQuery = '';
@@ -2385,6 +2665,7 @@ class FrCombobox extends FrControlValueAccessor$1 {
     invalid = computed(() => this.invalidInput() || this.formInvalid(), ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
     query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    queryActive = signal(false, ...(ngDevMode ? [{ debugName: "queryActive" }] : /* istanbul ignore next */ []));
     anchorWidth = signal(null, ...(ngDevMode ? [{ debugName: "anchorWidth" }] : /* istanbul ignore next */ []));
     highlightedIndex = signal(0, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : /* istanbul ignore next */ []));
     overlaySide = signal('bottom', ...(ngDevMode ? [{ debugName: "overlaySide" }] : /* istanbul ignore next */ []));
@@ -2398,7 +2679,8 @@ class FrCombobox extends FrControlValueAccessor$1 {
             return this.query();
         }
         const value = this.value();
-        if (value === null || Array.isArray(value)) {
+        this.selectedLabelsVersion();
+        if (this.queryActive() || value === null || Array.isArray(value)) {
             return this.query();
         }
         return this.query() || this.selectedLabels.get(value) || this.itemToStringValue()(value);
@@ -2468,7 +2750,11 @@ class FrCombobox extends FrControlValueAccessor$1 {
         return this.visibleItems()[this.highlightedIndex()] === item;
     }
     rememberItemLabel(value, label) {
+        if (this.selectedLabels.get(value) === label) {
+            return;
+        }
         this.selectedLabels.set(value, label);
+        this.selectedLabelsVersion.update((version) => version + 1);
     }
     itemVisible(label) {
         const query = this.query().trim().toLowerCase();
@@ -2486,6 +2772,9 @@ class FrCombobox extends FrControlValueAccessor$1 {
             return;
         }
         this.isOpen.set(false);
+        if (!this.query()) {
+            this.queryActive.set(false);
+        }
         this.markAsTouched();
     }
     touch() {
@@ -2493,12 +2782,13 @@ class FrCombobox extends FrControlValueAccessor$1 {
     }
     clear() {
         this.query.set('');
+        this.queryActive.set(false);
         this.value.set(this.multiple() ? [] : null);
         this.notifyValueChange(this.value());
         this.markAsTouched();
     }
     selectItem(value, label) {
-        this.selectedLabels.set(value, label);
+        this.rememberItemLabel(value, label);
         if (this.multiple()) {
             const current = this.selectedValues();
             const exists = current.some((item) => Object.is(item, value));
@@ -2506,12 +2796,14 @@ class FrCombobox extends FrControlValueAccessor$1 {
             this.value.set(next);
             this.notifyValueChange(next);
             this.query.set('');
+            this.queryActive.set(false);
             this.open();
             return;
         }
         this.value.set(value);
         this.notifyValueChange(value);
         this.query.set('');
+        this.queryActive.set(false);
         this.close();
     }
     removeItem(value) {
@@ -2526,6 +2818,7 @@ class FrCombobox extends FrControlValueAccessor$1 {
     }
     updateQuery(value) {
         this.query.set(value);
+        this.queryActive.set(true);
         this.highlightedIndex.set(0);
         this.open();
     }
@@ -2536,6 +2829,7 @@ class FrCombobox extends FrControlValueAccessor$1 {
             return;
         }
         this.highlightedIndex.set((this.highlightedIndex() + delta + count) % count);
+        this.scrollHighlightedItemIntoView();
     }
     selectHighlighted() {
         const item = this.visibleItems()[this.highlightedIndex()];
@@ -2547,10 +2841,16 @@ class FrCombobox extends FrControlValueAccessor$1 {
     setViewValue(value) {
         this.value.set(value);
         this.query.set('');
+        this.queryActive.set(false);
     }
     bumpItems() {
         this.itemsVersion.update((value) => value + 1);
     }
+    scrollHighlightedItemIntoView() {
+        queueMicrotask(() => {
+            this.visibleItems()[this.highlightedIndex()]?.scrollIntoView();
+        });
+    }
     measureAnchor() {
         const element = this.origin()?.elementRef.nativeElement ?? this.elementRef.nativeElement;
         if (typeof element?.getBoundingClientRect !== 'function') {
@@ -2793,6 +3093,9 @@ class FrComboboxItem {
             this.root.selectItem(this.value(), this.label());
         }
     }
+    scrollIntoView() {
+        this.elementRef.nativeElement.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
+    }
     highlightSelf() {
         const index = this.root.visibleItems().indexOf(this);
         if (index >= 0) {
@@ -2913,12 +3216,12 @@ class FrComboboxChip {
             return;
         }
         const button = this.renderer.createElement('button');
-        const label = this.renderer.createText('×');
+        const icon = this.createRemoveIcon();
         this.renderer.setAttribute(button, 'type', 'button');
         this.renderer.setAttribute(button, 'aria-label', 'Remove selected item');
         this.renderer.setAttribute(button, 'data-default-remove', '');
         this.renderer.addClass(button, 'frame-combobox__chip-remove');
-        this.renderer.appendChild(button, label);
+        this.renderer.appendChild(button, icon);
         this.renderer.listen(button, 'click', (event) => {
             event.preventDefault();
             event.stopPropagation();
@@ -2926,6 +3229,24 @@ class FrComboboxChip {
         });
         this.renderer.appendChild(element, button);
     }
+    createRemoveIcon() {
+        const svg = this.renderer.createElement('svg', 'svg');
+        const firstPath = this.renderer.createElement('path', 'svg');
+        const secondPath = this.renderer.createElement('path', 'svg');
+        this.renderer.setAttribute(svg, 'aria-hidden', 'true');
+        this.renderer.setAttribute(svg, 'viewBox', '0 0 24 24');
+        this.renderer.setAttribute(svg, 'fill', 'none');
+        this.renderer.setAttribute(svg, 'stroke', 'currentColor');
+        this.renderer.setAttribute(svg, 'stroke-width', '2');
+        this.renderer.setAttribute(svg, 'stroke-linecap', 'round');
+        this.renderer.setAttribute(svg, 'stroke-linejoin', 'round');
+        this.renderer.addClass(svg, 'frame-combobox__chip-remove-icon');
+        this.renderer.setAttribute(firstPath, 'd', 'M18 6 6 18');
+        this.renderer.setAttribute(secondPath, 'd', 'm6 6 12 12');
+        this.renderer.appendChild(svg, firstPath);
+        this.renderer.appendChild(svg, secondPath);
+        return svg;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrComboboxChip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrComboboxChip, isStandalone: true, selector: "[frComboboxChip], frame-combobox-chip", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "frame-combobox__chip" }, exportAs: ["frComboboxChip"], ngImport: i0 });
 }
@@ -2980,6 +3301,11 @@ class FrComboboxChipsInput {
             this.root.open();
             this.root.moveHighlight(1);
         }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.root.open();
+            this.root.moveHighlight(-1);
+        }
         if (event.key === 'Enter') {
             event.preventDefault();
             this.root.selectHighlighted();
@@ -3616,7 +3942,7 @@ class FrCommand {
         this.visibleItems()[this.highlightedIndex()]?.scrollIntoView();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommand, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrCommand, isStandalone: true, selector: "[frCommand], frame-command", inputs: { closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", itemSelected: "itemSelected", queryChange: "queryChange" }, host: { listeners: { "keydown": "handleKeydown($event)" }, properties: { "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-state": "visibleCount() > 0 ? \"results\" : \"empty\"" }, classAttribute: "frame-command" }, providers: [{ provide: FR_COMMAND, useExisting: FrCommand }], exportAs: ["frCommand"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrCommand, isStandalone: true, selector: "[frCommand], frame-command", inputs: { closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", itemSelected: "itemSelected", queryChange: "queryChange" }, host: { listeners: { "keydown": "handleKeydown($event)" }, properties: { "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-state": "visibleCount() > 0 ? \"results\" : \"empty\"" }, classAttribute: "frame-command frame-corner-handles" }, providers: [{ provide: FR_COMMAND, useExisting: FrCommand }], exportAs: ["frCommand"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommand, decorators: [{
             type: Directive,
@@ -3626,7 +3952,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     standalone: true,
                     providers: [{ provide: FR_COMMAND, useExisting: FrCommand }],
                     host: {
-                        class: 'frame-command',
+                        class: 'frame-command frame-corner-handles',
                         '[attr.data-disabled]': 'disabled() ? "" : null',
                         '[attr.data-state]': 'visibleCount() > 0 ? "results" : "empty"',
                         '(keydown)': 'handleKeydown($event)',
@@ -3904,9 +4230,9 @@ class FrConfirmPopoverPanel {
     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"
+      <div
+        class="frame-popover__content frame-confirm-popover__content frame-corner-handles"
+        role="alertdialog"
       [attr.aria-describedby]="descriptionId()"
       [attr.aria-labelledby]="titleId()"
       [attr.data-side]="side()"
@@ -3953,9 +4279,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     imports: [FrButton$1, FrButtonLabel$1],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    <div
-      class="frame-popover__content frame-confirm-popover__content"
-      role="alertdialog"
+      <div
+        class="frame-popover__content frame-confirm-popover__content frame-corner-handles"
+        role="alertdialog"
       [attr.aria-describedby]="descriptionId()"
       [attr.aria-labelledby]="titleId()"
       [attr.data-side]="side()"
@@ -4110,7 +4436,7 @@ class FrContextMenuPanel {
         this.tree.leaveInteractiveArea(this.parent.closeDelay());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrContextMenuPanel, isStandalone: true, selector: "[frContextMenuPanel]", host: { attributes: { "tabindex": "-1" }, listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()" }, properties: { "attr.data-side": "side()" }, classAttribute: "frame-context-menu__content frame-dropdown-menu__content" }, hostDirectives: [{ directive: i1$2.CdkMenu }, { directive: i1$2.CdkTargetMenuAim }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrContextMenuPanel, isStandalone: true, selector: "[frContextMenuPanel]", host: { attributes: { "tabindex": "-1" }, listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()" }, properties: { "attr.data-side": "side()" }, classAttribute: "frame-context-menu__content frame-dropdown-menu__content" }, hostDirectives: [{ directive: i1$4.CdkMenu }, { directive: i1$4.CdkTargetMenuAim }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuPanel, decorators: [{
             type: Directive,
@@ -4132,7 +4458,7 @@ class FrContextMenuItem {
     inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrContextMenuItem, isStandalone: true, selector: "[frContextMenuItem]", inputs: { 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-inset": "inset() ? \"\" : null", "attr.data-variant": "variant()" }, classAttribute: "frame-context-menu__item frame-dropdown-menu__item" }, hostDirectives: [{ directive: i1$2.CdkMenuItem }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrContextMenuItem, isStandalone: true, selector: "[frContextMenuItem]", inputs: { 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-inset": "inset() ? \"\" : null", "attr.data-variant": "variant()" }, classAttribute: "frame-context-menu__item frame-dropdown-menu__item" }, hostDirectives: [{ directive: i1$4.CdkMenuItem }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuItem, decorators: [{
             type: Directive,
@@ -4163,7 +4489,7 @@ class FrContextMenuCheckboxItem {
         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 });
+    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$4.CdkMenuItemCheckbox }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuCheckboxItem, decorators: [{
             type: Directive,
@@ -4181,7 +4507,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 /** 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 });
+    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$4.CdkMenuGroup }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuRadioGroup, decorators: [{
             type: Directive,
@@ -4210,7 +4536,7 @@ class FrContextMenuRadioItem {
         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 });
+    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$4.CdkMenuItemRadio }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuRadioItem, decorators: [{
             type: Directive,
@@ -4426,7 +4752,7 @@ class FrContextMenuSubTrigger {
         return this.menuContent()?.getPositions(true) ?? defaultPositions$1(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuSubTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrContextMenuSubTrigger, isStandalone: true, selector: "[frContextMenuSubTrigger]", inputs: { menuContent: { classPropertyName: "menuContent", publicName: "frContextMenuSubTrigger", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, triggerModeInput: { classPropertyName: "triggerModeInput", publicName: "triggerMode", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()" }, properties: { "attr.data-inset": "inset() ? \"\" : null", "attr.data-state": "isOpen() ? \"open\" : \"closed\"", "attr.data-variant": "variant()" }, classAttribute: "frame-context-menu__item frame-context-menu__sub-trigger frame-dropdown-menu__item frame-dropdown-menu__sub-trigger" }, hostDirectives: [{ directive: i1$2.CdkMenuItem }, { directive: i1$2.CdkMenuTrigger }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrContextMenuSubTrigger, isStandalone: true, selector: "[frContextMenuSubTrigger]", inputs: { menuContent: { classPropertyName: "menuContent", publicName: "frContextMenuSubTrigger", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, triggerModeInput: { classPropertyName: "triggerModeInput", publicName: "triggerMode", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()" }, properties: { "attr.data-inset": "inset() ? \"\" : null", "attr.data-state": "isOpen() ? \"open\" : \"closed\"", "attr.data-variant": "variant()" }, classAttribute: "frame-context-menu__item frame-context-menu__sub-trigger frame-dropdown-menu__item frame-dropdown-menu__sub-trigger" }, hostDirectives: [{ directive: i1$4.CdkMenuItem }, { directive: i1$4.CdkMenuTrigger }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuSubTrigger, decorators: [{
             type: Directive,
@@ -4552,7 +4878,7 @@ class FrContextMenuTrigger {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrContextMenuTrigger, isStandalone: true, selector: "[frContextMenuTrigger]", inputs: { menuContent: { classPropertyName: "menuContent", publicName: "frContextMenuTrigger", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, longPressDelay: { classPropertyName: "longPressDelay", publicName: "longPressDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "pointerdown": "handlePointerDown($event)", "pointerup": "clearLongPress()", "pointercancel": "clearLongPress()", "pointerleave": "clearLongPress()" }, properties: { "attr.data-state": "isOpen() ? \"open\" : \"closed\"", "attr.data-disabled": "disabled() ? \"\" : null" }, classAttribute: "frame-context-menu__trigger" }, hostDirectives: [{ directive: i1$2.CdkContextMenuTrigger }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrContextMenuTrigger, isStandalone: true, selector: "[frContextMenuTrigger]", inputs: { menuContent: { classPropertyName: "menuContent", publicName: "frContextMenuTrigger", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, longPressDelay: { classPropertyName: "longPressDelay", publicName: "longPressDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "pointerdown": "handlePointerDown($event)", "pointerup": "clearLongPress()", "pointercancel": "clearLongPress()", "pointerleave": "clearLongPress()" }, properties: { "attr.data-state": "isOpen() ? \"open\" : \"closed\"", "attr.data-disabled": "disabled() ? \"\" : null" }, classAttribute: "frame-context-menu__trigger" }, hostDirectives: [{ directive: i1$4.CdkContextMenuTrigger }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuTrigger, decorators: [{
             type: Directive,
@@ -4571,6 +4897,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { menuContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "frContextMenuTrigger", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], longPressDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "longPressDelay", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
+/**
+ * Enables Frame UI corner handles on any normal box element.
+ *
+ * The directive only marks the host. Rendering is handled by the shared
+ * blueprint CSS so it stays cheap and works outside Angular components too.
+ */
+class FrCornerHandles {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCornerHandles, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrCornerHandles, isStandalone: true, selector: "[frCornerHandles]", host: { classAttribute: "frame-corner-handles" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCornerHandles, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frCornerHandles]',
+                    host: {
+                        class: 'frame-corner-handles',
+                    },
+                }]
+        }] });
+
 const POSITIONS = [
     {
         originX: 'start',
@@ -4590,7 +4936,7 @@ const POSITIONS = [
 /** 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 */ []));
+    captionLayout = input('dropdown', ...(ngDevMode ? [{ debugName: "captionLayout" }] : /* istanbul ignore next */ []));
     numberOfMonths = input(1, ...(ngDevMode ? [{ debugName: "numberOfMonths" }] : /* istanbul ignore next */ []));
     firstDayOfWeek = input(0, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
     locale = input('en-US', ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
@@ -4609,15 +4955,13 @@ class FrDatePicker extends FrControlValueAccessor$1 {
     showTime = input(false, { ...(ngDevMode ? { debugName: "showTime" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     placeholder = input('Pick a date', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     dialogLabel = input('Choose date', ...(ngDevMode ? [{ debugName: "dialogLabel" }] : /* istanbul ignore next */ []));
-    icon = input('◷', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     disabledDates = input([], ...(ngDevMode ? [{ debugName: "disabledDates" }] : /* istanbul ignore next */ []));
     dateLabels = input({}, ...(ngDevMode ? [{ debugName: "dateLabels" }] : /* istanbul ignore next */ []));
     disabledMatcher = input(null, ...(ngDevMode ? [{ debugName: "disabledMatcher" }] : /* istanbul ignore next */ []));
     cellTemplate = input(null, ...(ngDevMode ? [{ debugName: "cellTemplate" }] : /* istanbul ignore next */ []));
     previousMonthTemplate = input(null, ...(ngDevMode ? [{ debugName: "previousMonthTemplate" }] : /* istanbul ignore next */ []));
     nextMonthTemplate = input(null, ...(ngDevMode ? [{ debugName: "nextMonthTemplate" }] : /* istanbul ignore next */ []));
-    previousMonthIcon = input('‹', ...(ngDevMode ? [{ debugName: "previousMonthIcon" }] : /* istanbul ignore next */ []));
-    nextMonthIcon = input('›', ...(ngDevMode ? [{ debugName: "nextMonthIcon" }] : /* istanbul ignore next */ []));
     previousMonthLabel = input('Previous month', ...(ngDevMode ? [{ debugName: "previousMonthLabel" }] : /* istanbul ignore next */ []));
     nextMonthLabel = input('Next month', ...(ngDevMode ? [{ debugName: "nextMonthLabel" }] : /* istanbul ignore next */ []));
     headerTemplate = input(null, ...(ngDevMode ? [{ debugName: "headerTemplate" }] : /* istanbul ignore next */ []));
@@ -4750,11 +5094,22 @@ class FrDatePicker extends FrControlValueAccessor$1 {
         this.markAsTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrDatePicker, isStandalone: true, selector: "frame-date-picker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, fromYear: { classPropertyName: "fromYear", publicName: "fromYear", isSignal: true, isRequired: false, transformFunction: null }, toYear: { classPropertyName: "toYear", publicName: "toYear", isSignal: true, isRequired: false, transformFunction: null }, showOutsideDays: { classPropertyName: "showOutsideDays", publicName: "showOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumber: { classPropertyName: "showWeekNumber", publicName: "showWeekNumber", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonlyInput", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, debugVisible: { classPropertyName: "debugVisible", publicName: "debugVisible", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, dateLabels: { classPropertyName: "dateLabels", publicName: "dateLabels", isSignal: true, isRequired: false, transformFunction: null }, disabledMatcher: { classPropertyName: "disabledMatcher", publicName: "disabledMatcher", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null }, previousMonthTemplate: { classPropertyName: "previousMonthTemplate", publicName: "previousMonthTemplate", isSignal: true, isRequired: false, transformFunction: null }, nextMonthTemplate: { classPropertyName: "nextMonthTemplate", publicName: "nextMonthTemplate", isSignal: true, isRequired: false, transformFunction: null }, previousMonthIcon: { classPropertyName: "previousMonthIcon", publicName: "previousMonthIcon", isSignal: true, isRequired: false, transformFunction: null }, nextMonthIcon: { classPropertyName: "nextMonthIcon", publicName: "nextMonthIcon", isSignal: true, isRequired: false, transformFunction: null }, previousMonthLabel: { classPropertyName: "previousMonthLabel", publicName: "previousMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, nextMonthLabel: { classPropertyName: "nextMonthLabel", publicName: "nextMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, formatter: { classPropertyName: "formatter", publicName: "formatter", isSignal: true, isRequired: false, transformFunction: null }, parser: { classPropertyName: "parser", publicName: "parser", isSignal: true, isRequired: false, transformFunction: null }, timeLabel: { classPropertyName: "timeLabel", publicName: "timeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", openChange: "openChange", monthChange: "monthChange" }, host: { properties: { "attr.data-open": "isOpen() ? \"\" : null", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-invalid": "invalid() ? \"\" : null", "attr.data-mode": "mode()", "attr.dir": "dir()" }, classAttribute: "frame-date-picker" }, providers: [provideDsValueAccessor$1(FrDatePicker)], viewQueries: [{ propertyName: "calendar", first: true, predicate: FrCalendar$1, descendants: true, isSignal: true }], exportAs: ["frDatePicker"], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrDatePicker, isStandalone: true, selector: "frame-date-picker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, fromYear: { classPropertyName: "fromYear", publicName: "fromYear", isSignal: true, isRequired: false, transformFunction: null }, toYear: { classPropertyName: "toYear", publicName: "toYear", isSignal: true, isRequired: false, transformFunction: null }, showOutsideDays: { classPropertyName: "showOutsideDays", publicName: "showOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumber: { classPropertyName: "showWeekNumber", publicName: "showWeekNumber", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonlyInput", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, debugVisible: { classPropertyName: "debugVisible", publicName: "debugVisible", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, dateLabels: { classPropertyName: "dateLabels", publicName: "dateLabels", isSignal: true, isRequired: false, transformFunction: null }, disabledMatcher: { classPropertyName: "disabledMatcher", publicName: "disabledMatcher", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null }, previousMonthTemplate: { classPropertyName: "previousMonthTemplate", publicName: "previousMonthTemplate", isSignal: true, isRequired: false, transformFunction: null }, nextMonthTemplate: { classPropertyName: "nextMonthTemplate", publicName: "nextMonthTemplate", isSignal: true, isRequired: false, transformFunction: null }, previousMonthLabel: { classPropertyName: "previousMonthLabel", publicName: "previousMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, nextMonthLabel: { classPropertyName: "nextMonthLabel", publicName: "nextMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, formatter: { classPropertyName: "formatter", publicName: "formatter", isSignal: true, isRequired: false, transformFunction: null }, parser: { classPropertyName: "parser", publicName: "parser", isSignal: true, isRequired: false, transformFunction: null }, timeLabel: { classPropertyName: "timeLabel", publicName: "timeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", openChange: "openChange", monthChange: "monthChange" }, host: { properties: { "attr.data-open": "isOpen() ? \"\" : null", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-invalid": "invalid() ? \"\" : null", "attr.data-mode": "mode()", "attr.dir": "dir()" }, classAttribute: "frame-date-picker" }, providers: [provideDsValueAccessor$1(FrDatePicker)], viewQueries: [{ propertyName: "calendar", first: true, predicate: FrCalendar$1, descendants: true, isSignal: true }], exportAs: ["frDatePicker"], usesInheritance: true, ngImport: i0, template: `
     <span cdkOverlayOrigin #origin="cdkOverlayOrigin" class="frame-date-picker__anchor">
       @if (editable()) {
         <span class="frame-date-picker__input-wrap">
-          <span class="frame-date-picker__icon" aria-hidden="true">{{ icon() }}</span>
+          <span class="frame-date-picker__icon" aria-hidden="true">
+            @if (icon(); as customIcon) {
+              {{ customIcon }}
+            } @else {
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M8 2v4"></path>
+                <path d="M16 2v4"></path>
+                <rect width="18" height="18" x="3" y="4" rx="2"></rect>
+                <path d="M3 10h18"></path>
+              </svg>
+            }
+          </span>
           <input
             class="frame-date-picker__input"
             type="text"
@@ -4784,7 +5139,18 @@ class FrDatePicker extends FrControlValueAccessor$1 {
           (click)="toggle()"
           (keydown)="handleTriggerKeydown($event)"
         >
-          <span class="frame-date-picker__icon" aria-hidden="true">{{ icon() }}</span>
+          <span class="frame-date-picker__icon" aria-hidden="true">
+            @if (icon(); as customIcon) {
+              {{ customIcon }}
+            } @else {
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M8 2v4"></path>
+                <path d="M16 2v4"></path>
+                <rect width="18" height="18" x="3" y="4" rx="2"></rect>
+                <path d="M3 10h18"></path>
+              </svg>
+            }
+          </span>
           <span class="frame-date-picker__trigger-label" [attr.data-placeholder]="hasValue() ? null : ''">
             {{ displayValue() || placeholder() }}
           </span>
@@ -4805,17 +5171,7 @@ class FrDatePicker extends FrControlValueAccessor$1 {
       (detach)="close()"
       (positionChange)="handlePositionChange($event)"
     >
-      <div class="frame-date-picker__content" role="dialog" [attr.aria-label]="dialogLabel()">
-        @if (presets().length) {
-          <div class="frame-date-picker__presets" aria-label="Date presets">
-            @for (preset of presets(); track preset.label) {
-              <button class="frame-date-picker__preset" type="button" (click)="selectPreset(preset)">
-                {{ preset.label }}
-              </button>
-            }
-          </div>
-        }
-
+      <div class="frame-date-picker__content frame-corner-handles" role="dialog" [attr.aria-label]="dialogLabel()">
         <ng-container [ngTemplateOutlet]="headerTemplate() ?? null" />
 
         <frame-calendar
@@ -4837,8 +5193,6 @@ class FrDatePicker extends FrControlValueAccessor$1 {
           [cellTemplate]="cellTemplate()"
           [previousMonthTemplate]="previousMonthTemplate()"
           [nextMonthTemplate]="nextMonthTemplate()"
-          [previousMonthIcon]="previousMonthIcon()"
-          [nextMonthIcon]="nextMonthIcon()"
           [previousMonthLabel]="previousMonthLabel()"
           [nextMonthLabel]="nextMonthLabel()"
           [month]="month()"
@@ -4860,10 +5214,20 @@ class FrDatePicker extends FrControlValueAccessor$1 {
           </label>
         }
 
+        @if (presets().length) {
+          <div class="frame-date-picker__presets" aria-label="Date presets">
+            @for (preset of presets(); track preset.label) {
+              <button class="frame-date-picker__preset" type="button" (click)="selectPreset(preset)">
+                {{ preset.label }}
+              </button>
+            }
+          </div>
+        }
+
         <ng-container [ngTemplateOutlet]="footerTemplate() ?? null" />
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: FrCalendar$1, selector: "frame-calendar", inputs: ["mode", "captionLayout", "numberOfMonths", "firstDayOfWeek", "locale", "timeZone", "dir", "fromYear", "toYear", "showOutsideDays", "showWeekNumber", "disabled", "disabledDates", "dateLabels", "disabledMatcher", "cellTemplate", "previousMonthTemplate", "nextMonthTemplate", "previousMonthIcon", "nextMonthIcon", "previousMonthLabel", "nextMonthLabel", "month", "selected"], outputs: ["selectedChange", "monthChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: FrCalendar$1, selector: "frame-calendar", inputs: ["mode", "captionLayout", "numberOfMonths", "firstDayOfWeek", "locale", "timeZone", "dir", "fromYear", "toYear", "showOutsideDays", "showWeekNumber", "disabled", "disabledDates", "dateLabels", "disabledMatcher", "cellTemplate", "previousMonthTemplate", "nextMonthTemplate", "previousMonthLabel", "nextMonthLabel", "month", "selected"], outputs: ["selectedChange", "monthChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDatePicker, decorators: [{
             type: Component,
@@ -4885,7 +5249,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
     <span cdkOverlayOrigin #origin="cdkOverlayOrigin" class="frame-date-picker__anchor">
       @if (editable()) {
         <span class="frame-date-picker__input-wrap">
-          <span class="frame-date-picker__icon" aria-hidden="true">{{ icon() }}</span>
+          <span class="frame-date-picker__icon" aria-hidden="true">
+            @if (icon(); as customIcon) {
+              {{ customIcon }}
+            } @else {
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M8 2v4"></path>
+                <path d="M16 2v4"></path>
+                <rect width="18" height="18" x="3" y="4" rx="2"></rect>
+                <path d="M3 10h18"></path>
+              </svg>
+            }
+          </span>
           <input
             class="frame-date-picker__input"
             type="text"
@@ -4915,7 +5290,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
           (click)="toggle()"
           (keydown)="handleTriggerKeydown($event)"
         >
-          <span class="frame-date-picker__icon" aria-hidden="true">{{ icon() }}</span>
+          <span class="frame-date-picker__icon" aria-hidden="true">
+            @if (icon(); as customIcon) {
+              {{ customIcon }}
+            } @else {
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M8 2v4"></path>
+                <path d="M16 2v4"></path>
+                <rect width="18" height="18" x="3" y="4" rx="2"></rect>
+                <path d="M3 10h18"></path>
+              </svg>
+            }
+          </span>
           <span class="frame-date-picker__trigger-label" [attr.data-placeholder]="hasValue() ? null : ''">
             {{ displayValue() || placeholder() }}
           </span>
@@ -4936,17 +5322,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
       (detach)="close()"
       (positionChange)="handlePositionChange($event)"
     >
-      <div class="frame-date-picker__content" role="dialog" [attr.aria-label]="dialogLabel()">
-        @if (presets().length) {
-          <div class="frame-date-picker__presets" aria-label="Date presets">
-            @for (preset of presets(); track preset.label) {
-              <button class="frame-date-picker__preset" type="button" (click)="selectPreset(preset)">
-                {{ preset.label }}
-              </button>
-            }
-          </div>
-        }
-
+      <div class="frame-date-picker__content frame-corner-handles" role="dialog" [attr.aria-label]="dialogLabel()">
         <ng-container [ngTemplateOutlet]="headerTemplate() ?? null" />
 
         <frame-calendar
@@ -4968,8 +5344,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
           [cellTemplate]="cellTemplate()"
           [previousMonthTemplate]="previousMonthTemplate()"
           [nextMonthTemplate]="nextMonthTemplate()"
-          [previousMonthIcon]="previousMonthIcon()"
-          [nextMonthIcon]="nextMonthIcon()"
           [previousMonthLabel]="previousMonthLabel()"
           [nextMonthLabel]="nextMonthLabel()"
           [month]="month()"
@@ -4991,12 +5365,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
           </label>
         }
 
+        @if (presets().length) {
+          <div class="frame-date-picker__presets" aria-label="Date presets">
+            @for (preset of presets(); track preset.label) {
+              <button class="frame-date-picker__preset" type="button" (click)="selectPreset(preset)">
+                {{ preset.label }}
+              </button>
+            }
+          </div>
+        }
+
         <ng-container [ngTemplateOutlet]="footerTemplate() ?? null" />
       </div>
     </ng-template>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], fromYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "fromYear", required: false }] }], toYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "toYear", required: false }] }], showOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOutsideDays", required: false }] }], showWeekNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumber", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyInput", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], debugVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "debugVisible", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], dialogLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], dateLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateLabels", required: false }] }], disabledMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMatcher", required: false }] }], cellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplate", required: false }] }], previousMonthTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousMonthTemplate", required: false }] }], nextMonthTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthTemplate", required: false }] }], previousMonthIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousMonthIcon", required: false }] }], nextMonthIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthIcon", required: false }] }], previousMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousMonthLabel", required: false }] }], nextMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthLabel", required: false }] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: false }] }], footerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerTemplate", required: false }] }], month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], formatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatter", required: false }] }], parser: [{ type: i0.Input, args: [{ isSignal: true, alias: "parser", required: false }] }], timeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], openChange: [{ type: i0.Output, args: ["openChange"] }], monthChange: [{ type: i0.Output, args: ["monthChange"] }], calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => FrCalendar$1), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], fromYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "fromYear", required: false }] }], toYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "toYear", required: false }] }], showOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOutsideDays", required: false }] }], showWeekNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumber", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyInput", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], debugVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "debugVisible", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], dialogLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], dateLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateLabels", required: false }] }], disabledMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMatcher", required: false }] }], cellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplate", required: false }] }], previousMonthTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousMonthTemplate", required: false }] }], nextMonthTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthTemplate", required: false }] }], previousMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousMonthLabel", required: false }] }], nextMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthLabel", required: false }] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: false }] }], footerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerTemplate", required: false }] }], month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], formatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatter", required: false }] }], parser: [{ type: i0.Input, args: [{ isSignal: true, alias: "parser", required: false }] }], timeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], openChange: [{ type: i0.Output, args: ["openChange"] }], monthChange: [{ type: i0.Output, args: ["monthChange"] }], calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => FrCalendar$1), { isSignal: true }] }] } });
 function normalizeValue(value, mode) {
     if (!value) {
         return mode === 'range' ? { from: null, to: null } : null;
@@ -5331,7 +5715,7 @@ class FrDropdownMenuPanel {
         this.tree.leaveInteractiveArea(this.parent.closeDelay());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrDropdownMenuPanel, isStandalone: true, selector: "[frDropdownMenuPanel]", host: { attributes: { "tabindex": "-1" }, listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()" }, properties: { "attr.data-side": "side()" }, classAttribute: "frame-dropdown-menu__content" }, hostDirectives: [{ directive: i1$2.CdkMenu }, { directive: i1$2.CdkTargetMenuAim }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrDropdownMenuPanel, isStandalone: true, selector: "[frDropdownMenuPanel]", host: { attributes: { "tabindex": "-1" }, listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()" }, properties: { "attr.data-side": "side()" }, classAttribute: "frame-dropdown-menu__content frame-corner-handles" }, hostDirectives: [{ directive: i1$4.CdkMenu }, { directive: i1$4.CdkTargetMenuAim }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuPanel, decorators: [{
             type: Directive,
@@ -5339,7 +5723,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     selector: '[frDropdownMenuPanel]',
                     hostDirectives: [CdkMenu, CdkTargetMenuAim],
                     host: {
-                        class: 'frame-dropdown-menu__content',
+                        class: 'frame-dropdown-menu__content frame-corner-handles',
                         '[attr.data-side]': 'side()',
                         tabindex: '-1',
                         '(mouseenter)': 'handleMouseEnter()',
@@ -5353,7 +5737,7 @@ class FrDropdownMenuItem {
     inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrDropdownMenuItem, isStandalone: true, selector: "[frDropdownMenuItem]", inputs: { 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-inset": "inset() ? \"\" : null", "attr.data-variant": "variant()" }, classAttribute: "frame-dropdown-menu__item" }, hostDirectives: [{ directive: i1$2.CdkMenuItem }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrDropdownMenuItem, isStandalone: true, selector: "[frDropdownMenuItem]", inputs: { 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-inset": "inset() ? \"\" : null", "attr.data-variant": "variant()" }, classAttribute: "frame-dropdown-menu__item" }, hostDirectives: [{ directive: i1$4.CdkMenuItem }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuItem, decorators: [{
             type: Directive,
@@ -5384,7 +5768,7 @@ class FrDropdownMenuCheckboxItem {
         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 });
+    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$4.CdkMenuItemCheckbox }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuCheckboxItem, decorators: [{
             type: Directive,
@@ -5402,7 +5786,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 /** 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 });
+    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$4.CdkMenuGroup }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuRadioGroup, decorators: [{
             type: Directive,
@@ -5431,7 +5815,7 @@ class FrDropdownMenuRadioItem {
         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 });
+    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$4.CdkMenuItemRadio }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuRadioItem, decorators: [{
             type: Directive,
@@ -5646,7 +6030,7 @@ class FrDropdownMenuTrigger extends FrDropdownMenuTriggerBase {
     triggerModeInput = input(null, { ...(ngDevMode ? { debugName: "triggerModeInput" } : /* istanbul ignore next */ {}), alias: 'triggerMode' });
     isSubmenuTrigger = false;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuTrigger, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrDropdownMenuTrigger, isStandalone: true, selector: "[frDropdownMenuTrigger]", inputs: { menuContent: { classPropertyName: "menuContent", publicName: "frDropdownMenuTrigger", isSignal: true, isRequired: false, transformFunction: null }, triggerModeInput: { classPropertyName: "triggerModeInput", publicName: "triggerMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-state": "isOpen() ? \"open\" : \"closed\"" }, classAttribute: "frame-dropdown-menu__trigger" }, usesInheritance: true, hostDirectives: [{ directive: i1$2.CdkMenuTrigger }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrDropdownMenuTrigger, isStandalone: true, selector: "[frDropdownMenuTrigger]", inputs: { menuContent: { classPropertyName: "menuContent", publicName: "frDropdownMenuTrigger", isSignal: true, isRequired: false, transformFunction: null }, triggerModeInput: { classPropertyName: "triggerModeInput", publicName: "triggerMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-state": "isOpen() ? \"open\" : \"closed\"" }, classAttribute: "frame-dropdown-menu__trigger" }, usesInheritance: true, hostDirectives: [{ directive: i1$4.CdkMenuTrigger }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuTrigger, decorators: [{
             type: Directive,
@@ -5667,7 +6051,7 @@ class FrDropdownMenuSubTrigger extends FrDropdownMenuTriggerBase {
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     isSubmenuTrigger = true;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuSubTrigger, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrDropdownMenuSubTrigger, isStandalone: true, selector: "[frDropdownMenuSubTrigger]", inputs: { menuContent: { classPropertyName: "menuContent", publicName: "frDropdownMenuSubTrigger", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, triggerModeInput: { classPropertyName: "triggerModeInput", publicName: "triggerMode", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-inset": "inset() ? \"\" : null", "attr.data-state": "isOpen() ? \"open\" : \"closed\"", "attr.data-variant": "variant()" }, classAttribute: "frame-dropdown-menu__item frame-dropdown-menu__sub-trigger" }, usesInheritance: true, hostDirectives: [{ directive: i1$2.CdkMenuItem }, { directive: i1$2.CdkMenuTrigger }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrDropdownMenuSubTrigger, isStandalone: true, selector: "[frDropdownMenuSubTrigger]", inputs: { menuContent: { classPropertyName: "menuContent", publicName: "frDropdownMenuSubTrigger", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, triggerModeInput: { classPropertyName: "triggerModeInput", publicName: "triggerMode", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-inset": "inset() ? \"\" : null", "attr.data-state": "isOpen() ? \"open\" : \"closed\"", "attr.data-variant": "variant()" }, classAttribute: "frame-dropdown-menu__item frame-dropdown-menu__sub-trigger" }, usesInheritance: true, hostDirectives: [{ directive: i1$4.CdkMenuItem }, { directive: i1$4.CdkMenuTrigger }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuSubTrigger, decorators: [{
             type: Directive,
@@ -5696,14 +6080,14 @@ class FrEmpty {
     orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrEmpty, isStandalone: true, selector: "[frEmpty], frame-empty", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-orientation": "orientation()", "attr.data-variant": "variant()" }, classAttribute: "frame-empty" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrEmpty, isStandalone: true, selector: "[frEmpty], frame-empty", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-orientation": "orientation()", "attr.data-variant": "variant()" }, classAttribute: "frame-empty frame-corner-handles" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrEmpty, decorators: [{
             type: Directive,
             args: [{
                     selector: '[frEmpty], frame-empty',
                     host: {
-                        class: 'frame-empty',
+                        class: 'frame-empty frame-corner-handles',
                         '[attr.data-orientation]': 'orientation()',
                         '[attr.data-variant]': 'variant()',
                     },
@@ -6113,14 +6497,14 @@ class FrHoverCardPanel {
         this.root.leaveInteractiveArea();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrHoverCardPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrHoverCardPanel, isStandalone: true, selector: "[frHoverCardPanel]", host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()" }, properties: { "attr.data-side": "content.side()" }, classAttribute: "frame-hover-card__content" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrHoverCardPanel, isStandalone: true, selector: "[frHoverCardPanel]", host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()" }, properties: { "attr.data-side": "content.side()" }, classAttribute: "frame-hover-card__content frame-corner-handles" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrHoverCardPanel, decorators: [{
             type: Directive,
             args: [{
                     selector: '[frHoverCardPanel]',
                     host: {
-                        class: 'frame-hover-card__content',
+                        class: 'frame-hover-card__content frame-corner-handles',
                         '[attr.data-side]': 'content.side()',
                         '(mouseenter)': 'handleMouseEnter()',
                         '(mouseleave)': 'handleMouseLeave()',
@@ -6432,14 +6816,14 @@ 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 });
+    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 frame-corner-handles" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputControl, decorators: [{
             type: Directive,
             args: [{
                     selector: '[frInputControl], frame-input-control',
                     host: {
-                        class: 'frame-input-control',
+                        class: 'frame-input-control frame-corner-handles',
                     },
                 }]
         }] });
@@ -6704,7 +7088,7 @@ class FrInputOtp extends FrControlValueAccessor$1 {
         return characters.slice(0, this.maxLength()).join('');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputOtp, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.16", type: FrInputOtp, isStandalone: true, selector: "frame-input-otp", inputs: { maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", complete: "complete" }, host: { attributes: { "role": "group" }, listeners: { "click": "focus(activeIndex())" }, properties: { "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-invalid": "invalid() ? \"\" : null", "attr.data-complete": "isComplete() ? \"\" : null" }, classAttribute: "frame-input-otp" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.16", type: FrInputOtp, isStandalone: true, selector: "frame-input-otp", inputs: { maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", complete: "complete" }, host: { attributes: { "role": "group" }, listeners: { "click": "focus(activeIndex())" }, properties: { "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-invalid": "invalid() ? \"\" : null", "attr.data-complete": "isComplete() ? \"\" : null" }, classAttribute: "frame-input-otp frame-corner-handles" }, providers: [
             provideDsValueAccessor$1(FrInputOtp),
             {
                 provide: FR_INPUT_OTP_CONTROLLER,
@@ -6750,7 +7134,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
-                        class: 'frame-input-otp',
+                        class: 'frame-input-otp frame-corner-handles',
                         role: 'group',
                         '[attr.data-disabled]': 'disabled() ? "" : null',
                         '[attr.data-invalid]': 'invalid() ? "" : null',
@@ -6874,14 +7258,14 @@ class FrItem {
     size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrItem, isStandalone: true, selector: "[frItem], frame-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-interactive": "interactive() ? \"\" : null", "attr.data-size": "size()", "attr.data-variant": "variant()" }, classAttribute: "frame-item" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrItem, isStandalone: true, selector: "[frItem], frame-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-interactive": "interactive() ? \"\" : null", "attr.data-size": "size()", "attr.data-variant": "variant()" }, classAttribute: "frame-item frame-corner-handles" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrItem, decorators: [{
             type: Directive,
             args: [{
                     selector: '[frItem], frame-item',
                     host: {
-                        class: 'frame-item',
+                        class: 'frame-item frame-corner-handles',
                         '[attr.data-disabled]': 'disabled() ? "" : null',
                         '[attr.data-interactive]': 'interactive() ? "" : null',
                         '[attr.data-size]': 'size()',
@@ -7025,7 +7409,7 @@ class FrMenuBar {
     closeDelay = input(140, ...(ngDevMode ? [{ debugName: "closeDelay" }] : /* istanbul ignore next */ []));
     triggerMode = input('both', ...(ngDevMode ? [{ debugName: "triggerMode" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrMenuBar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrMenuBar, isStandalone: true, selector: "[frMenuBar], frame-menubar", inputs: { closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, triggerMode: { classPropertyName: "triggerMode", publicName: "triggerMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menubar" }, classAttribute: "frame-menubar" }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrMenuBar, isStandalone: true, selector: "[frMenuBar], frame-menubar", inputs: { closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, triggerMode: { classPropertyName: "triggerMode", publicName: "triggerMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menubar" }, classAttribute: "frame-menubar frame-corner-handles" }, providers: [
             FrDropdownMenuTree$1,
             {
                 provide: FR_DROPDOWN_MENU_PARENT$1,
@@ -7053,7 +7437,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         },
                     ],
                     host: {
-                        class: 'frame-menubar',
+                        class: 'frame-menubar frame-corner-handles',
                         role: 'menubar',
                     },
                 }]
@@ -7076,7 +7460,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 });
+    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$5.FrDropdownMenuTrigger, inputs: ["frDropdownMenuTrigger", "frMenuBarTrigger", "triggerMode", "triggerMode"] }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrMenuBarTrigger, decorators: [{
             type: Directive,
@@ -7128,7 +7512,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 });
+    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$5.FrDropdownMenuPanel }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrMenuBarPanel, decorators: [{
             type: Directive,
@@ -7143,7 +7527,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 });
+    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$5.FrDropdownMenuItem, inputs: ["inset", "inset", "variant", "variant"] }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrMenuBarItem, decorators: [{
             type: Directive,
@@ -7163,7 +7547,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 });
+    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$5.FrDropdownMenuCheckboxItem, inputs: ["checked", "checked", "inset", "inset", "variant", "variant"] }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrMenuBarCheckboxItem, decorators: [{
             type: Directive,
@@ -7183,7 +7567,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 });
+    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$5.FrDropdownMenuRadioGroup }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrMenuBarRadioGroup, decorators: [{
             type: Directive,
@@ -7198,7 +7582,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 });
+    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$5.FrDropdownMenuRadioItem, inputs: ["checked", "checked", "inset", "inset", "variant", "variant"] }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrMenuBarRadioItem, decorators: [{
             type: Directive,
@@ -7218,7 +7602,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 });
+    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$5.FrDropdownMenuLabel, inputs: ["inset", "inset"] }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrMenuBarLabel, decorators: [{
             type: Directive,
@@ -7238,7 +7622,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 });
+    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$5.FrDropdownMenuSeparator }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrMenuBarSeparator, decorators: [{
             type: Directive,
@@ -7253,7 +7637,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 });
+    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$5.FrDropdownMenuShortcut }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrMenuBarShortcut, decorators: [{
             type: Directive,
@@ -7268,7 +7652,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 });
+    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$5.FrDropdownMenuItemIndicator }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrMenuBarItemIndicator, decorators: [{
             type: Directive,
@@ -7283,7 +7667,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 });
+    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$5.FrDropdownMenuSub, inputs: ["closeDelay", "closeDelay", "triggerMode", "triggerMode"] }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrMenuBarSub, decorators: [{
             type: Directive,
@@ -7303,7 +7687,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 });
+    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$5.FrDropdownMenuSubTrigger, inputs: ["frDropdownMenuSubTrigger", "frMenuBarSubTrigger", "inset", "inset", "triggerMode", "triggerMode", "variant", "variant"] }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrMenuBarSubTrigger, decorators: [{
             type: Directive,
@@ -7410,7 +7794,7 @@ class FrModalPanel {
     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()", "style.height": "panelLayout?.height ?? null", "style.max-height": "panelLayout?.maxHeight ?? null", "style.max-width": "panelLayout?.maxWidth ?? null", "style.min-height": "panelLayout?.minHeight ?? null", "style.min-width": "panelLayout?.minWidth ?? null", "style.width": "panelLayout?.width ?? null" }, classAttribute: "frame-modal__panel" }, ngImport: i0, template: `
+    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()", "style.height": "panelLayout?.height ?? null", "style.max-height": "panelLayout?.maxHeight ?? null", "style.max-width": "panelLayout?.maxWidth ?? null", "style.min-height": "panelLayout?.minHeight ?? null", "style.min-width": "panelLayout?.minWidth ?? null", "style.width": "panelLayout?.width ?? null" }, classAttribute: "frame-modal__panel frame-corner-handles" }, ngImport: i0, template: `
     <ng-content />
     @if (showCloseButton()) {
       <button
@@ -7419,7 +7803,10 @@ class FrModalPanel {
         type="button"
         aria-label="Close dialog"
       >
-        <span aria-hidden="true">×</span>
+        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M18 6 6 18"></path>
+          <path d="m6 6 12 12"></path>
+        </svg>
       </button>
     }
   `, isInline: true, dependencies: [{ kind: "directive", type: FrModalClose, selector: "[frModalClose]", inputs: ["frModalClose"] }] });
@@ -7429,7 +7816,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
             args: [{
                     selector: '[frModalPanel], frame-modal-panel',
                     host: {
-                        class: 'frame-modal__panel',
+                        class: 'frame-modal__panel frame-corner-handles',
                         '[attr.data-scrollable]': 'scrollable() ? "" : null',
                         '[attr.data-sticky-footer]': 'stickyFooter() ? "" : null',
                         '[attr.data-size]': 'size()',
@@ -7449,7 +7836,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         type="button"
         aria-label="Close dialog"
       >
-        <span aria-hidden="true">×</span>
+        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M18 6 6 18"></path>
+          <path d="m6 6 12 12"></path>
+        </svg>
       </button>
     }
   `,
@@ -7902,7 +8292,7 @@ class FrNavigationMenu {
     closeDelay = input(140, ...(ngDevMode ? [{ debugName: "closeDelay" }] : /* istanbul ignore next */ []));
     triggerMode = input('both', ...(ngDevMode ? [{ debugName: "triggerMode" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrNavigationMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrNavigationMenu, isStandalone: true, selector: "[frNavigationMenu], frame-navigation-menu", inputs: { closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, triggerMode: { classPropertyName: "triggerMode", publicName: "triggerMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, classAttribute: "frame-navigation-menu" }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrNavigationMenu, isStandalone: true, selector: "[frNavigationMenu], frame-navigation-menu", inputs: { closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, triggerMode: { classPropertyName: "triggerMode", publicName: "triggerMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, classAttribute: "frame-navigation-menu frame-corner-handles" }, providers: [
             FrDropdownMenuTree$1,
             {
                 provide: FR_DROPDOWN_MENU_PARENT$1,
@@ -7930,7 +8320,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         },
                     ],
                     host: {
-                        class: 'frame-navigation-menu',
+                        class: 'frame-navigation-menu frame-corner-handles',
                         role: 'navigation',
                     },
                 }]
@@ -7968,7 +8358,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 });
+    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$5.FrDropdownMenuTrigger, inputs: ["frDropdownMenuTrigger", "frNavigationMenuTrigger", "triggerMode", "triggerMode"] }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrNavigationMenuTrigger, decorators: [{
             type: Directive,
@@ -8020,7 +8410,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 });
+    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$5.FrDropdownMenuPanel }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrNavigationMenuPanel, decorators: [{
             type: Directive,
@@ -8140,14 +8530,14 @@ 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 });
+    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 frame-corner-handles" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrNavigationMenuViewport, decorators: [{
             type: Directive,
             args: [{
                     selector: '[frNavigationMenuViewport], frame-navigation-menu-viewport',
                     host: {
-                        class: 'frame-navigation-menu__viewport',
+                        class: 'frame-navigation-menu__viewport frame-corner-handles',
                     },
                 }]
         }] });
@@ -8325,7 +8715,11 @@ class FrPaginationPrevious {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrPaginationPrevious, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrPaginationPrevious, isStandalone: true, selector: "a[frPaginationPrevious], button[frPaginationPrevious]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "handleClick($event)" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-disabled": "isDisabled() ? \"true\" : null", "attr.data-disabled": "isDisabled() ? \"\" : null", "attr.data-icon-only": "iconOnly() ? \"\" : null", "attr.disabled": "isDisabled() ? \"\" : null", "attr.tabindex": "isDisabled() ? \"-1\" : null" }, classAttribute: "frame-pagination__link frame-pagination__previous" }, ngImport: i0, template: `
     <span class="frame-pagination__control-icon" aria-hidden="true">
-      <ng-content select="[frPaginationIcon]">‹</ng-content>
+      <ng-content select="[frPaginationIcon]">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="m15 18-6-6 6-6"></path>
+        </svg>
+      </ng-content>
     </span>
     @if (!iconOnly()) {
       <span class="frame-pagination__control-text">{{ text() }}</span>
@@ -8348,7 +8742,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     },
                     template: `
     <span class="frame-pagination__control-icon" aria-hidden="true">
-      <ng-content select="[frPaginationIcon]">‹</ng-content>
+      <ng-content select="[frPaginationIcon]">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="m15 18-6-6 6-6"></path>
+        </svg>
+      </ng-content>
     </span>
     @if (!iconOnly()) {
       <span class="frame-pagination__control-text">{{ text() }}</span>
@@ -8381,7 +8779,11 @@ class FrPaginationNext {
       <span class="frame-pagination__control-text">{{ text() }}</span>
     }
     <span class="frame-pagination__control-icon" aria-hidden="true">
-      <ng-content select="[frPaginationIcon]">›</ng-content>
+      <ng-content select="[frPaginationIcon]">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="m9 18 6-6-6-6"></path>
+        </svg>
+      </ng-content>
     </span>
   `, isInline: true });
 }
@@ -8404,7 +8806,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
       <span class="frame-pagination__control-text">{{ text() }}</span>
     }
     <span class="frame-pagination__control-icon" aria-hidden="true">
-      <ng-content select="[frPaginationIcon]">›</ng-content>
+      <ng-content select="[frPaginationIcon]">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="m9 18 6-6-6-6"></path>
+        </svg>
+      </ng-content>
     </span>
   `,
                 }]
@@ -8513,14 +8919,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 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 });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrPopoverPanel, isStandalone: true, selector: "[frPopoverPanel]", host: { attributes: { "role": "dialog", "tabindex": "-1" }, properties: { "attr.data-side": "content.side()" }, classAttribute: "frame-popover__content" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrPopoverPanel, isStandalone: true, selector: "[frPopoverPanel]", host: { attributes: { "role": "dialog", "tabindex": "-1" }, properties: { "attr.data-side": "content.side()" }, classAttribute: "frame-popover__content frame-corner-handles" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrPopoverPanel, decorators: [{
             type: Directive,
             args: [{
                     selector: '[frPopoverPanel]',
                     host: {
-                        class: 'frame-popover__content',
+                        class: 'frame-popover__content frame-corner-handles',
                         '[attr.data-side]': 'content.side()',
                         role: 'dialog',
                         tabindex: '-1',
@@ -8964,14 +9370,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 /** 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 });
+    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 frame-corner-handles" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrRadioGroupCard, decorators: [{
             type: Directive,
             args: [{
                     selector: 'label[frRadioGroupCard]',
                     host: {
-                        class: 'frame-radio-group__card',
+                        class: 'frame-radio-group__card frame-corner-handles',
                     },
                 }]
         }] });
@@ -9200,7 +9606,7 @@ class FrResizablePanelGroup {
         return panel.hasAttribute('data-collapsible');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrResizablePanelGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrResizablePanelGroup, isStandalone: true, selector: "[frResizablePanelGroup], frame-resizable-panel-group", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layoutChange: "layoutChange" }, host: { properties: { "attr.data-orientation": "orientation()", "attr.data-disabled": "disabled() ? \"\" : null" }, classAttribute: "frame-resizable" }, exportAs: ["frResizablePanelGroup"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrResizablePanelGroup, isStandalone: true, selector: "[frResizablePanelGroup], frame-resizable-panel-group", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layoutChange: "layoutChange" }, host: { properties: { "attr.data-orientation": "orientation()", "attr.data-disabled": "disabled() ? \"\" : null" }, classAttribute: "frame-resizable frame-corner-handles" }, exportAs: ["frResizablePanelGroup"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrResizablePanelGroup, decorators: [{
             type: Directive,
@@ -9208,7 +9614,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     selector: '[frResizablePanelGroup], frame-resizable-panel-group',
                     exportAs: 'frResizablePanelGroup',
                     host: {
-                        class: 'frame-resizable',
+                        class: 'frame-resizable frame-corner-handles',
                         '[attr.data-orientation]': 'orientation()',
                         '[attr.data-disabled]': 'disabled() ? "" : null',
                     },
@@ -9373,7 +9779,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 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 });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSelectPanel, isStandalone: true, selector: "[frSelectPanel], frame-select-panel", host: { properties: { "attr.data-position": "content.position()", "style.min-width.px": "content.panelMinWidth()" }, classAttribute: "frame-select__content" }, hostDirectives: [{ directive: i1$3.FrDropdownMenuPanel }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrSelectPanel, isStandalone: true, selector: "[frSelectPanel], frame-select-panel", host: { properties: { "attr.data-position": "content.position()", "style.min-width.px": "content.panelMinWidth()" }, classAttribute: "frame-select__content" }, hostDirectives: [{ directive: i1$5.FrDropdownMenuPanel }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSelectPanel, decorators: [{
             type: Directive,
@@ -9498,7 +9904,7 @@ class FrSelect extends FrControlValueAccessor$1 {
         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 }, 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 });
+    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$5.FrDropdownMenu, inputs: ["closeDelay", "closeDelay", "triggerMode", "triggerMode"] }, { directive: i1$5.FrDropdownMenuTrigger }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSelect, decorators: [{
             type: Directive,
@@ -9615,7 +10021,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 });
+    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$5.FrDropdownMenuLabel }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSelectLabel, decorators: [{
             type: Directive,
@@ -9630,7 +10036,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 });
+    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$5.FrDropdownMenuSeparator }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSelectSeparator, decorators: [{
             type: Directive,
@@ -9675,7 +10081,7 @@ class FrSelectItem {
         return this.elementRef.nativeElement.textContent?.trim() ?? this.value();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSelectItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.16", type: FrSelectItem, isStandalone: true, selector: "button[frSelectItem]", inputs: { itemLabel: { classPropertyName: "itemLabel", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "handleClick()" }, properties: { "attr.data-has-custom-indicator": "customIndicator() ? \"\" : null", "attr.data-indicator-position": "indicatorPosition()", "attr.data-state": "isSelected() ? \"checked\" : \"unchecked\"" }, classAttribute: "frame-select__item" }, queries: [{ propertyName: "customIndicator", first: true, predicate: FrSelectItemIndicator, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$3.FrDropdownMenuItem }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.16", type: FrSelectItem, isStandalone: true, selector: "button[frSelectItem]", inputs: { itemLabel: { classPropertyName: "itemLabel", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "handleClick()" }, properties: { "attr.data-has-custom-indicator": "customIndicator() ? \"\" : null", "attr.data-indicator-position": "indicatorPosition()", "attr.data-state": "isSelected() ? \"checked\" : \"unchecked\"" }, classAttribute: "frame-select__item" }, queries: [{ propertyName: "customIndicator", first: true, predicate: FrSelectItemIndicator, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$5.FrDropdownMenuItem }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSelectItem, decorators: [{
             type: Directive,
@@ -9979,59 +10385,6 @@ 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' });
-    ariaLabelledBy = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledBy" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
-    ariaDescribedBy = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedBy" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
-    backdropClass = input(null, ...(ngDevMode ? [{ debugName: "backdropClass" }] : /* istanbul ignore next */ []));
-    closeOnDestroy = input(true, { ...(ngDevMode ? { debugName: "closeOnDestroy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    closeOnNavigation = input(true, { ...(ngDevMode ? { debugName: "closeOnNavigation" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    direction = input(null, ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
-    disableClose = input(false, { ...(ngDevMode ? { debugName: "disableClose" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    height = input(null, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
-    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
-    maxHeight = input(null, ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
-    maxWidth = input(null, ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
-    minHeight = input(null, ...(ngDevMode ? [{ debugName: "minHeight" }] : /* istanbul ignore next */ []));
-    minWidth = input(null, ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
-    panelClass = input(null, ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
-    role = input('dialog', ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
-    width = input(null, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
-    buildConfig(viewContainerRef) {
-        return {
-            ariaLabel: this.ariaLabel() ?? undefined,
-            ariaLabelledBy: this.ariaLabelledBy() ?? undefined,
-            ariaDescribedBy: this.ariaDescribedBy() ?? undefined,
-            backdropClass: this.backdropClass() ?? undefined,
-            closeOnDestroy: this.closeOnDestroy(),
-            closeOnNavigation: this.closeOnNavigation(),
-            direction: this.direction() ?? undefined,
-            disableClose: this.disableClose(),
-            height: this.height() ?? undefined,
-            id: this.id() ?? undefined,
-            maxHeight: this.maxHeight() ?? undefined,
-            maxWidth: this.maxWidth() ?? undefined,
-            minHeight: this.minHeight() ?? undefined,
-            minWidth: this.minWidth() ?? undefined,
-            panelClass: this.panelClass() ?? undefined,
-            role: this.role(),
-            viewContainerRef,
-            width: this.width() ?? undefined,
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSheetContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrSheetContent, isStandalone: true, selector: "ng-template[frSheetContent]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null }, closeOnDestroy: { classPropertyName: "closeOnDestroy", publicName: "closeOnDestroy", isSignal: true, isRequired: false, transformFunction: null }, closeOnNavigation: { classPropertyName: "closeOnNavigation", publicName: "closeOnNavigation", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, disableClose: { classPropertyName: "disableClose", publicName: "disableClose", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["frSheetContent"], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSheetContent, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[frSheetContent]',
-                    exportAs: 'frSheetContent',
-                }]
-        }], 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 }] }] } });
-
 const FR_SHEET_SIDES = ['top', 'right', 'bottom', 'left'];
 function coerceSheetSide(value) {
     return value === 'top' || value === 'bottom' || value === 'left' ? value : 'right';
@@ -10066,11 +10419,14 @@ class FrSheetPanel {
         this.dialogRef?.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSheetPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrSheetPanel, isStandalone: true, selector: "[frSheetPanel], frame-sheet-panel", inputs: { scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-scrollable": "scrollable() ? \"\" : null", "attr.data-side": "side()" }, classAttribute: "frame-sheet__panel" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrSheetPanel, isStandalone: true, selector: "[frSheetPanel], frame-sheet-panel", inputs: { scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-scrollable": "scrollable() ? \"\" : null", "attr.data-side": "side()" }, classAttribute: "frame-sheet__panel frame-corner-handles" }, ngImport: i0, template: `
     <ng-content />
     @if (showCloseButton()) {
       <button class="frame-sheet__close" type="button" aria-label="Close sheet" (click)="close()">
-        <span aria-hidden="true">×</span>
+        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M18 6 6 18"></path>
+          <path d="m6 6 12 12"></path>
+        </svg>
       </button>
     }
   `, isInline: true });
@@ -10080,7 +10436,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
             args: [{
                     selector: '[frSheetPanel], frame-sheet-panel',
                     host: {
-                        class: 'frame-sheet__panel',
+                        class: 'frame-sheet__panel frame-corner-handles',
                         '[attr.data-scrollable]': 'scrollable() ? "" : null',
                         '[attr.data-side]': 'side()',
                     },
@@ -10088,7 +10444,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
     <ng-content />
     @if (showCloseButton()) {
       <button class="frame-sheet__close" type="button" aria-label="Close sheet" (click)="close()">
-        <span aria-hidden="true">×</span>
+        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M18 6 6 18"></path>
+          <path d="m6 6 12 12"></path>
+        </svg>
       </button>
     }
   `,
@@ -10165,6 +10524,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 }]
         }] });
 
+/** Content slot for sheet. */
+class FrSheetContent {
+    templateRef = inject((TemplateRef));
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaLabelledBy = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledBy" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    ariaDescribedBy = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedBy" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
+    backdropClass = input(null, ...(ngDevMode ? [{ debugName: "backdropClass" }] : /* istanbul ignore next */ []));
+    closeOnDestroy = input(true, { ...(ngDevMode ? { debugName: "closeOnDestroy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    closeOnNavigation = input(true, { ...(ngDevMode ? { debugName: "closeOnNavigation" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    direction = input(null, ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    disableClose = input(false, { ...(ngDevMode ? { debugName: "disableClose" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    height = input(null, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    maxHeight = input(null, ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+    maxWidth = input(null, ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+    minHeight = input(null, ...(ngDevMode ? [{ debugName: "minHeight" }] : /* istanbul ignore next */ []));
+    minWidth = input(null, ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
+    panelClass = input(null, ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    role = input('dialog', ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    side = input('right', { ...(ngDevMode ? { debugName: "side" } : /* istanbul ignore next */ {}), transform: coerceSheetSide });
+    width = input(null, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    buildConfig(viewContainerRef) {
+        return {
+            ariaLabel: this.ariaLabel() ?? undefined,
+            ariaLabelledBy: this.ariaLabelledBy() ?? undefined,
+            ariaDescribedBy: this.ariaDescribedBy() ?? undefined,
+            backdropClass: this.backdropClass() ?? undefined,
+            closeOnDestroy: this.closeOnDestroy(),
+            closeOnNavigation: this.closeOnNavigation(),
+            direction: this.direction() ?? undefined,
+            disableClose: this.disableClose(),
+            height: this.height() ?? undefined,
+            id: this.id() ?? undefined,
+            maxHeight: this.maxHeight() ?? undefined,
+            maxWidth: this.maxWidth() ?? undefined,
+            minHeight: this.minHeight() ?? undefined,
+            minWidth: this.minWidth() ?? undefined,
+            panelClass: this.panelClass() ?? undefined,
+            role: this.role(),
+            side: this.side(),
+            viewContainerRef,
+            width: this.width() ?? undefined,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSheetContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrSheetContent, isStandalone: true, selector: "ng-template[frSheetContent]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null }, closeOnDestroy: { classPropertyName: "closeOnDestroy", publicName: "closeOnDestroy", isSignal: true, isRequired: false, transformFunction: null }, closeOnNavigation: { classPropertyName: "closeOnNavigation", publicName: "closeOnNavigation", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, disableClose: { classPropertyName: "disableClose", publicName: "disableClose", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["frSheetContent"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSheetContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[frSheetContent]',
+                    exportAs: 'frSheetContent',
+                }]
+        }], 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 }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
+
 const FR_SHEET_DATA = DIALOG_DATA;
 
 /** Default shell for sheet content, title, and footer actions. */
@@ -10301,6 +10715,7 @@ const DEFAULT_BACKDROP_CLASS = 'frame-sheet__backdrop';
 /** Service for opening sheet dialogs. */
 class FrSheetService {
     dialog = inject(Dialog);
+    overlay = inject(Overlay);
     open(content, config = {}) {
         if (isComponentType(content) && hasShellOptions(config)) {
             const shellConfig = {
@@ -10317,14 +10732,14 @@ class FrSheetService {
                     title: config.title,
                 },
             };
-            return this.dialog.open(FrSheetShell, this.withDefaultClasses(shellConfig));
+            return this.dialog.open(FrSheetShell, this.withDefaultClasses(shellConfig, config.side));
         }
-        return this.dialog.open(content, this.withDefaultClasses(config));
+        return this.dialog.open(content, this.withDefaultClasses(config, config.side));
     }
     closeAll() {
         this.dialog.closeAll();
     }
-    withDefaultClasses(config) {
+    withDefaultClasses(config, side = 'right') {
         return {
             ariaModal: true,
             autoFocus: 'first-tabbable',
@@ -10332,10 +10747,25 @@ class FrSheetService {
             ...config,
             maxHeight: config.maxHeight ?? '100dvh',
             maxWidth: config.maxWidth ?? '100vw',
-            panelClass: mergeClassList(config.panelClass, DEFAULT_PANEL_CLASS),
+            positionStrategy: config.positionStrategy ?? this.getSheetPositionStrategy(side),
+            panelClass: mergeClassList(config.panelClass, DEFAULT_PANEL_CLASS, `${DEFAULT_PANEL_CLASS}--${side}`),
             backdropClass: mergeClassList(config.backdropClass, DEFAULT_BACKDROP_CLASS),
         };
     }
+    getSheetPositionStrategy(side) {
+        const strategy = this.overlay.position().global();
+        switch (side) {
+            case 'bottom':
+                return strategy.bottom('0').left('0');
+            case 'left':
+                return strategy.left('0').top('0');
+            case 'top':
+                return strategy.left('0').top('0');
+            case 'right':
+            default:
+                return strategy.right('0').top('0');
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSheetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrSheetService, providedIn: 'root' });
 }
@@ -10362,13 +10792,13 @@ function withoutShellOptions(config) {
     const { bodyData: _bodyData, bodyInputs: _bodyInputs, description: _description, footerActions: _footerActions, scrollable: _scrollable, showCloseButton: _showCloseButton, side: _side, title: _title, ...dialogConfig } = config;
     return dialogConfig;
 }
-function mergeClassList(classList, defaultClass) {
+function mergeClassList(classList, ...defaultClasses) {
     const classes = Array.isArray(classList)
         ? classList
         : classList
             ? classList.split(/\s+/)
             : [];
-    return Array.from(new Set([defaultClass, ...classes].filter(Boolean)));
+    return Array.from(new Set([...defaultClasses, ...classes].filter((className) => !!className)));
 }
 
 /** Trigger control for sheet. */
@@ -11236,7 +11666,7 @@ class FrVirtualViewport {
         this.resizeObserver.observe(element);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrVirtualViewport, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrVirtualViewport, isStandalone: true, selector: "[frVirtualViewport], frame-virtual-viewport", inputs: { itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: true, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "scroll": "handleScroll()" }, properties: { "style.block-size": "height()" }, classAttribute: "frame-virtual-scroll__viewport" }, exportAs: ["frVirtualViewport"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrVirtualViewport, isStandalone: true, selector: "[frVirtualViewport], frame-virtual-viewport", inputs: { itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: true, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "scroll": "handleScroll()" }, properties: { "style.block-size": "height()" }, classAttribute: "frame-virtual-scroll__viewport frame-corner-handles" }, exportAs: ["frVirtualViewport"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrVirtualViewport, decorators: [{
             type: Directive,
@@ -11244,7 +11674,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     selector: '[frVirtualViewport], frame-virtual-viewport',
                     exportAs: 'frVirtualViewport',
                     host: {
-                        class: 'frame-virtual-scroll__viewport',
+                        class: 'frame-virtual-scroll__viewport frame-corner-handles',
                         '(scroll)': 'handleScroll()',
                         '[style.block-size]': 'height()',
                     },
@@ -11362,14 +11792,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 /** 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 });
+    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 frame-corner-handles" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrVirtualList, decorators: [{
             type: Directive,
             args: [{
                     selector: '[frVirtualList], frame-virtual-list',
                     host: {
-                        class: 'frame-virtual-scroll__list',
+                        class: 'frame-virtual-scroll__list frame-corner-handles',
                     },
                 }]
         }] });
@@ -11420,5 +11850,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_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_PANEL_LAYOUT, 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 };
+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_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_PANEL_LAYOUT, 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, FrCornerHandles, 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, coerceSheetSide, defaultPositions, provideDsValueAccessor };
 //# sourceMappingURL=frame-ui-ng-components.mjs.map