@ship-ui/core 0.17.14 → 0.17.16

package/assets/mcp/components.json

@@ -1061,6 +1061,12 @@
     ],
     "outputs": [],
     "methods": [
+      {
+        "name": "cancelAnimationFrame",
+        "parameters": "this.rafId);\n    }\n    this.rafId = requestAnimationFrame(this.calculateTooltipPosition);\n  };\n\n  private calculateTooltipPosition = (",
+        "returnType": "void =>",
+        "description": ""
+      },
       {
         "name": "untracked",
         "parameters": "() => {\n      if (this.isOpen() && openRef?.component === this && openRef?.wrapperComponentRef",
@@ -3201,12 +3207,24 @@
       }
     ],
     "methods": [
+      {
+        "name": "onCleanup",
+        "parameters": "() => {\n      const index = ShipMenu.openMenus.indexOf(this);\n      if (index > -1",
+        "returnType": "any",
+        "description": ""
+      },
       {
         "name": "toggleIsOpen",
         "parameters": "event: MouseEvent",
         "returnType": "any",
         "description": ""
       },
+      {
+        "name": "open",
+        "parameters": "",
+        "returnType": "any",
+        "description": ""
+      },
       {
         "name": "nextActiveIndex",
         "parameters": "activeIndex: number",
@@ -3240,7 +3258,7 @@
       },
       {
         "name": "search-menu-example",
-        "html": "<sh-menu [searchable]=\"true\">\n  <button shButton class=\"outlined\">Open searchable menu</button>\n  <ng-container menu>\n    @for (item of filteredItems; track item.value) {\n      <button (click)=\"select(item)\" [class.selected]=\"selected === item.value\">\n        <p>\n          hello world\n          <br />\n          {{ item.label }}\n        </p>\n      </button>\n    }\n  </ng-container>\n</sh-menu>\n",
+        "html": "<sh-menu [searchable]=\"true\">\n  <button shButton class=\"outlined\">Open searchable menu</button>\n  <ng-container menu>\n    @for (item of filteredItems; track item.value) {\n      <button (click)=\"select(item)\" [class.selected]=\"selected === item.value\">\n        <p>\n          hello world\n          <br />\n          {{ item.label }}\n        </p>\n      </button>\n    }\n  </ng-container>\n</sh-menu>\n\n<sh-menu [searchable]=\"true\">\n  <button shButton class=\"outlined\">Open searchable menu</button>\n  <ng-container menu>\n    @for (item of filteredItems; track item.value) {\n      <button (click)=\"select(item)\" [class.selected]=\"selected === item.value\">\n        <div class=\"option-col\">\n          {{ item.label }} asdlkjadskljjkladsjkldaljkdaslkjad jklsjkl dasjkld as\n          <p>hello world but im extra long so i should wrap to the next line</p>\n        </div>\n      </button>\n    }\n  </ng-container>\n</sh-menu>\n",
         "ts": "import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ShipButton, ShipMenu } from 'ship-ui';\n\n@Component({\n  selector: 'sh-search-menu-example',\n  templateUrl: './search-menu-example.html',\n  styleUrls: ['./search-menu-example.scss'],\n  imports: [FormsModule, ShipMenu, ShipButton],\n  standalone: true,\n})\nexport class SearchMenuExample {\n  menuItems = [\n    { label: 'Dashboard', value: 'dashboard' },\n    { label: 'Users', value: 'users' },\n    { label: 'Settings', value: 'settings' },\n    { label: 'Billing', value: 'billing' },\n    { label: 'Support', value: 'support' },\n  ];\n  search = '';\n  selected: string | null = null;\n\n  get filteredItems() {\n    return this.menuItems.filter((item) => item.label.toLowerCase().includes(this.search.toLowerCase()));\n  }\n\n  select(item: any) {\n    this.selected = item.value;\n  }\n}\n"
       },
       {

package/fesm2022/ship-ui-core.mjs

@@ -2663,6 +2663,8 @@ class ShipPopover {
                     }, {
                         signal: this.openAbort?.signal,
                     });
+                    if (!popoverEl.isConnected)
+                        return;
                     popoverEl.showPopover();
                     if (!this.SUPPORTS_ANCHOR) {
                         setTimeout(() => {
@@ -3840,9 +3842,22 @@ class ShipMenu {
         this.activeOptionIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeOptionIndex" }] : []));
         this.inputRef = viewChild('inputRef', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
         this.optionsRef = viewChild('optionsRef', ...(ngDevMode ? [{ debugName: "optionsRef" }] : []));
+        this.openMenusEffect = effect((onCleanup) => {
+            if (this.isOpen()) {
+                ShipMenu.openMenus.push(this);
+            }
+            onCleanup(() => {
+                const index = ShipMenu.openMenus.indexOf(this);
+                if (index > -1) {
+                    ShipMenu.openMenus.splice(index, 1);
+                }
+            });
+        }, ...(ngDevMode ? [{ debugName: "openMenusEffect" }] : []));
         this.options = observeChildren(this.optionsRef, this.customOptionElementSelectors);
         this.optionsEl = computed(() => this.options.signal().filter((x) => !x.disabled), ...(ngDevMode ? [{ debugName: "optionsEl" }] : []));
         this.inputValue = createFormInputSignal(this.inputRef);
+        this.optionsId = generateUniqueId();
+        this.activeOptionId = signal(undefined, ...(ngDevMode ? [{ debugName: "activeOptionId" }] : []));
         this.abortController = null;
         this.optionsEffect = effect(() => {
             if (this.abortController !== null) {
@@ -3884,6 +3899,9 @@ class ShipMenu {
             }
         }, ...(ngDevMode ? [{ debugName: "optionsEffect" }] : []));
         this.keyDownEventListener = (e) => {
+            // Only handle events if this is the most recently opened menu
+            if (ShipMenu.openMenus.at(-1) !== this)
+                return;
             const activeOptionIndex = this.activeOptionIndex();
             if (e.key === 'ArrowDown') {
                 e.preventDefault();
@@ -3896,8 +3914,20 @@ class ShipMenu {
             else if (e.key === 'Enter') {
                 e.preventDefault();
                 if (activeOptionIndex > -1) {
-                    this.activeElements()[activeOptionIndex].click();
-                    queueMicrotask(() => this.close('active'));
+                    const el = this.activeElements()[activeOptionIndex];
+                    const parent = el.parentElement;
+                    // For nested menu's
+                    if (parent?.hasAttribute('trigger')) {
+                        const event = new CustomEvent('ship-menu-open', {
+                            bubbles: true,
+                            cancelable: true,
+                        });
+                        el.dispatchEvent(event);
+                    }
+                    else {
+                        el.click();
+                        queueMicrotask(() => this.close('active'));
+                    }
                 }
             }
             else if (e.key === 'Tab') {
@@ -3920,6 +3950,10 @@ class ShipMenu {
                 this._lastElementList = allOptions;
                 for (let i = 0; i < allOptions.length; i++) {
                     this.#renderer.removeStyle(allOptions[i], 'order');
+                    if (!allOptions[i].id) {
+                        allOptions[i].id = `${this.optionsId}-option-${i}`;
+                    }
+                    allOptions[i].setAttribute('role', 'option');
                 }
                 return;
             }
@@ -3943,31 +3977,61 @@ class ShipMenu {
             }
             this.activeElements.set(optionElements);
             this._lastElementList = optionElements;
+            // Assign IDs to options for ARIA support
+            for (let i = 0; i < optionElements.length; i++) {
+                if (!optionElements[i].id) {
+                    optionElements[i].id = `${this.optionsId}-option-${i}`;
+                }
+                optionElements[i].setAttribute('role', 'option');
+            }
         }, ...(ngDevMode ? [{ debugName: "inputValueEffect" }] : []));
         this.activeOptionIndexEffect = effect(() => {
             const optionElements = this.activeElements();
             const activeOptionIndex = this.activeOptionIndex();
             for (let index = 0; index < optionElements.length; index++) {
                 optionElements[index].classList.remove('active');
+                optionElements[index].removeAttribute('aria-selected');
             }
             if (activeOptionIndex > -1) {
-                optionElements[activeOptionIndex].scrollIntoView({ block: 'center' });
-                optionElements[activeOptionIndex].classList.add('active');
+                const activeOption = optionElements[activeOptionIndex];
+                activeOption.scrollIntoView({ block: 'center' });
+                activeOption.classList.add('active');
+                activeOption.setAttribute('aria-selected', 'true');
+                this.activeOptionId.set(activeOption.id);
+            }
+            else {
+                this.activeOptionId.set(undefined);
             }
         }, ...(ngDevMode ? [{ debugName: "activeOptionIndexEffect" }] : []));
     }
     #document;
     #renderer;
+    static { this.openMenus = []; }
     toggleIsOpen(event) {
         event.preventDefault();
         event.stopPropagation();
         if (this.disabled())
             return;
-        this.isOpen.set(!this.isOpen());
-        if (this.searchable() && this.isOpen()) {
+        if (this.isOpen()) {
+            this.close('fromPopover');
+        }
+        else {
+            this.open();
+        }
+    }
+    open() {
+        if (this.disabled())
+            return;
+        this.isOpen.set(true);
+        if (this.searchable()) {
             setTimeout(() => this.inputRef()?.nativeElement.focus());
         }
     }
+    onShipMenuOpen(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.open();
+    }
     #calculateMatchScore(option, input) {
         if (!input)
             return 0;
@@ -4052,6 +4116,7 @@ class ShipMenu {
         const optionElements = this.optionsEl();
         for (let index = 0; index < optionElements.length; index++) {
             optionElements[index].classList.remove('active');
+            optionElements[index].removeAttribute('aria-selected');
         }
     }
     ngOnDestroy() {
@@ -4059,9 +4124,13 @@ class ShipMenu {
             this.abortController.abort();
             this.abortController = null;
         }
+        const index = ShipMenu.openMenus.indexOf(this);
+        if (index > -1) {
+            ShipMenu.openMenus.splice(index, 1);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ShipMenu, isStandalone: true, selector: "sh-menu", inputs: { asMultiLayer: { classPropertyName: "asMultiLayer", publicName: "asMultiLayer", isSignal: true, isRequired: false, transformFunction: null }, openIndicator: { classPropertyName: "openIndicator", publicName: "openIndicator", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, customOptionElementSelectors: { classPropertyName: "customOptionElementSelectors", publicName: "customOptionElementSelectors", isSignal: true, isRequired: false, transformFunction: null }, keepClickedOptionActive: { classPropertyName: "keepClickedOptionActive", publicName: "keepClickedOptionActive", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed" }, host: { properties: { "class.disabled": "disabled()", "class.has-search": "searchable()", "class.multi-layer": "asMultiLayer()" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }, { propertyName: "optionsRef", first: true, predicate: ["optionsRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ShipMenu, isStandalone: true, selector: "sh-menu", inputs: { asMultiLayer: { classPropertyName: "asMultiLayer", publicName: "asMultiLayer", isSignal: true, isRequired: false, transformFunction: null }, openIndicator: { classPropertyName: "openIndicator", publicName: "openIndicator", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, customOptionElementSelectors: { classPropertyName: "customOptionElementSelectors", publicName: "customOptionElementSelectors", isSignal: true, isRequired: false, transformFunction: null }, keepClickedOptionActive: { classPropertyName: "keepClickedOptionActive", publicName: "keepClickedOptionActive", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed" }, host: { listeners: { "ship-menu-open": "onShipMenuOpen($event)" }, properties: { "class.disabled": "disabled()", "class.has-search": "searchable()", "class.multi-layer": "asMultiLayer()" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }, { propertyName: "optionsRef", first: true, predicate: ["optionsRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <sh-popover
       #formFieldWrapper
       [(isOpen)]="isOpen"
@@ -4072,7 +4141,15 @@ class ShipMenu {
         closeOnButton: false,
         closeOnEsc: true,
       }">
-      <div trigger [class.is-open]="isOpen()" (click)="toggleIsOpen($event)">
+      <div
+        trigger
+        [class.is-open]="isOpen()"
+        (click)="toggleIsOpen($event)"
+        role="combobox"
+        [attr.aria-expanded]="isOpen()"
+        aria-haspopup="listbox"
+        [attr.aria-controls]="optionsId"
+        [attr.aria-activedescendant]="activeOptionId()">
         <ng-content />
 
         @if (openIndicator()) {
@@ -4082,7 +4159,15 @@ class ShipMenu {
 
       <div class="form-field-wrap">
         <sh-form-field class="small stretch" [class.hidden]="searchable() === false">
-          <input type="text" #inputRef placeholder="Search" />
+          <input
+            type="text"
+            #inputRef
+            placeholder="Search"
+            role="combobox"
+            [attr.aria-expanded]="isOpen()"
+            [attr.aria-controls]="optionsId"
+            [attr.aria-activedescendant]="activeOptionId()"
+            aria-autocomplete="list" />
         </sh-form-field>
       </div>
 
@@ -4090,7 +4175,10 @@ class ShipMenu {
         class="options"
         #optionsRef
         (click)="close('active')"
-        [class.searching]="searchable() && inputValue() !== ''">
+        [class.searching]="searchable() && inputValue() !== ''"
+        role="listbox"
+        [id]="optionsId"
+        [attr.aria-activedescendant]="activeOptionId()">
         <ng-content select="[menu]" />
       </div>
     </sh-popover>
@@ -4112,7 +4200,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
         closeOnButton: false,
         closeOnEsc: true,
       }">
-      <div trigger [class.is-open]="isOpen()" (click)="toggleIsOpen($event)">
+      <div
+        trigger
+        [class.is-open]="isOpen()"
+        (click)="toggleIsOpen($event)"
+        role="combobox"
+        [attr.aria-expanded]="isOpen()"
+        aria-haspopup="listbox"
+        [attr.aria-controls]="optionsId"
+        [attr.aria-activedescendant]="activeOptionId()">
         <ng-content />
 
         @if (openIndicator()) {
@@ -4122,7 +4218,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
 
       <div class="form-field-wrap">
         <sh-form-field class="small stretch" [class.hidden]="searchable() === false">
-          <input type="text" #inputRef placeholder="Search" />
+          <input
+            type="text"
+            #inputRef
+            placeholder="Search"
+            role="combobox"
+            [attr.aria-expanded]="isOpen()"
+            [attr.aria-controls]="optionsId"
+            [attr.aria-activedescendant]="activeOptionId()"
+            aria-autocomplete="list" />
         </sh-form-field>
       </div>
 
@@ -4130,7 +4234,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
         class="options"
         #optionsRef
         (click)="close('active')"
-        [class.searching]="searchable() && inputValue() !== ''">
+        [class.searching]="searchable() && inputValue() !== ''"
+        role="listbox"
+        [id]="optionsId"
+        [attr.aria-activedescendant]="activeOptionId()">
         <ng-content select="[menu]" />
       </div>
     </sh-popover>
@@ -4142,7 +4249,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                         '[class.multi-layer]': 'asMultiLayer()',
                     },
                 }]
-        }], propDecorators: { asMultiLayer: [{ type: i0.Input, args: [{ isSignal: true, alias: "asMultiLayer", required: false }] }], openIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "openIndicator", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], customOptionElementSelectors: [{ type: i0.Input, args: [{ isSignal: true, alias: "customOptionElementSelectors", required: false }] }], keepClickedOptionActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepClickedOptionActive", required: false }] }], closeOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClick", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], closed: [{ type: i0.Output, args: ["closed"] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], inputRef: [{ type: i0.ViewChild, args: ['inputRef', { isSignal: true }] }], optionsRef: [{ type: i0.ViewChild, args: ['optionsRef', { isSignal: true }] }] } });
+        }], propDecorators: { asMultiLayer: [{ type: i0.Input, args: [{ isSignal: true, alias: "asMultiLayer", required: false }] }], openIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "openIndicator", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], customOptionElementSelectors: [{ type: i0.Input, args: [{ isSignal: true, alias: "customOptionElementSelectors", required: false }] }], keepClickedOptionActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepClickedOptionActive", required: false }] }], closeOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClick", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], closed: [{ type: i0.Output, args: ["closed"] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], inputRef: [{ type: i0.ViewChild, args: ['inputRef', { isSignal: true }] }], optionsRef: [{ type: i0.ViewChild, args: ['optionsRef', { isSignal: true }] }], onShipMenuOpen: [{
+                type: HostListener,
+                args: ['ship-menu-open', ['$event']]
+            }] } });
 
 class ShipProgressBar {
     constructor() {
@@ -6913,14 +7023,22 @@ class ShipTooltipWrapper {
             if (this.isOpen()) {
                 setTimeout(() => {
                     this.#selfRef.nativeElement.showPopover();
-                    this.calculateTooltipPosition();
+                    this.schedulePositionUpdate();
                 });
             }
             else {
                 this.#selfRef.nativeElement.hidePopover();
             }
         }, ...(ngDevMode ? [{ debugName: "openEffect" }] : []));
+        this.rafId = null;
+        this.schedulePositionUpdate = () => {
+            if (this.rafId !== null) {
+                cancelAnimationFrame(this.rafId);
+            }
+            this.rafId = requestAnimationFrame(this.calculateTooltipPosition);
+        };
         this.calculateTooltipPosition = () => {
+            this.rafId = null;
             if (!this.anchorEl())
                 return;
             const hostRect = this.anchorEl().nativeElement.getBoundingClientRect();
@@ -6928,23 +7046,38 @@ class ShipTooltipWrapper {
             const tooltipRect = tooltipEl.getBoundingClientRect();
             if (tooltipRect.width === 0 && tooltipRect.height === 0)
                 return;
-            const outOfBoundsTop = hostRect.top - tooltipRect.height < 0;
-            this.isBelow.set(outOfBoundsTop);
-            if (!this.SUPPORTS_ANCHOR) {
-                const tooltipRect = tooltipEl.getBoundingClientRect();
-                let newTop = hostRect.top - tooltipRect.height;
-                let newLeft = hostRect.left + hostRect.width / 2 - tooltipRect.width / 2;
-                if (outOfBoundsTop) {
-                    newTop = hostRect.top + hostRect.height;
+            if (this.SUPPORTS_ANCHOR) {
+                const isPlacedBelow = tooltipRect.top > hostRect.top;
+                if (this.isBelow() !== isPlacedBelow) {
+                    this.isBelow.set(isPlacedBelow);
                 }
-                if (newLeft + tooltipRect.width > window?.innerWidth) {
-                    newLeft = hostRect.right - tooltipRect.width / 2;
-                }
-                if (newLeft < 0) {
-                    newLeft = -(tooltipRect.width / 2);
-                }
-                this.#renderer.setStyle(tooltipEl, 'left', `${newLeft}px`);
-                this.#renderer.setStyle(tooltipEl, 'top', `${newTop}px`);
+                return;
+            }
+            const gap = 12;
+            const outOfBoundsTop = hostRect.top - tooltipRect.height - gap < 0;
+            if (this.isBelow() !== outOfBoundsTop) {
+                this.isBelow.set(outOfBoundsTop);
+            }
+            let newTop = hostRect.top - tooltipRect.height - gap;
+            let newLeft = hostRect.left + hostRect.width / 2 - tooltipRect.width / 2;
+            if (outOfBoundsTop) {
+                newTop = hostRect.top + hostRect.height;
+            }
+            if (newLeft + tooltipRect.width > window?.innerWidth) {
+                newLeft = hostRect.right - tooltipRect.width / 2;
+            }
+            if (newLeft < 0) {
+                newLeft = -(tooltipRect.width / 2);
+            }
+            const leftStyle = `${newLeft}px`;
+            const topStyle = `${newTop}px`;
+            if (tooltipEl.style.left !== leftStyle) {
+                this.#renderer.setStyle(tooltipEl, 'left', leftStyle);
+            }
+            if (tooltipEl.style.top !== topStyle) {
+                this.#renderer.setStyle(tooltipEl, 'top', topStyle);
+            }
+            if (tooltipEl.style.position !== 'fixed') {
                 this.#renderer.setStyle(tooltipEl, 'position', 'fixed');
             }
         };
@@ -6954,13 +7087,20 @@ class ShipTooltipWrapper {
     #positionAbort;
     ngAfterViewInit() {
         this.#positionAbort = new AbortController();
-        const options = { signal: this.#positionAbort.signal, capture: true };
-        window?.addEventListener('scroll', this.calculateTooltipPosition, options);
-        window?.addEventListener('resize', this.calculateTooltipPosition, { signal: this.#positionAbort.signal });
-        setTimeout(() => this.calculateTooltipPosition());
+        const options = { signal: this.#positionAbort.signal, capture: true, passive: true };
+        window?.addEventListener('scroll', this.schedulePositionUpdate, options);
+        window?.addEventListener('resize', this.schedulePositionUpdate, {
+            signal: this.#positionAbort.signal,
+            passive: true,
+        });
+        this.schedulePositionUpdate();
     }
     ngOnDestroy() {
         this.#positionAbort?.abort();
+        if (this.rafId !== null) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = null;
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipTooltipWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ShipTooltipWrapper, isStandalone: true, selector: "ship-tooltip-wrapper", inputs: { positionAnchorName: { classPropertyName: "positionAnchorName", publicName: "positionAnchorName", isSignal: true, isRequired: true, transformFunction: null }, anchorEl: { classPropertyName: "anchorEl", publicName: "anchorEl", isSignal: true, isRequired: true, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, close: { classPropertyName: "close", publicName: "close", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, properties: { "attr.popover": "\"manual\"", "style.position-anchor": "positionAnchorName()", "class.below": "isBelow()" } }, ngImport: i0, template: `
@@ -7012,7 +7152,7 @@ class ShipTooltip {
         this.#elementRef = inject((ElementRef));
         this.#viewContainerRef = inject(ViewContainerRef);
         this.#environmentInjector = inject(EnvironmentInjector);
-        this.#renderer = inject(Renderer2);
+        this.debounceTimer = null;
         this.DEBOUNCE_DELAY = 500;
         this.anchorName = `--${generateUniqueId()}`;
         this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
@@ -7021,7 +7161,6 @@ class ShipTooltip {
     #elementRef;
     #viewContainerRef;
     #environmentInjector;
-    #renderer;
     onMouseEnter() {
         if (openRef?.component.anchorName !== this.anchorName) {
             this.cleanupTooltip();
@@ -7080,6 +7219,10 @@ class ShipTooltip {
     cleanupTooltip() {
         if (openRef?.wrapperComponentRef) {
             openRef.component.cancelCleanupTimer();
+            const nativeEl = openRef.wrapperComponentRef.location.nativeElement;
+            if (nativeEl && typeof nativeEl.matches === 'function' && nativeEl.matches(':popover-open')) {
+                nativeEl.hidePopover();
+            }
             openRef.wrapperComponentRef.destroy();
             openRef.component.isOpen.set(false);
             openRef = null;