lightning-base-components 1.18.8-ssr → 1.19.2-alpha

package/src/lightning/menuItem/menuItem.js

@@ -1,5 +1,4 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet } from 'lightning/utils';
 import {
     normalizeBoolean,
@@ -11,7 +10,7 @@ import { sanitizeURL, FALLBACK_URL } from 'lightning/utilsPrivate';
 /**
  * Represents a list item in a menu.
  */
-export default class LightningMenuItem extends LightningShadowBaseClass {
+export default class LightningMenuItem extends LightningElement {
     /**
      * A value associated with the menu item.
      * @type {string}
@@ -63,7 +62,6 @@ export default class LightningMenuItem extends LightningShadowBaseClass {
     @api draftAlternativeText;
 
     connectedCallback() {
-        super.connectedCallback();
         this.setAttribute('role', 'presentation');
     }
 

package/src/lightning/menuSubheader/menuSubheader.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
-@import './menu-subheader.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './menu-subheader.slds.css'; */
 
 :host {
     display: block;

package/src/lightning/menuSubheader/menuSubheader.js

@@ -1,10 +1,9 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api } from 'lwc';
 
 /**
  * Creates a subheader in the list of items in lightning-button-menu.
  */
-export default class LightningMenuSubheader extends LightningShadowBaseClass {
+export default class LightningMenuSubheader extends LightningElement {
     /**
      * The text displayed in the subheader.
      * @type {string}
@@ -12,7 +11,6 @@ export default class LightningMenuSubheader extends LightningShadowBaseClass {
     @api label;
 
     connectedCallback() {
-        super.connectedCallback();
-        this.setAttribute('role', 'separator');
+        this.setAttribute('role', 'presentation');
     }
 }

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

@@ -3,7 +3,7 @@
 This document is about migrating existing modal implementations.
 
 ## **Creating a new LWC-based modal implementation?**
-* Starting in release 236, when utilizing LWC or Aura code, your team should use `LightningModal` 
+* Starting in release 236, when utilizing LWC or Aura code, your team should use `LightningModal`
 * Dive into the details here by [Creating a Modal Component](modal.md#creating-a-modal-component)
 * Or, take a look at some of our [Modal Code Examples](modal.md#modal-code-examples).
 
@@ -67,7 +67,7 @@ If you have an existing LWC custom modal that implements the HTML and CSS from t
     * Wrap the desired example tag within a `<template></template>` tag
     * For modal blueprints and variants, review the [Modal and supported variants](modal.md#modal-and-supported-variants) section.
 * `LightningModal` provides three helper components for header, body content, and footer sections. The `lightning-modal-body` is the only required component.
-* You don’t need to worry about setting any of the base SLDS modal CSS classes. These are set for you. If you’d like to further style your modal, review the modal [Style Hooks](modal.md#style-hooks) section 
+* You don’t need to worry about setting any of the base SLDS modal CSS classes. These are set for you. If you’d like to further style your modal, review the modal [Style Hooks](modal.md#style-hooks) section
 * Review our `LightningModal` documentation:
     * [Creating a Modal Component](modal.md#creating-a-modal-component)
     * [Opening a Modal Instance](modal.md#opening-a-modal-instance)
@@ -86,11 +86,11 @@ This section covers implementation differences between Aura modal solutions and
 
 * When setting up the config before opening the modal, either pass your content via custom written `@api` (see [Using the open() method](modal.md#using-the-open-method)), or set it statically within your template (see the [Base Modal](modal.md#base-modal) HTML template example)
 * If you don't want a header and title section, simply remove `lightning-modal-header`. You must then pass the required `label` value (for the accessible modal title) when opening the modal, for example `Modal.open({label: ‘Descriptive Modal Header’})`. See our [Headless Variant](modal.md#headless-variant) documentation, and [Modal Code Examples](modal.md#modal-code-examples). Same goes for the footer section, if you don’t want a footer, don't use `lightning-modal-footer`. Only `lightning-modal-body` is required.
-* **For specific events and event listeners availability** within `createPanel` or `createModal`, for example, `onBeforeShow`, `onAfterShow`, `onCreate` or `onDestroy`, see our section on [About Modal Events](modal.md#about-modal-events).  
-    * **Recommend:** create these as [custom events](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/events_create_dispatch)
-* **If you want to get element reference,** for example, `linkElement.querySelector(‘[data-my-link]’)` within the content you’ve set within your modal, utilize data attributes.  For this example, `<a href=“#” data-my-link>`, rather than relying on ID references, since these dynamically change in LWC).  
-    * **Recommend:** See the note within the [ARIA attributes](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_components_accessibility_attributes) section.
-* If you need to style aspects of your modal, you can apply CSS styles directly to your markup within the helper components. 
+* **For specific events and event listeners availability** within `createPanel` or `createModal`, for example, `onBeforeShow`, `onAfterShow`, `onCreate` or `onDestroy`, see our section on [About Modal Events](modal.md#about-modal-events).
+    * **Recommend:** create these as [custom events](https://developer.salesforce.com/docs/platform/lwc/guide/events-create-dispatch)
+* **If you want to get element reference,** for example, `linkElement.querySelector(‘[data-my-link]’)` within the content you’ve set within your modal, utilize data attributes.  For this example, `<a href=“#” data-my-link>`, rather than relying on ID references, since these dynamically change in LWC).
+    * **Recommend:** See the note within the [ARIA Attributes](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-accessibility-attributes#aria-attributes) section.
+* If you need to style aspects of your modal, you can apply CSS styles directly to your markup within the helper components.
     * **Recommend:** See the example under [Directional Variant](modal.md#directional-variant) section.
 * If you need to support a modal with a [directional variant](https://www.lightningdesignsystem.com/components/modals/#Directional), please review our [Directional Variant](modal.md#directional-variant) documentation.
 
@@ -101,7 +101,7 @@ This section covers `@api` or attribute differences between Aura modal solutions
 #### Supported APIs
 See [ui:modal](https://git.soma.salesforce.com/aura/aura/tree/master/aura-components/src/main/components/ui/modal)
 
-* `title` attribute has been changed to the `label` attribute 
+* `title` attribute has been changed to the `label` attribute
     * You set the `label` attribute on the `lightning-modal-header` helper component or in the case of a headless modal, when you open the modal, you would set the `label` attribute when opening the modal.  For example: `Modal.open({ label: ‘Modal Descriptive Title’ })`
 * `**LightningModal**` currently has only four official attributes A
     * `size` - to set the width of the modal
@@ -129,7 +129,7 @@ See [ui:modal](https://git.soma.salesforce.com/aura/aura/tree/master/aura-compon
 
 ## Migrating From `lightning-dialog`
 
-If you need to move an existing `lightning-dialog` implementation, you’ll need to consider these changes: 
+If you need to move an existing `lightning-dialog` implementation, you’ll need to consider these changes:
 
 ### Implementation Differences
 

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

@@ -322,7 +322,7 @@ A modal can only fire events captured by the component that opened it, not the m
 
 To capture modal events, attach them in the `.open()` method invoked by the component that opens the modal.
 
-Capturing modal events requires [Lightning Web Security (LWS)](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.security_lwsec_enable) to be enabled in the Salesforce org. See the **Modal Events with LWS and Lightning Locker** section for more information.
+Capturing modal events requires [Lightning Web Security (LWS)](https://developer.salesforce.com/docs/platform/lwc/guide/security-lwsec-enable) to be enabled in the Salesforce org. See the **Modal Events with LWS and Lightning Locker** section for more information.
 
 For example, here's a custom `select` event dispatched from `MyModal`.
 
@@ -374,13 +374,13 @@ handleOpenModal() {
 }
 ```
 
-See [Create and Dispatch Events](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/events_create_dispatch) in the LWC Dev Guide for more information about events.
+See [Create and Dispatch Events](https://developer.salesforce.com/docs/platform/lwc/guide/events-create-dispatch) in the LWC Dev Guide for more information about events.
 
 #### Modal Events with LWS and Lightning Locker
 
 Modal events work as expected when Lightning Web Security (LWS) is enabled within a Salesforce org, as described in the **Modal Events** section. If LWS isn't enabled in an org, Lightning Locker is in effect.
 
-LWS is replacing Lightning Locker over time and is already enabled in many customer orgs. New orgs have LWS enabled by default. To enable LWS, see [Enable Lightning Web Security in an Org](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/security_lwsec_enable) in the Lightning Web Components Developer Guide.
+LWS is replacing Lightning Locker over time and is already enabled in many customer orgs. New orgs have LWS enabled by default. To enable LWS, see [Enable Lightning Web Security in an Org](https://developer.salesforce.com/docs/platform/lwc/guide/security-lwsec-enable) in the Lightning Web Components Developer Guide.
 
 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.
 
@@ -405,7 +405,7 @@ These extracting methods fit into the larger LWC Modal-to-Aura event workflow.
 4. Fire a separate event containing the LWC-processed event details and send it to the Aura parent component.
 5. Use an Aura-based event handler to handle and process the event.
 
-For more information, see [Send Events to an Enclosing Aura Component](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.events_sending_to_aura_components) and [Events Best Practices](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/events_best_practices).
+For more information, see [Send Events to an Enclosing Aura Component](https://developer.salesforce.com/docs/platform/lwc/guide/events-sending-to-aura-components) and [Events Best Practices](https://developer.salesforce.com/docs/platform/lwc/guide/events-best-practices).
 
 Let's see this workflow in action. In this example, we'll create a button (`lightning-button`) that launches a modal (`LightningModal`) containing a tree grid component (`lightning-tree-grid`) with a button in each record row that automatically navigates our user to that record's page (`lightning-navigation`). This use case requires data passing between our LWC components and a parent Aura component.
 
@@ -560,7 +560,7 @@ The headerless variant of `LightningModal` has these additional requirements.
 -  The `label` property is required for all variants of `LightningModal`. Assistive devices read the `label` value, even though the headerless modal variant doesn't display the label.
 -  Because this variant doesn't use `lightning-modal-header`, you have to manually create an `<h1>` heading in `lightning-modal-body`. Provide accessible structure by starting with heading level `<h1>` and using levels up to `<h6>` appropriately. For more information, see [Semantic Structure, Headings on WebAim.org](https://webaim.org/techniques/semanticstructure/#headings).
 
-You can also create a full-screen modal component by setting the `size` attribute to `full`. This variant resizes the modal to the full width and height of the viewport on screens with 767 pixels or less, like mobile phone devices. On screens 768 pixels or larger, like desktop monitors or tablets, a `size=full` modal has the same behavior as a modal with `size=large` set.
+You can also create a full-screen modal component by setting the `size` attribute to `full`. This variant resizes the modal to the full width and height of the viewport on screens up to 48em (~768 pixels or less), like mobile phone devices. On screens larger than 48em (~769 pixels or larger), like desktop monitors or tablets, a `size=full` modal has the same behavior as a modal with `size=large` set.
 
 The `LightningModal` component also supports the SLDS [Directional variant](https://www.lightningdesignsystem.com/components/modals/#Directional) modal blueprint pattern.
 
@@ -584,6 +584,16 @@ To achieve the directional button layout, place the buttons in a `div` with the
 
 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'
+  }
+})`
+```
+
 Customizing the styling on the white modal frame and background, close button, or gray backdrop isn't supported.
 
 #### Accessibility

package/src/lightning/modal/__examples__disabled/basic/basic.css

@@ -4,4 +4,4 @@
     background: #FFF;
     box-shadow: 0 1px 0.25rem rgb(0 0 0 / 20%);
     padding: 1rem;
-}
+}

package/src/lightning/modal/__examples__disabled/demoallform/demoallform.css

@@ -1,5 +1,3 @@
-@import 'lightning/sldsCommon';
-
-:host([data-render-mode="shadow"]) [id='all-footer'] lightning-button:not(:first-child) {
-    margin-left: var(--sds-g-spacing-2, 0.5rem);
+lightning-input .slds-checkbox_toggle .slds-checkbox_faux_container {
+    display: block !important;
 }

package/src/lightning/modal/__examples__disabled/demoallformfull/demoallformfull.css

@@ -1,5 +1,3 @@
-@import 'lightning/sldsCommon';
-
-:host([data-render-mode="shadow"]) [id='all-footer'] lightning-button:not(:first-child) {
-    margin-left: var(--sds-g-spacing-2, 0.5rem);
+lightning-input .slds-checkbox_toggle .slds-checkbox_faux_container {
+    display: block !important;
 }

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

@@ -7,10 +7,6 @@
 
 // buttons that open modals
 const BUTTON_MODAL_ALL = '[data-modal-button-all]';
-const BUTTON_MODAL_ALL_SMALL = '[data-modal-button-all-small]';
-const BUTTON_MODAL_ALL_MEDIUM = '[data-modal-button-all-medium]';
-const BUTTON_MODAL_ALL_LARGE = '[data-modal-button-all-large]';
-
 const BUTTON_MODAL_ALL_TWO = '[data-modal-button-all-two]';
 const BUTTON_MODAL_HEADLESS = '[data-modal-button-headless]';
 const BUTTON_MODAL_HEADLESS_NO_LABEL = '[data-modal-button-headless-no-label]';
@@ -59,7 +55,6 @@ const MODAL_CLOSE_BUTTON_NORMAL_VARIANT = 'bare-inverse';
 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';
-const MODAL_CLOSE_BTN_ICON_BORDER_CLASS = 'slds-button_icon-border-filled';
 // modal screen size testing
 // utilized by full screen modal tests
 const SCREEN_SIZE_SMALL = 'SMALL';
@@ -83,13 +78,13 @@ const BODY_HEADLESS_SELECTOR = 'slds-modal__content_headless';
 const BODY_FOOTLESS_SELECTOR = 'slds-modal__content_footless';
 
 // modal size measurements and values
-const MODAL_FULL_SCREEN_SMALL_BREAKPOINT = 767;
+const MODAL_FULL_SCREEN_SMALL_BREAKPOINT = 768;
 // <lightning-modal> element location, medium+ screen
 const MODAL_DEFAULT_PX_OFFSET_X = 25;
 const MODAL_DEFAULT_PX_OFFSET_Y = 50;
 // <lightning-modal> element location, full screen
 const MODAL_ELEM_FULL_PX_OFFSET_X = 0;
-const MODAL_ELEM_FULL_PX_OFFSET_Y = 52;
+const MODAL_ELEM_FULL_PX_OFFSET_Y = 0;
 const MAX_HEIGHT = 'max-height';
 const MIN_HEIGHT = 'min-height';
 const MODAL_BODY_MIN_HEIGHT_PX = 80;
@@ -108,9 +103,6 @@ const MODAL_RENDER_PAUSE = 1250;
 const SELECTORS = {
     // main testing options
     all: BUTTON_MODAL_ALL,
-    'all-small': BUTTON_MODAL_ALL_SMALL,
-    'all-medium': BUTTON_MODAL_ALL_MEDIUM,
-    'all-large': BUTTON_MODAL_ALL_LARGE,
     'all-form': BUTTON_MODAL_FORM,
     headless: BUTTON_MODAL_HEADLESS,
     footless: BUTTON_MODAL_FOOTLESS,
@@ -124,11 +116,6 @@ const SELECTORS = {
     'multi-modals': BUTTON_MODAL_MULTI,
 };
 
-// private attributes on modal components
-const DATA_VARIANT_HEADLESS_ATTRIBUTE = 'data-variant-headless';
-const DATA_VARIANT_FOOTLESS_ATTRIBUTE = 'data-variant-footless';
-const DATA_SIZE_ATTRIBUTE = 'data-size';
-
 // modal type to size api value mapping
 const NAME_TO_SIZE = {
     all: MODAL_SIZE_FULL,
@@ -234,7 +221,6 @@ module.exports = {
     MODAL_CLOSE_BTN_CLASS,
     MODAL_CLOSE_BTN_SELECTOR,
     MODAL_CLOSE_BTN_FULL_CLASS,
-    MODAL_CLOSE_BTN_ICON_BORDER_CLASS,
     MODAL_DATA_SELECTOR,
     MODAL_CLOSE_BUTTON_FULL_VARIANT,
     MODAL_CLOSE_BUTTON_NORMAL_VARIANT,
@@ -276,7 +262,4 @@ module.exports = {
     ARIA_LABELLEDBY,
     ARIA_LABEL,
     KEY,
-    DATA_VARIANT_FOOTLESS_ATTRIBUTE,
-    DATA_VARIANT_HEADLESS_ATTRIBUTE,
-    DATA_SIZE_ATTRIBUTE,
 };

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

@@ -19,7 +19,6 @@ import {
     MODAL_CLOSE_BTN,
     MODAL_CLOSE_BTN_CLASS,
     MODAL_CLOSE_BTN_FULL_CLASS,
-    MODAL_CLOSE_BTN_ICON_BORDER_CLASS,
     MODAL_CLOSE_BUTTON_FULL_VARIANT,
     MODAL_CLOSE_BUTTON_NORMAL_VARIANT,
     SCREEN_SIZE_LARGE,
@@ -60,8 +59,6 @@ async function getOverlayContainer() {
     // overlay container isn't present in the DOM
     // until first overlay or modal is created
     // eslint-disable-next-line
-    // wrapper = await kontajner.getWrapper();
-    // await wrapper.waitForDisplayed();
     // eslint-disable-next-line no-undef
     const htmlElem = await $('html');
     // eslint-disable-next-line no-undef
@@ -139,9 +136,9 @@ async function getModalInternals(config, modalIndex = 0) {
         modalBaseBackdropElem = await modalBaseElem.shadow$(
             MODAL_BODY_BACKDROP
         );
+
         // get focus trap element
         focusTrapElem = await modalBaseElem.shadow$(FOCUS_TRAP);
-        await focusTrapElem.waitForDisplayed();
         focusTrapSlotElem = await focusTrapElem.shadow$('slot');
 
         // get modal's <section> element just inside focus trap
@@ -150,20 +147,15 @@ async function getModalInternals(config, modalIndex = 0) {
             'getFirstSlotElement',
             focusTrapSlotElem
         );
-        await modalSectionElem.waitForDisplayed();
         // get modal close button
         modalCloseButton = await modalSectionElem.$(MODAL_CLOSE_BTN);
-        await modalCloseButton.waitForDisplayed();
 
         // get modal div slot (not an actual slot)
         modalDataSlot = await modalSectionElem.$(MODAL_DIV_SLOT);
-        await modalDataSlot.waitForDisplayed();
         // get div[data-container].slds-modal__container
         modalContainerElem = await modalSectionElem.$(MODAL_CONTAINER_DIV);
-        await modalContainerElem.waitForDisplayed();
         // get lightning-modal element
         modalElem = await modalSectionElem.$(MODAL);
-        await modalElem.waitForDisplayed();
 
         // skip looking for modalHeader when type of modal is 'headless'
         if (!isModalOfVariantType(modalVariantType, 'headless')) {
@@ -325,7 +317,7 @@ async function validateModalCloseButtonAttributes(config) {
     expect(modalCloseButtonCssClass).toContain(MODAL_CLOSE_BTN_CLASS);
 
     // the only time size='full' actual renders full page width and height
-    // is when windowWidth is set <= 767
+    // is when windowWidth is set <= 768
     if (
         modalSize === MODAL_SIZE_FULL &&
         windowWidth <= MODAL_FULL_SCREEN_SMALL_BREAKPOINT
@@ -335,22 +327,72 @@ async function validateModalCloseButtonAttributes(config) {
         );
 
         expect(modalCloseButtonCssClass).toContain(MODAL_CLOSE_BTN_FULL_CLASS);
-        expect(modalCloseButtonCssClass).toContain(
-            MODAL_CLOSE_BTN_ICON_BORDER_CLASS
-        );
     } else {
-        // 'small', 'medium', 'large', and ('full' when windowWidth is set > 767) are normal modal behavior
+        // 'small', 'medium', 'large', and ('full' when windowWidth is set > 768) are normal modal behavior
         expect(modalCloseButtonVariant).toEqual(
             MODAL_CLOSE_BUTTON_NORMAL_VARIANT
         );
         expect(modalCloseButtonCssClass).not.toContain(
             MODAL_CLOSE_BTN_FULL_CLASS
         );
-        expect(modalCloseButtonCssClass).not.toContain(
-            MODAL_CLOSE_BTN_ICON_BORDER_CLASS
-        );
     }
 }
+/*
+ * get some of the modal internals element details
+ * including offset values and classes
+ * utilizes DOM based approach via browser.execute
+ */
+// eslint-disable-next-line @lwc/lwc/no-async-await
+async function getModalInternalsDomBased() {
+    // eslint-disable-next-line no-undef
+    const result = await browser.execute(() => {
+        // down the modal dom tree
+        // eslint-disable-next-line @lwc/lwc/no-document-query
+        const loc = document.querySelector('lightning-overlay-container');
+        const modalBase = loc.shadowRoot.querySelector('lightning-modal-base');
+        const modalBackdrop =
+            modalBase.shadowRoot.querySelector('.slds-backdrop');
+        const focusTrap = modalBase.shadowRoot.querySelector(
+            'lightning-focus-trap'
+        );
+        const focusTrapSlot = focusTrap.shadowRoot.querySelector('slot');
+        const modalSectionElem = focusTrapSlot.assignedNodes()[0];
+        const modalContainerElem = modalSectionElem.querySelector(
+            '.slds-modal__container'
+        );
+        const modalCloseButton = modalSectionElem.querySelector(
+            'lightning-button-icon'
+        );
+        const modalElem = modalSectionElem.querySelector('lightning-modal');
+        return {
+            window: {
+                width: window.innerWidth,
+                height: window.innerHeight,
+            },
+            modalBase: {
+                offset: modalBase.getBoundingClientRect(),
+            },
+            modalBackdrop: {
+                offset: modalBackdrop.getBoundingClientRect(),
+            },
+            modalSectionElem: {
+                class: modalSectionElem.getAttribute('class'),
+                offset: modalSectionElem.getBoundingClientRect(),
+            },
+            modalContainerElem: {
+                class: modalContainerElem.getAttribute('class'),
+                offset: modalContainerElem.getBoundingClientRect(),
+            },
+            modalCloseButton: {
+                class: modalCloseButton.getAttribute('class'),
+            },
+            modalElem: {
+                offset: modalElem.getBoundingClientRect(),
+            },
+        };
+    });
+    return result;
+}
 
 /* Function includes expect tests to validate the expected
  * modal HEIGHT behavior based on screen size, size attribute,
@@ -359,23 +401,20 @@ async function validateModalCloseButtonAttributes(config) {
 // eslint-disable-next-line @lwc/lwc/no-async-await
 async function validateModalHeightBehavior(config) {
     const { modalSize } = config;
-
-    // first, get window size
-    // eslint-disable-next-line no-undef
-    const { width: windowWidth } = await browser.getWindowSize();
-    // get <lightning-modal> element
-    const { modalBodyElem, modalElem } = await getModalInternals(config);
-
-    const { x: modalElemLocX, y: modalElemLocY } =
-        await modalElem.getLocation();
-
-    // get <lightning-modal-body> element
+    // first, get sizes of elements
+    const { modalSectionElem, window, modalElem } =
+        await getModalInternalsDomBased();
+    const { height: modalSectionElemHeight } = modalSectionElem.offset;
+    const { height: windowHeight, width: windowWidth } = window;
+
+    // get <lightning-modal-body> element for min and max height values
+    const { modalBodyElem } = await getModalInternals(config);
     const { bodyOuterDiv } = await getModalBodyInternals(modalBodyElem);
     const modalBodyOuterDivStyle = await bodyOuterDiv.getAttribute('style');
     const modalBodyStyleProps = parseStyleAttributes(modalBodyOuterDivStyle);
-
+    const { x: modalElemX, y: modalElemY } = modalElem.offset;
     // the only time size='full' actual renders full page width and height
-    // is when windowWidth is set <= 767
+    // is when windowWidth is set <= 768
     // note: reliably testing outer div element was not possible as
     // webdriver getSize didn't provide correct values for comparison
     // the tests below verify that the code path for setting full height are invoked
@@ -383,33 +422,29 @@ async function validateModalHeightBehavior(config) {
         modalSize === MODAL_SIZE_FULL &&
         windowWidth <= MODAL_FULL_SCREEN_SMALL_BREAKPOINT
     ) {
-        // the <lightning-modal> element is consistently accurate for
-        // location measurment in the CI
-        // typical values are: { x: 0, y: 48 },
-        // y=48 comes from margin/padding and is expected
-        expect(modalElemLocX).toEqual(MODAL_ELEM_FULL_PX_OFFSET_X);
-        expect(modalElemLocY).toBeLessThan(MODAL_ELEM_FULL_PX_OFFSET_Y);
+        expect(modalSectionElemHeight).toEqual(windowHeight);
+        expect(modalElemX).toEqual(MODAL_ELEM_FULL_PX_OFFSET_X);
+        expect(modalElemY).toEqual(MODAL_ELEM_FULL_PX_OFFSET_Y);
         // these next two tests are proxy behavior indicating
         // that the event listeners, and rendering has updated
         // to make the modal go full height
-        expect(modalBodyStyleProps[MAX_HEIGHT]).toEqual(
-            modalBodyStyleProps[MIN_HEIGHT]
-        );
-        expect(modalBodyStyleProps[MIN_HEIGHT]).toBeGreaterThan(
-            MODAL_BODY_MIN_HEIGHT_PX
-        );
+        // these values are not set after the SLDS based
+        // CSS grid implementation was implemented
+        expect(modalBodyStyleProps[MAX_HEIGHT]).toBeUndefined();
+        expect(modalBodyStyleProps[MIN_HEIGHT]).toBeUndefined();
     } else {
-        // 'small', 'medium', 'large', and ('full' when windowWidth is set > 767) are normal modal behavior
-        // the <lightning-modal> element is consistently accurate for
+        // 'small', 'medium', 'large', and ('full' when windowWidth is set > 768) are normal modal behavior
+        // the div.slds-modal__container element is consistently accurate for
         // location measurment in the CI
         // location values vary based on screen and size value
-        // typical value are: { x: > 25, y: > 60 },
-        // y=48 comes from margin/padding and is expected
-        expect(modalElemLocX).toBeGreaterThan(MODAL_DEFAULT_PX_OFFSET_X);
-        expect(modalElemLocY).toBeGreaterThan(MODAL_DEFAULT_PX_OFFSET_Y);
-        // these next two tests are proxy behavior indicating
+        // typical value are: { x: > 25 },
+        expect(modalElemX).toBeGreaterThan(MODAL_DEFAULT_PX_OFFSET_X);
+        expect(modalElemY).toBeGreaterThan(MODAL_DEFAULT_PX_OFFSET_Y);
+        // these next two sets of tests are proxy behavior indicating
         // that the event listeners, and rendering has updated
-        // to make the modal go full height
+        // to make the modal exhibit normal height behavior (not full screen)
+        expect(modalBodyStyleProps[MAX_HEIGHT]).toBeDefined();
+        expect(modalBodyStyleProps[MIN_HEIGHT]).toBeDefined();
         expect(modalBodyStyleProps[MAX_HEIGHT]).not.toEqual(
             modalBodyStyleProps[MIN_HEIGHT]
         );
@@ -428,22 +463,25 @@ async function validateModalWidthBehavior(config, modalIndex = 0) {
     const { modalSize } = config;
     // first, get outer window size
     // eslint-disable-next-line no-undef
-    const { width: windowWidth } = await browser.getWindowSize();
+    const { width: windowWidth } =
+        // eslint-disable-next-line no-undef
+        await browser.getWindowSize();
 
     // second, find modal elem, then get width
-    const { modalElem } = await getModalInternals(config, modalIndex);
-    const { width: modalElemWidth } = await modalElem.getSize();
+    const { modalContainerElem } = await getModalInternals(config, modalIndex);
+    const { width: modalContainerElemWidth } =
+        await modalContainerElem.getSize();
 
     // the only time size='full' actual renders full page width and height
-    // is when windowWidth is set <= 767
+    // is when windowWidth is set <= 768
     if (
         modalSize === MODAL_SIZE_FULL &&
         windowWidth <= MODAL_FULL_SCREEN_SMALL_BREAKPOINT
     ) {
-        expect(modalElemWidth).toEqual(windowWidth);
+        expect(modalContainerElemWidth).toEqual(windowWidth);
     } else {
-        // 'small', 'medium', 'large', and ('full' when windowWidth is set > 767) are normal modal behavior
-        expect(modalElemWidth).toBeLessThan(windowWidth);
+        // 'small', 'medium', 'large', and ('full' when windowWidth is set > 768) are normal modal behavior
+        expect(modalContainerElemWidth).toBeLessThan(windowWidth);
     }
 }
 
@@ -495,7 +533,6 @@ async function openModal({
     if (runMockMatchMedia) {
         await mockMatchMedia();
     }
-
     // set a specific window size based on sizing descriptor (SMALL, MEDIUM)
     await setWindowSize(screenSizeToSet);
 
@@ -1122,6 +1159,7 @@ async function validateModalOpenTabNavFocusBehavior(
 }
 
 module.exports = {
+    getModalInternalsDomBased,
     setupStrategy,
     isModalOfVariantType,
     parseStyleAttributes,

package/src/lightning/modalBase/modalBase.css

@@ -1,6 +1,3 @@
-@import 'lightning/sldsCommon';
-@import './modal-base.slds.css';
-
 /* Modal close button */
 
 /* Required for autofocus to work correctly:
@@ -8,14 +5,12 @@
      the moment that they are being reviewed for eligibility
      for focus in focus.js at isElementVisible()
 */
-.fix-slds-modal,
-:host([data-render-mode="shadow"]) .fix-slds-modal {
+.fix-slds-modal {
     visibility: visible;
     z-index: unset;
 }
 
 /* Required for z-index */
-.fix-slds-backdrop,
-:host([data-render-mode="shadow"]) .fix-slds-backdrop {
+.fix-slds-backdrop {
     z-index: unset;
 }

package/src/lightning/modalBase/modalBase.html

@@ -1,7 +1,6 @@
 <template>
     <div
         class={modalBackdropCssClasses}
-        part="modal-backdrop"
         role="presentation"
         data-backdrop
     ></div>
@@ -11,7 +10,6 @@
             tabindex="-1"
             aria-modal="true"
             class={modalCssClasses}
-            part="modal"
             onkeydown={handleModalKeyDown}
             onprivatemodalheaderregister={handleHeaderRegister}
             onprivatemodalbodyregister={handleBodyRegister}