lightning-base-components 1.18.4-alpha → 1.18.6-alpha

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

@@ -0,0 +1,230 @@
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) {
+  line-height: var(--sds-g-font-lineheight, 1.5);
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  -webkit-hyphens: manual;
+  -ms-hyphens: manual;
+  hyphens: manual;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) h1 {
+  font-size: var(--sds-g-font-scale-1, 1.125rem);
+}
+
+: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);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) h3 {
+  font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
+}
+
+: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);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) h5 {
+  font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
+}
+
+: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);
+}
+
+: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);
+}
+
+: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);
+}
+
+: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));
+  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));
+  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);
+  list-style: disc;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ul ul {
+  list-style: circle;
+  margin-block-end: 0;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ul ul ul {
+  list-style: square;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ul ul ul ul {
+  list-style: disc;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ul ul ul ul ul {
+  list-style: circle;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ul ol {
+  margin-inline-start: var(--sds-g-spacing-5, 1.5rem);
+  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);
+  list-style: decimal;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ol ol {
+  list-style: lower-alpha;
+  margin-block-end: 0;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ol ol ol {
+  list-style: lower-roman;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ol ol ol ol {
+  list-style: decimal;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ol ol ol ol ol {
+  list-style: lower-alpha;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) ol ul {
+  margin-inline-start: var(--sds-g-spacing-5, 1.5rem);
+  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);
+}
+
+: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;
+  cursor: help;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) table {
+  overflow-wrap: normal;
+  word-wrap: normal;
+  word-break: normal;
+  width: auto;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) table caption {
+  text-align: center;
+}
+
+: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);
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .sans-serif {
+  font-family: sans-serif;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .courier {
+  font-family: courier;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .verdana {
+  font-family: verdana;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .tahoma {
+  font-family: tahoma;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .garamond {
+  font-family: garamond;
+}
+
+:host([data-render-mode="shadow"].slds-rich-text-editor__output) .serif {
+  font-family: serif;
+}
+
+: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);
+}
+
+: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);
+}
+
+: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);
+}
+
+: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);
+}
+
+: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);
+}
+
+: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);
+}
+
+: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);
+}
+
+: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);
+}
+
+: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);
+}
+
+: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);
+}
+
+: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);
+}
+
+: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);
+}
+
+: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);
+}
+
+: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);
+}
+
+: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);
+}
+
+: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);
+}
+
+: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);
+}
+
+: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);
+}

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

@@ -0,0 +1,209 @@
+/* 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
+   */
+  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);
+  border-style: solid;
+  border-color: var(--sds-c-icon-color-border, transparent);
+  background-color: var(--sds-c-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);
+}
+
+/**
+ * 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
+ *        missing SLDS shared and globals.
+ *
+ *        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);
+  }
+
+  :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));
+  }
+
+  :host([data-render-mode="shadow"][size~='x-small']) {
+    --slds-c-icon-sizing: var(--sds-g-sizing-5, 1rem);
+  }
+
+  :host([data-render-mode="shadow"][size~='small']) {
+    --slds-c-icon-sizing: var(--sds-g-sizing-7, 1.5rem);
+  }
+
+  :host([data-render-mode="shadow"][size~='large']) {
+    --slds-c-icon-sizing: var(--sds-g-sizing-10, 3rem);
+  }
+
+  :host([data-render-mode="shadow"][variant~='warning']) {
+    --slds-c-icon-color-foreground: var(--sds-g-color-warning-base-70, #fe9339);
+  }
+
+  :host([data-render-mode="shadow"][variant~='success']) {
+    --slds-c-icon-color-foreground: var(--sds-g-color-success-base-50, #2e844a);
+  }
+
+  :host([data-render-mode="shadow"][variant~='error']) {
+    --slds-c-icon-color-foreground: var(--sds-g-color-error-base-50, #ea001e);
+  }
+
+  :host([data-render-mode="shadow"][variant~='light']) {
+    --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
+  }
+
+  :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-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(
+      --slds-c-icon-spacing-block-start,
+      var(--slds-c-icon-spacing-block)
+    );
+    --sds-c-icon-spacing-block-end: var(--slds-c-icon-spacing-block-end, var(--slds-c-icon-spacing-block));
+    --sds-c-icon-spacing-inline-start: var(
+      --slds-c-icon-spacing-inline-start,
+      var(--slds-c-icon-spacing-inline)
+    );
+    --sds-c-icon-spacing-inline-end: var(--slds-c-icon-spacing-inline-end, var(--slds-c-icon-spacing-inline));
+
+    /**
+     * There's a divergence in LBC that we have to support here: LBC splits their
+     * icon implementation into two components: lightning-icon and lightning-primitive-icon.
+     * slds-icon is consumed within both with no issues except that the presence of an
+     * additional custom element (primitive-icon) creates an unexpected inline-level
+     * element and breaks our formatting context. tl;dr, we have to reset the formatting
+     * context of the boundary or else we'll inherit line-height from an ancestor and
+     * get visual regressions.
+     *
+     * If lightning-icon is refactored into a single component, this line can be removed.
+     */
+    display: inline-flex;
+  }
+
+  :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)));
+  }
+
+  :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);
+  }
+}
+
+/**
+ * P R I V A T E
+ *
+ * The following styling is implemented by classes within the shadow DOM.
+ * They're expected to be private to the component and not for external use.
+ *
+ * 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
+ * were done explicitly through the 'variant' attribute. So this is an outlier
+ * to the overall pattern. Leaving it as-is since an update would require an
+ * API change or more investigating.
+ *
+ * This is a hybrid patch between synthetic and native shadow. The ideal final
+ * 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))
+  );
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-text-default.slds-is-disabled {
+  fill: var(--sds-g-color-neutral-base-80, #c9c9c9);
+}
+
+/**
+ * A temporarily baked-in utility class until SLDS gets a proper utility package.
+ *
+ * This is a hybrid patch between synthetic and native shadow. The ideal final
+ * 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;
+  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;
+}
+
+/**
+ * For the initial alpha version, we're hardcoding in the various unique icon styles.
+ *
+ * Next version, we want to dynamically generate these from legacy SLDS with the
+ * following design pattern:
+ *
+ * [type="action"][icon-name="approval"] {
+ *   --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));
+  
+  position: absolute;
+  top: 50%;
+  margin-block-start: -0.4375rem;
+  line-height: var(--sds-g-font-lineheight-1, 1);
+  border: 0;
+  z-index: 2;
+}

package/src/lightning/toast/toast.css

@@ -1,4 +1,15 @@
-.fix-notify_toast_animation {
+@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;
 }
@@ -13,7 +24,8 @@
     }
 }
 
-.fix-notify_toast_animation.closing {
+.fix-notify_toast_animation.closing,
+:host([data-render-mode="shadow"]) .fix-notify_toast_animation.closing {
     animation-name: fadeOut;
     animation-duration: 0.4s;
 }
@@ -29,24 +41,28 @@
 }
 
 /* TODO: change the following classes to the actual SLDS classes once W-12084169 is completed. */
-.fix-slds-notify--mobile {
+.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 {
+.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 {
+.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 {
+.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;
 }

package/src/lightning/toast/toast.html

@@ -1,6 +1,6 @@
 <template>
     <lightning-focus-trap>
-        <div class="slds-notify_container slds-is-relative">
+        <div class="slds-notify_container slds-is-relative" part="toast">
             <div class={toastClass}
                 role="status"
                 onanimationend={handleAnimationEnd}

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,
@@ -25,7 +26,7 @@ import iconErrorAltText from '@salesforce/label/LightningToast.errorLabel';
 import macNavigationAssistiveText from '@salesforce/label/LightningToast.macNavigationAssistiveText';
 import genericNavigationAssistiveText from '@salesforce/label/LightningToast.genericNavigationAssistiveText';
 
-import { DEFAULT_CONFIG } from 'lightning/f6Controller';
+import { getCurrentRegionAttributeName } from 'lightning/f6Controller';
 
 const MODE_DISMISSIBLE = 'dismissible';
 const MODE_STICKY = 'sticky';
@@ -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();
@@ -563,10 +565,10 @@ export default class Toast extends LightningElement {
                 }, duration);
             }
             // add the data-f6-region attribute to the toast div
-            this.toastElement.setAttribute(
-                DEFAULT_CONFIG.f6RegionAttribute,
-                ''
-            );
+            const regionAttributeName = getCurrentRegionAttributeName();
+            if (regionAttributeName) {
+                this.toastElement.setAttribute(regionAttributeName, '');
+            }
         }
     }
 

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

@@ -0,0 +1,97 @@
+
+:host([data-render-mode="shadow"]) .slds-notify_toast {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  background: none;
+  background-color: var(--slds-c-toast-color-background, var(--sds-g-color-neutral-base-50, #747474));
+  color: var(--slds-c-toast-text-color, var(--sds-g-color-neutral-base-100, #ffffff));
+  border-radius: var(--slds-c-toast-radius-border, var(--sds-g-radius-border-2, 0.25rem));
+  margin: var(--sds-g-spacing-2, 0.5rem);
+  padding-block-start: var(--slds-c-toast-spacing-block-start, var(--sds-g-spacing-3, 0.75rem));
+  padding-inline-end: var(--slds-c-toast-spacing-inline-end, var(--sds-g-spacing-8, 3rem));
+  padding-block-end: var(--slds-c-toast-spacing-block-end, var(--sds-g-spacing-3, 0.75rem));
+  padding-inline-start: var(--slds-c-toast-spacing-inline-start, var(--sds-g-spacing-5, 1.5rem));
+  min-width: var(--slds-c-toast-sizing-min-width, var(--sds-g-sizing-16, 30rem));
+  text-align: left;
+  justify-content: flex-start;
+}
+
+:host([data-render-mode="shadow"]) .slds-notify_toast a {
+  color: currentColor;
+  border: var(--sds-g-sizing-border-1, 1px) solid transparent;
+  border-radius: var(--sds-g-radius-border-2, 0.25rem);
+}
+
+:host([data-render-mode="shadow"]) .slds-notify_toast a:hover,:host([data-render-mode="shadow"]) 
+.slds-notify_toast a:focus {
+  text-decoration: none;
+  outline: 0;
+}
+
+:host([data-render-mode="shadow"]) .slds-notify_toast a:focus {
+  box-shadow: 0 0 3px var(--sds-g-color-neutral-base-95, #f3f3f3);
+  border: var(--sds-g-sizing-border-1, 1px) solid var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
+}
+
+:host([data-render-mode="shadow"]) .slds-notify_toast a:active {
+  color: var(--slds-g-color-neutral-100-opacity-50, rgba(255, 255, 255, 0.5));
+}
+
+:host([data-render-mode="shadow"]) .slds-notify_toast a[disabled] {
+  color: var(--slds-g-color-neutral-100-opacity-10, rgba(255, 255, 255, 0.15));
+}
+
+:host([data-render-mode="shadow"]) .slds-notify_toast .slds-notify__close {
+  float: right;
+  position: absolute;
+  top: var(--sds-g-spacing-3, 0.75rem);
+  right: var(--sds-g-spacing-3, 0.75rem);
+  margin-inline-start: var(--sds-g-spacing-1, 0.25rem);
+  transform: translateY(-0.125rem);
+}
+
+:host([data-render-mode="shadow"]) .slds-region_narrow .slds-notify_toast {
+  min-width: auto;
+  width: 100%;
+  margin-inline-start: 0;
+}
+
+/* TODO W-12674349: remove after name-value-list utils are added */
+
+:host([data-render-mode="shadow"]) .slds-list--inline {
+  display: inline-flex;
+  max-width: 100%;
+}
+
+/* TODO W-12674349: remove after assistive text util is added */
+
+:host([data-render-mode="shadow"]) .slds-assistive-text {
+  position: absolute !important;
+  margin: -1px !important;
+  border: 0 !important;
+  padding: 0 !important;
+  width: 1px !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  text-transform: none !important;
+  white-space: nowrap !important;
+}
+
+/* TODO W-12674349: remove after text utils are added */
+
+:host([data-render-mode="shadow"]) .slds-text-heading_small {
+  font-size: var(--sds-g-font-size-base, 1rem);
+  line-height: var(--sds-g-font-lineheight-2, 1.25);
+}
+
+/* TODO W-12674349: remove after alert is added */
+
+:host([data-render-mode="shadow"]) .slds-notify__close {
+  position: absolute;
+  top: 50%;
+  right: var(--sds-g-spacing-3, 0.75rem);
+  margin-inline-start: var(--sds-g-spacing-1, 0.25rem);
+  transform: translateY(-50%);
+}