lightning-base-components 1.21.6-alpha → 1.21.7-alpha

package/src/lightning/inputAddress/inputAddress.js

@@ -196,6 +196,14 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
         });
     }
 
+    renderedCallback() {
+        if (!this.template.synthetic) {
+            // Fieldset receives focus events in native shadow, which impacts tooltip behavior (See: W-14889039)
+            const fieldset = this.template.querySelector('fieldset');
+            fieldset.setAttribute('tabindex', '-1');
+        }
+    }
+
     disconnectedCallback() {
         this._connected = false;
     }
@@ -493,8 +501,8 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
         reflectAttribute(this, 'variant', this.variant);
     }
 
-    get showCompactAddressLookup() {
-        return this._showAddressLookup && this._showCompactAddress;
+    get showDedicatedLookupAddressField() {
+        return this._showAddressLookup && !this._showCompactAddress;
     }
 
     get computedFieldsetClass() {
@@ -526,12 +534,18 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
                 maxlength: 255,
                 type: FIELD_TYPE.TEXTAREA,
             },
-            addressLine1: {
+            addressLine1Lookup: {
                 autocomplete: 'address-line1',
                 name: 'street',
                 maxlength: 80,
                 type: FIELD_TYPE.LOOKUP_ADDRESS,
             },
+            addressLine1: {
+                autocomplete: 'address-line1',
+                name: 'street',
+                maxlength: 80,
+                type: FIELD_TYPE.INPUT,
+            },
             addressLine2: {
                 autocomplete: 'address-line2',
                 name: 'subpremise',
@@ -573,21 +587,23 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
         const hasCountryPicklist =
             this.fieldsTypeMeta.country.type === FIELD_TYPE.PICKLIST;
         const [langCode, countryCode] = this.locale.split('-');
-        return getInputOrder(
-            langCode,
+        return getInputOrder({
             countryCode,
             hasCountryPicklist,
-            this._showCompactAddress
-        );
+            langCode,
+            showAddressLookup: this._showAddressLookup,
+            showCompactAddress: this._showCompactAddress,
+        });
     }
 
     get requiredFields() {
         const [langCode, countryCode] = this.locale.split('-');
-        return getRequiredFields(
-            langCode,
+        return getRequiredFields({
             countryCode,
-            this._showCompactAddress
-        );
+            langCode,
+            showAddressLookup: this._showAddressLookup,
+            showCompactAddress: this._showCompactAddress,
+        });
     }
 
     get fieldsMeta() {

package/src/lightning/inputLocation/form-element.slds.css

@@ -245,6 +245,7 @@
 
 @media (width >= 48em) {
         :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
+          float: left;
           max-width: calc(33% - var(--slds-g-sizing-6)); /* Removing icon width for when the help-text icon is present */
           flex-basis: calc(33% - var(--slds-g-sizing-6)); /* Some form element controls are set to display:flex */
           flex-grow: 1; /* For IE and Safari which didn't auto expand to the available space */

package/src/lightning/inputLocation/input-text.slds.css

@@ -254,7 +254,7 @@
         );
         --sds-c-inputtext-color-border: var(
             --slds-c-inputtext-color-border,
-            var(--slds-g-color-border-1)
+            var(--slds-g-color-border-2)
         );
         --sds-c-inputtext-sizing-border: var(--slds-c-inputtext-sizing-border);
         --sds-c-inputtext-radius-border: var(
@@ -330,7 +330,7 @@
     }
 :host([data-render-mode="shadow"][readonly]) [part="input-container"]:focus-within,:host([data-render-mode="shadow"][readonly]) [part="input-container"]:active {
        --sds-c-inputtext-color-border: var(--slds-g-color-disabled-container-2);
-       --sds-c-inputtext-shadow: 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-accent-1);
+       --sds-c-inputtext-shadow: 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-accent-2);
        --sds-c-inputtext-color-background: transparent;
 
        outline: 0;
@@ -367,9 +367,9 @@
    */
 :host([data-render-mode="shadow"][disabled]) [part='input-container'],:host([data-render-mode="shadow"][disabled]) [part='input'] {
         cursor: not-allowed;
-        --sds-c-inputtext-color-background: var(--slds-g-color-disabled-container-1);
-        --sds-c-inputtext-color-border: var(--slds-g-color-border-1);
-        --sds-c-inputtext-text-color: var(--slds-g-color-on-surface-1);
+        --sds-c-inputtext-color-background: var(--slds-s-input-color-background-disabled, var(--slds-g-color-disabled-container-1));
+        --sds-c-inputtext-color-border: var(--slds-g-color-border-disabled-1);
+        --sds-c-inputtext-text-color: var(--slds-g-color-on-disabled-2);
     }
 /**
    * Label

package/src/lightning/inputName/form-element.slds.css

@@ -245,6 +245,7 @@
 
 @media (width >= 48em) {
         :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
+          float: left;
           max-width: calc(33% - var(--slds-g-sizing-6)); /* Removing icon width for when the help-text icon is present */
           flex-basis: calc(33% - var(--slds-g-sizing-6)); /* Some form element controls are set to display:flex */
           flex-grow: 1; /* For IE and Safari which didn't auto expand to the available space */

package/src/lightning/inputName/input-text.slds.css

@@ -254,7 +254,7 @@
         );
         --sds-c-inputtext-color-border: var(
             --slds-c-inputtext-color-border,
-            var(--slds-g-color-border-1)
+            var(--slds-g-color-border-2)
         );
         --sds-c-inputtext-sizing-border: var(--slds-c-inputtext-sizing-border);
         --sds-c-inputtext-radius-border: var(
@@ -330,7 +330,7 @@
     }
 :host([data-render-mode="shadow"][readonly]) [part="input-container"]:focus-within,:host([data-render-mode="shadow"][readonly]) [part="input-container"]:active {
        --sds-c-inputtext-color-border: var(--slds-g-color-disabled-container-2);
-       --sds-c-inputtext-shadow: 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-accent-1);
+       --sds-c-inputtext-shadow: 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-accent-2);
        --sds-c-inputtext-color-background: transparent;
 
        outline: 0;
@@ -367,9 +367,9 @@
    */
 :host([data-render-mode="shadow"][disabled]) [part='input-container'],:host([data-render-mode="shadow"][disabled]) [part='input'] {
         cursor: not-allowed;
-        --sds-c-inputtext-color-background: var(--slds-g-color-disabled-container-1);
-        --sds-c-inputtext-color-border: var(--slds-g-color-border-1);
-        --sds-c-inputtext-text-color: var(--slds-g-color-on-surface-1);
+        --sds-c-inputtext-color-background: var(--slds-s-input-color-background-disabled, var(--slds-g-color-disabled-container-1));
+        --sds-c-inputtext-color-border: var(--slds-g-color-border-disabled-1);
+        --sds-c-inputtext-text-color: var(--slds-g-color-on-disabled-2);
     }
 /**
    * Label

package/src/lightning/internationalizationLibrary/address/AddressFormat.js

@@ -2,6 +2,8 @@
 // https://git.soma.salesforce.com/Globalization/address.js
 // For new versions, copy AddressFormat.js from node_modules/address.js/dist/AddressFormat.js
 // And add "export { address };" at the end.
+// If the node modules file doesn't reflect the current code in the address.js github repo linked above,
+// then manually generate the AddressFormat.js file from the above globalization repo following the steps in its readMe
 
 /* eslint-disable */
 function _toPrimitive(t, r) {

package/src/lightning/layout/__docs__/layout.md

@@ -125,8 +125,6 @@ For more information, see the [SLDS grid utility classes](https://lightningdesig
 
 #### Usage Considerations
 
-`lightning-layout` is not supported in IE11. To create a flexible grid system for IE11, use `<div>` containers with SLDS grid classes.
-
 This example creates the same layout shown in **Creating Columns**,
 which creates two columns with fixed widths.
 

package/src/lightning/lookupAddress/form-element.slds.css

@@ -245,6 +245,7 @@
 
 @media (width >= 48em) {
         :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
+          float: left;
           max-width: calc(33% - var(--slds-g-sizing-6)); /* Removing icon width for when the help-text icon is present */
           flex-basis: calc(33% - var(--slds-g-sizing-6)); /* Some form element controls are set to display:flex */
           flex-grow: 1; /* For IE and Safari which didn't auto expand to the available space */

package/src/lightning/menuItem/menu-item.slds.css

@@ -18,7 +18,7 @@
     gap: var(--slds-g-spacing-2);
     position: relative;
     padding: var(--slds-g-spacing-2) var(--slds-g-spacing-3);
-    color: var(--slds-g-color-neutral-base-10);
+    color: var(--slds-g-color-on-surface-3);
     line-height: var(--slds-g-font-lineheight-4);
     font-weight: var(--slds-g-font-weight-4);
     white-space: nowrap;
@@ -30,11 +30,13 @@
     outline: 0;
     text-decoration: none;
     background-color: var(--slds-g-color-surface-container-2);
+    color: var(--slds-g-color-on-surface-3);
   }
 
   :host([data-render-mode="shadow"]) a:active {
     text-decoration: none;
     background-color: var(--slds-g-color-surface-container-2);
+    color: var(--slds-g-color-on-surface-3);
   }
 
   :host([data-render-mode="shadow"]) a[aria-disabled='true'] {

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

@@ -54,8 +54,10 @@ const MODAL_FOOTER = 'lightning-modal-footer';
 // inner modal specific details ===========================
 
 // close button variants
-const MODAL_CLOSE_BUTTON_VARIANT = 'bare';
+const MODAL_CLOSE_BUTTON_FULL_VARIANT = 'bare';
+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';
 // modal screen size testing
 // utilized by full screen modal tests
@@ -158,7 +160,7 @@ const NAME_TO_SIZE = {
 // suites for modal utilize this map
 const SPEC_TO_TABS_TO_CLOSE_BTN = {
     accessibility: {
-        footless: 1,
+        footless: -1,
         headless: -3,
     },
 };
@@ -247,9 +249,11 @@ module.exports = {
     FOCUS_TRAP,
     MODAL_CLOSE_BTN,
     MODAL_CLOSE_BTN_CLASS,
+    MODAL_CLOSE_BTN_SELECTOR,
     MODAL_CLOSE_BTN_FULL_CLASS,
     MODAL_DATA_SELECTOR,
-    MODAL_CLOSE_BUTTON_VARIANT,
+    MODAL_CLOSE_BUTTON_FULL_VARIANT,
+    MODAL_CLOSE_BUTTON_NORMAL_VARIANT,
     SCREEN_SIZE_SMALL,
     SCREEN_SIZE_SMALL_MID,
     SCREEN_SIZE_MEDIUM,

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

@@ -19,7 +19,8 @@ const {
     MODAL_CLOSE_BTN,
     MODAL_CLOSE_BTN_CLASS,
     MODAL_CLOSE_BTN_FULL_CLASS,
-    MODAL_CLOSE_BUTTON_VARIANT,
+    MODAL_CLOSE_BUTTON_FULL_VARIANT,
+    MODAL_CLOSE_BUTTON_NORMAL_VARIANT,
     SCREEN_SIZE_LARGE,
     MODAL_SIZE_FULL,
     MODAL_FULL_SCREEN_SMALL_BREAKPOINT,
@@ -158,6 +159,9 @@ async function getModalInternals(config, modalIndex = 0) {
             MODAL_ARIALIVE_SELECTOR
         );
 
+        // get modal close button
+        modalCloseButton = await modalSectionElem.$(MODAL_CLOSE_BTN);
+
         // get modal div slot (not an actual slot)
         modalDataSlot = await modalSectionElem.$(MODAL_DIV_SLOT);
         // get div[data-container].slds-modal__container
@@ -169,14 +173,10 @@ async function getModalInternals(config, modalIndex = 0) {
         // but in our examples it's always present
         modalBodyElem = await modalElem.shadow$(MODAL_BODY);
 
-        // Headless modal variant has the close button inside modalBase
-        if (isModalOfVariantType(modalVariantType, 'headless')) {
-            // get modal close button
-            modalCloseButton = await modalSectionElem.$(MODAL_CLOSE_BTN);
-        } else {
-            // get lightning-modal-header and modal close lightning-button
+        // skip looking for modalHeader when type of modal is 'headless'
+        if (!isModalOfVariantType(modalVariantType, 'headless')) {
+            // get lightning-modal-header, it doesn't always exist
             modalHeaderElem = await modalElem.shadow$(MODAL_HEADER);
-            modalCloseButton = await modalHeaderElem.shadow$(MODAL_CLOSE_BTN);
         }
 
         // skip looking for modalHeader when type of modal is 'footless'
@@ -331,7 +331,6 @@ 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_VARIANT);
 
     // the only time size='full' actual renders full page width and height
     // is when windowWidth is set <= 480px (30em)
@@ -339,8 +338,16 @@ 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
         );
@@ -490,7 +497,7 @@ async function validateModalHeightBehavior(config) {
         modalSize === MODAL_SIZE_FULL &&
         windowWidth <= MODAL_FULL_SCREEN_SMALL_BREAKPOINT
     ) {
-        // in full screen mode, the modal utilzes more than 92%
+        // in full screen mode, the modal utilizes more than 92%
         // of the screen height
         expect(percentPageHeightUtilized).toBeGreaterThan(
             MODAL_FULL_SCREEN_USE_PERCENT
@@ -505,7 +512,7 @@ async function validateModalHeightBehavior(config) {
 
         // default modal behavior scenario
     } else {
-        // in default modal behavior, the modal utilzes less than 88%
+        // in default modal behavior, the modal utilizes less than 88%
         // of the screen height
         expect(percentPageHeightUtilized).toBeLessThan(
             MODAL_DEFAULT_SCREEN_USE_PERCENT

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

@@ -5,7 +5,7 @@ const formData = [
         name: null,
         value: null,
         type: 'heading',
-        numTabsToNext: 2,
+        numTabsToNext: 1,
     },
     {
         name: 'assignedTo',

package/src/lightning/modalBase/modalBase.css

@@ -1,2 +1,6 @@
 @import './modalBase.lbc.synthetic.css';
 @import './modalBase.lbc.native.css';
+
+div[data-slot] {
+    display: contents;
+}

package/src/lightning/modalBase/modalBase.html

@@ -18,7 +18,6 @@
             onprivatemodalfooterregister={handleFooterRegister}
             onprivateclose={handlePrivateClose}
             onprivatedisableclosebutton={handlePrivateDisableCloseButton}
-            onprivatemodalheaderclose={handleModalHeaderCloseClick}
             data-modal
         >
             <template if:true={showAriaDescribedBy}>
@@ -36,26 +35,22 @@
                     data-aria-live-message
                 >{ariaLiveMessage}</span>
             </template>
-                <div
-                    class="slds-modal__container"
-                    data-container
-                >
-                    <template if:true={isHeadlessModalVariant}>
-                        <div class="slds-modal__header slds-text-align_left slds-modal__header_empty">
-                            <lightning-button-icon
-                                    class="slds-modal__close"
-                                    icon-name="utility:close"
-                                    variant="bare"
-                                    alternative-text={closeButtonAltText}
-                                    onclick={handleCloseClick}
-                                    size="large"
-                                    disabled={disableCloseButton}
-                                    data-close-button
-                            ></lightning-button-icon>
-                        </div>
-                    </template>
-                    <div data-slot lwc:dom="manual"></div>
-                </div>
+            <div
+                class="slds-modal__container"
+                data-container
+            >
+                <lightning-button-icon
+                    class={computedCloseButtonCssClass}
+                    icon-name="utility:close"
+                    variant={computedCloseButtonVariant}
+                    alternative-text={closeButtonAltText}
+                    onclick={handleCloseClick}
+                    size="large"
+                    disabled={disableCloseButton}
+                    data-close-button
+                ></lightning-button-icon>
+                <div data-slot lwc:dom="manual"></div>
+            </div>
         </section>
     </lightning-focus-trap>
 </template>

package/src/lightning/modalBase/modalBase.js

@@ -19,6 +19,7 @@ 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';
 
 const DEBOUNCE_RESIZE = 300;
 const SMALL_SCREEN_SIZE = 480;
@@ -45,7 +46,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     isSmallScreenSize = null;
 
     // modalHeader, child
-    isHeadlessModalVariant = false;
     headerRegistered = false;
     headerHeight = 0;
     headerDefaultSlotIsPopulated = false;
@@ -317,6 +317,37 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         return !!description?.trim().length;
     }
 
+    /**
+     * Compute the correct lightning-button-icon CSS class to use
+     * for the size="full" behaviors, based upon the screen size
+     * threshold.  Two classes are added for full screen behavior
+     * to handle edge cases where customers change background of the
+     * modal header so the close button maintains visibility for a11y
+     * @private
+     */
+    // slds-button slds-button_icon slds-modal__close slds-button_icon-inverse
+    get computedCloseButtonCssClass() {
+        let classes = classSet('slds-modal__close');
+        const fullScreenActive =
+            this.isSmallScreenSize && this.size === SIZE_FULL;
+        classes.add({
+            'slds-modal_full-close-button': fullScreenActive,
+        });
+        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.
@@ -366,42 +397,21 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         const disableCloseButtonMessage = isSwitchingToDisabled
             ? this.disableCloseBtnMessage
             : '';
-
-        const closeButtonDisable = isSwitchingToDisabled ? 'disabled' : null;
-
-        // Finally, set accessibility attributes for modal-base
         if (isSwitchingToDisabled) {
             // Should disable close button
             this.ariaLiveMessage = disableCloseButtonMessage;
             this.showAriaLiveMessage = true;
             synchronizeAttrs(this.modalWrapper, { [`${ARIA.BUSY}`]: true });
+            synchronizeAttrs(this.modalCloseButton, { disabled: 'disabled' });
             this.disableCloseButton = true;
         } else {
             // Should enable close button
-            this.ariaLiveMessage = disableCloseButtonMessage;
+            this.ariaLiveMessage = disableCloseBtnMessage;
             this.showAriaLiveMessage = false;
             synchronizeAttrs(this.modalWrapper, { [`${ARIA.BUSY}`]: null });
+            synchronizeAttrs(this.modalCloseButton, { disabled: null });
             this.disableCloseButton = false;
         }
-
-        // Modal with Header variant has close button icon on lightning-modal-header child component
-        // where-as Headless Modal variant has close button icon on modal-base,
-        if (!this.isHeadlessModalVariant && this.headerTitleRef) {
-            // dispatch secondary event to disable close button icon present on lightning-modal-header
-            this.headerTitleRef.dispatchEvent(
-                new CustomEvent('privatemodalheaderdisableclose', {
-                    detail: {
-                        disableClose: isSwitchingToDisabled,
-                        [secure]: true,
-                    },
-                    bubbles: true,
-                })
-            );
-        } else {
-            synchronizeAttrs(this.modalCloseButton, {
-                disabled: closeButtonDisable,
-            });
-        }
     }
 
     /**
@@ -465,13 +475,16 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     handleFocusinEvents(e) {
         // eslint-disable-next-line @lwc/lwc/no-async-operation
         requestAnimationFrame(() => {
-            const isTargetModal =
-                e.target?.closest(MODAL_CONTAINER) ||
-                e.relatedTarget?.closest(MODAL_CONTAINER);
-            if (this.isModalOpen && isTargetModal) {
-                this.lastFocussedElementOnModal = getElementWithFocus();
-            } else {
-                returnFocusToElement(this.lastFocussedElementOnModal);
+            // 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);
+                }
             }
         });
     }
@@ -611,19 +624,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         console.error(errorMsg);
     }
 
-    /**
-     * Handle close button click triggered from lightning-modal-header
-     * @param e
-     */
-    handleModalHeaderCloseClick(e) {
-        if (!e?.detail?.[secure]) {
-            console.error('Invalid access to privatemodalheaderclose event');
-            return;
-        }
-        e.stopPropagation();
-        this.handleCloseClick();
-    }
-
     /**
      * Handle the close button click, or via ESC key
      * @private
@@ -785,7 +785,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
 
         const fallbackFocusElem = this.disableCloseButton
             ? outerModalElem
-            : closeButtonElem || outerModalElem;
+            : closeButtonElem;
 
         const focusElem = preferredFocusElem
             ? preferredFocusElem
@@ -851,20 +851,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         if (!this.focusinEventBound) {
             this.addFocusinEventListener();
         }
-
-        this.updateHeadlessModalVariantState();
-    }
-
-    /**
-     * In case of a headless modal variant, the close button icon lives inside modalBase,
-     * while in other variants, the close icon lives inside lightning-modal-header
-     *
-     * This helper method is to accurately update the state of 'isHeadlessModalVariant' flag
-     * in order to selectively render the close <lightning-button-icon> in modalBase.html
-     */
-    updateHeadlessModalVariantState() {
-        this.isHeadlessModalVariant =
-            this.bodyRegistered && !this.headerRegistered;
     }
 
     /**
@@ -942,8 +928,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         if (this.bodyRegistered) {
             this.updateModalBodyHeight();
         }
-
-        this.updateHeadlessModalVariantState();
     }
 
     /**
@@ -973,7 +957,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         this.headerLabelId = null;
         this.headerLabelIsPopulated = null;
         this.headerTitleRef = null;
-        this.updateHeadlessModalVariantState();
     }
 
     /**
@@ -1016,8 +999,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         if (this.bodyRegistered) {
             this.updateModalBodyHeight();
         }
-
-        this.updateHeadlessModalVariantState();
     }
 
     /**

package/src/lightning/modalHeader/modalHeader.html

@@ -1,25 +1,13 @@
 <template>
-    <div class="slds-modal__header slds-text-align_left" part="modal-header"
-         onprivatemodalheaderdisableclose={handlePrivateModalHeaderDisableClose}
-    >
+    <div class="slds-modal__header" part="modal-header">
         <template if:true={label}>
             <h1
-                class="slds-modal__title slds-hyphenate"
-                data-label
                 id="modal-label"
+                class="slds-modal__title slds-hyphenate"
                 tabindex="-1"
+                data-label
             >{label}</h1>
         </template>
-        <lightning-button-icon
-            alternative-text={headerCloseButtonAltText}
-            class="slds-modal__close"
-            data-header-close-button
-            disabled={disableCloseButton}
-            icon-name="utility:close"
-            onclick={handleModalHeaderClose}
-            size="large"
-            variant="bare"
-        ></lightning-button-icon>
         <slot
             data-default-slot
             onslotchange={handleDefaultSlotChange}