lightning-base-components 1.26.4-alpha → 1.27.2-alpha

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

@@ -5,6 +5,7 @@ The `lightning/modal` module provides the `LightningModal` component to create a
 Create a modal component in response to a user action, such as clicking a button or link. The modal blocks interaction with everything else on the page until the user acts upon or dismisses the modal.
 
 Unlike other components, this component doesn't use a `lightning-modal` tag or extend `LightningElement`. There is no `lightning-modal` component. Instead, you create a modal by extending `LightningModal` and using these helper `lightning-modal-*` components to provide a header, footer and the body of the modal.
+
 - `lightning-modal-body`
 - `lightning-modal-header`
 - `lightning-modal-footer`
@@ -56,13 +57,13 @@ When you close a modal, the modal instance is destroyed, not hidden. On close, t
 
 The `.open()` method lets you assign values to the modal's properties. `LightningModal` provides these properties.
 
-* `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.
+- `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`, `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.
+- `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.
+- `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.
 
-* `disableClose` - Prevents closing the modal by normal means like the ESC key, the close button, or `.close()`. For example, you could briefly set `disableClose` to true while a completed form is saving, so the user doesn't dismiss the modal early. See [**Use the `disableClose` Attribute**](#use-the-disableclose-attribute).
+- `disableClose` - Prevents closing the modal by normal means like the ESC key, the close button, or `.close()`. For example, you could briefly set `disableClose` to true while a completed form is saving, so the user doesn't dismiss the modal early. See [**Use the `disableClose` Attribute**](#use-the-disableclose-attribute).
 
 In this example, the app opens the `myModal` component. It invokes the `.open()` method in a `handleClick()` function bound to the app button’s `onclick` attribute, and uses `async` and `await` keywords to handle the promise returned by `.open()`. This example overrides the `size` value by setting it to `large` and sets the modal’s user-defined property `content`.
 
@@ -87,6 +88,7 @@ export default class MyApp extends LightningElement {
     }
 }
 ```
+
 The HTML template for this app contains a button that opens the modal and displays the result returned when the modal closes.
 
 ```html
@@ -126,6 +128,7 @@ export default class MyPage extends LightningElement {
   }
 }
 ```
+
 The modal dialog can then use this property. In this case, the modal creates buttons whose labels are provided in the `options` array.
 
 ```js
@@ -558,10 +561,11 @@ handleRowButtonClick(event) {
 #### Styling Forms in Native Shadow
 
 NOTE:
+
 - Due to the intentional changes introduced with Native Shadow, it is important to understand that styles outside of your modal's code will not be able to style elements within your modal.
 - Don't import SLDS styles your web UI doesn't actually use. Adding extra CSS files will cause the performance of your web UI to be lowered
 
-A common use case for `LightningModal` is to include a form and form elements with common SLDS layouts.  While the individual Lightning Base Components will contain their own styles in Native Shadow, [Lightning Design System form element styling](https://www.lightningdesignsystem.com/components/form-element/#Stacked) for form layouts like the form element variants [Stacked](https://www.lightningdesignsystem.com/components/form-element/#Stacked), [Horizontal](https://www.lightningdesignsystem.com/components/form-element/#Horizontal) and [Compound](https://www.lightningdesignsystem.com/components/form-element/#Compound) aren't present in Native Shadow, but still needed.
+A common use case for `LightningModal` is to include a form and form elements with common SLDS layouts. While the individual Lightning Base Components will contain their own styles in Native Shadow, [Lightning Design System form element styling](https://www.lightningdesignsystem.com/components/form-element/#Stacked) for form layouts like the form element variants [Stacked](https://www.lightningdesignsystem.com/components/form-element/#Stacked), [Horizontal](https://www.lightningdesignsystem.com/components/form-element/#Horizontal) and [Compound](https://www.lightningdesignsystem.com/components/form-element/#Compound) aren't present in Native Shadow, but still needed.
 
 In order to address this, you can import the form element layout library, `lightning/sldsFormElementUtils`, into your `LightningModal`'s implementation code, along with other commonly needed libaries.
 
@@ -590,9 +594,10 @@ Following the previous `c/myModalWithTreeGridNavigation` implementation example,
 The `lightning-modal-header` and `lightning-modal-footer` child components are optional, and you can choose to not include one or the other in your modal.
 
 The headerless variant of `LightningModal` has these additional requirements.
+
 - Must set a descriptive modal title with the `label` property using `Modal.open({ label })` or you’ll get a console error.
--  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).
+- 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 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.
 
@@ -624,9 +629,9 @@ Component styling hooks use the `--slds-c-*` prefix and change styling for speci
 
 Upon opening, the modal determines where to place focus as follows.
 
-* When the modal header is present, the modal component places the focus on the title text in the header.
-* When a modal header isn’t present, the modal component places the focus on the first interactive element in the modal body, such as a link, button, or input field.
-* When the modal body doesn’t have interactive elements, or the only interactive element is a tooltip, the modal component places focus on the close button.
+- When the modal header is present, the modal component places the focus on the title text in the header.
+- When a modal header isn’t present, the modal component places the focus on the first interactive element in the modal body, such as a link, button, or input field.
+- When the modal body doesn’t have interactive elements, or the only interactive element is a tooltip, the modal component places focus on the close button.
 
 The focus is determined according to
 the [Global Focus Guidelines](https://www.lightningdesignsystem.com/accessibility/guidelines/global-focus/#dialogs) for Lightning Design System.
@@ -638,6 +643,7 @@ To include tagline text or link content for the header section, add it between t
 #### Unit Testing
 
 Writing unit tests for `LightningModal` requires two sets of tests.
+
 1. Parent components that use `c/myModal` define a mocked result when `.open()` is called during a test run. This mock speeds up testing and prevents repetition while testing actions that trigger modals.
 2. The unit tests for `c/myModal` test the end-to-end functionality of the modal as a self contained component.
 
@@ -717,20 +723,20 @@ The stubs for `LightningModal` have shorthand selectors to make unit testing mor
 
 - `element.closeValue` - Value passed into `this.close(value)`
 - `element.modalHeader$()` - querySelect a single node in `lightning-modal-header`
-  - Usage: `element.modalHeader$('a')` Returns first link
+    - Usage: `element.modalHeader$('a')` Returns first link
 - `element.modalHeader$$()` - querySelectAll multiple nodes in `lightning-modal-header`
-  - Usage:
-    - `elem.modalHeader$$()` Returns all nodes in header
-    - `elem.modalHeader$$('a')` Returns all links in header
+    - Usage:
+        - `elem.modalHeader$$()` Returns all nodes in header
+        - `elem.modalHeader$$('a')` Returns all links in header
 - `element.modalBody$()` - querySelect a single node in `lightning-modal-body`
-  - Usage: `element.modalBody$('button')` Returns first button
+    - Usage: `element.modalBody$('button')` Returns first button
 - `element.modalBody$$()` - querySelectAll multiple nodes in `lightning-modal-body`
-  - Usage:
-    - `elem.modalBody$$()` Returns all nodes in body
-    - `elem.modalBody$$('button, [data-button]')` Returns buttons in body
+    - Usage:
+        - `elem.modalBody$$()` Returns all nodes in body
+        - `elem.modalBody$$('button, [data-button]')` Returns buttons in body
 - `element.modalFooter$()` - querySelect a single node in `lightning-modal-footer`
-  - Usage: `element.modalFooter$('button')` Returns first button
+    - Usage: `element.modalFooter$('button')` Returns first button
 - `element.modalFooter$$()` - querySelectAll multiple nodes in `lightning-modal-footer`
-  - Usage:
-    - `elem.modalFooter$$()` Returns all nodes in footer
-    - `elem.modalFooter$$('button, [data-button]')` Returns buttons in footer
+    - Usage:
+        - `elem.modalFooter$$()` Returns all nodes in footer
+        - `elem.modalFooter$$('button, [data-button]')` Returns buttons in footer

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

@@ -140,9 +140,8 @@ async function getModalInternals(config, modalIndex = 0) {
     // if modal base exists, continue getting modal internals
     if (modalBaseExists) {
         // get modal base element backdrop
-        modalBaseBackdropElem = await modalBaseElem.shadow$(
-            MODAL_BODY_BACKDROP
-        );
+        modalBaseBackdropElem =
+            await modalBaseElem.shadow$(MODAL_BODY_BACKDROP);
 
         // get focus trap element
         focusTrapElem = await modalBaseElem.shadow$(FOCUS_TRAP);
@@ -324,9 +323,8 @@ async function validateModalCloseButtonAttributes(config) {
     let modalCloseButtonCssClass = null;
     const { modalCloseButton } = await getModalInternals(config);
     if (modalCloseButton) {
-        modalCloseButtonVariant = await modalCloseButton.getAttribute(
-            'variant'
-        );
+        modalCloseButtonVariant =
+            await modalCloseButton.getAttribute('variant');
         modalCloseButtonCssClass = await modalCloseButton.getAttribute('class');
     }
 
@@ -451,9 +449,8 @@ async function validateModalHeightBehavior(config) {
 
     // modalHeader is not always present in the examples
     if (!isVariantHeadless) {
-        const { headerOuterDiv } = await getModalHeaderInternals(
-            modalHeaderElem
-        );
+        const { headerOuterDiv } =
+            await getModalHeaderInternals(modalHeaderElem);
         const heightHdr = await headerOuterDiv.getSize('height');
         if (heightHdr > 0) {
             totalModalElemHeight += heightHdr;
@@ -462,9 +459,8 @@ async function validateModalHeightBehavior(config) {
 
     // modalFooter is not always present in the examples
     if (!isVariantFootless) {
-        const { footerOuterDiv } = await getModalFooterInternals(
-            modalFooterElem
-        );
+        const { footerOuterDiv } =
+            await getModalFooterInternals(modalFooterElem);
         const heightFtr = await footerOuterDiv.getSize('height');
         if (heightFtr > 0) {
             totalModalElemHeight += heightFtr;
@@ -476,9 +472,8 @@ async function validateModalHeightBehavior(config) {
 
     // modalFooter is not always present in the examples
     if (!isVariantFootless) {
-        const { footerOuterDiv } = await getModalFooterInternals(
-            modalFooterElem
-        );
+        const { footerOuterDiv } =
+            await getModalFooterInternals(modalFooterElem);
         const heightFtr = await footerOuterDiv.getSize('height');
         if (heightFtr > 0) {
             totalModalElemHeight += heightFtr;
@@ -573,9 +568,8 @@ async function validateModalWidthBehavior(config) {
 
     // modalHeader is not always present in the examples
     if (!isVariantHeadless) {
-        const { headerOuterDiv } = await getModalHeaderInternals(
-            modalHeaderElem
-        );
+        const { headerOuterDiv } =
+            await getModalHeaderInternals(modalHeaderElem);
         const locHeader = await headerOuterDiv.getLocation();
         if (locHeader) {
             locHeaderX = locHeader.x;
@@ -583,9 +577,8 @@ async function validateModalWidthBehavior(config) {
     }
     // modalFooter is not always present in the examples
     if (!isVariantFootless) {
-        const { footerOuterDiv } = await getModalFooterInternals(
-            modalFooterElem
-        );
+        const { footerOuterDiv } =
+            await getModalFooterInternals(modalFooterElem);
         const locFooter = await footerOuterDiv.getLocation();
         if (locFooter) {
             locFooterX = locFooter.x;

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

@@ -1,196 +1,200 @@
 
-
-  /**
+/**
    * Remap to SLDS blueprint hooks for parity
    * https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview
    *
    * "Shared" Styling Hooks for modal base/header/body/footer
    */
 
-  :host([data-render-mode="shadow"]) [part='modal-backdrop'] {
-    --slds-c-backdrop-color-background: var(--slds-c-modalbase-backdrop-color-background);
-  }
-
-  :host([data-render-mode="shadow"]) [part='modal'] {
-    /* Map modal component hooks to single "shared" hooks from blueprint */
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-
-    /* '--slds-c-modal-shadow' is used in body/footer */
-    --slds-c-modalbody-shadow: var(--slds-c-modal-shadow);
-    --slds-c-modalfooter-shadow: var(--slds-c-modal-shadow);
-
-    /* '--slds-c-modal-color-border' is used in header/footer */
-    --slds-c-modalheader-color-border: var(--slds-c-modal-color-border);
-    --slds-c-modalfooter-color-border: var(--slds-c-modal-color-border);
-
-
-    /* '--slds-c-modal-radius-border' is used in header/body/footer */
-    --slds-c-modalheader-radius-border: var(--slds-c-modal-radius-border);
-    --slds-c-modalbody-radius-border: var(--slds-c-modal-radius-border);
-    --slds-c-modalfooter-radius-border: var(--slds-c-modal-radius-border);
-
-    /* '--slds-c-modal-sizing-border' is used in header/footer */
-    --slds-c-modalheader-sizing-border: var(--slds-c-modal-sizing-border);
-    --slds-c-modalfooter-sizing-border: var(--slds-c-modal-sizing-border);
-
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-
-  }
-
-  :host([data-render-mode="shadow"]) .slds-backdrop {
-    transition-duration: 0.4s;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    visibility: hidden;
-    position: fixed;
-    inset-block-start: 0;
-    inset-inline-end: 0;
-    inset-block-end: 0;
-    inset-inline-start: 0;
-    background: var(--slds-c-modalbase-backdrop-color-background, var(--slds-g-color-neutral-10-opacity-50, rgba(8, 7, 7, 60%)));
-    z-index: 9000;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-backdrop_open {
-    visibility: visible;
-    opacity: 1;
-    transition: opacity 0.4s linear;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-modal {
-    opacity: 0;
-    visibility: hidden;
-    transition: transform 0.1s linear, opacity 0.1s;
-    position: fixed;
-    inset-block-start: 0;
-    inset-inline-end: 0;
-    inset-block-end: 0;
-    inset-inline-start: 0;
-    z-index: 9001
-  }
-
+:host([data-render-mode="shadow"]) [part='modal-backdrop'] {
+  --slds-c-backdrop-color-background: var(--slds-c-modalbase-backdrop-color-background);
+}
+
+:host([data-render-mode="shadow"]) [part='modal'] {
+  /* Map modal component hooks to single "shared" hooks from blueprint */
+  /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+
+  /* '--slds-c-modal-shadow' is used in body/footer */
+  --slds-c-modalbody-shadow: var(--slds-c-modal-shadow);
+  --slds-c-modalfooter-shadow: var(--slds-c-modal-shadow);
+
+  /* '--slds-c-modal-color-border' is used in header/footer */
+  --slds-c-modalheader-color-border: var(--slds-c-modal-color-border);
+  --slds-c-modalfooter-color-border: var(--slds-c-modal-color-border);
+
+  /* '--slds-c-modal-radius-border' is used in header/body/footer */
+  --slds-c-modalheader-radius-border: var(--slds-c-modal-radius-border);
+  --slds-c-modalbody-radius-border: var(--slds-c-modal-radius-border);
+  --slds-c-modalfooter-radius-border: var(--slds-c-modal-radius-border);
+
+  /* '--slds-c-modal-sizing-border' is used in header/footer */
+  --slds-c-modalheader-sizing-border: var(--slds-c-modal-sizing-border);
+  --slds-c-modalfooter-sizing-border: var(--slds-c-modal-sizing-border);
+
+  /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+}
+
+:host([data-render-mode="shadow"]) .slds-backdrop {
+  transition-duration: 0.4s;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  visibility: hidden;
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  background: var(
+    --slds-c-modalbase-backdrop-color-background,
+    var(--slds-g-color-neutral-10-opacity-50, rgba(8, 7, 7, 60%))
+  );
+  z-index: 9000;
+}
+
+:host([data-render-mode="shadow"]) .slds-backdrop_open {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity 0.4s linear;
+}
+
+:host([data-render-mode="shadow"]) .slds-modal {
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    transform 0.1s linear,
+    opacity 0.1s;
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  z-index: 9001;
+}
+
+:host([data-render-mode="shadow"]) .slds-modal__container {
+  position: relative;
+  transform: translate(0, 0);
+  transition:
+    transform 0.1s linear,
+    opacity 0.1s linear;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: 0 var(--slds-g-spacing-6);
+  height: 100%;
+  padding: var(--slds-g-spacing-8) 0 var(--slds-g-spacing-12) 0;
+  border-radius: var(--slds-g-spacing-1);
+}
+
+:host([data-render-mode="shadow"]) .slds-modal__close {
+  width: 2rem;
+  height: 2rem;
+  margin-inline-start: auto;
+  position: relative;
+  background-color: var(--slds-g-color-neutral-base-100);
+  border-radius: 0.25rem;
+  bottom: 0.5rem;
+  flex-shrink: 0;
+  justify-content: center;
+  display: inline-flex;
+}
+
+:host([data-render-mode="shadow"]) .slds-fade-in-open {
+  opacity: 1;
+  visibility: visible;
+  transition: opacity 0.1s linear;
+}
+
+:host([data-render-mode="shadow"]) .slds-fade-in-open .slds-modal__container-reset {
+  opacity: 1;
+  visibility: visible;
+  transform: translate(0, 0);
+}
+
+/* Sizes: Small, Medium, Large */
+
+@media (width >= 48em) {
   :host([data-render-mode="shadow"]) .slds-modal__container {
-    position: relative;
-    transform: translate(0, 0);
-    transition: transform 0.1s linear, opacity 0.1s linear;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    margin: 0 var(--slds-g-spacing-6);
-    height: 100%;
-    padding: var(--slds-g-spacing-8) 0 var(--slds-g-spacing-12) 0;
-    border-radius: var(--slds-g-spacing-1);
+    margin: 0 auto;
+    width: 50%;
+    max-width: 40rem;
+    min-width: 20rem;
   }
 
-  :host([data-render-mode="shadow"]) .slds-modal__close {
-    width: 2rem;
-    height: 2rem;
-    margin-inline-start: auto;
-    position: relative;
-    background-color: var(--slds-g-color-neutral-base-100);
-    border-radius: 0.25rem;
-    bottom: 0.5rem;
-    flex-shrink: 0;
-    justify-content: center;
-    display: inline-flex;
+  :host([data-render-mode="shadow"]) .slds-modal_small .slds-modal__container {
+    width: 60%;
+    max-width: 52.0625rem;
+    min-width: 40rem;
   }
 
-  :host([data-render-mode="shadow"]) .slds-fade-in-open {
-    opacity: 1;
-    visibility: visible;
-    transition: opacity 0.1s linear;
+  :host([data-render-mode="shadow"]) .slds-modal_medium .slds-modal__container {
+    width: 70%;
+    max-width: 75rem;
+    min-width: 40rem;
   }
 
-  :host([data-render-mode="shadow"]) .slds-fade-in-open .slds-modal__container-reset {
-    opacity: 1;
-    visibility: visible;
-    transform: translate(0, 0);
+  :host([data-render-mode="shadow"]) .slds-modal_large .slds-modal__container {
+    width: 90%;
+    max-width: none;
+    min-width: 40rem;
   }
+}
 
-  /* Sizes: Small, Medium, Large */
-
-  @media (width >= 48em) {
-    :host([data-render-mode="shadow"]) .slds-modal__container {
-      margin: 0 auto;
-      width: 50%;
-      max-width: 40rem;
-      min-width: 20rem;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-modal_small .slds-modal__container {
-      width: 60%;
-      max-width: 52.0625rem;
-      min-width: 40rem;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-modal_medium .slds-modal__container {
-      width: 70%;
-      max-width: 75rem;
-      min-width: 40rem;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-modal_large .slds-modal__container {
-      width: 90%;
-      max-width: none;
-      min-width: 40rem;
-    }
-  }
+/* Sizes: Full */
 
-  /* Sizes: Full */
+/* .slds-modal_full {} */
 
-  /* .slds-modal_full {} */
+/* Behaves like large size when not in a small viewport */
 
-  /* Behaves like large size when not in a small viewport */
-
-  @media (width >= 48em) {
-    :host([data-render-mode="shadow"]) .slds-modal_full .slds-modal__container {
-      width: 90%;
-      max-width: none;
-      min-width: 40rem;
-    }
+@media (width >= 48em) {
+  :host([data-render-mode="shadow"]) .slds-modal_full .slds-modal__container {
+    width: 90%;
+    max-width: none;
+    min-width: 40rem;
   }
+}
 
-  /* Original SLDS implementation was desktop-first. This is now mobile-first for <=480px  */
-
-  @media (width <= 30em) {
-    :host([data-render-mode="shadow"]) .slds-modal_full {
-      /* Account for iOS safe areas so our modal doesn't load underneath iOS elements. */
-      inset-block-start: env(safe-area-inset-top, 0);
+/* Original SLDS implementation was desktop-first. This is now mobile-first for <=480px  */
 
-      /* Override slds-modal's bottom: 0 so we can make the height dynamic. */
-      inset-block-end: auto;
+@media (width <= 30em) {
+  :host([data-render-mode="shadow"]) .slds-modal_full {
+    /* Account for iOS safe areas so our modal doesn't load underneath iOS elements. */
+    inset-block-start: env(safe-area-inset-top, 0);
 
-      /* Viewport may be dynamic, e.g., iOS Safari toolbar hiding behavior, so we use dvh. Safe areas may not be required here. */
-      /* stylelint-disable-next-line unit-no-unknown */
-      height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
-    }
+    /* Override slds-modal's bottom: 0 so we can make the height dynamic. */
+    inset-block-end: auto;
 
-    :host([data-render-mode="shadow"]) .slds-modal_full .slds-modal__container {
-      width: 100%;
-      max-width: none;
-      min-width: 0;
-      margin: 0;
-      padding: var(--slds-g-spacing-4) 0 0 0;
-      background-color: var(--slds-c-modalbase-color-background, var(--slds-g-color-surface-1));
-      border-radius: 0;
+    /* Viewport may be dynamic, e.g., iOS Safari toolbar hiding behavior, so we use dvh. Safe areas may not be required here. */
+    /* stylelint-disable-next-line unit-no-unknown */
+    height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
+  }
 
-      /* Establishes the main layout of the modal. Grid is defined by grid-template-areas
+  :host([data-render-mode="shadow"]) .slds-modal_full .slds-modal__container {
+    width: 100%;
+    max-width: none;
+    min-width: 0;
+    margin: 0;
+    padding: var(--slds-g-spacing-4) 0 0 0;
+    background-color: var(--slds-c-modalbase-color-background, var(--slds-g-color-surface-1));
+    border-radius: 0;
+
+    /* Establishes the main layout of the modal. Grid is defined by grid-template-areas
         which explicitly defines the grid and allows optional elements to be omitted like
         the header or footer. */
-      display: grid;
-      /* stylelint-disable-next-line unit-no-unknown */
-      height: 100dvh;
-      grid-template-columns: 1fr;
-      grid-template-rows: min-content min-content 1fr min-content;
-      grid-template-areas: "close" "header" "content" "footer";
-    }
-
-    :host([data-render-mode="shadow"]) .slds-modal_full .slds-modal__close {
-      grid-area: close;
-      inset-inline-end: var(--slds-g-spacing-4);
-
-      /**
+    display: grid;
+    /* stylelint-disable-next-line unit-no-unknown */
+    height: 100dvh;
+    grid-template-columns: 1fr;
+    grid-template-rows: min-content min-content 1fr min-content;
+    grid-template-areas: 'close' 'header' 'content' 'footer';
+  }
+
+  :host([data-render-mode="shadow"]) .slds-modal_full .slds-modal__close {
+    grid-area: close;
+    inset-inline-end: var(--slds-g-spacing-4);
+
+    /**
        * A few things going on here:
        * - We want to avoid a markup change for a single modifier so we reassign/override.
        * - Button icon doesn't have component level hooks (yet), so we don't include them here
@@ -199,18 +203,18 @@
        *   so the values of empty hooks default to initial values. In the case
        *   of background colors, the background will disappear (initial = transparent).
        */
-      --slds-c-button-color-background: var(--slds-g-color-surface-container-1, white);
-      --slds-c-button-color-background-active: var(--slds-g-color-surface-container-1, white);
+    --slds-c-button-color-background: var(--slds-g-color-surface-container-1, white);
+    --slds-c-button-color-background-active: var(--slds-g-color-surface-container-1, white);
 
-      color: var(--slds-g-color-on-surface-1);
-    }
+    color: var(--slds-g-color-on-surface-1);
+  }
 
-    :host([data-render-mode="shadow"]) .slds-modal_full .slds-modal__close:hover,:host([data-render-mode="shadow"]) 
-    .slds-modal_full .slds-modal__close:focus {
-      color: var(--slds-g-color-accent-3);
-    }
+  :host([data-render-mode="shadow"]) .slds-modal_full .slds-modal__close:hover,:host([data-render-mode="shadow"]) 
+  .slds-modal_full .slds-modal__close:focus {
+    color: var(--slds-g-color-accent-3);
+  }
 
-    /**
+  /**
      * INTERNAL USE ONLY - SUBJECT TO CHANGE AND REMOVAL
      *
      * SLDS Blueprint <> LBC Parity Patch
@@ -222,23 +226,23 @@
      * makes this not feasible. Not ideal, but this is the best solution for now.
      * Selectors are scoped to lightning-* to avoid any potential outside conflicts.
      */
-    :host([data-render-mode="shadow"]) .slds-modal_full lightning-button-icon+div,:host([data-render-mode="shadow"]) 
-    .slds-modal_full lightning-modal {
-      display: contents;
-    }
-  }
-
-  /* TODO W-12674349: remove after assistive text util is added */
-
-  :host([data-render-mode="shadow"]) .slds-assistive-text {
-    position: absolute !important;
-    margin: -1px !important;
-    border: 0 !important;
-    padding: 0 !important;
-    width: 1px !important;
-    height: 1px !important;
-    overflow: hidden !important;
-    clip: rect(0 0 0 0) !important;
-    text-transform: none !important;
-    white-space: nowrap !important;
+  :host([data-render-mode="shadow"]) .slds-modal_full lightning-button-icon + div,:host([data-render-mode="shadow"]) 
+  .slds-modal_full lightning-modal {
+    display: contents;
   }
+}
+
+/* TODO W-12674349: remove after assistive text util is added */
+
+:host([data-render-mode="shadow"]) .slds-assistive-text {
+  position: absolute !important;
+  margin: -1px !important;
+  border: 0 !important;
+  padding: 0 !important;
+  width: 1px !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  text-transform: none !important;
+  white-space: nowrap !important;
+}