lightning-base-components 1.22.2-alpha → 1.26.1-rc.0-alpha

package/src/lightning/timepicker/timepicker.html

@@ -6,7 +6,11 @@
             </template>
             {label}
         </label>
-        <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
+        <lightning-helptext
+            if:true={fieldLevelHelp}
+            content={fieldLevelHelp}
+            alternative-text={helptextAlternativeText}
+        ></lightning-helptext>
     </template>
     <div class="slds-form-element__control">
         <lightning-base-combobox
@@ -36,12 +40,20 @@
             onfocus={handleFocus}
             onblur={handleBlur}
             onselect={handleTimeSelect}
-            data-aria-invalid={computedAriaInvalid}
+            aria-invalid={computedAriaInvalid}
             root-aria-node={rootAriaNode}
             input-described-by-elements={ariaDescribedByElements}
-            aria-error-message-elements={ariaErrorMessageElements}
+            aria-error-message-element={ariaErrorMessageElement}
         >
         </lightning-base-combobox>
     </div>
-    <div id="error-message" data-error-message class={computedClass} aria-live="polite">{_errorMessage}</div>
+    <div
+        id="error-message"
+        data-error-message
+        data-name={name}
+        class={computedClass}
+        aria-live="polite"
+    >
+        {_errorMessage}
+    </div>
 </template>

package/src/lightning/timepicker/timepicker.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 /* eslint-disable @lwc/lwc/no-api-reassignments */
 import labelInvalidDate from '@salesforce/label/LightningDateTimePicker.invalidDate';
 import labelRangeOverflow from '@salesforce/label/LightningDateTimePicker.rangeOverflow';
@@ -138,6 +143,12 @@ export default class LightningTimePicker extends LightningShadowBaseClass {
         } else {
             this.ariaDescribedByElements = [el];
         }
+        if (
+            this.errorMessageElement &&
+            !this._ariaDescribedByElements.includes(this.errorMessageElement)
+        ) {
+            this._ariaDescribedByElements.push(this.errorMessageElement);
+        }
     }
 
     @api
@@ -158,6 +169,10 @@ export default class LightningTimePicker extends LightningShadowBaseClass {
 
         this._value = normalizedTime.isoValue;
         this._displayValue = normalizedTime.displayValue;
+
+        if (this._items.length) {
+            this._items = this.timeList;
+        }
     }
 
     @api
@@ -174,9 +189,6 @@ export default class LightningTimePicker extends LightningShadowBaseClass {
     }
     set readOnly(value) {
         this._readonly = normalizeBoolean(value);
-        if (this._readonly) {
-            this._variant = VARIANT.STANDARD;
-        }
     }
 
     @api
@@ -291,16 +303,14 @@ export default class LightningTimePicker extends LightningShadowBaseClass {
         this.connected = false;
     }
 
-    @api ariaErrorMessageElement;
-
-    get ariaErrorMessageElements() {
-        const elements = [this.ariaErrorMessageElement];
-        if (this._errorMessage) {
-            elements.push(this.template.querySelector('[data-error-message]'));
-        }
-        return elements;
+    get errorMessageElement() {
+        return isCSR
+            ? this.template.querySelector('[data-error-message]')
+            : null;
     }
 
+    @api ariaErrorMessageElement;
+
     synchronizeA11y() {
         const label = this.template.querySelector('label');
 
@@ -340,8 +350,9 @@ export default class LightningTimePicker extends LightningShadowBaseClass {
     }
 
     get computedClass() {
-        let displayClass = this._errorMessage ? 'slds-show' : 'slds-hide';
-        return 'slds-form-element__help ' + displayClass;
+        return this._errorMessage
+            ? 'slds-form-element__help slds-show'
+            : 'slds-form-element__help';
     }
 
     get computedLabelClass() {
@@ -468,6 +479,9 @@ export default class LightningTimePicker extends LightningShadowBaseClass {
 
         // keeping the display value in sync with the element's value
         this._displayValue = event.detail.text;
+
+        // if user types in time, remove dropdown options panel
+        this.getCombobox().closeDropdown();
     }
 
     handleTimeSelect(event) {

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

@@ -1,9 +1,6 @@
 
-/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
-  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* ASSISTIVE TEXT */
-
   :host([data-render-mode="shadow"]) .slds-assistive-text {
     position: absolute !important;
     margin: -1px !important;

package/src/lightning/timepicker/utils.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import {
     getISOTimeString,
     parseTime,

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

@@ -1,8 +1,19 @@
-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.
+Use the `lightning/toast` module to display a toast notification with an icon, label, message, and links.
 
-### Show a Toast
+Toast notifications convey small pieces of information to the user, such as 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.
 
-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.
+To specify your toast position and the maximum number of toasts to display, use `lightning/toast` with `lightning/toastContainer`.
+
+#### Show a Toast
+
+To show a toast notification, call the function `show(config, comp)` from `lightning/toast`. The function creates a single page-level toast container if one does not exist. The `show(config, comp)` function contains two parameters:
+
+- The `config` parameter references an object that specifies toast configuration attributes.  See the **Toast Configuration Attributes** section for a list of properties to include in the config.
+- The `comp` parameter is a reference to the local component or `this`.
+
+This example creates an informational toast that displays until the user dismisses it.
+The toast title and message each include links, using two different approaches.
+The component's `handleClick` handler triggers the toast opening.
 
 ```javascript
 import { LightningElement } from 'lwc';
@@ -10,7 +21,7 @@ import Toast from 'lightning/toast';
 
 export default class MyComponent extends LightningElement {
     ...
-    onClick() {
+    handleClick() {
         ...
         Toast.show({
             label: 'This is a toast label which shows {0}, you can learn more about its accessibility from {1}',
@@ -39,36 +50,33 @@ 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 [`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 individual objects. The same rules apply to `message`.
+The required `label` string specifies the toast title and the optional `message` string is the toast message.
+The `{0}`, `{1}`, `{salesforceLink}`, and `{slackLink}` placeholders are replaced with links that are specified in their `url` properties.
+
+`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
+In the example, `label` uses index-based link placeholders, and `message` uses name-based link placeholders.
+
+#### Component Styling
 
 `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
+#### Small Screens and 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).
+`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.
+To provide links in toasts on small screens and mobile environments, we recommend that you include links in the toast's title using `label` and `labelLinks`.
 
-### `config` attributes
+#### Toast Configuration Attributes
 
- Attribute | Description  |
-|----------| ------------ |
-| `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. |
+For more information on the toast configuration attributes, see the Specification tab.
 
-**_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.
+When you use `labelLinks` or `messageLinks`, the content of `label` or `message` is rendered using [`lightning-formatted-rich-text`](/docs/component-library/bundle/lightning-formatted-rich-text/documentation). See the 
+ [`lightning-formatted-rich-text` documentation](/docs/component-library/bundle/lightning-formatted-rich-text/documentation) for expected styling when rendering a link.
 
-#### `variant` attribute
+#### Toast Variants
 
 The `variant` attribute sets the component's color and icon.
 
@@ -79,13 +87,14 @@ The `variant` attribute sets the component's color and icon.
 | `warning` | orange | `utility:warning`|
 | `error` | red | `utility:error`|
 
-#### `mode` attribute
+#### Toast Dismissal
 
 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.
 
-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`.
+- `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.
+
+If you don't provide a `mode` value, the toast dismissal 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 |
 | --- | --- | --- |

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

@@ -516,8 +516,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   border: 0;
   text-align: inherit;
 }
-/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
-  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 /**
   * part - button-icon
   *
@@ -555,7 +553,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 /* slds-icon interaction states */
 :host([data-render-mode="shadow"]) [part~='button-icon']:hover {
   --slds-c-icon-color-foreground: var(
-    --slds-c-buttonicon-color-foreground-hover, 
+    --slds-c-buttonicon-color-foreground-hover,
     var(--slds-g-color-accent-3)
   );
 }
@@ -749,3 +747,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     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));
+  }

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

@@ -7,29 +7,29 @@
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) h1 {
-  font-size: var(--slds-g-font-scale-1);
+  font-size: var(--slds-g-font-scale-5);
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) h2 {
-  font-size: var(--slds-g-font-scale-neg-1);
+  font-size: var(--slds-g-font-scale-3);
   font-weight: var(--slds-g-font-weight-7);
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) h3 {
-  font-size: var(--slds-g-font-scale-neg-1);
+  font-size: var(--slds-g-font-scale-3);
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) h4 {
-  font-size: var(--slds-g-font-scale-neg-3);
+  font-size: var(--slds-g-font-scale-1);
   font-weight: var(--slds-g-font-weight-7);
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) h5 {
-  font-size: var(--slds-g-font-scale-neg-3);
+  font-size: var(--slds-g-font-scale-1);
 }
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) h6 {
-  font-size: var(--slds-g-font-scale-neg-4);
+  font-size: var(--slds-g-font-scale-neg-1);
   font-weight: var(--slds-g-font-weight-7);
 }
 

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

@@ -57,50 +57,55 @@
  *        Additionally, LBC are currently relying on 'part' attributes to
  *        receive styling. Authoring styles that rely on slots is not recommended.
  */
-: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']) {
-    --slds-c-icon-sizing: calc(var(--slds-g-sizing-1) + var(--slds-g-sizing-4));
-  }
-:host([data-render-mode="shadow"][size='x-small']) {
-    --slds-c-icon-sizing: var(--slds-g-sizing-5);
-  }
-:host([data-render-mode="shadow"][size='small']) {
-    --slds-c-icon-sizing: var(--slds-g-sizing-7);
-  }
-:host([data-render-mode="shadow"][size='large']) {
-    --slds-c-icon-sizing: var(--slds-g-sizing-10);
-  }
+:host([data-render-mode="shadow"]) {
+  vertical-align: middle;
+}
+:host([data-render-mode="shadow"][size='xxx-small']),:host([data-render-mode="shadow"]) 
+.slds-icon_xxx-small {
+  --slds-c-icon-sizing: var(--slds-g-sizing-3);
+}
+:host([data-render-mode="shadow"][size='xx-small']),:host([data-render-mode="shadow"]) 
+.slds-icon_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"]) 
+.slds-icon_x-small {
+  --slds-c-icon-sizing: var(--slds-g-sizing-5);
+}
+:host([data-render-mode="shadow"][size='small']),:host([data-render-mode="shadow"]) 
+.slds-icon_small {
+  --slds-c-icon-sizing: var(--slds-g-sizing-7);
+}
+:host([data-render-mode="shadow"][size='large']),:host([data-render-mode="shadow"]) 
+.slds-icon_large {
+  --slds-c-icon-sizing: var(--slds-g-sizing-10);
+}
 :host([data-render-mode="shadow"][variant='warning']) {
-    --slds-c-icon-color-foreground: var(--slds-g-color-warning-1);
-  }
+  --slds-c-icon-color-foreground: var(--slds-g-color-warning-1);
+}
 :host([data-render-mode="shadow"][variant='success']) {
-    --slds-c-icon-color-foreground: var(--slds-g-color-success-1);
-  }
+  --slds-c-icon-color-foreground: var(--slds-g-color-success-1);
+}
 :host([data-render-mode="shadow"][variant='error']) {
-    --slds-c-icon-color-foreground: var(--slds-g-color-error-1);
-  }
+  --slds-c-icon-color-foreground: var(--slds-g-color-error-1);
+}
 :host([data-render-mode="shadow"][variant='light']) {
-    --slds-c-icon-color-foreground: var(--slds-g-color-neutral-base-70);
-  }
+  --slds-c-icon-color-foreground: var(--slds-g-color-neutral-base-70);
+}
 :host([data-render-mode="shadow"]) [part='boundary'] {
-    /* --sds-c-icon-color-background: var(--slds-c-icon-color-background); */
-    --sds-c-icon-radius-border: var(--slds-c-icon-radius-border, var(--slds-g-radius-border-2));
-    --sds-c-icon-sizing-border: var(--slds-c-icon-sizing-border);
-    --sds-c-icon-color-border: var(--slds-c-icon-color-border);
-    --sds-c-icon-spacing-block-start: var(
-      --slds-c-icon-spacing-blockstart,
-      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-inlinestart,
-      var(--slds-c-icon-spacing-inline)
-    );
-    --sds-c-icon-spacing-inline-end: var(--slds-c-icon-spacing-inlineend, var(--slds-c-icon-spacing-inline));
+  /* --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, 0);
+  --sds-c-icon-color-border: var(--slds-c-icon-color-border);
+  --sds-c-icon-spacing-block-start: var(--slds-c-icon-spacing-blockstart, 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-inlinestart,
+    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
      * 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
@@ -111,18 +116,28 @@
      *
      * If lightning-icon is refactored into a single component, this line can be removed.
      */
-    display: inline-flex;
-  }
+  display: inline-flex;
+}
+:host([data-render-mode="shadow"]) .slds-input__icon [part='boundary'] {
+  border-style: none;
+}
 :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']) {
-    --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);
-  }
+  --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"])  .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);
+  --slds-c-icon-sizing-border: var(--slds-g-sizing-3);
+}
 /**
  * P R I V A T E
  *
@@ -142,12 +157,23 @@
  * 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 {
+  display: inline-flex;
+  height: var(
+    --slds-c-icon-sizing-height,
+    var(--slds-c-icon-sizing, var(--slds-s-icon-sizing, var(--slds-g-sizing-9)))
+  );
+  width: var(
+    --slds-c-icon-sizing-width,
+    var(--slds-c-icon-sizing, var(--slds-s-icon-sizing, var(--slds-g-sizing-9)))
+  );
+  fill: var(--slds-c-icon-color-foreground, var(--slds-g-color-neutral-base-100));
+}
 :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(
-      --slds-g-color-on-surface-1))
+    var(--sds-c-icon-color-foreground-default, var(--slds-g-color-on-surface-1))
   );
 }
 :host([data-render-mode="shadow"]) .slds-icon-text-default.slds-is-disabled {
@@ -199,9 +225,13 @@
   --sds-c-icon-sizing-height: 1.25rem;
   --sds-c-icon-sizing-width: 1.25rem;
 }
-:host([data-render-mode="shadow"][data-input-pill-close-primicon]) [part="icon"] {
+:host([data-render-mode="shadow"][data-input-pill-close-primicon]) [part='icon'] {
   --sds-c-icon-color-foreground: none;
 }
-:host([data-render-mode="shadow"][data-input-pill-close-primicon]) [part="icon"]:hover {
+:host([data-render-mode="shadow"][data-input-pill-close-primicon]) [part='icon']:hover {
   --sds-c-icon-color-foreground: var(--slds-g-color-accent-4);
 }
+: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)));
+}

package/src/lightning/toast/toast.html

@@ -1,8 +1,7 @@
 <template>
     <lightning-focus-trap>
-        <div class="slds-notify_container slds-is-relative" part="toast">
+        <div class="slds-notify_container slds-is-relative" part="toast" role="alert" aria-live="polite" aria-atomic="true">
             <div class={toastClass}
-                role="status"
                 onanimationend={handleAnimationEnd}
                 onfocusin={handleFocusIn}
                 onfocusout={handleFocusOut}>

package/src/lightning/toast/toast.js

@@ -1,11 +1,17 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import { api, track } from 'lwc';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import {
-    makeAbsoluteUrl,
+    formatUrl,
     normalizeString,
     isMacOS,
     isiOS,
     isCSR,
+    privateContext,
 } from 'lightning/utilsPrivate';
 import {
     instanceName,
@@ -44,6 +50,8 @@ const DURATION_LINK = 9600;
 const DURATION_NO_LINK = 4800;
 const MIN_BROWSER_WIDTH = 480;
 
+const { setContext, assertContext } = privateContext;
+
 /**
  * A notification element used to convey a label.
  */
@@ -103,30 +111,34 @@ export default class Toast extends LightningShadowBaseClass {
     // boolean indicates if the current browser width is less than MIN_BROWSER_WIDTH
     @track _isSmallerBrowserWidth;
 
-    // an array of { url, label }, which will replace the {0}... {N} placeholders in label string or
-    // a map of { name: { url, label } } which will replaced the {name} ... {anotherName} placeholders in label string
+    /**
+     * An array of { url, label }, which replaces the {0}... {N} placeholders in label string or
+     * a map of { name: { url, label } }, which replaces the {name} ... {anotherName} placeholders in label string
+     */
     @api labelLinks;
 
-    // an array of { url, label }, which will replace the {0}... {N} placeholders in message string or
-    // a map of { name: { url, label } } which will replaced the {name} ... {anotherName} placeholders in message string
+    /**
+     * An array of { url, label }, which replaces the {0}... {N} placeholders in message string or
+     * a map of { name: { url, label } }, which replaces the {name} ... {anotherName} placeholders in message string
+     */
     @api messageLinks;
 
     /**
-     * return true if label has link
+     * Returns true if label has links.
      */
     get hasLabelLink() {
         return this.hasLinkData(this.labelLinks);
     }
 
     /**
-     * return true if message has link
+     * Returns true if message has links.
      */
     get hasMessageLink() {
         return this.hasLinkData(this.messageLinks);
     }
 
     /**
-     * label of the toast
+     * Title of the toast.
      * @type {string} return the string of toast label which can contain anchor tags
      * @required
      */
@@ -139,9 +151,8 @@ export default class Toast extends LightningShadowBaseClass {
     }
 
     /**
-     * message of the toast
+     * Message of the toast.
      * @type {string} return the string of toast message which can contain anchor tags
-     * @required
      */
     @api get message() {
         return this.buildLinks(this._message, this.messageLinks) || '';
@@ -343,7 +354,7 @@ export default class Toast extends LightningShadowBaseClass {
             return match;
         }
         const { url, label } = link;
-        return `<a href='${makeAbsoluteUrl(
+        return `<a href='${formatUrl(
             url
         )}' target='_blank' title='${label}'>${label}</a>`;
     }
@@ -500,6 +511,7 @@ export default class Toast extends LightningShadowBaseClass {
      * add listener to handle the screen orientation change
      */
     addOrientationChangeListener() {
+        assertContext(this);
         this._portraitMatchMedia = window.matchMedia('(orientation: portrait)');
         this._screenOrientationChangeHandler =
             this.determineSmallerScreen.bind(this);
@@ -533,6 +545,11 @@ export default class Toast extends LightningShadowBaseClass {
         }
     }
 
+    constructor() {
+        super();
+        setContext(this);
+    }
+
     connectedCallback() {
         super.connectedCallback();
         this.registerWithContainer();

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

@@ -40,8 +40,8 @@
 
 .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;
+    font-size: var(--slds-g-font-size-base, 0.8125rem);
+    font-weight: var(--slds-g-font-weight-3, 300);
 }
 
 /* for screen smaller than 480px */

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

@@ -78,7 +78,7 @@
   }
   /* 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);
+    font-size: var(--slds-g-font-scale-2);
     line-height: var(--slds-g-font-lineheight-2);
   }
   /* TODO W-12674349: remove after alert is added */

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

@@ -1,7 +1,5 @@
 Use the `lightning/toastContainer` module to manage a list of toast components and their order. Each site page supports a single toast container. You can create toast notifications with [lightning/toast](/docs/component-library/bundle/lightning-toast/documentation) and manage them using `lightning/toastContainer`.
 
-This module is available only for LWR Sites for Experience Cloud. For more information, see [Create Components for LWR Sites](https://developer.salesforce.com/docs/atlas.en-us.exp_cloud_lwr.meta/exp_cloud_lwr/get_started_components.htm).
-
 This example creates a basic toast container component that handles and displays all the page-level toast messages.
 
 ```javascript
@@ -27,7 +25,7 @@ import ToastContainer from 'lightning/toastContainer';
 export default class MyApp extends LightningElement {
     connectedCallback() {
         const toastContainer = ToastContainer.instance();
-        toastContainer.maxShown = 5;
+        toastContainer.maxToasts = 5;
         toastContainer.toastPosition = 'top-right';
     }
 }