@besaitech/ng-design-system 0.0.79 → 0.0.81

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

@@ -10682,6 +10682,112 @@ 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
@@ -10838,6 +10944,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 +10990,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 +11024,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 +11068,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 +11083,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 +11100,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 +11156,8 @@ class SdsSelect {
             case 'Tab':
                 this.close(false);
                 return true;
-            default: return false;
+            default:
+                return false;
         }
     }
     initHighlight() {
@@ -11110,46 +11220,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;
+    /** 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, { matchTriggerWidth: true });
         }
-        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())
@@ -11161,9 +11237,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 +11299,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 +11310,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 +11333,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 +11395,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 +11474,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 +11485,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 +11508,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 +11570,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 +11697,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 +11744,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 +11773,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 +11823,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 +11838,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 +11856,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 +11872,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 +11937,8 @@ class SdsMultiSelect {
             case 'Tab':
                 this.close(false);
                 return true;
-            default: return false;
+            default:
+                return false;
         }
     }
     initHighlight() {
@@ -11903,46 +12006,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;
-        }
-        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, { matchTriggerWidth: true });
         }
-        panelEl.style.top = `${Math.round(top)}px`;
-        panelEl.style.left = `${Math.round(left)}px`;
     }
     onDocumentClick(event) {
         if (!this.open())
@@ -11954,9 +12023,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 +12032,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 +12080,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 +12127,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 +12164,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 +12186,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 +12203,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 +12227,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 +12298,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 +12345,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 +12382,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 +12404,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 +12421,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 +12445,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,6 +12572,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();
+    /** Body-appending, positioning, follow-on-scroll and teardown all live in here now. */
+    overlay = new SdsOverlayPanel();
     timer;
     seq = 0;
     destroyed = false;
@@ -12481,7 +12605,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) {
@@ -12544,8 +12668,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();
@@ -12589,7 +12712,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());
             }
         }
     }
@@ -12598,8 +12722,9 @@ class SdsAutocomplete {
         event?.stopPropagation();
         if (this.isOptionDisabled(option))
             return;
+        // No need to remember it here: `run` already stored every row it returned, and an option can
+        // only be picked from those. (A mutation check proved this line unreachable.)
         const v = this.valueOf(option);
-        this.seen.set(v, option);
         if (!this.multiple()) {
             this.setValue(v);
             this.selected.emit(option);
@@ -12672,65 +12797,29 @@ class SdsAutocomplete {
             return;
         this.open.set(false);
         this.active.set(-1);
-        this.removeReflow();
-        this.panelRef()?.nativeElement.remove();
+        this.overlay.detach();
         this.closed.emit(this.value());
     }
     onDocumentClick(event) {
         if (!this.open())
             return;
         const target = event.target;
-        const panel = this.panelRef()?.nativeElement;
-        if (!this.host.nativeElement.contains(target) && !panel?.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;
-        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;
-        }
-        let left = r.left;
-        const pw = panel.offsetWidth || r.width;
-        if (left + pw > window.innerWidth - margin) {
-            left = Math.max(margin, window.innerWidth - margin - pw);
+        if (trigger && panel) {
+            this.overlay.attach(trigger, panel, { matchTriggerWidth: true });
         }
-        panel.style.top = `${Math.round(top)}px`;
-        panel.style.left = `${Math.round(left)}px`;
     }
     ngOnDestroy() {
         this.destroyed = true;
         clearTimeout(this.timer);
-        this.removeReflow();
-        this.panelRef()?.nativeElement.remove();
+        this.overlay.detach();
     }
     setValue(v) {
         this.value.set(v);
@@ -12835,6 +12924,7 @@ class SdsAutocomplete {
         #panel
         [id]="panelId"
         role="listbox"
+        data-sds-autocomplete-panel
         [attr.aria-multiselectable]="multiple() ? 'true' : null"
         class="fixed z-50 max-h-72 overflow-auto rounded-control border border-border bg-surface py-1 shadow-lg"
       >
@@ -13008,6 +13098,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         #panel
         [id]="panelId"
         role="listbox"
+        data-sds-autocomplete-panel
         [attr.aria-multiselectable]="multiple() ? 'true' : null"
         class="fixed z-50 max-h-72 overflow-auto rounded-control border border-border bg-surface py-1 shadow-lg"
       >
@@ -13096,26 +13187,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) {
@@ -13266,6 +13497,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(() => {
@@ -13399,8 +13632,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 });
@@ -13408,8 +13640,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)
@@ -13430,7 +13661,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) {
@@ -13500,46 +13731,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;
+    /** 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, { matchTriggerWidth: true });
         }
-        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())
@@ -13555,8 +13752,7 @@ class SdsPhoneInput {
         this.onTouched();
     }
     ngOnDestroy() {
-        this.removeReflowListeners();
-        this.panelEl?.remove();
+        this.overlay.detach();
     }
     emit() {
         const value = this.e164();
@@ -13653,7 +13849,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>
@@ -13704,8 +13902,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"
@@ -13730,7 +13934,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>
@@ -13794,7 +14000,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>
@@ -13845,8 +14053,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"
@@ -13871,7 +14085,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>
@@ -21637,5 +21853,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