lightning-base-components 1.21.1-alpha → 1.21.2-alpha

package/src/lightning/modalBase/modalBase.js

@@ -1,7 +1,7 @@
-import { api, LightningElement } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import {
-    isCSR,
     makeEverythingExceptElementInert,
     normalizeString,
     synchronizeAttrs,
@@ -9,14 +9,17 @@ import {
     hasAnimation,
     ARIA,
     isAriaDescriptionSupported,
+    isCSR,
 } from 'lightning/utilsPrivate';
 import { instanceName, secure } from 'lightning/overlayUtils';
 import {
     getElementWithFocus,
     returnFocusToElement,
+    findAllTabbableElements,
 } from 'lightning/focusUtils';
 import closeButtonAltText from '@salesforce/label/LightningModalBase.cancelandclose';
 import disableCloseBtnMessage from '@salesforce/label/LightningModalBase.waitstate';
+import AriaObserver from 'lightning/ariaObserver';
 
 const DEBOUNCE_RESIZE = 300;
 const SMALL_SCREEN_SIZE = 480;
@@ -24,10 +27,12 @@ const SIZE_SMALL = 'small';
 const SIZE_MEDIUM = 'medium';
 const SIZE_LARGE = 'large';
 const SIZE_FULL = 'full';
+const OVERLAY_CONTAINER = 'lightning-overlay-container';
+const MODAL_BASE = 'lightning-modal-base';
 
-export default class LightningModalBase extends LightningElement {
+export default class LightningModalBase extends LightningShadowBaseClass {
     // this is visible in DOM, changed from 'lightning-modal-base'
-    static [instanceName] = 'lightning-modal-base';
+    static [instanceName] = MODAL_BASE;
 
     // private tracked state
     initialRender = true;
@@ -66,6 +71,13 @@ export default class LightningModalBase extends LightningElement {
     portraitMatchMedia = null;
     screenOrientationChangeHandler = null;
 
+    // state utilized when performing keyboard Tab/Shift-Tab interactions
+    focusinEventBound = false;
+    focusinEventHandler = null;
+    lastFocussedElementOnModal = null;
+    previousSavedInertElementsSize = 0;
+    allTabbableElements = null;
+
     // modalFooter, child
     footerRegistered = false;
     footerHeight = 0;
@@ -89,6 +101,14 @@ export default class LightningModalBase extends LightningElement {
     // before modal opened, element previously focused
     savedActiveElement;
 
+    // accessibility
+    ariaObserver = null;
+
+    constructor() {
+        super();
+        this.ariaObserver = new AriaObserver(this);
+    }
+
     /**
      * <lightning-modal> label value
      * Text to display as the heading at the top of the modal
@@ -212,7 +232,10 @@ export default class LightningModalBase extends LightningElement {
      * @private
      */
     get modal() {
-        return (this.defaultSlot && this.defaultSlot.childNodes[0]) || null;
+        return (
+            (isCSR && this.defaultSlot && this.defaultSlot.childNodes[0]) ||
+            null
+        );
     }
 
     /**
@@ -418,6 +441,61 @@ export default class LightningModalBase extends LightningElement {
         }
     }
 
+    /**
+     * Handler for 'focusin' events responsible for following -
+     * <ul>
+     *     <li>While the focus is on a Modal or stacked Modals, the handler tracks the last focussed element inside a Modal</li>
+     *     <li>If user's focus moves outside a Modal, the handler tries to bring user's focus back to last focussed element</li>
+     * </ul>
+     * @param e - Event
+     */
+    handleFocusinEvents(e) {
+        // eslint-disable-next-line @lwc/lwc/no-async-operation
+        requestAnimationFrame(() => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            const focusinEvtTarget = e.target;
+            const isFocusTargetAModal =
+                focusinEvtTarget.matches(OVERLAY_CONTAINER);
+            const wasANewModalStackedOnTopOfAnExistingModal =
+                this.isStackedModal() &&
+                this.savedInertElements.length >
+                    this.previousSavedInertElementsSize;
+
+            if (wasANewModalStackedOnTopOfAnExistingModal) {
+                // update private tracker in anticipation of more stacked modals
+                this.previousSavedInertElementsSize =
+                    this.savedInertElements.length;
+            }
+
+            //  1.  If focus is on a Modal, then track the last focussed element
+            if (isFocusTargetAModal) {
+                // Perf optimization: check if allTabbableElements needs updating
+                if (
+                    !this.allTabbableElements ||
+                    wasANewModalStackedOnTopOfAnExistingModal
+                ) {
+                    this.allTabbableElements =
+                        findAllTabbableElements(focusinEvtTarget);
+                }
+                const elementWithFocus = getElementWithFocus();
+                const isModalTitleText =
+                    elementWithFocus.hasAttribute('data-label');
+                if (
+                    isModalTitleText ||
+                    this.allTabbableElements.indexOf(elementWithFocus) !== -1
+                ) {
+                    // element is part of the Modal with current focus on it, track it
+                    this.lastFocussedElementOnModal = elementWithFocus;
+                }
+            } //  2.  If focus moved out of Modal, return focus to last element that was focussed.
+            else {
+                returnFocusToElement(this.lastFocussedElementOnModal);
+            }
+        });
+    }
+
     /**
      * Opening the modal involves first performing necessary steps to
      * prepare for when the modal closes
@@ -440,6 +518,10 @@ export default class LightningModalBase extends LightningElement {
     closeModal() {
         this.returnFocusToBackground();
         this.renderBackgroundActive(this.savedInertElements);
+        if (this.ariaObserver) {
+            this.ariaObserver.disconnect();
+            this.ariaObserver = undefined;
+        }
     }
 
     /**
@@ -456,6 +538,9 @@ export default class LightningModalBase extends LightningElement {
         });
         // console.error when label empty
         this.errorLabelRequired();
+        if (this.ariaObserver) {
+            this.ariaObserver.disconnect();
+        }
     };
 
     get isDescriptionSet() {
@@ -520,10 +605,12 @@ export default class LightningModalBase extends LightningElement {
         // headerLabelIsPopulated is equivalent labelIsEmpty, but from modalHeader level
         if (headerRegistered) {
             if (headerLabelId && headerLabelIsPopulated) {
-                synchronizeAttrs(this.modalWrapper, {
-                    [ARIA.LABELLEDBY]: headerLabelId,
-                    [ARIA.LABEL]: null,
+                this.ariaObserver.connect({
+                    targetNode: this.modalWrapper,
+                    attribute: 'aria-labelledby',
+                    relatedNodes: [this.headerTitleRef],
                 });
+                synchronizeAttrs(this.modalWrapper, { [ARIA.LABEL]: null });
                 // if labelId not set OR header label value not set,
                 // must console.error
             } else {
@@ -746,7 +833,6 @@ export default class LightningModalBase extends LightningElement {
         // FUTURE TODO mechanism to support aria-describedby
         // aria-describedby is optional, without a good reproducible pattern
         this.initBodyState();
-        this.removeWindowResizeEventListener();
     }
 
     /**
@@ -784,6 +870,9 @@ export default class LightningModalBase extends LightningElement {
         if (!this.windowOrientationEventBound) {
             this.addOrientationChangeListener();
         }
+        if (!this.focusinEventBound) {
+            this.addFocusinEventListener();
+        }
     }
 
     /**
@@ -997,6 +1086,16 @@ export default class LightningModalBase extends LightningElement {
         clearTimeout(this.timeoutId);
         this.timeoutId = 0;
 
+        if (this.updateHeaderCallback) {
+            // Update the header size
+            this.updateHeaderCallback({ size: this.size });
+        }
+
+        if (this.updateFooterCallback) {
+            // Update the footer size
+            this.updateFooterCallback({ size: this.size });
+        }
+
         if (this.bodyRegistered && !this.bodyResizeScheduled) {
             // check, and update isSmallScreenSize before
             // callback to modalBody
@@ -1013,6 +1112,7 @@ export default class LightningModalBase extends LightningElement {
                         backdropWidth: this.backdropDimensions.width,
                         sizeSetFull: this.size === SIZE_FULL,
                         isSmallScreenSize: this.isSmallScreenSize,
+                        size: this.size,
                     };
                     this.baseUpdateBodyCallback(values);
                 }
@@ -1108,12 +1208,58 @@ export default class LightningModalBase extends LightningElement {
         }
     }
 
+    /**
+     * Helper method to determine when modals are being stacked.
+     *
+     * When stacked modals are present on the page,
+     * elements in savedInertElements will have 'ariaHidden' attribute with a boolean true
+     * @returns {boolean}
+     */
+    isStackedModal() {
+        const { savedInertElements } = this;
+        for (let i = 0; i < savedInertElements.length; i++) {
+            const isAriaHidden = savedInertElements[i].ariaHidden;
+            if (isAriaHidden) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    /**
+     * == W-12654751 P1 a11y bug ==
+     *
+     * Adds an event listener to listen and handle to 'focusin' events.
+     * All Lightning Modals must trap user focus, while they are open.
+     */
+    addFocusinEventListener() {
+        if (!this.focusinEventBound) {
+            this.focusinEventBound = true;
+            this.focusinEventHandler = this.handleFocusinEvents.bind(this);
+            window.addEventListener('focusin', this.focusinEventHandler);
+        }
+    }
+
+    /**
+     * == W-12654751 P1 a11y bug ==
+     *
+     * 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() {
+        if (this.focusinEventBound) {
+            this.focusinEventBound = false;
+            window.removeEventListener('focusin', this.focusinEventHandler);
+            this.focusinEventHandler = null;
+        }
+    }
+
     /**
      * determine if the current screen is less than SMALL_SCREEN_SIZE
      * for Modal, screen size detection is simplified to what's required
      * for the size="full" feature addition, which is a single breakpoint
      * either (a) at or below 480 pixels (small = full screen modal behavior),
-     * or (b) at or above 480 (large = default modal behavior)
+     * or (b) at or above 481 (large = default modal behavior)
      * @private
      */
     setIsSmallScreenSize() {
@@ -1132,6 +1278,7 @@ export default class LightningModalBase extends LightningElement {
     removeModalEventListeners() {
         this.removeWindowResizeEventListener();
         this.removeOrientationChangeListener();
+        this.removeFocusinEventListener();
     }
 
     /**
@@ -1176,6 +1323,7 @@ export default class LightningModalBase extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this.initModalState();
         // check for screen size right away
         // not adding event listeners here,

package/src/lightning/modalBase/modalBase.lbc.native.css

@@ -0,0 +1,2 @@
+@import 'lightning/sldsCommon';
+@import './modal-base.slds.css';

package/src/lightning/modalBase/modalBase.lbc.synthetic.css

@@ -0,0 +1,18 @@
+/* Modal close button */
+
+/* Required for autofocus to work correctly:
+   - child elements of modal appear 'visibility: hidden' at
+     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 {
+    visibility: visible;
+    z-index: unset;
+}
+
+/* Required for z-index */
+.fix-slds-backdrop,
+:host([data-render-mode="shadow"]) .fix-slds-backdrop {
+    z-index: unset;
+}

package/src/lightning/modalBody/modal-body.slds.css

@@ -0,0 +1,61 @@
+
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+@supports (--styling-hooks: '') {
+  :host([data-render-mode="shadow"]) .slds-modal__content_headless {
+    border-start-end-radius: var(--slds-c-modalbody-radius-border, var(--slds-g-radius-border-2));
+    border-start-start-radius: var(--slds-c-modalbody-radius-border, var(--slds-g-radius-border-2));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-modal__content {
+    /**
+     * Remap to SLDS blueprint hooks for parity
+     * https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview
+     */
+    --slds-c-modal-content-color-background: var(--slds-c-modalbody-color-background);
+    --slds-c-modal-content-text-color: var(--slds-c-modalbody-text-color);
+
+    background-color: var(--slds-c-modalbody-color-background, var(--slds-g-color-surface-container-1));
+    color: var(--slds-c-modalbody-text-color);
+    overflow: hidden;
+    overflow-y: auto;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-modal__content_footless {
+    border-bottom-right-radius: var(--slds-c-modalbody-radius-border, var(--slds-g-radius-border-2));
+    border-bottom-left-radius: var(--slds-c-modalbody-radius-border, var(--slds-g-radius-border-2));
+    box-shadow: var(--slds-c-modalbody-shadow, var(--slds-g-shadow-2));
+  }
+
+  /* Sizes: Full */
+
+  /* Original SLDS implementation was desktop-first. This is now mobile-first for <=480px  */
+  @media (width <= 30em) {
+    :host([data-render-mode="shadow"][data-size='full']) [part='modal-body'] {
+      grid-area: content;
+    }
+
+    :host([data-render-mode="shadow"][data-size='full'][data-variant-footless]) [part='modal-body'] {
+      border-end-end-radius: 0;
+      border-end-start-radius: 0;
+      box-shadow: none;
+    }
+
+    /**
+     * INTERNAL USE ONLY - SUBJECT TO CHANGE AND REMOVAL
+     *
+     * SLDS Blueprint <> LBC Parity Patch
+     *
+     * SLDS blueprints and LBC implementation are not 1:1. This patch is needed to
+     * account for the differences introduced in the LBC implementation. Location
+     * of this code would ideally live within the LBC component CSS module but
+     * synthetic shadow and how LBC deconstructs the modal into individual components
+     * makes this not feasible. Not ideal, but this is the best solution for now.
+     * Selectors are scoped to lightning-* to avoid any potential outside conflicts.
+     */
+    :host([data-render-mode="shadow"][data-size='full']) {
+      display: contents;
+    }
+  }
+}

package/src/lightning/modalBody/modalBody.css

@@ -0,0 +1 @@
+@import './modalBody.lbc.native.css';

package/src/lightning/modalBody/modalBody.html

@@ -2,6 +2,7 @@
     <div
         id="modal-content"
         class={modalBodyCssClasses}
+        part="modal-body"
         data-content-container
         onprivatescrollablecontainer={handleScrollableContainerRepositionEvent}
     >

package/src/lightning/modalBody/modalBody.js

@@ -1,4 +1,4 @@
-import { LightningElement } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import { getRealDOMId } from 'lightning/utilsPrivate';
 import { findAllTabbableElements, filterTooltips } from 'lightning/focusUtils';
@@ -6,7 +6,7 @@ import { findAllTabbableElements, filterTooltips } from 'lightning/focusUtils';
 /**
  * The modal body component to display main content area in lightning modal.
  * */
-export default class LightningModalBody extends LightningElement {
+export default class LightningModalBody extends LightningShadowBaseClass {
     // private tracked state
     initialRender = true;
     initialSlotRender = true;
@@ -243,6 +243,7 @@ export default class LightningModalBody extends LightningElement {
             const {
                 sizeSetFull,
                 isSmallScreenSize,
+                size,
                 headerHeight,
                 footerHeight,
             } = values;
@@ -254,6 +255,17 @@ export default class LightningModalBody extends LightningElement {
             const updatedValues = this.updateValues(values);
             // set updated values based on behavior
             this.setModalBodyHeight(updatedValues, shouldUseFullHeight);
+
+            // update host variant and size based on header and footer height
+            if (!this.headerPresent) {
+                this.setAttribute('data-variant-headless', '');
+            }
+            if (!this.footerPresent) {
+                this.setAttribute('data-variant-footless', '');
+            }
+
+            // set the host size based on the modal base size
+            this.setAttribute('data-size', size);
         }
     }
 
@@ -296,6 +308,7 @@ export default class LightningModalBody extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         // handle case where modalBody is added/removed/re-added to DOM
         this.initState();
     }

package/src/lightning/modalBody/modalBody.lbc.native.css

@@ -0,0 +1,3 @@
+@import 'lightning/sldsCommon';
+@import 'lightning/sldsUtilsPadding';
+@import './modal-body.slds.css';

package/src/lightning/modalFooter/modal-footer.slds.css

@@ -0,0 +1,79 @@
+
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+@supports (--styling-hooks: '') {
+  :host([data-render-mode="shadow"]) .slds-modal__footer {
+
+    /* stylelint-disable sds-stylelint-plugin/styling-hooks-deprecated */
+
+    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+
+    /**
+     * Remap to SLDS blueprint hooks for parity
+     * https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview
+     */
+    --slds-c-modal-footer-color-background: var(--slds-c-modalfooter-color-background);
+    --slds-c-modal-footer-text-color: var(--slds-c-modalfooter-text-color);
+    --slds-c-modal-footer-spacing-block-start: var(--slds-c-modalfooter-spacing-block-start);
+    --slds-c-modal-footer-spacing-inline-end: var(--slds-c-modalfooter-spacing-inline-end);
+    --slds-c-modal-footer-spacing-block-end: var(--slds-c-modalfooter-spacing-block-end);
+    --slds-c-modal-footer-spacing-inline-start: var(--slds-c-modalfooter-spacing-inline-start);
+
+    border-end-end-radius: var(--slds-c-modalfooter-radius-border, var(--slds-g-radius-border-2));
+    border-end-start-radius: var(--slds-c-modalfooter-radius-border, var(--slds-g-radius-border-2));
+    border-block-start-width: var(--slds-c-modalfooter-sizing-border, var(--slds-g-sizing-border-2));
+    border-block-start-style: solid;
+    border-block-start-color: var(--slds-c-modalfooter-color-border, var(--slds-g-color-border-1));
+    background-color: var(--slds-c-modalfooter-color-background, var(--slds-g-color-surface-container-2));
+    color: var(--slds-c-modalfooter-text-color);
+    -ms-flex-negative: 0;
+    flex-shrink: 0;
+    padding-block-start: var(--slds-c-modalfooter-spacing-block-start, var(--slds-g-spacing-3));
+    padding-inline-end: var(--slds-c-modalfooter-spacing-inline-end, var(--slds-g-spacing-4));
+    padding-block-end: var(--slds-c-modalfooter-spacing-block-end, var(--slds-g-spacing-3));
+    padding-inline-start: var(--slds-c-modalfooter-spacing-inline-start, var(--slds-g-spacing-4));
+    text-align: right;
+    box-shadow: var(--slds-c-modalfooter-shadow, 0 2px 3px 0 rgba(0, 0, 0, 16%));
+    /* stylelint-enable sds-stylelint-plugin/styling-hooks-deprecated */
+
+    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+  }
+
+  /* TODO W-12674349: Replace with visibility utility classes when available */
+  :host([data-render-mode="shadow"]) .slds-hide {
+    display: none !important;
+  }
+
+  /* Sizes: Full */
+
+  /* Original SLDS implementation was desktop-first. This is now mobile-first for <=480px  */
+  @media (width <= 30em) {
+    :host([data-render-mode="shadow"][data-size='full']) [part='modal-footer'] {
+      grid-area: footer;
+      border-start-end-radius: 0;
+      border-end-start-radius: 0;
+      box-shadow: none;
+    }
+
+    /**
+     * INTERNAL USE ONLY - SUBJECT TO CHANGE AND REMOVAL
+     *
+     * SLDS Blueprint <> LBC Parity Patch
+     *
+     * SLDS blueprints and LBC implementation are not 1:1. This patch is needed to
+     * account for the differences introduced in the LBC implementation. Location
+     * of this code would ideally live within the LBC component CSS module but
+     * synthetic shadow and how LBC deconstructs the modal into individual components
+     * makes this not feasible. Not ideal, but this is the best solution for now.
+     * Selectors are scoped to lightning-* to avoid any potential outside conflicts.
+     */
+    :host([data-render-mode="shadow"][data-size='full']) {
+      display: contents;
+    }
+  }
+
+  :host([data-render-mode="shadow"]) .slds-modal__footer .slds-button + .slds-button {
+      margin-left: var(--slds-g-spacing-2);
+  }
+}

package/src/lightning/modalFooter/modalFooter.css

@@ -0,0 +1 @@
+@import './modalFooter.lbc.native.css';

package/src/lightning/modalFooter/modalFooter.html

@@ -1,5 +1,5 @@
 <template>
-    <div class={footerCssClasses}>
+    <div class={footerCssClasses} part="modal-footer">
         <slot
             data-footer-slot
             onslotchange={handleDefaultSlotChange}

package/src/lightning/modalFooter/modalFooter.js

@@ -1,4 +1,4 @@
-import { LightningElement } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import { findAllTabbableElements, filterTooltips } from 'lightning/focusUtils';
 
@@ -12,7 +12,7 @@ const footerSlotSelector = '[data-footer-slot]';
 /**
  * The modal footer component to display footer content in lightning modal.
  * */
-export default class LightningModalFooter extends LightningElement {
+export default class LightningModalFooter extends LightningShadowBaseClass {
     // tracked private state
     initialRender = true;
     initialSlotRender = true;
@@ -140,6 +140,7 @@ export default class LightningModalFooter extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         // handle case where modalFooter is added/removed/added to DOM
         // so registerWithParent gets called
         this.initState();

package/src/lightning/modalFooter/modalFooter.lbc.native.css

@@ -0,0 +1,2 @@
+@import 'lightning/sldsCommon';
+@import './modal-footer.slds.css';

package/src/lightning/modalHeader/modal-header.slds.css

@@ -0,0 +1,77 @@
+
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+@supports (--styling-hooks: '') {
+  /* stylelint-disable sds-stylelint-plugin/styling-hooks-deprecated */
+
+  /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+
+  :host([data-render-mode="shadow"]) .slds-modal__header {
+    /**
+     * Remap to SLDS blueprint hooks for parity
+     * https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview
+     */
+    --slds-c-modal-header-color-background: var(--slds-c-modalheader-color-background);
+    --slds-c-modal-header-text-color: var(--slds-c-modalheader-text-color);
+    --slds-c-modal-header-spacing-block-start: var(--slds-c-modalheader-spacing-block-start);
+    --slds-c-modal-header-spacing-inline-end: var(--slds-c-modalheader-spacing-inline-end);
+    --slds-c-modal-header-spacing-block-end: var(--slds-c-modalheader-spacing-block-end);
+    --slds-c-modal-header-spacing-inline-start: var(--slds-c-modalheader-spacing-inline-start);
+
+    --slds-c-modal-heading-font-size: var(--slds-c-modalheader-heading-font-size);
+    --slds-c-modal-heading-font-weight: var(--slds-c-modalheader-heading-font-weight);
+    --slds-c-modal-heading-font-lineheight: var(--slds-c-modalheader-heading-font-lineheight);
+
+    position: relative;
+    border-start-end-radius: var(--slds-c-modalheader-radius-border, var(--slds-g-radius-border-2));
+    border-start-start-radius: var(--slds-c-modalheader-radius-border, var(--slds-g-radius-border-2));
+    border-block-end-width: var(--slds-c-modalheader-sizing-border, var(--slds-g-sizing-border-2));
+    border-block-end-style: solid;
+    border-block-end-color: var(--slds-c-modalheader-color-border, var(--slds-g-color-border-1));
+    background-color: var(--slds-c-modalheader-color-background, var(--slds-g-color-surface-container-1));
+    color: var(--slds-c-modalheader-text-color);
+    flex-shrink: 0;
+    padding-block-start: var(--slds-c-modalheader-spacing-block-start, var(--slds-g-spacing-4));
+    padding-inline-end: var(--slds-c-modalheader-spacing-inline-end, var(--slds-g-spacing-4));
+    padding-block-end: var(--slds-c-modalheader-spacing-block-end, var(--slds-g-spacing-4));
+    padding-inline-start: var(--slds-c-modalheader-spacing-inline-start, var(--slds-g-spacing-4));
+    text-align: center;
+    /* stylelint-enable sds-stylelint-plugin/styling-hooks-deprecated */
+
+    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+  }
+
+  :host([data-render-mode="shadow"]) .slds-modal__title {
+    font-weight: var(--slds-c-modalheader-heading-font-weight);
+    font-size: var(--slds-c-modalheader-heading-font-size, 1.25rem);
+    line-height: var(--slds-c-modalheader-heading-font-lineheight, var(--slds-g-font-lineheight-2));
+  }
+
+  /* Sizes: Full */
+
+  /* Original SLDS implementation was desktop-first. This is now mobile-first for <=480px  */
+  @media (width <= 30em) {
+    :host([data-render-mode="shadow"][data-size='full']) [part='modal-header'] {
+      grid-area: header;
+      border-start-start-radius: 0;
+      border-start-end-radius: 0;
+    }
+
+    /**
+     * INTERNAL USE ONLY - SUBJECT TO CHANGE AND REMOVAL
+     *
+     * SLDS Blueprint <> LBC Parity Patch
+     *
+     * SLDS blueprints and LBC implementation are not 1:1. This patch is needed to
+     * account for the differences introduced in the LBC implementation. Location
+     * of this code would ideally live within the LBC component CSS module but
+     * synthetic shadow and how LBC deconstructs the modal into individual components
+     * makes this not feasible. Not ideal, but this is the best solution for now.
+     * Selectors are scoped to lightning-* to avoid any potential outside conflicts.
+     */
+    :host([data-render-mode="shadow"][data-size='full']) {
+      display: contents;
+    }
+  }
+}

package/src/lightning/modalHeader/modalHeader.css

@@ -0,0 +1,3 @@
+@import 'lightning/sldsCommon';
+@import './modal-header.slds.css';
+@import 'lightning/sldsUtilsHyphenation';

package/src/lightning/modalHeader/modalHeader.html

@@ -1,5 +1,5 @@
  <template>
-    <div class="slds-modal__header">
+    <div class="slds-modal__header" part="modal-header">
         <template if:true={label}>
             <h1
                 id="modal-label"