@besaitech/ng-design-system 0.0.81 → 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>
@@ -10682,112 +10724,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], maxDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDays", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", 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 }] }], panelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelLabel", required: false }] }], presetsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetsLabel", required: false }] }], startLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startLabel", required: false }] }], endLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endLabel", required: false }] }], applyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], calendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarLabel", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], presetSelect: [{ type: i0.Output, args: ["presetSelect"] }], calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdsRangeCalendar), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
 let nextId$a = 0;
 
-/**
- * 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();
-        if (this.options.matchTriggerWidth) {
-            panel.style.minWidth = `${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`;
-    }
-    /** 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;
-    }
-}
-
 /**
  * Supplies a custom template for each option row (and the selected value shown
  * in the trigger) of an `<sds-select>` / `<sds-multi-select>`. Use as a
@@ -11224,7 +11160,7 @@ class SdsSelect {
     attachPanel() {
         const trigger = this.trigger()?.nativeElement;
         if (trigger && this.panelEl) {
-            this.overlay.attach(trigger, this.panelEl, { matchTriggerWidth: true });
+            this.overlay.attach(trigger, this.panelEl, { width: 'min' });
         }
     }
     onDocumentClick(event) {
@@ -12010,7 +11946,7 @@ class SdsMultiSelect {
     attachPanel() {
         const trigger = this.trigger()?.nativeElement;
         if (trigger && this.panelEl) {
-            this.overlay.attach(trigger, this.panelEl, { matchTriggerWidth: true });
+            this.overlay.attach(trigger, this.panelEl, { width: 'min' });
         }
     }
     onDocumentClick(event) {
@@ -12813,7 +12749,7 @@ class SdsAutocomplete {
         const trigger = this.triggerEl()?.nativeElement;
         const panel = this.panelRef()?.nativeElement;
         if (trigger && panel) {
-            this.overlay.attach(trigger, panel, { matchTriggerWidth: true });
+            this.overlay.attach(trigger, panel, { width: 'min' });
         }
     }
     ngOnDestroy() {
@@ -13735,7 +13671,7 @@ class SdsPhoneInput {
     attachPanel() {
         const trigger = this.anchor()?.nativeElement;
         if (trigger && this.panelEl) {
-            this.overlay.attach(trigger, this.panelEl, { matchTriggerWidth: true });
+            this.overlay.attach(trigger, this.panelEl, { width: 'min' });
         }
     }
     onDocumentClick(event) {
@@ -14272,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" }] : []));
@@ -14535,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 = () => { };
@@ -14714,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"
@@ -14939,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"
@@ -21309,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/
@@ -21350,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() }
@@ -21377,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 });
@@ -21387,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)
@@ -21406,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();
     }
@@ -21453,7 +21375,8 @@ class SdsLanguageSwitcher {
             case 'Tab':
                 this.close(false);
                 break;
-            default: break;
+            default:
+                break;
         }
     }
     initHighlight() {
@@ -21480,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;
@@ -21582,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"
@@ -21591,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>
         }
@@ -21657,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"
@@ -21666,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>
         }