lightning-base-components 1.18.1-alpha → 1.18.3-alpha

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

@@ -60,7 +60,7 @@ This example creates an address compound field with attributes to specify values
         onchange={handleChange} ></lightning-input-address>
 ```
 
-To bind the input value on the address fields, use the `event.target` property. 
+To bind the input value on the address fields, use the `event.target` property.
 
 ```js
 import { LightningElement } from 'lwc';
@@ -270,8 +270,8 @@ For example, change the minimum height of the textarea and change the background
 
 ```css
 :host {
-    --sds-c-textarea-sizing-min-height: 200px;
-    --sds-c-input-color-background: orange;
+    --slds-c-textarea-sizing-min-height: 200px;
+    --slds-c-input-color-background: orange;
 }
 ```
 

package/src/lightning/inputUtils/inputUtils.js

@@ -6,23 +6,18 @@ export {
     FieldConstraintApiWithProxyInput,
     FieldConstraintApi,
 } from './validity';
-export { normalizeVariant, VARIANT } from './normalize';
-
-export function isEmptyString(s) {
-    return (
-        s === undefined ||
-        s === null ||
-        (typeof s === 'string' && s.trim() === '')
-    );
-}
-
-export function isEmptyObject(obj) {
-    if (obj === undefined || obj === null || typeof obj !== 'object') {
-        return false;
-    }
-    // eslint-disable-next-line guard-for-in
-    for (const name in obj) {
-        return false;
-    }
-    return true;
-}
+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/inputUtils/normalize.js

@@ -23,3 +23,10 @@ export function normalizeVariant(value) {
         ],
     });
 }
+
+export function normalizeInput(value) {
+    if (typeof value === 'number' || typeof value === 'string') {
+        return String(value);
+    }
+    return '';
+}

package/src/lightning/{input/numberUtil.js → inputUtils/number.js}

@@ -5,7 +5,7 @@ import {
     toLocalizedDigits,
     numberFormat,
 } from 'lightning/internationalizationLibrary';
-import { isEmptyString } from 'lightning/inputUtils';
+import { isEmptyString } from './utils';
 import { normalizeNumber } from 'lightning/utilsPrivate';
 
 const VALID_NUMBER_CHARACTERS_EXPRESSION = new RegExp(

package/src/lightning/inputUtils/utils.js

@@ -0,0 +1,18 @@
+export function isEmptyString(s) {
+    return (
+        s === undefined ||
+        s === null ||
+        (typeof s === 'string' && s.trim() === '')
+    );
+}
+
+export function isEmptyObject(obj) {
+    if (obj === undefined || obj === null || typeof obj !== 'object') {
+        return false;
+    }
+    // eslint-disable-next-line guard-for-in
+    for (const name in obj) {
+        return false;
+    }
+    return true;
+}

package/src/lightning/internationalizationLibrary/README.md

@@ -0,0 +1,24 @@
+# internationalizationLibrary
+
+Currently, the code base contains logic that directs execution in two different paths, depending whether a component is being executed on the platform vs off. That logic, was intented to aid the migration off the current Aura's localization service, in favor of an unified and universal solution based on standards, that could be consumed on any enviroment.
+
+Such logic can be detailed, on a high level as follows, at run time a path execution decides that:
+
+if a component is run on the platform, it will make use of Aura's localization Service to format and parse dates/times.
+if a component is run anywhere else, it will use the globalization i18n-service
+
+## When to use this utility
+
+Because of our legacy support and backward compatiblity contracts, we use this utility as a facade, with the hope that once we are able to fully deprecate Aura's Localization service, this utility will help us to transition into [localizerjs](https://git.soma.salesforce.com/Globalization/localizerjs).
+
+If you have an existing component that maps to any of the Aura's localization service methods, this module will aid with that.
+
+## Our recommmended approach
+
+- For declarative usage, use our localization specific components, they will work both off/on platform.
+- For low level, programatic usage, dealing with dates/times/numbers etc. use [localizerjs](https://git.soma.salesforce.com/Globalization/localizerjs). The next section covers more on usage and how these utiltiies are exposed.
+
+## Access/Exposure/Usage
+
+1. [internationalizationLibrary](https://github.com/salesforce-experience-platform-emu/lightning-components/tree/master/ui-lightning-components/src/main/modules/lightning/internationalizationLibrary) as a module is not exposed on the platform, but it's part of our NPM package.
+2. [localizerjs](https://git.soma.salesforce.com/Globalization/localizerjs) is maintained by the Globalization team, however, we expose it as part of Lightning. For example [i18nService](https://github.com/salesforce-experience-platform-emu/lightning-components/tree/master/ui-lightning-components/src/main/modules/lightning/i18nService). All usage of `localizerjs` should be consumed as `lightning/i18nService` and `lightning/i18nCldrOptions`. This is exposed on the platform internally and available as part of our NPM package.

package/src/lightning/internationalizationLibrary/utils.js

@@ -1,9 +1,12 @@
+import { isCSR } from 'lightning/utilsPrivate';
+
 /**
  * Used to determine if aura localization service is available
  * This should be true on-core and false off-core, and will
  * no longer be needed when we fully migrate off aura's service
  */
-export const isAuraL10NAvailable = window.$A && window.$A.localizationService;
+export const isAuraL10NAvailable =
+    isCSR && window.$A && window.$A.localizationService;
 
 /**
  * Returns string to use when throwing an error message

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

@@ -121,7 +121,7 @@ To create columns with fixed widths, use the `size` attribute on `lightning-layo
 </lightning-layout>
 ```
 
-For more information, see the [SLDS grid utility classes](https://lightningdesignsystem.com/utilities/grid/).
+For more information, see the [SLDS grid utility classes](https://lightningdesignsystem.com/utilities/grid/), and [SLDS sizing utility classes](https://www.lightningdesignsystem.com/utilities/sizing/).
 
 #### Usage Considerations
 

package/src/lightning/layout/__examples__/simple/simple.css

@@ -12,4 +12,4 @@
     line-height: 1.25;
     color: #54698d;
     margin-bottom: .25rem;
-}
+}

package/src/lightning/layout/layout.css

@@ -1,4 +1,8 @@
-@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+@import 'lightning/sldsCommon';
+@import 'lightning/sldsUtilsGrid';
+
+@media all and (-ms-high-contrast: none),
+(-ms-high-contrast: active) {
     .slds-slot {
         display: flex;
     }

package/src/lightning/layout/layout.js

@@ -1,4 +1,5 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import {
     normalizeParam,
     computeLayoutClass,
@@ -11,7 +12,7 @@ import { normalizeBoolean } from 'lightning/utilsPrivate';
 /**
  * Represents a responsive grid system for arranging containers on a page.
  */
-export default class LightningLayout extends LightningElement {
+export default class LightningLayout extends LightningShadowBaseClass {
     /**
      * Determines how to spread the layout items horizontally.
      * The alignment options are center, space, spread, and end.
@@ -79,6 +80,7 @@ export default class LightningLayout extends LightningElement {
     _layoutClass = [];
 
     connectedCallback() {
+        super.connectedCallback();
         this.updateClassList();
     }
 

package/src/lightning/layoutItem/__examples__/alignmentBump/alignmentBump.css

@@ -1,3 +1,3 @@
 .custom-box {
-    background-color: #f4f6f9;    
+    background-color: #f4f6f9;
 }

package/src/lightning/layoutItem/__examples__/sizePerDevice/sizePerDevice.css

@@ -1,4 +1,3 @@
 .custom-box {
     background-color: #f4f6f9;
-
 }

package/src/lightning/layoutItem/layoutItem.css

@@ -0,0 +1,5 @@
+@import 'lightning/sldsCommon';
+@import 'lightning/sldsUtilsBox';
+@import 'lightning/sldsUtilsGrid';
+@import 'lightning/sldsUtilsPadding';
+@import 'lightning/sldsUtilsSizing';

package/src/lightning/layoutItem/layoutItem.js

@@ -1,4 +1,5 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import {
     normalizeFlexibility,
     normalizePadding,
@@ -13,7 +14,7 @@ import {
  * A layout item groups information together to define visual grids, spacing, and sections.
  * @slot default Placeholder for your content in lightning-layout-item.
  */
-export default class LightningLayoutItem extends LightningElement {
+export default class LightningLayoutItem extends LightningShadowBaseClass {
     /**
      * Make the item fluid so that it absorbs any extra space in its
      * container or shrinks when there is less space. Allowed values are:
@@ -136,6 +137,7 @@ export default class LightningLayoutItem extends LightningElement {
     _layoutClass = [];
 
     connectedCallback() {
+        super.connectedCallback();
         this.updateClassList();
     }
 

package/src/lightning/menuDivider/menu-divider.slds.css

@@ -0,0 +1,15 @@
+
+/* Copyright (c) 2015-present, Salesforce, 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-has-divider_top {
+    border-top: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-90, #e5e5e5);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-has-divider_top-space {
+    border-top: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-90, #e5e5e5);
+    margin-top: var(--sds-g-spacing-2, 0.5rem);
+    padding-top: var(--sds-g-spacing-2, 0.5rem);
+  }
+}

package/src/lightning/menuDivider/menuDivider.css

@@ -1,3 +1,6 @@
+@import 'lightning/sldsCommon';
+@import './menu-divider.slds.css';
+
 :host {
     display: block;
 }

package/src/lightning/menuDivider/menuDivider.html

@@ -1,3 +1,3 @@
 <template>
-    <div class={computedClass}></div>
+    <div class={computedClass} part="menu-divider"></div>
 </template>

package/src/lightning/menuDivider/menuDivider.js

@@ -1,14 +1,16 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import { normalizeString as normalize } from 'lightning/utilsPrivate';
 
 /**
  * Creates a divider in the list of items for lightning-button-menu.
  */
-export default class LightningMenuDivider extends LightningElement {
+export default class LightningMenuDivider extends LightningShadowBaseClass {
     @track _variant = 'standard';
 
     connectedCallback() {
+        super.connectedCallback();
         this.setAttribute('role', 'separator');
     }
 

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

@@ -0,0 +1,140 @@
+
+/* Copyright (c) 2015-present, Salesforce, Inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+@supports (--styling-hooks: '') {
+  /**
+   * Note: .slds-dropdown__item class used to be on the host element. Moved to
+   * new containing element to prevent duplicate styles in mixed-mode.
+   */
+
+  /**
+   * Menu Item
+   */
+  :host([data-render-mode="shadow"]) a {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--sds-g-spacing-2, 0.5rem);
+    position: relative;
+    padding: var(--sds-g-spacing-2, 0.5rem) var(--sds-g-spacing-3, 0.75rem);
+    color: var(--sds-g-color-neutral-base-10, #181818);
+    line-height: var(--sds-g-font-lineheight-4, 1.5);
+    font-weight: var(--sds-g-font-weight-4, 400);
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  :host([data-render-mode="shadow"]) a:hover,:host([data-render-mode="shadow"]) 
+  a:focus {
+    outline: 0;
+    text-decoration: none;
+    background-color: var(--sds-g-color-neutral-base-95, #f3f3f3);
+  }
+
+  :host([data-render-mode="shadow"]) a:active {
+    text-decoration: none;
+    background-color: var(--sds-g-color-neutral-base-95, #f3f3f3);
+  }
+
+  :host([data-render-mode="shadow"]) a[aria-disabled='true'] {
+    color: var(--sds-g-color-neutral-base-80, #c9c9c9);
+    cursor: default;
+
+    /* 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;
+  }
+
+  /* TODO: bring in PostCSS fix and see if it fixes output CSS */
+  :host([data-render-mode="shadow"]) a[aria-disabled='true']:hover,:host([data-render-mode="shadow"]) 
+  a:host([data-render-mode="shadow"]) [aria-disabled='true']:focus {
+    background-color: transparent;
+  }
+
+  /**
+   * Note: these styles were originally on the "a" element above, but flex
+   * context was lost because the truncate span was added, so we hijack the
+   * span to get the layout control that we want. Display: flex on both the
+   * "a" and "span" is intended, add prefix and suffix icons to see the
+   * generated markup and it'll make sense.
+   */
+  :host([data-render-mode="shadow"]) .slds-truncate {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--sds-g-spacing-2, 0.5rem);
+  }
+
+  /**
+   * State - Error
+   *
+   * @TODO: currently not supported by LBC
+   */
+  :host([data-render-mode="shadow"].slds-has-error) a {
+    background: var(--sds-g-color-error-base-40, #ba0517);
+  }
+
+  /**
+   * State - Success
+   *
+   * @TODO: currently not supported by LBC
+   */
+  :host([data-render-mode="shadow"].slds-has-success) a {
+    background: var(--sds-g-color-success-base-70, #45c65a);
+  }
+
+  :host([data-render-mode="shadow"].slds-has-error) a,:host([data-render-mode="shadow"].slds-has-success) a {
+    color: var(--sds-g-color-neutral-base-100, #ffffff);
+  }
+
+  /**
+   * State - Warning
+   *
+   * @TODO: currently not supported by LBC
+   */
+  :host([data-render-mode="shadow"].slds-has-warning) a {
+    background: var(--sds-g-color-warning-base-70, #fe9339);
+  }
+
+  :host([data-render-mode="shadow"].slds-has-warning) .slds-indicator_unread {
+    background-color: currentColor;
+  }
+
+  :host([data-render-mode="shadow"].slds-has-warning) .slds-indicator_unsaved {
+    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 {
+    text-decoration: underline;
+  }
+
+  /**
+   * State - Selected
+   *
+   * We scope to aria-checked so we don't accidentally toggle prefix icons
+   * which are a separate API.
+   */
+  :host([data-render-mode="shadow"]) [aria-checked='false'] lightning-primitive-icon::part(icon) {
+    opacity: 0;
+  }
+
+  :host([data-render-mode="shadow"]) [aria-checked='true'] lightning-primitive-icon::part(icon) {
+    opacity: 1;
+  }
+
+  /**
+   * Status Indicator
+   *
+   * @TODO: Look into viability of refactoring into utility
+   */
+  :host([data-render-mode="shadow"]) .slds-indicator_unsaved,:host([data-render-mode="shadow"]) 
+  .slds-indicator--unsaved {
+    color: var(--sds-g-color-brand-base-50, #0176d3);
+    align-self: center;
+    position: relative;
+
+    /* Unsaved indicator does not have gap spacing, everything else does */
+    margin-inline-end: calc(var(--sds-g-spacing-2, 0.5rem) * -1);
+  }
+}

package/src/lightning/menuItem/menuItem.css

@@ -1,3 +1,6 @@
+@import 'lightning/sldsCommon';
+@import './menu-item.slds.css';
+
 :host {
     display: block;
 }

package/src/lightning/menuItem/menuItem.html

@@ -1,50 +1,52 @@
 <template>
-    <a href={computedHref}
-        target={_target}
-        role={computedRole}
-        tabindex={computedTabIndex}
-        accesskey={computedAccessKey}
-        aria-checked={computedAriaChecked}
-        aria-disabled={computedAriaDisabled}
-        download={download}
-        onclick={handleClick}
-        onfocus={handleFocus}
-        onkeydown={handleKeyDown}
-        onblur={handleBlur}>
+    <div class="slds-dropdown__item" part="menu-item">
+        <a href={computedHref}
+            target={_target}
+            role={computedRole}
+            tabindex={computedTabIndex}
+            accesskey={computedAccessKey}
+            aria-checked={computedAriaChecked}
+            aria-disabled={computedAriaDisabled}
+            download={download}
+            onclick={handleClick}
+            onfocus={handleFocus}
+            onkeydown={handleKeyDown}
+            onblur={handleBlur}>
 
-        <span class="slds-truncate">
-            <template if:true={isMenuItemCheckbox}>
-                <lightning-primitive-icon
-                    icon-name='utility:check'
-                    size="x-small"
-                    svg-class={computedCheckedIconClass}
-                    variant="bare">
-                </lightning-primitive-icon>
-            </template>
+            <span class="slds-truncate">
+                <template if:true={isMenuItemCheckbox}>
+                    <lightning-primitive-icon
+                        icon-name='utility:check'
+                        size="x-small"
+                        svg-class={computedCheckedIconClass}
+                        variant="bare">
+                    </lightning-primitive-icon>
+                </template>
 
-            <!-- draft marker -->
-            <abbr if:true={isDraft} class="slds-indicator_unsaved" title={draftAlternativeText}>*</abbr>
+                <!-- draft marker -->
+                <abbr if:true={isDraft} class="slds-indicator_unsaved" title={draftAlternativeText}>*</abbr>
 
-            <!-- Prefix icon -->
-            <template if:true={prefixIconName}>
-                <lightning-primitive-icon
-                    icon-name={prefixIconName}
+                <!-- Prefix icon -->
+                <template if:true={prefixIconName}>
+                    <lightning-primitive-icon
+                        icon-name={prefixIconName}
+                        size="x-small"
+                        svg-class="slds-icon slds-icon_x-small slds-icon-text-default slds-m-right_x-small"
+                        variant="bare">
+                    </lightning-primitive-icon>
+                </template>
+
+                {label}
+            </span>
+
+            <!-- Suffix icon -->
+            <template if:true={iconName}>
+                <lightning-primitive-icon icon-name={iconName}
                     size="x-small"
-                    svg-class="slds-icon slds-icon_x-small slds-icon-text-default slds-m-right_x-small"
+                    svg-class="slds-icon-text-default slds-m-left_small slds-shrink-none"
                     variant="bare">
                 </lightning-primitive-icon>
             </template>
-
-            {label}
-        </span>
-
-        <!-- Suffix icon -->
-        <template if:true={iconName}>
-            <lightning-primitive-icon icon-name={iconName}
-                size="x-small"
-                svg-class="slds-icon-text-default slds-m-left_small slds-shrink-none"
-                variant="bare">
-            </lightning-primitive-icon>
-        </template>
-    </a>
+        </a>
+    </div>
 </template>

package/src/lightning/menuItem/menuItem.js

@@ -1,4 +1,5 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import {
     normalizeBoolean,
@@ -10,7 +11,7 @@ import { sanitizeURL, FALLBACK_URL } from 'lightning/utilsPrivate';
 /**
  * Represents a list item in a menu.
  */
-export default class LightningMenuItem extends LightningElement {
+export default class LightningMenuItem extends LightningShadowBaseClass {
     /**
      * A value associated with the menu item.
      * @type {string}
@@ -62,8 +63,7 @@ export default class LightningMenuItem extends LightningElement {
     @api draftAlternativeText;
 
     connectedCallback() {
-        this.classList.add('slds-dropdown__item');
-
+        super.connectedCallback();
         this.setAttribute('role', 'presentation');
     }
 

package/src/lightning/menuSubheader/menu-subheader.slds.css

@@ -0,0 +1,22 @@
+
+/* Copyright (c) 2015-present, Salesforce, 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-dropdown__header {
+    font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
+    font-weight: var(--sds-g-font-weight-7, 700);
+    padding-block: var(--sds-g-spacing-2, 0.5rem);
+    padding-inline: var(--sds-g-spacing-3, 0.75rem);
+  }
+
+  /**
+   * @TODO: refactor when utility is available
+   */
+  :host([data-render-mode="shadow"]) .slds-truncate {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

package/src/lightning/menuSubheader/menuSubheader.css

@@ -1,3 +1,6 @@
+@import 'lightning/sldsCommon';
+@import './menu-subheader.slds.css';
+
 :host {
     display: block;
 }

package/src/lightning/menuSubheader/menuSubheader.html

@@ -1,3 +1,5 @@
 <template>
-    <span>{label}</span>
+    <div class="slds-dropdown__header slds-truncate" part="menu-subheader">
+        <span>{label}</span>
+    </div>
 </template>

package/src/lightning/menuSubheader/menuSubheader.js

@@ -1,9 +1,10 @@
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 
 /**
  * Creates a subheader in the list of items in lightning-button-menu.
  */
-export default class LightningMenuSubheader extends LightningElement {
+export default class LightningMenuSubheader extends LightningShadowBaseClass {
     /**
      * The text displayed in the subheader.
      * @type {string}
@@ -11,10 +12,7 @@ export default class LightningMenuSubheader extends LightningElement {
     @api label;
 
     connectedCallback() {
-        // add default CSS classes to custom element tag
-        this.classList.add('slds-dropdown__header');
-        this.classList.add('slds-truncate');
-
+        super.connectedCallback();
         this.setAttribute('role', 'separator');
     }
 }

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

@@ -58,7 +58,7 @@ The `.open()` method lets you assign values to the modal's properties. `Lightnin
 
 * `label` - Required. Sets the modal's title and assistive device label. If the modal has a header, set `label` in the `lightning-modal-header` component. If the modal doesn't have a header, set the `label` property when opening the modal.
 
-* `size` - Determines how much of the viewport width the modal uses. Supported values are `small`, `medium`, and `large`, which you can set when you open the modal. Default value is `medium`. The length of the modal is determined by the amount of content.
+* `size` - Determines how much of the viewport width the modal uses. Supported values are `small`, `medium`, `large`, and `full`. You can set the `size` attribute when you open the modal. Default value is `medium`. The height of the modal is determined by the amount of content in the `lightning-modal-body` component, and the `size` value. For more information on the `full` variant, see the **Styling Variants** section.
 
 * `description` - Sets the modal's accessible description. It uses the `aria-description` attribute where supported, or falls back to `aria-describedby`. If you set a custom description value, include the label name at the beginning of your description, because some screen readers only read the description, and not the label.
 
@@ -560,6 +560,8 @@ 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.
+
 The `LightningModal` component also supports the SLDS [Directional variant](https://www.lightningdesignsystem.com/components/modals/#Directional) modal blueprint pattern.
 
 To achieve the directional button layout, place the buttons in a `div` with the `slds-modal__footer_directional` class.