lightning-base-components 1.21.1-alpha → 1.21.3-alpha

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

@@ -1,201 +1,230 @@
 
 /* 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: '') {
-    /* TODO: Swap with utility classes */
-    :host([data-render-mode="shadow"]) fieldset {
+
+/**
+ * sldsFormElementUtils.css and form-element.css have many similarities
+ * however, they are used for very different use cases, and this is why
+ * they both exist, separate of each other. the 2 files are not 1:1.
+ *
+ * form-element.css is used for inclusion by LBC engineers (internal)
+ * in many of our lightning-input components, and is written with
+ * part attributes in mind. Some unneeded form element blueprint sections
+ * are not included in form-element.css, but could be added as needed later
+ *
+ * sldsFormElementUtils.css is used by customers (external) to get the
+ * specific layout styles that are provided by the form element blueprint
+ * https://www.lightningdesignsystem.com/components/form-element/
+ * there are no part attribute rules in this file
+ * the main use case of this utility is LightningModal for styling
+ * form layout for Form Element variants: Stacked, Horizontal, Compound
+ * sldsFormElementUtils.css is imported by customers via LWC CSS files:
+ * @import 'lightning/sldsFormElementUtils';
+ *
+ * **NOTE:** If you are updating this file, also check sldsFormElementUtils.css
+ * for any needed updates to keep these files in sync
+ */
+
+/* TODO: Swap with utility classes */
+
+:host([data-render-mode="shadow"]) fieldset {
       border: 0;
       margin: 0;
       padding: 0;
     }
 
-    /* FORM ELEMENT: BASE */
-    :host([data-render-mode="shadow"]) .slds-form-element {
+/* FORM ELEMENT: BASE */
+
+:host([data-render-mode="shadow"]) .slds-form-element {
         position: relative;
         min-width: 0;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__label {
+:host([data-render-mode="shadow"]) .slds-form-element__label {
         overflow-wrap: break-word;
         word-wrap: break-word;
         hyphens: auto;
         display: inline-block;
-        color: var(--sds-g-color-neutral-base-30, #444444);
-        font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
-        padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
-        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
-        margin-block-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+        color: var(--slds-g-color-on-surface-2);
+        font-size: var(--slds-g-font-scale-neg-3);
+        padding-inline-end: var(--slds-g-spacing-2);
+        padding-block-start: var(--slds-g-spacing-1);
+        margin-block-end: calc(var(--slds-g-spacing-1) / 2);
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__label:empty {
+:host([data-render-mode="shadow"]) .slds-form-element__label:empty {
         margin: 0;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__control {
+:host([data-render-mode="shadow"]) .slds-form-element__control {
         clear: left; /* NOTE: Ideally we want left to be inline-start but browser support is not ready for that value. We need to figure out better RTL support */
         position: relative;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__icon {
+:host([data-render-mode="shadow"]) .slds-form-element__control .slds-radio {
+      display: block;
+    }
+
+:host([data-render-mode="shadow"]) .slds-form-element__icon {
         display: inline-block;
         position: relative;
-        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+        padding-block-start: var(--slds-g-spacing-1);
         vertical-align: top;
-        line-height: var(--sds-g-font-lineheight-1, 1);
+        line-height: var(--slds-g-font-lineheight-1);
         z-index: 1;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__icon .slds-button_icon {
+:host([data-render-mode="shadow"]) .slds-form-element__icon .slds-button_icon {
         position: relative;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__help,:host([data-render-mode="shadow"]) 
+:host([data-render-mode="shadow"]) .slds-form-element__help,:host([data-render-mode="shadow"]) 
     .slds-form-element__helper {
-        font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
-        margin-block-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+        font-size: var(--slds-g-font-scale-neg-3);
+        margin-block-start: calc(var(--slds-g-spacing-1) / 2);
         display: block;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element_edit .slds-form-element__static {
-        width: calc(100% - var(--sds-g-sizing-7, 1.5rem));
+:host([data-render-mode="shadow"]) .slds-form-element_edit .slds-form-element__static {
+        width: calc(100% - var(--slds-g-sizing-7));
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element_readonly {
+:host([data-render-mode="shadow"]) .slds-form-element_readonly {
         flex-basis: 0%;
-        border-bottom: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-90, #e5e5e5);
+        border-bottom: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
         margin-block-end: 0;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__control {
-        padding-block-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
-        padding-block-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+:host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__control {
+        padding-block-start: calc(var(--slds-g-spacing-1) / 2);
+        padding-block-end: calc(var(--slds-g-spacing-1) / 2);
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__label {
+:host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__label {
         margin-block-end: 0;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__legend {
-        font-weight: var(--sds-g-font-weight-7, 700);
+:host([data-render-mode="shadow"]) .slds-form-element__legend {
+        font-weight: var(--slds-g-font-weight-7);
         float: left;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__addon {
+:host([data-render-mode="shadow"]) .slds-form-element__addon {
         display: inline-block;
         margin-block-start: 0;
         margin-block-end: 0;
-        margin-inline-start: var(--sds-g-spacing-2, 0.5rem);
-        margin-inline-end: var(--sds-g-spacing-2, 0.5rem);
+        margin-inline-start: var(--slds-g-spacing-2);
+        margin-inline-end: var(--slds-g-spacing-2);
         align-self: center;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__static {
+:host([data-render-mode="shadow"]) .slds-form-element__static {
         overflow-wrap: break-word;
         word-wrap: break-word;
         word-break: break-word;
         display: inline-block;
-        font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
-        font-weight: var(--sds-g-font-weight-4, 400);
-        color: var(--sds-g-color-neutral-base-10, #181818);
+        font-size: var(--slds-g-font-scale-neg-1);
+        font-weight: var(--slds-g-font-weight-4);
+        color: var(--slds-g-color-neutral-base-10);
         width: 100%;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__static.slds-text-longform *:last-child {
+:host([data-render-mode="shadow"]) .slds-form-element__static.slds-text-longform *:last-child {
         margin-block-end: 0;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__static:empty {
-        min-height: calc(var(--sds-g-sizing-6, 1.25rem) + 1px);
+:host([data-render-mode="shadow"]) .slds-form-element__static:empty {
+        min-height: calc(var(--slds-g-sizing-6) + 1px);
         vertical-align: bottom;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__static--edit {
-        width: calc(100% - var(--sds-g-sizing-7, 1.5rem));
+:host([data-render-mode="shadow"]) .slds-form-element__static--edit {
+        width: calc(100% - var(--slds-g-sizing-7));
     }
 
-    :host([data-render-mode="shadow"]) .slds-required {
-        color: var(--sds-g-color-error-base-50, #ea001e);
+:host([data-render-mode="shadow"]) .slds-required {
+        color: var(--slds-g-color-error-base-50);
         margin-block-start: 0;
         margin-block-end: 0;
-        margin-inline-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
-        margin-inline-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+        margin-inline-start: calc(var(--slds-g-spacing-1) / 2);
+        margin-inline-end: calc(var(--slds-g-spacing-1) / 2);
     }
 
-    :host([data-render-mode="shadow"]) .slds-has-error .slds-form-element__help {
-        color: var(--sds-g-color-error-base-50, #ea001e);
+:host([data-render-mode="shadow"]) .slds-has-error .slds-form-element__help {
+        color: var(--slds-g-color-error-1);
     }
 
-    :host([data-render-mode="shadow"][invalid]) .slds-form-element__help {
-        color: var(--sds-g-color-error-base-50, #ea001e);
+:host([data-render-mode="shadow"][invalid]) .slds-form-element__help {
+        color: var(--slds-g-color-error-1);
     }
 
-    /* --------------------------------------- */
+/* --------------------------------------- */
 
-    /* FORM ELEMENT: STACKED */
+/* FORM ELEMENT: STACKED */
 
-    :host([data-render-mode="shadow"][variant='label-stacked']) {
+:host([data-render-mode="shadow"][variant='label-stacked']) {
         display: block;
     }
 
-    /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
+/* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
 
-    /* :host([variant='label-stacked']):not(.slds-form-element_readonly) {
-        margin-block-end: var(--sds-g-spacing-2);
+/* :host([variant='label-stacked']):not(.slds-form-element_readonly) {
+        margin-block-end: var(--slds-g-spacing-2);
     }
 
     :host([variant='label-stacked']):not(.slds-is-editing) {
-        padding: 0 var(--sds-g-spacing-1);
+        padding: 0 var(--slds-g-spacing-1);
     } */
 
-    /* :host([variant='label-stacked']):not([class*="slds-size"]) {
+/* :host([variant='label-stacked']):not([class*="slds-size"]) {
           width: 100%;
           flex-basis: 100%;
     } */
 
-    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element {
+:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element {
         padding: 0;
         margin-block-end: 0;
     }
 
-    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
+:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
         border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 
-    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
+:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
         width: 100%;
         flex-basis: 100%;
         clear: left;
     }
 
-    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__icon {
+:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__icon {
         float: none;
-        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+        padding-block-start: var(--slds-g-spacing-1);
     }
 
-    /* --------------------------------------- */
+/* --------------------------------------- */
 
-    /* FORM ELEMENT: INLINE */
+/* FORM ELEMENT: INLINE */
 
-    :host([data-render-mode="shadow"][variant='label-inline']) {
+:host([data-render-mode="shadow"][variant='label-inline']) {
         display: block;
     }
 
-    /*
+/*
     we have to combine with slds class here to avoid duplication
     of this rule in child elements who import this stylesheet
     in lighting-input this slds class is synonymous with the variant
     */
 
-    :host([data-render-mode="shadow"][variant='label-inline'].slds-form-element_horizontal) {
-        padding: var(--sds-g-spacing-1, 0.25rem);
-        margin-block-end: var(--sds-g-spacing-2, 0.5rem);
+:host([data-render-mode="shadow"][variant='label-inline'].slds-form-element_horizontal) {
+        padding: var(--slds-g-spacing-1);
+        margin-block-end: var(--slds-g-spacing-2);
     }
 
-    /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
+/* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
 
-    /* :host([variant='label-inline']):not(.slds-form-element_readonly) {
-        margin-block-end: var(--sds-g-spacing-2);
+/* :host([variant='label-inline']):not(.slds-form-element_readonly) {
+        margin-block-end: var(--slds-g-spacing-2);
     }
 
     :host([variant='label-inline']):not([class*="slds-size"]) {
@@ -204,18 +233,17 @@
     }
 
     :host([variant='label-inline']:not(.slds-is-editing)) {
-        padding: var(--sds-g-spacing-1);
+        padding: var(--slds-g-spacing-1);
     } */
 
-    :host([data-render-mode="shadow"][variant='label-inline']).slds-is-edited {
-        padding-block-start: var(--sds-g-sizing-6, 1.25rem)
+:host([data-render-mode="shadow"][variant='label-inline']).slds-is-edited {
+        padding-block-start: var(--slds-g-sizing-6)
     }
 
-    @media (width >= 48em) {
+@media (width >= 48em) {
         :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
-          float: left;
-          max-width: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Removing icon width for when the help-text icon is present */
-          flex-basis: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Some form element controls are set to display:flex */
+          max-width: calc(33% - var(--slds-g-sizing-6)); /* Removing icon width for when the help-text icon is present */
+          flex-basis: calc(33% - var(--slds-g-sizing-6)); /* Some form element controls are set to display:flex */
           flex-grow: 1; /* For IE and Safari which didn't auto expand to the available space */
           margin-block-end: 0;
           position: relative;
@@ -254,35 +282,34 @@
         }
     }
 
-    /* --------------------------------------- */
+/* --------------------------------------- */
 
-    /* FORM ELEMENT: COMPOUND */
+/* FORM ELEMENT: COMPOUND */
 
-    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row {
+:host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row {
       display: flex;
-      margin-bottom: var(--sds-g-spacing-1, 0.25rem);
-      margin-left: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
-      margin-right: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
+      margin-bottom: var(--slds-g-spacing-1);
+      margin-left: calc(var(--slds-g-spacing-1) * -1);
+      margin-right: calc(var(--slds-g-spacing-1) * -1);
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row .slds-form-element__label {
+:host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row .slds-form-element__label {
       padding-top: 0;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element {
-      padding-left: var(--sds-g-spacing-1, 0.25rem);
-      padding-right: var(--sds-g-spacing-1, 0.25rem);
+:host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element {
+      padding-left: var(--slds-g-spacing-1);
+      padding-right: var(--slds-g-spacing-1);
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
+:host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
       align-items: flex-end;
     }
 
-    /* --------------------------------------- */
+/* --------------------------------------- */
 
-    /* FORM ELEMENT: HIDDEN */
+/* FORM ELEMENT: HIDDEN */
 
-    :host([data-render-mode="shadow"][variant='label-hidden']) .slds-form-element__label {
+:host([data-render-mode="shadow"][variant='label-hidden']) .slds-form-element__label {
       display: none
   }
-}

package/src/lightning/timepicker/timepicker.css

@@ -1,3 +1 @@
-/* @import 'lightning/sldsCommon';
-@import './timepicker.slds.css';
-@import './form-element.slds.css'; */
+@import './timepicker.lbc.native.css';

package/src/lightning/timepicker/timepicker.html

@@ -23,7 +23,7 @@
             items={items}
             input-text={displayValue}
             input-icon-name="utility:clock"
-            input-label={ariaLabel}
+            input-label={comboboxLabel}
             input-controls-element={ariaControlsElement}
             input-labelled-by-element={ariaLabelledByElement}
             dropdown-alignment="auto"

package/src/lightning/timepicker/timepicker.js

@@ -4,7 +4,8 @@ import labelRangeOverflow from '@salesforce/label/LightningDateTimePicker.rangeO
 import labelRangeUnderflow from '@salesforce/label/LightningDateTimePicker.rangeUnderflow';
 import labelRequired from '@salesforce/label/LightningControl.required';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { getTimeToHighlight } from './utils';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
@@ -22,6 +23,8 @@ import {
     normalizeString,
     computeAriaInvalid,
     reflectAttribute,
+    isNativeComponent,
+    isCSR,
 } from 'lightning/utilsPrivate';
 import { normalizeVariant, VARIANT } from 'lightning/inputUtils';
 
@@ -40,7 +43,7 @@ const TIME_STYLE = {
     LONG: 'long',
 };
 
-export default class LightningTimePicker extends LightningElement {
+export default class LightningTimePicker extends LightningShadowBaseClass {
     static delegatesFocus = true;
 
     @track _disabled = false;
@@ -276,6 +279,8 @@ export default class LightningTimePicker extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
+        this._isNativeShadow = isNativeComponent(this);
         this.connected = true;
     }
 
@@ -305,6 +310,16 @@ export default class LightningTimePicker extends LightningElement {
         this.synchronizeA11y();
     }
 
+    get comboboxLabel() {
+        // @W-12765711 Set the combobox aria label when no ariaLabel provided in a cross root scenario
+        // Required as label 'for' relationship will not work
+        return !this.ariaLabel &&
+            !this.ariaLabelledByElement &&
+            this._isNativeShadow
+            ? this.label
+            : this.ariaLabel;
+    }
+
     get displayValue() {
         return this._displayValue;
     }
@@ -505,9 +520,10 @@ export default class LightningTimePicker extends LightningElement {
     }
 
     get computedAriaInvalid() {
-        const isAriaInvalid =
-            this.template.host.getAttribute('data-aria-invalid') ||
-            this._errorMessage;
+        const dataAriaInvalid = isCSR
+            ? this.template.host.getAttribute('data-aria-invalid')
+            : null;
+        const isAriaInvalid = dataAriaInvalid || this._errorMessage;
         return computeAriaInvalid(isAriaInvalid, this.value);
     }
 

package/src/lightning/timepicker/timepicker.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/timepicker/timepicker.lbc.native.css

@@ -0,0 +1,3 @@
+@import 'lightning/sldsCommon';
+@import './timepicker.slds.css';
+@import './form-element.slds.css';

package/src/lightning/timepicker/timepicker.slds.css

@@ -1,8 +1,9 @@
 
 /* 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: '') {
+
   /* ASSISTIVE TEXT */
+
   :host([data-render-mode="shadow"]) .slds-assistive-text {
     position: absolute !important;
     margin: -1px !important;
@@ -15,4 +16,3 @@
     text-transform: none !important;
     white-space: nowrap !important;
   }
-}

package/src/lightning/toast/__docs__/toast.md

@@ -1,12 +1,10 @@
-The `LightningToast` component displays a toast notification with an icon, label, message, and links. Use a toast to convey small pieces of information to the user, providing feedback and confirmation after the user takes an action. Toasts can disappear after a certain duration or until the user clicks the close button.
+The `lightning/toast` module displays a toast notification with an icon, label, message, and links. Use a toast notification to convey small pieces of information to the user, such as providing feedback and confirmation after the user takes an action. You can set toast notifications to disappear after a certain duration or until the user clicks the close button.
 
 ### Show a Toast
 
-To show a toast, call the static function `show(config, comp)` from `lightning/toast` and provide a toast configuration and a reference of the local component as parameters.
-The function also creates a single page-level toast container if one does not exist.
+To show a toast notification, call the function `show(config, comp)` from `lightning/toast` and provide a toast config and a reference to the local component as parameters. The function creates a single page-level toast container if one does not exist. See the `config` attributes section below for a list of properties to include in the config.
 
 ```javascript
-// c/myComponent.js
 import { LightningElement } from 'lwc';
 import Toast from 'lightning/toast';
 
@@ -40,32 +38,39 @@ export default class MyComponent extends LightningElement {
     }
 }
 ```
+
 In this example, the toast configuration uses two ways to specify links (see note below). The toast displays a sticky mode informational toast message with a `label` string as the toast title and a `message` string as the toast message.  The `{0}`, `{1}`, `{salesforceLink}`, and `{slackLink}` placeholders are replaced with their `url` specified links.
 
-A page-level [`LightningToastContainer` component](/docs/component-library/bundle/lightning-toast-container/documentation) manages and displays the toast component.
+A page-level [`ToastContainer` component](/docs/component-library/bundle/lightning-toast-container/documentation) manages and displays the toast component.
 
-**_NOTE:_** `label` can have index-based or name-based link placeholders. In the case of index-based link placeholders, `labelLinks` must be defined as an array, otherwise, `labelLinks` must be defined as a map. Same applies to `message`.
+**_NOTE:_** `label` can have index-based or name-based link placeholders. In the case of index-based link placeholders, `labelLinks` must be defined as an array. Otherwise, `labelLinks` must be defined as individual objects. The same rules apply to `message`.
 
 ### Component Styling
 
-`LightningToast` implements the [toast](https://www.lightningdesignsystem.com/components/toast/) blueprint in the Salesforce Lightning Design System (SLDS). [SLDS styling hooks](https://www.lightningdesignsystem.com/components/toast/#Styling-Hooks-Overview) aren't supported with programmatic creation of toasts via `Toast.show()`.
+`Toast` implements the [toast](https://www.lightningdesignsystem.com/components/toast/) blueprint in the Salesforce Lightning Design System (SLDS). [SLDS styling hooks](https://www.lightningdesignsystem.com/components/toast/#Styling-Hooks-Overview) aren't supported with programmatic creation of toasts via `Toast.show()`.
+
+#### Small screen / Mobile environment
+
+`Toast` is responsive to your screen resolution. For smaller screens or mobile environments, the toast's **icon** and **description** (text stored in `message`, and `messageLinks`, for example) is **not shown** due to the screen's width limitation (see [Toast blueprint screen variants](https://www.lightningdesignsystem.com/guidelines/messaging/components/toasts/#flavor-variants-screen).
+
+On small screens and mobile environments, we recommend that you provide links in the toast's title using `label` and `labelLinks` in order to have links visible and interactive.
 
 ### `config` attributes
 
  Attribute | Description  |
 |----------| ------------ |
-| `label` (required) | Title of the toast, it can contain placeholders in the form of `{0} ... {N}` (index-based) or `{name} ... {someOtherName}` (name-based). The placeholders are replaced with the links on `labelLinks`. |
-| `labelLinks` | [{url, label}], which replaces the `{0} ... {N}` indexed placeholders in `label` or `{ name: {url, label} }`, which replaces the `{name} ... {someOtherName}` named placeholders in `label`. |
-| `message` | Description of the toast, it can contain placeholders in the form of `{0} ... {N}` (index-based) or `{name} ... {someOtherName}` (name-based). The placeholders are replaced with the links on `messageLinks`. |
-| `messageLinks` | [{url, label}], which replaces the `{0} ... {N}` indexed placeholders in `message` or `{ name: {url, label} }`, which replaces the `{name} ... {someOtherName}` named placeholders in `message`. |
+| `label` (required) | Title of the toast. `label` can contain link placeholders in the form of `{0} ... {N}` (index-based) or `{name} ... {someOtherName}` (name-based). The placeholders are replaced with the links in `labelLinks`. |
+| `labelLinks` | `[{url, label}]`, which replaces the `{0} ... {N}` index-based placeholders in `label` or `{ name: {url, label} }`, which replaces the `{name} ... {someOtherName}` named placeholders in `label`. |
+| `message` | Description of the toast. `message` can contain link placeholders in the form of `{0} ... {N}` (index-based) or `{name} ... {someOtherName}` (name-based). The placeholders are replaced with the links on `messageLinks`. |
+| `messageLinks` | `[{url, label}]`, which replaces the `{0} ... {N}` index-based placeholders in `message` or `{ name: {url, label} }`, which replaces the `{name} ... {someOtherName}` named placeholders in `message`. |
 | `variant` | Appearance of the toast. |
 | `mode` | Persistence of the toast. |
 
-**_NOTE:_**  When `labelLinks` (or `messageLinks`) is passed to the `config` parameter, the content of `label` (or `message`) is rendered using [`lightning-formatted-rich-text`](https://developer.salesforce.com/docs/component-library/bundle/lightning-formatted-rich-text/documentation). consult the documentation for expected result when link presents.
+**_NOTE:_**  When `labelLinks` (or `messageLinks`) is passed to the `config` parameter, the content of `label` (or `message`) is rendered using [`lightning-formatted-rich-text`](https://developer.salesforce.com/docs/component-library/bundle/lightning-formatted-rich-text/documentation). Consult the documentation for expected styling when rendering a link.
 
 #### `variant` attribute
 
-The `variant` attribute sets the component's color and icon. It supports these values.
+The `variant` attribute sets the component's color and icon.
 
 | Value | Color | Icon |
 | --- | --- | --- |
@@ -76,11 +81,10 @@ The `variant` attribute sets the component's color and icon. It supports these v
 
 #### `mode` attribute
 
-The `mode` attribute sets the component's dismissal. It supports these values.
--   `dismissible` - The component automatically disappears after a certain duration. The user can dismiss it early by clicking the close button. The time duration for `dismissible` is 4.8 seconds, or 9.6 seconds if the toast contains a link.
+The `mode` attribute sets the component's dismissal.
+-   `dismissible` - The component automatically disappears after a certain duration. The user can dismiss it early by clicking the close button. The time duration for `dismissible` is 4.8 seconds when the toast doesn't contain a link or 9.6 seconds if the toast contains a link.
 -   `sticky` - The component stays on screen until the user clicks the close button.
 
-##### Default Mode
 If a `mode` value isn't provided, the default `mode` is determined by the value of `variant` and whether the `toast` has a link or links present in `label` or `message`.
 
 | Variant | Has link? | Default Mode |
@@ -93,9 +97,3 @@ If a `mode` value isn't provided, the default `mode` is determined by the value
 | `warning` | No | `sticky`|
 | `error` | Yes | `sticky`|
 | `error` | No | `sticky`|
-
-#### Small screen / Mobile environment
-
-`LightningToast` is responsive to your screen resolution. For smaller screens or mobile environments, the toast's **icon** and **description** (i.e. text stored in `message`, and `messageLinks`) is **not shown** due to the screen's width limitation (see [Toast blueprint screen variants](https://www.lightningdesignsystem.com/guidelines/messaging/components/toasts/#flavor-variants-screen).
-
-On small screens and mobile environments, we recommend that you provide links in the toast's title (ie `label` and `labelLinks`) in order to have links visible and interactive.