lightning-base-components 1.17.3-alpha → 1.17.5-alpha

package/src/lightning/select/select.html

@@ -1,5 +1,5 @@
 <template>
-    <label class={computedLabelClass} for="select">
+    <label class={computedLabelClass} for="select" part="select-label">
         <template if:true={required}>
             <abbr class="slds-required" title={i18n.required}>*</abbr>
         </template>
@@ -23,7 +23,7 @@
                 accesskey={accessKey}
                 size={size}
                 aria-invalid={computedAriaInvalid}
-            >
+                part="select">
                 <template for:each={options} for:item="option">
                     <template if:true={option.disabled}>
                         <option disabled key={option.value} value={option.value}>{option.label}</option>

package/src/lightning/select/select.js

@@ -7,6 +7,7 @@ import {
     getRealDOMId,
     normalizeBoolean,
     synchronizeAttrs,
+    reflectAttribute,
 } from 'lightning/utilsPrivate';
 import {
     FieldConstraintApi,
@@ -122,6 +123,7 @@ export default class LightningSelect extends LightningElement {
     set variant(value) {
         this._variant = normalizeVariant(value);
         this.updateClassList();
+        reflectAttribute(this, 'variant', this._variant);
     }
 
     /**
@@ -136,6 +138,7 @@ export default class LightningSelect extends LightningElement {
 
     set multiple(value) {
         this._multiple = normalizeBoolean(value);
+        reflectAttribute(this, 'multiple', this._multiple);
     }
 
     /**

package/src/lightning/select/select.slds.css

@@ -0,0 +1,398 @@
+/* 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~='help-text'] {
+    --slds-c-buttonicon-color-background: var(--slds-c-helptext-color-background);
+    --slds-c-buttonicon-color-background-hover: var(--slds-c-helptext-color-background-hover);
+    --slds-c-buttonicon-color-background-focus: var(--slds-c-helptext-color-background-focus);
+    --slds-c-buttonicon-color-background-active: var(--slds-c-helptext-color-background-active);
+    --slds-c-buttonicon-color-foreground: var(--slds-c-helptext-color-foreground);
+    --slds-c-buttonicon-color-foreground-hover: var(--slds-c-helptext-color-foreground-hover);
+    --slds-c-buttonicon-color-foreground-focus: var(--slds-c-helptext-color-foreground-focus);
+    --slds-c-buttonicon-color-foreground-active: var(--slds-c-helptext-color-foreground-active);
+    --slds-c-buttonicon-color-border: var(--slds-c-helptext-color-border, transparent);
+    --slds-c-buttonicon-color-border-hover: var(--slds-c-helptext-color-border-hover, transparent);
+    --slds-c-buttonicon-color-border-focus: var(--slds-c-helptext-color-border-focus, transparent);
+    --slds-c-buttonicon-color-border-active: var(--slds-c-helptext-color-border-active, transparent);
+    --slds-c-buttonicon-spacing-block: var(--slds-c-helptext-spacing-block, 0);
+    --slds-c-buttonicon-spacing-inline: var(--slds-c-helptext-spacing-inline, 0);
+
+    /**
+     * The extra wrapper div creates a new formatting context which messes up
+     * our consistent height and vertical alignment. We don't want this element
+     * to inherit any styling so we pass through to the contents. This element
+     * is for setting Styling Hooks only.
+     */
+    display: contents;
+  }
+}
+
+/* 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: '') {
+    /* 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 {
+        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);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__label:empty {
+        margin: 0;
+    }
+
+    :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__control .slds-radio,:host([data-render-mode="shadow"]) 
+    .slds-form-element__control .slds-checkbox {
+        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);
+        vertical-align: top;
+        line-height: var(--sds-g-font-lineheight-1, 1);
+        z-index: 1;
+    }
+
+    :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"]) 
+    .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);
+        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_readonly {
+        flex-basis: 0%;
+        border-bottom: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-90, #e5e5e5);
+        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__label {
+        margin-block-end: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__legend {
+        font-weight: var(--sds-g-font-weight-7, 700);
+        float: left;
+    }
+
+    :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);
+        align-self: center;
+    }
+
+    :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);
+        width: 100%;
+    }
+
+    :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);
+        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-required {
+        color: var(--sds-g-color-error-base-50, #ea001e);
+        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);
+    }
+
+    :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"][invalid]) .slds-form-element__help {
+        color: var(--sds-g-color-error-base-50, #ea001e);
+    }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: STACKED */
+
+    :host([data-render-mode="shadow"][variant~='label-stacked']) {
+        display: block;
+    }
+
+    :host([data-render-mode="shadow"][variant~='label-stacked']):not(:host([data-render-mode="shadow"]) .slds-form-element_readonly) {
+        margin-block-end: var(--sds-g-spacing-2, 0.5rem);
+    }
+  
+    :host([data-render-mode="shadow"][variant~='label-stacked']):not(:host([data-render-mode="shadow"]) .slds-is-editing) {
+        padding: 0 var(--sds-g-spacing-1, 0.25rem);
+    }
+  
+    :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']):not([class*="slds-size"]) {
+          width: 100%;
+          flex-basis: 100%;
+    }
+  
+    :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 {
+        width: 100%;
+        flex-basis: 100%;
+        clear: left;
+    }
+
+    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__icon {
+        float: none;
+        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+    }
+
+    /* --------------------------------------- */
+    
+    /* FORM ELEMENT: INLINE */
+
+    :host([data-render-mode="shadow"][variant~='label-inline']) {
+        display: block;
+    }
+  
+    :host([data-render-mode="shadow"][variant~='label-inline']):not(:host([data-render-mode="shadow"]) .slds-form-element_readonly) {
+        margin-block-end: var(--sds-g-spacing-2, 0.5rem);
+    }
+  
+    :host([data-render-mode="shadow"][variant~='label-inline']):not([class*="slds-size"]) {
+        width: 100%;
+        flex-basis: 100%;
+    }
+  
+    :host([data-render-mode="shadow"][variant~='label-inline']):not(:host([data-render-mode="shadow"]) .slds-is-editing) {
+        padding: var(--sds-g-spacing-1, 0.25rem);   
+    }
+  
+    :host([data-render-mode="shadow"][variant~='label-inline']).slds-is-edited {
+        padding-block-start: var(--sds-g-sizing-6, 1.25rem)
+    }
+
+    @media (min-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 */
+          flex-grow: 1; /* For IE and Safari which didn't auto expand to the available space */
+          margin-block-end: 0;
+          position: relative;
+          z-index: 1;
+        }
+  
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control {
+          padding-inline-start: 33%;
+          clear: none; /* Reset clear: left when switching to horizontal form layout */
+        }
+  
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control .slds-form-element__control {
+          padding-inline-start: 0; /* Remove left padding on nested form controls, due to issues related to lightning-form components */
+        }
+      
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list__column .slds-form-element__label {
+            width: auto;
+            max-width: 100%;
+            -ms-flex-preferred-size: auto;
+            flex-basis: auto;
+            float: none;
+            position: relative;
+            padding-inline-start: 0;
+            margin-block-end: 0;
+        }
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list {
+            clear: none;
+        }
+    }
+}
+
+@supports (--styling-hooks: '') {
+    /* SELECT */
+    :host([data-render-mode="shadow"]) [part~='select'] {
+      height: calc(var(--slds-c-select-input-sizing-height, 1.875rem) + (var(--sds-g-sizing-border-1, 1px) * 2));
+      width: 100%;
+      border: var(--sds-g-sizing-border-1, 1px) solid var(--slds-c-select-color-border, var(--sds-g-color-neutral-base-80, #c9c9c9));
+      border-radius: var(--slds-c-select-radius-border, var(--sds-g-radius-border-2, 0.25rem));
+      background-color: var(--slds-c-select-color-background,
+      var(--sds-g-color-neutral-base-100, #ffffff));
+      color: var(--slds-c-select-text-color, currentColor, var(--sds-g-color-neutral-base-10, #181818));
+      box-shadow: var(--slds-c-select-shadow);
+      transition: border 0.1s linear, background-color 0.1s linear;
+    }
+
+    :host([data-render-mode="shadow"]) [part~='select'][required] {
+      box-shadow: none; /* @legacy: This is ported over from SLDS but not clear why this design decision is made.  */
+    }
+
+    :host([data-render-mode="shadow"]) [part~='select']:focus,:host([data-render-mode="shadow"]) 
+    [part~='select']:active {
+      outline: 0;
+      border-color: var(--slds-c-select-color-border-focus, var(--sds-g-color-brand-base-60, #1b96ff));
+      background-color: var(--slds-c-select-color-background-focus, var(--sds-g-color-neutral-base-100, #ffffff));
+      color: var(--slds-c-select-text-color-focus);
+      box-shadow: var(--slds-c-select-shadow-focus, 0 0 3px var(--sds-g-color-brand-base-50, #0176d3));
+    }
+
+    :host([data-render-mode="shadow"]) [part~='select'][disabled] {
+      background-color: var(--sds-g-color-neutral-base-95, #f3f3f3);
+      border-color: var(--sds-g-color-neutral-base-80, #c9c9c9);
+      color: var(--sds-g-color-neutral-base-50, #747474);
+      cursor: not-allowed;
+      user-select: none;
+      opacity: 1;
+    }
+
+    :host([data-render-mode="shadow"]) [part~='select'][disabled]:focus,:host([data-render-mode="shadow"])  
+    [part~='select'][disabled]:active {
+      box-shadow: none;
+    }
+
+    :host([data-render-mode="shadow"]) [part~='select'][size],:host([data-render-mode="shadow"])  
+    [part~='select'][multiple] {
+      min-height: calc(var(--slds-c-select-input-sizing-height) + (var(--sds-g-sizing-border-1, 1px) * 2));
+      height: inherit;
+    }
+
+    :host([data-render-mode="shadow"]) [part~='select'][size] option,:host([data-render-mode="shadow"])  
+    [part~='select'][multiple] option {
+      padding: var(--sds-g-spacing-2, 0.5rem);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-select_container {
+      position: relative;
+      color: var(--slds-c-select-container-color);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-select_container [part~="select"] {
+      /* stylelint-disable property-no-vendor-prefix */
+      -moz-appearance: none;
+      -webkit-appearance: none;
+      /* stylelint-enable property-no-vendor-prefix */
+      padding: 0 var(--sds-g-spacing-5, 1.5rem) 0 var(--sds-g-spacing-2, 0.5rem);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-select_container [part~="select"]::-ms-expand {
+      display: none;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-select_container::before,:host([data-render-mode="shadow"])  
+    .slds-select_container::after {
+      position: absolute;
+      content: '';
+      display: block;
+      right: var(--sds-g-spacing-2, 0.5rem);
+      width: 0;
+      height: 0;
+      border-left: 3px solid transparent;
+      border-right: 3px solid transparent;
+      pointer-events: none;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-select_container::before {
+      border-bottom: 5px solid currentColor;
+      top: calc((var(--sds-g-sizing-8, 1.75rem) / 2) - 6px);
+    }
+ 
+    :host([data-render-mode="shadow"]) .slds-select_container::after {
+      border-top: 5px solid currentColor;
+      bottom: calc((var(--sds-g-sizing-8, 1.75rem) / 2) - 6px);
+    }
+
+    :host([data-render-mode="shadow"][multiple]) .slds-select_container::before,:host([data-render-mode="shadow"][multiple]) .slds-select_container::after {
+      display: none;
+    }
+
+    :host([data-render-mode="shadow"][invalid]) [part~="select"] {
+      border-color: var(--sds-g-color-error-base-50, #ea001e);
+      box-shadow: var(--sds-g-color-error-base-50, #ea001e) 0 0 0 var(--sds-g-sizing-border-1, 1px) inset;
+      background-clip: padding-box;
+    }
+
+    :host([data-render-mode="shadow"][invalid]) [part~="select"]:focus,:host([data-render-mode="shadow"][invalid]) [part~="select"]:active {
+      box-shadow: var(--sds-g-color-error-base-50, #ea001e) 0 0 0 var(--sds-g-sizing-border-1, 1px) inset, 0 0 3px var(--sds-g-color-brand-base-50, #0176d3);
+    }
+
+    /* LABEL */
+
+    /* Styling Specifically for select label */
+    :host([data-render-mode="shadow"]) [part~="select-label"] {
+      padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
+      color: var(--slds-c-select-label-color, var(--sds-g-color-neutral-base-30, #444444));
+      font-size: var(--slds-c-select-label-font-size, var(--sds-g-font-scale-neg-3, 0.75rem));
+  
+      /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */
+      display: inline-flex;
+  
+      /* TODO: Add global hook once SLDS creates a new spacing hook that equals the value needed here */
+      column-gap: 0.125rem;
+    }
+
+    /* ASSISTIVE TEXT */
+    :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;
+    }
+}

package/src/lightning/showToastEvent/showToastEvent.js

@@ -0,0 +1,21 @@
+export const SHOW_TOAST_EVENT_NAME = 'lightning__showtoast';
+
+export class ShowToastEvent extends CustomEvent {
+    constructor(config) {
+        const options = {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+        };
+        if (config) {
+            const { label } = config;
+            if (!label) {
+                console.error(
+                    'Toast: please provide at least the "label" property to show the toast'
+                );
+            }
+            options.detail = config;
+        }
+        super(SHOW_TOAST_EVENT_NAME, options);
+    }
+}

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

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

package/src/lightning/sldsCommon/sldsCommon.css

@@ -44,10 +44,19 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    cursor: pointer;
  }
 
- [type='search'] {
-   appearance: textfield;
-   outline-offset: -2px;
- }
+[type='search'] {
+    -webkit-appearance: textfield;
+    outline-offset: -2px;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit;
+  font: inherit; 
+  margin: 0;
+}
 
  input:focus,
  button:focus,
@@ -94,3 +103,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
  iframe {
    border-style: none;
  }
+
+svg:not([fill]) {
+    fill: currentColor;
+}
+
+abbr[title] {
+    text-decoration: none;
+}

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

@@ -0,0 +1,103 @@
+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 in a non-obtrusive way.
+
+This component is for internal use only.
+
+### Show a Toast
+
+To show a toast, simply calls the `Toast`'s static function `show(config, comp)` with the proper toast config and a reference of the local component as parameters.
+The function also creates a single page-level toast container if one does not exist.
+
+```javascript
+// c/myComponent.js
+import { LightningElement } from 'lwc';
+import { Toast } from 'lightning/toast';
+
+export default class MyComponent extends LightningElement {
+    ...
+    onClick() {
+        ...
+        Toast.show({
+            label: 'This is a toast label which shows {0}, you can learn more about its accessibility from {1}',
+            labelLinks : [{
+                url: 'https://www.lightningdesignsystem.com/components/toast/',
+                label: 'LDS link'
+            }, {
+                url: 'https://www.lightningdesignsystem.com/accessibility/guidelines/global-focus/#toasts',
+                label: 'toast guideline'
+            }],
+            message: 'I want to show a {salesforceLink} and a {slackLink}',
+            messageLinks: {
+                salesforceLink: {
+                    url: 'http://www.salesforce.com',
+                    label: 'Salesforce link'
+                },
+                slackLink: {
+                    url: 'https://slack.com',
+                    label: 'Slack link'
+                }
+            },
+            mode: 'sticky',
+            variant: 'info'
+        }, this);
+    }
+}
+```
+Above shows a complete example a toast config, illustrating the two possible styles for specifying links (see note below). The container will display a sticky mode informational toast message with string stored in `label` as the toast title and string stored `message` as the toast message.  The `{0}`, `{1}`, and the `{salesforceLink}`, `{slackLink} `will be replaced with their specified link.
+
+The toast component will display and be managed in a page level `LightningToastContainer` 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`.
+
+### Component Styling
+
+`LightningToast` implements the [toast](https://www.lightningdesignsystem.com/components/toast/) blueprint in the Salesforce Lightning Design System (SLDS).
+
+### `config` attributes
+
+ Attribute | Explanation  |
+|----------| ------------ |
+| `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 will replace the `{0} ... {N}` indexed placeholders in `label` or `{ name: {url, label} }`, which will replace 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 will replace the `{0} ... {N}` indexed placeholders in `message` or `{ name: {url, label} }`, which will replace the `{name} ... {someOtherName}` named placeholders in `message`. |
+| `variant` | appearance of the toast notice. |
+| `mode` | persistence of the toast. |
+
+**_NOTE:_**  When `labelLinks` (or `messageLinks`) is provided in the config, the content of `label` (or `message`) will be 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.
+
+#### `variant` attribute
+
+The `variant` attribute sets the component's color and icon. It supports these values.
+
+| Value | Color | Icon |
+| --- | --- | --- |
+| `info` (default) | grey | `utility:info`|
+| `success` | green | `utility:success`|
+| `warning` | orange | `utility:warning`|
+| `error` | red | `utility:error`|
+
+#### `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.
+-   `sticky` - The component stays on screen until the user clicks the close button.
+
+##### Default Mode, When Mode Not Set
+If no `mode` is provided, the default `mode` will be 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 |
+| --- | --- | --- |
+| `info` | Yes| `sticky`|
+| `info` | No | `sticky`|
+| `success` | Yes | `sticky`|
+| `success` | No | `dismissible`|
+| `warning` | Yes | `sticky`|
+| `warning` | No | `sticky`|
+| `error` | Yes | `sticky`|
+| `error` | No | `sticky`|
+
+#### Small screen / Mobile environment
+
+`LightningToast` is implemented to be responsive according to the screen resolution. For smaller screen or mobile environments, the toast's **icon** and **description** (i.e. text stored in `message`, and `messageLinks`) will **not be shown** due to the screen's width limitation (see [Toast blueprint screen variants](https://www.lightningdesignsystem.com/guidelines/messaging/components/toasts/#flavor-variants-screen).
+
+The best practice where small screen and mobile environments are the primary use case is to only provide links in the toast's title (ie `label` and `labelLinks`) in order to have links visible and interactive.

package/src/lightning/toast/toast.css

@@ -0,0 +1,52 @@
+.fix-notify_toast_animation {
+    animation-name: fadeIn;
+    animation-duration: 0.4s;
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+.fix-notify_toast_animation.closing {
+    animation-name: fadeOut;
+    animation-duration: 0.4s;
+}
+
+@keyframes fadeOut {
+    0% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+/* TODO: change the following classes to the actual SLDS classes once W-12084169 is completed. */
+.fix-slds-notify--mobile {
+    padding: 0.5rem 1rem 0.75rem;
+    min-width: 90%;
+    width: 90%;
+}
+
+.fix-slds-notify--mobile.slds-notify_toast h2 {
+    font-size: 0.8125rem;
+    font-weight: 300;
+}
+
+/* for screen smaller than 480px */
+.fix-slds-notify--mobile .slds-notify__close {
+    top: 0.5rem;
+}
+
+/* for mobile device */
+.fix-slds-notify--mobile .slds-notify__close.fix-slds-notify--mobile__close {
+    top: -0.25rem;
+    right: -0.15rem;
+}