lightning-base-components 1.21.2-alpha → 1.21.3-alpha

package/src/lightning/timepicker/form-element.slds.css

@@ -25,21 +25,22 @@
  * for any needed updates to keep these files in sync
  */
 
-@supports (--styling-hooks: '') {
-    /* TODO: Swap with utility classes */
-    :host([data-render-mode="shadow"]) fieldset {
+/* TODO: Swap with utility classes */
+
+:host([data-render-mode="shadow"]) fieldset {
       border: 0;
       margin: 0;
       padding: 0;
     }
 
-    /* FORM ELEMENT: BASE */
-    :host([data-render-mode="shadow"]) .slds-form-element {
+/* FORM ELEMENT: BASE */
+
+:host([data-render-mode="shadow"]) .slds-form-element {
         position: relative;
         min-width: 0;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__label {
+:host([data-render-mode="shadow"]) .slds-form-element__label {
         overflow-wrap: break-word;
         word-wrap: break-word;
         hyphens: auto;
@@ -51,20 +52,20 @@
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__label:empty {
+:host([data-render-mode="shadow"]) .slds-form-element__label:empty {
         margin: 0;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__control {
+:host([data-render-mode="shadow"]) .slds-form-element__control {
         clear: left; /* NOTE: Ideally we want left to be inline-start but browser support is not ready for that value. We need to figure out better RTL support */
         position: relative;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__control .slds-radio {
+:host([data-render-mode="shadow"]) .slds-form-element__control .slds-radio {
       display: block;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__icon {
+:host([data-render-mode="shadow"]) .slds-form-element__icon {
         display: inline-block;
         position: relative;
         padding-block-start: var(--slds-g-spacing-1);
@@ -73,42 +74,42 @@
         z-index: 1;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__icon .slds-button_icon {
+:host([data-render-mode="shadow"]) .slds-form-element__icon .slds-button_icon {
         position: relative;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__help,:host([data-render-mode="shadow"]) 
+:host([data-render-mode="shadow"]) .slds-form-element__help,:host([data-render-mode="shadow"]) 
     .slds-form-element__helper {
         font-size: var(--slds-g-font-scale-neg-3);
         margin-block-start: calc(var(--slds-g-spacing-1) / 2);
         display: block;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element_edit .slds-form-element__static {
+:host([data-render-mode="shadow"]) .slds-form-element_edit .slds-form-element__static {
         width: calc(100% - var(--slds-g-sizing-7));
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element_readonly {
+:host([data-render-mode="shadow"]) .slds-form-element_readonly {
         flex-basis: 0%;
         border-bottom: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
         margin-block-end: 0;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__control {
+:host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__control {
         padding-block-start: calc(var(--slds-g-spacing-1) / 2);
         padding-block-end: calc(var(--slds-g-spacing-1) / 2);
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__label {
+:host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__label {
         margin-block-end: 0;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__legend {
+:host([data-render-mode="shadow"]) .slds-form-element__legend {
         font-weight: var(--slds-g-font-weight-7);
         float: left;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__addon {
+:host([data-render-mode="shadow"]) .slds-form-element__addon {
         display: inline-block;
         margin-block-start: 0;
         margin-block-end: 0;
@@ -117,7 +118,7 @@
         align-self: center;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__static {
+:host([data-render-mode="shadow"]) .slds-form-element__static {
         overflow-wrap: break-word;
         word-wrap: break-word;
         word-break: break-word;
@@ -128,20 +129,20 @@
         width: 100%;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__static.slds-text-longform *:last-child {
+:host([data-render-mode="shadow"]) .slds-form-element__static.slds-text-longform *:last-child {
         margin-block-end: 0;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__static:empty {
+:host([data-render-mode="shadow"]) .slds-form-element__static:empty {
         min-height: calc(var(--slds-g-sizing-6) + 1px);
         vertical-align: bottom;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element__static--edit {
+:host([data-render-mode="shadow"]) .slds-form-element__static--edit {
         width: calc(100% - var(--slds-g-sizing-7));
     }
 
-    :host([data-render-mode="shadow"]) .slds-required {
+:host([data-render-mode="shadow"]) .slds-required {
         color: var(--slds-g-color-error-base-50);
         margin-block-start: 0;
         margin-block-end: 0;
@@ -149,25 +150,25 @@
         margin-inline-end: calc(var(--slds-g-spacing-1) / 2);
     }
 
-    :host([data-render-mode="shadow"]) .slds-has-error .slds-form-element__help {
+:host([data-render-mode="shadow"]) .slds-has-error .slds-form-element__help {
         color: var(--slds-g-color-error-1);
     }
 
-    :host([data-render-mode="shadow"][invalid]) .slds-form-element__help {
+:host([data-render-mode="shadow"][invalid]) .slds-form-element__help {
         color: var(--slds-g-color-error-1);
     }
 
-    /* --------------------------------------- */
+/* --------------------------------------- */
 
-    /* FORM ELEMENT: STACKED */
+/* FORM ELEMENT: STACKED */
 
-    :host([data-render-mode="shadow"][variant='label-stacked']) {
+:host([data-render-mode="shadow"][variant='label-stacked']) {
         display: block;
     }
 
-    /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
+/* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
 
-    /* :host([variant='label-stacked']):not(.slds-form-element_readonly) {
+/* :host([variant='label-stacked']):not(.slds-form-element_readonly) {
         margin-block-end: var(--slds-g-spacing-2);
     }
 
@@ -175,54 +176,54 @@
         padding: 0 var(--slds-g-spacing-1);
     } */
 
-    /* :host([variant='label-stacked']):not([class*="slds-size"]) {
+/* :host([variant='label-stacked']):not([class*="slds-size"]) {
           width: 100%;
           flex-basis: 100%;
     } */
 
-    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element {
+:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element {
         padding: 0;
         margin-block-end: 0;
     }
 
-    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
+:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
         border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 
-    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
+:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
         width: 100%;
         flex-basis: 100%;
         clear: left;
     }
 
-    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__icon {
+:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__icon {
         float: none;
         padding-block-start: var(--slds-g-spacing-1);
     }
 
-    /* --------------------------------------- */
+/* --------------------------------------- */
 
-    /* FORM ELEMENT: INLINE */
+/* FORM ELEMENT: INLINE */
 
-    :host([data-render-mode="shadow"][variant='label-inline']) {
+:host([data-render-mode="shadow"][variant='label-inline']) {
         display: block;
     }
 
-    /*
+/*
     we have to combine with slds class here to avoid duplication
     of this rule in child elements who import this stylesheet
     in lighting-input this slds class is synonymous with the variant
     */
 
-    :host([data-render-mode="shadow"][variant='label-inline'].slds-form-element_horizontal) {
+:host([data-render-mode="shadow"][variant='label-inline'].slds-form-element_horizontal) {
         padding: var(--slds-g-spacing-1);
         margin-block-end: var(--slds-g-spacing-2);
     }
 
-    /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
+/* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
 
-    /* :host([variant='label-inline']):not(.slds-form-element_readonly) {
+/* :host([variant='label-inline']):not(.slds-form-element_readonly) {
         margin-block-end: var(--slds-g-spacing-2);
     }
 
@@ -235,11 +236,11 @@
         padding: var(--slds-g-spacing-1);
     } */
 
-    :host([data-render-mode="shadow"][variant='label-inline']).slds-is-edited {
+:host([data-render-mode="shadow"][variant='label-inline']).slds-is-edited {
         padding-block-start: var(--slds-g-sizing-6)
     }
 
-    @media (width >= 48em) {
+@media (width >= 48em) {
         :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
           max-width: calc(33% - var(--slds-g-sizing-6)); /* Removing icon width for when the help-text icon is present */
           flex-basis: calc(33% - var(--slds-g-sizing-6)); /* Some form element controls are set to display:flex */
@@ -281,35 +282,34 @@
         }
     }
 
-    /* --------------------------------------- */
+/* --------------------------------------- */
 
-    /* FORM ELEMENT: COMPOUND */
+/* FORM ELEMENT: COMPOUND */
 
-    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row {
+:host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row {
       display: flex;
       margin-bottom: var(--slds-g-spacing-1);
       margin-left: calc(var(--slds-g-spacing-1) * -1);
       margin-right: calc(var(--slds-g-spacing-1) * -1);
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row .slds-form-element__label {
+:host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row .slds-form-element__label {
       padding-top: 0;
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element {
+:host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element {
       padding-left: var(--slds-g-spacing-1);
       padding-right: var(--slds-g-spacing-1);
     }
 
-    :host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
+:host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
       align-items: flex-end;
     }
 
-    /* --------------------------------------- */
+/* --------------------------------------- */
 
-    /* FORM ELEMENT: HIDDEN */
+/* FORM ELEMENT: HIDDEN */
 
-    :host([data-render-mode="shadow"][variant='label-hidden']) .slds-form-element__label {
+:host([data-render-mode="shadow"][variant='label-hidden']) .slds-form-element__label {
       display: none
   }
-}

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

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

package/src/lightning/timepicker/timepicker.slds.css

@@ -1,8 +1,9 @@
 
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
-@supports (--styling-hooks: '') {
+
   /* ASSISTIVE TEXT */
+
   :host([data-render-mode="shadow"]) .slds-assistive-text {
     position: absolute !important;
     margin: -1px !important;
@@ -15,4 +16,3 @@
     text-transform: none !important;
     white-space: nowrap !important;
   }
-}

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

@@ -1,12 +1,10 @@
-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.
+The `lightning/toast` module displays a toast notification with an icon, label, message, and links. Use a toast notification to convey small pieces of information to the user, such as providing feedback and confirmation after the user takes an action. You can set toast notifications to disappear after a certain duration or until the user clicks the close button.
 
 ### Show a Toast
 
-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.
+To show a toast notification, call the function `show(config, comp)` from `lightning/toast` and provide a toast config and a reference to the local component as parameters. The function creates a single page-level toast container if one does not exist. See the `config` attributes section below for a list of properties to include in the config.
 
 ```javascript
-// c/myComponent.js
 import { LightningElement } from 'lwc';
 import Toast from 'lightning/toast';
 
@@ -40,32 +38,39 @@ export default class MyComponent extends LightningElement {
     }
 }
 ```
+
 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.
 
-A page-level [`LightningToastContainer` component](/docs/component-library/bundle/lightning-toast-container/documentation) manages and displays the toast component.
+A page-level [`ToastContainer` 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`.
+**_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 individual objects. The same rules apply to `message`.
 
 ### Component Styling
 
-`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()`.
+`Toast` 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()`.
+
+#### Small screen / Mobile environment
+
+`Toast` is responsive to your screen resolution. For smaller screens or mobile environments, the toast's **icon** and **description** (text stored in `message`, and `messageLinks`, for example) 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).
+
+On small screens and mobile environments, we recommend that you provide links in the toast's title using `label` and `labelLinks` in order to have links visible and interactive.
 
 ### `config` attributes
 
  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 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`. |
+| `label` (required) | Title of the toast. `label` can contain link placeholders in the form of `{0} ... {N}` (index-based) or `{name} ... {someOtherName}` (name-based). The placeholders are replaced with the links in `labelLinks`. |
+| `labelLinks` | `[{url, label}]`, which replaces the `{0} ... {N}` index-based placeholders in `label` or `{ name: {url, label} }`, which replaces the `{name} ... {someOtherName}` named placeholders in `label`. |
+| `message` | Description of the toast. `message` can contain link 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}` index-based 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 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.
+**_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 styling when rendering a link.
 
 #### `variant` attribute
 
-The `variant` attribute sets the component's color and icon. It supports these values.
+The `variant` attribute sets the component's color and icon.
 
 | Value | Color | Icon |
 | --- | --- | --- |
@@ -76,11 +81,10 @@ The `variant` attribute sets the component's color and icon. It supports these v
 
 #### `mode` attribute
 
-The `mode` attribute sets the component's dismissal. It supports these values.
--   `dismissible` - The component automatically disappears after a certain duration. The user can dismiss it early by clicking the close button. The time duration for `dismissible` is 4.8 seconds, or 9.6 seconds if the toast contains a link.
+The `mode` attribute sets the component's dismissal.
+-   `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 when the toast doesn't contain a link 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
 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 |
@@ -93,9 +97,3 @@ If a `mode` value isn't provided, the default `mode` is determined by the value
 | `warning` | No | `sticky`|
 | `error` | Yes | `sticky`|
 | `error` | No | `sticky`|
-
-#### Small screen / Mobile environment
-
-`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).
-
-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

@@ -220,7 +220,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Border radius - shared */
   --sds-c-button-radius-border-startstart: var(
-    --slds-c-button-neutral-radius-border-startstart,
+    --slds-c-button-radius-border-startstart,
     var(
       --slds-c-button-radius-border,
       var(--slds-s-button-radius-border-startstart, var(--slds-s-button-radius-border))

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

@@ -57,44 +57,34 @@
  *        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']) {
+:host([data-render-mode="shadow"][size='xxx-small']) {
     --slds-c-icon-sizing: var(--slds-g-sizing-3);
   }
-
-  :host([data-render-mode="shadow"][size='xx-small']) {
+:host([data-render-mode="shadow"][size='xx-small']) {
     --slds-c-icon-sizing: calc(var(--slds-g-sizing-1) + var(--slds-g-sizing-4));
   }
-
-  :host([data-render-mode="shadow"][size='x-small']) {
+:host([data-render-mode="shadow"][size='x-small']) {
     --slds-c-icon-sizing: var(--slds-g-sizing-5);
   }
-
-  :host([data-render-mode="shadow"][size='small']) {
+:host([data-render-mode="shadow"][size='small']) {
     --slds-c-icon-sizing: var(--slds-g-sizing-7);
   }
-
-  :host([data-render-mode="shadow"][size='large']) {
+:host([data-render-mode="shadow"][size='large']) {
     --slds-c-icon-sizing: var(--slds-g-sizing-10);
   }
-
-  :host([data-render-mode="shadow"][variant='warning']) {
+:host([data-render-mode="shadow"][variant='warning']) {
     --slds-c-icon-color-foreground: var(--slds-g-color-warning-1);
   }
-
-  :host([data-render-mode="shadow"][variant='success']) {
+:host([data-render-mode="shadow"][variant='success']) {
     --slds-c-icon-color-foreground: var(--slds-g-color-success-1);
   }
-
-  :host([data-render-mode="shadow"][variant='error']) {
+:host([data-render-mode="shadow"][variant='error']) {
     --slds-c-icon-color-foreground: var(--slds-g-color-error-1);
   }
-
-  :host([data-render-mode="shadow"][variant='light']) {
+:host([data-render-mode="shadow"][variant='light']) {
     --slds-c-icon-color-foreground: var(--slds-g-color-neutral-base-70);
   }
-
-  :host([data-render-mode="shadow"]) [part='boundary'] {
+: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(--slds-g-radius-border-2));
     --sds-c-icon-sizing-border: var(--slds-c-icon-sizing-border);
@@ -123,19 +113,16 @@
      */
     display: inline-flex;
   }
-
-  :host([data-render-mode="shadow"]) [part='icon'] {
+:host([data-render-mode="shadow"]) [part='icon'] {
     --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']) {
+:host([data-render-mode="shadow"][icon-name*='action']) {
     --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
  *

package/src/lightning/toast/toast.js

@@ -5,6 +5,7 @@ import {
     normalizeString,
     isMacOS,
     isiOS,
+    isCSR,
 } from 'lightning/utilsPrivate';
 import {
     instanceName,
@@ -592,19 +593,21 @@ export default class Toast extends LightningShadowBaseClass {
      * @param {HTMLElement} source - source element which trigger the toast showing, typically this from local component
      */
     static show(config, source) {
-        // make sure the page-level container is created
-        ToastContainer.instance();
-        // create and dispatch the ShowToastEvent
-        const event = new ShowToastEvent({
-            ...config,
-            toast: this,
-            source,
-        });
+        if (isCSR) {
+            // make sure the page-level container is created
+            ToastContainer.instance();
+            // create and dispatch the ShowToastEvent
+            const event = new ShowToastEvent({
+                ...config,
+                toast: this,
+                source,
+            });
 
-        if (source) {
-            source.dispatchEvent(event);
-        } else {
-            document.body.dispatchEvent(event);
+            if (source) {
+                source.dispatchEvent(event);
+            } else {
+                document.body.dispatchEvent(event);
+            }
         }
     }
 }

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

@@ -1,13 +1,13 @@
 
-@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);
+    /* 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;
@@ -25,32 +25,26 @@
     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;
@@ -59,19 +53,16 @@
     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;
@@ -85,13 +76,11 @@
     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-size-base);
     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;
@@ -100,4 +89,3 @@
     margin-inline-start: var(--slds-g-spacing-1);
     transform: translateY(-50%);
   }
-}