lightning-base-components 1.21.1-alpha → 1.21.2-alpha

package/src/lightning/toast/formatted-rich-text.slds.css

@@ -1,58 +1,58 @@
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) {
-  line-height: var(--sds-g-font-lineheight, 1.5);
+  line-height: var(--slds-g-font-lineheight);
   overflow-wrap: break-word;
   word-wrap: break-word;
   hyphens: manual;
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) h1 {
-  font-size: var(--sds-g-font-scale-1, 1.125rem);
+  font-size: var(--slds-g-font-scale-1);
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) h2 {
-  font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
-  font-weight: var(--sds-g-font-weight-7, 700);
+  font-size: var(--slds-g-font-scale-neg-1);
+  font-weight: var(--slds-g-font-weight-7);
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) h3 {
-  font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
+  font-size: var(--slds-g-font-scale-neg-1);
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) h4 {
-  font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
-  font-weight: var(--sds-g-font-weight-7, 700);
+  font-size: var(--slds-g-font-scale-neg-3);
+  font-weight: var(--slds-g-font-weight-7);
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) h5 {
-  font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
+  font-size: var(--slds-g-font-scale-neg-3);
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) h6 {
-  font-size: var(--sds-g-font-scale-neg-4, 0.625rem);
-  font-weight: var(--sds-g-font-weight-7, 700);
+  font-size: var(--slds-g-font-scale-neg-4);
+  font-weight: var(--slds-g-font-weight-7);
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) h1,:host([data-render-mode="shadow"].slds-rich-text-editor__output) h2,:host([data-render-mode="shadow"].slds-rich-text-editor__output) h3,:host([data-render-mode="shadow"].slds-rich-text-editor__output) h4,:host([data-render-mode="shadow"].slds-rich-text-editor__output) h5,:host([data-render-mode="shadow"].slds-rich-text-editor__output) h6,:host([data-render-mode="shadow"].slds-rich-text-editor__output) ul,:host([data-render-mode="shadow"].slds-rich-text-editor__output) ol,:host([data-render-mode="shadow"].slds-rich-text-editor__output) dl,:host([data-render-mode="shadow"].slds-rich-text-editor__output) img {
-  margin-block-end: var(--sds-g-spacing-3, 0.75rem);
+  margin-block-end: var(--slds-g-spacing-3);
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) blockquote {
-  margin: var(--sds-g-spacing-6, 2rem) var(--sds-g-spacing-5, 1.5rem);
+  margin: var(--slds-g-spacing-6) var(--slds-g-spacing-5);
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) ins {
-  color: var(--slds-g-color-success-base-50, var(--sds-g-color-success-base-50, #2e844a));
+  color: var(--slds-g-color-success-base-50, var(--slds-g-color-success-base-50));
   text-decoration: underline;
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) del {
-  color: var(--slds-g-color-error-base-30, var(--sds-g-color-error-base-50, #ea001e));
+  color: var(--slds-g-color-error-base-30, var(--slds-g-color-error-base-50));
   text-decoration: line-through;
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) ul {
-  margin-inline-start: var(--sds-g-spacing-5, 1.5rem);
+  margin-inline-start: var(--slds-g-spacing-5);
   list-style: disc;
 }
 
@@ -74,13 +74,13 @@
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) ul ol {
-  margin-inline-start: var(--sds-g-spacing-5, 1.5rem);
+  margin-inline-start: var(--slds-g-spacing-5);
   list-style: decimal;
   margin-block-end: 0;
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) ol {
-  margin-inline-start: var(--sds-g-spacing-5, 1.5rem);
+  margin-inline-start: var(--slds-g-spacing-5);
   list-style: decimal;
 }
 
@@ -102,17 +102,17 @@
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) ol ul {
-  margin-inline-start: var(--sds-g-spacing-5, 1.5rem);
+  margin-inline-start: var(--slds-g-spacing-5);
   list-style: disc;
   margin-block-end: 0;
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) dd {
-  margin-inline-start: var(--sds-g-spacing-7, 2.5rem);
+  margin-inline-start: var(--slds-g-spacing-7);
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) abbr[title],:host([data-render-mode="shadow"].slds-rich-text-editor__output) acronym[title] {
-  border-bottom: var(--sds-g-sizing-border-1, 1px) dotted;
+  border-bottom: var(--slds-g-sizing-border-1) dotted;
   cursor: help;
 }
 
@@ -128,7 +128,7 @@
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) th,:host([data-render-mode="shadow"].slds-rich-text-editor__output) td {
-  padding: var(--sds-g-spacing-2, 0.5rem);
+  padding: var(--slds-g-spacing-2);
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) .sans-serif {
@@ -156,73 +156,73 @@
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-1:not(.ql-direction-rtl) {
-  padding-inline-start: var(--sds-g-spacing-8, 3rem);
+  padding-inline-start: var(--slds-g-spacing-8);
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-1.ql-direction-rtl.ql-align-right {
-  padding-inline-end: var(--sds-g-spacing-8, 3rem);
+  padding-inline-end: var(--slds-g-spacing-8);
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-2:not(.ql-direction-rtl) {
-  padding-inline-start: calc(var(--sds-g-spacing-8, 3rem) * 2);
+  padding-inline-start: calc(var(--slds-g-spacing-8) * 2);
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-2.ql-direction-rtl.ql-align-right {
-  padding-inline-end: calc(var(--sds-g-spacing-8, 3rem) * 2);
+  padding-inline-end: calc(var(--slds-g-spacing-8) * 2);
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-3:not(.ql-direction-rtl) {
-  padding-inline-start: calc(var(--sds-g-spacing-8, 3rem) * 3);
+  padding-inline-start: calc(var(--slds-g-spacing-8) * 3);
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-3.ql-direction-rtl.ql-align-right {
-  padding-inline-end: calc(var(--sds-g-spacing-8, 3rem) * 3);
+  padding-inline-end: calc(var(--slds-g-spacing-8) * 3);
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-4:not(.ql-direction-rtl) {
-  padding-inline-start: calc(var(--sds-g-spacing-8, 3rem) * 4);
+  padding-inline-start: calc(var(--slds-g-spacing-8) * 4);
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-4.ql-direction-rtl.ql-align-right {
-  padding-inline-end: calc(var(--sds-g-spacing-8, 3rem) * 4);
+  padding-inline-end: calc(var(--slds-g-spacing-8) * 4);
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-5:not(.ql-direction-rtl) {
-  padding-inline-start: calc(var(--sds-g-spacing-8, 3rem) * 5);
+  padding-inline-start: calc(var(--slds-g-spacing-8) * 5);
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-5.ql-direction-rtl.ql-align-right {
-  padding-inline-end: calc(var(--sds-g-spacing-8, 3rem) * 5);
+  padding-inline-end: calc(var(--slds-g-spacing-8) * 5);
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-6:not(.ql-direction-rtl) {
-  padding-inline-start: calc(var(--sds-g-spacing-8, 3rem) * 6);
+  padding-inline-start: calc(var(--slds-g-spacing-8) * 6);
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-6.ql-direction-rtl.ql-align-right {
-  padding-inline-end: calc(var(--sds-g-spacing-8, 3rem) * 6);
+  padding-inline-end: calc(var(--slds-g-spacing-8) * 6);
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-7:not(.ql-direction-rtl) {
-  padding-inline-start: calc(var(--sds-g-spacing-8, 3rem) * 7);
+  padding-inline-start: calc(var(--slds-g-spacing-8) * 7);
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-7.ql-direction-rtl.ql-align-right {
-  padding-inline-end: calc(var(--sds-g-spacing-8, 3rem) * 7);
+  padding-inline-end: calc(var(--slds-g-spacing-8) * 7);
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-8:not(.ql-direction-rtl) {
-  padding-inline-start: calc(var(--sds-g-spacing-8, 3rem) * 8);
+  padding-inline-start: calc(var(--slds-g-spacing-8) * 8);
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-8.ql-direction-rtl.ql-align-right {
-  padding-inline-end: calc(var(--sds-g-spacing-8, 3rem) * 8);
+  padding-inline-end: calc(var(--slds-g-spacing-8) * 8);
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-9:not(.ql-direction-rtl) {
-  padding-inline-start: calc(var(--sds-g-spacing-8, 3rem) * 9);
+  padding-inline-start: calc(var(--slds-g-spacing-8) * 9);
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) .ql-indent-9.ql-direction-rtl.ql-align-right {
-  padding-inline-end: calc(var(--sds-g-spacing-8, 3rem) * 9);
+  padding-inline-end: calc(var(--slds-g-spacing-8) * 9);
 }

package/src/lightning/toast/icon.slds.css

@@ -1,43 +1,54 @@
+/*******************************************
+* Imported dependency from @salesforce-ux/sds-primitives/src/sds/icon/icon.css
+*******************************************/
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
-
 :host([data-render-mode="shadow"]) {
   /**
-   * Establish independent formatting context, we don't want ancestor rules affecting our layout.
-   * This assumes there will not be a direct, child inline-level element.
-   * See https://www.w3.org/TR/css-display-3/#establish-an-independent-formatting-context
-   */
+     * Establish independent formatting context, we don't want ancestor rules affecting our layout.
+     * This assumes there will not be a direct, child inline-level element.
+     * See https://www.w3.org/TR/css-display-3/#establish-an-independent-formatting-context
+     */
   display: inline-flex;
 }
-
 :host([data-render-mode="shadow"]) [part~='boundary'] {
-  padding-block-start: var(--sds-c-icon-spacing-block-start, var(--sds-c-icon-spacing));
-  padding-block-end: var(--sds-c-icon-spacing-block-end, var(--sds-c-icon-spacing));
-  padding-inline-start: var(--sds-c-icon-spacing-inline-start, var(--sds-c-icon-spacing));
-  padding-inline-end: var(--sds-c-icon-spacing-inline-end, var(--sds-c-icon-spacing));
-  border-radius: var(--sds-c-icon-radius-border);
-  border-width: var(--sds-c-icon-sizing-border, 1px);
+  padding-block-start: var(
+    --sds-c-icon-spacing-blockstart,
+    var(--sds-c-icon-spacing-block, var(--sds-c-icon-spacing, var(--sds-s-icon-spacing)))
+  );
+  padding-block-end: var(
+    --sds-c-icon-spacing-blockend,
+    var(--sds-c-icon-spacing-block, var(--sds-c-icon-spacing, var(--sds-s-icon-spacing)))
+  );
+  padding-inline-start: var(
+    --sds-c-icon-spacing-inlinestart,
+    var(--sds-c-icon-spacing-inline, var(--sds-c-icon-spacing, var(--sds-s-icon-spacing)))
+  );
+  padding-inline-end: var(
+    --sds-c-icon-spacing-inlineend,
+    var(--sds-c-icon-spacing-inline, var(--sds-c-icon-spacing, var(--sds-s-icon-spacing)))
+  );
+  border-radius: var(--sds-c-icon-radius-border, var(--sds-s-icon-radius-border));
+  border-width: var(--sds-c-icon-sizing-border, var(--sds-s-icon-sizing-border));
   border-style: solid;
-  border-color: var(--sds-c-icon-color-border, transparent);
-  background-color: var(--sds-c-icon-color-background);
-}
 
+  /* If undefined, border-color resolves to currentColor, so we need to explicitly set to transparent */
+  border-color: var(--sds-c-icon-color-border, var(--sds-s-icon-color-border, transparent));
+  background-color: var(--sds-c-icon-color-background, var(--sds-s-icon-color-background));
+}
 :host([data-render-mode="shadow"]) [part~='icon'] {
   display: flex; /* See line #5 */
-  height: var(--sds-c-icon-sizing-height, var(--sds-c-icon-sizing));
-  width: var(--sds-c-icon-sizing-width, var(--sds-c-icon-sizing));
-  color: var(--sds-c-icon-color-foreground);
+  height: var(--sds-c-icon-sizing-height, var(--sds-c-icon-sizing, var(--sds-s-icon-sizing)));
+  width: var(--sds-c-icon-sizing-width, var(--sds-c-icon-sizing, var(--sds-s-icon-sizing)));
+  color: var(--sds-c-icon-color-foreground, var(--sds-s-icon-color-foreground));
 }
-
 /**
- * Normalize svgs and control width/height with Styling Hooks
- */
-
+   * Normalize svgs and control width/height with Styling Hooks
+   */
 :host([data-render-mode="shadow"]) svg {
   width: 100%;
   height: 100%;
 }
-
 /**
  * @Note: Static fallbacks are in place until SLDS adopts SDS. Without static
  *        fallbacks, styles will regress due to invalid CSS variables from
@@ -46,47 +57,46 @@
  *        Additionally, LBC are currently relying on 'part' attributes to
  *        receive styling. Authoring styles that rely on slots is not recommended.
  */
-
 @supports (--styling-hooks: '') {
   :host([data-render-mode="shadow"][size='xxx-small']) {
-    --slds-c-icon-sizing: var(--sds-g-sizing-3, 0.5rem);
+    --slds-c-icon-sizing: var(--slds-g-sizing-3);
   }
 
   :host([data-render-mode="shadow"][size='xx-small']) {
-    --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
+    --slds-c-icon-sizing: calc(var(--slds-g-sizing-1) + var(--slds-g-sizing-4));
   }
 
   :host([data-render-mode="shadow"][size='x-small']) {
-    --slds-c-icon-sizing: var(--sds-g-sizing-5, 1rem);
+    --slds-c-icon-sizing: var(--slds-g-sizing-5);
   }
 
   :host([data-render-mode="shadow"][size='small']) {
-    --slds-c-icon-sizing: var(--sds-g-sizing-7, 1.5rem);
+    --slds-c-icon-sizing: var(--slds-g-sizing-7);
   }
 
   :host([data-render-mode="shadow"][size='large']) {
-    --slds-c-icon-sizing: var(--sds-g-sizing-10, 3rem);
+    --slds-c-icon-sizing: var(--slds-g-sizing-10);
   }
 
   :host([data-render-mode="shadow"][variant='warning']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-warning-base-70, #fe9339);
+    --slds-c-icon-color-foreground: var(--slds-g-color-warning-1);
   }
 
   :host([data-render-mode="shadow"][variant='success']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-success-base-50, #2e844a);
+    --slds-c-icon-color-foreground: var(--slds-g-color-success-1);
   }
 
   :host([data-render-mode="shadow"][variant='error']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-error-base-50, #ea001e);
+    --slds-c-icon-color-foreground: var(--slds-g-color-error-1);
   }
 
   :host([data-render-mode="shadow"][variant='light']) {
-    --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
+    --slds-c-icon-color-foreground: var(--slds-g-color-neutral-base-70);
   }
 
   :host([data-render-mode="shadow"]) [part='boundary'] {
     /* --sds-c-icon-color-background: var(--slds-c-icon-color-background); */
-    --sds-c-icon-radius-border: var(--slds-c-icon-radius-border, var(--sds-g-radius-border-2, 0.25rem));
+    --sds-c-icon-radius-border: var(--slds-c-icon-radius-border, var(--slds-g-radius-border-2));
     --sds-c-icon-sizing-border: var(--slds-c-icon-sizing-border);
     --sds-c-icon-color-border: var(--slds-c-icon-color-border);
     --sds-c-icon-spacing-block-start: var(
@@ -115,18 +125,17 @@
   }
 
   :host([data-render-mode="shadow"]) [part='icon'] {
-    --sds-c-icon-color-foreground: var(--slds-c-icon-color-foreground, var(--sds-g-color-neutral-base-100, #ffffff));
-    --sds-c-icon-sizing-height: var(--slds-c-icon-sizing-height, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
-    --sds-c-icon-sizing-width: var(--slds-c-icon-sizing-width, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
+    --sds-c-icon-color-foreground: var(--slds-c-icon-color-foreground, var(--slds-g-color-on-accent-1));
+    --sds-c-icon-sizing-height: var(--slds-c-icon-sizing-height, var(--slds-c-icon-sizing, var(--slds-g-sizing-9)));
+    --sds-c-icon-sizing-width: var(--slds-c-icon-sizing-width, var(--slds-c-icon-sizing, var(--slds-g-sizing-9)));
   }
 
   :host([data-render-mode="shadow"][icon-name*='action']) {
-    --slds-c-icon-spacing-block: var(--sds-g-sizing-3, 0.5rem);
-    --slds-c-icon-spacing-inline: var(--sds-g-sizing-3, 0.5rem);
-    --slds-c-icon-radius-border: calc(var(--sds-g-radius-border-circle, 100%) / 2);
+    --slds-c-icon-spacing-block: var(--slds-g-sizing-3);
+    --slds-c-icon-spacing-inline: var(--slds-g-sizing-3);
+    --slds-c-icon-radius-border: calc(var(--slds-g-radius-border-circle) / 2);
   }
 }
-
 /**
  * P R I V A T E
  *
@@ -135,7 +144,6 @@
  *
  * See notes for each class for the rationale behind their inclusion.
  */
-
 /**
  * Utility icons traditionally added a class to change the default foreground
  * color (white) to a grey. This was done implicitly whereas other color changes
@@ -147,20 +155,17 @@
  * outcome is the removal of this class and the default utility styling would
  * be implemented through an attribute or some other class-less solution.
  */
-
 :host([data-render-mode="shadow"]) .slds-icon-text-default {
   /*! @css-var-fallback fill */
   --slds-c-icon-color-foreground: var(
     --slds-c-icon-color-foreground-default,
     var(--sds-c-icon-color-foreground-default, var(
-      --sds-g-color-neutral-base-50, #747474))
+      --slds-g-color-on-surface-1))
   );
 }
-
 :host([data-render-mode="shadow"]) .slds-icon-text-default.slds-is-disabled {
-  fill: var(--sds-g-color-neutral-base-80, #c9c9c9);
+  fill: var(--slds-g-color-disabled-1);
 }
-
 /**
  * A temporarily baked-in utility class until SLDS gets a proper utility package.
  *
@@ -168,7 +173,6 @@
  * outcome is the removal of this class and replacing the class with the SLDS
  * utility package solution.
  */
-
 :host([data-render-mode="shadow"]) .slds-assistive-text {
   position: absolute !important;
   margin: -1px !important;
@@ -181,7 +185,6 @@
   text-transform: none !important;
   white-space: nowrap !important;
 }
-
 /**
  * For the initial alpha version, we're hardcoding in the various unique icon styles.
  *
@@ -192,18 +195,26 @@
  *   --sds-c-icon-color-background: var(--slds-c-icon-color-background, #111);
  * }
  */
-
 :host([data-render-mode="shadow"]) .slds-icon_disabled {
   background-color: currentcolor;
 }
-
 :host([data-render-mode="shadow"]) .slds-input__icon {
-  --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
+  --slds-c-icon-sizing: calc(var(--slds-g-sizing-1) + var(--slds-g-sizing-4));
 
   position: absolute;
   top: 50%;
   margin-block-start: -0.4375rem;
-  line-height: var(--sds-g-font-lineheight-1, 1);
+  line-height: var(--slds-g-font-lineheight-1);
   border: 0;
   z-index: 2;
 }
+:host([data-render-mode="shadow"][data-input-pill-search-primicon]) .slds-icon {
+  --sds-c-icon-sizing-height: 1.25rem;
+  --sds-c-icon-sizing-width: 1.25rem;
+}
+:host([data-render-mode="shadow"][data-input-pill-close-primicon]) [part="icon"] {
+  --sds-c-icon-color-foreground: none;
+}
+:host([data-render-mode="shadow"][data-input-pill-close-primicon]) [part="icon"]:hover {
+  --sds-c-icon-color-foreground: var(--slds-g-color-accent-4);
+}

package/src/lightning/toast/toast.css

@@ -1,68 +1,2 @@
-/* @import 'lightning/sldsCommon';
-@import './toast.slds.css';
-@import './icon.slds.css';
-@import './button-icon.slds.css';
-@import './formatted-rich-text.slds.css';
-@import 'lightning/sldsUtilsThemes';
-@import 'lightning/sldsUtilsMargin';
-@import 'lightning/sldsUtilsPosition';
-@import 'lightning/sldsUtilsGrid'; */
-
-.fix-notify_toast_animation,
-:host([data-render-mode="shadow"]) .fix-notify_toast_animation {
-    animation-name: fadeIn;
-    animation-duration: 0.4s;
-}
-
-@keyframes fadeIn {
-    0% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}
-
-.fix-notify_toast_animation.closing,
-:host([data-render-mode="shadow"]) .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,
-:host([data-render-mode="shadow"]) .fix-slds-notify--mobile {
-    padding: 0.5rem 1rem 0.75rem;
-    min-width: 90%;
-    width: 90%;
-}
-
-.fix-slds-notify--mobile.slds-notify_toast h2,
-:host([data-render-mode="shadow"]) .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,
-:host([data-render-mode="shadow"]) .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,
-:host([data-render-mode="shadow"]) .fix-slds-notify--mobile .slds-notify__close.fix-slds-notify--mobile__close {
-    top: -0.25rem;
-    right: -0.15rem;
-}
+@import './toast.lbc.synthetic.css';
+@import './toast.lbc.native.css';

package/src/lightning/toast/toast.js

@@ -1,4 +1,5 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import {
     makeAbsoluteUrl,
     normalizeString,
@@ -45,7 +46,7 @@ const MIN_BROWSER_WIDTH = 480;
 /**
  * A notification element used to convey a label.
  */
-export default class Toast extends LightningElement {
+export default class Toast extends LightningShadowBaseClass {
     static [instanceName] = 'lightning-toast';
     static [properties] = [
         'variant',
@@ -532,6 +533,7 @@ export default class Toast extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this.registerWithContainer();
         this.determineSmallerScreen();
         this.determineSmallFormFactor();

package/src/lightning/toast/toast.lbc.native.css

@@ -0,0 +1,9 @@
+@import 'lightning/sldsCommon';
+@import './toast.slds.css';
+@import './icon.slds.css';
+@import './button-icon.slds.css';
+@import './formatted-rich-text.slds.css';
+@import 'lightning/sldsUtilsThemes';
+@import 'lightning/sldsUtilsMargin';
+@import 'lightning/sldsUtilsPosition';
+@import 'lightning/sldsUtilsGrid';

package/src/lightning/toast/toast.lbc.synthetic.css

@@ -0,0 +1,58 @@
+.fix-notify_toast_animation,
+:host([data-render-mode="shadow"]) .fix-notify_toast_animation {
+    animation-name: fadeIn;
+    animation-duration: 0.4s;
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+.fix-notify_toast_animation.closing,
+:host([data-render-mode="shadow"]) .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,
+:host([data-render-mode="shadow"]) .fix-slds-notify--mobile {
+    padding: 0.5rem 1rem 0.75rem;
+    min-width: 90%;
+    width: 90%;
+}
+
+.fix-slds-notify--mobile.slds-notify_toast h2,
+:host([data-render-mode="shadow"]) .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,
+:host([data-render-mode="shadow"]) .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,
+:host([data-render-mode="shadow"]) .fix-slds-notify--mobile .slds-notify__close.fix-slds-notify--mobile__close {
+    top: -0.25rem;
+    right: -0.15rem;
+}