lightning-base-components 1.19.2-alpha → 1.19.4-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.19.2-alpha",
+    "version": "1.19.4-alpha",
     "license": "MIT",
     "files": [
         "external",
@@ -458,6 +458,10 @@
                 "name": "@salesforce/label/LightningProgressIndicator.currentStage",
                 "path": "scopedImports/@salesforce-label-LightningProgressIndicator.currentStage.js"
             },
+            {
+                "name": "@salesforce/label/LightningProgressIndicator.stageNotStarted",
+                "path": "scopedImports/@salesforce-label-LightningProgressIndicator.stageNotStarted.js"
+            },
             {
                 "name": "@salesforce/label/LightningListView.loadMore",
                 "path": "scopedImports/@salesforce-label-LightningListView.loadMore.js"

package/scopedImports/@salesforce-label-LightningProgressIndicator.stageNotStarted.js

@@ -0,0 +1 @@
+export default 'Stage Not Started';

package/src/lightning/alert/__examples__disabled/basic/basic.html

@@ -1,7 +1,7 @@
 <template>
     <div class="example">
         <button
-            aria-haspopup="modal"
+            aria-haspopup="dialog"
             onclick={handleAlertModal}
         >Open the Alert Modal</button>
     </div>

package/src/lightning/ariaObserver/__docs__/ariaObserver.md

@@ -73,18 +73,24 @@ Then use the `sync(isNativeShadow)` method to synchronize the ID references when
 Used when the `targetSelector` or `targetNode` is within a shadow boundary, but the parent component where AriaObserver has been
 instantiated is not. Example: `lightning-primitive-input-simple` may be rendered in native shadow, but `lightning-input` may not be.
 
+It is important to protect the call to `sync` by checking if the component `isConnected`. This is because there are some cases where a component may be rendered but not connected and calling `sync` when a component is not connected will fail. 
+
 ``` js
 renderedCallback() {
-    this.ariaObserver.sync();
+    if (this.isConnected) {
+        this.ariaObserver.sync();
+    }
 }
 ```
 
 When the containing component is native shadow enabled, AriaObserver observes the component's root node to find and link
 the related elements. This can be overridden in cases where the component's root node does not contain the related elements,
-but one of it's ancestor nodes does. For example, `lightning-base-combobox` is contained within `lightning-combobox` so the root of `lightning-combobox` should be used in place of the root of `lightning-base-combobox`.
+but one of its ancestor nodes does. For example, `lightning-base-combobox` is contained within `lightning-combobox` so the root of `lightning-combobox` should be used in place of the root of `lightning-base-combobox`. It is important to protect this assignment by checking if `ariaObserver` is defined. This is because the root node setters can be called after `ariaObserver` is set to `undefined` in the `disconnectedCallback`.
 
 ```js
-    this.ariaObserver.root = parentRootNode;
+    if (this.ariaObserver) {
+        this.ariaObserver.root = parentRootNode;
+    }
 ```
 
 Finally, disconnect the aria observer and free the resources at the end of the component lifecycle.
@@ -135,7 +141,9 @@ export default class Foo extends LightningElement {
     }
 
     renderedCallback() {
-        this.ariaObserver.sync();
+        if (this.isConnected) {
+            this.ariaObserver.sync();
+        }
     }
 
     disconnectedCallback() {

package/src/lightning/ariaObserver/__examples__/connectChild/connectChild.js

@@ -22,7 +22,9 @@ export default class AriaObserverConnectChild extends LightningElement {
     }
 
     renderedCallback() {
-        this.ariaObserver.sync();
+        if (this.isConnected) {
+            this.ariaObserver.sync();
+        }
     }
 
     _ariaLabelledBy = '';

package/src/lightning/baseCombobox/baseCombobox.html

@@ -104,6 +104,7 @@
                 onmouseleave={handleDropdownMouseLeave}
                 onclick={handleOptionClick}
                 part="dropdown overlay"
+                aria-label={inputLabel}
                 >
                 <template if:true={_hasDropdownOpened}>
                     <template for:each={_items} for:item="item">

package/src/lightning/buttonMenu/buttonMenu.js

@@ -717,8 +717,23 @@ export default class LightningButtonMenu extends LightningElement {
         }
     }
 
+    getChildNodes(element, selector) {
+        if (!element) {
+            return [];
+        }
+        if (element.matches && element.matches(selector)) {
+            return [element];
+        }
+        return Array.from(element.childNodes).reduce((arr, node) => {
+            return [...arr, ...this.getChildNodes(node, selector)];
+        }, []);
+    }
+
     getMenuItems() {
-        return Array.from(this.querySelectorAll(menuItemSelectors));
+        // return Array.from(this.querySelectorAll(menuItemSelectors));
+        // Nested <slot><slot></slot></slot> commonly used in composite
+        // components will not be found with querySelectorAll.
+        return this.getChildNodes(this, menuItemSelectors);
     }
 
     getMenuItemByIndex(index) {

package/src/lightning/colorPickerPanel/colorPickerPanel.html

@@ -7,7 +7,7 @@
         onupdateselectedcolor={handleUpdateSelectedColor}
         onkeydown={handleKeydown}>
 
-        <div class="slds-popover__body" id="dialog-body-id">
+        <div class="slds-popover__body" tabindex="0" id="dialog-body-id">
             <lightning-color-picker-custom current-color={currentColor}></lightning-color-picker-custom>
             <!-- [a11y] Remove until raptor tabset is supported. -->
             <!-- <div class="slds-tabs_default">

package/src/lightning/confirm/__examples__disabled/basic/basic.html

@@ -1,7 +1,7 @@
 <template>
     <div class="example">
         <button
-            aria-haspopup="modal"
+            aria-haspopup="dialog"
             onclick={handleConfirmModal}
         >Open the Confirm Modal</button>
     </div>

package/src/lightning/datatable/datatable.js

@@ -409,6 +409,20 @@ export default class LightningDatatable extends LightningElement {
         this.state.hideTableHeader = normalizeBoolean(value);
     }
 
+    /**
+     * If present, the table header is wrapped.
+     * @type {boolean}
+     * @default false
+     */
+    @api
+    get wrapTableHeader() {
+        return this.state.wrapTableHeader;
+    }
+
+    set wrapTableHeader(value) {
+        this.state.wrapTableHeader = normalizeBoolean(value);
+    }
+
     /**
      * If present, a spinner is shown to indicate that more data is loading.
      * @type {boolean}
@@ -866,6 +880,11 @@ export default class LightningDatatable extends LightningElement {
             styles['overflow-x'] = 'auto';
         }
 
+        if (this.wrapTableHeader) {
+            // increase padding from 2rem to 3rem on the top when header wraps
+            styles['padding-top'] = '3rem';
+        }
+
         return styleToString(styles);
     }
 

package/src/lightning/datatable/state.js

@@ -25,6 +25,7 @@ export const getDefaultState = function () {
 
         headerIndexes: {},
         hideTableHeader: false,
+        wrapTableHeader: false,
 
         // keyboard
         keyboardMode: 'NAVIGATION',

package/src/lightning/datatable/templates/div/div.html

@@ -85,7 +85,8 @@
                                                 column-width={def.columnWidth}
                                                 show-checkbox={showSelectAllCheckbox}
                                                 hide-header={hideTableHeader}
-                                                onprivatecolumnheaderid={handleCheckboxHeaderId}>
+                                                onprivatecolumnheaderid={handleCheckboxHeaderId}
+                                                wrap-table-header={wrapTableHeader}>
                                             </lightning-primitive-header-factory>
                                         </template>
                                         <template if:false={def.fixedWidth}>
@@ -107,7 +108,8 @@
                                                 resizable={hasResizebleColumns}
                                                 resizestep={widthsData.resizeStep}
                                                 hide-header={hideTableHeader}
-                                                onprivatecolumnheaderid={handleCheckboxHeaderId}>
+                                                onprivatecolumnheaderid={handleCheckboxHeaderId}
+                                                wrap-table-header={wrapTableHeader}>
                                             </lightning-primitive-header-factory>
                                         </template>
                                     </div>

package/src/lightning/datatable/templates/table/table.html

@@ -75,7 +75,8 @@
                                                 column-width={def.columnWidth}
                                                 show-checkbox={showSelectAllCheckbox}
                                                 hide-header={hideTableHeader}
-                                                onprivatecolumnheaderid={handleCheckboxHeaderId}>
+                                                onprivatecolumnheaderid={handleCheckboxHeaderId}
+                                                wrap-table-header={wrapTableHeader}>
                                             </lightning-primitive-header-factory>
                                         </template>
                                         <template if:false={def.fixedWidth}>
@@ -97,7 +98,8 @@
                                                 resizable={hasResizebleColumns}
                                                 resizestep={widthsData.resizeStep}
                                                 hide-header={hideTableHeader}
-                                                onprivatecolumnheaderid={handleCheckboxHeaderId}>
+                                                onprivatecolumnheaderid={handleCheckboxHeaderId}
+                                                wrap-table-header={wrapTableHeader}>
                                             </lightning-primitive-header-factory>
                                         </template>
                                     </th>

package/src/lightning/fileDownload/resourceResolver.js

@@ -44,7 +44,7 @@ export function resolveFileTypeToURL(recordId) {
     /partners is the path prefix. Returns null if the prefix isn’t defined. 
     If the current request is not a site request, then this field returns an empty string. 
    */
-function getUrlWithSitePrefix(url) {
+export function getUrlWithSitePrefix(url) {
     let siteUrlPrefix = getPathPrefix();
 
     // remove /s in siteUrlPrefix
@@ -53,6 +53,7 @@ function getUrlWithSitePrefix(url) {
             ? siteUrlPrefix.slice(0, siteUrlPrefix.length - 2)
             : siteUrlPrefix;
 
-    // retun url directly if path prefix is already added to site URL
-    return url.indexOf(siteUrlPrefix) === 0 ? url : siteUrlPrefix + url;
+    // return url directly if path prefix is already added to site URL
+    // Edge Case: `sf` would accidentally match `sfc` without the `/`
+    return url.startsWith(`${siteUrlPrefix}/`) ? url : siteUrlPrefix + url;
 }

package/src/lightning/input/input.js

@@ -35,13 +35,13 @@ import {
     normalizeUTCDateTime,
 } from './dateTimeUtil';
 import { isAfter, isBefore } from 'lightning/internationalizationLibrary';
+import { isValidNumber } from 'lightning/numberUtils';
 import {
     FieldConstraintApiWithProxyInput,
     InteractingState,
     normalizeVariant,
     VARIANT,
     normalizeInput,
-    isValidNumber,
     isValidEmail,
     isValidMultipleEmails,
 } from 'lightning/inputUtils';
@@ -99,6 +99,12 @@ const VALID_INPUT_TYPES = [
     'toggle',
     'color',
     'range',
+    // the following types are not listed as supported
+    // as of 246, but have historically worked and are
+    // relied on by customers
+    'datetime-local',
+    'month',
+    'week',
 ];
 const VALID_NUMBER_FORMATTERS = [
     'decimal',
@@ -269,6 +275,14 @@ export default class LightningInput extends LightningElement {
      */
     @api dateAriaLabel;
 
+    /**
+     * Describes the time input to assistive technologies when type='datetime'. On mobile devices,
+     * this label is merged with aria-label and date-aria-label to describe the native date time input.
+     * @type {string}
+     *
+     */
+    @api timeAriaLabel;
+
     @track _timeAriaDescribedBy;
     @track _timeAriaLabelledBy;
     @track _timeAriaControls;
@@ -296,14 +310,12 @@ export default class LightningInput extends LightningElement {
     @track _minLength;
     @track _accept;
     @track _variant;
-    @track _numberRawValue = '';
     @track _ariaInvalid;
     @track _autocomplete;
 
     _shouldShowHelpMessage = true;
     _helpMessageChanged = false;
     _formatter = DEFAULT_FORMATTER;
-    _showRawNumber = false;
     _initialValueSet = false;
     _rendered;
 
@@ -656,6 +668,7 @@ export default class LightningInput extends LightningElement {
     }
 
     set type(value) {
+        const wasTypeSimple = this.isTypeSimple;
         const normalizedValue = normalizeString(value);
         this._type =
             normalizedValue === 'datetime' ? 'datetime-local' : normalizedValue;
@@ -665,6 +678,11 @@ export default class LightningInput extends LightningElement {
             this._type = 'text';
         }
 
+        // If the type change was not primitive to primitive, we must update the cached component.
+        if (!wasTypeSimple || !this.isTypeSimple) {
+            this._primitiveComponentRefreshNeeded = true;
+        }
+
         this._inputElementRefreshNeeded = true;
 
         if (this._rendered) {
@@ -902,20 +920,18 @@ export default class LightningInput extends LightningElement {
                 if (subcomponent) {
                     subcomponent.value = this._value;
                 }
-            }
-
-            this._updateProxyInputAttributes('value');
-
-            // Again, due to the interop layer we need to check whether the value being set
-            // is different, otherwise we're duplicating the sets on the input, which result
-            // in different bugs like Japanese IME duplication of characters in Safari (likely a browser bug) or
-            // character position re-set in IE11.
-            if (
+            } else if (
                 this._rendered &&
                 this._inputElement.value !== this._displayedValue
             ) {
+                // Again, due to the interop layer we need to check whether the value being set
+                // is different, otherwise we're duplicating the sets on the input, which result
+                // in different bugs like Japanese IME duplication of characters in Safari (likely a browser bug) or
+                // character position re-set in IE11.
                 this._setInputValue(this._displayedValue);
             }
+
+            this._updateProxyInputAttributes('value');
         }
     }
 
@@ -1324,6 +1340,8 @@ export default class LightningInput extends LightningElement {
             type === 'search' ||
             type === 'password' ||
             type === 'range' ||
+            type === 'month' ||
+            type === 'week' ||
             !type ||
             (!this._isDesktopBrowser() &&
                 (type === 'date' ||
@@ -1342,10 +1360,14 @@ export default class LightningInput extends LightningElement {
     }
 
     get _primitiveComponent() {
-        if (!this.cachedPrimitiveComponent) {
+        if (
+            !this.cachedPrimitiveComponent ||
+            this._primitiveComponentRefreshNeeded
+        ) {
             this.cachedPrimitiveComponent = this.template.querySelector(
                 this.primitiveSelector
             );
+            this._primitiveComponentRefreshNeeded = false;
         }
         return this.cachedPrimitiveComponent;
     }
@@ -1507,7 +1529,9 @@ export default class LightningInput extends LightningElement {
                     }
 
                     if (this.isTypeNumber) {
-                        return !isValidNumber(this._numberRawValue);
+                        return !isValidNumber(
+                            this._primitiveComponent?.getNumberRawValue()
+                        );
                     }
 
                     if (!this.isNativeInput) {
@@ -1679,6 +1703,9 @@ export default class LightningInput extends LightningElement {
     }
 
     handlePrimitiveInputFileChange() {
+        // kept for legacy support @W-14118679
+        this._dispatchCommitEvent();
+
         const detail = {
             files: this.files,
             value: this._inputElement.value,
@@ -1695,9 +1722,9 @@ export default class LightningInput extends LightningElement {
         );
     }
 
-    handlePrimitiveInputSimpleChange() {
+    handlePrimitiveInputSimpleChange(event) {
         this.interactingState.enter();
-        this._updateProxyInputAttributes('value');
+        this._updateValueAndValidityAttribute(event.detail.value);
     }
 
     _dispatchCommitEvent() {
@@ -1827,19 +1854,6 @@ export default class LightningInput extends LightningElement {
         }
     }
 
-    _updateInputDisplayValueIfTypeNumber() {
-        // Displayed value depends on the format number, so if we're not showing the raw
-        // number we should update the value
-        if (
-            this._rendered &&
-            this.isTypeNumber &&
-            !this._showRawNumber &&
-            this._inputElement
-        ) {
-            this._setInputValue(this._displayedValue);
-        }
-    }
-
     /**
      * Updates the class list on the host element based on the variant
      */

package/src/lightning/inputUtils/inputUtils.js

@@ -8,16 +8,4 @@ export {
 } from './validity';
 export { normalizeInput, normalizeVariant, VARIANT } from './normalize';
 export { isValidEmail, isValidMultipleEmails } from './email';
-export {
-    calculateFractionDigitsFromStep,
-    formatNumber,
-    fromIsoDecimal,
-    hasValidNumberShortcut,
-    hasValidNumberSymbol,
-    increaseNumberByStep,
-    isValidNumber,
-    isValidNumberCharacter,
-    stringifyNumber,
-    toIsoDecimal,
-} from './number';
 export { isEmptyString, isEmptyObject } from './utils';

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

@@ -1,4 +1,4 @@
-A `lightningModal` component overlays a message modal on top of the current app window. A modal interrupts a user’s workflow and draws attention to the message.
+A `LightningModal` component overlays a message modal on top of the current app window. A modal interrupts a user’s workflow and draws attention to the message.
 
 `LightningModal` implements the SLDS [modals](https://www.lightningdesignsystem.com/components/modals/) blueprint.
 
@@ -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 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.
+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 30em (~480 pixels or less), like mobile phone devices. On screens larger than 30em (~481 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/__examples__disabled/all/all.html

@@ -2,8 +2,8 @@
     <div class="example">
         <button
             onclick={handleDemoModal}
-            aria-haspopup="modal"
-        >Open the Modal</button> 
+            aria-haspopup="dialog"
+        >Open the Modal</button>
         <p>Result: <code>{demoResult}</code></p>
     </div>
 </template>

package/src/lightning/modal/__examples__disabled/allform/allform.html

@@ -2,7 +2,7 @@
     <div class="example">
         <button
             onclick={handleDemoModal}
-            aria-haspopup="modal"
+            aria-haspopup="dialog"
         >Open Modal form, size=medium</button>
         <p>Result: <code>{demoResult}</code></p>
     </div>

package/src/lightning/modal/__examples__disabled/allformfull/allformfull.html

@@ -2,7 +2,7 @@
     <div class="example">
         <button
             onclick={handleDemoModal}
-            aria-haspopup="modal"
+            aria-haspopup="dialog"
         >Open Modal form, size=full</button>
         <p>Result: <code>{demoResult}</code></p>
     </div>

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

@@ -1,9 +1,9 @@
 <template>
     <div class="example">
         <button
-            aria-haspopup="modal"
+            aria-haspopup="dialog"
             onclick={handleDemoModal}
-        >Open the Demo Modal</button> 
+        >Open the Demo Modal</button>
         <p>Result: <code>{demoResult}</code></p>
     </div>
 </template>

package/src/lightning/modal/__examples__disabled/footless/footless.html

@@ -2,8 +2,8 @@
     <div class="example">
         <button
             onclick={handleDemoModal}
-            aria-haspopup="modal"
-        >Open the Footless Modal</button> 
+            aria-haspopup="dialog"
+        >Open the Footless Modal</button>
         <p>Result: <code>{demoResult}</code></p>
     </div>
 </template>

package/src/lightning/modal/__examples__disabled/headless/headless.html

@@ -2,8 +2,8 @@
     <div class="example">
         <button
             onclick={handleDemoModal}
-            aria-haspopup="modal"
-        >Open the Headless Modal</button> 
+            aria-haspopup="dialog"
+        >Open the Headless Modal</button>
         <p>Result: <code>{demoResult}</code></p>
     </div>
 </template>

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

@@ -58,6 +58,7 @@ const MODAL_CLOSE_BTN_FULL_CLASS = 'slds-modal_full-close-button';
 // modal screen size testing
 // utilized by full screen modal tests
 const SCREEN_SIZE_SMALL = 'SMALL';
+const SCREEN_SIZE_SMALL_MID = 'SMALL_MID';
 const SCREEN_SIZE_MEDIUM = 'MEDIUM';
 const SCREEN_SIZE_LARGE = 'LARGE';
 const SCREEN_SIZE_XLARGE = 'XLARGE';
@@ -78,7 +79,11 @@ 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 = 768;
+// during release 248, breakpoint was altered
+// to narrow the device's targeted by size=full
+// from 768 to 480
+// this will be backported, so it will effect 246.x
+const MODAL_FULL_SCREEN_SMALL_BREAKPOINT = 480;
 // <lightning-modal> element location, medium+ screen
 const MODAL_DEFAULT_PX_OFFSET_X = 25;
 const MODAL_DEFAULT_PX_OFFSET_Y = 50;
@@ -158,11 +163,18 @@ const SCREEN_SIZE = {
     // based on iPhone 14
     // close to iPhone 12 Pro, Pixel 5
     // when Modal size='full',
-    // full screen behavior will be applied
+    // full screen behavior (mobile screens) will be applied
+    // when Modal api size=full is set
     SMALL: {
         width: 393,
         height: 852,
     },
+    // rest of SCREEN_SIZE below all are greater than 480px
+    // so will render as normal desktop Modal UX
+    SMALL_MID: {
+        width: 481,
+        height: 852,
+    },
     SMALL_LANDSCAPE: {
         width: 852,
         height: 393,
@@ -225,6 +237,7 @@ module.exports = {
     MODAL_CLOSE_BUTTON_FULL_VARIANT,
     MODAL_CLOSE_BUTTON_NORMAL_VARIANT,
     SCREEN_SIZE_SMALL,
+    SCREEN_SIZE_SMALL_MID,
     SCREEN_SIZE_MEDIUM,
     SCREEN_SIZE_LARGE,
     SCREEN_SIZE_XLARGE,

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

@@ -317,7 +317,7 @@ async function validateModalCloseButtonAttributes(config) {
     expect(modalCloseButtonCssClass).toContain(MODAL_CLOSE_BTN_CLASS);
 
     // the only time size='full' actual renders full page width and height
-    // is when windowWidth is set <= 768
+    // is when windowWidth is set <= 480px (30em)
     if (
         modalSize === MODAL_SIZE_FULL &&
         windowWidth <= MODAL_FULL_SCREEN_SMALL_BREAKPOINT
@@ -328,7 +328,7 @@ async function validateModalCloseButtonAttributes(config) {
 
         expect(modalCloseButtonCssClass).toContain(MODAL_CLOSE_BTN_FULL_CLASS);
     } else {
-        // 'small', 'medium', 'large', and ('full' when windowWidth is set > 768) are normal modal behavior
+        // 'small', 'medium', 'large', and ('full' when windowWidth is set > 480px (30em)) are normal modal behavior
         expect(modalCloseButtonVariant).toEqual(
             MODAL_CLOSE_BUTTON_NORMAL_VARIANT
         );
@@ -414,7 +414,7 @@ async function validateModalHeightBehavior(config) {
     const modalBodyStyleProps = parseStyleAttributes(modalBodyOuterDivStyle);
     const { x: modalElemX, y: modalElemY } = modalElem.offset;
     // the only time size='full' actual renders full page width and height
-    // is when windowWidth is set <= 768
+    // is when windowWidth is set <= 480px (30em)
     // note: reliably testing outer div element was not possible as
     // webdriver getSize didn't provide correct values for comparison
     // the tests below verify that the code path for setting full height are invoked
@@ -433,7 +433,7 @@ async function validateModalHeightBehavior(config) {
         expect(modalBodyStyleProps[MAX_HEIGHT]).toBeUndefined();
         expect(modalBodyStyleProps[MIN_HEIGHT]).toBeUndefined();
     } else {
-        // 'small', 'medium', 'large', and ('full' when windowWidth is set > 768) are normal modal behavior
+        // 'small', 'medium', 'large', and ('full' when windowWidth is set > 480px (30em)) are normal modal behavior
         // the div.slds-modal__container element is consistently accurate for
         // location measurment in the CI
         // location values vary based on screen and size value
@@ -473,14 +473,14 @@ async function validateModalWidthBehavior(config, modalIndex = 0) {
         await modalContainerElem.getSize();
 
     // the only time size='full' actual renders full page width and height
-    // is when windowWidth is set <= 768
+    // is when windowWidth is set <= 480px
     if (
         modalSize === MODAL_SIZE_FULL &&
         windowWidth <= MODAL_FULL_SCREEN_SMALL_BREAKPOINT
     ) {
         expect(modalContainerElemWidth).toEqual(windowWidth);
     } else {
-        // 'small', 'medium', 'large', and ('full' when windowWidth is set > 768) are normal modal behavior
+        // 'small', 'medium', 'large', and ('full' when windowWidth is set > 480px) are normal modal behavior
         expect(modalContainerElemWidth).toBeLessThan(windowWidth);
     }
 }

package/src/lightning/modalBase/modalBase.js

@@ -19,7 +19,7 @@ import closeButtonAltText from '@salesforce/label/LightningModalBase.cancelandcl
 import disableCloseBtnMessage from '@salesforce/label/LightningModalBase.waitstate';
 
 const DEBOUNCE_RESIZE = 300;
-const SMALL_SCREEN_SIZE = 768;
+const SMALL_SCREEN_SIZE = 480;
 const SIZE_SMALL = 'small';
 const SIZE_MEDIUM = 'medium';
 const SIZE_LARGE = 'large';
@@ -1110,8 +1110,8 @@ export default class LightningModalBase extends LightningElement {
      * 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 767 pixels (small = full screen modal behavior),
-     * or (b) at or above 768 (large = default modal behavior)
+     * either (a) at or below 480 pixels (small = full screen modal behavior),
+     * or (b) at or above 480 (large = default modal behavior)
      * @private
      */
     setIsSmallScreenSize() {