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

package/src/lightning/primitiveInputToggle/input-toggle.slds.css

@@ -10,29 +10,35 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
 
 
-@supports (--styling-hooks: '') {
-
-    :host([data-render-mode="shadow"]) [part='checkbox-toggle'] {
+:host([data-render-mode="shadow"]) [part='checkbox-toggle'] {
       width: 100%;
       display: flex
     }
 
-    /* Container for text to show when checkbox is toggle off */
-    :host([data-render-mode="shadow"]) .slds-checkbox_off {
+
+/* Container for text to show when checkbox is toggle off */
+
+
+:host([data-render-mode="shadow"]) .slds-checkbox_off {
       display: block;
     }
 
-    /* Container for text to show when checkbox is toggle on */
-    :host([data-render-mode="shadow"]) .slds-checkbox_on {
+
+/* Container for text to show when checkbox is toggle on */
+
+
+:host([data-render-mode="shadow"]) .slds-checkbox_on {
       display: none;
     }
 
-    :host([data-render-mode="shadow"]) .slds-checkbox_faux_container {
+
+:host([data-render-mode="shadow"]) .slds-checkbox_faux_container {
         font-size: var(--slds-g-font-scale-neg-4);
         color: var(--slds-g-color-on-surface-2);
     }
 
-    :host([data-render-mode="shadow"]) [part='indicator']{
+
+:host([data-render-mode="shadow"]) [part='indicator']{
       display: block;
       position: relative;
       width: var(--slds-g-sizing-10);
@@ -47,7 +53,8 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       transition: background-color 0.2s cubic-bezier(0.75, 0, 0.08, 1);
     }
 
-    :host([data-render-mode="shadow"]) [part='indicator']:hover,:host([data-render-mode="shadow"]) 
+
+:host([data-render-mode="shadow"]) [part='indicator']:hover,:host([data-render-mode="shadow"]) 
     [part='indicator']:focus {
       --slds-c-checkbox-toggle-color-background: var(--slds-c-checkbox-toggle-color-background-hover, var(--slds-g-color-accent-container-2));
       --slds-c-checkbox-toggle-color-border: var(--slds-c-checkbox-toggle-color-border-hover);
@@ -55,7 +62,8 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       cursor: pointer;
     }
 
-    :host([data-render-mode="shadow"]) [part='indicator']::after {
+
+:host([data-render-mode="shadow"]) [part='indicator']::after {
       content: '';
       position: absolute;
       top: 1px;
@@ -66,7 +74,8 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       border-radius: var(--slds-c-checkbox-toggle-radius-border, 15rem);
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox'] {
+
+:host([data-render-mode="shadow"]) [part='checkbox'] {
       height: 1px;
       width: 1px;
       border: 0;
@@ -77,29 +86,35 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       position: absolute;
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox']:checked:focus + .slds-checkbox_faux_container > [part='indicator']  {
+
+:host([data-render-mode="shadow"]) [part='checkbox']:checked:focus + .slds-checkbox_faux_container > [part='indicator']  {
         --slds-c-checkbox-toggle-color-background: var(--slds-g-color-accent-3);
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container .slds-checkbox_off {
+
+:host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container .slds-checkbox_off {
         display: none;
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container .slds-checkbox_on {
+
+:host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container .slds-checkbox_on {
         display: block;
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container > [part='indicator'] {
+
+:host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container > [part='indicator'] {
         --slds-c-checkbox-toggle-color-border: var(--slds-g-color-border-accent-2);
         --slds-c-checkbox-toggle-color-background: var(--slds-g-color-accent-container-2);
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container > [part='indicator']:hover,:host([data-render-mode="shadow"]) 
+
+:host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container > [part='indicator']:hover,:host([data-render-mode="shadow"]) 
     [part='checkbox']:checked + .slds-checkbox_faux_container > [part='indicator']:focus {
         --slds-c-checkbox-toggle-color-background: var(--slds-g-color-accent-container-3);
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container > [part='indicator']::before {
+
+:host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container > [part='indicator']::before {
         content: '';
         position: absolute;
         top: 1px;
@@ -111,7 +126,8 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         transition: transform 0.2s cubic-bezier(0.75, 0, 0.08, 1);
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container > [part='indicator']::after {
+
+:host([data-render-mode="shadow"]) [part='checkbox']:checked + .slds-checkbox_faux_container > [part='indicator']::after {
         --slds-c-checkbox-toggle-switch-color-background: transparent;
         --slds-c-checkbox-toggle-radius-border: 0;
 
@@ -130,32 +146,40 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         transform: rotate(45deg);
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox'][disabled] + .slds-checkbox_faux_container > [part='indicator'] {
+
+:host([data-render-mode="shadow"]) [part='checkbox'][disabled] + .slds-checkbox_faux_container > [part='indicator'] {
         background-color: var(--slds-g-color-neutral-base-80, var(--slds-g-color-disabled-container-1));
         border-color: var(--slds-g-color-neutral-base-80, var(--slds-g-color-border-disabled-2));
         pointer-events: none;
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox'][disabled] + .slds-checkbox_faux_container > [part='indicator']::after {
+
+:host([data-render-mode="shadow"]) [part='checkbox'][disabled] + .slds-checkbox_faux_container > [part='indicator']::after {
         background-color: var(--slds-g-color-neutral-base-80, var(--slds-g-color-disabled-1));
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox'][disabled] + .slds-checkbox_faux_container > [part='indicator']:hover,:host([data-render-mode="shadow"]) 
+
+:host([data-render-mode="shadow"]) [part='checkbox'][disabled] + .slds-checkbox_faux_container > [part='indicator']:hover,:host([data-render-mode="shadow"]) 
     [part='checkbox'][disabled] + .slds-checkbox_faux_container > [part='indicator']:focus {
         background-color: var(--slds-g-color-disabled-1, var(--slds-g-color-disabled-2));
         cursor: default;
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox'][disabled]:checked + .slds-checkbox_faux_container > [part='indicator']::before {
+
+:host([data-render-mode="shadow"]) [part='checkbox'][disabled]:checked + .slds-checkbox_faux_container > [part='indicator']::before {
         background-color: var(--slds-g-color-disabled-1);
     }
 
-    :host([data-render-mode="shadow"]) [part='checkbox'][disabled]:checked + .slds-checkbox_faux_container > [part='indicator']::after {
+
+:host([data-render-mode="shadow"]) [part='checkbox'][disabled]:checked + .slds-checkbox_faux_container > [part='indicator']::after {
         background-color: transparent;
     }
 
-    /* ASSISTIVE TEXT */
-    :host([data-render-mode="shadow"]) .slds-assistive-text {
+
+/* ASSISTIVE TEXT */
+
+
+:host([data-render-mode="shadow"]) .slds-assistive-text {
       position: absolute !important;
       margin: -1px !important;
       border: 0 !important;
@@ -167,4 +191,3 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       text-transform: none !important;
       white-space: nowrap !important;
     }
-  }

package/src/lightning/primitiveInputToggle/primitiveInputToggle.js

@@ -1,4 +1,5 @@
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import {
     isNativeComponent,
     normalizeAriaAttribute,
@@ -7,11 +8,12 @@ import {
 import { VARIANT } from 'lightning/inputUtils';
 import labelRequired from '@salesforce/label/LightningControl.required';
 
+
 const i18n = {
     required: labelRequired,
 };
 
-export default class LightningPrimitiveInputToggle extends LightningElement {
+export default class LightningPrimitiveInputToggle extends LightningShadowBaseClass {
     _checked;
     _value = '';
     _ariaLabel;
@@ -156,6 +158,7 @@ export default class LightningPrimitiveInputToggle extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this._isNativeShadow = isNativeComponent(this);
     }
 

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

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

package/src/lightning/primitiveResizeHandler/primitiveResizeHandler.css

@@ -1,3 +1,14 @@
 :host {
     display: block;
 }
+
+/* fix styles for last resizer, needed for div mode */
+.slds-resizable__handle[data-is-last-col='true'] {
+    width: 0.75rem;
+    right: 0;
+}
+
+.slds-resizable__divider[data-is-last-col='true']::before,
+.slds-resizable__divider[data-is-last-col='true']::after {
+    right: 0;
+}

package/src/lightning/primitiveResizeHandler/primitiveResizeHandler.html

@@ -20,6 +20,7 @@
            tabindex="-1"
     >
     <span class="slds-resizable__handle"
+          data-is-last-col={isLastCol}
           onmousedown={onMouseDown}
           ontouchstart={onTouchStart}
           ontouchmove={onTouchMove}
@@ -27,6 +28,6 @@
           ontouchcancel={onTouchEnd}
           onclick={onClick}
           style="will-change: transform;">
-        <span class="slds-resizable__divider"></span>
+        <span class="slds-resizable__divider" data-is-last-col={isLastCol}></span>
     </span>
 </template>

package/src/lightning/primitiveResizeHandler/primitiveResizeHandler.js

@@ -14,6 +14,7 @@ export default class PrimitiveResizeHandler extends LightningElement {
     @api label = '';
     @api colIndex;
     @api internalTabIndex;
+    @api isLastCol;
     @api step = 10;
     @api value;
 

package/src/lightning/progressBar/progress-bar.slds.css

@@ -2,7 +2,6 @@
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
-@supports (--styling-hooks: '') {
   :host([data-render-mode="shadow"]) [part="progress-bar"] {
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     --_slds-c-progressbar-height: var(--slds-g-sizing-3); /* 0.5rem */
@@ -18,39 +17,39 @@
     position: relative;
 }
 
-:host([data-render-mode="shadow"]) .slds-progress-bar__value {
+  :host([data-render-mode="shadow"]) .slds-progress-bar__value {
   /* TODO: Need to update this var to `--slds-g-color-brand-base-50` once v2.22 is out */
   background: var(--slds-g-color-accent-2, #1ab9ff);
   display: block;
   height: 100%;
 }
 
-
-:host([data-render-mode="shadow"]) .slds-progress-bar_x-small {
+  :host([data-render-mode="shadow"]) .slds-progress-bar_x-small {
   height: calc(var(--_slds-c-progressbar-height) * 0.25); /* 0.125rem */
 }
 
-:host([data-render-mode="shadow"]) .slds-progress-bar_small {
+  :host([data-render-mode="shadow"]) .slds-progress-bar_small {
   height: calc(var(--_slds-c-progressbar-height) * 0.5); /* 0.25rem */
 }
 
-:host([data-render-mode="shadow"]) .slds-progress-bar_medium {
+  :host([data-render-mode="shadow"]) .slds-progress-bar_medium {
   height: var(--_slds-c-progressbar-height); /* 0.5rem */
 }
 
-:host([data-render-mode="shadow"]) .slds-progress-bar_large {
+  :host([data-render-mode="shadow"]) .slds-progress-bar_large {
   height: calc(var(--_slds-c-progressbar-height) * 1.5); /* 0.75rem */
 }
 
-:host([data-render-mode="shadow"]) .slds-progress-bar_circular {
+  :host([data-render-mode="shadow"]) .slds-progress-bar_circular {
   border-radius: var(--slds-g-radius-border-3);
 }
 
-:host([data-render-mode="shadow"]) .slds-progress-bar_circular .slds-progress-bar__value {
+  :host([data-render-mode="shadow"]) .slds-progress-bar_circular .slds-progress-bar__value {
   border-radius: var(--slds-g-radius-border-3);
 }
 
   /* TODO W-12674349: remove after name-value-list utils are added */
+
   :host([data-render-mode="shadow"]) .slds-assistive-text {
     position: absolute !important;
     margin: -1px !important;
@@ -63,4 +62,3 @@
     text-transform: none !important;
     white-space: nowrap !important;
   }
-}

package/src/lightning/progressRing/progress-ring.slds.css

@@ -1,5 +1,4 @@
 
-@supports (--styling-hooks: '') {
     /* progress-ring */
     :host([data-render-mode="shadow"]) .slds-progress-ring {
         position: relative;
@@ -9,11 +8,9 @@
         border-radius: 1.5rem;
         background: var(--slds-g-color-border-base-1, var(--slds-g-color-surface-container-3));
     }
-
     :host([data-render-mode="shadow"]) .slds-progress-ring .slds-icon_container {
         line-height: 0;
     }
-
     /* progress-ring_progress */
     :host([data-render-mode="shadow"]) .slds-progress-ring__progress {
         position: absolute;
@@ -23,16 +20,13 @@
         width: 100%;
         transform: scale(-1, 1) rotate(-90deg);
     }
-
     :host([data-render-mode="shadow"]) .slds-progress-ring__progress svg {
         width: 100%;
     }
-
     /* progress-ring_path */
     :host([data-render-mode="shadow"]) .slds-progress-ring__path {
         fill: var(--slds-g-color-success-1);
     }
-
     /* progress-ring_progress-head */
     :host([data-render-mode="shadow"]) .slds-progress-ring__progress-head {
         position: absolute;
@@ -42,7 +36,6 @@
         left: -0.1875rem;
         transform: scale(-1, 1) rotate(-90deg);
     }
-
     /* progress-ring_content */
     :host([data-render-mode="shadow"]) .slds-progress-ring__content {
         position: absolute;
@@ -60,65 +53,51 @@
         border-radius: 1.5rem;
         background: var(--slds-g-color-surface-container-1);
     }
-
     :host([data-render-mode="shadow"]) .slds-progress-ring__content .slds-icon {
         width: 0.75rem;
     }
-
     /* variant = warning */
     :host([data-render-mode="shadow"]) .slds-progress-ring_warning .slds-progress-ring__content {
         background: var(--slds-g-color-surface-container-1);
     }
-
     :host([data-render-mode="shadow"]) .slds-progress-ring_warning .slds-icon,:host([data-render-mode="shadow"]) 
     .slds-progress-ring_warning .slds-icon svg,:host([data-render-mode="shadow"]) 
     .slds-progress-ring_warning .slds-progress-ring__path {
         fill: var(--slds-g-color-warning-1);
     }
-
     /* variant = expired */
     :host([data-render-mode="shadow"]) .slds-progress-ring_expired .slds-progress-ring__content {
         background: var(--slds-g-color-surface-container-1);
     }
-
     :host([data-render-mode="shadow"]) .slds-progress-ring_expired .slds-icon,:host([data-render-mode="shadow"]) 
     .slds-progress-ring_expired .slds-icon svg,:host([data-render-mode="shadow"]) 
     .slds-progress-ring_expired .slds-progress-ring__path {
         fill: var(--slds-g-color-error-1);
     }
-
-
     /* variant = complete */
     :host([data-render-mode="shadow"]) .slds-progress-ring_complete .slds-icon,:host([data-render-mode="shadow"]) 
     .slds-progress-ring_complete .slds-icon svg {
         fill: var(--slds-g-color-on-success-1);
     }
-
     :host([data-render-mode="shadow"]) .slds-progress-ring_complete .slds-progress-ring__path {
         fill: var(--slds-g-color-success-2);
     }
-
     :host([data-render-mode="shadow"]) .slds-progress-ring_complete .slds-progress-ring__content {
         background: var(--slds-g-color-success-container-2);
     }
-
     /* size = large */
     :host([data-render-mode="shadow"]) .slds-progress-ring_large {
         height: 2rem;
         width: 2rem;
     }
-
     :host([data-render-mode="shadow"]) .slds-progress-ring_large .slds-icon {
         width: 1rem;
     }
-
     /* variant = active-step */
     :host([data-render-mode="shadow"]) .slds-progress-ring_active-step .slds-progress-ring__path {
         fill: var(--slds-g-color-accent-1);
     }
-
     /* additional classes */
-
     /* TODO W-12674349: remove after name-value-list utils are added */
     :host([data-render-mode="shadow"]) .slds-assistive-text {
         position: absolute !important;
@@ -132,5 +111,3 @@
         text-transform: none !important;
         white-space: nowrap !important;
     }
-
-}

package/src/lightning/progressStep/base.html

@@ -1,18 +1,17 @@
 <template>
-    <button class={computedButtonClass}
-            title={label}
+    <div class={computedBaseStepClass}
             data-label={label}
-            type="button"
             onmouseenter={handleMouseEnter}
             onmouseleave={handleMouseLeave}
             onfocus={handleFocus}
-            onblur={handleBlur}>
+            onblur={handleBlur}
+            tabindex="0">
         <template if:true={hasIcon}>
             <lightning-primitive-icon
                     icon-name={baseIconName}
-                    svg-class="slds-button__icon"
+                    svg-class="slds-icon slds-icon_xx-small"
                     variant="bare"></lightning-primitive-icon>
         </template>
         <span if:true={assistiveText} class="slds-assistive-text">{assistiveText}</span>
-    </button>
+    </div>
 </template>

package/src/lightning/progressStep/progressStep.js

@@ -1,8 +1,9 @@
 import labelCurrentStage from '@salesforce/label/LightningProgressIndicator.currentStage';
 import labelStageComplete from '@salesforce/label/LightningProgressIndicator.stageComplete';
 import labelNotStartedStage from '@salesforce/label/LightningProgressIndicator.stageNotStarted';
+import labelErrorStage from '@salesforce/label/LightningProgressIndicator.errorStage';
 import { LightningElement, api, track } from 'lwc';
-import { classSet } from 'lightning/utils';
+import { classSet, formatLabel } from 'lightning/utils';
 import { classListMutation } from 'lightning/utilsPrivate';
 import { Tooltip, TooltipType, Direction } from 'lightning/tooltipLibrary';
 import path from './path.html';
@@ -15,6 +16,7 @@ const i18n = {
     currentStage: labelCurrentStage,
     stageComplete: labelStageComplete,
     notStartedStage: labelNotStartedStage,
+    errorStage: labelErrorStage,
 };
 
 // Maps the status of the base progress-step to the icon it should render
@@ -59,6 +61,9 @@ export default class LightningProgressStep extends LightningElement {
         this.state.index = newIndex;
         this.state.active = newActive;
         this.initializeTooltip();
+        // Ensures correct role gets added to respective variants of progress-indicator
+        // Path - presentation, Base - listitem
+        this.setAttribute('role', this.isPath ? 'presentation' : 'listitem');
     }
     /**
      * Text to display as the name or tooltip for the step.
@@ -92,7 +97,6 @@ export default class LightningProgressStep extends LightningElement {
     }
 
     connectedCallback() {
-        this.setAttribute('role', 'listitem');
         this.dispatchEvent(
             new CustomEvent('privateregisterstep', {
                 bubbles: true,
@@ -122,11 +126,10 @@ export default class LightningProgressStep extends LightningElement {
         }
     }
 
-    get computedButtonClass() {
-        const classes = classSet('slds-button slds-progress__marker');
+    get computedBaseStepClass() {
+        const classes = classSet('slds-progress__marker');
         if (this.hasIcon) {
             classes
-                .add('slds-button_icon')
                 .add('slds-progress__marker')
                 .add('slds-progress__marker_icon');
         }
@@ -157,11 +160,13 @@ export default class LightningProgressStep extends LightningElement {
 
     get assistiveText() {
         if (this.state.status === 'completed') {
-            return `${this.label} - ${this.i18n.stageComplete}`;
+            return formatLabel(this.i18n.stageComplete, this.label);
         } else if (this.state.status === 'current') {
-            return `${this.label} - ${this.i18n.currentStage}`;
+            return formatLabel(this.i18n.currentStage, this.label);
         } else if (this.state.status === 'incomplete') {
-            return `${this.label} - ${this.i18n.notStartedStage}`;
+            return formatLabel(this.i18n.notStartedStage, this.label);
+        } else if (this.state.status === 'error') {
+            return formatLabel(this.i18n.errorStage, this.label);
         }
         return this.state.type === 'path' ? '' : this.label;
     }
@@ -177,7 +182,6 @@ export default class LightningProgressStep extends LightningElement {
     }
 
     handleMouseLeave() {
-        this.clearAriaDescribedBy();
         this.dispatchEvent(
             // eslint-disable-next-line lightning-global/no-custom-event-bubbling
             new CustomEvent('stepmouseleave', {
@@ -198,7 +202,6 @@ export default class LightningProgressStep extends LightningElement {
     }
 
     handleBlur() {
-        this.clearAriaDescribedBy();
         this.dispatchEvent(
             // eslint-disable-next-line lightning-global/no-custom-event-bubbling
             new CustomEvent('stepblur', {
@@ -208,15 +211,6 @@ export default class LightningProgressStep extends LightningElement {
         );
     }
 
-    clearAriaDescribedBy() {
-        if (this.state.type === 'base') {
-            const button = this.template.querySelector('button');
-            if (button) {
-                button.removeAttribute('aria-describedBy');
-            }
-        }
-    }
-
     focusPathLink() {
         const pathLink = this.template.querySelector('a.slds-path__link');
         if (pathLink) {
@@ -239,7 +233,7 @@ export default class LightningProgressStep extends LightningElement {
             // dom during initial rendering.
             this._tooltip = new Tooltip(this._privateLabel, {
                 root: this,
-                target: () => this.template.querySelector('button'),
+                target: () => this.template.querySelector('div'),
                 type: TooltipType.Toggle,
                 align: {
                     horizontal: Direction.Center,
@@ -249,11 +243,9 @@ export default class LightningProgressStep extends LightningElement {
                     horizontal: Direction.Center,
                     vertical: Direction.Top,
                 },
+                disableAriaDescribedBy: true,
             });
             this._tooltip.initialize();
-
-            // unset aria-describedby that would've been set by tooltipLibrary
-            this.clearAriaDescribedBy();
         }
     }
 }

package/src/lightning/prompt/__docs__/prompt.md

@@ -1,4 +1,4 @@
-The `lightning/prompt` module lets you create an prompt modal within your component. Use `LightningPrompt` on your components to ask the user to provide information before they continue.
+The `lightning/prompt` module lets you create a prompt modal within your component. Use `LightningPrompt` on your components to ask the user to provide information before they continue.
 
 Use `LightningPrompt.open()` instead of the native `window.prompt()` for a more consistent user experience. They have similar functions, but `LightningPrompt.open()` works in cross-origin iframes, where the `.prompt()` method is no longer supported in Chrome and Safari. Unlike `window.prompt()`, `LightningPrompt.open()` doesn't halt execution on the page, it returns a Promise. Use `async`/`await` or `.then()` for any code you want to execute after the prompt has closed.