lightning-base-components 1.21.2-alpha → 1.21.4-alpha

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

@@ -2,7 +2,6 @@
 /* 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: '') {
   /**
    * Remap to SLDS blueprint hooks for parity
    * https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview
@@ -136,12 +135,12 @@
     }
   }
 
-
   /* Sizes: Full */
 
   /* .slds-modal_full {} */
 
   /* Behaves like large size when not in a small viewport */
+
   @media (width >= 48em) {
     :host([data-render-mode="shadow"]) .slds-modal_full .slds-modal__container {
       width: 90%;
@@ -151,6 +150,7 @@
   }
 
   /* Original SLDS implementation was desktop-first. This is now mobile-first for <=480px  */
+
   @media (width <= 30em) {
     :host([data-render-mode="shadow"]) .slds-modal_full {
       /* Account for iOS safe areas so our modal doesn't load underneath iOS elements. */
@@ -227,6 +227,7 @@
   }
 
   /* TODO W-12674349: remove after assistive text util is added */
+
   :host([data-render-mode="shadow"]) .slds-assistive-text {
     position: absolute !important;
     margin: -1px !important;
@@ -239,4 +240,3 @@
     text-transform: none !important;
     white-space: nowrap !important;
   }
-}

package/src/lightning/modalBase/modalBase.html

@@ -18,6 +18,7 @@
             onprivatemodalfooterregister={handleFooterRegister}
             onprivateclose={handlePrivateClose}
             onprivatedisableclosebutton={handlePrivateDisableCloseButton}
+            onprivatemodalheaderclose={handleModalHeaderCloseClick}
             data-modal
         >
             <template if:true={showAriaDescribedBy}>
@@ -39,16 +40,20 @@
                     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>
+                    <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>
         </section>

package/src/lightning/modalBase/modalBase.js

@@ -2,20 +2,19 @@ import { api } from 'lwc';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import {
-    makeEverythingExceptElementInert,
-    normalizeString,
-    synchronizeAttrs,
-    restoreInertness,
-    hasAnimation,
     ARIA,
+    hasAnimation,
     isAriaDescriptionSupported,
     isCSR,
+    makeEverythingExceptElementInert,
+    normalizeString,
+    restoreInertness,
+    synchronizeAttrs,
 } 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';
@@ -27,7 +26,6 @@ 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 LightningShadowBaseClass {
@@ -47,6 +45,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     isSmallScreenSize = null;
 
     // modalHeader, child
+    isHeadlessModalVariant = false;
     headerRegistered = false;
     headerHeight = 0;
     headerDefaultSlotIsPopulated = false;
@@ -55,7 +54,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     headerLabelId = null;
     headerLabelIsPopulated = null;
     headerTitleRef = null;
-    headerTabElemRef = null;
 
     // modalBody, child
     bodyRegistered = false;
@@ -83,7 +81,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     footerHeight = 0;
     footerSlotHasRendered = false;
     footerDefaultSlotIsPopulated = false;
-    footerTabElemRef = null;
 
     // aria attributes
     modalLabel = null;
@@ -165,48 +162,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         return modal.disableClose;
     }
 
-    /**
-     * Toggle on and off disable close button feature
-     * typically used very briefly when devs want to save form data to backend
-     * and do not want the form to be closed before the save has
-     * completed successfully
-     * toggleDisableCloseButton sets local state to
-     * (a) toggle display an aria-live message
-     * (b) toggle set disabled on the <lightning-button-icon>
-     * (c) toggle set aria-busy value on
-     * elsewhere in modalBase and modal, ESC key is also disabled, and
-     * calls to this.close() are prevented
-     */
-    toggleDisableCloseButton() {
-        // this.disableCloseButton is local modalBase state
-        // this.disableClose is modal.js @api state
-        // we track both in order to handle transition correctly
-        const isSwitchingToDisabled =
-            !this.disableCloseButton && this.disableClose;
-        /* Future enhancement possibility - trigger setInterval to remove and
-           again add back 'Processing' text, as this will indicate to the screen
-           reader user that the interface continues to be busy
-        */
-        const disableCloseButtonMessage = isSwitchingToDisabled
-            ? this.disableCloseBtnMessage
-            : '';
-        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 = disableCloseBtnMessage;
-            this.showAriaLiveMessage = false;
-            synchronizeAttrs(this.modalWrapper, { [`${ARIA.BUSY}`]: null });
-            synchronizeAttrs(this.modalCloseButton, { disabled: null });
-            this.disableCloseButton = false;
-        }
-    }
-
     /**
      * Public method to get the modal slot element
      * @type {(HTMLElement|null)} The modal slot, currently a div elem
@@ -356,35 +311,99 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         return classes.toString();
     }
 
+    get isDescriptionSet() {
+        const { description } = this;
+        // check for being set, as well as not just a description with spaces
+        // avoiding setting aria-describedby on section pointing to
+        // an empty SPAN element
+        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
+     * Determines if aria-describedby should be set, and the span tag shown
+     * occurs only when aria-description is not supported.
+     * ex: when description api is set to '' or '     ',
+     * we don't want to show the span or set aria-describedby
      * @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();
+    get showAriaDescribedBy() {
+        return !isAriaDescriptionSupported() && this.isDescriptionSet;
     }
 
     /**
-     * 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
+     * When window is resizing, need to debounce callback
+     * Track internal variable _resizing
+     * @returns {Boolean}
      * @private
      */
-    get computedCloseButtonVariant() {
-        return this.shouldModalBeFullScreen() ? 'bare' : 'bare-inverse';
+    get modalResizing() {
+        if (!this._resizing) {
+            this._resizing = this.scheduleWindowResizeEvent.bind(this);
+        }
+        return this._resizing;
+    }
+
+    /**
+     * Toggle on and off disable close button feature
+     * typically used very briefly when devs want to save form data to backend
+     * and do not want the form to be closed before the save has
+     * completed successfully
+     * toggleDisableCloseButton sets local state to
+     * (a) toggle display an aria-live message
+     * (b) toggle set disabled on the <lightning-button-icon>
+     * (c) toggle set aria-busy value on
+     * elsewhere in modalBase and modal, ESC key is also disabled, and
+     * calls to this.close() are prevented
+     */
+    toggleDisableCloseButton() {
+        // this.disableCloseButton is local modalBase state
+        // this.disableClose is modal.js @api state
+        // we track both in order to handle transition correctly
+        const isSwitchingToDisabled =
+            !this.disableCloseButton && this.disableClose;
+        /* Future enhancement possibility - trigger setInterval to remove and
+           again add back 'Processing' text, as this will indicate to the screen
+           reader user that the interface continues to be busy
+        */
+        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 });
+            this.disableCloseButton = true;
+        } else {
+            // Should enable close button
+            this.ariaLiveMessage = disableCloseButtonMessage;
+            this.showAriaLiveMessage = false;
+            synchronizeAttrs(this.modalWrapper, { [`${ARIA.BUSY}`]: 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) {
+            // 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,
+            });
+        }
     }
 
     /**
@@ -449,50 +468,10 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      * </ul>
      * @param e - Event
      */
-    handleFocusinEvents(e) {
+    handleFocusinEvents() {
         // 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);
-            }
+            // W-14998924 note: code revert to unblock 250R downstream
         });
     }
 
@@ -543,25 +522,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         }
     };
 
-    get isDescriptionSet() {
-        const { description } = this;
-        // check for being set, as well as not just a description with spaces
-        // avoiding setting aria-describedby on section pointing to
-        // an empty SPAN element
-        return description && description.trim().length > 0;
-    }
-
-    /**
-     * Determines if aria-describedby should be set, and the span tag shown
-     * occurs only when aria-description is not supported.
-     * ex: when description api is set to '' or '     ',
-     * we don't want to show the span or set aria-describedby
-     * @private
-     */
-    get showAriaDescribedBy() {
-        return !isAriaDescriptionSupported() && this.isDescriptionSet;
-    }
-
     /**
      * Set either 'aria-describedby' or 'aria-description' value for accessibility
      * based on the presence of 'description' api value
@@ -650,6 +610,19 @@ 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
@@ -661,8 +634,11 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         }
     }
 
-    // Handle privateclose event firing is prevented from occurring
-    // when this.disableClose set true in modal.js
+    /**
+     * Handle privateclose event firing is prevented from occurring
+     * when this.disableClose set true in modal.js
+     * @param e
+     */
     handlePrivateClose(e) {
         if (!(e.detail && e.detail[secure])) {
             console.error('Invalid access to privateclose event');
@@ -703,6 +679,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
             console.error('Invalid access to privatedisableclose event');
             return;
         }
+
         this.toggleDisableCloseButton();
     }
 
@@ -873,6 +850,20 @@ 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;
     }
 
     /**
@@ -927,7 +918,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
      */
     registerHeader({
         defaultSlotIsPopulated,
-        firstTabbableElemRef,
         defaultSlotWrapperId,
         defaultSlotHasRendered,
         unRegisterCallback,
@@ -944,7 +934,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         this.headerLabelId = labelId;
         this.headerLabelIsPopulated = labelIsPopulated;
         this.headerTitleRef = headerRef;
-        this.headerTabElemRef = firstTabbableElemRef;
         unRegisterCallback(() => {
             this.unregisterHeader();
         });
@@ -952,6 +941,8 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         if (this.bodyRegistered) {
             this.updateModalBodyHeight();
         }
+
+        this.updateHeadlessModalVariantState();
     }
 
     /**
@@ -981,7 +972,7 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         this.headerLabelId = null;
         this.headerLabelIsPopulated = null;
         this.headerTitleRef = null;
-        this.headerTabElemRef = null;
+        this.updateHeadlessModalVariantState();
     }
 
     /**
@@ -1012,13 +1003,11 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         defaultSlotHasRendered,
         footerHeight,
         unRegisterCallback,
-        firstTabbableElemRef,
     }) {
         this.footerRegistered = true;
         this.footerDefaultSlotIsPopulated = defaultSlotIsPopulated;
         this.footerSlotHasRendered = defaultSlotHasRendered;
         this.updateFooterHeight(footerHeight);
-        this.footerTabElemRef = firstTabbableElemRef || null;
         unRegisterCallback(() => {
             this.unregisterFooter();
         });
@@ -1026,6 +1015,8 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         if (this.bodyRegistered) {
             this.updateModalBodyHeight();
         }
+
+        this.updateHeadlessModalVariantState();
     }
 
     /**
@@ -1050,20 +1041,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         this.footerHeight = 0;
         this.footerSlotHasRendered = false;
         this.footerDefaultSlotIsPopulated = false;
-        this.footerTabElemRef = null;
-    }
-
-    /**
-     * When window is resizing, need to debounce callback
-     * Track internal variable _resizing
-     * @returns {Boolean}
-     * @private
-     */
-    get modalResizing() {
-        if (!this._resizing) {
-            this._resizing = this.scheduleWindowResizeEvent.bind(this);
-        }
-        return this._resizing;
     }
 
     /**

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

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

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

@@ -2,7 +2,6 @@
 /* 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));
@@ -31,6 +30,7 @@
   /* 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;
@@ -58,4 +58,3 @@
       display: contents;
     }
   }
-}

package/src/lightning/modalBody/modalBody.css

@@ -1 +1,7 @@
 @import './modalBody.lbc.native.css';
+
+/* Styles required for Multi-Column Sorting Modal in datatable */
+:host(.modal_headerless)  .slds-modal__content_headless {
+    border-top-right-radius: unset;
+    border-top-left-radius: unset;
+}

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

@@ -2,7 +2,6 @@
 /* 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 */
@@ -41,6 +40,7 @@
   }
 
   /* TODO W-12674349: Replace with visibility utility classes when available */
+
   :host([data-render-mode="shadow"]) .slds-hide {
     display: none !important;
   }
@@ -48,6 +48,7 @@
   /* 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;
@@ -76,4 +77,3 @@
   :host([data-render-mode="shadow"]) .slds-modal__footer .slds-button + .slds-button {
       margin-left: var(--slds-g-spacing-2);
   }
-}

package/src/lightning/modalFooter/modalFooter.js

@@ -1,6 +1,5 @@
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
-import { findAllTabbableElements, filterTooltips } from 'lightning/focusUtils';
 
 // SLDS Modal Footer classes
 const footerClass = 'slds-modal__footer';
@@ -82,25 +81,6 @@ export default class LightningModalFooter extends LightningShadowBaseClass {
         return true;
     }
 
-    /**
-     * Get first tabbable element within modalFooter's slot, if exists
-     * This is passed to parent in order to possibly be used for autoFocus
-     * @returns {(HTMLElement|null)}
-     * @private
-     */
-    get firstTabbableElement() {
-        let firstElem = null;
-        if (this.isDefaultSlotPopulated) {
-            const filteredElements = filterTooltips(
-                findAllTabbableElements(this.defaultSlotElement)
-            );
-            if (filteredElements.length > 0) {
-                firstElem = filteredElements[0];
-            }
-        }
-        return firstElem;
-    }
-
     /**
      * Register modalFooter with modal parent, including callbacks to
      * unregister the modal footer
@@ -116,7 +96,6 @@ export default class LightningModalFooter extends LightningShadowBaseClass {
                 footerHeight: this.footerHeight,
                 defaultSlotIsPopulated: this.isDefaultSlotPopulated,
                 defaultSlotHasRendered: !this.initialSlotRender,
-                firstTabbableElemRef: this.firstTabbableElement,
                 unRegisterCallback: (unregisterCallback) => {
                     this.unregisterCallback = unregisterCallback;
                 },

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

@@ -2,7 +2,6 @@
 /* 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 */
@@ -51,6 +50,7 @@
   /* 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;
@@ -74,4 +74,3 @@
       display: contents;
     }
   }
-}

package/src/lightning/modalHeader/modalHeader.html

@@ -1,13 +1,25 @@
- <template>
-    <div class="slds-modal__header" part="modal-header">
+<template>
+    <div class="slds-modal__header slds-text-align_left" part="modal-header"
+         onprivatemodalheaderdisableclose={handlePrivateModalHeaderDisableClose}
+    >
         <template if:true={label}>
             <h1
-                id="modal-label"
                 class="slds-modal__title slds-hyphenate"
-                tabindex="-1"
                 data-label
+                id="modal-label"
+                tabindex="-1"
             >{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}