lightning-base-components 1.18.8-alpha → 1.19.1-alpha

package/src/lightning/input/__docs__/input.md

@@ -87,9 +87,9 @@ instead for input types `button`, `reset`, and
 Use [`lightning-radio-group`](bundle/lightning-radio-group/documentation)
 instead of input type `radio` for radio buttons.
 
-When working with forms that interact with Salesforce records, consider using the record form components. The `lightning-record-form`, `lightning-record-view-form`, and `lightning-record-edit-form` components provide a form-based UI that's metadata-driven. The components are automatically wired up to your record data, labels, and field-level help text. For more information, see [Work with Records Using Base Components](docs/component-library/documentation/en/lwc/lwc.data_get_user_input_intro).
+When working with forms that interact with Salesforce records, consider using the record form components. The `lightning-record-form`, `lightning-record-view-form`, and `lightning-record-edit-form` components provide a form-based UI that's metadata-driven. The components are automatically wired up to your record data, labels, and field-level help text. For more information, see [Work with Records Using Base Components](https://developer.salesforce.com/docs/platform/lwc/guide/data-get-user-input-intro).
 
-Alternatively, to create your own custom UI to work with Salesforce records, use `lightning-input` with the `lightning/ui*Api` wire adapters and functions, such as `getRecord` and `updateRecord`. For more information, see [Use the Wire Service with Base Components](docs/component-library/documentation/en/lwc/lwc.data_wire_base_components).
+Alternatively, to create your own custom UI to work with Salesforce records, use `lightning-input` with the `lightning/ui*Api` wire adapters and functions, such as `getRecord` and `updateRecord`. For more information, see [Use the Wire Service with Base Components](https://developer.salesforce.com/docs/platform/lwc/guide/data-wire-base-components).
 
 The `label` attribute is required. If you don't want to display a label,
 specify the `variant="label-hidden"` attribute. See **Accessibility** for more
@@ -192,6 +192,8 @@ as explained in **Adding Field-Level Help and Placeholder Text**.
 
 On desktop, the datepicker calendar clips behind other components on the page if the parent container of `lightning-input` has a smaller width or height than the calendar. To prevent clipping, give the parent container a minimum width of 285px and minimum height of 310px.
 
+By default, the datepicker calendar renders above all modals and the main Salesforce header.
+
 ```html
 <template>
     <lightning-input type="date" label="Birthday"> </lightning-input>
@@ -203,7 +205,6 @@ On desktop, the datepicker calendar clips behind other components on the page if
 A datetime field includes a text input to type a date and a date picker
 to select a date, and similar fields for typing or picking a time.
 
-
 On mobile devices, this component uses the native datetime picker, which ignores the `date-style` and `time-style` attributes. The native datetime picker uses the user's device settings for names of months and weekdays, the input datetime format, and the calendar type.
 
 ##### Desktop
@@ -253,6 +254,8 @@ You can guide users with a `field-level-help` tooltip, as explained in **Adding
 
 On desktop, the datepicker calendar clips behind other components on the page if the parent container of `lightning-input` has a smaller width or height than the calendar. To prevent clipping, give the parent container a minimum width of 285px and minimum height of 310px.
 
+By default, the datepicker calendar renders above all modals and the main Salesforce header.
+
 **Note**: Set the same time zone on your mobile device and in Salesforce to avoid confusion and potential validation
 issues. For example, suppose the current time is 4:00 PM ET. Your mobile device is set to the America/New_York time zone and
 you're interacting with Salesforce while it's set to the America/Los_Angeles time zone. When you tap an empty date/time field
@@ -557,6 +560,8 @@ On mobile devices, this component uses the native time picker, which ignores the
 
 On desktop, this component uses a time picker styled with the Lightning Design System. This picker uses the user's Salesforce locale setting for the time format, either 12-hr time with AM/PM or 24-hr time format. The entered date and time are validated against the user's Salesforce locale format during the `blur` event.
 
+By default, the time picker renders above all modals and the main Salesforce header.
+
 The component uses the attribute `time-style="short"` by default, so the time picker
 displays time without seconds. To display time including seconds, set `time-style="medium"`.
 
@@ -835,7 +840,7 @@ To provide sample input in the field, use the `placeholder` attribute. For examp
 
 #### Data Binding
 
-Bind the input value to a property in your component's JavaScript class. `lightning-input` uses the `onchange` event handler to listen a change to its value. For more information, see [Data Binding in a Template](docs/component-library/documentation/en/lwc/js_props_getter).
+Bind the input value to a property in your component's JavaScript class. `lightning-input` uses the `onchange` event handler to listen a change to its value. For more information, see [Data Binding in a Template](https://developer.salesforce.com/docs/platform/lwc/guide/js-props-getter).
 
 #### Event Handling
 
@@ -1064,7 +1069,7 @@ trigger a message on blur when too many characters are entered.
 ```
 
 You can use custom labels that display translated values on input fields. For more information,
-see [Access Labels](docs/component-library/documentation/lwc/lwc.create_labels).
+see [Access Labels](https://developer.salesforce.com/docs/platform/lwc/guide/create-labels).
 
 The `lightning-input` component has these limitations when running in the Playground and the Mini-Playground in the Examples tab of this Component Reference.
 
@@ -1148,4 +1153,4 @@ For a recipe that uses `lightning-input`, see the following components in the LW
 
 #### See Also
 
-[Access Elements the Component Owns](docs/component-library/documentation/lwc/create_components_dom_work)
+[Access Elements the Component Owns](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-dom-work)

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

@@ -133,42 +133,42 @@
 
     /* FORM ELEMENT: STACKED */
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) {
+    :host([data-render-mode="shadow"][variant='label-stacked']) {
         display: block;
     }
 
     /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
 
-    /* :host([variant~='label-stacked']):not(.slds-form-element_readonly) {
+    /* :host([variant='label-stacked']):not(.slds-form-element_readonly) {
         margin-block-end: var(--sds-g-spacing-2);
     }
 
-    :host([variant~='label-stacked']):not(.slds-is-editing) {
+    :host([variant='label-stacked']):not(.slds-is-editing) {
         padding: 0 var(--sds-g-spacing-1);
     } */
 
-    /* :host([variant~='label-stacked']):not([class*="slds-size"]) {
+    /* :host([variant='label-stacked']):not([class*="slds-size"]) {
           width: 100%;
           flex-basis: 100%;
     } */
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element {
         padding: 0;
         margin-block-end: 0;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
         border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
         width: 100%;
         flex-basis: 100%;
         clear: left;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__icon {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__icon {
         float: none;
         padding-block-start: var(--sds-g-spacing-1, 0.25rem);
     }
@@ -177,7 +177,7 @@
 
     /* FORM ELEMENT: INLINE */
 
-    :host([data-render-mode="shadow"][variant~='label-inline']) {
+    :host([data-render-mode="shadow"][variant='label-inline']) {
         display: block;
     }
 
@@ -187,32 +187,32 @@
     in lighting-input this slds class is synonymous with the variant
     */
 
-    :host([data-render-mode="shadow"][variant~='label-inline'].slds-form-element_horizontal) {
+    :host([data-render-mode="shadow"][variant='label-inline'].slds-form-element_horizontal) {
         padding: var(--sds-g-spacing-1, 0.25rem);
         margin-block-end: var(--sds-g-spacing-2, 0.5rem);
     }
 
     /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
 
-    /* :host([variant~='label-inline']):not(.slds-form-element_readonly) {
+    /* :host([variant='label-inline']):not(.slds-form-element_readonly) {
         margin-block-end: var(--sds-g-spacing-2);
     }
 
-    :host([variant~='label-inline']):not([class*="slds-size"]) {
+    :host([variant='label-inline']):not([class*="slds-size"]) {
         width: 100%;
         flex-basis: 100%;
     }
 
-    :host([variant~='label-inline']:not(.slds-is-editing)) {
+    :host([variant='label-inline']:not(.slds-is-editing)) {
         padding: var(--sds-g-spacing-1);
     } */
 
-    :host([data-render-mode="shadow"][variant~='label-inline']).slds-is-edited {
+    :host([data-render-mode="shadow"][variant='label-inline']).slds-is-edited {
         padding-block-start: var(--sds-g-sizing-6, 1.25rem)
     }
 
-    @media (min-width: 48em) {
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__label {
+    @media (width >= 48em) {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
           float: left;
           max-width: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Removing icon width for when the help-text icon is present */
           flex-basis: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Some form element controls are set to display:flex */
@@ -222,23 +222,22 @@
           z-index: 1;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) lightning-helptext {
+        :host([data-render-mode="shadow"][variant='label-inline']) lightning-helptext {
           float: left;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__control {
           margin-inline-start: 33%;
           clear: none; /* Reset clear: left when switching to horizontal form layout */
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control .slds-form-element__control {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__control .slds-form-element__control {
           padding-inline-start: 0; /* Remove left padding on nested form controls, due to issues related to lightning-form components */
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list__column .slds-form-element__label {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-dueling-list__column .slds-form-element__label {
             width: auto;
             max-width: 100%;
-            -ms-flex-preferred-size: auto;
             flex-basis: auto;
             float: none;
             position: relative;
@@ -246,11 +245,11 @@
             margin-block-end: 0;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__help {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__help {
           margin-inline-start: 33%;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-dueling-list {
             clear: none;
         }
     }
@@ -283,7 +282,7 @@
 
     /* FORM ELEMENT: HIDDEN */
 
-    :host([data-render-mode="shadow"][variant~='label-hidden']) .slds-form-element__label {
+    :host([data-render-mode="shadow"][variant='label-hidden']) .slds-form-element__label {
       display: none
   }
 }

package/src/lightning/input/input.html

@@ -25,7 +25,6 @@
             name={name}
             onblur={handleBlur}
             onfocus={handleFocus}
-            oninput={handleInput}
             onchange={handlePrimitiveInputSimpleChange}
             oncommit={handleCommit}
             pattern={pattern}
@@ -34,6 +33,7 @@
             required={required}
             step={step}
             type={type}
+            timezone={timezone}
             variant={variant}
             value={value}
             validity={validity}
@@ -148,9 +148,8 @@
             help-message={_helpMessage}
             helptext-alternative-text={helptextAlternativeText}
             onblur={handleBlur}
+            oncommit={handleCommit}
             onfocus={handleFocus}
-            oninput={handleInput}
-            onchange={handleChange}
             has-external-label={hasExternalLabel}
             required={required}
             accesskey={accesskey}

package/src/lightning/input/input.js

@@ -1263,6 +1263,10 @@ export default class LightningInput extends LightningElement {
         return this.type === 'time';
     }
 
+    get isTypeSearch() {
+        return this.type === 'search';
+    }
+
     get isTypeMobileDate() {
         return this.isTypeDate && !this._isDesktopBrowser();
     }
@@ -1298,7 +1302,12 @@ export default class LightningInput extends LightningElement {
             type === 'search' ||
             type === 'password' ||
             type === 'range' ||
-            !type
+            !type ||
+            (!this._isDesktopBrowser() &&
+                (type === 'date' ||
+                    type === 'time' ||
+                    type === 'datetime' ||
+                    type === 'datetime-local'))
         );
     }
 
@@ -1402,10 +1411,8 @@ export default class LightningInput extends LightningElement {
                 inputElement = this.template.querySelector(
                     'lightning-timepicker'
                 );
-            } else if (this.isTypePrimitiveInput) {
-                inputElement = this._primitiveComponent.inputElement;
             } else {
-                inputElement = this.template.querySelector('input');
+                inputElement = this._primitiveComponent.inputElement;
                 this._inputDragonDecorated = true;
                 decorateInputForDragon(inputElement);
             }
@@ -1441,17 +1448,14 @@ export default class LightningInput extends LightningElement {
     }
 
     get _displayedValue() {
-        if (this.isTypeNumber) {
-            const subcomponent = this._primitiveComponent;
-            return subcomponent.getDisplayedValue();
-        }
-
         if (
+            this.isTypeNumber ||
             this.isTypeMobileDate ||
             this.isTypeMobileDateTime ||
             this.isTypeMobileTime
         ) {
-            return this._normalizeDateTimeString(this._value);
+            const subcomponent = this._primitiveComponent;
+            return subcomponent.getDisplayedValue();
         }
 
         return this._value;

package/src/lightning/inputAddress/__docs__/inputAddress.md

@@ -74,7 +74,7 @@ export default class AddressCityExample extends LightningElement {
 }
 ```
 
-See the __Custom Events__ section for a list of `event.target` properties. For more information, see [Data Binding in a Template](docs/component-library/documentation/en/lwc/js_props_getter).
+See the __Custom Events__ section for a list of `event.target` properties. For more information, see [Data Binding in a Template](https://developer.salesforce.com/docs/platform/lwc/guide/js-props-getter).
 
 #### Creating Dropdown Menus for Country and Province
 
@@ -140,7 +140,7 @@ export default class DemoInputAddress extends LightningElement {
 
 Alternatively, you can enable state and country picklists in your org, and
 access the values by using a wire adapter.
-See [Let Users Select State and Country from Picklists](https://help.salesforce.com/articleView?id=admin_state_country_picklists_overview.htm) in Salesforce Help and [getPicklistValues](docs/component-library/documentation/lwc/reference_wire_adapters_picklist_values) in the Lightning Web Components Developer Guide.
+See [Let Users Select State and Country from Picklists](https://help.salesforce.com/articleView?id=admin_state_country_picklists_overview.htm) in Salesforce Help and [getPicklistValues](https://developer.salesforce.com/docs/platform/lwc/guide/reference-wire-adapters-picklist-values) in the Lightning Web Components Developer Guide.
 
 #### Using Lookup to Find and Autofill an Address
 
@@ -213,7 +213,7 @@ Additionally, the `show-address-lookup` boolean attribute creates a search field
 Your Salesforce locale setting determines the order and layout of the input address fields by default. Use the `locale` attribute to override the default. Specify any locale code from the list of [Supported Number, Name, and Address Formats (ICU)](https://help.salesforce.com/s/articleView?id=sf.admin_supported_locales.htm&type=5").
 
 You can also use custom labels that display translated values. For more information, see
-[Access Labels](docs/component-library/documentation/lwc/lwc.create_labels).
+[Access Labels](https://developer.salesforce.com/docs/platform/lwc/guide/create-labels).
 
 We recommend that you provide a label even when you provide placeholder text for an address field. Without field labels, users can lose context when the placeholder text disappears as they type in the field.
 
@@ -282,9 +282,9 @@ See [Input: Styling Hooks Overview](https://www.lightningdesignsystem.com/compon
 Using `show-address-lookup` is not supported in Playground, Experience Builder sites, Lightning Out,
 Lightning Components for Visualforce, and standalone apps.
 
-When working with address fields such as with the `MailingAddress` field on Salesforce records, consider using the record form components. The `lightning-record-form`, `lightning-record-view-form`, and `lightning-record-edit-form` components provide a form-based UI that's metadata-driven. The components are automatically wired up to your record data, labels, and field-level help text. For more information, see [Work with Records Using Base Components](docs/component-library/documentation/en/lwc/lwc.data_get_user_input_intro).
+When working with address fields such as with the `MailingAddress` field on Salesforce records, consider using the record form components. The `lightning-record-form`, `lightning-record-view-form`, and `lightning-record-edit-form` components provide a form-based UI that's metadata-driven. The components are automatically wired up to your record data, labels, and field-level help text. For more information, see [Work with Records Using Base Components](https://developer.salesforce.com/docs/platform/lwc/guide/data-get-user-input-intro).
 
-To create your own custom UI to work with Salesforce records, use `lightning-input-address` with the `lightning/ui*Api` wire adapters and functions, such as `getRecord` and `updateRecord`. For more information, see [Use the Wire Service with Base Components](docs/component-library/documentation/en/lwc/lwc.data_wire_base_components).
+To create your own custom UI to work with Salesforce records, use `lightning-input-address` with the `lightning/ui*Api` wire adapters and functions, such as `getRecord` and `updateRecord`. For more information, see [Use the Wire Service with Base Components](https://developer.salesforce.com/docs/platform/lwc/guide/data-wire-base-components).
 
 To disable the fields so that users cannot interact with it, use the `disabled` attribute. If you want to prevent users from interacting with the country field only,
 disable it using the `country-disabled` attribute.

package/src/lightning/inputName/__docs__/inputName.md

@@ -118,7 +118,7 @@ export default class InputName extends LightningElement {
     first-name={firstname}
     middle-name="Middleton"
     last-name="Doe"
-    options={salutationOptions} 
+    options={salutationOptions}
     onchange={handleChange}></lightning-input-name>
 ```
 
@@ -147,12 +147,12 @@ export default class InputNameBase extends LightningElement {
 }
 ```
 
-See the __Custom Events__ section for a list of `event.target` properties. For more information, see [Data Binding in a Template](docs/component-library/documentation/en/lwc/js_props_getter).
+See the __Custom Events__ section for a list of `event.target` properties. For more information, see [Data Binding in a Template](https://developer.salesforce.com/docs/platform/lwc/guide/js-props-getter).
 
 #### Usage Considerations
 
 You can use custom labels that display translated values. For more information, see the
-[Access Static Resources, Labels, Internationalization Properties, and User IDs](docs/component-library/documentation/lwc/create_global_value_providers).
+[Access Static Resources, Labels, Internationalization Properties, and User IDs](https://developer.salesforce.com/docs/platform/lwc/guide/create-global-value-providers).
 
 This component uses `button` elements for dropdown menus to comply with the [Lightning Design System combobox blueprint](https://www.lightningdesignsystem.com/components/combobox/#%22Input%22-markup) for select-only comboboxes.
 
@@ -218,4 +218,4 @@ The `change` event properties are as follows.
 
 #### See Also
 
-[Use Wire Service with Base Components](docs/component-library/documentation/lwc/lwc.data_wire_base_components)
+[Use Wire Service with Base Components](https://developer.salesforce.com/docs/platform/lwc/guide/data-wire-base-components)

package/src/lightning/layoutItem/__docs__/layoutItem.md

@@ -80,7 +80,7 @@ Here is an example using default values.
 
 #### Usage Considerations
 
-This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](docs/component-library/documentation/lwc/lwc.migrate_map_aura_lwc_components) in the Lightning Web Components Developer Guide.
+This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](https://developer.salesforce.com/docs/platform/lwc/guide/migrate-map-aura-lwc-components) in the Lightning Web Components Developer Guide.
 
 #### Source Code
 

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

@@ -43,7 +43,7 @@
 
     /* Reassignment - lightning-icon */
     --slds-c-icon-color-foreground-default: var(--sds-g-color-neutral-base-80, #c9c9c9);
-    --slds-c-icon-boundary-spacing-inline-end: 25px;
+    --slds-c-icon-boundary-spacing-inlineend: 25px;
   }
 
   /* TODO: bring in PostCSS fix and see if it fixes output CSS */
@@ -98,11 +98,11 @@
   }
 
   :host([data-render-mode="shadow"].slds-has-warning) .slds-indicator_unread {
-    background-color: currentColor;
+    background-color: currentcolor;
   }
 
   :host([data-render-mode="shadow"].slds-has-warning) .slds-indicator_unsaved {
-    color: currentColor;
+    color: currentcolor;
   }
 
   :host([data-render-mode="shadow"].slds-has-error) a:hover,:host([data-render-mode="shadow"].slds-has-error) a:focus,:host([data-render-mode="shadow"].slds-has-success) a:hover,:host([data-render-mode="shadow"].slds-has-success) a:focus,:host([data-render-mode="shadow"].slds-has-warning) a:hover,:host([data-render-mode="shadow"].slds-has-warning) a:focus {

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.
 

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

@@ -55,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';
@@ -79,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;
@@ -222,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,