@besaitech/ng-design-system 0.0.80 → 0.0.82

package/fesm2022/besaitech-ng-design-system.mjs

@@ -5826,6 +5826,127 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
+/**
+ * Where a floating panel goes, and the plumbing that keeps it there.
+ *
+ * <p><b>Why this exists.</b> Ten components in this library append a panel to `<body>` and position
+ * it against their trigger, and nine of them had their own copy of the same twenty-odd lines. The
+ * copies had already drifted: some clamp the panel inside the viewport vertically and some only
+ * flip it, some match the trigger's width and some do not. Worse, the *lifecycle* was duplicated
+ * too — and `sds-autocomplete` shipped a version that removed the panel through a `viewChild`
+ * already cleared by `ngOnDestroy`, orphaning it in `<body>` for ever. That bug could only exist in
+ * one copy of nine.
+ */
+/**
+ * The arithmetic, with no DOM in it.
+ *
+ * <p>Vertical: below the trigger, flipped above when it does not fit below and fits better above —
+ * then <b>clamped inside the viewport</b>. The clamp is not decoration: without it a panel taller
+ * than the space either side is pushed off the top edge and its first rows become unreachable, and
+ * four of the nine copies were missing it.
+ *
+ * <p>Horizontal: the panel's start (or end) edge meets the trigger's, then clamped the same way. A
+ * panel wider than the viewport pins to the left margin rather than running off both sides.
+ */
+function placePanel(trigger, panel, viewport, options = {}) {
+    const gap = options.gap ?? 4;
+    const margin = options.margin ?? 8;
+    const roomBelow = viewport.height - trigger.bottom - gap;
+    const roomAbove = trigger.top - gap;
+    const above = options.prefer === 'above'
+        ? roomAbove >= panel.height || roomAbove > roomBelow
+        : roomBelow < panel.height && roomAbove > roomBelow;
+    const top = clamp(above ? trigger.top - gap - panel.height : trigger.bottom + gap, margin, viewport.height - margin - panel.height);
+    const left = clamp(options.align === 'end' ? trigger.right - panel.width : trigger.left, margin, viewport.width - margin - panel.width);
+    return { top: Math.round(top), left: Math.round(left) };
+}
+/**
+ * A viewport bound that may be smaller than the lower one — when the panel is taller than the
+ * window there is no position that satisfies both, and the top edge is the one that must win, or
+ * the panel starts off-screen and cannot be scrolled back.
+ */
+function clamp(value, low, high) {
+    return Math.max(low, Math.min(value, Math.max(low, high)));
+}
+/**
+ * The DOM half: append to `<body>`, place, follow scroll and resize, and — the part that was worth
+ * centralising — take it all down again exactly once.
+ *
+ * <p>Hold one of these per component and call {@link detach} from `ngOnDestroy`. It keeps its own
+ * reference to the panel element, so it does not depend on a `viewChild` that Angular has already
+ * cleared by the time the component is torn down.
+ */
+class SdsOverlayPanel {
+    trigger = null;
+    panel = null;
+    options = {};
+    listening = false;
+    reflow = () => this.reposition();
+    /** Attach (or re-attach) the panel to the body and start following the trigger. */
+    attach(trigger, panel, options = {}) {
+        this.trigger = trigger;
+        this.panel = panel;
+        this.options = options;
+        if (panel.parentElement !== document.body) {
+            document.body.appendChild(panel);
+        }
+        this.reposition();
+        if (!this.listening) {
+            // `true` for scroll: a panel inside a scrolling container must follow it, and scroll does
+            // not bubble.
+            window.addEventListener('scroll', this.reflow, true);
+            window.addEventListener('resize', this.reflow);
+            this.listening = true;
+        }
+    }
+    reposition() {
+        const trigger = this.trigger;
+        const panel = this.panel;
+        if (!trigger || !panel) {
+            return;
+        }
+        const r = trigger.getBoundingClientRect();
+        // Before measuring, because the width we are about to impose is the width placePanel must see.
+        if (this.options.width === 'min') {
+            panel.style.minWidth = `${Math.round(r.width)}px`;
+        }
+        else if (this.options.width === 'exact') {
+            panel.style.width = `${Math.round(r.width)}px`;
+        }
+        const { top, left } = placePanel(r, 
+        // offset* is 0 before the panel has laid out; the fallbacks keep the first frame sane.
+        { width: panel.offsetWidth || r.width, height: panel.offsetHeight || 240 }, { width: window.innerWidth, height: window.innerHeight }, this.options);
+        panel.style.top = `${top}px`;
+        panel.style.left = `${left}px`;
+    }
+    /**
+     * The live panel element, or null while closed.
+     *
+     * <p>Read-only on purpose. A component that needs to reach inside the panel — to focus a row, to
+     * trap Tab, to read its options — asks here rather than keeping its own field. A second
+     * reference is how the autocomplete came to remove the panel through a `viewChild` that Angular
+     * had already cleared, which is the bug this class exists to make unrepeatable.
+     */
+    get element() {
+        return this.panel;
+    }
+    /** Does the panel contain this node? For "did the click land outside" checks. */
+    contains(node) {
+        return !!node && !!this.panel?.contains(node);
+    }
+    /** Stop following, and remove the panel from the body. Safe to call more than once. */
+    detach() {
+        if (this.listening) {
+            window.removeEventListener('scroll', this.reflow, true);
+            window.removeEventListener('resize', this.reflow);
+            this.listening = false;
+        }
+        this.panel?.remove();
+        this.panel = null;
+        this.trigger = null;
+    }
+}
+
 let nextId$f = 0;
 /**
  * Marks the element inside `<sds-menu>` that opens it. It may be a native button or a component that
@@ -5896,7 +6017,8 @@ class SdsMenu {
     /** An action was activated. */
     select = output();
     projectedTrigger = contentChild(SdsMenuTrigger, ...(ngDevMode ? [{ debugName: "projectedTrigger" }] : []));
-    panelEl = null;
+    /** Body-appending, positioning, follow-on-scroll and teardown — see SdsOverlayPanel. */
+    overlay = new SdsOverlayPanel();
     /** Which item gets focus when the panel opens: 'first' | 'last' | 'none'. */
     focusOnOpen = 'first';
     typeBuffer = '';
@@ -5991,23 +6113,18 @@ class SdsMenu {
     afterOpen() {
         if (!this.open())
             return;
-        this.panelEl = this.host.nativeElement.querySelector('[data-sds-menu-panel]');
-        if (!this.panelEl)
+        const panel = this.host.nativeElement.querySelector('[data-sds-menu-panel]');
+        const trigger = this.triggerEl();
+        if (!panel || !trigger)
             return;
-        if (this.panelEl.parentElement !== document.body)
-            document.body.appendChild(this.panelEl);
         // Name the menu after its trigger unless an explicit [ariaLabel] was given.
-        const trigger = this.triggerEl();
-        if (!this.ariaLabel() && trigger?.id)
-            this.panelEl.setAttribute('aria-labelledby', trigger.id);
-        this.position();
-        this.addReflowListeners();
+        if (!this.ariaLabel() && trigger.id)
+            panel.setAttribute('aria-labelledby', trigger.id);
+        this.overlay.attach(trigger, panel, { align: this.align() });
         this.focusItemAt(this.focusOnOpen);
     }
     teardown() {
-        this.removeReflowListeners();
-        this.panelEl?.remove();
-        this.panelEl = null;
+        this.overlay.detach();
     }
     // --- trigger events -------------------------------------------------------
     onTriggerClick(event) {
@@ -6094,12 +6211,12 @@ class SdsMenu {
         this.typeTimer = setTimeout(() => (this.typeBuffer = ''), 600);
     }
     focusIndex(i) {
-        this.panelEl?.querySelector(`[data-index="${i}"]`)?.focus();
+        this.overlay.element?.querySelector(`[data-index="${i}"]`)?.focus();
     }
     focusItemAt(where) {
         const idx = this.enabledIndexes();
         if (!idx.length) {
-            this.panelEl?.focus();
+            this.overlay.element?.focus();
             return;
         }
         this.focusIndex(where === 'first' ? idx[0] : idx[idx.length - 1]);
@@ -6119,47 +6236,10 @@ class SdsMenu {
         const target = event.target;
         if (this.host.nativeElement.contains(target))
             return;
-        if (this.panelEl?.contains(target))
+        if (this.overlay.contains(target))
             return;
         this.close(false);
     }
-    // --- positioning (body-appended, mirrors sds-select) ------------------------
-    reflow = () => this.position();
-    listening = false;
-    addReflowListeners() {
-        if (this.listening)
-            return;
-        window.addEventListener('scroll', this.reflow, true);
-        window.addEventListener('resize', this.reflow);
-        this.listening = true;
-    }
-    removeReflowListeners() {
-        if (!this.listening)
-            return;
-        window.removeEventListener('scroll', this.reflow, true);
-        window.removeEventListener('resize', this.reflow);
-        this.listening = false;
-    }
-    position() {
-        const trigger = this.triggerEl();
-        const panel = this.panelEl;
-        if (!trigger || !panel)
-            return;
-        const r = trigger.getBoundingClientRect();
-        const pw = panel.offsetWidth;
-        const ph = panel.offsetHeight;
-        const gap = 4;
-        const margin = 8;
-        let top = r.bottom + gap;
-        if (top + ph > window.innerHeight - margin && r.top - gap - ph > margin) {
-            top = r.top - gap - ph;
-        }
-        top = Math.max(margin, Math.min(top, window.innerHeight - margin - ph));
-        let left = this.align() === 'end' ? r.right - pw : r.left;
-        left = Math.max(margin, Math.min(left, window.innerWidth - margin - pw));
-        panel.style.top = `${Math.round(top)}px`;
-        panel.style.left = `${Math.round(left)}px`;
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsMenu, isStandalone: true, selector: "sds-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, triggerIcon: { classPropertyName: "triggerIcon", publicName: "triggerIcon", isSignal: true, isRequired: false, transformFunction: null }, triggerText: { classPropertyName: "triggerText", publicName: "triggerText", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, keepOpen: { classPropertyName: "keepOpen", publicName: "keepOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", select: "select" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "relative inline-flex" }, queries: [{ propertyName: "projectedTrigger", first: true, predicate: SdsMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: `
     <span
@@ -9105,8 +9185,8 @@ class SdsDatePicker {
     cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
     calendar = viewChild(SdsCalendar, ...(ngDevMode ? [{ debugName: "calendar" }] : []));
     trigger = viewChild('trigger', ...(ngDevMode ? [{ debugName: "trigger" }] : []));
-    /** The overlay panel, relocated to document.body while open. */
-    panelEl = null;
+    /** Body-appending, positioning, follow-on-scroll and teardown — see SdsOverlayPanel. */
+    overlay = new SdsOverlayPanel();
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     displayValue = computed(() => {
         const v = this.value();
@@ -9140,18 +9220,19 @@ class SdsDatePicker {
         this.onTouched();
         // Run after the overlay is rendered, then relocate it to <body>.
         afterNextRender(() => {
-            this.panelEl = this.host.nativeElement.querySelector('[role="dialog"]');
-            this.positionPanel(); // also relocates to document.body
-            this.addReflowListeners();
+            const panel = this.host.nativeElement.querySelector('[role="dialog"]');
+            const trigger = this.trigger()?.nativeElement;
+            if (panel && trigger) {
+                // gap 6, as this field has always used — the shared default is 4.
+                this.overlay.attach(trigger, panel, { gap: 6 });
+            }
             this.calendar()?.focusActiveCell();
         }, { injector: this.injector });
     }
     close(returnFocus = false) {
         if (!this.open())
             return;
-        this.removeReflowListeners();
-        this.panelEl?.remove(); // pull the body-relocated node before destroying the view
-        this.panelEl = null;
+        this.overlay.detach(); // pull the body-relocated node before destroying the view
         this.open.set(false);
         if (returnFocus) {
             this.host.nativeElement.querySelector('input')?.focus();
@@ -9196,17 +9277,18 @@ class SdsDatePicker {
      * the page behind the dialog. Keeps Tab / Shift+Tab cycling within the panel's own focusables.
      */
     onPanelKeydown(event) {
-        if (event.key !== 'Tab' || !this.panelEl)
+        const panel = this.overlay.element;
+        if (event.key !== 'Tab' || !panel)
             return;
         const sel = 'a[href],button:not([disabled]):not([tabindex="-1"]),input:not([disabled]),' +
             '[tabindex]:not([tabindex="-1"])';
-        const items = Array.from(this.panelEl.querySelectorAll(sel)).filter((el) => el.offsetParent !== null);
+        const items = Array.from(panel.querySelectorAll(sel)).filter((el) => el.offsetParent !== null);
         if (items.length === 0)
             return;
         const first = items[0];
         const last = items[items.length - 1];
         const active = document.activeElement;
-        if (event.shiftKey && (active === first || !this.panelEl.contains(active))) {
+        if (event.shiftKey && (active === first || !panel.contains(active))) {
             event.preventDefault();
             last.focus();
         }
@@ -9220,59 +9302,12 @@ class SdsDatePicker {
             return;
         const target = event.target;
         const inField = this.host.nativeElement.contains(target);
-        const inPanel = !!this.panelEl && this.panelEl.contains(target);
+        const inPanel = this.overlay.contains(target);
         if (!inField && !inPanel)
             this.close();
     }
-    // --- body-appended overlay positioning ---
-    reflow = () => this.positionPanel();
-    listening = false;
-    addReflowListeners() {
-        if (this.listening)
-            return;
-        // capture=true so scrolling any ancestor scroll container repositions.
-        window.addEventListener('scroll', this.reflow, true);
-        window.addEventListener('resize', this.reflow);
-        this.listening = true;
-    }
-    removeReflowListeners() {
-        if (!this.listening)
-            return;
-        window.removeEventListener('scroll', this.reflow, true);
-        window.removeEventListener('resize', this.reflow);
-        this.listening = false;
-    }
-    positionPanel() {
-        const triggerEl = this.trigger()?.nativeElement;
-        const panelEl = this.panelEl;
-        if (!triggerEl || !panelEl)
-            return;
-        // appendTo body: relocate out of any clipping/stacking ancestor.
-        if (panelEl.parentElement !== document.body) {
-            document.body.appendChild(panelEl);
-        }
-        const r = triggerEl.getBoundingClientRect();
-        const ph = panelEl.offsetHeight || 360;
-        const pw = panelEl.offsetWidth || 296;
-        const gap = 6;
-        const margin = 8;
-        // Below the field by default; flip above when there isn't room.
-        let top = r.bottom + gap;
-        if (top + ph > window.innerHeight - margin && r.top - gap - ph > margin) {
-            top = r.top - gap - ph;
-        }
-        // Align to the field's left, but keep it within the viewport.
-        let left = r.left;
-        if (left + pw > window.innerWidth - margin) {
-            left = Math.max(margin, window.innerWidth - margin - pw);
-        }
-        // Set directly (position: fixed → viewport coordinates) to avoid a flash.
-        panelEl.style.top = `${Math.round(top)}px`;
-        panelEl.style.left = `${Math.round(left)}px`;
-    }
     ngOnDestroy() {
-        this.removeReflowListeners();
-        this.panelEl?.remove();
+        this.overlay.detach();
     }
     setValue(v) {
         this.value.set(v);
@@ -9379,7 +9414,7 @@ class SdsDatePicker {
 
         @if (open()) {
           <!-- Relocated to document.body on open (appendTo body) to escape
-               ancestor overflow/stacking; positioned via positionPanel(). -->
+               ancestor overflow/stacking; placed by SdsOverlayPanel. -->
           <div
             class="fixed z-[1000]"
             role="dialog"
@@ -9514,7 +9549,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
         @if (open()) {
           <!-- Relocated to document.body on open (appendTo body) to escape
-               ancestor overflow/stacking; positioned via positionPanel(). -->
+               ancestor overflow/stacking; placed by SdsOverlayPanel. -->
           <div
             class="fixed z-[1000]"
             role="dialog"
@@ -9943,7 +9978,12 @@ class SdsRangeCalendar {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsRangeCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsRangeCalendar, isStandalone: true, selector: "sds-range-calendar", inputs: { start: { classPropertyName: "start", publicName: "start", isSignal: true, isRequired: false, transformFunction: null }, end: { classPropertyName: "end", publicName: "end", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, maxDays: { classPropertyName: "maxDays", publicName: "maxDays", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null }, calendarLabel: { classPropertyName: "calendarLabel", publicName: "calendarLabel", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { start: "startChange", end: "endChange", daySelect: "daySelect", rangeSelect: "rangeSelect", dayHover: "dayHover" }, host: { classAttribute: "block" }, ngImport: i0, template: `
-    <div class="select-none" role="group" [attr.aria-label]="calendarLabel()" (mouseleave)="setHover(null)">
+    <div
+      class="select-none"
+      role="group"
+      [attr.aria-label]="calendarLabel()"
+      (mouseleave)="setHover(null)"
+    >
       <div class="flex flex-col gap-4 sm:flex-row sm:gap-6">
         @for (m of monthViews(); track m.key; let first = $first; let last = $last) {
           <div class="w-[17.5rem]">
@@ -9979,7 +10019,11 @@ class SdsRangeCalendar {
               }
             </div>
 
-            <table class="w-full table-fixed border-collapse" role="grid" [attr.aria-label]="m.title">
+            <table
+              class="w-full table-fixed border-collapse"
+              role="grid"
+              [attr.aria-label]="m.title"
+            >
               <thead>
                 <tr>
                   @for (wd of weekdayLabels(); track $index) {
@@ -10036,7 +10080,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     imports: [SdsIcon],
                     host: { class: 'block' },
                     template: `
-    <div class="select-none" role="group" [attr.aria-label]="calendarLabel()" (mouseleave)="setHover(null)">
+    <div
+      class="select-none"
+      role="group"
+      [attr.aria-label]="calendarLabel()"
+      (mouseleave)="setHover(null)"
+    >
       <div class="flex flex-col gap-4 sm:flex-row sm:gap-6">
         @for (m of monthViews(); track m.key; let first = $first; let last = $last) {
           <div class="w-[17.5rem]">
@@ -10072,7 +10121,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               }
             </div>
 
-            <table class="w-full table-fixed border-collapse" role="grid" [attr.aria-label]="m.title">
+            <table
+              class="w-full table-fixed border-collapse"
+              role="grid"
+              [attr.aria-label]="m.title"
+            >
               <thead>
                 <tr>
                   @for (wd of weekdayLabels(); track $index) {
@@ -10220,8 +10273,8 @@ class SdsDateRangePicker {
     pendingEnd = signal(null, ...(ngDevMode ? [{ debugName: "pendingEnd" }] : []));
     calendar = viewChild(SdsRangeCalendar, ...(ngDevMode ? [{ debugName: "calendar" }] : []));
     trigger = viewChild('trigger', ...(ngDevMode ? [{ debugName: "trigger" }] : []));
-    /** The overlay panel, relocated to document.body while open. */
-    panelEl = null;
+    /** Body-appending, positioning, follow-on-scroll and teardown — see SdsOverlayPanel. */
+    overlay = new SdsOverlayPanel();
     /** Id of the preset the current value equals, or `null` (no value, or a custom range). */
     activePresetId = computed(() => this.presetIdFor(this.value()), ...(ngDevMode ? [{ debugName: "activePresetId" }] : []));
     pendingPresetId = computed(() => {
@@ -10290,9 +10343,12 @@ class SdsDateRangePicker {
         this.open.set(true);
         // Run after the overlay is rendered, then relocate it to <body>.
         afterNextRender(() => {
-            this.panelEl = this.host.nativeElement.querySelector('[role="dialog"]');
-            this.positionPanel(); // also relocates to document.body
-            this.addReflowListeners();
+            const panel = this.host.nativeElement.querySelector('[role="dialog"]');
+            const trigger = this.trigger()?.nativeElement;
+            if (panel && trigger) {
+                // gap 6, as this field has always used — the shared default is 4.
+                this.overlay.attach(trigger, panel, { gap: 6 });
+            }
             this.calendar()?.focusActiveCell();
         }, { injector: this.injector });
     }
@@ -10300,9 +10356,7 @@ class SdsDateRangePicker {
     close(returnFocus = false) {
         if (!this.open())
             return;
-        this.removeReflowListeners();
-        this.panelEl?.remove(); // pull the body-relocated node before destroying the view
-        this.panelEl = null;
+        this.overlay.detach(); // pull the body-relocated node before destroying the view
         this.open.set(false);
         if (returnFocus)
             this.trigger()?.nativeElement.focus();
@@ -10339,17 +10393,18 @@ class SdsDateRangePicker {
      * modal's focus trap; this keeps Tab / Shift+Tab cycling within the panel's own focusables.
      */
     onPanelKeydown(event) {
-        if (event.key !== 'Tab' || !this.panelEl)
+        const panel = this.overlay.element;
+        if (event.key !== 'Tab' || !panel)
             return;
         const sel = 'a[href],button:not([disabled]):not([tabindex="-1"]),input:not([disabled]),' +
             '[tabindex]:not([tabindex="-1"])';
-        const items = Array.from(this.panelEl.querySelectorAll(sel)).filter((el) => el.offsetParent !== null);
+        const items = Array.from(panel.querySelectorAll(sel)).filter((el) => el.offsetParent !== null);
         if (items.length === 0)
             return;
         const first = items[0];
         const last = items[items.length - 1];
         const active = document.activeElement;
-        if (event.shiftKey && (active === first || !this.panelEl.contains(active))) {
+        if (event.shiftKey && (active === first || !panel.contains(active))) {
             event.preventDefault();
             last.focus();
         }
@@ -10364,58 +10419,13 @@ class SdsDateRangePicker {
         // composedPath is fixed at dispatch time, so a click on a node re-rendered away still counts.
         const path = event.composedPath();
         const inField = path.includes(this.host.nativeElement);
-        const inPanel = !!this.panelEl && path.includes(this.panelEl);
+        const inPanel = !!this.overlay.element && path.includes(this.overlay.element);
         if (!inField && !inPanel)
             this.close();
     }
     // --- body-appended overlay positioning ---
-    reflow = () => this.positionPanel();
-    listening = false;
-    addReflowListeners() {
-        if (this.listening)
-            return;
-        window.addEventListener('scroll', this.reflow, true);
-        window.addEventListener('resize', this.reflow);
-        this.listening = true;
-    }
-    removeReflowListeners() {
-        if (!this.listening)
-            return;
-        window.removeEventListener('scroll', this.reflow, true);
-        window.removeEventListener('resize', this.reflow);
-        this.listening = false;
-    }
-    positionPanel() {
-        const triggerEl = this.trigger()?.nativeElement;
-        const panelEl = this.panelEl;
-        if (!triggerEl || !panelEl)
-            return;
-        if (panelEl.parentElement !== document.body) {
-            document.body.appendChild(panelEl);
-        }
-        const r = triggerEl.getBoundingClientRect();
-        const ph = panelEl.offsetHeight || 420;
-        const pw = panelEl.offsetWidth || 760;
-        const gap = 6;
-        const margin = 8;
-        // Below the field by default; flip above when there isn't room; else clamp into the viewport.
-        let top = r.bottom + gap;
-        if (top + ph > window.innerHeight - margin) {
-            if (r.top - gap - ph > margin)
-                top = r.top - gap - ph;
-            else
-                top = Math.max(margin, window.innerHeight - margin - ph);
-        }
-        let left = r.left;
-        if (left + pw > window.innerWidth - margin) {
-            left = Math.max(margin, window.innerWidth - margin - pw);
-        }
-        panelEl.style.top = `${Math.round(top)}px`;
-        panelEl.style.left = `${Math.round(left)}px`;
-    }
     ngOnDestroy() {
-        this.removeReflowListeners();
-        this.panelEl?.remove();
+        this.overlay.detach();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsDateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsDateRangePicker, isStandalone: true, selector: "sds-date-range-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, maxDays: { classPropertyName: "maxDays", publicName: "maxDays", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, panelLabel: { classPropertyName: "panelLabel", publicName: "panelLabel", isSignal: true, isRequired: false, transformFunction: null }, presetsLabel: { classPropertyName: "presetsLabel", publicName: "presetsLabel", isSignal: true, isRequired: false, transformFunction: null }, startLabel: { classPropertyName: "startLabel", publicName: "startLabel", isSignal: true, isRequired: false, transformFunction: null }, endLabel: { classPropertyName: "endLabel", publicName: "endLabel", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, calendarLabel: { classPropertyName: "calendarLabel", publicName: "calendarLabel", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", presetSelect: "presetSelect" }, host: { listeners: { "document:click": "onDocumentClick($event)", "keydown.escape": "onEscape($event)" }, classAttribute: "block" }, viewQueries: [{ propertyName: "calendar", first: true, predicate: SdsRangeCalendar, descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
@@ -10433,7 +10443,9 @@ class SdsDateRangePicker {
       aria-haspopup="dialog"
       [attr.aria-expanded]="open()"
       [attr.aria-labelledby]="label() ? labelId + ' ' + valueId : null"
-      [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() + ', ' + (displayValue() || placeholder()) : null"
+      [attr.aria-label]="
+        !label() && ariaLabel() ? ariaLabel() + ', ' + (displayValue() || placeholder()) : null
+      "
       [class]="triggerClasses()"
       (click)="toggle($event)"
       (keydown.arrowdown)="onTriggerArrowDown($event)"
@@ -10458,7 +10470,7 @@ class SdsDateRangePicker {
 
     @if (open()) {
       <!-- Relocated to document.body on open (appendTo body) to escape ancestor overflow/stacking;
-           positioned via positionPanel(). -->
+           placed by SdsOverlayPanel. -->
       <div
         class="fixed z-[1000] max-w-[calc(100vw-1rem)] overflow-auto rounded-card border border-border bg-surface shadow-lg"
         style="max-height: calc(100vh - 1rem)"
@@ -10475,7 +10487,9 @@ class SdsDateRangePicker {
               role="group"
               [attr.aria-label]="presetsLabel()"
             >
-              <p class="px-2 pb-1.5 pt-1 text-[11px] font-semibold uppercase tracking-wide text-ink-faint">
+              <p
+                class="px-2 pb-1.5 pt-1 text-[11px] font-semibold uppercase tracking-wide text-ink-faint"
+              >
                 {{ presetsLabel() }}
               </p>
               <div class="flex flex-wrap gap-1 sm:flex-col sm:flex-nowrap">
@@ -10515,15 +10529,27 @@ class SdsDateRangePicker {
             >
               <p class="flex items-stretch gap-2 text-sm" aria-live="polite">
                 <span class="flex flex-col leading-tight">
-                  <span class="text-[11px] font-medium uppercase text-ink-faint">{{ startLabel() }}</span>
-                  <span class="font-medium" [class.text-ink]="pendingStart()" [class.text-ink-faint]="!pendingStart()">
+                  <span class="text-[11px] font-medium uppercase text-ink-faint">{{
+                    startLabel()
+                  }}</span>
+                  <span
+                    class="font-medium"
+                    [class.text-ink]="pendingStart()"
+                    [class.text-ink-faint]="!pendingStart()"
+                  >
                     {{ pendingStartText() }}
                   </span>
                 </span>
                 <span class="self-end text-ink-faint" aria-hidden="true">–</span>
                 <span class="flex flex-col leading-tight">
-                  <span class="text-[11px] font-medium uppercase text-ink-faint">{{ endLabel() }}</span>
-                  <span class="font-medium" [class.text-ink]="pendingEnd()" [class.text-ink-faint]="!pendingEnd()">
+                  <span class="text-[11px] font-medium uppercase text-ink-faint">{{
+                    endLabel()
+                  }}</span>
+                  <span
+                    class="font-medium"
+                    [class.text-ink]="pendingEnd()"
+                    [class.text-ink-faint]="!pendingEnd()"
+                  >
                     {{ pendingEndText() }}
                   </span>
                 </span>
@@ -10569,7 +10595,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       aria-haspopup="dialog"
       [attr.aria-expanded]="open()"
       [attr.aria-labelledby]="label() ? labelId + ' ' + valueId : null"
-      [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() + ', ' + (displayValue() || placeholder()) : null"
+      [attr.aria-label]="
+        !label() && ariaLabel() ? ariaLabel() + ', ' + (displayValue() || placeholder()) : null
+      "
       [class]="triggerClasses()"
       (click)="toggle($event)"
       (keydown.arrowdown)="onTriggerArrowDown($event)"
@@ -10594,7 +10622,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
     @if (open()) {
       <!-- Relocated to document.body on open (appendTo body) to escape ancestor overflow/stacking;
-           positioned via positionPanel(). -->
+           placed by SdsOverlayPanel. -->
       <div
         class="fixed z-[1000] max-w-[calc(100vw-1rem)] overflow-auto rounded-card border border-border bg-surface shadow-lg"
         style="max-height: calc(100vh - 1rem)"
@@ -10611,7 +10639,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               role="group"
               [attr.aria-label]="presetsLabel()"
             >
-              <p class="px-2 pb-1.5 pt-1 text-[11px] font-semibold uppercase tracking-wide text-ink-faint">
+              <p
+                class="px-2 pb-1.5 pt-1 text-[11px] font-semibold uppercase tracking-wide text-ink-faint"
+              >
                 {{ presetsLabel() }}
               </p>
               <div class="flex flex-wrap gap-1 sm:flex-col sm:flex-nowrap">
@@ -10651,15 +10681,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             >
               <p class="flex items-stretch gap-2 text-sm" aria-live="polite">
                 <span class="flex flex-col leading-tight">
-                  <span class="text-[11px] font-medium uppercase text-ink-faint">{{ startLabel() }}</span>
-                  <span class="font-medium" [class.text-ink]="pendingStart()" [class.text-ink-faint]="!pendingStart()">
+                  <span class="text-[11px] font-medium uppercase text-ink-faint">{{
+                    startLabel()
+                  }}</span>
+                  <span
+                    class="font-medium"
+                    [class.text-ink]="pendingStart()"
+                    [class.text-ink-faint]="!pendingStart()"
+                  >
                     {{ pendingStartText() }}
                   </span>
                 </span>
                 <span class="self-end text-ink-faint" aria-hidden="true">–</span>
                 <span class="flex flex-col leading-tight">
-                  <span class="text-[11px] font-medium uppercase text-ink-faint">{{ endLabel() }}</span>
-                  <span class="font-medium" [class.text-ink]="pendingEnd()" [class.text-ink-faint]="!pendingEnd()">
+                  <span class="text-[11px] font-medium uppercase text-ink-faint">{{
+                    endLabel()
+                  }}</span>
+                  <span
+                    class="font-medium"
+                    [class.text-ink]="pendingEnd()"
+                    [class.text-ink-faint]="!pendingEnd()"
+                  >
                     {{ pendingEndText() }}
                   </span>
                 </span>
@@ -10838,6 +10880,8 @@ class SdsSelect {
     cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
     trigger = viewChild('trigger', ...(ngDevMode ? [{ debugName: "trigger" }] : []));
     panelEl = null;
+    /** Body-appending, positioning, follow-on-scroll and teardown — see SdsOverlayPanel. */
+    overlay = new SdsOverlayPanel();
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     filled = computed(() => this.appearance() === 'filled', ...(ngDevMode ? [{ debugName: "filled" }] : []));
     onBrand = computed(() => this.appearance() === 'on-brand', ...(ngDevMode ? [{ debugName: "onBrand" }] : []));
@@ -10882,9 +10926,7 @@ class SdsSelect {
                 ? 'border-danger focus:border-danger focus:ring-2 focus:ring-danger/25'
                 : 'border-border focus:border-brand-500 focus:ring-2 focus:ring-brand-500/25');
         }
-        parts.push(this.isDisabled()
-            ? 'opacity-60 cursor-not-allowed pointer-events-none'
-            : 'cursor-pointer');
+        parts.push(this.isDisabled() ? 'opacity-60 cursor-not-allowed pointer-events-none' : 'cursor-pointer');
         return parts.join(' ');
     }, ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : []));
     // --- option normalization & equality ---
@@ -10918,7 +10960,11 @@ class SdsSelect {
     }, ...(ngDevMode ? [{ debugName: "triggerContext" }] : []));
     /** Context for a projected footer template. */
     footerContext() {
-        return { $implicit: this.filterText(), filterText: this.filterText(), close: () => this.close(true) };
+        return {
+            $implicit: this.filterText(),
+            filterText: this.filterText(),
+            close: () => this.close(true),
+        };
     }
     equals(a, b) {
         const k = this.dataKey();
@@ -10958,9 +11004,9 @@ class SdsSelect {
         this.onTouched();
         this.initHighlight();
         afterNextRender(() => {
-            this.panelEl = this.host.nativeElement.querySelector('[data-sds-select-panel]');
-            this.positionPanel();
-            this.addReflowListeners();
+            this.panelEl =
+                this.host.nativeElement.querySelector('[data-sds-select-panel]');
+            this.attachPanel();
             if (this.filter()) {
                 this.panelEl?.querySelector('input')?.focus();
             }
@@ -10973,8 +11019,7 @@ class SdsSelect {
     close(returnFocus = false) {
         if (!this.open())
             return;
-        this.removeReflowListeners();
-        this.panelEl?.remove();
+        this.overlay.detach();
         this.panelEl = null;
         this.open.set(false);
         if (returnFocus)
@@ -10991,7 +11036,7 @@ class SdsSelect {
     onFilter(event) {
         this.filterText.set(event.target.value);
         this.highlightFirst();
-        setTimeout(() => this.positionPanel());
+        setTimeout(() => this.overlay.reposition());
     }
     // --- keyboard ---
     onTriggerKeydown(event) {
@@ -11047,7 +11092,8 @@ class SdsSelect {
             case 'Tab':
                 this.close(false);
                 return true;
-            default: return false;
+            default:
+                return false;
         }
     }
     initHighlight() {
@@ -11110,46 +11156,12 @@ class SdsSelect {
             el?.scrollIntoView({ block: 'nearest' });
         });
     }
-    // --- body-appended overlay positioning (mirrors sds-date-picker) ---
-    reflow = () => this.positionPanel();
-    listening = false;
-    addReflowListeners() {
-        if (this.listening)
-            return;
-        window.addEventListener('scroll', this.reflow, true);
-        window.addEventListener('resize', this.reflow);
-        this.listening = true;
-    }
-    removeReflowListeners() {
-        if (!this.listening)
-            return;
-        window.removeEventListener('scroll', this.reflow, true);
-        window.removeEventListener('resize', this.reflow);
-        this.listening = false;
-    }
-    positionPanel() {
-        const triggerEl = this.trigger()?.nativeElement;
-        const panelEl = this.panelEl;
-        if (!triggerEl || !panelEl)
-            return;
-        if (panelEl.parentElement !== document.body)
-            document.body.appendChild(panelEl);
-        const r = triggerEl.getBoundingClientRect();
-        panelEl.style.minWidth = `${Math.round(r.width)}px`;
-        const ph = panelEl.offsetHeight || 240;
-        const gap = 4;
-        const margin = 8;
-        let top = r.bottom + gap;
-        if (top + ph > window.innerHeight - margin && r.top - gap - ph > margin) {
-            top = r.top - gap - ph;
-        }
-        let left = r.left;
-        const pw = panelEl.offsetWidth || r.width;
-        if (left + pw > window.innerWidth - margin) {
-            left = Math.max(margin, window.innerWidth - margin - pw);
+    /** Attach once the panel exists — it is rendered inside an `@if`. */
+    attachPanel() {
+        const trigger = this.trigger()?.nativeElement;
+        if (trigger && this.panelEl) {
+            this.overlay.attach(trigger, this.panelEl, { width: 'min' });
         }
-        panelEl.style.top = `${Math.round(top)}px`;
-        panelEl.style.left = `${Math.round(left)}px`;
     }
     onDocumentClick(event) {
         if (!this.open())
@@ -11161,9 +11173,8 @@ class SdsSelect {
             this.close();
     }
     ngOnDestroy() {
-        this.removeReflowListeners();
         clearTimeout(this.typeTimer);
-        this.panelEl?.remove();
+        this.overlay.detach();
     }
     setValue(v) {
         this.value.set(v);
@@ -11224,10 +11235,7 @@ class SdsSelect {
             />
           </span>
         } @else {
-          <span
-            class="flex-1 truncate pl-3.5"
-            [class]="valueTextClass()"
-          >
+          <span class="flex-1 truncate pl-3.5" [class]="valueTextClass()">
             {{ selectedOption() ? selectedOption()!.label : placeholder() }}
           </span>
         }
@@ -11238,7 +11246,11 @@ class SdsSelect {
             tabindex="-1"
             [attr.aria-label]="clearLabel()"
             class="mr-1 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full"
-            [class]="onBrand() ? 'text-white/60 hover:bg-white/10 hover:text-white' : 'text-ink-faint hover:bg-black/5 hover:text-ink-soft'"
+            [class]="
+              onBrand()
+                ? 'text-white/60 hover:bg-white/10 hover:text-white'
+                : 'text-ink-faint hover:bg-black/5 hover:text-ink-soft'
+            "
             (click)="clear($event)"
           >
             <sds-icon name="x" [size]="15" />
@@ -11257,11 +11269,20 @@ class SdsSelect {
 
       @if (open()) {
         <!-- Appended to document.body on open (see positionPanel). -->
-        <div data-sds-select-panel class="fixed z-[1000] overflow-hidden rounded-card border border-border bg-surface shadow-lg">
+        <div
+          data-sds-select-panel
+          class="fixed z-[1000] overflow-hidden rounded-card border border-border bg-surface shadow-lg"
+        >
           @if (filter()) {
             <div class="border-b border-border p-2">
-              <div class="relative flex items-center rounded-control border border-border focus-within:border-brand-500">
-                <sds-icon name="search" [size]="16" class="pointer-events-none absolute left-2.5 text-ink-faint" />
+              <div
+                class="relative flex items-center rounded-control border border-border focus-within:border-brand-500"
+              >
+                <sds-icon
+                  name="search"
+                  [size]="16"
+                  class="pointer-events-none absolute left-2.5 text-ink-faint"
+                />
                 <input
                   type="text"
                   role="combobox"
@@ -11310,7 +11331,10 @@ class SdsSelect {
                 <li class="px-3 py-2 text-sm text-ink-faint">
                   <ng-container
                     [ngTemplateOutlet]="emptyTpl()!.template"
-                    [ngTemplateOutletContext]="{ $implicit: filterText(), filterText: filterText() }"
+                    [ngTemplateOutletContext]="{
+                      $implicit: filterText(),
+                      filterText: filterText(),
+                    }"
                   />
                 </li>
               } @else {
@@ -11386,10 +11410,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             />
           </span>
         } @else {
-          <span
-            class="flex-1 truncate pl-3.5"
-            [class]="valueTextClass()"
-          >
+          <span class="flex-1 truncate pl-3.5" [class]="valueTextClass()">
             {{ selectedOption() ? selectedOption()!.label : placeholder() }}
           </span>
         }
@@ -11400,7 +11421,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             tabindex="-1"
             [attr.aria-label]="clearLabel()"
             class="mr-1 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full"
-            [class]="onBrand() ? 'text-white/60 hover:bg-white/10 hover:text-white' : 'text-ink-faint hover:bg-black/5 hover:text-ink-soft'"
+            [class]="
+              onBrand()
+                ? 'text-white/60 hover:bg-white/10 hover:text-white'
+                : 'text-ink-faint hover:bg-black/5 hover:text-ink-soft'
+            "
             (click)="clear($event)"
           >
             <sds-icon name="x" [size]="15" />
@@ -11419,11 +11444,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
       @if (open()) {
         <!-- Appended to document.body on open (see positionPanel). -->
-        <div data-sds-select-panel class="fixed z-[1000] overflow-hidden rounded-card border border-border bg-surface shadow-lg">
+        <div
+          data-sds-select-panel
+          class="fixed z-[1000] overflow-hidden rounded-card border border-border bg-surface shadow-lg"
+        >
           @if (filter()) {
             <div class="border-b border-border p-2">
-              <div class="relative flex items-center rounded-control border border-border focus-within:border-brand-500">
-                <sds-icon name="search" [size]="16" class="pointer-events-none absolute left-2.5 text-ink-faint" />
+              <div
+                class="relative flex items-center rounded-control border border-border focus-within:border-brand-500"
+              >
+                <sds-icon
+                  name="search"
+                  [size]="16"
+                  class="pointer-events-none absolute left-2.5 text-ink-faint"
+                />
                 <input
                   type="text"
                   role="combobox"
@@ -11472,7 +11506,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 <li class="px-3 py-2 text-sm text-ink-faint">
                   <ng-container
                     [ngTemplateOutlet]="emptyTpl()!.template"
-                    [ngTemplateOutletContext]="{ $implicit: filterText(), filterText: filterText() }"
+                    [ngTemplateOutletContext]="{
+                      $implicit: filterText(),
+                      filterText: filterText(),
+                    }"
                   />
                 </li>
               } @else {
@@ -11596,6 +11633,8 @@ class SdsMultiSelect {
     cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
     trigger = viewChild('trigger', ...(ngDevMode ? [{ debugName: "trigger" }] : []));
     panelEl = null;
+    /** Body-appending, positioning, follow-on-scroll and teardown — see SdsOverlayPanel. */
+    overlay = new SdsOverlayPanel();
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     normalizedOptions = computed(() => this.options().map((o) => this.norm(o)), ...(ngDevMode ? [{ debugName: "normalizedOptions" }] : []));
     filteredOptions = computed(() => {
@@ -11641,9 +11680,7 @@ class SdsMultiSelect {
         parts.push(this.error()
             ? 'border-danger focus:border-danger focus:ring-2 focus:ring-danger/25'
             : 'border-border focus:border-brand-500 focus:ring-2 focus:ring-brand-500/25');
-        parts.push(this.isDisabled()
-            ? 'opacity-60 cursor-not-allowed pointer-events-none'
-            : 'cursor-pointer');
+        parts.push(this.isDisabled() ? 'opacity-60 cursor-not-allowed pointer-events-none' : 'cursor-pointer');
         return parts.join(' ');
     }, ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : []));
     // --- normalization & equality ---
@@ -11672,7 +11709,11 @@ class SdsMultiSelect {
     }
     /** Context for a projected footer template. */
     footerContext() {
-        return { $implicit: this.filterText(), filterText: this.filterText(), close: () => this.close(true) };
+        return {
+            $implicit: this.filterText(),
+            filterText: this.filterText(),
+            close: () => this.close(true),
+        };
     }
     equals(a, b) {
         const k = this.dataKey();
@@ -11718,9 +11759,9 @@ class SdsMultiSelect {
         this.onTouched();
         this.initHighlight();
         afterNextRender(() => {
-            this.panelEl = this.host.nativeElement.querySelector('[data-sds-select-panel]');
-            this.positionPanel();
-            this.addReflowListeners();
+            this.panelEl =
+                this.host.nativeElement.querySelector('[data-sds-select-panel]');
+            this.attachPanel();
             if (this.filter()) {
                 this.panelEl?.querySelector('input')?.focus();
             }
@@ -11733,8 +11774,7 @@ class SdsMultiSelect {
     close(returnFocus = false) {
         if (!this.open())
             return;
-        this.removeReflowListeners();
-        this.panelEl?.remove();
+        this.overlay.detach();
         this.panelEl = null;
         this.open.set(false);
         if (returnFocus)
@@ -11752,9 +11792,7 @@ class SdsMultiSelect {
     toggleOption(opt) {
         const cur = this.value();
         const exists = cur.some((x) => this.equals(x, opt.value));
-        const next = exists
-            ? cur.filter((x) => !this.equals(x, opt.value))
-            : [...cur, opt.value];
+        const next = exists ? cur.filter((x) => !this.equals(x, opt.value)) : [...cur, opt.value];
         this.setValue(next);
     }
     toggleAll() {
@@ -11770,7 +11808,7 @@ class SdsMultiSelect {
     onFilter(event) {
         this.filterText.set(event.target.value);
         this.highlightFirst();
-        setTimeout(() => this.positionPanel());
+        setTimeout(() => this.overlay.reposition());
     }
     // --- keyboard ---
     onTriggerKeydown(event) {
@@ -11835,7 +11873,8 @@ class SdsMultiSelect {
             case 'Tab':
                 this.close(false);
                 return true;
-            default: return false;
+            default:
+                return false;
         }
     }
     initHighlight() {
@@ -11903,46 +11942,12 @@ class SdsMultiSelect {
             el?.scrollIntoView({ block: 'nearest' });
         });
     }
-    // --- body-appended overlay positioning (mirrors sds-select) ---
-    reflow = () => this.positionPanel();
-    listening = false;
-    addReflowListeners() {
-        if (this.listening)
-            return;
-        window.addEventListener('scroll', this.reflow, true);
-        window.addEventListener('resize', this.reflow);
-        this.listening = true;
-    }
-    removeReflowListeners() {
-        if (!this.listening)
-            return;
-        window.removeEventListener('scroll', this.reflow, true);
-        window.removeEventListener('resize', this.reflow);
-        this.listening = false;
-    }
-    positionPanel() {
-        const triggerEl = this.trigger()?.nativeElement;
-        const panelEl = this.panelEl;
-        if (!triggerEl || !panelEl)
-            return;
-        if (panelEl.parentElement !== document.body)
-            document.body.appendChild(panelEl);
-        const r = triggerEl.getBoundingClientRect();
-        panelEl.style.minWidth = `${Math.round(r.width)}px`;
-        const ph = panelEl.offsetHeight || 240;
-        const gap = 4;
-        const margin = 8;
-        let top = r.bottom + gap;
-        if (top + ph > window.innerHeight - margin && r.top - gap - ph > margin) {
-            top = r.top - gap - ph;
+    /** Attach once the panel exists — it is rendered inside an `@if`. */
+    attachPanel() {
+        const trigger = this.trigger()?.nativeElement;
+        if (trigger && this.panelEl) {
+            this.overlay.attach(trigger, this.panelEl, { width: 'min' });
         }
-        let left = r.left;
-        const pw = panelEl.offsetWidth || r.width;
-        if (left + pw > window.innerWidth - margin) {
-            left = Math.max(margin, window.innerWidth - margin - pw);
-        }
-        panelEl.style.top = `${Math.round(top)}px`;
-        panelEl.style.left = `${Math.round(left)}px`;
     }
     onDocumentClick(event) {
         if (!this.open())
@@ -11954,9 +11959,8 @@ class SdsMultiSelect {
             this.close();
     }
     ngOnDestroy() {
-        this.removeReflowListeners();
         clearTimeout(this.typeTimer);
-        this.panelEl?.remove();
+        this.overlay.detach();
     }
     setValue(v) {
         this.value.set(v);
@@ -11964,7 +11968,7 @@ class SdsMultiSelect {
         this.onTouched();
         // Chip display can change the trigger height while the panel is open.
         if (this.open())
-            setTimeout(() => this.positionPanel());
+            setTimeout(() => this.overlay.reposition());
     }
     // --- ControlValueAccessor ---
     onChange = () => { };
@@ -12012,7 +12016,9 @@ class SdsMultiSelect {
         @if (display() === 'chip' && selectedOptions().length) {
           <div class="flex flex-1 flex-wrap items-center gap-1 py-1 pl-2">
             @for (opt of selectedOptions(); track $index) {
-              <span class="inline-flex items-center gap-1 rounded bg-brand-50 py-0.5 pl-2 pr-1 text-xs font-medium text-brand-700">
+              <span
+                class="inline-flex items-center gap-1 rounded bg-brand-50 py-0.5 pl-2 pr-1 text-xs font-medium text-brand-700"
+              >
                 {{ opt.label }}
                 <button
                   type="button"
@@ -12057,11 +12063,20 @@ class SdsMultiSelect {
 
       @if (open()) {
         <!-- Appended to document.body on open (see positionPanel). -->
-        <div data-sds-select-panel class="fixed z-[1000] overflow-hidden rounded-card border border-border bg-surface shadow-lg">
+        <div
+          data-sds-select-panel
+          class="fixed z-[1000] overflow-hidden rounded-card border border-border bg-surface shadow-lg"
+        >
           @if (filter()) {
             <div class="border-b border-border p-2">
-              <div class="relative flex items-center rounded-control border border-border focus-within:border-brand-500">
-                <sds-icon name="search" [size]="16" class="pointer-events-none absolute left-2.5 text-ink-faint" />
+              <div
+                class="relative flex items-center rounded-control border border-border focus-within:border-brand-500"
+              >
+                <sds-icon
+                  name="search"
+                  [size]="16"
+                  class="pointer-events-none absolute left-2.5 text-ink-faint"
+                />
                 <input
                   type="text"
                   role="combobox"
@@ -12085,13 +12100,18 @@ class SdsMultiSelect {
               role="checkbox"
               [id]="toggleAllId"
               [attr.data-index]="-1"
-              [attr.aria-checked]="allFilteredSelected() ? 'true' : (toggleAllIndeterminate() ? 'mixed' : 'false')"
+              [attr.aria-checked]="
+                allFilteredSelected() ? 'true' : toggleAllIndeterminate() ? 'mixed' : 'false'
+              "
               class="flex w-full items-center gap-2.5 border-b border-border px-3 py-2 text-sm text-ink"
               [class.bg-brand-50]="highlightedIndex() === -1"
               (click)="toggleAll()"
               (mouseenter)="highlightedIndex.set(-1)"
             >
-              <span class="grid h-[18px] w-[18px] shrink-0 place-items-center rounded border" [class]="checkboxClass(allFilteredSelected(), toggleAllIndeterminate())">
+              <span
+                class="grid h-[18px] w-[18px] shrink-0 place-items-center rounded border"
+                [class]="checkboxClass(allFilteredSelected(), toggleAllIndeterminate())"
+              >
                 @if (allFilteredSelected()) {
                   <sds-icon name="check" [size]="12" />
                 } @else if (toggleAllIndeterminate()) {
@@ -12102,7 +12122,12 @@ class SdsMultiSelect {
             </button>
           }
 
-          <ul [id]="listId" role="listbox" aria-multiselectable="true" class="max-h-60 overflow-auto py-1">
+          <ul
+            [id]="listId"
+            role="listbox"
+            aria-multiselectable="true"
+            class="max-h-60 overflow-auto py-1"
+          >
             @for (opt of filteredOptions(); track $index; let i = $index) {
               <li
                 [id]="optionId(i)"
@@ -12114,7 +12139,10 @@ class SdsMultiSelect {
                 (click)="opt.disabled ? null : toggleOption(opt)"
                 (mouseenter)="opt.disabled ? null : highlightedIndex.set(i)"
               >
-                <span class="grid h-[18px] w-[18px] shrink-0 place-items-center rounded border" [class]="checkboxClass(isSelected(opt.value), false)">
+                <span
+                  class="grid h-[18px] w-[18px] shrink-0 place-items-center rounded border"
+                  [class]="checkboxClass(isSelected(opt.value), false)"
+                >
                   @if (isSelected(opt.value)) {
                     <sds-icon name="check" [size]="12" />
                   }
@@ -12135,7 +12163,10 @@ class SdsMultiSelect {
                 <li class="px-3 py-2 text-sm text-ink-faint">
                   <ng-container
                     [ngTemplateOutlet]="emptyTpl()!.template"
-                    [ngTemplateOutletContext]="{ $implicit: filterText(), filterText: filterText() }"
+                    [ngTemplateOutletContext]="{
+                      $implicit: filterText(),
+                      filterText: filterText(),
+                    }"
                   />
                 </li>
               } @else {
@@ -12203,7 +12234,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         @if (display() === 'chip' && selectedOptions().length) {
           <div class="flex flex-1 flex-wrap items-center gap-1 py-1 pl-2">
             @for (opt of selectedOptions(); track $index) {
-              <span class="inline-flex items-center gap-1 rounded bg-brand-50 py-0.5 pl-2 pr-1 text-xs font-medium text-brand-700">
+              <span
+                class="inline-flex items-center gap-1 rounded bg-brand-50 py-0.5 pl-2 pr-1 text-xs font-medium text-brand-700"
+              >
                 {{ opt.label }}
                 <button
                   type="button"
@@ -12248,11 +12281,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
       @if (open()) {
         <!-- Appended to document.body on open (see positionPanel). -->
-        <div data-sds-select-panel class="fixed z-[1000] overflow-hidden rounded-card border border-border bg-surface shadow-lg">
+        <div
+          data-sds-select-panel
+          class="fixed z-[1000] overflow-hidden rounded-card border border-border bg-surface shadow-lg"
+        >
           @if (filter()) {
             <div class="border-b border-border p-2">
-              <div class="relative flex items-center rounded-control border border-border focus-within:border-brand-500">
-                <sds-icon name="search" [size]="16" class="pointer-events-none absolute left-2.5 text-ink-faint" />
+              <div
+                class="relative flex items-center rounded-control border border-border focus-within:border-brand-500"
+              >
+                <sds-icon
+                  name="search"
+                  [size]="16"
+                  class="pointer-events-none absolute left-2.5 text-ink-faint"
+                />
                 <input
                   type="text"
                   role="combobox"
@@ -12276,13 +12318,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               role="checkbox"
               [id]="toggleAllId"
               [attr.data-index]="-1"
-              [attr.aria-checked]="allFilteredSelected() ? 'true' : (toggleAllIndeterminate() ? 'mixed' : 'false')"
+              [attr.aria-checked]="
+                allFilteredSelected() ? 'true' : toggleAllIndeterminate() ? 'mixed' : 'false'
+              "
               class="flex w-full items-center gap-2.5 border-b border-border px-3 py-2 text-sm text-ink"
               [class.bg-brand-50]="highlightedIndex() === -1"
               (click)="toggleAll()"
               (mouseenter)="highlightedIndex.set(-1)"
             >
-              <span class="grid h-[18px] w-[18px] shrink-0 place-items-center rounded border" [class]="checkboxClass(allFilteredSelected(), toggleAllIndeterminate())">
+              <span
+                class="grid h-[18px] w-[18px] shrink-0 place-items-center rounded border"
+                [class]="checkboxClass(allFilteredSelected(), toggleAllIndeterminate())"
+              >
                 @if (allFilteredSelected()) {
                   <sds-icon name="check" [size]="12" />
                 } @else if (toggleAllIndeterminate()) {
@@ -12293,7 +12340,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             </button>
           }
 
-          <ul [id]="listId" role="listbox" aria-multiselectable="true" class="max-h-60 overflow-auto py-1">
+          <ul
+            [id]="listId"
+            role="listbox"
+            aria-multiselectable="true"
+            class="max-h-60 overflow-auto py-1"
+          >
             @for (opt of filteredOptions(); track $index; let i = $index) {
               <li
                 [id]="optionId(i)"
@@ -12305,7 +12357,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 (click)="opt.disabled ? null : toggleOption(opt)"
                 (mouseenter)="opt.disabled ? null : highlightedIndex.set(i)"
               >
-                <span class="grid h-[18px] w-[18px] shrink-0 place-items-center rounded border" [class]="checkboxClass(isSelected(opt.value), false)">
+                <span
+                  class="grid h-[18px] w-[18px] shrink-0 place-items-center rounded border"
+                  [class]="checkboxClass(isSelected(opt.value), false)"
+                >
                   @if (isSelected(opt.value)) {
                     <sds-icon name="check" [size]="12" />
                   }
@@ -12326,7 +12381,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 <li class="px-3 py-2 text-sm text-ink-faint">
                   <ng-container
                     [ngTemplateOutlet]="emptyTpl()!.template"
-                    [ngTemplateOutletContext]="{ $implicit: filterText(), filterText: filterText() }"
+                    [ngTemplateOutletContext]="{
+                      $implicit: filterText(),
+                      filterText: filterText(),
+                    }"
                   />
                 </li>
               } @else {
@@ -12450,15 +12508,8 @@ class SdsAutocomplete {
     cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
     /** Every option this control has seen, by value — how a chip keeps its label after a new search. */
     seen = new Map();
-    /**
-     * A plain reference to the body-appended panel, not just the viewChild.
-     *
-     * <p>On destroy the viewChild is already cleared — it lives inside an `@if` — so removing through
-     * it removes nothing and the panel is orphaned in `<body>` for ever. A test caught it: a leaked
-     * panel from one spec was still in the document when the next one queried for its own.
-     * `sds-select` keeps the same raw handle, for the same reason.
-     */
-    panelEl = null;
+    /** Body-appending, positioning, follow-on-scroll and teardown all live in here now. */
+    overlay = new SdsOverlayPanel();
     timer;
     seq = 0;
     destroyed = false;
@@ -12490,7 +12541,7 @@ class SdsAutocomplete {
     }, ...(ngDevMode ? [{ debugName: "triggerPlaceholder" }] : []));
     closeFn = () => this.close();
     constructor() {
-        afterNextRender(() => this.position(), { injector: this.injector });
+        afterNextRender(() => this.place(), { injector: this.injector });
     }
     // ------------------------------------------------------------------ options
     labelOf(option) {
@@ -12553,8 +12604,7 @@ class SdsAutocomplete {
         this.open.set(true);
         this.opened.emit();
         this.schedule(0);
-        setTimeout(() => this.position());
-        this.addReflow();
+        setTimeout(() => this.place());
     }
     toggle(event) {
         event.stopPropagation();
@@ -12598,7 +12648,8 @@ class SdsAutocomplete {
         finally {
             if (seq === this.seq && !this.destroyed) {
                 this.loading.set(false);
-                setTimeout(() => this.position());
+                // The panel's height changed with its contents, so it may now need flipping.
+                setTimeout(() => this.overlay.reposition());
             }
         }
     }
@@ -12682,67 +12733,29 @@ class SdsAutocomplete {
             return;
         this.open.set(false);
         this.active.set(-1);
-        this.removeReflow();
-        this.panelEl?.remove();
-        this.panelEl = null;
+        this.overlay.detach();
         this.closed.emit(this.value());
     }
     onDocumentClick(event) {
         if (!this.open())
             return;
         const target = event.target;
-        if (!this.host.nativeElement.contains(target) && !this.panelEl?.contains(target)) {
+        if (!this.host.nativeElement.contains(target) && !this.overlay.contains(target)) {
             this.close();
         }
     }
-    // --- body-appended overlay positioning (mirrors sds-select) ---
-    reflow = () => this.position();
-    listening = false;
-    addReflow() {
-        if (this.listening)
-            return;
-        window.addEventListener('scroll', this.reflow, true);
-        window.addEventListener('resize', this.reflow);
-        this.listening = true;
-    }
-    removeReflow() {
-        if (!this.listening)
-            return;
-        window.removeEventListener('scroll', this.reflow, true);
-        window.removeEventListener('resize', this.reflow);
-        this.listening = false;
-    }
-    position() {
+    /** Attach once the panel exists in the DOM — it is inside an `@if`. */
+    place() {
         const trigger = this.triggerEl()?.nativeElement;
         const panel = this.panelRef()?.nativeElement;
-        if (!trigger || !panel)
-            return;
-        this.panelEl = panel;
-        if (panel.parentElement !== document.body)
-            document.body.appendChild(panel);
-        const r = trigger.getBoundingClientRect();
-        panel.style.minWidth = `${Math.round(r.width)}px`;
-        const ph = panel.offsetHeight || 240;
-        const gap = 4;
-        const margin = 8;
-        let top = r.bottom + gap;
-        if (top + ph > window.innerHeight - margin && r.top - gap - ph > margin) {
-            top = r.top - gap - ph;
+        if (trigger && panel) {
+            this.overlay.attach(trigger, panel, { width: 'min' });
         }
-        let left = r.left;
-        const pw = panel.offsetWidth || r.width;
-        if (left + pw > window.innerWidth - margin) {
-            left = Math.max(margin, window.innerWidth - margin - pw);
-        }
-        panel.style.top = `${Math.round(top)}px`;
-        panel.style.left = `${Math.round(left)}px`;
     }
     ngOnDestroy() {
         this.destroyed = true;
         clearTimeout(this.timer);
-        this.removeReflow();
-        this.panelEl?.remove();
-        this.panelEl = null;
+        this.overlay.detach();
     }
     setValue(v) {
         this.value.set(v);
@@ -13110,26 +13123,166 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }], ctorParameters: () => [], propDecorators: { search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], minChars: [{ type: i0.Input, args: [{ isSignal: true, alias: "minChars", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], selectedOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedOptions", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], searchingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchingText", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], searchErrorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchErrorText", required: false }] }], minCharsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "minCharsText", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], openLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openLabel", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], triggerEl: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], fieldEl: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], optionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectOption), { isSignal: true }] }], emptyTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectEmpty), { isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectFooter), { isSignal: true }] }] } });
 
 const SDS_PHONE_COUNTRIES = [
-    { iso2: 'BE', name: 'Belgium', dialCode: '32', lengths: [9], format: '### ## ## ##', example: '470123456' },
-    { iso2: 'FR', name: 'France', dialCode: '33', lengths: [9], format: '# ## ## ## ##', example: '612345678' },
-    { iso2: 'LU', name: 'Luxembourg', dialCode: '352', lengths: [9, 8, 6], format: '### ### ###', example: '628123456' },
-    { iso2: 'NL', name: 'Netherlands', dialCode: '31', lengths: [9], format: '# ## ## ## ##', example: '612345678' },
-    { iso2: 'DE', name: 'Germany', dialCode: '49', lengths: [10, 11], format: '#### #######', example: '15123456789' },
-    { iso2: 'GB', name: 'United Kingdom', dialCode: '44', lengths: [10], format: '#### ######', example: '7400123456' },
-    { iso2: 'IE', name: 'Ireland', dialCode: '353', lengths: [9], format: '## ### ####', example: '850123456' },
-    { iso2: 'CH', name: 'Switzerland', dialCode: '41', lengths: [9], format: '## ### ## ##', example: '781234567' },
-    { iso2: 'ES', name: 'Spain', dialCode: '34', lengths: [9], format: '### ## ## ##', example: '612345678' },
-    { iso2: 'IT', name: 'Italy', dialCode: '39', lengths: [9, 10], format: '### ### ####', example: '3123456789' },
-    { iso2: 'PT', name: 'Portugal', dialCode: '351', lengths: [9], format: '### ### ###', example: '912345678' },
-    { iso2: 'AT', name: 'Austria', dialCode: '43', lengths: [10, 11], format: '### #######', example: '6641234567' },
-    { iso2: 'DK', name: 'Denmark', dialCode: '45', lengths: [8], format: '## ## ## ##', example: '20123456' },
-    { iso2: 'SE', name: 'Sweden', dialCode: '46', lengths: [9], format: '## ### ## ##', example: '701234567' },
-    { iso2: 'NO', name: 'Norway', dialCode: '47', lengths: [8], format: '### ## ###', example: '40612345' },
-    { iso2: 'PL', name: 'Poland', dialCode: '48', lengths: [9], format: '### ### ###', example: '512345678' },
-    { iso2: 'US', name: 'United States', dialCode: '1', lengths: [10], format: '(###) ###-####', example: '2015550123' },
-    { iso2: 'CA', name: 'Canada', dialCode: '1', lengths: [10], format: '(###) ###-####', example: '2042345678' },
-    { iso2: 'MA', name: 'Morocco', dialCode: '212', lengths: [9], format: '### ## ## ##', example: '612345678' },
-    { iso2: 'TR', name: 'Turkey', dialCode: '90', lengths: [10], format: '### ### ## ##', example: '5012345678' },
+    {
+        iso2: 'BE',
+        name: 'Belgium',
+        dialCode: '32',
+        lengths: [9],
+        format: '### ## ## ##',
+        example: '470123456',
+    },
+    {
+        iso2: 'FR',
+        name: 'France',
+        dialCode: '33',
+        lengths: [9],
+        format: '# ## ## ## ##',
+        example: '612345678',
+    },
+    {
+        iso2: 'LU',
+        name: 'Luxembourg',
+        dialCode: '352',
+        lengths: [9, 8, 6],
+        format: '### ### ###',
+        example: '628123456',
+    },
+    {
+        iso2: 'NL',
+        name: 'Netherlands',
+        dialCode: '31',
+        lengths: [9],
+        format: '# ## ## ## ##',
+        example: '612345678',
+    },
+    {
+        iso2: 'DE',
+        name: 'Germany',
+        dialCode: '49',
+        lengths: [10, 11],
+        format: '#### #######',
+        example: '15123456789',
+    },
+    {
+        iso2: 'GB',
+        name: 'United Kingdom',
+        dialCode: '44',
+        lengths: [10],
+        format: '#### ######',
+        example: '7400123456',
+    },
+    {
+        iso2: 'IE',
+        name: 'Ireland',
+        dialCode: '353',
+        lengths: [9],
+        format: '## ### ####',
+        example: '850123456',
+    },
+    {
+        iso2: 'CH',
+        name: 'Switzerland',
+        dialCode: '41',
+        lengths: [9],
+        format: '## ### ## ##',
+        example: '781234567',
+    },
+    {
+        iso2: 'ES',
+        name: 'Spain',
+        dialCode: '34',
+        lengths: [9],
+        format: '### ## ## ##',
+        example: '612345678',
+    },
+    {
+        iso2: 'IT',
+        name: 'Italy',
+        dialCode: '39',
+        lengths: [9, 10],
+        format: '### ### ####',
+        example: '3123456789',
+    },
+    {
+        iso2: 'PT',
+        name: 'Portugal',
+        dialCode: '351',
+        lengths: [9],
+        format: '### ### ###',
+        example: '912345678',
+    },
+    {
+        iso2: 'AT',
+        name: 'Austria',
+        dialCode: '43',
+        lengths: [10, 11],
+        format: '### #######',
+        example: '6641234567',
+    },
+    {
+        iso2: 'DK',
+        name: 'Denmark',
+        dialCode: '45',
+        lengths: [8],
+        format: '## ## ## ##',
+        example: '20123456',
+    },
+    {
+        iso2: 'SE',
+        name: 'Sweden',
+        dialCode: '46',
+        lengths: [9],
+        format: '## ### ## ##',
+        example: '701234567',
+    },
+    {
+        iso2: 'NO',
+        name: 'Norway',
+        dialCode: '47',
+        lengths: [8],
+        format: '### ## ###',
+        example: '40612345',
+    },
+    {
+        iso2: 'PL',
+        name: 'Poland',
+        dialCode: '48',
+        lengths: [9],
+        format: '### ### ###',
+        example: '512345678',
+    },
+    {
+        iso2: 'US',
+        name: 'United States',
+        dialCode: '1',
+        lengths: [10],
+        format: '(###) ###-####',
+        example: '2015550123',
+    },
+    {
+        iso2: 'CA',
+        name: 'Canada',
+        dialCode: '1',
+        lengths: [10],
+        format: '(###) ###-####',
+        example: '2042345678',
+    },
+    {
+        iso2: 'MA',
+        name: 'Morocco',
+        dialCode: '212',
+        lengths: [9],
+        format: '### ## ## ##',
+        example: '612345678',
+    },
+    {
+        iso2: 'TR',
+        name: 'Turkey',
+        dialCode: '90',
+        lengths: [10],
+        format: '### ### ## ##',
+        example: '5012345678',
+    },
 ];
 /** Reduce raw input to national-significant digits (drops non-digits & leading trunk zeros). */
 function sdsNormalizeSignificant(raw) {
@@ -13280,6 +13433,8 @@ class SdsPhoneInput {
     anchor = viewChild('anchor', ...(ngDevMode ? [{ debugName: "anchor" }] : []));
     field = viewChild('field', ...(ngDevMode ? [{ debugName: "field" }] : []));
     panelEl = null;
+    /** Body-appending, positioning, follow-on-scroll and teardown — see SdsOverlayPanel. */
+    overlay = new SdsOverlayPanel();
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     /** Countries after applying [onlyCountries] and [preferredCountries] ordering. */
     availableCountries = computed(() => {
@@ -13413,8 +13568,7 @@ class SdsPhoneInput {
         this.open.set(true);
         afterNextRender(() => {
             this.panelEl = this.host.nativeElement.querySelector('[data-sds-phone-panel]');
-            this.positionPanel();
-            this.addReflowListeners();
+            this.attachPanel();
             this.panelEl?.querySelector('input')?.focus();
             this.scrollHighlightedIntoView();
         }, { injector: this.injector });
@@ -13422,8 +13576,7 @@ class SdsPhoneInput {
     close(returnFocus = false) {
         if (!this.open())
             return;
-        this.removeReflowListeners();
-        this.panelEl?.remove();
+        this.overlay.detach();
         this.panelEl = null;
         this.open.set(false);
         if (returnFocus)
@@ -13444,7 +13597,7 @@ class SdsPhoneInput {
     onFilter(event) {
         this.filterText.set(event.target.value);
         this.highlightedIndex.set(this.filteredCountries().length ? 0 : -1);
-        setTimeout(() => this.positionPanel());
+        setTimeout(() => this.overlay.reposition());
     }
     // --- keyboard ---
     onTriggerKeydown(event) {
@@ -13514,46 +13667,12 @@ class SdsPhoneInput {
                 ?.scrollIntoView({ block: 'nearest' });
         });
     }
-    // --- body-appended overlay positioning (mirrors sds-select) ---
-    reflow = () => this.positionPanel();
-    listening = false;
-    addReflowListeners() {
-        if (this.listening)
-            return;
-        window.addEventListener('scroll', this.reflow, true);
-        window.addEventListener('resize', this.reflow);
-        this.listening = true;
-    }
-    removeReflowListeners() {
-        if (!this.listening)
-            return;
-        window.removeEventListener('scroll', this.reflow, true);
-        window.removeEventListener('resize', this.reflow);
-        this.listening = false;
-    }
-    positionPanel() {
-        const anchorEl = this.anchor()?.nativeElement;
-        const panelEl = this.panelEl;
-        if (!anchorEl || !panelEl)
-            return;
-        if (panelEl.parentElement !== document.body)
-            document.body.appendChild(panelEl);
-        const r = anchorEl.getBoundingClientRect();
-        panelEl.style.minWidth = `${Math.round(r.width)}px`;
-        const ph = panelEl.offsetHeight || 280;
-        const gap = 4;
-        const margin = 8;
-        let top = r.bottom + gap;
-        if (top + ph > window.innerHeight - margin && r.top - gap - ph > margin) {
-            top = r.top - gap - ph;
-        }
-        let left = r.left;
-        const pw = panelEl.offsetWidth || r.width;
-        if (left + pw > window.innerWidth - margin) {
-            left = Math.max(margin, window.innerWidth - margin - pw);
+    /** Attach once the panel exists — it is rendered inside an `@if`. */
+    attachPanel() {
+        const trigger = this.anchor()?.nativeElement;
+        if (trigger && this.panelEl) {
+            this.overlay.attach(trigger, this.panelEl, { width: 'min' });
         }
-        panelEl.style.top = `${Math.round(top)}px`;
-        panelEl.style.left = `${Math.round(left)}px`;
     }
     onDocumentClick(event) {
         if (!this.open())
@@ -13569,8 +13688,7 @@ class SdsPhoneInput {
         this.onTouched();
     }
     ngOnDestroy() {
-        this.removeReflowListeners();
-        this.panelEl?.remove();
+        this.overlay.detach();
     }
     emit() {
         const value = this.e164();
@@ -13667,7 +13785,9 @@ class SdsPhoneInput {
         (click)="toggle()"
         (keydown)="onTriggerKeydown($event)"
       >
-        <span class="grid h-5 min-w-7 place-items-center rounded bg-muted px-1 text-[11px] font-semibold tracking-wide text-ink-soft">
+        <span
+          class="grid h-5 min-w-7 place-items-center rounded bg-muted px-1 text-[11px] font-semibold tracking-wide text-ink-soft"
+        >
           {{ country().iso2 }}
         </span>
         <span class="text-ink-soft">+{{ country().dialCode }}</span>
@@ -13718,8 +13838,14 @@ class SdsPhoneInput {
         class="fixed z-[1000] overflow-hidden rounded-card border border-border bg-surface shadow-lg"
       >
         <div class="border-b border-border p-2">
-          <div class="relative flex items-center rounded-control border border-border focus-within:border-brand-500">
-            <sds-icon name="search" [size]="16" class="pointer-events-none absolute left-2.5 text-ink-faint" />
+          <div
+            class="relative flex items-center rounded-control border border-border focus-within:border-brand-500"
+          >
+            <sds-icon
+              name="search"
+              [size]="16"
+              class="pointer-events-none absolute left-2.5 text-ink-faint"
+            />
             <input
               type="text"
               [attr.aria-controls]="listId"
@@ -13744,7 +13870,9 @@ class SdsPhoneInput {
               (click)="selectCountry(c)"
               (mouseenter)="highlightedIndex.set(i)"
             >
-              <span class="grid h-5 min-w-7 place-items-center rounded bg-muted px-1 text-[11px] font-semibold tracking-wide text-ink-soft">
+              <span
+                class="grid h-5 min-w-7 place-items-center rounded bg-muted px-1 text-[11px] font-semibold tracking-wide text-ink-soft"
+              >
                 {{ c.iso2 }}
               </span>
               <span class="flex-1 truncate">{{ countryName(c) }}</span>
@@ -13808,7 +13936,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         (click)="toggle()"
         (keydown)="onTriggerKeydown($event)"
       >
-        <span class="grid h-5 min-w-7 place-items-center rounded bg-muted px-1 text-[11px] font-semibold tracking-wide text-ink-soft">
+        <span
+          class="grid h-5 min-w-7 place-items-center rounded bg-muted px-1 text-[11px] font-semibold tracking-wide text-ink-soft"
+        >
           {{ country().iso2 }}
         </span>
         <span class="text-ink-soft">+{{ country().dialCode }}</span>
@@ -13859,8 +13989,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         class="fixed z-[1000] overflow-hidden rounded-card border border-border bg-surface shadow-lg"
       >
         <div class="border-b border-border p-2">
-          <div class="relative flex items-center rounded-control border border-border focus-within:border-brand-500">
-            <sds-icon name="search" [size]="16" class="pointer-events-none absolute left-2.5 text-ink-faint" />
+          <div
+            class="relative flex items-center rounded-control border border-border focus-within:border-brand-500"
+          >
+            <sds-icon
+              name="search"
+              [size]="16"
+              class="pointer-events-none absolute left-2.5 text-ink-faint"
+            />
             <input
               type="text"
               [attr.aria-controls]="listId"
@@ -13885,7 +14021,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               (click)="selectCountry(c)"
               (mouseenter)="highlightedIndex.set(i)"
             >
-              <span class="grid h-5 min-w-7 place-items-center rounded bg-muted px-1 text-[11px] font-semibold tracking-wide text-ink-soft">
+              <span
+                class="grid h-5 min-w-7 place-items-center rounded bg-muted px-1 text-[11px] font-semibold tracking-wide text-ink-soft"
+              >
                 {{ c.iso2 }}
               </span>
               <span class="flex-1 truncate">{{ countryName(c) }}</span>
@@ -14070,7 +14208,8 @@ class SdsAddressAutocomplete {
     seq = 0;
     timer;
     destroyed = false;
-    panelEl = null;
+    /** Body-appending, positioning, follow-on-scroll and teardown — see SdsOverlayPanel. */
+    overlay = new SdsOverlayPanel();
     fieldId = computed(() => this.inputId() || this.autoId, ...(ngDevMode ? [{ debugName: "fieldId" }] : []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     pill = computed(() => this.shape() === 'pill', ...(ngDevMode ? [{ debugName: "pill" }] : []));
@@ -14333,79 +14472,57 @@ class SdsAddressAutocomplete {
     }
     scrollHighlightedIntoView() {
         setTimeout(() => {
-            const root = this.panelEl ?? this.host.nativeElement;
+            const root = this.overlay.element ?? this.host.nativeElement;
             root
                 .querySelector(`[data-index="${this.highlighted()}"]`)
                 ?.scrollIntoView?.({ block: 'nearest' });
         });
     }
     // --- overlay ----------------------------------------------------------------
-    /** Close the overlay (a no-op `inline`, where the rows are always shown). */
-    close() {
-        this.open.set(false);
-        this.highlighted.set(-1);
-        this.detachPanel();
-    }
-    reflow = () => this.positionPanel();
-    listening = false;
+    /**
+     * Keep the body-appended panel in step with whether it should be shown at all.
+     *
+     * <p>Driven from `afterEveryRender`, so it runs on every change and must be cheap and idempotent
+     * — attaching once, then repositioning while it stays open.
+     */
     syncPanel() {
         if (this.inline() || !this.panelShown()) {
-            if (this.panelEl)
-                this.detachPanel();
+            this.overlay.detach();
             return;
         }
-        if (!this.panelEl) {
-            this.panelEl = this.host.nativeElement.querySelector('[data-sds-address-panel]');
-            if (!this.panelEl)
-                return;
-            document.body.appendChild(this.panelEl);
-            if (!this.listening) {
-                window.addEventListener('scroll', this.reflow, true);
-                window.addEventListener('resize', this.reflow);
-                this.listening = true;
-            }
-        }
-        this.positionPanel();
-    }
-    detachPanel() {
-        if (this.listening) {
-            window.removeEventListener('scroll', this.reflow, true);
-            window.removeEventListener('resize', this.reflow);
-            this.listening = false;
-        }
-        this.panelEl?.remove();
-        this.panelEl = null;
-    }
-    positionPanel() {
-        const fieldEl = this.fieldRef()?.nativeElement;
-        const panelEl = this.panelEl;
-        if (!fieldEl || !panelEl)
+        const field = this.fieldRef()?.nativeElement;
+        if (!field)
+            return;
+        if (this.overlay.element) {
+            this.overlay.reposition();
             return;
-        const r = fieldEl.getBoundingClientRect();
-        const gap = 4;
-        const margin = 8;
-        panelEl.style.width = `${Math.round(r.width)}px`;
-        const ph = panelEl.offsetHeight || 240;
-        let top = r.bottom + gap;
-        if (top + ph > window.innerHeight - margin && r.top - gap - ph > margin) {
-            top = r.top - gap - ph;
         }
-        panelEl.style.top = `${Math.round(top)}px`;
-        panelEl.style.left = `${Math.round(Math.max(margin, r.left))}px`;
+        const panel = this.host.nativeElement.querySelector('[data-sds-address-panel]');
+        if (!panel)
+            return;
+        // `exact`, not `min`: a suggestion list wider than the input it hangs off stops reading as
+        // part of the field.
+        this.overlay.attach(field, panel, { width: 'exact' });
+    }
+    /** Close the overlay (a no-op `inline`, where the rows are always shown). */
+    close() {
+        this.open.set(false);
+        this.highlighted.set(-1);
+        this.overlay.detach();
     }
     onDocumentClick(event) {
         if (this.inline() || !this.open())
             return;
         const target = event.target;
         const inField = this.host.nativeElement.contains(target);
-        const inPanel = !!this.panelEl && this.panelEl.contains(target);
+        const inPanel = this.overlay.contains(target);
         if (!inField && !inPanel)
             this.close();
     }
     ngOnDestroy() {
         this.destroyed = true;
         clearTimeout(this.timer);
-        this.detachPanel();
+        this.overlay.detach();
     }
     // --- ControlValueAccessor -----------------------------------------------------
     onChange = () => { };
@@ -14512,7 +14629,7 @@ class SdsAddressAutocomplete {
         <ng-container [ngTemplateOutlet]="panelBody" />
       </div>
     } @else if (panelShown()) {
-      <!-- Appended to document.body on open (see syncPanel). -->
+      <!-- Appended to document.body on open (see SdsOverlayPanel). -->
       <div
         data-sds-address-panel
         class="fixed z-[1000] max-h-80 overflow-auto rounded-card border border-border bg-surface p-1 shadow-lg"
@@ -14737,7 +14854,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         <ng-container [ngTemplateOutlet]="panelBody" />
       </div>
     } @else if (panelShown()) {
-      <!-- Appended to document.body on open (see syncPanel). -->
+      <!-- Appended to document.body on open (see SdsOverlayPanel). -->
       <div
         data-sds-address-panel
         class="fixed z-[1000] max-h-80 overflow-auto rounded-card border border-border bg-surface p-1 shadow-lg"
@@ -21107,7 +21224,7 @@ let nextId = 0;
  * disclosure mechanics (closes on outside click, on Escape, and on selection, restoring focus to the trigger),
  * and the same panel styling and open animation — so the three top-bar controls read as one set.
  *
- * The panel is appended to `document.body` while open and positioned against the trigger (like sds-select),
+ * The panel is appended to `document.body` while open and placed by `SdsOverlayPanel` (like sds-select),
  * so a clipping ancestor — a bar with `overflow:hidden`, or a `glass` bar whose `backdrop-filter` is a
  * containing block — can never cut it off or paint over it. It repositions on scroll/resize and is removed
  * on close. Accessibility follows the APG select-only combobox: focus stays on the trigger, and Arrow/Home/
@@ -21148,7 +21265,8 @@ class SdsLanguageSwitcher {
     openChange = output();
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
     highlightedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : []));
-    panelEl = null;
+    /** Body-appending, positioning, follow-on-scroll and teardown — see SdsOverlayPanel. */
+    overlay = new SdsOverlayPanel();
     /** Normalise the mixed `languages` input to `{ code, label }`, defaulting the label to the code. */
     options = computed(() => this.languages().map((l) => typeof l === 'string'
         ? { code: l, label: l.toUpperCase() }
@@ -21175,9 +21293,17 @@ class SdsLanguageSwitcher {
         // clipping/stacking ancestor (an overflow:hidden bar, a backdrop-filter glass bar) can cut it off.
         // Focus stays on the trigger (combobox model); the active row is surfaced via aria-activedescendant.
         afterNextRender(() => {
-            this.panelEl = this.el.nativeElement.querySelector('[data-sds-language-panel]');
-            this.positionPanel();
-            this.addReflowListeners();
+            const panel = this.el.nativeElement.querySelector('[data-sds-language-panel]');
+            const trigger = this.trigger()?.nativeElement;
+            if (panel && trigger) {
+                // gap 8 and an end-aligned panel, as this control has always used; `direction="up"`
+                // becomes the shared `prefer: 'above'`.
+                this.overlay.attach(trigger, panel, {
+                    gap: 8,
+                    align: this.align(),
+                    prefer: this.direction() === 'up' ? 'above' : 'below',
+                });
+            }
             this.trigger()?.nativeElement.focus();
             this.scrollHighlightedIntoView();
         }, { injector: this.injector });
@@ -21185,10 +21311,8 @@ class SdsLanguageSwitcher {
     close(returnFocus = false) {
         if (!this.open())
             return;
-        this.removeReflowListeners();
         // Remove the portalled node ourselves before Angular tears the view down (it lives in <body> now).
-        this.panelEl?.remove();
-        this.panelEl = null;
+        this.overlay.detach();
         this.open.set(false);
         this.openChange.emit(false);
         if (returnFocus)
@@ -21204,7 +21328,7 @@ class SdsLanguageSwitcher {
             return;
         const target = event.target;
         const inHost = this.el.nativeElement.contains(target);
-        const inPanel = !!this.panelEl && this.panelEl.contains(target);
+        const inPanel = this.overlay.contains(target);
         if (!inHost && !inPanel)
             this.close();
     }
@@ -21251,7 +21375,8 @@ class SdsLanguageSwitcher {
             case 'Tab':
                 this.close(false);
                 break;
-            default: break;
+            default:
+                break;
         }
     }
     initHighlight() {
@@ -21278,68 +21403,19 @@ class SdsLanguageSwitcher {
     }
     scrollHighlightedIntoView() {
         setTimeout(() => {
-            this.panelEl
+            this.overlay.element
                 ?.querySelector(`[data-index="${this.highlightedIndex()}"]`)
                 ?.scrollIntoView({ block: 'nearest' });
         });
     }
-    // --- body-appended overlay positioning (mirrors sds-select / sds-date-picker) ---
-    reflow = () => this.positionPanel();
-    listening = false;
-    addReflowListeners() {
-        if (this.listening)
-            return;
-        window.addEventListener('scroll', this.reflow, true);
-        window.addEventListener('resize', this.reflow);
-        this.listening = true;
-    }
-    removeReflowListeners() {
-        if (!this.listening)
-            return;
-        window.removeEventListener('scroll', this.reflow, true);
-        window.removeEventListener('resize', this.reflow);
-        this.listening = false;
-    }
-    positionPanel() {
-        const triggerEl = this.trigger()?.nativeElement;
-        const panelEl = this.panelEl;
-        if (!triggerEl || !panelEl)
-            return;
-        if (panelEl.parentElement !== document.body)
-            document.body.appendChild(panelEl);
-        const r = triggerEl.getBoundingClientRect();
-        const gap = 8;
-        const margin = 8;
-        const pw = panelEl.offsetWidth || 176;
-        const ph = panelEl.offsetHeight || 200;
-        // Vertical: below by default; open above when asked (direction='up') and there is room, or when there
-        // isn't room below but there is above. The panel height is bounded by the list's max-h, but clamp
-        // defensively so top can never be pushed off the top edge.
-        const roomBelow = window.innerHeight - r.bottom - gap;
-        const roomAbove = r.top - gap;
-        let top = (this.direction() === 'up' && roomAbove >= ph) || (roomBelow < ph && roomAbove > roomBelow)
-            ? r.top - gap - ph
-            : r.bottom + gap;
-        if (top + ph > window.innerHeight - margin)
-            top = window.innerHeight - margin - ph;
-        if (top < margin)
-            top = margin;
-        // Horizontal: align the panel's end (right) or start (left) edge to the trigger, then clamp.
-        let left = this.align() === 'end' ? r.right - pw : r.left;
-        left = Math.min(left, window.innerWidth - margin - pw);
-        left = Math.max(margin, left);
-        panelEl.style.top = `${Math.round(top)}px`;
-        panelEl.style.left = `${Math.round(left)}px`;
-    }
     ngOnDestroy() {
-        this.removeReflowListeners();
-        this.panelEl?.remove();
+        this.overlay.detach();
     }
     onBrand = computed(() => this.appearance() === 'on-brand', ...(ngDevMode ? [{ debugName: "onBrand" }] : []));
     triggerClass = computed(() => this.onBrand()
         ? 'text-white/85 hover:bg-white/10 hover:text-white focus-visible:ring-white/40'
         : 'bg-muted text-ink-soft hover:bg-brand-50 hover:text-brand-600 focus-visible:ring-brand-500/40', ...(ngDevMode ? [{ debugName: "triggerClass" }] : []));
-    chevronClass = computed(() => (this.onBrand() ? 'text-white/70' : 'text-ink-faint'), ...(ngDevMode ? [{ debugName: "chevronClass" }] : []));
+    chevronClass = computed(() => this.onBrand() ? 'text-white/70' : 'text-ink-faint', ...(ngDevMode ? [{ debugName: "chevronClass" }] : []));
     rowClass(index, selected) {
         const base = 'flex w-full cursor-pointer items-center gap-3 px-4 py-2.5 text-sm font-medium transition-colors';
         const highlighted = this.highlightedIndex() === index;
@@ -21380,7 +21456,7 @@ class SdsLanguageSwitcher {
     </button>
 
     @if (open()) {
-      <!-- Appended to document.body on open (see positionPanel) so no ancestor can clip it. -->
+      <!-- Appended to document.body on open (see SdsOverlayPanel) so no ancestor can clip it. -->
       <div
         data-sds-language-panel
         [id]="panelId"
@@ -21389,7 +21465,9 @@ class SdsLanguageSwitcher {
         class="fixed z-[1000] min-w-44 overflow-hidden rounded-card border border-border bg-surface shadow-xl animate-sds-menu"
       >
         @if (heading(); as h) {
-          <p class="border-b border-border px-4 pb-2 pt-3 text-[0.68rem] font-semibold uppercase tracking-wider text-ink-faint">
+          <p
+            class="border-b border-border px-4 pb-2 pt-3 text-[0.68rem] font-semibold uppercase tracking-wider text-ink-faint"
+          >
             {{ h }}
           </p>
         }
@@ -21455,7 +21533,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     </button>
 
     @if (open()) {
-      <!-- Appended to document.body on open (see positionPanel) so no ancestor can clip it. -->
+      <!-- Appended to document.body on open (see SdsOverlayPanel) so no ancestor can clip it. -->
       <div
         data-sds-language-panel
         [id]="panelId"
@@ -21464,7 +21542,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         class="fixed z-[1000] min-w-44 overflow-hidden rounded-card border border-border bg-surface shadow-xl animate-sds-menu"
       >
         @if (heading(); as h) {
-          <p class="border-b border-border px-4 pb-2 pt-3 text-[0.68rem] font-semibold uppercase tracking-wider text-ink-faint">
+          <p
+            class="border-b border-border px-4 pb-2 pt-3 text-[0.68rem] font-semibold uppercase tracking-wider text-ink-faint"
+          >
             {{ h }}
           </p>
         }
@@ -21651,5 +21731,5 @@ function provideSdsCharts(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { SDS_ALLERGENS, SDS_ALLERGEN_ICONS, SDS_ALLERGEN_LABELS_EN, SDS_CHART_CONFIG, SDS_CHART_LABELS_EN, SDS_ICONS, SDS_PHONE_COUNTRIES, SDS_THEME_STORAGE_KEY, SDS_UI_PREF_LANG_PARAM, SDS_UI_PREF_THEME_PARAM, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAddressAutocomplete, SdsAddressExtra, SdsAllergenIcon, SdsAutocomplete, SdsAvatar, SdsBadge, SdsBulkBar, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsChecklistRow, SdsChip, SdsChipGroup, SdsDatePicker, SdsDateRangePicker, SdsEnvBanner, SdsFileDrop, SdsFormActions, SdsIcon, SdsImageCropper, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenu, SdsMenuItem, SdsMenuTrigger, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsRadio, SdsRangeCalendar, SdsScore, SdsSearchCommand, SdsSegmented, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsSeverity, SdsShell, SdsSidebar, SdsSortableHandle, SdsSortableItem, SdsSortableList, SdsStatusTile, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableEmpty, SdsTableHeader, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsTimeInput, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsTriStateChip, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, appendUiPrefs, diffInDays, formatDateRange, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isSameRange, isSdsThemeMode, isoDay, pad2, provideSdsCharts, readUiPrefs, sdsFileMatchesAccept, sdsFormatBytes, sdsFormatNational, sdsLastDays, sdsLastMonths, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth, stripUiPrefs };
+export { SDS_ALLERGENS, SDS_ALLERGEN_ICONS, SDS_ALLERGEN_LABELS_EN, SDS_CHART_CONFIG, SDS_CHART_LABELS_EN, SDS_ICONS, SDS_PHONE_COUNTRIES, SDS_THEME_STORAGE_KEY, SDS_UI_PREF_LANG_PARAM, SDS_UI_PREF_THEME_PARAM, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAddressAutocomplete, SdsAddressExtra, SdsAllergenIcon, SdsAutocomplete, SdsAvatar, SdsBadge, SdsBulkBar, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsChecklistRow, SdsChip, SdsChipGroup, SdsDatePicker, SdsDateRangePicker, SdsEnvBanner, SdsFileDrop, SdsFormActions, SdsIcon, SdsImageCropper, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenu, SdsMenuItem, SdsMenuTrigger, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsOverlayPanel, SdsPaginator, SdsPhoneInput, SdsRadio, SdsRangeCalendar, SdsScore, SdsSearchCommand, SdsSegmented, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsSeverity, SdsShell, SdsSidebar, SdsSortableHandle, SdsSortableItem, SdsSortableList, SdsStatusTile, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableEmpty, SdsTableHeader, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsTimeInput, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsTriStateChip, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, appendUiPrefs, diffInDays, formatDateRange, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isSameRange, isSdsThemeMode, isoDay, pad2, placePanel, provideSdsCharts, readUiPrefs, sdsFileMatchesAccept, sdsFormatBytes, sdsFormatNational, sdsLastDays, sdsLastMonths, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth, stripUiPrefs };
 //# sourceMappingURL=besaitech-ng-design-system.mjs.map