lightning-base-components 1.27.2-alpha → 1.27.5-alpha

package/src/lightning/modalBase/{modalBase.js → modalBase.ts}

@@ -1,17 +1,12 @@
-/*
- * Copyright (c) 2025, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-import { api } from 'lwc';
+import { api, track } from 'lwc';
 import { features } from 'lightning/features';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import {
     ARIA,
+    hasActiveTooltip,
     hasAnimation,
     isAriaDescriptionSupported,
-    isCSR,
     makeEverythingExceptElementInert,
     normalizeString,
     restoreInertness,
@@ -28,81 +23,96 @@ import AriaObserver from 'lightning/ariaObserver';
 import { modalFocusinEventHandler } from 'lightning/modalUtils';
 import orgHasWCAGResizeReflowSC from '@salesforce/accessCheck/ComponentAccessibility.orgHasWCAGResizeReflowSC';
 
+import type LightningModal from 'lightning/modal';
+import type { SavedInertElement } from 'lightning/utilsPrivate';
+
 const DEBOUNCE_RESIZE = 300;
 const SMALL_SCREEN_SIZE = 480;
 const SIZE_SMALL = 'small';
 const SIZE_MEDIUM = 'medium';
 const SIZE_LARGE = 'large';
 const SIZE_FULL = 'full';
+let lwcModalCount = 0;
+let originalBodyOverflow = null;
+
+type ModalSize =
+    | typeof SIZE_SMALL
+    | typeof SIZE_MEDIUM
+    | typeof SIZE_LARGE
+    | typeof SIZE_FULL;
 
 export default class LightningModalBase extends LightningShadowBaseClass {
     // this is visible in DOM, changed from 'lightning-modal-base'
-    static [instanceName] = 'lightning-modal-base';
+    static [instanceName]: string = 'lightning-modal-base';
 
     // private tracked state
-    initialRender = true;
-    autoFocusCompletedOnce = false;
-    timeoutId = 0;
-    disableCloseButton = false;
-    sectionAriaBusy = null;
-    closeButtonAltText = closeButtonAltText;
-    disableCloseBtnMessage = disableCloseBtnMessage;
-    isModalClosing = false;
+    initialRender: boolean = true;
+    autoFocusCompletedOnce: boolean = false;
+    timeoutId: number = 0;
+    disableCloseButton: boolean = false;
+    sectionAriaBusy: string | null = null;
+    closeButtonAltText: string = closeButtonAltText;
+    disableCloseBtnMessage: string = disableCloseBtnMessage;
+    isModalClosing: boolean = false;
     // screen size private tracked state
-    isSmallScreenSize = null;
+    isSmallScreenSize: boolean | null = null;
 
     // modalHeader, child
-    headerRegistered = false;
-    headerHeight = 0;
-    headerDefaultSlotIsPopulated = false;
-    headerSlotWrapperId = null;
-    headerSlotHasRendered = false;
-    headerLabelId = null;
-    headerLabelIsPopulated = null;
-    headerTitleRef = null;
+    headerRegistered: boolean = false;
+    headerHeight: number = 0;
+    headerDefaultSlotIsPopulated: boolean = false;
+    headerSlotWrapperId: string | null = null;
+    headerSlotHasRendered: boolean = false;
+    headerLabelId: string | null = null;
+    headerLabelIsPopulated: boolean | null = null;
+    headerTitleRef: HTMLElement | null = null;
 
     // modalBody, child
-    bodyRegistered = false;
-    bodyDefaultSlotIsPopulated = false;
-    bodySlotHasRendered = false;
-    bodyId = null;
-    baseUpdateBodyCallback = null;
-    bodyResizeScheduled = false;
-    bodyTabElemRef = null;
+    bodyRegistered: boolean = false;
+    bodyDefaultSlotIsPopulated: boolean = false;
+    bodySlotHasRendered: boolean = false;
+    bodyId: string | null = null;
+    baseUpdateBodyCallback: Function | null = null; // eslint-disable-line @typescript-eslint/no-unsafe-function-type
+    bodyResizeScheduled: boolean = false;
+    bodyTabElemRef: HTMLElement | null = null;
     // eventing state utilized when modalBody present
-    windowResizeEventBound = false;
-    windowOrientationEventBound = false;
-    portraitMatchMedia = null;
-    screenOrientationChangeHandler = null;
+    windowResizeEventBound: boolean = false;
+    windowOrientationEventBound: boolean = false;
+    portraitMatchMedia: MediaQueryList | null = null;
+    screenOrientationChangeHandler: (() => void) | null = null;
 
     // state utilized when performing keyboard focus trap
-    focusinEventBound = false;
-    lastFocusedElement = null;
+    focusinEventBound: boolean = false;
+    lastFocusedElement: HTMLElement | null = null;
 
     // modalFooter, child
-    footerRegistered = false;
-    footerHeight = 0;
-    footerSlotHasRendered = false;
-    footerDefaultSlotIsPopulated = false;
+    footerRegistered: boolean = false;
+    footerHeight: number = 0;
+    footerSlotHasRendered: boolean = false;
+    footerDefaultSlotIsPopulated: boolean = false;
 
     // aria attributes
-    modalLabel = null;
-    modalLabelledBy = null;
-    modalDescribedBy = null;
+    modalLabel: string | null = null;
+    modalLabelledBy: string | null = null;
+    modalDescribedBy: string | null = null;
     // currently used for disableClose
-    showAriaLiveMessage = false;
-    ariaLiveMessage = '';
+    showAriaLiveMessage: boolean = false;
+    ariaLiveMessage: string = '';
 
     // modal features
-    isModalOpen = false;
-    isModalTransitioningIn = false;
+    isModalOpen: boolean = false;
+    isModalTransitioningIn: boolean = false;
     // modal background elements
-    savedInertElements = [];
+    savedInertElements: SavedInertElement[] = [];
     // before modal opened, element previously focused
-    savedActiveElement;
+    @track savedActiveElement: Element | null;
 
     // accessibility
-    ariaObserver = null;
+    ariaObserver: AriaObserver | null = null;
+    updateHeaderCallback: any;
+    updateFooterCallback: any;
+
+    _resizing: boolean;
 
     constructor() {
         super();
@@ -113,7 +123,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * <lightning-modal> label value
      * Text to display as the heading at the top of the modal
      */
-    get label() {
+    get label(): string {
         const modal = this.modal;
         if (!modal) {
             return '';
@@ -126,7 +136,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * Text used for the accessible description of the modal. see updateAriaDescription()
      * Note: this value is not visible in the UI, and only to screen readers
      */
-    get description() {
+    get description(): string {
         const modal = this.modal;
         if (!modal) {
             return '';
@@ -141,26 +151,26 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * @returns {string} string representing normalized api size value
      * @default medium
      */
-    normalizeSize(sizeValue) {
+    normalizeSize(sizeValue: string): ModalSize {
         const sizeDefault = SIZE_MEDIUM;
         return normalizeString(sizeValue, {
             fallbackValue: sizeDefault,
             validValues: [SIZE_FULL, SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE],
-        });
+        }) as ModalSize;
     }
 
     /**
      * Determine if this._size has been set yet.
      * @returns {boolean} true means not yet set, false means has been set
      */
-    get isModalSizeNotSet() {
+    get isModalSizeNotSet(): boolean {
         return this._size === null;
     }
 
     // we don't set the value of this._size, *until this.modal.size can be assessed*
     // this.modal is a child element of modalBase, and it doesn't yet exist during
     // the component's initial render.
-    _size = null;
+    _size: ModalSize | null = null;
 
     /**
      * Get the current modal size.
@@ -170,7 +180,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * @type {string}
      * @default medium
      */
-    get size() {
+    get size(): ModalSize {
         const sizeDefault = SIZE_MEDIUM;
         // if modalReduceMotionFix gate=true, new reactive behavior
         // added due to local variable use which LWC engine observes changes
@@ -200,7 +210,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * @type {string}
      * @default medium
      */
-    set size(value) {
+    set size(value: string) {
         // if modalReduceMotionFix gate=true, new reactive behavior
         // added due to this._size (modalBase local) so LWC engine tracks change
         // while modalBase (parent) attempts to resolve this.modal.size (child)
@@ -217,7 +227,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * <lightning-modal> disableClose value
      * Get attribute to trigger disabling ability to dismiss modal temporarily
      */
-    get disableClose() {
+    get disableClose(): boolean {
         const modal = this.modal;
         if (!modal) {
             return false;
@@ -230,7 +240,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * @type {(HTMLElement|null)} The modal slot, currently a div elem
      */
     @api
-    get defaultSlot() {
+    get defaultSlot(): HTMLElement | null {
         return this.template.querySelector('[data-slot]');
     }
 
@@ -239,7 +249,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * @returns {(HTMLElement|null)} The section element, currently the section[role="dialog"]
      * @private
      */
-    get modalWrapper() {
+    get modalWrapper(): HTMLElement | null {
         return this.template.querySelector('[data-modal]');
     }
 
@@ -249,11 +259,13 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * @returns {(HTMLElement|null)} The modal inside <div data-slot>: <lightning-modal>
      * @private
      */
-    get modal() {
+    get modal(): LightningModal | null {
         return (
-            (isCSR && this.defaultSlot && this.defaultSlot.childNodes[0]) ||
+            (!import.meta.env.SSR &&
+                this.defaultSlot &&
+                this.defaultSlot.childNodes[0]) ||
             null
-        );
+        ) as unknown as LightningModal;
     }
 
     /**
@@ -263,7 +275,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * @returns {(HTMLElement|null)} The modal span element for IDRef linkage
      * @private
      */
-    get modalDescSpan() {
+    get modalDescSpan(): HTMLElement | null {
         return this.template.querySelector('[data-aria-description]');
     }
 
@@ -272,7 +284,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * @returns {(HTMLElement|null)}
      * @private
      */
-    get modalCloseButton() {
+    get modalCloseButton(): HTMLElement | null {
         return this.template.querySelector('[data-close-button]');
     }
 
@@ -282,7 +294,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * @returns {(HTMLElement|null)}
      * @private
      */
-    get modalElement() {
+    get modalElement(): HTMLElement | null {
         const modalSlot = this.defaultSlot;
         if (!modalSlot) {
             return null;
@@ -295,7 +307,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * @returns {(HTMLElement|null)}
      * @private
      */
-    get modalBackdrop() {
+    get modalBackdrop(): HTMLElement | null {
         return this.template.querySelector('[data-backdrop]');
     }
 
@@ -306,12 +318,12 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * @returns {number}
      * @private
      */
-    get backdropDimensions() {
+    get backdropDimensions(): { height: number; width: number } {
         const backdropElem = this.modalBackdrop;
         const backdropRect = backdropElem
             ? backdropElem.getBoundingClientRect()
             : {};
-        const { height, width } = backdropRect;
+        const { height, width } = backdropRect as { height?: number; width?: number };
         return {
             height: height || 0,
             width: width || 0,
@@ -325,8 +337,8 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * @returns {string} CSS class string
      * @private
      */
-    get modalCssClasses() {
-        let classes = classSet('slds-modal fix-slds-modal');
+    get modalCssClasses(): string {
+        const classes = classSet('slds-modal fix-slds-modal');
         // how the value of `size` is calculated is influenced by
         // by whether modalReduceMotionFix gate is enabled or disabled
         // if enabled, set size is used to set size value to this._size, along
@@ -371,7 +383,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * @returns {string} CSS class string
      * @private
      */
-    get modalBackdropCssClasses() {
+    get modalBackdropCssClasses(): string {
         let classes = classSet('slds-backdrop fix-slds-backdrop');
         if (hasAnimation()) {
             classes.add({
@@ -387,7 +399,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         return classes.toString();
     }
 
-    get isDescriptionSet() {
+    get isDescriptionSet(): boolean {
         const { description } = this;
         // check for being set, as well as not just a description with spaces
         // avoiding setting aria-describedby on section pointing to
@@ -405,7 +417,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      */
     // slds-button slds-button_icon slds-modal__close
     get computedCloseButtonCssClass() {
-        let classes = classSet(
+        const classes = classSet(
             'slds-button slds-button_icon slds-modal__close'
         );
         const fullScreenActive =
@@ -423,7 +435,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * we don't want to show the span or set aria-describedby
      * @private
      */
-    get showAriaDescribedBy() {
+    get showAriaDescribedBy(): boolean {
         return !isAriaDescriptionSupported() && this.isDescriptionSet;
     }
 
@@ -433,7 +445,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * @returns {Boolean}
      * @private
      */
-    get modalResizing() {
+    get modalResizing(): boolean | null {
         if (!this._resizing) {
             this._resizing = this.scheduleWindowResizeEvent.bind(this);
         }
@@ -452,7 +464,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * elsewhere in modalBase and modal, ESC key is also disabled, and
      * calls to this.close() are prevented
      */
-    toggleDisableCloseButton() {
+    toggleDisableCloseButton(): void {
         // this.disableCloseButton is local modalBase state
         // this.disableClose is modal.js @api state
         // we track both in order to handle transition correctly
@@ -469,7 +481,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
             // Should disable close button
             this.ariaLiveMessage = disableCloseButtonMessage;
             this.showAriaLiveMessage = true;
-            synchronizeAttrs(this.modalWrapper, { [`${ARIA.BUSY}`]: true });
+            synchronizeAttrs(this.modalWrapper, { [`${ARIA.BUSY}`]: true as unknown as string});
             synchronizeAttrs(this.modalCloseButton, { disabled: 'disabled' });
             this.disableCloseButton = true;
         } else {
@@ -487,7 +499,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * in order to be able to set focus back to that previous element
      * @private
      */
-    saveActiveElement() {
+    saveActiveElement(): void {
         this.savedActiveElement = getElementWithFocus();
     }
 
@@ -496,7 +508,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * and saves them for later setting background elements active
      * @private
      */
-    renderBackgroundInert() {
+    renderBackgroundInert(): void {
         this.savedInertElements = makeEverythingExceptElementInert(
             this.template.host
         );
@@ -506,7 +518,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * Renders most background elements active, as modal closes
      * @private
      */
-    renderBackgroundActive() {
+    renderBackgroundActive(): void {
         restoreInertness(this.savedInertElements);
         this.savedInertElements = [];
     }
@@ -516,7 +528,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * before modal existed
      * @private
      */
-    returnFocusToBackground() {
+    returnFocusToBackground(): void {
         const { savedActiveElement } = this;
         const elementWasFocused = returnFocusToElement(savedActiveElement);
         if (!elementWasFocused) {
@@ -530,7 +542,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * utilized for triggering fade in modal CSS class additions
      * @private
      */
-    queueShowModal() {
+    queueShowModal(): void {
         if (this.isModalOpen && !this.isModalTransitioningIn) {
             this.isModalTransitioningIn = true;
         }
@@ -542,11 +554,38 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * isModalOpen triggers fade in CSS class on modal background
      * @private
      */
-    openModal() {
+    openModal(): void {
         this.saveActiveElement();
         this.renderBackgroundInert();
         if (!this.isModalOpen) {
             this.isModalOpen = true;
+            if (lwcModalCount === 0) {
+                // Store the original inline style value
+                if (!import.meta.env.SSR) {
+                    originalBodyOverflow = getComputedStyle(
+                        document.body
+                    ).overflow;
+                    document.body.style.overflow = 'hidden';
+                }
+            }
+            lwcModalCount++;
+        }
+    }
+
+    /**
+     * Handles modal close state management and body overflow restoration
+     * @private
+     */
+    handleModalCloseState() {
+        if (this.isModalOpen) {
+            this.isModalOpen = false;
+            lwcModalCount--;
+            if (lwcModalCount === 0) {
+                if (!import.meta.env.SSR) {
+                    document.body.style.overflow = originalBodyOverflow;
+                }
+                originalBodyOverflow = null;
+            }
         }
     }
 
@@ -555,8 +594,9 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * before it is fully removed
      * @private
      */
-    closeModal() {
+    closeModal(): void {
         this.returnFocusToBackground();
+        // @ts-expect-error: renderBackgroundActive signature expects different arguments
         this.renderBackgroundActive(this.savedInertElements);
         if (this.ariaObserver) {
             this.ariaObserver.disconnect();
@@ -570,7 +610,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * modal requires 'label' value either at modalHeader or at modal
      * @private
      */
-    unsetAriaLabelAndError = () => {
+    unsetAriaLabelAndError: () => void = () => {
         // unset any previously set aria values
         synchronizeAttrs(this.modalWrapper, {
             [ARIA.LABELLEDBY]: null,
@@ -590,7 +630,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * At launch, modern browsers Firefox and Safari DO NOT support it. IE11 won't.
      * @private
      */
-    updateAriaDescription() {
+    updateAriaDescription(): void {
         const { description } = this;
         // if aria-description is supported && description set, set aria-description
         if (isAriaDescriptionSupported()) {
@@ -614,7 +654,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * modal requires 'label' value either at modalHeader or at modal
      * @private
      */
-    updateAriaLabel() {
+    updateAriaLabel(): void {
         const {
             label,
             headerRegistered,
@@ -640,22 +680,15 @@ export default class LightningModalBase extends LightningShadowBaseClass {
                 this.unsetAriaLabelAndError();
             }
             // unset if no header (gets removed dynamically, or never present)
-        } else {
-            // fallback to headless variant
-            // check label is actually set,
-            // and use aria-label instead of aria-labelledby
-            if (!labelIsEmpty) {
-                synchronizeAttrs(this.modalWrapper, {
-                    [ARIA.LABELLEDBY]: null,
-                    [ARIA.LABEL]: label,
-                });
-            } else {
-                // in headless variant, must have label value set, unless the modal
-                // is actively closing
-                if (!this.isModalClosing) {
-                    this.unsetAriaLabelAndError();
-                }
-            }
+        } else if (!labelIsEmpty) {
+            synchronizeAttrs(this.modalWrapper, {
+                [ARIA.LABELLEDBY]: null,
+                [ARIA.LABEL]: label,
+            });
+        } else if (!this.isModalClosing) {
+            // in headless variant, must have label value set, unless the modal
+            // is actively closing
+            this.unsetAriaLabelAndError();
         }
     }
 
@@ -665,11 +698,12 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * modalHeader or modal to have accessibility set correctly
      * @private
      */
-    errorLabelRequired() {
+    errorLabelRequired(): void {
         let errorMsg =
             'LightningModal - Templates with <lightning-modal-header> should define the label attribute as an attribute on <lightning-modal-header label="Modal Heading"> .';
         errorMsg +=
             ' Templates without <lightning-modal-header> should define the label attribute in the Modal.open({ label: "Modal Heading" })';
+        // eslint-disable-next-line no-console
         console.error(errorMsg);
     }
 
@@ -677,7 +711,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * Handle the close button click, or via ESC key
      * @private
      */
-    handleCloseClick() {
+    handleCloseClick(): void {
         // calls handlePrivateClose
         if (!this.disableCloseButton) {
             this.modal.close();
@@ -689,17 +723,19 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * when this.disableClose set true in modal.js
      * @param e
      */
-    handlePrivateClose(e) {
+    handlePrivateClose(e: CustomEvent): void {
         if (!(e.detail && e.detail[secure])) {
+            // eslint-disable-next-line no-console
             console.error('Invalid access to privateclose event');
             return;
         }
+        this.handleModalCloseState();
 
         // set isModalClosing boolean, to prevent intentional error
         // when checking for presence of api 'label' value
         this.isModalClosing = true;
         if (hasAnimation()) {
-            /// triggers the disappearance of the foreground modal elements
+            // triggers the disappearance of the foreground modal elements
             this.modalWrapper.classList.remove('slds-fade-in-open');
             this.modalBackdrop.classList.remove('slds-backdrop_open');
             // wait until modalWrappers animation completes, then proceed
@@ -724,8 +760,9 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         this.closeModal();
     }
 
-    handlePrivateDisableCloseButton(e) {
+    handlePrivateDisableCloseButton(e: CustomEvent): void {
         if (!(e.detail && e.detail[secure])) {
+            // eslint-disable-next-line no-console
             console.error('Invalid access to privatedisableclose event');
             return;
         }
@@ -738,12 +775,13 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * @param {Event} e The keyboard event
      * @private
      */
-    handleModalKeyDown(e) {
+    handleModalKeyDown(e: KeyboardEvent): void {
         const { ctrlKey, metaKey, shiftKey, key } = e;
         const hasModifier = ctrlKey || metaKey || shiftKey;
         // 'Esc' is IE11 specific, remove when support is dropped
         // when disableCloseButton set true, ESC key to close modal is deactivated
         if (
+            (!features.enableTooltipHoverDismiss || !hasActiveTooltip()) &&
             !hasModifier &&
             !this.disableCloseButton &&
             (key === 'Esc' || key === 'Escape')
@@ -768,7 +806,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * For modal v1, ignore multi-step modal as it is not part of scope
      * @private
      */
-    focusFirstElement() {
+    focusFirstElement(): void {
         const { autoFocusCompletedOnce, modalElement } = this;
         // If any of these is TRUE, exit before proceeding
         // 1. if modal has already been autofocused once, exit immediately
@@ -842,13 +880,14 @@ export default class LightningModalBase extends LightningShadowBaseClass {
 
         if (focusElem !== null) {
             this.lastFocusedElement = focusElem;
-            // eslint-disable-next-line @lwc/lwc/no-async-operation
+            // eslint-disable-next-line @lwc/lwc/no-async-operation, @lwc/lwc/ssr-no-restricted-browser-globals
             requestAnimationFrame(() => {
                 focusElem.focus();
             });
             this.autoFocusCompletedOnce = true;
         } else {
             // Should never happen since outerModalElem always present
+            // eslint-disable-next-line no-console
             console.error(
                 'LightningModal - at least one focusable element is required, none found.'
             );
@@ -860,7 +899,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * sets private tracked state, detaches window.onresize event listeners
      * @private
      */
-    unregisterBody() {
+    unregisterBody(): void {
         // FUTURE TODO mechanism to support aria-describedby
         // aria-describedby is optional, without a good reproducible pattern
         this.initBodyState();
@@ -880,7 +919,14 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         defaultSlotHasRendered,
         unRegisterCallback,
         firstTabbableElemRef,
-    }) {
+    }: {
+        bodyId: string;
+        bodyIsPopulated: boolean;
+        updateBodyCallback: Function; // eslint-disable-line @typescript-eslint/no-unsafe-function-type
+        defaultSlotHasRendered: boolean;
+        unRegisterCallback: Function; // eslint-disable-line @typescript-eslint/no-unsafe-function-type
+        firstTabbableElemRef: HTMLElement | null;
+    }): void {
         this.bodyRegistered = true;
         this.bodyDefaultSlotIsPopulated = bodyIsPopulated;
         this.bodySlotHasRendered = defaultSlotHasRendered;
@@ -919,7 +965,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * @param {Event} e The private custom registration event of modalBody
      * @private
      */
-    handleBodyRegister(e) {
+    handleBodyRegister(e: CustomEvent): void {
         const { detail } = e;
         this.registerBody(detail);
         e.stopPropagation();
@@ -929,7 +975,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * When modalBody removed or at startup, initialize private tracked modalBody state
      * @private
      */
-    initBodyState() {
+    initBodyState(): void {
         this.bodyRegistered = false;
         this.bodyDefaultSlotIsPopulated = false;
         this.bodySlotHasRendered = false;
@@ -944,7 +990,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * Sets private tracked state related to modalHeader, when removed
      * @private
      */
-    unregisterHeader() {
+    unregisterHeader(): void {
         this.initHeaderState();
         this.updateAriaLabel();
     }
@@ -953,7 +999,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * update the modalBase tracked header height value
      * @private
      */
-    updateHeaderHeight(value) {
+    updateHeaderHeight(value: number): void {
         this.headerHeight = !Number.isNaN(value) && value >= 0 ? value : 0;
     }
 
@@ -973,7 +1019,16 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         headerHeight,
         headerRef,
         labelId,
-    }) {
+    }: {
+        defaultSlotIsPopulated: boolean;
+        defaultSlotWrapperId: string;
+        defaultSlotHasRendered: boolean;
+        unRegisterCallback: Function; // eslint-disable-line @typescript-eslint/no-unsafe-function-type
+        labelIsPopulated: boolean;
+        headerHeight: number;
+        headerRef: HTMLElement;
+        labelId: string;
+    }): void {
         this.headerRegistered = true;
         this.updateHeaderHeight(headerHeight);
         this.headerDefaultSlotIsPopulated = defaultSlotIsPopulated;
@@ -1004,7 +1059,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * @param {Event} e Private custom registration event fired
      * @private
      */
-    handleHeaderRegister(e) {
+    handleHeaderRegister(e: CustomEvent): void {
         const { detail } = e;
         this.registerHeader(detail);
         this.updateAriaLabel();
@@ -1016,7 +1071,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * private tracked modalHeader state
      * @private
      */
-    initHeaderState() {
+    initHeaderState(): void {
         this.headerRegistered = false;
         this.headerHeight = 0;
         this.headerDefaultSlotIsPopulated = false;
@@ -1031,7 +1086,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * Sets private tracked state related to modalFooter, when removed
      * @private
      */
-    unregisterFooter() {
+    unregisterFooter(): void {
         this.initFooterState();
     }
 
@@ -1039,7 +1094,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * update the modalBase tracked footer height value
      * @private
      */
-    updateFooterHeight(value) {
+    updateFooterHeight(value: number): void {
         this.footerHeight = !Number.isNaN(value) && value >= 0 ? value : 0;
     }
 
@@ -1055,7 +1110,12 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         defaultSlotHasRendered,
         footerHeight,
         unRegisterCallback,
-    }) {
+    }: {
+        defaultSlotIsPopulated: boolean;
+        defaultSlotHasRendered: boolean;
+        footerHeight: number;
+        unRegisterCallback: Function; // eslint-disable-line @typescript-eslint/no-unsafe-function-type
+    }): void {
         this.footerRegistered = true;
         this.footerDefaultSlotIsPopulated = defaultSlotIsPopulated;
         this.footerSlotHasRendered = defaultSlotHasRendered;
@@ -1082,7 +1142,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * @param {Event} e Private custom registration event fired
      * @private
      */
-    handleFooterRegister(e) {
+    handleFooterRegister(e: CustomEvent): void {
         const { detail } = e;
         this.registerFooter(detail);
         e.stopPropagation();
@@ -1093,7 +1153,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * private tracked modalFooter state
      * @private
      */
-    initFooterState() {
+    initFooterState(): void {
         this.footerRegistered = false;
         this.footerHeight = 0;
         this.footerSlotHasRendered = false;
@@ -1107,7 +1167,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * the window.onresize event fires
      * @private
      */
-    updateModalBodyHeight() {
+    updateModalBodyHeight(): void {
         // check if org has access to reflow resize CSS, defaults to false
         if (orgHasWCAGResizeReflowSC) {
             this.template
@@ -1132,8 +1192,9 @@ export default class LightningModalBase extends LightningShadowBaseClass {
             // check, and update isSmallScreenSize before
             // callback to modalBody
             this.setIsSmallScreenSize();
-            // eslint-disable-next-line @lwc/lwc/no-async-operation
+            // eslint-disable-next-line @lwc/lwc/no-async-operation, @lwc/lwc/ssr-no-restricted-browser-globals
             requestAnimationFrame(() => {
+                // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
                 this.bodyResizeScheduled = false;
                 if (this.baseUpdateBodyCallback) {
                     const values = {
@@ -1158,12 +1219,12 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * from being fired every time window.onresize event fires
      * @private
      */
-    scheduleWindowResizeEvent() {
+    scheduleWindowResizeEvent(): void {
         if (this.timeoutId === 0) {
             // eslint-disable-next-line @lwc/lwc/no-async-operation
             this.timeoutId = setTimeout(() => {
                 this.updateModalBodyHeight();
-            }, DEBOUNCE_RESIZE);
+            }, DEBOUNCE_RESIZE) as unknown as number;
         }
     }
 
@@ -1171,7 +1232,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * Event handler for window.onresize event
      * @private
      */
-    handleWindowResizeEvent = () => {
+    handleWindowResizeEvent = (): void => {
         this.scheduleWindowResizeEvent();
     };
 
@@ -1181,8 +1242,8 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * registerBody function called
      * @private
      */
-    addWindowResizeEventListener() {
-        if (isCSR && !this.windowResizeEventBound) {
+    addWindowResizeEventListener(): void {
+        if (!import.meta.env.SSR && !this.windowResizeEventBound) {
             window.addEventListener('resize', this.handleWindowResizeEvent);
             this.windowResizeEventBound = true;
         }
@@ -1192,8 +1253,8 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * Detach window.onresize event listener when modalBody is removed
      * @private
      */
-    removeWindowResizeEventListener() {
-        if (isCSR && this.windowResizeEventBound) {
+    removeWindowResizeEventListener(): void {
+        if (!import.meta.env.SSR && this.windowResizeEventBound) {
             window.removeEventListener('resize', this.handleWindowResizeEvent);
             clearTimeout(this.timeoutId);
             this.timeoutId = 0;
@@ -1205,7 +1266,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * Remove screen orientation 'change' listener
      * @private
      */
-    removeOrientationChangeListener() {
+    removeOrientationChangeListener(): void {
         if (this.windowOrientationEventBound && this.portraitMatchMedia) {
             this.portraitMatchMedia.removeEventListener(
                 'change',
@@ -1223,8 +1284,8 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * Add screen orientation 'change' listener.
      * orientation changes: 'portrait' -> 'landscape' -> 'portrait'
      */
-    addOrientationChangeListener() {
-        if (isCSR) {
+    addOrientationChangeListener(): void {
+        if (!import.meta.env.SSR) {
             this.portraitMatchMedia = window.matchMedia(
                 '(orientation: portrait)'
             );
@@ -1246,10 +1307,12 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * Adds an event listener to listen and handle to 'focusin' events.
      * All Lightning Modals must trap user focus, while they are open.
      */
-    addFocusinEventListener() {
+    addFocusinEventListener(): void {
         if (!this.focusinEventBound) {
             this.focusinEventBound = true;
+            // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
             window.addEventListener(
+                // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
                 'focusin',
                 modalFocusinEventHandler.bind(this)
             );
@@ -1262,10 +1325,12 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * Remove event listener for 'focusin' events, only when the base modal is closed.
      * No-op when modals stacked on top of a base modal are closed.
      */
-    removeFocusinEventListener() {
+    removeFocusinEventListener(): void {
         if (this.focusinEventBound) {
             this.focusinEventBound = false;
+            // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
             window.removeEventListener(
+                // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
                 'focusin',
                 modalFocusinEventHandler.bind(this)
             );
@@ -1274,8 +1339,9 @@ export default class LightningModalBase extends LightningShadowBaseClass {
 
     handleModalBaseFocusin = modalFocusinEventHandler.bind(this);
 
-    handleLastFocusedElem(e) {
+    handleLastFocusedElem(e: CustomEvent): void {
         if (!(e.detail && e.detail[secure])) {
+            // eslint-disable-next-line no-console
             console.error(
                 'Invalid access to onprivatelightningmodallastfocus event'
             );
@@ -1295,7 +1361,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * @private
      */
     setIsSmallScreenSize() {
-        if (isCSR) {
+        if (!import.meta.env.SSR) {
             const docElem = (document && document.documentElement) || null;
             const browserWidth = docElem
                 ? docElem.clientWidth
@@ -1307,7 +1373,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         }
     }
 
-    removeModalEventListeners() {
+    removeModalEventListeners(): void {
         this.removeWindowResizeEventListener();
         this.removeOrientationChangeListener();
         this.removeFocusinEventListener();
@@ -1321,7 +1387,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * modalFooter
      * @private
      */
-    initBaseState() {
+    initBaseState(): void {
         // setting initialRender true handles the case where modal
         // is added / removed/added back to DOM
         this.initialRender = true;
@@ -1348,14 +1414,14 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * Reset all modal state
      * @private
      */
-    initModalState() {
+    initModalState(): void {
         this.initBaseState();
         this.initHeaderState();
         this.initBodyState();
         this.initFooterState();
     }
 
-    connectedCallback() {
+    connectedCallback(): void {
         super.connectedCallback();
         this.initModalState();
         // check for screen size right away
@@ -1365,12 +1431,16 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         this.setIsSmallScreenSize();
     }
 
-    disconnectedCallback() {
+    disconnectedCallback(): void {
+        // Defensive cleanup for abrupt modal removal
+        // This handles cases where handlePrivateClose never gets called
+        this.handleModalCloseState();
+
         this.removeModalEventListeners();
         this.closeModal();
     }
 
-    renderedCallback() {
+    renderedCallback(): void {
         if (this.initialRender) {
             this.openModal();
             this.initialRender = false;