@flusys/ng-ui 8.1.2 → 8.1.4

package/fesm2022/flusys-ng-ui.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { signal, Service, makeEnvironmentProviders, provideAppInitializer, inject, PLATFORM_ID, input, booleanAttribute, computed, Component, output, contentChild, viewChild, effect, ElementRef, Directive, numberAttribute, afterNextRender, TemplateRef, contentChildren, DestroyRef, untracked, forwardRef, model, viewChildren, Renderer2, InjectionToken, Injector, SecurityContext } from '@angular/core';
-import { isPlatformBrowser, NgTemplateOutlet, DOCUMENT, NgComponentOutlet } from '@angular/common';
+import { signal, Service, makeEnvironmentProviders, provideAppInitializer, inject, PLATFORM_ID, input, booleanAttribute, computed, Component, output, contentChild, viewChild, effect, DestroyRef, ElementRef, Directive, numberAttribute, afterNextRender, TemplateRef, contentChildren, untracked, forwardRef, model, viewChildren, Renderer2, InjectionToken, Injector, SecurityContext } from '@angular/core';
+import { isPlatformBrowser, DOCUMENT, NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
 import * as lucideNamespace from '@lucide/angular';
 import { isLucideIconComponent, LucideDynamicIcon, provideLucideIcons } from '@lucide/angular';
 import * as i1 from '@angular/forms';
@@ -730,6 +730,34 @@ function provideNgUI(options) {
     ]);
 }
 
+const BASE_Z_INDEX = 1000;
+const Z_INDEX_STEP = 2;
+class OverlayStackService {
+    _doc = inject(DOCUMENT);
+    nextZIndex = BASE_Z_INDEX;
+    lockCount = 0;
+    open() {
+        const zIndex = this.nextZIndex;
+        this.nextZIndex += Z_INDEX_STEP;
+        return zIndex;
+    }
+    lockScroll() {
+        if (this.lockCount === 0)
+            this._doc.body.style.overflow = 'hidden';
+        this.lockCount++;
+    }
+    unlockScroll() {
+        this.lockCount = Math.max(0, this.lockCount - 1);
+        if (this.lockCount === 0)
+            this._doc.body.style.overflow = '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: OverlayStackService, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.5", ngImport: i0, type: OverlayStackService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: OverlayStackService, decorators: [{
+            type: Service
+        }] });
+
 class BadgeComponent {
     value = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -929,12 +957,18 @@ const SEVERITY_CLASSES = {
 class UiIconComponent {
     name = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
-    size = input(16, /* @ts-ignore */
+    // Unset by default so the icon renders at `1em` — it then scales with
+    // whatever font-size context (e.g. a Tailwind text-* class) surrounds it,
+    // instead of always rendering at a fixed pixel size regardless of that
+    // context. Pass an explicit size to opt out and pin an exact pixel value.
+    size = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     spin = input(false, { ...(ngDevMode ? { debugName: "spin" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     fill = input(false, { ...(ngDevMode ? { debugName: "fill" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     severity = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => this.size() ?? '1em', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
     lucideName = computed(() => {
         const n = this.name();
         return PI_TO_LUCIDE[n] ?? n;
@@ -953,32 +987,31 @@ class UiIconComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: UiIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: UiIconComponent, isStandalone: true, selector: "ui-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, spin: { classPropertyName: "spin", publicName: "spin", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--ui-icon-size": "size() + 'px'" }, classAttribute: "inline-flex items-center leading-none" }, providers: [provideLucideIcons(...allLucideIcons)], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: UiIconComponent, isStandalone: true, selector: "ui-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, spin: { classPropertyName: "spin", publicName: "spin", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "inline-flex items-center leading-none" }, providers: [provideLucideIcons(...allLucideIcons)], ngImport: i0, template: `
     @if (lucideName()) {
       <svg
         ngSkipHydration
         [lucideIcon]="lucideName()"
-        [size]="size()"
+        [size]="resolvedSize()"
         [class]="iconClass()"
       ></svg>
     }
-  `, isInline: true, styles: [":host ::ng-deep svg[lucideIcon]{width:var(--ui-icon-size);height:var(--ui-icon-size);display:block}\n"], dependencies: [{ kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }] });
+  `, isInline: true, styles: [":host ::ng-deep svg[lucideIcon]{display:block}\n"], dependencies: [{ kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: UiIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-icon', imports: [LucideDynamicIcon], providers: [provideLucideIcons(...allLucideIcons)], host: {
                         class: 'inline-flex items-center leading-none',
-                        '[style.--ui-icon-size]': "size() + 'px'",
                     }, template: `
     @if (lucideName()) {
       <svg
         ngSkipHydration
         [lucideIcon]="lucideName()"
-        [size]="size()"
+        [size]="resolvedSize()"
         [class]="iconClass()"
       ></svg>
     }
-  `, styles: [":host ::ng-deep svg[lucideIcon]{width:var(--ui-icon-size);height:var(--ui-icon-size);display:block}\n"] }]
+  `, styles: [":host ::ng-deep svg[lucideIcon]{display:block}\n"] }]
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], spin: [{ type: i0.Input, args: [{ isSignal: true, alias: "spin", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }] } });
 
 class ButtonComponent {
@@ -1312,10 +1345,10 @@ function plainVariant(kind) {
 const FOCUSABLE_SELECTOR$3 = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 class ConfirmDialog {
     static idCounter = 0;
-    _doc = inject(DOCUMENT);
     headerId = `f-confirmdialog-header-${++ConfirmDialog.idCounter}`;
     descId = `f-confirmdialog-desc-${ConfirmDialog.idCounter}`;
     confirmationService = inject(ConfirmationService);
+    _overlayStack = inject(OverlayStackService);
     key = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
     icon = input('', /* @ts-ignore */
@@ -1350,24 +1383,40 @@ class ConfirmDialog {
     panelRef = viewChild('panel', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
     _previouslyFocused = null;
+    _scrollLocked = false;
+    _zIndex = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_zIndex" }] : /* istanbul ignore next */ []));
+    zIndex = this._zIndex.asReadonly();
     constructor() {
         effect(() => {
             const visible = !!this.activeConfirmation();
             if (visible) {
+                this._zIndex.set(this._overlayStack.open());
                 this._previouslyFocused =
                     typeof document !== 'undefined'
                         ? document.activeElement
                         : null;
-                if (this.blockScroll())
-                    this._doc.body.style.overflow = 'hidden';
+                if (this.blockScroll()) {
+                    this._overlayStack.lockScroll();
+                    this._scrollLocked = true;
+                }
             }
             else {
-                if (this.blockScroll())
-                    this._doc.body.style.overflow = '';
+                this._zIndex.set(null);
+                if (this._scrollLocked) {
+                    this._overlayStack.unlockScroll();
+                    this._scrollLocked = false;
+                }
                 this._previouslyFocused?.focus();
                 this._previouslyFocused = null;
             }
         });
+        inject(DestroyRef).onDestroy(() => {
+            if (this._scrollLocked) {
+                this._overlayStack.unlockScroll();
+                this._scrollLocked = false;
+            }
+        });
     }
     resolvedIcon(c) {
         return c.icon || this.icon();
@@ -1426,7 +1475,10 @@ class ConfirmDialog {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: ConfirmDialog, isStandalone: true, selector: "f-confirmdialog", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, acceptLabel: { classPropertyName: "acceptLabel", publicName: "acceptLabel", isSignal: true, isRequired: false, transformFunction: null }, rejectLabel: { classPropertyName: "rejectLabel", publicName: "rejectLabel", isSignal: true, isRequired: false, transformFunction: null }, acceptIcon: { classPropertyName: "acceptIcon", publicName: "acceptIcon", isSignal: true, isRequired: false, transformFunction: null }, rejectIcon: { classPropertyName: "rejectIcon", publicName: "rejectIcon", isSignal: true, isRequired: false, transformFunction: null }, acceptButtonStyleClass: { classPropertyName: "acceptButtonStyleClass", publicName: "acceptButtonStyleClass", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonStyleClass: { classPropertyName: "rejectButtonStyleClass", publicName: "rejectButtonStyleClass", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, blockScroll: { classPropertyName: "blockScroll", publicName: "blockScroll", isSignal: true, isRequired: false, transformFunction: null }, defaultFocus: { classPropertyName: "defaultFocus", publicName: "defaultFocus", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "block" }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (activeConfirmation(); as c) {
       @if (c.acceptVisible !== false || c.rejectVisible !== false) {
-        <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+        <div
+          class="fixed inset-0 flex items-center justify-center p-4"
+          [style.z-index]="zIndex()"
+        >
           <div
             class="confirm-backdrop absolute inset-0 bg-black/50 backdrop-blur-[2px]"
             (click)="c.closable !== false && reject(c.reject)"
@@ -1517,7 +1569,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             args: [{ selector: 'f-confirmdialog', imports: [UiIconComponent, ButtonComponent], host: { class: 'block', '(document:keydown.escape)': 'onEscape()' }, template: `
     @if (activeConfirmation(); as c) {
       @if (c.acceptVisible !== false || c.rejectVisible !== false) {
-        <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+        <div
+          class="fixed inset-0 flex items-center justify-center p-4"
+          [style.z-index]="zIndex()"
+        >
           <div
             class="confirm-backdrop absolute inset-0 bg-black/50 backdrop-blur-[2px]"
             (click)="c.closable !== false && reject(c.reject)"
@@ -2650,9 +2705,13 @@ class ImageComponent {
     ...(ngDevMode ? [{ debugName: "fTemplates" }] : /* istanbul ignore next */ []));
     indicatorTpl = computed(() => this.fTemplates().find(t => t.fTemplate() === 'indicator')?.templateRef ?? null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "indicatorTpl" }] : /* istanbul ignore next */ []));
+    _overlayStack = inject(OverlayStackService);
     _previewVisible = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_previewVisible" }] : /* istanbul ignore next */ []));
     previewVisible = this._previewVisible.asReadonly();
+    _zIndex = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_zIndex" }] : /* istanbul ignore next */ []));
+    zIndex = this._zIndex.asReadonly();
     _loaded = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_loaded" }] : /* istanbul ignore next */ []));
     loaded = this._loaded.asReadonly();
@@ -2675,12 +2734,14 @@ class ImageComponent {
         if (this.hasError())
             return;
         this._previewVisible.set(true);
+        this._zIndex.set(this._overlayStack.open());
         this.onShow.emit();
     }
     close() {
         this._previewVisible.set(false);
         this._rotate.set(0);
         this._scale.set(1);
+        this._zIndex.set(null);
         this.onHide.emit();
     }
     onEscape() {
@@ -2751,7 +2812,8 @@ class ImageComponent {
 
     @if (previewVisible()) {
       <div
-        class="image-preview-overlay fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-6"
+        class="image-preview-overlay fixed inset-0 flex items-center justify-center bg-black/80 p-6"
+        [style.z-index]="zIndex()"
         (click)="close()"
       >
         <div class="absolute top-4 left-4 flex items-center gap-1" (click)="$event.stopPropagation()">
@@ -2837,7 +2899,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
 
     @if (previewVisible()) {
       <div
-        class="image-preview-overlay fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-6"
+        class="image-preview-overlay fixed inset-0 flex items-center justify-center bg-black/80 p-6"
+        [style.z-index]="zIndex()"
         (click)="close()"
       >
         <div class="absolute top-4 left-4 flex items-center gap-1" (click)="$event.stopPropagation()">
@@ -3199,17 +3262,170 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], itemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemSize", required: false }] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], scrollWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollWidth", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], onLazyLoad: [{ type: i0.Output, args: ["onLazyLoad"] }], onScrollIndexChange: [{ type: i0.Output, args: ["onScrollIndexChange"] }], itemTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], loaderTpl: [{ type: i0.ContentChild, args: ['loader', { isSignal: true }] }], viewportRef: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }] } });
 
-// `capture: true` is required because scroll events on inner scroll containers don't bubble to window.
-function repositionOnScroll(isActive, reposition) {
-    effect(onCleanup => {
-        if (!isActive() || typeof window === 'undefined')
+const DEFAULT_GAP = 4;
+const DEFAULT_MARGIN = 8;
+const DEFAULT_MIN_HEIGHT = 120;
+/**
+ * Places a panel against an anchor inside the viewport: flips above the anchor
+ * when there is more room there, clamps horizontally, and hands back a
+ * `maxHeight` when the panel would otherwise be cut off by a viewport edge, so
+ * it scrolls internally instead.
+ */
+function computeOverlayPlacement(anchor, panel, viewport, options = {}) {
+    const gap = options.gap ?? DEFAULT_GAP;
+    const margin = options.margin ?? DEFAULT_MARGIN;
+    const align = options.align ?? 'start';
+    const minHeight = Math.min(options.minHeight ?? DEFAULT_MIN_HEIGHT, Math.max(0, viewport.height - margin * 2));
+    const spaceBelow = viewport.height - anchor.bottom - gap - margin;
+    const spaceAbove = anchor.top - gap - margin;
+    const direction = panel.height <= spaceBelow || spaceBelow >= spaceAbove ? 'down' : 'up';
+    const room = direction === 'down' ? spaceBelow : spaceAbove;
+    const maxHeight = Math.max(minHeight, Math.round(room));
+    const height = Math.min(panel.height, maxHeight);
+    // Only take over the height when the panel genuinely doesn't fit; otherwise
+    // leave it to the panel's own CSS (a design cap like `max-h-56`).
+    const clamped = options.clampHeight !== false && panel.height > maxHeight ? maxHeight : null;
+    const top = direction === 'down'
+        ? Math.min(anchor.bottom + gap, Math.max(margin, viewport.height - margin - height))
+        : Math.max(margin, anchor.top - gap - height);
+    const width = options.matchAnchorWidth ? anchor.width : panel.width;
+    const rawLeft = align === 'end' ? anchor.right - width : anchor.left;
+    const left = width + margin * 2 > viewport.width
+        ? margin
+        : Math.max(margin, Math.min(rawLeft, viewport.width - width - margin));
+    return {
+        top: Math.round(top),
+        left: Math.round(left),
+        width: options.matchAnchorWidth ? Math.round(anchor.width) : null,
+        maxHeight: clamped,
+        direction,
+    };
+}
+function overlayPlacementStyle(placement) {
+    if (!placement)
+        return {};
+    const style = {
+        top: `${placement.top}px`,
+        left: `${placement.left}px`,
+    };
+    if (placement.maxHeight !== null)
+        style['max-height'] = `${placement.maxHeight}px`;
+    if (placement.width !== null)
+        style['width'] = `${placement.width}px`;
+    return style;
+}
+function overlayPlacementEquals(a, b) {
+    if (a === b)
+        return true;
+    if (!a || !b)
+        return false;
+    return (a.top === b.top &&
+        a.left === b.left &&
+        a.width === b.width &&
+        a.maxHeight === b.maxHeight &&
+        a.direction === b.direction);
+}
+/**
+ * How tall the panel wants to be, with our own `max-height` lifted for the
+ * measurement — otherwise a panel we clamped once would report the clamped
+ * height forever and could never claim more room after a scroll.
+ */
+function measureNaturalSize(panel) {
+    const previous = panel.style.maxHeight;
+    // Cleared, not `none`: the panel's own CSS cap must still apply, so a panel
+    // that fits inside its design cap never asks for more room than that.
+    panel.style.maxHeight = '';
+    // offsetWidth/Height, not getBoundingClientRect: several panels animate in
+    // with a `scale()` transform, which would otherwise make us measure — and
+    // place — a panel mid-animation at the wrong size.
+    const size = { width: panel.offsetWidth, height: panel.offsetHeight };
+    panel.style.maxHeight = previous;
+    return size;
+}
+/**
+ * Keeps a fixed-position panel glued to its anchor while it is open.
+ *
+ * Repositions on window scroll (capture: inner scroll containers don't bubble),
+ * on resize, and — the case every hand-rolled copy of this math used to miss —
+ * when the panel's own content resizes, e.g. a lazily loaded option list
+ * arriving after the panel opened and pushing it past the bottom of the screen.
+ * Work is coalesced into an animation frame so a scroll burst costs one layout.
+ */
+function createOverlayPositioner(anchor, panel, options, emit) {
+    let frame = null;
+    let measuring = false;
+    const update = () => {
+        frame = null;
+        if (typeof anchor.getBoundingClientRect !== 'function')
+            return;
+        measuring = true;
+        const size = measureNaturalSize(panel);
+        measuring = false;
+        emit(computeOverlayPlacement(anchor.getBoundingClientRect(), size, { width: window.innerWidth, height: window.innerHeight }, options));
+    };
+    const schedule = () => {
+        if (frame !== null)
             return;
-        window.addEventListener('scroll', reposition, true);
-        window.addEventListener('resize', reposition);
-        onCleanup(() => {
-            window.removeEventListener('scroll', reposition, true);
-            window.removeEventListener('resize', reposition);
+        frame = requestAnimationFrame(update);
+    };
+    update();
+    window.addEventListener('scroll', schedule, true);
+    window.addEventListener('resize', schedule);
+    const observer = typeof ResizeObserver === 'undefined'
+        ? null
+        : new ResizeObserver(() => {
+            if (!measuring)
+                schedule();
         });
+    observer?.observe(panel);
+    return () => {
+        if (frame !== null)
+            cancelAnimationFrame(frame);
+        window.removeEventListener('scroll', schedule, true);
+        window.removeEventListener('resize', schedule);
+        observer?.disconnect();
+    };
+}
+/**
+ * Signal-based placement for components that render their panel from a
+ * template. Bind the result through `overlayPlacementStyle()`. Must be called
+ * in an injection context.
+ */
+function overlayPosition(config) {
+    const placement = signal(null, { ...(ngDevMode ? { debugName: "placement" } : /* istanbul ignore next */ {}), equal: overlayPlacementEquals });
+    effect((onCleanup) => {
+        const anchorEl = config.anchor();
+        const panelEl = config.panel();
+        const options = config.options?.() ?? {};
+        if (!config.active() ||
+            !anchorEl ||
+            !panelEl ||
+            typeof window === 'undefined') {
+            placement.set(null);
+            return;
+        }
+        onCleanup(createOverlayPositioner(anchorEl, panelEl, options, (next) => placement.set(next)));
+    });
+    return placement.asReadonly();
+}
+/**
+ * Imperative twin of `overlayPosition()` for overlays that portal a plain DOM
+ * node instead of rendering a template. Returns a dispose function.
+ */
+function attachOverlayPosition(anchor, panel, options = {}) {
+    if (typeof window === 'undefined')
+        return () => undefined;
+    let current = null;
+    return createOverlayPositioner(anchor, panel, options, (placement) => {
+        if (overlayPlacementEquals(current, placement))
+            return;
+        current = placement;
+        panel.style.top = `${placement.top}px`;
+        panel.style.left = `${placement.left}px`;
+        panel.style.maxHeight =
+            placement.maxHeight === null ? '' : `${placement.maxHeight}px`;
+        if (placement.width !== null)
+            panel.style.width = `${placement.width}px`;
     });
 }
 
@@ -3235,7 +3451,6 @@ class SelectComponent {
                 queueMicrotask(() => this._filterInputRef()?.nativeElement.focus());
             }
         });
-        repositionOnScroll(() => this.open() && this.appendTo() === 'body', () => { this.position(); this.adjustForViewport(); });
     }
     onDocumentClick(e) {
         if (this.open() && !this._el.nativeElement.contains(e.target)) {
@@ -3284,7 +3499,7 @@ class SelectComponent {
     ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
     style = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
-    appendTo = input('self', /* @ts-ignore */
+    appendTo = input('body', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
     editable = input(false, { ...(ngDevMode ? { debugName: "editable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -3299,6 +3514,14 @@ class SelectComponent {
     virtualScrollItemSize = input(36, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "virtualScrollItemSize" }] : /* istanbul ignore next */ []));
     lazy = input(false, { ...(ngDevMode ? { debugName: "lazy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Full option object for the current `value()`, supplied by the consumer.
+     * Pinned into the option pool (deduped by `optionValue`) whenever a lazy-loaded
+     * or filtered `options()` page doesn't happen to contain it, so the trigger
+     * label, checkmark and list row always resolve correctly on edit forms.
+     */
+    selectedObject = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedObject" }] : /* istanbul ignore next */ []));
     hostClass = computed(() => `block w-full ${this.styleClass()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
     onFilter = output();
@@ -3329,49 +3552,19 @@ class SelectComponent {
     ...(ngDevMode ? [{ debugName: "_filterInputRef" }] : /* istanbul ignore next */ []));
     _panelRef = viewChild('panel', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_panelRef" }] : /* istanbul ignore next */ []));
-    _panelTop = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_panelTop" }] : /* istanbul ignore next */ []));
-    _panelLeft = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_panelLeft" }] : /* istanbul ignore next */ []));
-    _panelWidth = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_panelWidth" }] : /* istanbul ignore next */ []));
+    _placement = overlayPosition({
+        active: () => this.open() && this.appendTo() === 'body',
+        anchor: () => this._triggerRef()?.nativeElement,
+        panel: () => this._panelRef()?.nativeElement,
+        options: () => ({ matchAnchorWidth: true }),
+    });
     panelClass = computed(() => {
         const position = this.appendTo() === 'body' ? 'fixed' : 'absolute w-full mt-1';
-        return `${position} z-50 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay overflow-hidden`;
+        return `${position} z-50 flex flex-col bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay overflow-hidden`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
-    panelStyle = computed(() => {
-        if (this.appendTo() !== 'body')
-            return {};
-        return {
-            top: `${this._panelTop()}px`,
-            left: `${this._panelLeft()}px`,
-            width: `${this._panelWidth()}px`,
-        };
-    }, /* @ts-ignore */
+    panelStyle = computed(() => this.appendTo() === 'body' ? overlayPlacementStyle(this._placement()) : {}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelStyle" }] : /* istanbul ignore next */ []));
-    position() {
-        const anchorEl = this._triggerRef()?.nativeElement;
-        if (!anchorEl || typeof window === 'undefined')
-            return;
-        const rect = anchorEl.getBoundingClientRect();
-        this._panelTop.set(rect.bottom + 4);
-        this._panelLeft.set(Math.max(8, rect.left));
-        this._panelWidth.set(rect.width);
-    }
-    adjustForViewport() {
-        const panelEl = this._panelRef()?.nativeElement;
-        const anchorEl = this._triggerRef()?.nativeElement;
-        if (!panelEl || !anchorEl || typeof window === 'undefined')
-            return;
-        const anchorRect = anchorEl.getBoundingClientRect();
-        const panelRect = panelEl.getBoundingClientRect();
-        const gap = 4;
-        this._panelLeft.set(Math.max(8, Math.min(anchorRect.left, window.innerWidth - panelRect.width - 8)));
-        if (anchorRect.bottom + panelRect.height + gap > window.innerHeight) {
-            this._panelTop.set(Math.max(8, anchorRect.top - panelRect.height - gap));
-        }
-    }
     selectedItemRef = contentChild('selectedItem', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedItemRef" }] : /* istanbul ignore next */ []));
     itemRef = contentChild('item', /* @ts-ignore */
@@ -3463,8 +3656,28 @@ class SelectComponent {
         const rec = opt;
         return this.filterFieldList().some((f) => this.matchesFilter(rec[f], query));
     }
+    // The pinned object only counts as "selected" once it actually matches the
+    // current value — a stale/irrelevant selectedObject is never injected.
+    selectedObjectEntry = computed(() => {
+        const sel = this.selectedObject();
+        if (sel == null)
+            return null;
+        return this.getOptionValue(sel) === this.value() ? sel : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedObjectEntry" }] : /* istanbul ignore next */ []));
+    mergeSelected(base) {
+        const sel = this.selectedObjectEntry();
+        if (sel == null)
+            return base;
+        const selVal = this.getOptionValue(sel);
+        return base.some((o) => this.getOptionValue(o) === selVal)
+            ? base
+            : [sel, ...base];
+    }
+    optionsWithSelected = computed(() => this.mergeSelected(this.options()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionsWithSelected" }] : /* istanbul ignore next */ []));
     filteredOptions = computed(() => {
-        const opts = this.options();
+        const opts = this.group() ? this.options() : this.optionsWithSelected();
         const q = this.filterText();
         if (!q)
             return opts;
@@ -3473,9 +3686,10 @@ class SelectComponent {
     ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
     allLeafOptions = computed(() => {
         if (!this.group())
-            return this.options();
+            return this.optionsWithSelected();
         const groups = this.options();
-        return groups.flatMap((g) => g[this.optionGroupChildren()] ?? []);
+        const leaves = groups.flatMap((g) => g[this.optionGroupChildren()] ?? []);
+        return this.mergeSelected(leaves);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "allLeafOptions" }] : /* istanbul ignore next */ []));
     flatItems = computed(() => {
@@ -3613,10 +3827,6 @@ class SelectComponent {
         this.onShow.emit();
         if (this.lazy())
             this.onLazyLoad.emit({ filter: this.filterText() });
-        if (this.appendTo() === 'body') {
-            this.position();
-            setTimeout(() => this.adjustForViewport(), 0);
-        }
     }
     closeList() {
         this._open.set(false);
@@ -3752,7 +3962,7 @@ class SelectComponent {
     }
     setDisabledState() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: SelectComponent, isStandalone: true, selector: "f-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: true, isRequired: false, transformFunction: null }, filterMatchMode: { classPropertyName: "filterMatchMode", publicName: "filterMatchMode", isSignal: true, isRequired: false, transformFunction: null }, filterLocale: { classPropertyName: "filterLocale", publicName: "filterLocale", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, resetFilterOnHide: { classPropertyName: "resetFilterOnHide", publicName: "resetFilterOnHide", isSignal: true, isRequired: false, transformFunction: null }, autofocusFilter: { classPropertyName: "autofocusFilter", publicName: "autofocusFilter", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyFilterMessage: { classPropertyName: "emptyFilterMessage", publicName: "emptyFilterMessage", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: true, isRequired: false, transformFunction: null }, dropdownIcon: { classPropertyName: "dropdownIcon", publicName: "dropdownIcon", isSignal: true, isRequired: false, transformFunction: null }, clearIcon: { classPropertyName: "clearIcon", publicName: "clearIcon", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, checkmark: { classPropertyName: "checkmark", publicName: "checkmark", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, optionGroupLabel: { classPropertyName: "optionGroupLabel", publicName: "optionGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, optionGroupChildren: { classPropertyName: "optionGroupChildren", publicName: "optionGroupChildren", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFilter: "onFilter", onChange: "onChange", onShow: "onShow", onHide: "onHide", onBlur: "onBlur", onFocus: "onFocus", onClear: "onClear", onLazyLoad: "onLazyLoad" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "hostClass()", "style": "style()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: SelectComponent, isStandalone: true, selector: "f-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: true, isRequired: false, transformFunction: null }, filterMatchMode: { classPropertyName: "filterMatchMode", publicName: "filterMatchMode", isSignal: true, isRequired: false, transformFunction: null }, filterLocale: { classPropertyName: "filterLocale", publicName: "filterLocale", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, resetFilterOnHide: { classPropertyName: "resetFilterOnHide", publicName: "resetFilterOnHide", isSignal: true, isRequired: false, transformFunction: null }, autofocusFilter: { classPropertyName: "autofocusFilter", publicName: "autofocusFilter", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyFilterMessage: { classPropertyName: "emptyFilterMessage", publicName: "emptyFilterMessage", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: true, isRequired: false, transformFunction: null }, dropdownIcon: { classPropertyName: "dropdownIcon", publicName: "dropdownIcon", isSignal: true, isRequired: false, transformFunction: null }, clearIcon: { classPropertyName: "clearIcon", publicName: "clearIcon", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, checkmark: { classPropertyName: "checkmark", publicName: "checkmark", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, optionGroupLabel: { classPropertyName: "optionGroupLabel", publicName: "optionGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, optionGroupChildren: { classPropertyName: "optionGroupChildren", publicName: "optionGroupChildren", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, selectedObject: { classPropertyName: "selectedObject", publicName: "selectedObject", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFilter: "onFilter", onChange: "onChange", onShow: "onShow", onHide: "onHide", onBlur: "onBlur", onFocus: "onFocus", onClear: "onClear", onLazyLoad: "onLazyLoad" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "hostClass()", "style": "style()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SelectComponent),
@@ -3873,7 +4083,7 @@ class SelectComponent {
             data-select-list
             [id]="listId()"
             role="listbox"
-            class="max-h-56 overflow-auto py-1"
+            class="flex-1 min-h-0 max-h-56 overflow-auto py-1"
           >
             @if (loading()) {
               @if (loaderTpl()) {
@@ -4126,7 +4336,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             data-select-list
             [id]="listId()"
             role="listbox"
-            class="max-h-56 overflow-auto py-1"
+            class="flex-1 min-h-0 max-h-56 overflow-auto py-1"
           >
             @if (loading()) {
               @if (loaderTpl()) {
@@ -4247,7 +4457,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     </ng-template>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterBy", required: false }] }], filterMatchMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMatchMode", required: false }] }], filterLocale: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLocale", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], resetFilterOnHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetFilterOnHide", required: false }] }], autofocusFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocusFilter", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], emptyFilterMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyFilterMessage", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingIcon", required: false }] }], dropdownIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownIcon", required: false }] }], clearIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearIcon", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], checkmark: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkmark", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], optionGroupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupLabel", required: false }] }], optionGroupChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupChildren", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualScrollItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollItemSize", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], onFilter: [{ type: i0.Output, args: ["onFilter"] }], onChange: [{ type: i0.Output, args: ["onChange"] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], onLazyLoad: [{ type: i0.Output, args: ["onLazyLoad"] }], _triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], _editableInputRef: [{ type: i0.ViewChild, args: ['editableInputEl', { isSignal: true }] }], _filterInputRef: [{ type: i0.ViewChild, args: ['filterInput', { isSignal: true }] }], _panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], selectedItemRef: [{ type: i0.ContentChild, args: ['selectedItem', { isSignal: true }] }], itemRef: [{ type: i0.ContentChild, args: ['item', { isSignal: true }] }], groupRef: [{ type: i0.ContentChild, args: ['group', { isSignal: true }] }], headerRef: [{ type: i0.ContentChild, args: ['header', { isSignal: true }] }], footerRef: [{ type: i0.ContentChild, args: ['footer', { isSignal: true }] }], emptyRef: [{ type: i0.ContentChild, args: ['empty', { isSignal: true }] }], emptyFilterRef: [{ type: i0.ContentChild, args: ['emptyfilter', { isSignal: true }] }], loaderRef: [{ type: i0.ContentChild, args: ['loader', { isSignal: true }] }], filterRef: [{ type: i0.ContentChild, args: ['filter', { isSignal: true }] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterBy", required: false }] }], filterMatchMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMatchMode", required: false }] }], filterLocale: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLocale", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], resetFilterOnHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetFilterOnHide", required: false }] }], autofocusFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocusFilter", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], emptyFilterMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyFilterMessage", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingIcon", required: false }] }], dropdownIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownIcon", required: false }] }], clearIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearIcon", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], checkmark: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkmark", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], optionGroupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupLabel", required: false }] }], optionGroupChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupChildren", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualScrollItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollItemSize", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], selectedObject: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedObject", required: false }] }], onFilter: [{ type: i0.Output, args: ["onFilter"] }], onChange: [{ type: i0.Output, args: ["onChange"] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], onLazyLoad: [{ type: i0.Output, args: ["onLazyLoad"] }], _triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], _editableInputRef: [{ type: i0.ViewChild, args: ['editableInputEl', { isSignal: true }] }], _filterInputRef: [{ type: i0.ViewChild, args: ['filterInput', { isSignal: true }] }], _panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], selectedItemRef: [{ type: i0.ContentChild, args: ['selectedItem', { isSignal: true }] }], itemRef: [{ type: i0.ContentChild, args: ['item', { isSignal: true }] }], groupRef: [{ type: i0.ContentChild, args: ['group', { isSignal: true }] }], headerRef: [{ type: i0.ContentChild, args: ['header', { isSignal: true }] }], footerRef: [{ type: i0.ContentChild, args: ['footer', { isSignal: true }] }], emptyRef: [{ type: i0.ContentChild, args: ['empty', { isSignal: true }] }], emptyFilterRef: [{ type: i0.ContentChild, args: ['emptyfilter', { isSignal: true }] }], loaderRef: [{ type: i0.ContentChild, args: ['loader', { isSignal: true }] }], filterRef: [{ type: i0.ContentChild, args: ['filter', { isSignal: true }] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }] } });
 
 class MultiSelectComponent {
     _el = inject(ElementRef);
@@ -4269,10 +4479,6 @@ class MultiSelectComponent {
                 queueMicrotask(() => this._filterInputRef()?.nativeElement.focus());
             }
         });
-        repositionOnScroll(() => this.open() && this.appendTo() === 'body', () => {
-            this.position();
-            this.adjustForViewport();
-        });
     }
     onDocumentClick(e) {
         if (this.open() && !this._el.nativeElement.contains(e.target)) {
@@ -4285,49 +4491,19 @@ class MultiSelectComponent {
     ...(ngDevMode ? [{ debugName: "_filterInputRef" }] : /* istanbul ignore next */ []));
     _panelRef = viewChild('panel', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_panelRef" }] : /* istanbul ignore next */ []));
-    _panelTop = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_panelTop" }] : /* istanbul ignore next */ []));
-    _panelLeft = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_panelLeft" }] : /* istanbul ignore next */ []));
-    _panelWidth = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_panelWidth" }] : /* istanbul ignore next */ []));
+    _placement = overlayPosition({
+        active: () => this.open() && this.appendTo() === 'body',
+        anchor: () => this._triggerRef()?.nativeElement,
+        panel: () => this._panelRef()?.nativeElement,
+        options: () => ({ matchAnchorWidth: true }),
+    });
     panelClass = computed(() => {
         const position = this.appendTo() === 'body' ? 'fixed' : 'absolute w-full mt-1';
-        return `${position} z-50 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay overflow-hidden`;
+        return `${position} z-50 flex flex-col bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay overflow-hidden`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
-    panelStyle = computed(() => {
-        if (this.appendTo() !== 'body')
-            return {};
-        return {
-            top: `${this._panelTop()}px`,
-            left: `${this._panelLeft()}px`,
-            width: `${this._panelWidth()}px`,
-        };
-    }, /* @ts-ignore */
+    panelStyle = computed(() => this.appendTo() === 'body' ? overlayPlacementStyle(this._placement()) : {}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelStyle" }] : /* istanbul ignore next */ []));
-    position() {
-        const anchorEl = this._triggerRef()?.nativeElement;
-        if (!anchorEl || typeof window === 'undefined')
-            return;
-        const rect = anchorEl.getBoundingClientRect();
-        this._panelTop.set(rect.bottom + 4);
-        this._panelLeft.set(Math.max(8, rect.left));
-        this._panelWidth.set(rect.width);
-    }
-    adjustForViewport() {
-        const panelEl = this._panelRef()?.nativeElement;
-        const anchorEl = this._triggerRef()?.nativeElement;
-        if (!panelEl || !anchorEl || typeof window === 'undefined')
-            return;
-        const anchorRect = anchorEl.getBoundingClientRect();
-        const panelRect = panelEl.getBoundingClientRect();
-        const gap = 4;
-        this._panelLeft.set(Math.max(8, Math.min(anchorRect.left, window.innerWidth - panelRect.width - 8)));
-        if (anchorRect.bottom + panelRect.height + gap > window.innerHeight) {
-            this._panelTop.set(Math.max(8, anchorRect.top - panelRect.height - gap));
-        }
-    }
     triggerClass = computed(() => {
         const base = 'w-full min-h-[34px] flex items-center gap-2 f-field-compact text-sm border bg-(--f-form-field-background) focus:outline-none focus-visible:ring-focus transition-all duration-[var(--f-transition-duration)]';
         const showInvalid = this.invalid() && this.touched();
@@ -4390,7 +4566,7 @@ class MultiSelectComponent {
     ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
     style = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
-    appendTo = input('self', /* @ts-ignore */
+    appendTo = input('body', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
     readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     autofocus = input(false, { ...(ngDevMode ? { debugName: "autofocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -4410,6 +4586,14 @@ class MultiSelectComponent {
     virtualScrollItemSize = input(36, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "virtualScrollItemSize" }] : /* istanbul ignore next */ []));
     lazy = input(false, { ...(ngDevMode ? { debugName: "lazy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Full option objects for the currently selected `values()`, supplied by the
+     * consumer. Pinned into the option pool (deduped by `optionValue`) whenever a
+     * lazy-loaded or filtered `options()` page doesn't contain one of them, so
+     * chips/labels always resolve correctly on edit forms.
+     */
+    selectedObjects = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedObjects" }] : /* istanbul ignore next */ []));
     hostClass = computed(() => `block w-full ${this.styleClass()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
     onBlur = output();
@@ -4524,8 +4708,21 @@ class MultiSelectComponent {
         const rec = opt;
         return this.filterFieldList().some((f) => this.matchesFilter(rec[f], query));
     }
+    // Only the selectedObjects entries that actually match a currently selected
+    // value are pinned — anything stale/irrelevant is ignored.
+    selectedObjectEntries = computed(() => {
+        const vals = this.values();
+        return this.selectedObjects().filter((o) => vals.includes(this.getOptionValue(o)));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedObjectEntries" }] : /* istanbul ignore next */ []));
+    mergeSelected(base) {
+        const extras = this.selectedObjectEntries().filter((sel) => !base.some((o) => this.getOptionValue(o) === this.getOptionValue(sel)));
+        return extras.length ? [...extras, ...base] : base;
+    }
+    optionsWithSelected = computed(() => this.mergeSelected(this.options()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionsWithSelected" }] : /* istanbul ignore next */ []));
     filteredOptions = computed(() => {
-        const opts = this.options();
+        const opts = this.group() ? this.options() : this.optionsWithSelected();
         const q = this.filterText();
         if (!q)
             return opts;
@@ -4534,9 +4731,10 @@ class MultiSelectComponent {
     ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
     allLeafOptions = computed(() => {
         if (!this.group())
-            return this.options();
+            return this.optionsWithSelected();
         const groups = this.options();
-        return groups.flatMap((g) => g[this.optionGroupChildren()] ?? []);
+        const leaves = groups.flatMap((g) => g[this.optionGroupChildren()] ?? []);
+        return this.mergeSelected(leaves);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "allLeafOptions" }] : /* istanbul ignore next */ []));
     flatItems = computed(() => {
@@ -4632,10 +4830,6 @@ class MultiSelectComponent {
         this.onShow.emit();
         if (this.lazy())
             this.onLazyLoad.emit({ filter: this.filterText() });
-        if (this.appendTo() === 'body') {
-            this.position();
-            setTimeout(() => this.adjustForViewport(), 0);
-        }
     }
     closeList() {
         this._open.set(false);
@@ -4811,7 +5005,7 @@ class MultiSelectComponent {
     }
     setDisabledState() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: MultiSelectComponent, isStandalone: true, selector: "f-multiselect", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: true, isRequired: false, transformFunction: null }, filterMatchMode: { classPropertyName: "filterMatchMode", publicName: "filterMatchMode", isSignal: true, isRequired: false, transformFunction: null }, filterLocale: { classPropertyName: "filterLocale", publicName: "filterLocale", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, resetFilterOnHide: { classPropertyName: "resetFilterOnHide", publicName: "resetFilterOnHide", isSignal: true, isRequired: false, transformFunction: null }, autofocusFilter: { classPropertyName: "autofocusFilter", publicName: "autofocusFilter", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyFilterMessage: { classPropertyName: "emptyFilterMessage", publicName: "emptyFilterMessage", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: true, isRequired: false, transformFunction: null }, selectionLimit: { classPropertyName: "selectionLimit", publicName: "selectionLimit", isSignal: true, isRequired: false, transformFunction: null }, showToggleAll: { classPropertyName: "showToggleAll", publicName: "showToggleAll", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: true, isRequired: false, transformFunction: null }, dropdownIcon: { classPropertyName: "dropdownIcon", publicName: "dropdownIcon", isSignal: true, isRequired: false, transformFunction: null }, clearIcon: { classPropertyName: "clearIcon", publicName: "clearIcon", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, optionGroupLabel: { classPropertyName: "optionGroupLabel", publicName: "optionGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, optionGroupChildren: { classPropertyName: "optionGroupChildren", publicName: "optionGroupChildren", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onChange: "onChange", onFilter: "onFilter", onShow: "onShow", onHide: "onHide", onClear: "onClear", onLazyLoad: "onLazyLoad", onSelectAllChange: "onSelectAllChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "hostClass()", "style": "style()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: MultiSelectComponent, isStandalone: true, selector: "f-multiselect", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: true, isRequired: false, transformFunction: null }, filterMatchMode: { classPropertyName: "filterMatchMode", publicName: "filterMatchMode", isSignal: true, isRequired: false, transformFunction: null }, filterLocale: { classPropertyName: "filterLocale", publicName: "filterLocale", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, resetFilterOnHide: { classPropertyName: "resetFilterOnHide", publicName: "resetFilterOnHide", isSignal: true, isRequired: false, transformFunction: null }, autofocusFilter: { classPropertyName: "autofocusFilter", publicName: "autofocusFilter", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyFilterMessage: { classPropertyName: "emptyFilterMessage", publicName: "emptyFilterMessage", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: true, isRequired: false, transformFunction: null }, selectionLimit: { classPropertyName: "selectionLimit", publicName: "selectionLimit", isSignal: true, isRequired: false, transformFunction: null }, showToggleAll: { classPropertyName: "showToggleAll", publicName: "showToggleAll", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: true, isRequired: false, transformFunction: null }, dropdownIcon: { classPropertyName: "dropdownIcon", publicName: "dropdownIcon", isSignal: true, isRequired: false, transformFunction: null }, clearIcon: { classPropertyName: "clearIcon", publicName: "clearIcon", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, optionGroupLabel: { classPropertyName: "optionGroupLabel", publicName: "optionGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, optionGroupChildren: { classPropertyName: "optionGroupChildren", publicName: "optionGroupChildren", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, selectedObjects: { classPropertyName: "selectedObjects", publicName: "selectedObjects", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onChange: "onChange", onFilter: "onFilter", onShow: "onShow", onHide: "onHide", onClear: "onClear", onLazyLoad: "onLazyLoad", onSelectAllChange: "onSelectAllChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "hostClass()", "style": "style()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MultiSelectComponent),
@@ -4972,7 +5166,7 @@ class MultiSelectComponent {
             [id]="listId()"
             role="listbox"
             [attr.aria-multiselectable]="true"
-            class="max-h-56 overflow-auto py-1"
+            class="flex-1 min-h-0 max-h-56 overflow-auto py-1"
           >
             @if (loading()) {
               @if (loaderTpl()) {
@@ -5275,7 +5469,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             [id]="listId()"
             role="listbox"
             [attr.aria-multiselectable]="true"
-            class="max-h-56 overflow-auto py-1"
+            class="flex-1 min-h-0 max-h-56 overflow-auto py-1"
           >
             @if (loading()) {
               @if (loaderTpl()) {
@@ -5406,7 +5600,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     </ng-template>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { _triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], _filterInputRef: [{ type: i0.ViewChild, args: ['filterInput', { isSignal: true }] }], _panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterBy", required: false }] }], filterMatchMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMatchMode", required: false }] }], filterLocale: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLocale", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], resetFilterOnHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetFilterOnHide", required: false }] }], autofocusFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocusFilter", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], emptyFilterMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyFilterMessage", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], maxSelectedLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedLabels", required: false }] }], selectionLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionLimit", required: false }] }], showToggleAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggleAll", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingIcon", required: false }] }], dropdownIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownIcon", required: false }] }], clearIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearIcon", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], optionGroupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupLabel", required: false }] }], optionGroupChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupChildren", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualScrollItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollItemSize", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onChange: [{ type: i0.Output, args: ["onChange"] }], onFilter: [{ type: i0.Output, args: ["onFilter"] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], onLazyLoad: [{ type: i0.Output, args: ["onLazyLoad"] }], onSelectAllChange: [{ type: i0.Output, args: ["onSelectAllChange"] }], selectedItemRef: [{ type: i0.ContentChild, args: ['selectedItem', { isSignal: true }] }], itemRef: [{ type: i0.ContentChild, args: ['item', { isSignal: true }] }], groupRef: [{ type: i0.ContentChild, args: ['group', { isSignal: true }] }], headerRef: [{ type: i0.ContentChild, args: ['header', { isSignal: true }] }], footerRef: [{ type: i0.ContentChild, args: ['footer', { isSignal: true }] }], emptyRef: [{ type: i0.ContentChild, args: ['empty', { isSignal: true }] }], emptyFilterRef: [{ type: i0.ContentChild, args: ['emptyfilter', { isSignal: true }] }], loaderRef: [{ type: i0.ContentChild, args: ['loader', { isSignal: true }] }], filterRef: [{ type: i0.ContentChild, args: ['filter', { isSignal: true }] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { _triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], _filterInputRef: [{ type: i0.ViewChild, args: ['filterInput', { isSignal: true }] }], _panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterBy", required: false }] }], filterMatchMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMatchMode", required: false }] }], filterLocale: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLocale", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], resetFilterOnHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetFilterOnHide", required: false }] }], autofocusFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocusFilter", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], emptyFilterMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyFilterMessage", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], maxSelectedLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedLabels", required: false }] }], selectionLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionLimit", required: false }] }], showToggleAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggleAll", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingIcon", required: false }] }], dropdownIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownIcon", required: false }] }], clearIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearIcon", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], optionGroupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupLabel", required: false }] }], optionGroupChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupChildren", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualScrollItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollItemSize", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], selectedObjects: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedObjects", required: false }] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onChange: [{ type: i0.Output, args: ["onChange"] }], onFilter: [{ type: i0.Output, args: ["onFilter"] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], onLazyLoad: [{ type: i0.Output, args: ["onLazyLoad"] }], onSelectAllChange: [{ type: i0.Output, args: ["onSelectAllChange"] }], selectedItemRef: [{ type: i0.ContentChild, args: ['selectedItem', { isSignal: true }] }], itemRef: [{ type: i0.ContentChild, args: ['item', { isSignal: true }] }], groupRef: [{ type: i0.ContentChild, args: ['group', { isSignal: true }] }], headerRef: [{ type: i0.ContentChild, args: ['header', { isSignal: true }] }], footerRef: [{ type: i0.ContentChild, args: ['footer', { isSignal: true }] }], emptyRef: [{ type: i0.ContentChild, args: ['empty', { isSignal: true }] }], emptyFilterRef: [{ type: i0.ContentChild, args: ['emptyfilter', { isSignal: true }] }], loaderRef: [{ type: i0.ContentChild, args: ['loader', { isSignal: true }] }], filterRef: [{ type: i0.ContentChild, args: ['filter', { isSignal: true }] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }] } });
 
 class CheckboxComponent {
     label = input('', /* @ts-ignore */
@@ -6803,13 +6997,22 @@ class InputIconComponent {
         const sideClass = this._resolvedPosition() === 'right'
             ? 'right-(--f-field-padding-x)'
             : 'left-(--f-field-padding-x)';
-        return `absolute ${sideClass} top-1/2 -translate-y-1/2 text-(--f-form-field-placeholder-color) ${this.styleClass()}`;
+        // `position: absolute` blockifies this custom element, so its single
+        // inline-flex child (`ui-icon`) would otherwise sit in a line box using
+        // the browser's default baseline alignment, not true geometric centering
+        // — inline-flex + items-center makes this element itself a flex
+        // container so the icon centers against the box's real vertical
+        // midpoint instead of ambient font baseline metrics.
+        // Geometric center lands 1px low for a search-glass-shaped icon next to
+        // text (its visual weight sits toward the bottom via the handle stroke),
+        // so nudge up 1px for correct optical alignment.
+        return `absolute inline-flex items-center ${sideClass} top-1/2 -translate-y-[calc(50%+1px)] text-(--f-form-field-placeholder-color) ${this.styleClass()}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: InputIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: InputIconComponent, isStandalone: true, selector: "f-inputicon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClass()", "style": "style()" } }, ngImport: i0, template: `
     @if (icon()) {
-      <ui-icon [name]="icon()"></ui-icon>
+      <ui-icon [name]="icon()" [size]="17"></ui-icon>
     }
     <ng-content />
   `, isInline: true, dependencies: [{ kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }] });
@@ -6822,7 +7025,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                     host: { '[class]': 'hostClass()', '[style]': 'style()' },
                     template: `
     @if (icon()) {
-      <ui-icon [name]="icon()"></ui-icon>
+      <ui-icon [name]="icon()" [size]="17"></ui-icon>
     }
     <ng-content />
   `,
@@ -6881,14 +7084,20 @@ class PopoverComponent {
     _visible = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_visible" }] : /* istanbul ignore next */ []));
     visible = this._visible.asReadonly();
-    _top = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_top" }] : /* istanbul ignore next */ []));
-    top = this._top.asReadonly();
-    _left = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_left" }] : /* istanbul ignore next */ []));
-    left = this._left.asReadonly();
     panelRef = viewChild('panel', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
+    _placement = overlayPosition({
+        active: () => this.visible() && this.appendTo() === 'body',
+        anchor: () => this._anchor,
+        panel: () => this.panelRef()?.nativeElement,
+        options: () => ({ gap: 6 }),
+    });
+    top = computed(() => this._placement()?.top ?? 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "top" }] : /* istanbul ignore next */ []));
+    left = computed(() => this._placement()?.left ?? 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "left" }] : /* istanbul ignore next */ []));
+    maxHeight = computed(() => this._placement()?.maxHeight ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
     _anchor = null;
     _previouslyFocused = null;
     _windowWidth = signal(typeof window !== 'undefined' ? window.innerWidth : Number.POSITIVE_INFINITY, /* @ts-ignore */
@@ -6917,7 +7126,7 @@ class PopoverComponent {
     // positioning, which already escapes ancestor overflow clipping without a real
     // DOM reparent.
     panelClass = computed(() => {
-        const position = this.appendTo() === 'self' ? 'absolute top-full left-0 mt-1.5' : 'fixed';
+        const position = this.appendTo() === 'self' ? 'absolute top-full left-0 mt-1.5' : 'fixed overflow-auto';
         return `popover-panel ${position} z-50 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay min-w-48 max-w-sm ${this.styleClass()}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
@@ -6927,7 +7136,6 @@ class PopoverComponent {
                 .pipe(takeUntilDestroyed())
                 .subscribe(() => this._windowWidth.set(window.innerWidth));
         }
-        repositionOnScroll(() => this.visible() && this.appendTo() === 'body', () => { this.position(); this.adjustForViewport(); });
     }
     toggle(event) {
         this._anchor = event.target;
@@ -6943,11 +7151,9 @@ class PopoverComponent {
     }
     showInternal() {
         this._previouslyFocused = typeof document !== 'undefined' ? document.activeElement : null;
-        this.position();
         this._visible.set(true);
         this.onShow.emit();
         setTimeout(() => {
-            this.adjustForViewport();
             if (this.focusOnShow())
                 this.focusPanel();
         }, 0);
@@ -6968,32 +7174,6 @@ class PopoverComponent {
         const focusable = panelEl.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
         (focusable ?? panelEl).focus();
     }
-    position() {
-        if (!this._anchor || this.appendTo() === 'self')
-            return;
-        const rect = this._anchor.getBoundingClientRect();
-        const gap = 6;
-        let top = rect.bottom + gap;
-        let left = rect.left;
-        if (typeof window !== 'undefined') {
-            left = Math.min(left, window.innerWidth - 200 - 8);
-        }
-        this._top.set(top);
-        this._left.set(Math.max(8, left));
-    }
-    adjustForViewport() {
-        if (this.appendTo() === 'self')
-            return;
-        const panelEl = this.panelRef()?.nativeElement;
-        if (!panelEl || !this._anchor || typeof window === 'undefined')
-            return;
-        const anchorRect = this._anchor.getBoundingClientRect();
-        const panelRect = panelEl.getBoundingClientRect();
-        const gap = 6;
-        if (anchorRect.bottom + panelRect.height + gap > window.innerHeight) {
-            this._top.set(Math.max(8, anchorRect.top - panelRect.height - gap));
-        }
-    }
     onCloseIconClick(event) {
         event.stopPropagation();
         this.hide();
@@ -7020,6 +7200,7 @@ class PopoverComponent {
         [style]="panelStyle()"
         [style.top.px]="appendTo() === 'body' ? top() : null"
         [style.left.px]="appendTo() === 'body' ? left() : null"
+        [style.max-height.px]="appendTo() === 'body' ? maxHeight() : null"
         (click)="$event.stopPropagation()"
       >
         @if (showCloseIcon()) {
@@ -7055,6 +7236,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
         [style]="panelStyle()"
         [style.top.px]="appendTo() === 'body' ? top() : null"
         [style.left.px]="appendTo() === 'body' ? left() : null"
+        [style.max-height.px]="appendTo() === 'body' ? maxHeight() : null"
         (click)="$event.stopPropagation()"
       >
         @if (showCloseIcon()) {
@@ -9213,7 +9395,7 @@ const CLOSE_ANIMATION_MS$1 = 180;
 const FOCUSABLE_SELECTOR$2 = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 class DialogComponent {
     static idCounter = 0;
-    _doc = inject(DOCUMENT);
+    _overlayStack = inject(OverlayStackService);
     headerId = `f-dialog-header-${++DialogComponent.idCounter}`;
     header = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
@@ -9332,9 +9514,13 @@ class DialogComponent {
     _closing = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_closing" }] : /* istanbul ignore next */ []));
     closing = this._closing.asReadonly();
+    _zIndex = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_zIndex" }] : /* istanbul ignore next */ []));
+    zIndex = this._zIndex.asReadonly();
     panelRef = viewChild('panel', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
     _previouslyFocused = null;
+    _scrollLocked = false;
     constructor() {
         if (typeof window !== 'undefined') {
             fromEvent(window, 'resize')
@@ -9346,19 +9532,24 @@ class DialogComponent {
             if (visible) {
                 this._closing.set(false);
                 this._rendered.set(true);
+                this._zIndex.set(this._overlayStack.open());
                 this._previouslyFocused =
                     typeof document !== 'undefined'
                         ? document.activeElement
                         : null;
-                if (this.modal() || this.blockScroll())
-                    this._doc.body.style.overflow = 'hidden';
+                if (this.modal() || this.blockScroll()) {
+                    this._overlayStack.lockScroll();
+                    this._scrollLocked = true;
+                }
                 this.onShow.emit();
                 setTimeout(() => this.focusPanel(), 0);
             }
             else if (this._rendered()) {
                 this._closing.set(true);
-                if (this.modal() || this.blockScroll())
-                    this._doc.body.style.overflow = '';
+                if (this._scrollLocked) {
+                    this._overlayStack.unlockScroll();
+                    this._scrollLocked = false;
+                }
                 if (this.returnFocusOnClose())
                     this._previouslyFocused?.focus();
                 this._previouslyFocused = null;
@@ -9368,9 +9559,16 @@ class DialogComponent {
                 setTimeout(() => {
                     this._rendered.set(false);
                     this._closing.set(false);
+                    this._zIndex.set(null);
                 }, CLOSE_ANIMATION_MS$1);
             }
         });
+        inject(DestroyRef).onDestroy(() => {
+            if (this._scrollLocked) {
+                this._overlayStack.unlockScroll();
+                this._scrollLocked = false;
+            }
+        });
     }
     onEscape() {
         if (this.visible() && this.closable() && this.closeOnEscape())
@@ -9488,7 +9686,8 @@ class DialogComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: DialogComponent, isStandalone: true, selector: "f-dialog", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, dismissableMask: { classPropertyName: "dismissableMask", publicName: "dismissableMask", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, maximizable: { classPropertyName: "maximizable", publicName: "maximizable", isSignal: true, isRequired: false, transformFunction: null }, blockScroll: { classPropertyName: "blockScroll", publicName: "blockScroll", isSignal: true, isRequired: false, transformFunction: null }, returnFocusOnClose: { classPropertyName: "returnFocusOnClose", publicName: "returnFocusOnClose", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, breakpoints: { classPropertyName: "breakpoints", publicName: "breakpoints", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", onShow: "onShow", onHide: "onHide", onMaximize: "onMaximize" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "headerRef", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["footer"], descendants: true, isSignal: true }, { propertyName: "fTemplates", predicate: FTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (rendered()) {
       <div
-        class="fixed inset-0 z-999 flex p-4"
+        class="fixed inset-0 flex p-4"
+        [style.z-index]="zIndex()"
         [class]="containerPositionClass()"
         [class.pointer-events-none]="!modal()"
       >
@@ -9579,7 +9778,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             args: [{ selector: 'f-dialog', imports: [NgTemplateOutlet, UiIconComponent], host: { '(document:keydown.escape)': 'onEscape()' }, template: `
     @if (rendered()) {
       <div
-        class="fixed inset-0 z-999 flex p-4"
+        class="fixed inset-0 flex p-4"
+        [style.z-index]="zIndex()"
         [class]="containerPositionClass()"
         [class.pointer-events-none]="!modal()"
       >
@@ -9670,7 +9870,7 @@ const CLOSE_ANIMATION_MS = 200;
 const FOCUSABLE_SELECTOR$1 = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 class DrawerComponent {
     static idCounter = 0;
-    _doc = inject(DOCUMENT);
+    _overlayStack = inject(OverlayStackService);
     headerId = `f-drawer-header-${++DrawerComponent.idCounter}`;
     header = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
@@ -9743,36 +9943,52 @@ class DrawerComponent {
     _closing = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_closing" }] : /* istanbul ignore next */ []));
     closing = this._closing.asReadonly();
+    _zIndex = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_zIndex" }] : /* istanbul ignore next */ []));
+    zIndex = this._zIndex.asReadonly();
     panelRef = viewChild('panel', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
     _previouslyFocused = null;
+    _scrollLocked = false;
     constructor() {
         effect(() => {
             if (this.visible()) {
                 this._closing.set(false);
                 this._rendered.set(true);
+                this._zIndex.set(this._overlayStack.open());
                 this._previouslyFocused =
                     typeof document !== 'undefined'
                         ? document.activeElement
                         : null;
-                if (this.modal() && this.blockScroll())
-                    this._doc.body.style.overflow = 'hidden';
+                if (this.modal() && this.blockScroll()) {
+                    this._overlayStack.lockScroll();
+                    this._scrollLocked = true;
+                }
                 this.onShow.emit();
                 setTimeout(() => this.focusPanel(), 0);
             }
             else if (this._rendered()) {
                 this._closing.set(true);
-                if (this.modal() && this.blockScroll())
-                    this._doc.body.style.overflow = '';
+                if (this._scrollLocked) {
+                    this._overlayStack.unlockScroll();
+                    this._scrollLocked = false;
+                }
                 if (this.returnFocusOnClose())
                     this._previouslyFocused?.focus();
                 this._previouslyFocused = null;
                 setTimeout(() => {
                     this._rendered.set(false);
                     this._closing.set(false);
+                    this._zIndex.set(null);
                 }, CLOSE_ANIMATION_MS);
             }
         });
+        inject(DestroyRef).onDestroy(() => {
+            if (this._scrollLocked) {
+                this._overlayStack.unlockScroll();
+                this._scrollLocked = false;
+            }
+        });
     }
     onEscape() {
         if (this.visible() && this.closeOnEscape())
@@ -9821,7 +10037,8 @@ class DrawerComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: DrawerComponent, isStandalone: true, selector: "f-drawer", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, fullScreen: { classPropertyName: "fullScreen", publicName: "fullScreen", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, dismissable: { classPropertyName: "dismissable", publicName: "dismissable", isSignal: true, isRequired: false, transformFunction: null }, blockScroll: { classPropertyName: "blockScroll", publicName: "blockScroll", isSignal: true, isRequired: false, transformFunction: null }, returnFocusOnClose: { classPropertyName: "returnFocusOnClose", publicName: "returnFocusOnClose", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", onShow: "onShow", onHide: "onHide" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "block" }, queries: [{ propertyName: "headerRef", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["footer"], descendants: true, isSignal: true }, { propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "fTemplates", predicate: FTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (rendered()) {
       <div
-        class="fixed inset-0 z-999 flex"
+        class="fixed inset-0 flex"
+        [style.z-index]="zIndex()"
         [class.pointer-events-none]="!modal()"
       >
         @if (modal()) {
@@ -9889,7 +10106,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             args: [{ selector: 'f-drawer', imports: [UiIconComponent, NgTemplateOutlet], host: { class: 'block', '(document:keydown.escape)': 'onEscape()' }, template: `
     @if (rendered()) {
       <div
-        class="fixed inset-0 z-999 flex"
+        class="fixed inset-0 flex"
+        [style.z-index]="zIndex()"
         [class.pointer-events-none]="!modal()"
       >
         @if (modal()) {
@@ -11000,8 +11218,8 @@ class StepsComponent {
     } @else {
       <div role="tablist" [attr.aria-label]="ariaLabel()" [class]="'flex items-start w-full ' + styleClass()" [style]="style()">
         @for (item of model(); track $index; let i = $index; let last = $last) {
-          <div class="flex items-center" [class.flex-1]="!last">
-            <div class="flex flex-col items-center gap-2">
+          <div class="flex items-start min-w-0" [class.flex-1]="!last">
+            <div class="flex flex-col items-center gap-2 min-w-0">
               <button
                 #stepBtn
                 type="button"
@@ -11022,14 +11240,14 @@ class StepsComponent {
                 }
               </button>
               @if (item.label) {
-                <span class="text-xs whitespace-nowrap transition-all duration-[var(--f-transition-duration)] leading-tight text-center max-w-[80px]"
+                <span class="text-xs transition-all duration-[var(--f-transition-duration)] leading-tight text-center max-w-[120px] break-words"
                   [class]="i === activeIndex() ? 'font-semibold text-primary' : i < activeIndex() ? 'font-medium text-(--f-text-muted-color)' : 'text-(--f-text-muted-color)'">
                   {{ item.label }}
                 </span>
               }
             </div>
             @if (!last) {
-              <div class="flex-1 h-[1.5px] mx-3 -mt-4 rounded-full transition-all duration-[var(--f-transition-duration)]" [class]="i < activeIndex() ? 'bg-primary' : 'bg-(--f-content-border-color)'"></div>
+              <div class="flex-1 h-[1.5px] mx-3 mt-[15px] rounded-full transition-all duration-[var(--f-transition-duration)]" [class]="i < activeIndex() ? 'bg-primary' : 'bg-(--f-content-border-color)'"></div>
             }
           </div>
         }
@@ -11084,8 +11302,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     } @else {
       <div role="tablist" [attr.aria-label]="ariaLabel()" [class]="'flex items-start w-full ' + styleClass()" [style]="style()">
         @for (item of model(); track $index; let i = $index; let last = $last) {
-          <div class="flex items-center" [class.flex-1]="!last">
-            <div class="flex flex-col items-center gap-2">
+          <div class="flex items-start min-w-0" [class.flex-1]="!last">
+            <div class="flex flex-col items-center gap-2 min-w-0">
               <button
                 #stepBtn
                 type="button"
@@ -11106,14 +11324,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                 }
               </button>
               @if (item.label) {
-                <span class="text-xs whitespace-nowrap transition-all duration-[var(--f-transition-duration)] leading-tight text-center max-w-[80px]"
+                <span class="text-xs transition-all duration-[var(--f-transition-duration)] leading-tight text-center max-w-[120px] break-words"
                   [class]="i === activeIndex() ? 'font-semibold text-primary' : i < activeIndex() ? 'font-medium text-(--f-text-muted-color)' : 'text-(--f-text-muted-color)'">
                   {{ item.label }}
                 </span>
               }
             </div>
             @if (!last) {
-              <div class="flex-1 h-[1.5px] mx-3 -mt-4 rounded-full transition-all duration-[var(--f-transition-duration)]" [class]="i < activeIndex() ? 'bg-primary' : 'bg-(--f-content-border-color)'"></div>
+              <div class="flex-1 h-[1.5px] mx-3 mt-[15px] rounded-full transition-all duration-[var(--f-transition-duration)]" [class]="i < activeIndex() ? 'bg-primary' : 'bg-(--f-content-border-color)'"></div>
             }
           </div>
         }
@@ -14207,59 +14425,22 @@ class AutoCompleteComponent {
     ...(ngDevMode ? [{ debugName: "anchorRef" }] : /* istanbul ignore next */ []));
     panelRef = viewChild('panel', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
-    _panelTop = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_panelTop" }] : /* istanbul ignore next */ []));
-    _panelLeft = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_panelLeft" }] : /* istanbul ignore next */ []));
-    _panelWidth = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_panelWidth" }] : /* istanbul ignore next */ []));
+    _placement = overlayPosition({
+        active: () => this.open() && this.appendTo() === 'body',
+        anchor: () => this.anchorRef()?.nativeElement,
+        panel: () => this.panelRef()?.nativeElement,
+        options: () => ({ matchAnchorWidth: true }),
+    });
     panelClass = computed(() => {
         const position = this.appendTo() === 'body' ? 'fixed' : 'absolute w-full mt-1';
-        return `${position} z-50 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay overflow-hidden`;
+        return `${position} z-50 flex flex-col bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay overflow-hidden`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
-    panelStyle = computed(() => {
-        if (this.appendTo() !== 'body')
-            return {};
-        return {
-            top: `${this._panelTop()}px`,
-            left: `${this._panelLeft()}px`,
-            width: `${this._panelWidth()}px`,
-        };
-    }, /* @ts-ignore */
+    panelStyle = computed(() => this.appendTo() === 'body' ? overlayPlacementStyle(this._placement()) : {}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelStyle" }] : /* istanbul ignore next */ []));
-    position() {
-        const anchorEl = this.anchorRef()?.nativeElement;
-        if (!anchorEl || typeof window === 'undefined')
-            return;
-        const rect = anchorEl.getBoundingClientRect();
-        this._panelTop.set(rect.bottom + 4);
-        this._panelLeft.set(Math.max(8, rect.left));
-        this._panelWidth.set(rect.width);
-    }
-    adjustForViewport() {
-        const panelEl = this.panelRef()?.nativeElement;
-        const anchorEl = this.anchorRef()?.nativeElement;
-        if (!panelEl || !anchorEl || typeof window === 'undefined')
-            return;
-        const anchorRect = anchorEl.getBoundingClientRect();
-        const panelRect = panelEl.getBoundingClientRect();
-        const gap = 4;
-        this._panelLeft.set(Math.max(8, Math.min(anchorRect.left, window.innerWidth - panelRect.width - 8)));
-        if (anchorRect.bottom + panelRect.height + gap > window.innerHeight) {
-            this._panelTop.set(Math.max(8, anchorRect.top - panelRect.height - gap));
-        }
-    }
     openPanel() {
-        if (this.appendTo() === 'body') {
-            this.position();
-            setTimeout(() => this.adjustForViewport(), 0);
-        }
         this._open.set(true);
     }
-    constructor() {
-        repositionOnScroll(() => this.open() && this.appendTo() === 'body', () => { this.position(); this.adjustForViewport(); });
-    }
     onDocumentClick(e) {
         if (this.open() && !this._el.nativeElement.contains(e.target)) {
             this._open.set(false);
@@ -14291,7 +14472,7 @@ class AutoCompleteComponent {
     ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
     style = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
-    appendTo = input('self', /* @ts-ignore */
+    appendTo = input('body', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
     virtualScroll = input(false, { ...(ngDevMode ? { debugName: "virtualScroll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     virtualScrollItemSize = input(38, { ...(ngDevMode ? { debugName: "virtualScrollItemSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
@@ -14763,7 +14944,7 @@ class AutoCompleteComponent {
           } @else {
             <ul
               [id]="listboxId"
-              class="overflow-auto py-1"
+              class="flex-1 min-h-0 max-h-64 overflow-auto py-1"
               [style.max-height]="scrollHeight()"
               role="listbox"
               [attr.aria-multiselectable]="multiple()"
@@ -15031,7 +15212,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
           } @else {
             <ul
               [id]="listboxId"
-              class="overflow-auto py-1"
+              class="flex-1 min-h-0 max-h-64 overflow-auto py-1"
               [style.max-height]="scrollHeight()"
               role="listbox"
               [attr.aria-multiselectable]="multiple()"
@@ -15093,7 +15274,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     </div>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { anchorRef: [{ type: i0.ViewChild, args: ['anchor', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdown", required: false }] }], forceSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceSelection", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], completeOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "completeOnFocus", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingIcon", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualScrollItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollItemSize", required: false }] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], optionGroupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupLabel", required: false }] }], optionGroupChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupChildren", required: false }] }], completeMethod: [{ type: i0.Output, args: ["completeMethod"] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onUnselect: [{ type: i0.Output, args: ["onUnselect"] }], onDropdownClick: [{ type: i0.Output, args: ["onDropdownClick"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], focusEvent: [{ type: i0.Output, args: ["focusEvent"] }], blurEvent: [{ type: i0.Output, args: ["blurEvent"] }], onChange: [{ type: i0.Output, args: ["onChange"] }], onLazyLoad: [{ type: i0.Output, args: ["onLazyLoad"] }], itemRef: [{ type: i0.ContentChild, args: ['item', { isSignal: true }] }], groupRef: [{ type: i0.ContentChild, args: ['group', { isSignal: true }] }], headerRef: [{ type: i0.ContentChild, args: ['header', { isSignal: true }] }], footerRef: [{ type: i0.ContentChild, args: ['footer', { isSignal: true }] }], emptyRef: [{ type: i0.ContentChild, args: ['empty', { isSignal: true }] }], selectedItemRef: [{ type: i0.ContentChild, args: ['selectedItem', { isSignal: true }] }], loaderRef: [{ type: i0.ContentChild, args: ['loader', { isSignal: true }] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }] } });
+        }], propDecorators: { anchorRef: [{ type: i0.ViewChild, args: ['anchor', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdown", required: false }] }], forceSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceSelection", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], completeOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "completeOnFocus", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingIcon", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualScrollItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollItemSize", required: false }] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], optionGroupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupLabel", required: false }] }], optionGroupChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupChildren", required: false }] }], completeMethod: [{ type: i0.Output, args: ["completeMethod"] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onUnselect: [{ type: i0.Output, args: ["onUnselect"] }], onDropdownClick: [{ type: i0.Output, args: ["onDropdownClick"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], focusEvent: [{ type: i0.Output, args: ["focusEvent"] }], blurEvent: [{ type: i0.Output, args: ["blurEvent"] }], onChange: [{ type: i0.Output, args: ["onChange"] }], onLazyLoad: [{ type: i0.Output, args: ["onLazyLoad"] }], itemRef: [{ type: i0.ContentChild, args: ['item', { isSignal: true }] }], groupRef: [{ type: i0.ContentChild, args: ['group', { isSignal: true }] }], headerRef: [{ type: i0.ContentChild, args: ['header', { isSignal: true }] }], footerRef: [{ type: i0.ContentChild, args: ['footer', { isSignal: true }] }], emptyRef: [{ type: i0.ContentChild, args: ['empty', { isSignal: true }] }], selectedItemRef: [{ type: i0.ContentChild, args: ['selectedItem', { isSignal: true }] }], loaderRef: [{ type: i0.ContentChild, args: ['loader', { isSignal: true }] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }] } });
 
 function hexToRgb(hex) {
     const clean = hex.replace('#', '');
@@ -16037,15 +16218,18 @@ class SplitButtonComponent {
     _open = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_open" }] : /* istanbul ignore next */ []));
     open = this._open.asReadonly();
-    _menuTop = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_menuTop" }] : /* istanbul ignore next */ []));
-    _menuLeft = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_menuLeft" }] : /* istanbul ignore next */ []));
-    menuTop = this._menuTop.asReadonly();
-    menuLeft = this._menuLeft.asReadonly();
-    constructor() {
-        repositionOnScroll(() => this.open() && this.appendTo() === 'body', () => { this.positionMenu(); this.adjustMenuForViewport(); });
-    }
+    _placement = overlayPosition({
+        active: () => this.open() && this.appendTo() === 'body',
+        anchor: () => this._group()?.nativeElement,
+        panel: () => this._menuPanel()?.nativeElement,
+        options: () => ({ align: 'end' }),
+    });
+    menuTop = computed(() => this._placement()?.top ?? 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuTop" }] : /* istanbul ignore next */ []));
+    menuLeft = computed(() => this._placement()?.left ?? 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuLeft" }] : /* istanbul ignore next */ []));
+    menuMaxHeight = computed(() => this._placement()?.maxHeight ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuMaxHeight" }] : /* istanbul ignore next */ []));
     groupClass = computed(() => {
         const shape = this.rounded() ? 'rounded-full' : 'rounded-lg';
         const raisedCls = this.raised() ? 'shadow-md' : '';
@@ -16069,7 +16253,7 @@ class SplitButtonComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dropdownClass" }] : /* istanbul ignore next */ []));
     menuPanelClass = computed(() => {
-        const base = 'z-50 min-w-[10rem] bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay overflow-hidden';
+        const base = 'z-50 flex flex-col min-w-[10rem] bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay overflow-hidden';
         const position = this.appendTo() === 'body' ? 'fixed' : 'absolute right-0 top-full mt-1';
         return `${position} ${base} ${this.menuStyleClass()}`;
     }, /* @ts-ignore */
@@ -16148,10 +16332,6 @@ class SplitButtonComponent {
         if (this.open())
             return;
         this._open.set(true);
-        if (this.appendTo() === 'body') {
-            this.positionMenu();
-            queueMicrotask(() => this.adjustMenuForViewport());
-        }
         this.onShow.emit();
     }
     close(returnFocus) {
@@ -16172,29 +16352,6 @@ class SplitButtonComponent {
         const target = index === -1 ? items[items.length - 1] : items[index];
         target?.focus();
     }
-    positionMenu() {
-        const anchor = this._group()?.nativeElement;
-        if (!anchor || typeof window === 'undefined')
-            return;
-        const rect = anchor.getBoundingClientRect();
-        this._menuTop.set(rect.bottom + 4);
-        this._menuLeft.set(Math.max(8, rect.right - 160));
-    }
-    adjustMenuForViewport() {
-        const anchor = this._group()?.nativeElement;
-        const panel = this._menuPanel()?.nativeElement;
-        if (!anchor || !panel || typeof window === 'undefined')
-            return;
-        const anchorRect = anchor.getBoundingClientRect();
-        const panelRect = panel.getBoundingClientRect();
-        const gap = 4;
-        let left = anchorRect.right - panelRect.width;
-        left = Math.max(8, Math.min(left, window.innerWidth - panelRect.width - 8));
-        this._menuLeft.set(left);
-        if (anchorRect.bottom + panelRect.height + gap > window.innerHeight) {
-            this._menuTop.set(Math.max(8, anchorRect.top - panelRect.height - gap));
-        }
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: SplitButtonComponent, isStandalone: true, selector: "f-splitbutton", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", 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 }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, iconPos: { classPropertyName: "iconPos", publicName: "iconPos", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, menuStyleClass: { classPropertyName: "menuStyleClass", publicName: "menuStyleClass", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, dropdownIcon: { classPropertyName: "dropdownIcon", publicName: "dropdownIcon", isSignal: true, isRequired: false, transformFunction: null }, expandAriaLabel: { classPropertyName: "expandAriaLabel", publicName: "expandAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick", onDropdownClick: "onDropdownClick", onShow: "onShow", onHide: "onHide" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "inline-flex" }, viewQueries: [{ propertyName: "_group", first: true, predicate: ["group"], descendants: true, isSignal: true }, { propertyName: "_dropdownBtn", first: true, predicate: ["dropdownButton"], descendants: true, isSignal: true }, { propertyName: "_menuPanel", first: true, predicate: ["menuPanel"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="relative inline-flex" [class.opacity-60]="disabled()" [class.pointer-events-none]="disabled()">
@@ -16234,11 +16391,12 @@ class SplitButtonComponent {
           [class]="menuPanelClass()"
           [style.top.px]="appendTo() === 'body' ? menuTop() : null"
           [style.left.px]="appendTo() === 'body' ? menuLeft() : null"
+          [style.max-height.px]="appendTo() === 'body' ? menuMaxHeight() : null"
           role="menu"
           [attr.aria-label]="expandAriaLabel() || null"
           (keydown)="onMenuKeydown($event)"
         >
-          <ul class="py-1">
+          <ul class="flex-1 min-h-0 overflow-auto py-1">
             @for (item of model(); track $index) {
               @if (item.separator) {
                 <li role="separator" class="my-1 border-t border-(--f-content-border-color)"></li>
@@ -16316,11 +16474,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
           [class]="menuPanelClass()"
           [style.top.px]="appendTo() === 'body' ? menuTop() : null"
           [style.left.px]="appendTo() === 'body' ? menuLeft() : null"
+          [style.max-height.px]="appendTo() === 'body' ? menuMaxHeight() : null"
           role="menu"
           [attr.aria-label]="expandAriaLabel() || null"
           (keydown)="onMenuKeydown($event)"
         >
-          <ul class="py-1">
+          <ul class="flex-1 min-h-0 overflow-auto py-1">
             @for (item of model(); track $index) {
               @if (item.separator) {
                 <li role="separator" class="my-1 border-t border-(--f-content-border-color)"></li>
@@ -16351,7 +16510,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     </div>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { _group: [{ type: i0.ViewChild, args: ['group', { isSignal: true }] }], _dropdownBtn: [{ type: i0.ViewChild, args: ['dropdownButton', { isSignal: true }] }], _menuPanel: [{ type: i0.ViewChild, args: ['menuPanel', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], raised: [{ type: i0.Input, args: [{ isSignal: true, alias: "raised", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], iconPos: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPos", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], menuStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuStyleClass", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], dropdownIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownIcon", required: false }] }], expandAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandAriaLabel", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }], onDropdownClick: [{ type: i0.Output, args: ["onDropdownClick"] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }] } });
+        }], propDecorators: { _group: [{ type: i0.ViewChild, args: ['group', { isSignal: true }] }], _dropdownBtn: [{ type: i0.ViewChild, args: ['dropdownButton', { isSignal: true }] }], _menuPanel: [{ type: i0.ViewChild, args: ['menuPanel', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], raised: [{ type: i0.Input, args: [{ isSignal: true, alias: "raised", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], iconPos: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPos", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], menuStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuStyleClass", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], dropdownIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownIcon", required: false }] }], expandAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandAriaLabel", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }], onDropdownClick: [{ type: i0.Output, args: ["onDropdownClick"] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }] } });
 
 let _uidCounter$2 = 0;
 function assignKey$2(node) {
@@ -16362,12 +16521,6 @@ function assignKey$2(node) {
 }
 class TreeSelectComponent {
     _el = inject(ElementRef);
-    constructor() {
-        repositionOnScroll(() => this.open() && this.appendTo() === 'body', () => {
-            this.position();
-            this.adjustForViewport();
-        });
-    }
     options = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     placeholder = input('Select', /* @ts-ignore */
@@ -16396,7 +16549,7 @@ class TreeSelectComponent {
     ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
     style = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
-    appendTo = input('self', /* @ts-ignore */
+    appendTo = input('body', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
     hostClass = computed(() => `block w-full ${this.styleClass()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
@@ -16404,49 +16557,19 @@ class TreeSelectComponent {
     ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
     panelRef = viewChild('panel', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
-    _panelTop = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_panelTop" }] : /* istanbul ignore next */ []));
-    _panelLeft = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_panelLeft" }] : /* istanbul ignore next */ []));
-    _panelWidth = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_panelWidth" }] : /* istanbul ignore next */ []));
+    _placement = overlayPosition({
+        active: () => this.open() && this.appendTo() === 'body',
+        anchor: () => this.triggerRef()?.nativeElement,
+        panel: () => this.panelRef()?.nativeElement,
+        options: () => ({ matchAnchorWidth: true }),
+    });
     panelClass = computed(() => {
         const position = this.appendTo() === 'body' ? 'fixed' : 'absolute w-full mt-1';
-        return `${position} z-50 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay overflow-hidden`;
+        return `${position} z-50 flex flex-col bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay overflow-hidden`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
-    panelStyle = computed(() => {
-        if (this.appendTo() !== 'body')
-            return {};
-        return {
-            top: `${this._panelTop()}px`,
-            left: `${this._panelLeft()}px`,
-            width: `${this._panelWidth()}px`,
-        };
-    }, /* @ts-ignore */
+    panelStyle = computed(() => this.appendTo() === 'body' ? overlayPlacementStyle(this._placement()) : {}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelStyle" }] : /* istanbul ignore next */ []));
-    position() {
-        const anchorEl = this.triggerRef()?.nativeElement;
-        if (!anchorEl || typeof window === 'undefined')
-            return;
-        const rect = anchorEl.getBoundingClientRect();
-        this._panelTop.set(rect.bottom + 4);
-        this._panelLeft.set(Math.max(8, rect.left));
-        this._panelWidth.set(rect.width);
-    }
-    adjustForViewport() {
-        const panelEl = this.panelRef()?.nativeElement;
-        const anchorEl = this.triggerRef()?.nativeElement;
-        if (!panelEl || !anchorEl || typeof window === 'undefined')
-            return;
-        const anchorRect = anchorEl.getBoundingClientRect();
-        const panelRect = panelEl.getBoundingClientRect();
-        const gap = 4;
-        this._panelLeft.set(Math.max(8, Math.min(anchorRect.left, window.innerWidth - panelRect.width - 8)));
-        if (anchorRect.bottom + panelRect.height + gap > window.innerHeight) {
-            this._panelTop.set(Math.max(8, anchorRect.top - panelRect.height - gap));
-        }
-    }
     _open = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_open" }] : /* istanbul ignore next */ []));
     open = this._open.asReadonly();
@@ -16578,10 +16701,6 @@ class TreeSelectComponent {
             this._onTouched();
             return;
         }
-        if (this.appendTo() === 'body') {
-            this.position();
-            setTimeout(() => this.adjustForViewport(), 0);
-        }
     }
     onTriggerKeyDown(e) {
         if (this.disabled())
@@ -16879,7 +16998,7 @@ class TreeSelectComponent {
               </ng-template>
             </f-scroller>
           } @else {
-            <div class="max-h-64 overflow-auto py-1" role="tree">
+            <div class="flex-1 min-h-0 max-h-64 overflow-auto py-1" role="tree">
               @for (row of visibleFlatNodes(); track row.key) {
                 <ng-container
                   [ngTemplateOutlet]="rowTpl"
@@ -17120,7 +17239,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
               </ng-template>
             </f-scroller>
           } @else {
-            <div class="max-h-64 overflow-auto py-1" role="tree">
+            <div class="flex-1 min-h-0 max-h-64 overflow-auto py-1" role="tree">
               @for (row of visibleFlatNodes(); track row.key) {
                 <ng-container
                   [ngTemplateOutlet]="rowTpl"
@@ -17207,7 +17326,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     </ng-template>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterBy", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], propagateSelectionDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "propagateSelectionDown", required: false }] }], propagateSelectionUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "propagateSelectionUp", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualScrollItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollItemSize", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], valueRef: [{ type: i0.ContentChild, args: ['value', { isSignal: true }] }], headerRef: [{ type: i0.ContentChild, args: ['header', { isSignal: true }] }], footerRef: [{ type: i0.ContentChild, args: ['footer', { isSignal: true }] }], emptyRef: [{ type: i0.ContentChild, args: ['empty', { isSignal: true }] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }] } });
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterBy", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], propagateSelectionDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "propagateSelectionDown", required: false }] }], propagateSelectionUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "propagateSelectionUp", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualScrollItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollItemSize", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], valueRef: [{ type: i0.ContentChild, args: ['value', { isSignal: true }] }], headerRef: [{ type: i0.ContentChild, args: ['header', { isSignal: true }] }], footerRef: [{ type: i0.ContentChild, args: ['footer', { isSignal: true }] }], emptyRef: [{ type: i0.ContentChild, args: ['empty', { isSignal: true }] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }] } });
 
 class OverlayBadgeComponent {
     value = input('', /* @ts-ignore */
@@ -17840,15 +17959,13 @@ class MenuComponent {
     _visible = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_visible" }] : /* istanbul ignore next */ []));
     visible = this._visible.asReadonly();
-    _top = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_top" }] : /* istanbul ignore next */ []));
-    _left = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_left" }] : /* istanbul ignore next */ []));
+    _placement = overlayPosition({
+        active: () => this.popup() && this.visible() && this.appendTo() === 'body',
+        anchor: () => this._anchor,
+        panel: () => this.containerRef()?.nativeElement,
+    });
     _openedAt = 0;
     _anchor = null;
-    constructor() {
-        repositionOnScroll(() => this.popup() && this.visible() && this.appendTo() === 'body', () => { this.position(); this.adjustForViewport(); });
-    }
     fTemplates = contentChildren(FTemplateDirective, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fTemplates" }] : /* istanbul ignore next */ []));
     namedTemplate(name) {
@@ -17868,13 +17985,13 @@ class MenuComponent {
             return `w-full bg-(--f-content-background) border border-(--f-content-border-color) rounded-lg overflow-hidden ${this.styleClass()}`;
         }
         const position = this.appendTo() === 'body' ? 'fixed' : 'absolute mt-1';
-        return `${position} z-50 shadow-lg ${base} ${this.styleClass()}`;
+        return `${position} z-50 flex flex-col shadow-lg ${base} ${this.styleClass()}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "containerClass" }] : /* istanbul ignore next */ []));
     containerStyle = computed(() => {
         const style = this.style() ?? {};
         if (this.popup() && this.appendTo() === 'body') {
-            return { ...style, top: `${this._top()}px`, left: `${this._left()}px` };
+            return { ...style, ...overlayPlacementStyle(this._placement()) };
         }
         return style;
     }, /* @ts-ignore */
@@ -17888,13 +18005,8 @@ class MenuComponent {
     show(event) {
         this._anchor = event?.currentTarget ?? null;
         this._openedAt = Date.now();
-        if (this.appendTo() === 'body')
-            this.position();
         this._visible.set(true);
         this.onShow.emit();
-        if (this.appendTo() === 'body') {
-            setTimeout(() => this.adjustForViewport(), 0);
-        }
     }
     hide() {
         if (!this._visible())
@@ -17902,27 +18014,6 @@ class MenuComponent {
         this._visible.set(false);
         this.onHide.emit();
     }
-    position() {
-        if (!this._anchor || typeof window === 'undefined')
-            return;
-        const rect = this._anchor.getBoundingClientRect();
-        this._top.set(rect.bottom + 4);
-        this._left.set(rect.left);
-    }
-    adjustForViewport() {
-        const el = this.containerRef()?.nativeElement;
-        if (!el || !this._anchor || typeof window === 'undefined')
-            return;
-        const anchorRect = this._anchor.getBoundingClientRect();
-        const panelRect = el.getBoundingClientRect();
-        const gap = 4;
-        let left = anchorRect.left;
-        left = Math.max(8, Math.min(left, window.innerWidth - panelRect.width - 8));
-        this._left.set(left);
-        if (anchorRect.bottom + panelRect.height + gap > window.innerHeight) {
-            this._top.set(Math.max(8, anchorRect.top - panelRect.height - gap));
-        }
-    }
     onDocumentClick(e) {
         if (Date.now() - this._openedAt < 50)
             return;
@@ -18058,7 +18149,7 @@ class MenuComponent {
             <ng-container [ngTemplateOutlet]="startTpl()" />
           </div>
         }
-        <ul class="py-1" role="menu" (keydown)="onKeydown($event)">
+        <ul class="flex-1 min-h-0 overflow-auto py-1" role="menu" (keydown)="onKeydown($event)">
           @if (hasGroups()) {
             @for (group of model(); track $index) {
               @if (group.separator) {
@@ -18174,7 +18265,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             <ng-container [ngTemplateOutlet]="startTpl()" />
           </div>
         }
-        <ul class="py-1" role="menu" (keydown)="onKeydown($event)">
+        <ul class="flex-1 min-h-0 overflow-auto py-1" role="menu" (keydown)="onKeydown($event)">
           @if (hasGroups()) {
             @for (group of model(); track $index) {
               @if (group.separator) {
@@ -18206,7 +18297,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     }
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { containerRef: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], popup: [{ type: i0.Input, args: [{ isSignal: true, alias: "popup", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }] } });
+        }], propDecorators: { containerRef: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], popup: [{ type: i0.Input, args: [{ isSignal: true, alias: "popup", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }] } });
 
 const SUBMENU_ESTIMATED_WIDTH$2 = 192;
 class MenubarComponent {
@@ -18827,12 +18918,17 @@ class TieredMenuComponent {
     _visible = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_visible" }] : /* istanbul ignore next */ []));
     visible = this._visible.asReadonly();
-    _top = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_top" }] : /* istanbul ignore next */ []));
-    top = this._top.asReadonly();
-    _left = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_left" }] : /* istanbul ignore next */ []));
-    left = this._left.asReadonly();
+    _placement = overlayPosition({
+        active: () => this.popup() && this.visible(),
+        anchor: () => this._anchor,
+        panel: () => this.containerRef()?.nativeElement,
+        // Submenus fly out of the container, so it must stay overflow-visible.
+        options: () => ({ clampHeight: false }),
+    });
+    top = computed(() => this._placement()?.top ?? 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "top" }] : /* istanbul ignore next */ []));
+    left = computed(() => this._placement()?.left ?? 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "left" }] : /* istanbul ignore next */ []));
     _openedAt = 0;
     _anchor = null;
     _activeItemPath = signal([], /* @ts-ignore */
@@ -18869,11 +18965,8 @@ class TieredMenuComponent {
         this._openedAt = Date.now();
         this._activeItemPath.set([]);
         this._flipByLevel.set({});
-        if (this._anchor)
-            this.position();
         this._visible.set(true);
         this.onShow.emit();
-        setTimeout(() => this.adjustForViewport(), 0);
     }
     hide() {
         if (!this._visible())
@@ -18882,27 +18975,6 @@ class TieredMenuComponent {
         this._activeItemPath.set([]);
         this.onHide.emit();
     }
-    position() {
-        if (!this._anchor || typeof window === 'undefined')
-            return;
-        const rect = this._anchor.getBoundingClientRect();
-        this._top.set(rect.bottom + 4);
-        this._left.set(rect.left);
-    }
-    adjustForViewport() {
-        const el = this.containerRef()?.nativeElement;
-        if (!el || !this._anchor || typeof window === 'undefined')
-            return;
-        const anchorRect = this._anchor.getBoundingClientRect();
-        const panelRect = el.getBoundingClientRect();
-        const gap = 4;
-        let left = anchorRect.left;
-        left = Math.max(8, Math.min(left, window.innerWidth - panelRect.width - 8));
-        this._left.set(left);
-        if (anchorRect.bottom + panelRect.height + gap > window.innerHeight) {
-            this._top.set(Math.max(8, anchorRect.top - panelRect.height - gap));
-        }
-    }
     isItemActive(item, level) {
         return this._activeItemPath()[level] === item;
     }
@@ -20678,8 +20750,12 @@ class SpeedDialComponent {
     onHide = output();
     onVisibleChange = output();
     _el = inject(ElementRef);
+    _overlayStack = inject(OverlayStackService);
     _toggleBtn = viewChild('toggleButton', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_toggleBtn" }] : /* istanbul ignore next */ []));
+    _maskZIndex = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_maskZIndex" }] : /* istanbul ignore next */ []));
+    maskZIndex = this._maskZIndex.asReadonly();
     hostClass = computed(() => `relative inline-flex ${this.styleClass()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
     effectiveRadius = computed(() => this.radius() || this.model().length * 20, /* @ts-ignore */
@@ -20749,6 +20825,8 @@ class SpeedDialComponent {
         if (this.visible() || this.disabled())
             return;
         this.visible.set(true);
+        if (this.mask())
+            this._maskZIndex.set(this._overlayStack.open());
         this.onVisibleChange.emit(true);
         this.onShow.emit();
     }
@@ -20756,6 +20834,7 @@ class SpeedDialComponent {
         if (!this.visible())
             return;
         this.visible.set(false);
+        this._maskZIndex.set(null);
         this.onVisibleChange.emit(false);
         this.onHide.emit();
     }
@@ -20818,7 +20897,8 @@ class SpeedDialComponent {
     </div>
     @if (mask() && visible()) {
       <div
-        class="fixed inset-0 z-999 bg-(--f-mask-background)"
+        class="fixed inset-0 bg-(--f-mask-background)"
+        [style.z-index]="maskZIndex()"
         (click)="hide()"
       ></div>
     }
@@ -20878,7 +20958,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     </div>
     @if (mask() && visible()) {
       <div
-        class="fixed inset-0 z-999 bg-(--f-mask-background)"
+        class="fixed inset-0 bg-(--f-mask-background)"
+        [style.z-index]="maskZIndex()"
         (click)="hide()"
       ></div>
     }
@@ -21857,12 +21938,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
 
 class CascadeSelectComponent {
     _el = inject(ElementRef);
-    constructor() {
-        repositionOnScroll(() => this.open() && this.appendTo() === 'body', () => {
-            this.position();
-            this.adjustForViewport();
-        });
-    }
     options = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     optionLabel = input('label', /* @ts-ignore */
@@ -21889,7 +21964,7 @@ class CascadeSelectComponent {
     ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
     style = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
-    appendTo = input('self', /* @ts-ignore */
+    appendTo = input('body', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
     hostClass = computed(() => `block w-full ${this.styleClass()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
@@ -21897,42 +21972,18 @@ class CascadeSelectComponent {
     ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
     panelRef = viewChild('panel', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
-    _panelTop = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_panelTop" }] : /* istanbul ignore next */ []));
-    _panelLeft = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_panelLeft" }] : /* istanbul ignore next */ []));
+    _placement = overlayPosition({
+        active: () => this.open() && this.appendTo() === 'body',
+        anchor: () => this.triggerRef()?.nativeElement,
+        panel: () => this.panelRef()?.nativeElement,
+    });
     panelClass = computed(() => {
         const position = this.appendTo() === 'body' ? 'fixed' : 'absolute mt-1';
         return `${position} z-50 flex bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay overflow-hidden`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
-    panelStyle = computed(() => {
-        if (this.appendTo() !== 'body')
-            return {};
-        return { top: `${this._panelTop()}px`, left: `${this._panelLeft()}px` };
-    }, /* @ts-ignore */
+    panelStyle = computed(() => this.appendTo() === 'body' ? overlayPlacementStyle(this._placement()) : {}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelStyle" }] : /* istanbul ignore next */ []));
-    position() {
-        const anchorEl = this.triggerRef()?.nativeElement;
-        if (!anchorEl || typeof window === 'undefined')
-            return;
-        const rect = anchorEl.getBoundingClientRect();
-        this._panelTop.set(rect.bottom + 4);
-        this._panelLeft.set(Math.max(8, rect.left));
-    }
-    adjustForViewport() {
-        const panelEl = this.panelRef()?.nativeElement;
-        const anchorEl = this.triggerRef()?.nativeElement;
-        if (!panelEl || !anchorEl || typeof window === 'undefined')
-            return;
-        const anchorRect = anchorEl.getBoundingClientRect();
-        const panelRect = panelEl.getBoundingClientRect();
-        const gap = 4;
-        this._panelLeft.set(Math.max(8, Math.min(anchorRect.left, window.innerWidth - panelRect.width - 8)));
-        if (anchorRect.bottom + panelRect.height + gap > window.innerHeight) {
-            this._panelTop.set(Math.max(8, anchorRect.top - panelRect.height - gap));
-        }
-    }
     _open = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_open" }] : /* istanbul ignore next */ []));
     open = this._open.asReadonly();
@@ -22040,10 +22091,6 @@ class CascadeSelectComponent {
             this._activePath.set([]);
             this._focusedPath.set([]);
         }
-        if (this.appendTo() === 'body') {
-            this.position();
-            setTimeout(() => this.adjustForViewport(), 0);
-        }
     }
     closePanel() {
         this._open.set(false);
@@ -22516,7 +22563,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     </div>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionChildren", required: false }] }], optionGroupChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupChildren", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], dropdownIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownIcon", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], valueRef: [{ type: i0.ContentChild, args: ['value', { isSignal: true }] }], optionRef: [{ type: i0.ContentChild, args: ['option', { isSignal: true }] }], groupRef: [{ type: i0.ContentChild, args: ['group', { isSignal: true }] }], emptyRef: [{ type: i0.ContentChild, args: ['empty', { isSignal: true }] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }] } });
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionChildren", required: false }] }], optionGroupChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupChildren", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], dropdownIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownIcon", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], valueRef: [{ type: i0.ContentChild, args: ['value', { isSignal: true }] }], optionRef: [{ type: i0.ContentChild, args: ['option', { isSignal: true }] }], groupRef: [{ type: i0.ContentChild, args: ['group', { isSignal: true }] }], emptyRef: [{ type: i0.ContentChild, args: ['empty', { isSignal: true }] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }] } });
 
 const PRESETS = {
     pint: /\d/,
@@ -22570,6 +22617,7 @@ class ConfirmPopupComponent {
     headerId = `f-confirmpopup-header-${++ConfirmPopupComponent.idCounter}`;
     descId = `f-confirmpopup-desc-${ConfirmPopupComponent.idCounter}`;
     confirmationService = inject(ConfirmationService);
+    _overlayStack = inject(OverlayStackService);
     key = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
     acceptLabel = input('', /* @ts-ignore */
@@ -22592,12 +22640,20 @@ class ConfirmPopupComponent {
     ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
     style = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
-    _top = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_top" }] : /* istanbul ignore next */ []));
-    top = this._top.asReadonly();
-    _left = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_left" }] : /* istanbul ignore next */ []));
-    left = this._left.asReadonly();
+    _placement = overlayPosition({
+        active: () => !!this.activeConfirmation()?.target,
+        anchor: () => this.activeConfirmation()?.target,
+        panel: () => this.panelRef()?.nativeElement,
+        // A confirm popup is short; clamping it could hide the action buttons.
+        options: () => ({ gap: 8, clampHeight: false }),
+    });
+    top = computed(() => this._placement()?.top ?? 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "top" }] : /* istanbul ignore next */ []));
+    left = computed(() => this._placement()?.left ?? 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "left" }] : /* istanbul ignore next */ []));
+    _zIndex = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_zIndex" }] : /* istanbul ignore next */ []));
+    zIndex = this._zIndex.asReadonly();
     panelRef = viewChild('panel', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
     activeConfirmation = computed(() => {
@@ -22611,10 +22667,10 @@ class ConfirmPopupComponent {
         effect(() => {
             const c = this.activeConfirmation();
             if (c?.target) {
-                this.position(c.target);
-                setTimeout(() => {
-                    this.adjustForViewport(c.target);
-                }, 0);
+                this._zIndex.set(this._overlayStack.open());
+            }
+            else {
+                this._zIndex.set(null);
             }
         });
         if (typeof window !== 'undefined') {
@@ -22641,28 +22697,6 @@ class ConfirmPopupComponent {
     resolvedRejectIcon(c) {
         return c.rejectIcon || this.rejectIcon();
     }
-    position(target) {
-        const rect = target.getBoundingClientRect?.();
-        if (!rect)
-            return;
-        const gap = 8;
-        let left = rect.left;
-        if (typeof window !== 'undefined')
-            left = Math.min(left, window.innerWidth - 288 - 8);
-        this._top.set(rect.bottom + gap);
-        this._left.set(Math.max(8, left));
-    }
-    adjustForViewport(target) {
-        const panelEl = this.panelRef()?.nativeElement;
-        const rect = target.getBoundingClientRect?.();
-        if (!panelEl || !rect || typeof window === 'undefined')
-            return;
-        const gap = 8;
-        const panelRect = panelEl.getBoundingClientRect();
-        if (rect.bottom + panelRect.height + gap > window.innerHeight) {
-            this._top.set(Math.max(8, rect.top - panelRect.height - gap));
-        }
-    }
     onEscape() {
         const c = this.activeConfirmation();
         const closeOnEscape = c?.closeOnEscape ?? this.closeOnEscape();
@@ -22717,11 +22751,12 @@ class ConfirmPopupComponent {
       @if (c.target) {
         <div
           #panel
-          class="confirmpopup-panel fixed z-50 w-72 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay p-4"
+          class="confirmpopup-panel fixed w-72 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay p-4"
           [class]="styleClass()"
           [style]="style()"
           [style.top.px]="top()"
           [style.left.px]="left()"
+          [style.z-index]="zIndex()"
           role="alertdialog"
           [attr.aria-labelledby]="c.header ? headerId : null"
           [attr.aria-describedby]="c.message ? descId : null"
@@ -22778,11 +22813,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
       @if (c.target) {
         <div
           #panel
-          class="confirmpopup-panel fixed z-50 w-72 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay p-4"
+          class="confirmpopup-panel fixed w-72 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay p-4"
           [class]="styleClass()"
           [style]="style()"
           [style.top.px]="top()"
           [style.left.px]="left()"
+          [style.z-index]="zIndex()"
           role="alertdialog"
           [attr.aria-labelledby]="c.header ? headerId : null"
           [attr.aria-describedby]="c.message ? descId : null"
@@ -22833,10 +22869,14 @@ class DynamicDialogRef {
     _closeFn;
     _onClose = new Subject();
     onClose = this._onClose.asObservable();
+    _closed = false;
     constructor(_closeFn) {
         this._closeFn = _closeFn;
     }
     close(result) {
+        if (this._closed)
+            return;
+        this._closed = true;
         this._onClose.next(result);
         this._onClose.complete();
         this._closeFn(result);
@@ -22846,17 +22886,24 @@ const DYNAMIC_DIALOG_DATA = new InjectionToken('DYNAMIC_DIALOG_DATA');
 const DYNAMIC_DIALOG_REF = new InjectionToken('DYNAMIC_DIALOG_REF');
 class DynamicDialogService {
     static idCounter = 0;
+    _overlayStack = inject(OverlayStackService);
     _states = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_states" }] : /* istanbul ignore next */ []));
     states = this._states.asReadonly();
     open(component, config = {}) {
         const id = ++DynamicDialogService.idCounter;
+        const zIndex = this._overlayStack.open();
+        const isModal = config.modal !== false;
+        if (isModal)
+            this._overlayStack.lockScroll();
         const ref = new DynamicDialogRef(() => {
+            if (isModal)
+                this._overlayStack.unlockScroll();
             this._states.update((list) => list.filter((s) => s.id !== id));
         });
         this._states.update((list) => [
             ...list,
-            { id, component, config, ref: ref },
+            { id, component, config, ref: ref, zIndex },
         ]);
         return ref;
     }
@@ -22874,7 +22921,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
 class DynamicDialogComponent {
     dialogService = inject(DynamicDialogService);
     _parentInjector = inject(Injector);
-    _doc = inject(DOCUMENT);
     injectorCache = new Map();
     constructor() {
         effect(() => {
@@ -22884,13 +22930,6 @@ class DynamicDialogComponent {
                     this.injectorCache.delete(id);
             }
         });
-        effect(() => {
-            const anyModal = this.dialogService.states().some((s) => s.config.modal !== false);
-            this._doc.body.style.overflow = anyModal ? 'hidden' : '';
-        });
-        inject(DestroyRef).onDestroy(() => {
-            this._doc.body.style.overflow = '';
-        });
     }
     childInjector(state) {
         let injector = this.injectorCache.get(state.id);
@@ -22929,8 +22968,8 @@ class DynamicDialogComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DynamicDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: DynamicDialogComponent, isStandalone: true, selector: "f-dynamicdialog", host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "block" }, ngImport: i0, template: `
-    @for (s of dialogService.states(); track s.id; let i = $index) {
-      <div class="fixed inset-0 flex items-center justify-center p-4" [class.pointer-events-none]="s.config.modal === false" [style.z-index]="40 + i * 2">
+    @for (s of dialogService.states(); track s.id) {
+      <div class="fixed inset-0 flex items-center justify-center p-4" [class.pointer-events-none]="s.config.modal === false" [style.z-index]="s.zIndex">
         @if (s.config.modal !== false) {
           <div
             class="dynamicdialog-backdrop absolute inset-0 bg-black/50 backdrop-blur-[2px]"
@@ -22975,8 +23014,8 @@ class DynamicDialogComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DynamicDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-dynamicdialog', imports: [NgComponentOutlet, UiIconComponent], host: { class: 'block', '(document:keydown.escape)': 'onEscape()' }, template: `
-    @for (s of dialogService.states(); track s.id; let i = $index) {
-      <div class="fixed inset-0 flex items-center justify-center p-4" [class.pointer-events-none]="s.config.modal === false" [style.z-index]="40 + i * 2">
+    @for (s of dialogService.states(); track s.id) {
+      <div class="fixed inset-0 flex items-center justify-center p-4" [class.pointer-events-none]="s.config.modal === false" [style.z-index]="s.zIndex">
         @if (s.config.modal !== false) {
           <div
             class="dynamicdialog-backdrop absolute inset-0 bg-black/50 backdrop-blur-[2px]"
@@ -27138,5 +27177,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AURA_PRESET, AccordionComponent, AccordionContentComponent, AccordionContext, AccordionHeaderComponent, AccordionPanelComponent, AnimateOnScrollDirective, AutoCompleteComponent, AutoFocusDirective, AvatarComponent, AvatarGroupComponent, BadgeComponent, BlockUiComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CardComponent, CarouselComponent, CascadeSelectComponent, ChartComponent, CheckboxComponent, ChipComponent, ColorPickerComponent, ConfirmDialog, ConfirmPopupComponent, ConfirmationService, ContextMenuComponent, DYNAMIC_DIALOG_DATA, DYNAMIC_DIALOG_REF, DataViewComponent, DatePickerComponent, DialogComponent, DividerComponent, DockComponent, DrawerComponent, DynamicDialogComponent, DynamicDialogRef, DynamicDialogService, EditorComponent, FButtonDirective, FTemplateDirective, FieldsetComponent, FileUploadComponent, FloatLabelComponent, FluidComponent, GalleriaComponent, IconFieldComponent, IftaLabelComponent, ImageCompareComponent, ImageComponent, InplaceComponent, InputGroupAddonComponent, InputGroupComponent, InputIconComponent, InputMaskDirective, InputNumberComponent, InputOtpComponent, InputPasswordDirective, InputTextDirective, KeyFilterDirective, KnobComponent, LARA_PRESET, ListboxComponent, MegaMenuComponent, MenuComponent, MenubarComponent, MessageComponent, MessageService, MeterGroupComponent, MultiSelectComponent, NOIR_PRIMARY, NORA_PRESET, NgUIConfig, OrderListComponent, OrganizationChartComponent, OverlayBadgeComponent, PRESETS$1 as PRESETS, PRESET_NAMES, PRIMARY_PALETTES, PaginatorComponent, PanelComponent, PanelMenuComponent, PasswordComponent, PickListComponent, PopoverComponent, ProgressSpinnerComponent, ProgressbarComponent, RadioButtonComponent, RatingComponent, RippleDirective, SURFACE_PALETTES, ScrollPanelComponent, ScrollTopComponent, ScrollerComponent, SelectButtonComponent, SelectComponent, SkeletonComponent, SliderComponent, SortIconComponent, SortableColumnDirective, SpeedDialComponent, SplitButtonComponent, SplitterComponent, SplitterPanelComponent, StepsComponent, StyleClassDirective, TabComponent, TabListComponent, TabPanelComponent, TabPanelsComponent, TableComponent, TabsComponent, TabsContext, TagComponent, TerminalComponent, TextareaDirective, TieredMenuComponent, TimelineComponent, ToastComponent, ToggleButtonComponent, ToggleSwitchComponent, ToolbarComponent, TooltipDirective, TreeComponent, TreeSelectComponent, TreeTableComponent, TreeTableService, TreeTableTogglerComponent, UiIconComponent, applyDarkSemantics, applyLightSemantics, applyPreset, applyPrimaryPalette, applySurfacePalette, applyTheme, buildBootstrapPreset, provideNgUI };
+export { AURA_PRESET, AccordionComponent, AccordionContentComponent, AccordionContext, AccordionHeaderComponent, AccordionPanelComponent, AnimateOnScrollDirective, AutoCompleteComponent, AutoFocusDirective, AvatarComponent, AvatarGroupComponent, BadgeComponent, BlockUiComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CardComponent, CarouselComponent, CascadeSelectComponent, ChartComponent, CheckboxComponent, ChipComponent, ColorPickerComponent, ConfirmDialog, ConfirmPopupComponent, ConfirmationService, ContextMenuComponent, DYNAMIC_DIALOG_DATA, DYNAMIC_DIALOG_REF, DataViewComponent, DatePickerComponent, DialogComponent, DividerComponent, DockComponent, DrawerComponent, DynamicDialogComponent, DynamicDialogRef, DynamicDialogService, EditorComponent, FButtonDirective, FTemplateDirective, FieldsetComponent, FileUploadComponent, FloatLabelComponent, FluidComponent, GalleriaComponent, IconFieldComponent, IftaLabelComponent, ImageCompareComponent, ImageComponent, InplaceComponent, InputGroupAddonComponent, InputGroupComponent, InputIconComponent, InputMaskDirective, InputNumberComponent, InputOtpComponent, InputPasswordDirective, InputTextDirective, KeyFilterDirective, KnobComponent, LARA_PRESET, ListboxComponent, MegaMenuComponent, MenuComponent, MenubarComponent, MessageComponent, MessageService, MeterGroupComponent, MultiSelectComponent, NOIR_PRIMARY, NORA_PRESET, NgUIConfig, OrderListComponent, OrganizationChartComponent, OverlayBadgeComponent, OverlayStackService, PRESETS$1 as PRESETS, PRESET_NAMES, PRIMARY_PALETTES, PaginatorComponent, PanelComponent, PanelMenuComponent, PasswordComponent, PickListComponent, PopoverComponent, ProgressSpinnerComponent, ProgressbarComponent, RadioButtonComponent, RatingComponent, RippleDirective, SURFACE_PALETTES, ScrollPanelComponent, ScrollTopComponent, ScrollerComponent, SelectButtonComponent, SelectComponent, SkeletonComponent, SliderComponent, SortIconComponent, SortableColumnDirective, SpeedDialComponent, SplitButtonComponent, SplitterComponent, SplitterPanelComponent, StepsComponent, StyleClassDirective, TabComponent, TabListComponent, TabPanelComponent, TabPanelsComponent, TableComponent, TabsComponent, TabsContext, TagComponent, TerminalComponent, TextareaDirective, TieredMenuComponent, TimelineComponent, ToastComponent, ToggleButtonComponent, ToggleSwitchComponent, ToolbarComponent, TooltipDirective, TreeComponent, TreeSelectComponent, TreeTableComponent, TreeTableService, TreeTableTogglerComponent, UiIconComponent, applyDarkSemantics, applyLightSemantics, applyPreset, applyPrimaryPalette, applySurfacePalette, applyTheme, attachOverlayPosition, buildBootstrapPreset, computeOverlayPlacement, overlayPlacementStyle, overlayPosition, provideNgUI };
 //# sourceMappingURL=flusys-ng-ui.mjs.map