lightning-base-components 1.18.8-ssr → 1.19.2-alpha

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

@@ -1,16 +1,14 @@
-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.
+The `LightningToast` component displays a toast notification with an icon, label, message, and links. Use a toast to convey small pieces of information to the user, providing feedback and confirmation after the user takes an action. Toasts can disappear after a certain duration or until the user clicks the close button.
 
 ### 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.
+To show a toast, call the static function `show(config, comp)` from `lightning/toast` and provide a toast configuration and a reference of the local component as parameters.
 The function also creates a single page-level toast container if one does not exist.
 
 ```javascript
 // c/myComponent.js
 import { LightningElement } from 'lwc';
-import  Toast from 'lightning/toast';
+import Toast from 'lightning/toast';
 
 export default class MyComponent extends LightningElement {
     ...
@@ -42,28 +40,28 @@ export default class MyComponent extends LightningElement {
     }
 }
 ```
-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.
+In this example, the toast configuration uses two ways to specify links (see note below). The toast displays a sticky mode informational toast message with a `label` string as the toast title and a `message` string as the toast message.  The `{0}`, `{1}`, `{salesforceLink}`, and `{slackLink}` placeholders are replaced with their `url` specified links.
 
-The toast component will display and be managed in a page level `LightningToastContainer` component.
+A page-level [`LightningToastContainer` component](/docs/component-library/bundle/lightning-toast-container/documentation) manages and displays the toast component.
 
 **_NOTE:_** `label` can have index-based or name-based link placeholders. In the case of index-based link placeholders, `labelLinks` must be defined as an array, otherwise, `labelLinks` must be defined as a map. Same applies to `message`.
 
 ### Component Styling
 
-`LightningToast` implements the [toast](https://www.lightningdesignsystem.com/components/toast/) blueprint in the Salesforce Lightning Design System (SLDS).
+`LightningToast` implements the [toast](https://www.lightningdesignsystem.com/components/toast/) blueprint in the Salesforce Lightning Design System (SLDS). [SLDS styling hooks](https://www.lightningdesignsystem.com/components/toast/#Styling-Hooks-Overview) aren't supported with programmatic creation of toasts via `Toast.show()`.
 
 ### `config` attributes
 
- Attribute | Explanation  |
+ Attribute | Description  |
 |----------| ------------ |
-| `label` (required) | title of the toast, it can contain placeholders in the form of `{0} ... {N}` (index-based) or `{name} ... {someOtherName}` (name-based). The placeholders are replaced with the links on `labelLinks`. |
-| `labelLinks` | [{url, label}], which 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. |
+| `label` (required) | Title of the toast, it can contain placeholders in the form of `{0} ... {N}` (index-based) or `{name} ... {someOtherName}` (name-based). The placeholders are replaced with the links on `labelLinks`. |
+| `labelLinks` | [{url, label}], which replaces the `{0} ... {N}` indexed placeholders in `label` or `{ name: {url, label} }`, which replaces the `{name} ... {someOtherName}` named placeholders in `label`. |
+| `message` | Description of the toast, it can contain placeholders in the form of `{0} ... {N}` (index-based) or `{name} ... {someOtherName}` (name-based). The placeholders are replaced with the links on `messageLinks`. |
+| `messageLinks` | [{url, label}], which replaces the `{0} ... {N}` indexed placeholders in `message` or `{ name: {url, label} }`, which replaces the `{name} ... {someOtherName}` named placeholders in `message`. |
+| `variant` | Appearance of the toast. |
+| `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.
+**_NOTE:_**  When `labelLinks` (or `messageLinks`) is passed to the `config` parameter, the content of `label` (or `message`) is rendered using [`lightning-formatted-rich-text`](https://developer.salesforce.com/docs/component-library/bundle/lightning-formatted-rich-text/documentation). consult the documentation for expected result when link presents.
 
 #### `variant` attribute
 
@@ -82,8 +80,8 @@ 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`.
+##### Default Mode
+If a `mode` value isn't provided, the default `mode` is determined by the value of `variant` and whether the `toast` has a link or links present in `label` or `message`.
 
 | Variant | Has link? | Default Mode |
 | --- | --- | --- |
@@ -98,6 +96,6 @@ If no `mode` is provided, the default `mode` will be determined by the value of
 
 #### 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).
+`LightningToast` is responsive to your screen resolution. For smaller screens or mobile environments, the toast's **icon** and **description** (i.e. text stored in `message`, and `messageLinks`) is **not shown** due to the screen's width limitation (see [Toast blueprint screen variants](https://www.lightningdesignsystem.com/guidelines/messaging/components/toasts/#flavor-variants-screen).
 
-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.
+On small screens and mobile environments, we recommend that you provide links in the toast's title (ie `label` and `labelLinks`) in order to have links visible and interactive.

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

@@ -165,7 +165,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* slds-icon mapping */
     --slds-c-icon-sizing-border: 0;
     --slds-c-icon-sizing: 0.875rem;
-    --slds-c-icon-color-foreground: var(--slds-c-button-icon-color-foreground, currentColor);
+    --slds-c-icon-color-foreground: var(--slds-c-button-icon-color-foreground, currentcolor);
 
     --sds-c-button-line-height: var(
       --slds-c-button-neutral-font-lineheight,
@@ -487,7 +487,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /**
    * Represents inner spacing around icon for icon-position="left", when present
    */
-  :host([data-render-mode="shadow"]) [part~='start'] {
+  :host([data-render-mode="shadow"]) [part='start'] {
     display: inline-flex;
     padding-inline-end: 0;
   }
@@ -495,7 +495,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /**
    * Represents inner spacing around icon for icon-position="right", when present
    */
-  :host([data-render-mode="shadow"]) [part~='end'] {
+  :host([data-render-mode="shadow"]) [part='end'] {
     display: inline-flex;
     padding-inline-start: 0;
   }
@@ -572,7 +572,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     );
     --slds-c-button-neutral-color-background-active: var(
       --slds-c-buttonicon-color-background-active,
-      var(--slds-c-button-neutral-color-background-focus)
+      transparent
     );
 
     /* Spacing */
@@ -600,7 +600,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     );
     --slds-c-button-neutral-color-border-active: var(
       --slds-c-buttonicon-color-border-active,
-      var(--slds-c-button-neutral-color-border-focus)
+      var(--slds-c-buttonicon-color-border-focus)
     );
 
     /* Shadow */
@@ -890,7 +890,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       * End part
       */
   :host([data-render-mode="shadow"]) [part='end'] {
-    padding-inline-start: var(--slds-c-buttonicon-end-spacing-inline-start, 0);
+    padding-inline-start: var(--slds-c-buttonicon-end-spacing-inlinestart, 0);
   }
 
   /**

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

@@ -3,8 +3,6 @@
   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;
 }
 

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

@@ -48,39 +48,39 @@
  */
 
 @supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"][size~='xxx-small']) {
+  :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']) {
+  :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']) {
+  :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']) {
+  :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']) {
+  :host([data-render-mode="shadow"][size='large']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-10, 3rem);
   }
 
-  :host([data-render-mode="shadow"][variant~='warning']) {
+  :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']) {
+  :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']) {
+  :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']) {
+  :host([data-render-mode="shadow"][variant='light']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
   }
 
@@ -90,15 +90,15 @@
     --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,
+      --slds-c-icon-spacing-blockstart,
       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-block-end: var(--slds-c-icon-spacing-blockend, var(--slds-c-icon-spacing-block));
     --sds-c-icon-spacing-inline-start: var(
-      --slds-c-icon-spacing-inline-start,
+      --slds-c-icon-spacing-inlinestart,
       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));
+    --sds-c-icon-spacing-inline-end: var(--slds-c-icon-spacing-inlineend, var(--slds-c-icon-spacing-inline));
 
     /**
      * There's a divergence in LBC that we have to support here: LBC splits their
@@ -194,7 +194,7 @@
  */
 
 :host([data-render-mode="shadow"]) .slds-icon_disabled {
-  background-color: currentColor;
+  background-color: currentcolor;
 }
 
 :host([data-render-mode="shadow"]) .slds-input__icon {

package/src/lightning/toast/toast.css

@@ -1,4 +1,4 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './toast.slds.css';
 @import './icon.slds.css';
 @import './button-icon.slds.css';
@@ -6,7 +6,7 @@
 @import 'lightning/sldsUtilsThemes';
 @import 'lightning/sldsUtilsMargin';
 @import 'lightning/sldsUtilsPosition';
-@import 'lightning/sldsUtilsGrid';
+@import 'lightning/sldsUtilsGrid'; */
 
 .fix-notify_toast_animation,
 :host([data-render-mode="shadow"]) .fix-notify_toast_animation {

package/src/lightning/toast/toast.js

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

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

@@ -2,5 +2,5 @@
 <LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
     <isExposed>true</isExposed>
      <minApiVersion>59.0</minApiVersion>
-    <support>BETA</support>
+    <support>GA</support>
 </LightningComponentBundle>

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

@@ -1,97 +1,103 @@
 
-: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%);
+@supports (--styling-hooks: '') {
+  /* re-assign current slds hooks using deprecated naming conventions */
+  :host([data-render-mode="shadow"]) {
+    --slds-c-toast-spacing-block-end: var(--slds-c-toast-spacing-blockend);
+    --slds-c-toast-spacing-block-start: var(--slds-c-toast-spacing-blockstart);
+    --slds-c-toast-spacing-inline-end: var(--slds-c-toast-spacing-inlineend);
+    --slds-c-toast-spacing-inline-start: var(--slds-c-toast-spacing-inlinestart);
+  }
+
+  :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-blockstart, var(--sds-g-spacing-3, 0.75rem));
+    padding-inline-end: var(--slds-c-toast-spacing-inlineend, var(--sds-g-spacing-8, 3rem));
+    padding-block-end: var(--slds-c-toast-spacing-blockend, var(--sds-g-spacing-3, 0.75rem));
+    padding-inline-start: var(--slds-c-toast-spacing-inlinestart, 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, 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(--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%);
+  }
 }