lightning-base-components 1.22.2-alpha → 1.26.1-rc.0-alpha

package/src/lightning/messageDispatcher/messageDispatcher.js

@@ -1,3 +1,10 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { isCSR } from 'lightning/utilsPrivate';
+
 // Closure to hold the APIs if and when available
 let DispatcherCount = 1;
 const Dispatchers = {};
@@ -54,7 +61,7 @@ export function registerMessageHandler(handler) {
     const dispatchId = generateDispatchId();
     Dispatchers[dispatchId] = handler;
 
-    if (!dispatcherState.isMessageEventHandled) {
+    if (isCSR && !dispatcherState.isMessageEventHandled) {
         dispatcherState.isMessageEventHandled = true;
         window.addEventListener('message', (event) => {
             dispatchEvent(event);
@@ -72,12 +79,10 @@ export function dispatchEvent(event) {
         const dispatchId = data.arguments ? data.arguments.cmpId : null;
         if (dispatchId && Dispatchers[dispatchId]) {
             Dispatchers[dispatchId](data);
-            return true;
         }
     } catch (e) {
         // Catch JSON parse exception.
     }
-    return false;
 }
 
 export function createMessage(dispatcherId, event, params) {

package/src/lightning/messageDispatcher/messageDispatcher.js-meta.xml

@@ -1,4 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
     <isExposed>true</isExposed>
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
 </LightningComponentBundle>

package/src/lightning/mixinBuilder/mixinBuilder.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import { ArraySlice } from 'lightning/utilsPrivate';
 
 class MixinBuilder {

package/src/lightning/modal/__docs__/modal.md

@@ -384,6 +384,8 @@ LWS is replacing Lightning Locker over time and is already enabled in many custo
 
 Under Lightning Locker, when you fire events within `LightningModal`, the browser throws a `TypeError` related to `dispatchEvent`. If your modal component runs in an org that can’t enable LWS yet, the workaround is to wrap the code that calls `dispatchEvent` in a child component that extends `LightningElement`. Use the wrapper component as a child of one of the modal components in the modal template.
 
+See [Navigate From a Modal](https://developer.salesforce.com/docs/platform/lwc/guide/use-navigate-modal) in the LWC Dev Guide for an example.
+
 #### Modal Events with Aura
 
 For `LightningModal`, only the top level LWC component or application can communicate to the parent Aura component or application layer with eventing. This topmost component is usually the one that opens the `LightningModal`. `LightningModal`'s child components can't event to a parent Aura component or application layer.
@@ -411,6 +413,8 @@ Let's see this workflow in action. In this example, we'll create a button (`ligh
 
 Because `lightning-navigation` requires you to pass in a `recordId` to construct a page reference, we need to pass the record's data out of `LightningModal`, and then use the methods provided by `lightning-navigation`. With modal's limitations for event bubbling to the Aura layer, we can't just wrap the button or treegrid with `lightning-navigation`. We need to pull that data up to the topmost LWC component, where the `LightningModal` `.open()` is called, for our Aura wrapper to handle the navigation.
 
+However, in [Aura-based Experience Builder sites](https://developer.salesforce.com/docs/atlas.en-us.communities_dev.meta/communities_dev/communities_dev_basics_templates.htm), the `NavigationMixin` event can reach the Aura layer without being affected by the modal's limitations.
+
 So, we `import` the `lightning-navigation` component into the topmost LWC component that sits within the Aura layer by passing the data through `LightningModal`'s close method, `this.close({ data })`. Then the parent LWC component invokes the methods provided by `lightning-navigation`, which handles the navigation away from the page after the modal exits. From a UX perspective, this also lets us close the modal first, since `lightning-navigation` takes the user away from the current page.
 
 Note that this sample code isn't fully functional. We're only showing the relevant code that makes the `lightning-navigation` use case work with `LightningModal`.
@@ -612,19 +616,9 @@ To achieve the directional button layout, place the buttons in a `div` with the
 
 #### Styling Hooks
 
-The `lightning-modal-*` helper components support [style hooks](https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview). The styling hooks for the template that invokes the helper components doesn't carry over to them, so you must style each helper component individually.
-
-Use styling hooks to add styles to modal components. Any other values for the `style` attribute are ignored.
-
-```javascript
-MyModal.open({
-  style: {
-    '--slds-c-modal-color-border': 'red'
-  }
-})`
-```
+The `lightning-modal-*` helper components support [styling hooks](https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview). The styling hooks for the template that invokes the helper components doesn't carry over to them, so you must style each helper component individually.
 
-Customizing the styling on the white modal frame and background, close button, or gray backdrop isn't supported.
+Component styling hooks use the `--slds-c-*` prefix and change styling for specific elements or properties of a component. Component-specific styling isn’t recommended, because it’s unsupported for SLDS 2, but existing customizations still work with the original SLDS. If you use component styling hooks, limit the components to SLDS themes until SLDS 2 and the Salesforce Cosmos theme become generally available. See [Modals: Styling Hooks Overview](https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview) for documentation on component-specific hooks for this component.
 
 #### Accessibility
 

package/src/lightning/modal/__modalUtils__/modalContainerTestConstants.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 /* Contains constants for modal testing
  * NOTE: there is sample Modal DOM structure for reference
  * at the bottom of this file
@@ -53,9 +58,8 @@ const MODAL_FOOTER = 'lightning-modal-footer';
 
 // inner modal specific details ===========================
 
-// close button variants
-const MODAL_CLOSE_BUTTON_FULL_VARIANT = 'bare';
-const MODAL_CLOSE_BUTTON_NORMAL_VARIANT = 'bare-inverse';
+// close button
+const MODAL_CLOSE_BUTTON_NORMAL_VARIANT = 'bare';
 const MODAL_CLOSE_BTN_CLASS = 'slds-modal__close';
 const MODAL_CLOSE_BTN_SELECTOR = `.${MODAL_CLOSE_BTN_CLASS}`;
 const MODAL_CLOSE_BTN_FULL_CLASS = 'slds-modal_full-close-button';
@@ -252,7 +256,6 @@ module.exports = {
     MODAL_CLOSE_BTN_SELECTOR,
     MODAL_CLOSE_BTN_FULL_CLASS,
     MODAL_DATA_SELECTOR,
-    MODAL_CLOSE_BUTTON_FULL_VARIANT,
     MODAL_CLOSE_BUTTON_NORMAL_VARIANT,
     SCREEN_SIZE_SMALL,
     SCREEN_SIZE_SMALL_MID,

package/src/lightning/modal/__modalUtils__/modalContainerTestMethods.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 /* Contains methods for modal testing
  * All helper methods included expect that Webdriver
  *  is in scope: $, $$, browser, element
@@ -19,7 +24,6 @@ const {
     MODAL_CLOSE_BTN,
     MODAL_CLOSE_BTN_CLASS,
     MODAL_CLOSE_BTN_FULL_CLASS,
-    MODAL_CLOSE_BUTTON_FULL_VARIANT,
     MODAL_CLOSE_BUTTON_NORMAL_VARIANT,
     SCREEN_SIZE_LARGE,
     MODAL_SIZE_FULL,
@@ -331,6 +335,7 @@ async function validateModalCloseButtonAttributes(config) {
     // screen behavior occur below
     expect(modalCloseButtonVariant).not.toBeNull();
     expect(modalCloseButtonCssClass).toContain(MODAL_CLOSE_BTN_CLASS);
+    expect(modalCloseButtonVariant).toEqual(MODAL_CLOSE_BUTTON_NORMAL_VARIANT);
 
     // the only time size='full' actual renders full page width and height
     // is when windowWidth is set <= 480px (30em)
@@ -338,16 +343,9 @@ async function validateModalCloseButtonAttributes(config) {
         modalSize === MODAL_SIZE_FULL &&
         windowWidth <= MODAL_FULL_SCREEN_SMALL_BREAKPOINT
     ) {
-        expect(modalCloseButtonVariant).toEqual(
-            MODAL_CLOSE_BUTTON_FULL_VARIANT
-        );
-
         expect(modalCloseButtonCssClass).toContain(MODAL_CLOSE_BTN_FULL_CLASS);
     } else {
         // 'small', 'medium', 'large', and ('full' when windowWidth is set > 480px (30em)) are normal modal behavior
-        expect(modalCloseButtonVariant).toEqual(
-            MODAL_CLOSE_BUTTON_NORMAL_VARIANT
-        );
         expect(modalCloseButtonCssClass).not.toContain(
             MODAL_CLOSE_BTN_FULL_CLASS
         );

package/src/lightning/modal/__modalUtils__/modalContainerTestMockData.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 /* Contains mock data for modal testing */
 
 const formData = [

package/src/lightning/modal/modal.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import { api } from 'lwc';
 import LightningOverlay from 'lightning/overlay';
 import { parent, instanceName, secure } from 'lightning/overlayUtils';
@@ -90,4 +95,14 @@ export default class LightningModal extends LightningOverlay {
             console.error(errorMsg);
         }
     }
+
+    connectedCallback() {
+        // Safe for extended components to not call super
+        // this is only to prevent `<lightning-modal>` element usage!
+        if (this.constructor.name === 'LightningModal') {
+            throw new Error(
+                'Use of <lightning-modal> as an element is not supported. See developer documentation for extending the LightningModal class.'
+            );
+        }
+    }
 }

package/src/lightning/modal/modal.js-meta.xml

@@ -4,6 +4,6 @@
     <minApiVersion>55.0</minApiVersion>
     <support>GA</support>
     <capabilities>
-        <capability>lightning__ServerRenderableWithHydration</capability>
+        <capability>lightning__ServerRenderable</capability>
     </capabilities>
 </LightningComponentBundle>

package/src/lightning/modalBase/modal-base.slds.css

@@ -1,6 +1,4 @@
 
-/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
-  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /**
    * Remap to SLDS blueprint hooks for parity
@@ -90,8 +88,12 @@
     height: 2rem;
     margin-inline-start: auto;
     position: relative;
-    inset-block-end: var(--slds-g-spacing-2);
-    inset-inline-end: (var(--slds-g-spacing-2) * -1);
+    background-color: var(--slds-g-color-neutral-base-100);
+    border-radius: 0.25rem;
+    bottom: 0.5rem;
+    flex-shrink: 0;
+    justify-content: center;
+    display: inline-flex;
   }
 
   :host([data-render-mode="shadow"]) .slds-fade-in-open {

package/src/lightning/modalBase/modalBase.css

@@ -3,4 +3,14 @@
 
 div[data-slot] {
     display: contents;
-}
+}
+
+@media only screen and (max-width: 40rem) {
+    .slds-modal__container__reflow_resize {
+        margin-left: 0.1rem;
+        margin-right: 0.1rem;
+        padding-top: 0.5rem;
+        padding-bottom: 0;
+        overflow: hidden;
+    }
+}

package/src/lightning/modalBase/modalBase.html

@@ -18,6 +18,8 @@
             onprivatemodalfooterregister={handleFooterRegister}
             onprivateclose={handlePrivateClose}
             onprivatedisableclosebutton={handlePrivateDisableCloseButton}
+            onfocusin={handleModalBaseFocusin}
+            onprivatelightningmodallastfocus={handleLastFocusedElem}
             data-modal
         >
             <template if:true={showAriaDescribedBy}>
@@ -42,7 +44,7 @@
                 <lightning-button-icon
                     class={computedCloseButtonCssClass}
                     icon-name="utility:close"
-                    variant={computedCloseButtonVariant}
+                    variant="bare"
                     alternative-text={closeButtonAltText}
                     onclick={handleCloseClick}
                     size="large"

package/src/lightning/modalBase/modalBase.js

@@ -1,4 +1,10 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import { api } from 'lwc';
+import { features } from 'lightning/features';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import {
@@ -19,7 +25,8 @@ import {
 import closeButtonAltText from '@salesforce/label/LightningModalBase.cancelandclose';
 import disableCloseBtnMessage from '@salesforce/label/LightningModalBase.waitstate';
 import AriaObserver from 'lightning/ariaObserver';
-import { isLwcModalActive } from 'lightning/overlayManager';
+import { modalFocusinEventHandler } from 'lightning/modalUtils';
+import orgHasWCAGResizeReflowSC from '@salesforce/accessCheck/ComponentAccessibility.orgHasWCAGResizeReflowSC';
 
 const DEBOUNCE_RESIZE = 300;
 const SMALL_SCREEN_SIZE = 480;
@@ -27,7 +34,6 @@ const SIZE_SMALL = 'small';
 const SIZE_MEDIUM = 'medium';
 const SIZE_LARGE = 'large';
 const SIZE_FULL = 'full';
-const MODAL_CONTAINER = 'lightning-overlay-container';
 
 export default class LightningModalBase extends LightningShadowBaseClass {
     // this is visible in DOM, changed from 'lightning-modal-base'
@@ -69,10 +75,9 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     portraitMatchMedia = null;
     screenOrientationChangeHandler = null;
 
-    // state utilized when performing keyboard Tab/Shift-Tab interactions
+    // state utilized when performing keyboard focus trap
     focusinEventBound = false;
-    focusinEventHandler = null;
-    lastFocussedElementOnModal = null;
+    lastFocusedElement = null;
 
     // modalFooter, child
     footerRegistered = false;
@@ -130,22 +135,82 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     }
 
     /**
-     * Get the current modal size, calculated as a percentage of the viewport.
+     * Normalize customer set values to api size
+     * Valid values are small, medium, large, and full. The default is medium.
+     * @param sizeValue string representing api size value
+     * @returns {string} string representing normalized api size value
+     * @default medium
+     */
+    normalizeSize(sizeValue) {
+        const sizeDefault = SIZE_MEDIUM;
+        return normalizeString(sizeValue, {
+            fallbackValue: sizeDefault,
+            validValues: [SIZE_FULL, SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE],
+        });
+    }
+
+    /**
+     * Determine if this._size has been set yet.
+     * @returns {boolean} true means not yet set, false means has been set
+     */
+    get isModalSizeNotSet() {
+        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;
+
+    /**
+     * Get the current modal size.
+     * If modalReducedMotion gate=true, return this._size
+     * If modalReducedMotion gate=true, attempt to get this.modal.size directly
      * Valid values are small, medium, large, and full. The default is medium.
      * @type {string}
      * @default medium
      */
     get size() {
         const sizeDefault = SIZE_MEDIUM;
-        const modal = this.modal;
+        // if modalReduceMotionFix gate=true, new reactive behavior
+        // added due to local variable use which LWC engine observes changes
+        // while the component attempts to resolve this.modal
+        if (features.ENABLE_MODAL_REDUCE_MOTION) {
+            // if _size set return it, or provide 'medium' which is the default
+            return this._size || sizeDefault;
+        }
+        // if modalReduceMotionFix gate=false, original non-reactive
+        // no bug exists when hasAnimation=true
+        // a bug exists when hasAnimation=false, and !this.modal
+        // where customer api size will always be stuck at sizeDefault, 'medium'
+        // and so SLDS CSS class is also applied incorrectly
+        const { modal } = this;
         if (!modal) {
             return sizeDefault;
         }
         // get the size value from <lightning-modal>
-        return normalizeString(modal.size, {
-            fallbackValue: sizeDefault,
-            validValues: [SIZE_FULL, SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE],
-        });
+        return this.normalizeSize(modal.size);
+    }
+
+    /**
+     * Set the current modal size via this._size.
+     * Currently `set size` exists behind modalReduceMotionFix gate
+     * This new code encapsulates _size setting behavior
+     * Valid values are small, medium, large, and full. The default is medium.
+     * @type {string}
+     * @default medium
+     */
+    set size(value) {
+        // 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)
+        if (features.ENABLE_MODAL_REDUCE_MOTION) {
+            // when modalBase and its child modal are first rendering,
+            // it is common that this.modal doesn't yet exist.
+            // if modal doesnt yet exist, we keep this._size = null
+            // if modal exists, size value gets normalized, and _size = value
+            this._size = value ? this.normalizeSize(value) : null;
+        }
     }
 
     /**
@@ -262,7 +327,20 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      */
     get modalCssClasses() {
         let classes = classSet('slds-modal fix-slds-modal');
-        const sizeClass = this.size;
+        // 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
+        // if disabled, get size handles determing the value from this.modal
+        let modalSize;
+        if (features.ENABLE_MODAL_REDUCE_MOTION) {
+            const sizeDefault = SIZE_MEDIUM;
+            // utilize this._size var to make modalCssClasses reactive
+            modalSize = this._size === null ? sizeDefault : this.size;
+        } else {
+            // set modalSize the original way
+            modalSize = this.size;
+        }
+
         if (hasAnimation()) {
             // .slds-fade-in-open not present to trigger opacity animation
             // when later this.isModalTransitioningIn is set to TRUE
@@ -279,10 +357,10 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         }
         // don't add animation related css classes in this group
         classes.add({
-            'slds-modal_full': sizeClass === SIZE_FULL,
-            'slds-modal_medium': sizeClass === SIZE_MEDIUM,
-            'slds-modal_large': sizeClass === SIZE_LARGE,
-            'slds-modal_small': sizeClass === SIZE_SMALL,
+            'slds-modal_full': modalSize === SIZE_FULL,
+            'slds-modal_medium': modalSize === SIZE_MEDIUM,
+            'slds-modal_large': modalSize === SIZE_LARGE,
+            'slds-modal_small': modalSize === SIZE_SMALL,
         });
         return classes.toString();
     }
@@ -325,9 +403,11 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * modal header so the close button maintains visibility for a11y
      * @private
      */
-    // slds-button slds-button_icon slds-modal__close slds-button_icon-inverse
+    // slds-button slds-button_icon slds-modal__close
     get computedCloseButtonCssClass() {
-        let classes = classSet('slds-modal__close');
+        let classes = classSet(
+            'slds-button slds-button_icon slds-modal__close'
+        );
         const fullScreenActive =
             this.isSmallScreenSize && this.size === SIZE_FULL;
         classes.add({
@@ -336,18 +416,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         return classes.toString();
     }
 
-    /**
-     * Compute the correct lightning-button-icon variant to use
-     * for the size="full" behaviors, based upon the screen size
-     * threshold.  Important to maintain existing close button behavior
-     * when size 'small', 'medium' and 'large' close button variant
-     * when 'isSmallScreenSize = true' for a11y purposes
-     * @private
-     */
-    get computedCloseButtonVariant() {
-        return this.shouldModalBeFullScreen() ? 'bare' : 'bare-inverse';
-    }
-
     /**
      * Determines if aria-describedby should be set, and the span tag shown
      * occurs only when aria-description is not supported.
@@ -468,27 +536,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         }
     }
 
-    /**
-     * Handler for 'focusin' events, responsible for trapping user focus to open Modal
-     * @param e - Event
-     */
-    handleFocusinEvents(e) {
-        // eslint-disable-next-line @lwc/lwc/no-async-operation
-        requestAnimationFrame(() => {
-            // is current active (open) modal is lwc
-            if (isLwcModalActive() && this.isModalOpen) {
-                const isTargetRelatedToModal =
-                    e.target?.closest(MODAL_CONTAINER) ||
-                    e.relatedTarget?.closest(MODAL_CONTAINER);
-                if (isTargetRelatedToModal) {
-                    this.lastFocussedElementOnModal = getElementWithFocus();
-                } else {
-                    returnFocusToElement(this.lastFocussedElementOnModal);
-                }
-            }
-        });
-    }
-
     /**
      * Opening the modal involves first performing necessary steps to
      * prepare for when the modal closes
@@ -794,7 +841,11 @@ export default class LightningModalBase extends LightningShadowBaseClass {
             : fallbackFocusElem;
 
         if (focusElem !== null) {
-            focusElem.focus();
+            this.lastFocusedElement = focusElem;
+            // eslint-disable-next-line @lwc/lwc/no-async-operation
+            requestAnimationFrame(() => {
+                focusElem.focus();
+            });
             this.autoFocusCompletedOnce = true;
         } else {
             // Should never happen since outerModalElem always present
@@ -843,6 +894,14 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         // required to correctly set the CSS classes on modalBody
         this.updateModalBodyHeight();
 
+        // since modalBody registration occurs async, and only after this.modal exists
+        // using this as a proxy for setting modal.size value to local modalBase state
+        if (features.ENABLE_MODAL_REDUCE_MOTION) {
+            if (this.isModalSizeNotSet) {
+                this.size = this.modal?.size || null;
+            }
+        }
+
         // ModalBody can register 2+ times when initially rendering
         if (!this.windowResizeEventBound) {
             this.addWindowResizeEventListener();
@@ -930,6 +989,13 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         if (this.bodyRegistered) {
             this.updateModalBodyHeight();
         }
+        // since modalHeader registration occurs async, and only after modal exist
+        // using this as a proxy for setting modal.size value to local modalBase state
+        if (features.ENABLE_MODAL_REDUCE_MOTION) {
+            if (this.isModalSizeNotSet) {
+                this.size = this.modal?.size || null;
+            }
+        }
     }
 
     /**
@@ -1001,6 +1067,13 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         if (this.bodyRegistered) {
             this.updateModalBodyHeight();
         }
+        // since modalFooter registration occurs async, and only after modal exist
+        // using this as a proxy for setting modal.size value to local modalBase state
+        if (features.ENABLE_MODAL_REDUCE_MOTION) {
+            if (this.isModalSizeNotSet) {
+                this.size = this.modal?.size || null;
+            }
+        }
     }
 
     /**
@@ -1027,15 +1100,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         this.footerDefaultSlotIsPopulated = false;
     }
 
-    /**
-     * Test to determine whether modal should display full screen behavior
-     * @returns {Boolean}
-     * @private
-     */
-    shouldModalBeFullScreen() {
-        return this.size === SIZE_FULL && this.isSmallScreenSize;
-    }
-
     /**
      * When the modalBody content height is tall, it requires max-height
      * to be set in order to prevent overflow of the modal offscreen
@@ -1044,6 +1108,13 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * @private
      */
     updateModalBodyHeight() {
+        // check if org has access to reflow resize CSS, defaults to false
+        if (orgHasWCAGResizeReflowSC) {
+            this.template
+                .querySelector('[data-container]')
+                .classList.add('slds-modal__container__reflow_resize');
+        }
+
         clearTimeout(this.timeoutId);
         this.timeoutId = 0;
 
@@ -1178,8 +1249,10 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     addFocusinEventListener() {
         if (!this.focusinEventBound) {
             this.focusinEventBound = true;
-            this.focusinEventHandler = this.handleFocusinEvents.bind(this);
-            window.addEventListener('focusin', this.focusinEventHandler);
+            window.addEventListener(
+                'focusin',
+                modalFocusinEventHandler.bind(this)
+            );
         }
     }
 
@@ -1192,11 +1265,27 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     removeFocusinEventListener() {
         if (this.focusinEventBound) {
             this.focusinEventBound = false;
-            window.removeEventListener('focusin', this.focusinEventHandler);
-            this.focusinEventHandler = null;
+            window.removeEventListener(
+                'focusin',
+                modalFocusinEventHandler.bind(this)
+            );
         }
     }
 
+    handleModalBaseFocusin = modalFocusinEventHandler.bind(this);
+
+    handleLastFocusedElem(e) {
+        if (!(e.detail && e.detail[secure])) {
+            console.error(
+                'Invalid access to onprivatelightningmodallastfocus event'
+            );
+            return;
+        }
+        e.stopPropagation();
+
+        this.lastFocusedElement = e.detail.privatelightningmodallastfocus;
+    }
+
     /**
      * determine if the current screen is less than SMALL_SCREEN_SIZE
      * for Modal, screen size detection is simplified to what's required
@@ -1250,6 +1339,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         this.isModalOpen = false;
         this.isModalTransitioningIn = false;
         this.isModalClosing = false;
+        this._size = null;
         // browser screen size
         this.isSmallScreenSize = null;
     }
@@ -1298,6 +1388,13 @@ export default class LightningModalBase extends LightningShadowBaseClass {
                 this.toggleDisableCloseButton();
                 this.focusFirstElement();
             }
+            // after first render, check for this.modal.size
+            // this check exists in register|Body|Header|Footer functions
+            if (features.ENABLE_MODAL_REDUCE_MOTION) {
+                if (this.isModalSizeNotSet) {
+                    this.size = this.modal?.size || null;
+                }
+            }
         }
         this.updateModalBodyHeight();
     }

package/src/lightning/modalBase/modalBase.js-meta.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
     <capabilities>
-        <capability>lightning__ServerRenderableWithHydration</capability>
+        <capability>lightning__ServerRenderable</capability>
     </capabilities>
 </LightningComponentBundle>