lightning-base-components 1.26.4-alpha → 1.27.2-alpha

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

@@ -190,14 +190,13 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-icon-sizing: 0.875rem;
   --slds-c-icon-color-foreground: currentcolor;
 
-
   --sds-c-button-font-lineheight: var(
     --slds-c-button-neutral-font-lineheight,
     var(--slds-s-button-font-lineheight, 1.875rem)
   );
   --sds-c-button-spacing-inline: var(
     --slds-c-button-neutral-spacing-inline,
-    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4));
+    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4)) ;
   );
   --sds-c-button-spacing-block: var(--slds-c-button-neutral-spacing-block);
 
@@ -217,7 +216,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     * In all other variants, it is ok to use the previous state as a fallback value.
     */
 
-
   /* Border radius - shared */
   --sds-c-button-radius-border-startstart: var(
     --slds-c-button-radius-border-startstart,
@@ -260,7 +258,10 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --slds-c-button-neutral-color-background-hover,
     var(--slds-g-color-surface-container-2)
   );
-  --sds-c-button-color-background-focus: var(--slds-c-button-neutral-color-background-focus, var(--slds-g-color-surface-container-2));
+  --sds-c-button-color-background-focus: var(
+    --slds-c-button-neutral-color-background-focus,
+    var(--slds-g-color-surface-container-2)
+  );
   --sds-c-button-color-background-active: var(
     --slds-c-button-neutral-color-background-active,
     var(--slds-g-color-surface-container-2)
@@ -283,8 +284,14 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Text color */
   --sds-c-button-text-color: var(--slds-c-button-neutral-text-color, var(--slds-g-color-accent-2));
-  --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-s-button-color-hover, var(--slds-g-color-accent-3)));
-  --sds-c-button-text-color-focus: var(--slds-c-button-neutral-text-color-focus, var(--slds-g-color-accent-3));
+  --sds-c-button-text-color-hover: var(
+    --slds-c-button-neutral-text-color-hover,
+    var(--slds-s-button-color-hover, var(--slds-g-color-accent-3))
+  );
+  --sds-c-button-text-color-focus: var(
+    --slds-c-button-neutral-text-color-focus,
+    var(--slds-g-color-accent-3)
+  );
   --sds-c-button-text-color-active: var(
     --slds-c-button-neutral-text-color-active,
     var(--slds-g-color-accent-3)
@@ -296,17 +303,17 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 /* Overriding primitiveBaseButton */
 :host([data-render-mode="shadow"]) [part~='button']:disabled {
-   --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
-   --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
-   --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
+  --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
+  --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
+  --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
 
-   /** 
+  /** 
     * Needed to override 
     * `pointer-event: none` coming from sds
     * that prevent tooltip from showing
    */
-   pointer-events: auto;
-   cursor: default;
+  pointer-events: auto;
+  cursor: default;
 }
 /**
   * A note about fallbacks on the default variant:
@@ -417,9 +424,18 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-text-color-hover: var(--slds-g-color-error-1);
   --slds-c-button-neutral-text-color-focus: var(--slds-g-color-error-1);
   --slds-c-button-neutral-text-color-active: var(--slds-g-color-error-1);
-  --slds-c-button-neutral-color-border-hover: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
-  --slds-c-button-neutral-color-border-focus: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
-  --slds-c-button-neutral-color-border-active: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
+  --slds-c-button-neutral-color-border-hover: var(
+    --slds-c-button-neutral-color-border,
+    var(--slds-g-color-border-1)
+  );
+  --slds-c-button-neutral-color-border-focus: var(
+    --slds-c-button-neutral-color-border,
+    var(--slds-g-color-border-1)
+  );
+  --slds-c-button-neutral-color-border-active: var(
+    --slds-c-button-neutral-color-border,
+    var(--slds-g-color-border-1)
+  );
 }
 :host([data-render-mode="shadow"][variant='brand']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='success']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='destructive']) [part~='button']:disabled {
   --sds-c-button-color-background: var(--slds-g-color-disabled-container-2);
@@ -439,7 +455,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 /**
   * text variant is for button-stateful
 */
-:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button']{
+:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button'] {
   --sds-c-button-spacing-inline: 0;
   --slds-c-button-neutral-text-color: var(--slds-g-color-accent-2);
   --slds-c-button-neutral-color-border: transparent;
@@ -486,7 +502,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 :host([data-render-mode="shadow"]) [part~='end'] {
   display: inline-flex;
   padding-inline-start: 0;
-
 }
 /**
  * A temporarily baked-in utility class until SLDS gets a proper utility package.
@@ -641,7 +656,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Icon */
   --slds-c-buttonicon-color-foreground: var(--slds-g-color-neutral-base-100);
-  --slds-c-buttonicon-color-foreground-hover: color-mix(in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 25%);
+  --slds-c-buttonicon-color-foreground-hover: color-mix(
+    in oklab,
+    var(--slds-g-color-on-surface-inverse-1),
+    transparent 25%
+  );
   --slds-c-buttonicon-color-foreground-focus: var(--slds-g-color-neutral-base-95);
   --slds-c-buttonicon-color-foreground-active: var(--slds-g-color-neutral-base-90);
 
@@ -736,17 +755,17 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   * 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;
-  }
+  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;
+}
 :host([data-render-mode="shadow"][size='large']) [part~='button-icon'],:host([data-render-mode="shadow"][size='medium']) [part~='button-icon'] {
-    height: var(--slds-c-buttonicon-sizing-height, var(--slds-g-sizing-9));
-  }
+  height: var(--slds-c-buttonicon-sizing-height, var(--slds-g-sizing-9));
+}

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

@@ -132,7 +132,8 @@
     var(--slds-c-icon-sizing, var(--slds-g-sizing-9))
   );
 }
-:host([data-render-mode="shadow"][icon-name*='action']),:host([data-render-mode="shadow"])  .slds-icon_container_circle {
+:host([data-render-mode="shadow"][icon-name*='action']),:host([data-render-mode="shadow"]) 
+.slds-icon_container_circle {
   --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);
@@ -233,5 +234,8 @@
 }
 :host([data-render-mode="shadow"]) .slds-icon_container {
   border-radius: var(--slds-c-icon-radius-border, var(--slds-s-icon-radius-border));
-  background-color: var(--slds-c-icon-color-background, var(--slds-s-icon-color-background, var(--sds-c-icon-color-background)));
+  background-color: var(
+    --slds-c-icon-color-background,
+    var(--slds-s-icon-color-background, var(--sds-c-icon-color-background))
+  );
 }

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

@@ -1,5 +1,5 @@
 .fix-notify_toast_animation,
-:host([data-render-mode="shadow"]) .fix-notify_toast_animation {
+:host([data-render-mode='shadow']) .fix-notify_toast_animation {
     animation-name: fadeIn;
     animation-duration: 0.4s;
 }
@@ -15,7 +15,7 @@
 }
 
 .fix-notify_toast_animation.closing,
-:host([data-render-mode="shadow"]) .fix-notify_toast_animation.closing {
+:host([data-render-mode='shadow']) .fix-notify_toast_animation.closing {
     animation-name: fadeOut;
     animation-duration: 0.4s;
 }
@@ -32,27 +32,33 @@
 
 /* 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 {
+: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 {
+:host([data-render-mode='shadow'])
+    .fix-slds-notify--mobile.slds-notify_toast
+    h2 {
     font-size: var(--slds-g-font-size-base, 0.8125rem);
     font-weight: var(--slds-g-font-weight-3, 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 {
+: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 {
+: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.slds.css

@@ -1,91 +1,91 @@
 
-  /* re-assign current slds hooks using deprecated naming conventions */
-  :host([data-render-mode="shadow"]) {
-    /* stylelint-disable */
-    --slds-c-toast-spacing-blockend: var(--slds-c-toast-spacing-block-end);
-    --slds-c-toast-spacing-blockstart: var(--slds-c-toast-spacing-block-start);
-    --slds-c-toast-spacing-inlineend: var(--slds-c-toast-spacing-inline-end);
-    --slds-c-toast-spacing-inlinestart: var(--slds-c-toast-spacing-inline-start);
-    /* stylelint-enable */
-  }
-  :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(--slds-g-info-container-1));
-    color: var(--slds-c-toast-text-color, var(--slds-g-color-on-info-1));
-    border-radius: var(--slds-c-toast-radius-border, var(--slds-g-radius-border-2));
-    margin: var(--slds-g-spacing-2);
-    padding-block-start: var(--slds-c-toast-spacing-blockstart, var(--slds-g-spacing-3));
-    padding-inline-end: var(--slds-c-toast-spacing-inlineend, var(--slds-g-spacing-8));
-    padding-block-end: var(--slds-c-toast-spacing-blockend, var(--slds-g-spacing-3));
-    padding-inline-start: var(--slds-c-toast-spacing-inlinestart, var(--slds-g-spacing-5));
-    min-width: var(--slds-c-toast-sizing-min-width, var(--slds-g-sizing-16));
-    text-align: left;
-    justify-content: flex-start;
-  }
-  :host([data-render-mode="shadow"]) .slds-notify_toast a {
-    color: currentcolor;
-    border: var(--slds-g-sizing-border-1) solid transparent;
-    border-radius: var(--slds-g-radius-border-2);
-  }
-  :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(--slds-g-info-container-1);
-    border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-on-info-1);
-  }
-  :host([data-render-mode="shadow"]) .slds-notify_toast a:active {
-    color: var(--slds-g-color-neutral-100-opacity-50, rgba(255, 255, 255, 50%));
-  }
-  :host([data-render-mode="shadow"]) .slds-notify_toast a[disabled] {
-    color: var(--slds-g-color-neutral-100-opacity-10, rgba(255, 255, 255, 15%));
-  }
-  :host([data-render-mode="shadow"]) .slds-notify_toast .slds-notify__close {
-    float: right;
-    position: absolute;
-    top: var(--slds-g-spacing-3);
-    right: var(--slds-g-spacing-3);
-    margin-inline-start: var(--slds-g-spacing-1);
-    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(--slds-g-font-scale-2);
-    line-height: var(--slds-g-font-lineheight-2);
-  }
-  /* TODO W-12674349: remove after alert is added */
-  :host([data-render-mode="shadow"]) .slds-notify__close {
-    position: absolute;
-    top: 50%;
-    right: var(--slds-g-spacing-3);
-    margin-inline-start: var(--slds-g-spacing-1);
-    transform: translateY(-50%);
-  }
+/* re-assign current slds hooks using deprecated naming conventions */
+:host([data-render-mode="shadow"]) {
+  /* stylelint-disable */
+  --slds-c-toast-spacing-blockend: var(--slds-c-toast-spacing-block-end);
+  --slds-c-toast-spacing-blockstart: var(--slds-c-toast-spacing-block-start);
+  --slds-c-toast-spacing-inlineend: var(--slds-c-toast-spacing-inline-end);
+  --slds-c-toast-spacing-inlinestart: var(--slds-c-toast-spacing-inline-start);
+  /* stylelint-enable */
+}
+: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(--slds-g-info-container-1));
+  color: var(--slds-c-toast-text-color, var(--slds-g-color-on-info-1));
+  border-radius: var(--slds-c-toast-radius-border, var(--slds-g-radius-border-2));
+  margin: var(--slds-g-spacing-2);
+  padding-block-start: var(--slds-c-toast-spacing-blockstart, var(--slds-g-spacing-3));
+  padding-inline-end: var(--slds-c-toast-spacing-inlineend, var(--slds-g-spacing-8));
+  padding-block-end: var(--slds-c-toast-spacing-blockend, var(--slds-g-spacing-3));
+  padding-inline-start: var(--slds-c-toast-spacing-inlinestart, var(--slds-g-spacing-5));
+  min-width: var(--slds-c-toast-sizing-min-width, var(--slds-g-sizing-16));
+  text-align: left;
+  justify-content: flex-start;
+}
+:host([data-render-mode="shadow"]) .slds-notify_toast a {
+  color: currentcolor;
+  border: var(--slds-g-sizing-border-1) solid transparent;
+  border-radius: var(--slds-g-radius-border-2);
+}
+: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(--slds-g-info-container-1);
+  border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-on-info-1);
+}
+:host([data-render-mode="shadow"]) .slds-notify_toast a:active {
+  color: var(--slds-g-color-neutral-100-opacity-50, rgba(255, 255, 255, 50%));
+}
+:host([data-render-mode="shadow"]) .slds-notify_toast a[disabled] {
+  color: var(--slds-g-color-neutral-100-opacity-10, rgba(255, 255, 255, 15%));
+}
+:host([data-render-mode="shadow"]) .slds-notify_toast .slds-notify__close {
+  float: right;
+  position: absolute;
+  top: var(--slds-g-spacing-3);
+  right: var(--slds-g-spacing-3);
+  margin-inline-start: var(--slds-g-spacing-1);
+  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(--slds-g-font-scale-2);
+  line-height: var(--slds-g-font-lineheight-2);
+}
+/* TODO W-12674349: remove after alert is added */
+:host([data-render-mode="shadow"]) .slds-notify__close {
+  position: absolute;
+  top: 50%;
+  right: var(--slds-g-spacing-3);
+  margin-inline-start: var(--slds-g-spacing-1);
+  transform: translateY(-50%);
+}

package/src/lightning/toastContainer/__docs__/toastContainer.md

@@ -12,11 +12,13 @@ By default, the toast container shows a maximum of 3 toast notifications at the
 
 Toast components display at the top center of the container by default. The most recent toast displays at the top of the container, and the oldest toast notification displays at the bottom. Change the toasts' position in the container with the `toastPosition` attribute.
 
-The container position is fixed to the viewport. Adjust the position of the container relative to its parent element with the `containerPosition` attribute. This attribute has two values. 
+The container position is fixed to the viewport. Adjust the position of the container relative to its parent element with the `containerPosition` attribute. This attribute has two values.
+
 - `fixed` - positions the container relative to the initial containing block established by the viewport.
 - `absolute` - positions the container relative to a positioned parent element.
 
 This example creates a page-level toast container in the top-right in the viewport that shows a maximum of 5 toast messages at one time.
+
 ```javascript
 // c/myApp.js
 import { LightningElement } from 'lwc';
@@ -34,5 +36,6 @@ export default class MyApp extends LightningElement {
 #### Accessibility
 
 Toast container follows the SLDS [Global Focus Orchestration](https://www.lightningdesignsystem.com/accessibility/guidelines/global-focus/#global-orchestration) accessibility guidelines, which allow users to use the keyboard shortcut to navigate between toasts.
+
 - Press `Control` + `F6` or `Command` + `F6` for Mac OS to move focus to next toast, if any.
 - Press `Shift` + `Control` + `F6` or `Shift` + `Command` + `F6` for Mac OS to move focus to the previous toast, if any.

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

@@ -1,91 +1,91 @@
 
-  /* re-assign current slds hooks using deprecated naming conventions */
-  :host([data-render-mode="shadow"]) {
-    /* stylelint-disable */
-    --slds-c-toast-spacing-blockend: var(--slds-c-toast-spacing-block-end);
-    --slds-c-toast-spacing-blockstart: var(--slds-c-toast-spacing-block-start);
-    --slds-c-toast-spacing-inlineend: var(--slds-c-toast-spacing-inline-end);
-    --slds-c-toast-spacing-inlinestart: var(--slds-c-toast-spacing-inline-start);
-    /* stylelint-enable */
-  }
-  :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(--slds-g-info-container-1));
-    color: var(--slds-c-toast-text-color, var(--slds-g-color-on-info-1));
-    border-radius: var(--slds-c-toast-radius-border, var(--slds-g-radius-border-2));
-    margin: var(--slds-g-spacing-2);
-    padding-block-start: var(--slds-c-toast-spacing-blockstart, var(--slds-g-spacing-3));
-    padding-inline-end: var(--slds-c-toast-spacing-inlineend, var(--slds-g-spacing-8));
-    padding-block-end: var(--slds-c-toast-spacing-blockend, var(--slds-g-spacing-3));
-    padding-inline-start: var(--slds-c-toast-spacing-inlinestart, var(--slds-g-spacing-5));
-    min-width: var(--slds-c-toast-sizing-min-width, var(--slds-g-sizing-16));
-    text-align: left;
-    justify-content: flex-start;
-  }
-  :host([data-render-mode="shadow"]) .slds-notify_toast a {
-    color: currentcolor;
-    border: var(--slds-g-sizing-border-1) solid transparent;
-    border-radius: var(--slds-g-radius-border-2);
-  }
-  :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(--slds-g-info-container-1);
-    border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-on-info-1);
-  }
-  :host([data-render-mode="shadow"]) .slds-notify_toast a:active {
-    color: var(--slds-g-color-neutral-100-opacity-50, rgba(255, 255, 255, 50%));
-  }
-  :host([data-render-mode="shadow"]) .slds-notify_toast a[disabled] {
-    color: var(--slds-g-color-neutral-100-opacity-10, rgba(255, 255, 255, 15%));
-  }
-  :host([data-render-mode="shadow"]) .slds-notify_toast .slds-notify__close {
-    float: right;
-    position: absolute;
-    top: var(--slds-g-spacing-3);
-    right: var(--slds-g-spacing-3);
-    margin-inline-start: var(--slds-g-spacing-1);
-    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(--slds-g-font-scale-2);
-    line-height: var(--slds-g-font-lineheight-2);
-  }
-  /* TODO W-12674349: remove after alert is added */
-  :host([data-render-mode="shadow"]) .slds-notify__close {
-    position: absolute;
-    top: 50%;
-    right: var(--slds-g-spacing-3);
-    margin-inline-start: var(--slds-g-spacing-1);
-    transform: translateY(-50%);
-  }
+/* re-assign current slds hooks using deprecated naming conventions */
+:host([data-render-mode="shadow"]) {
+  /* stylelint-disable */
+  --slds-c-toast-spacing-blockend: var(--slds-c-toast-spacing-block-end);
+  --slds-c-toast-spacing-blockstart: var(--slds-c-toast-spacing-block-start);
+  --slds-c-toast-spacing-inlineend: var(--slds-c-toast-spacing-inline-end);
+  --slds-c-toast-spacing-inlinestart: var(--slds-c-toast-spacing-inline-start);
+  /* stylelint-enable */
+}
+: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(--slds-g-info-container-1));
+  color: var(--slds-c-toast-text-color, var(--slds-g-color-on-info-1));
+  border-radius: var(--slds-c-toast-radius-border, var(--slds-g-radius-border-2));
+  margin: var(--slds-g-spacing-2);
+  padding-block-start: var(--slds-c-toast-spacing-blockstart, var(--slds-g-spacing-3));
+  padding-inline-end: var(--slds-c-toast-spacing-inlineend, var(--slds-g-spacing-8));
+  padding-block-end: var(--slds-c-toast-spacing-blockend, var(--slds-g-spacing-3));
+  padding-inline-start: var(--slds-c-toast-spacing-inlinestart, var(--slds-g-spacing-5));
+  min-width: var(--slds-c-toast-sizing-min-width, var(--slds-g-sizing-16));
+  text-align: left;
+  justify-content: flex-start;
+}
+:host([data-render-mode="shadow"]) .slds-notify_toast a {
+  color: currentcolor;
+  border: var(--slds-g-sizing-border-1) solid transparent;
+  border-radius: var(--slds-g-radius-border-2);
+}
+: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(--slds-g-info-container-1);
+  border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-on-info-1);
+}
+:host([data-render-mode="shadow"]) .slds-notify_toast a:active {
+  color: var(--slds-g-color-neutral-100-opacity-50, rgba(255, 255, 255, 50%));
+}
+:host([data-render-mode="shadow"]) .slds-notify_toast a[disabled] {
+  color: var(--slds-g-color-neutral-100-opacity-10, rgba(255, 255, 255, 15%));
+}
+:host([data-render-mode="shadow"]) .slds-notify_toast .slds-notify__close {
+  float: right;
+  position: absolute;
+  top: var(--slds-g-spacing-3);
+  right: var(--slds-g-spacing-3);
+  margin-inline-start: var(--slds-g-spacing-1);
+  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(--slds-g-font-scale-2);
+  line-height: var(--slds-g-font-lineheight-2);
+}
+/* TODO W-12674349: remove after alert is added */
+:host([data-render-mode="shadow"]) .slds-notify__close {
+  position: absolute;
+  top: 50%;
+  right: var(--slds-g-spacing-3);
+  margin-inline-start: var(--slds-g-spacing-1);
+  transform: translateY(-50%);
+}