lightning-base-components 1.22.3-alpha → 1.26.2-rc.0-alpha

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';
     }
 }

package/src/lightning/toastContainer/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/toastContainer.js

@@ -1,4 +1,10 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import { api, createElement } from 'lwc';
+import { features } from 'lightning/features';
 import { classSet } from 'lightning/utils';
 import {
     instanceName,
@@ -10,6 +16,7 @@ import {
     normalizeNumber,
     normalizeString,
     isCSR,
+    privateContext,
 } from 'lightning/utilsPrivate';
 import { createF6Controller } from 'lightning/f6Controller';
 import {
@@ -18,6 +25,8 @@ import {
 } from 'lightning/focusUtils';
 import LightningOverlay from 'lightning/overlay';
 
+const { setContext, assertContext } = privateContext;
+
 const CONSOLE_ERROR_MESSAGES = {
     MISSING_PROPERTY: 'Unable to show toast, missing toast property\'s "{0}"',
     MISSING_CONFIG: 'Unable to show toast, missing toast config.',
@@ -66,6 +75,9 @@ const configure = (toastContainer, config) => {
 
 const CLOSE_EVENT_NAME = 'close';
 
+/**
+ * Manages a list of toast components and their display position and order.
+ */
 export default class ToastContainer extends LightningOverlay {
     static [instanceName] = 'lightning-toast-container';
     static [properties] = ['containerPosition', 'maxToasts', 'toastPosition'];
@@ -101,6 +113,7 @@ export default class ToastContainer extends LightningOverlay {
 
     /**
      * Controls the position of the toast container <div> related to the containing element. Supported values are 'absolute' and 'fixed'.
+     * The default is fixed.
      * @type {string}
      * @default fixed
      */
@@ -120,6 +133,7 @@ export default class ToastContainer extends LightningOverlay {
 
     /**
      * Sets the maximum number of toast components shown at a given time.
+     * The default is 3.
      * @type {number}
      * @default 3
      */
@@ -144,6 +158,7 @@ export default class ToastContainer extends LightningOverlay {
 
     /**
      * Controls the position of toast components inside the toast container. Supported values are 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', and 'bottom-right'.
+     * The default is top-center.
      * @type {string}
      * @default top-center
      */
@@ -174,8 +189,14 @@ export default class ToastContainer extends LightningOverlay {
         super.close();
     }
 
+    constructor() {
+        super();
+        setContext(this);
+    }
+
     // private functions
     connectedCallback() {
+        assertContext(this);
         // Set `data-render-mode` attribute in native shadow mode
         if (!this.template.synthetic) {
             this.setAttribute('data-render-mode', 'shadow');
@@ -198,12 +219,24 @@ export default class ToastContainer extends LightningOverlay {
 
     /**
      * assign allowed property values to an HTMLElement
-     * @param {array} allowedProperties array of property names which can have value assigned
      * @param {HTMLElement} element element to assign attribute values
      * @param {object} config a map of attribute -> value
      */
-    assignValuesToElement(allowedProperties, element, config) {
-        const elementProperties = allowedProperties || [];
+    assignValuesToElement(element, config) {
+        if (features.ENABLE_ASSERT_CONTEXT) {
+            // this function is being deprecated for security reasons
+            return;
+        }
+        // hard-code list of allowed properties to avoid security issues
+        // from malicious actors setting props like 'innerHTML'
+        const allowedProperties = [
+            'variant',
+            'mode',
+            'label',
+            'labelLinks',
+            'message',
+            'messageLinks',
+        ];
         Object.entries(config).forEach(([key, value]) => {
             const keyLower = key.toLowerCase();
             const match = keyLower.match(/^on(.+)/);
@@ -212,7 +245,7 @@ export default class ToastContainer extends LightningOverlay {
                 element.addEventListener(eventName, value);
             } else {
                 // assign value only to the allowed properties
-                if (elementProperties.indexOf(key) > -1) {
+                if (allowedProperties.indexOf(key) > -1) {
                     element[key] = value;
                 }
             }
@@ -319,15 +352,38 @@ export default class ToastContainer extends LightningOverlay {
         ) {
             const { toast, config, sourceElement } = this._queue.shift();
             // create the toast component
-            const {
-                [instanceName]: toastInstanceName,
-                [properties]: toastProperties,
-            } = toast;
+            const { [instanceName]: toastInstanceName } = toast;
             const toastElement = createElement(toastInstanceName, {
                 is: toast,
             });
 
-            this.assignValuesToElement(toastProperties, toastElement, config);
+            if (features.ENABLE_ASSERT_CONTEXT) {
+                // hard-code list of allowed properties to avoid security issues
+                // from malicious actors setting props like 'innerHTML'
+                const allowedProperties = [
+                    'variant',
+                    'mode',
+                    'label',
+                    'labelLinks',
+                    'message',
+                    'messageLinks',
+                ];
+                Object.entries(config).forEach(([key, value]) => {
+                    const keyLower = key.toLowerCase();
+                    const match = keyLower.match(/^on(.+)/);
+                    if (match) {
+                        const eventName = match[1];
+                        toastElement.addEventListener(eventName, value);
+                    } else {
+                        // assign value only to the allowed properties
+                        if (allowedProperties.indexOf(key) > -1) {
+                            toastElement[key] = value;
+                        }
+                    }
+                });
+            } else {
+                this.assignValuesToElement(toastElement, config);
+            }
             this._displayToasts.push({ toastElement, sourceElement });
             this.root.appendChild(toastElement);
         }

package/src/lightning/tooltipLibrary/tooltipLibrary.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import { createElement } from 'lwc';
 import { AutoPosition, Direction } from 'lightning/positionLibrary';
 import { assert, guid, normalizeString, isCSR } from 'lightning/utilsPrivate';
@@ -165,6 +170,7 @@ export class Tooltip {
 
     disconnect() {
         if (this._ariaObserver) this._ariaObserver.disconnect();
+        if (this._visible) this.hide();
     }
 
     addInfoListeners() {
@@ -198,12 +204,17 @@ export class Tooltip {
         if (!this._visible) {
             return;
         }
+        const tooltip = this._element();
         if (event.type === 'mouseleave' && event.clientX && event.clientY) {
             // In any chance, if mouseleave is caused by tooltip itself, it would means
             // tooltip cover the target which mostly caused by dynamic resize of tooltip by CSS or JS.
             try {
+                const yOffset = tooltip.align.vertical === 'top' ? 1 : 0;
                 const elementMouseIsOver = document.elementFromPoint
-                    ? document.elementFromPoint(event.clientX, event.clientY)
+                    ? document.elementFromPoint(
+                          event.clientX,
+                          event.clientY + yOffset
+                      )
                     : null;
                 if (elementMouseIsOver === this._element()) {
                     if (!isResizeObserverSupported()) {
@@ -228,11 +239,10 @@ export class Tooltip {
         const target = this._target();
 
         if (!this._initialized && target) {
-            ['touchstart', 'click'].forEach((eventName) =>
-                target.addEventListener(eventName, (event) =>
-                    this.toggleIfTouchOrClick(event)
-                )
-            );
+            target.addEventListener('touchstart', (e) => {
+                e.stopPropagation();
+                this.toggle();
+            });
 
             ['mouseenter', 'focus'].forEach((eventName) =>
                 target.addEventListener(eventName, (event) => this.show(event))
@@ -252,16 +262,6 @@ export class Tooltip {
         }
     }
 
-    /* mobile listens for both 'click' and 'touchstart', but we only want to listen to
-       either 'touchstart' and not 'click', otherwise it will double toggle. Call preventDefault() to prevent the
-       'click' event from bubbling after a 'touchstart' is detected on mobile.
-    */
-    toggleIfTouchOrClick(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        this.toggle();
-    }
-
     handleEscape(e) {
         if (e.key === 'Escape' && this._isFocusEvent) {
             e.stopPropagation();

package/src/lightning/tooltipLibrary/tooltipLibrary.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__ServerRenderable</capability>
+    </capabilities>
+</LightningComponentBundle>

package/src/lightning/touchScrollLibrary/touchScrollLibrary.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import { assert } from 'lightning/utilsPrivate';
 import formFactor from '@salesforce/client/formFactor';
 

package/src/lightning/touchScrollLibrary/touchScrollLibrary.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/tree/__examples__/basic/basic.html

@@ -1,8 +1,8 @@
 <template>
     <div class="slds-m-top_medium slds-m-bottom_x-large">
-        <h2 class="slds-text-heading_medium slds-m-bottom_medium">
+        <p class="slds-m-bottom_medium">
             Tree component with a few levels of depth. Click on the arrow icons to expand or collapse a branch.
-        </h2>
+        </p>
 
         <!-- Simple -->
         <div class="slds-p-around_medium lgc-bg">

package/src/lightning/tree/__examples__/basic/basic.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import { LightningElement } from 'lwc';
 
 export default class TreeBasic extends LightningElement {
@@ -6,11 +11,17 @@ export default class TreeBasic extends LightningElement {
             label: 'Western Sales Director',
             name: '1',
             expanded: true,
+            endIcon: {
+                iconName: 'utility:hierarchy',
+            },
             items: [
                 {
                     label: 'Western Sales Manager',
                     name: '2',
                     expanded: true,
+                    endIcon: {
+                        iconName: 'utility:case',
+                    },
                     items: [
                         {
                             label: 'CA Sales Rep',
@@ -32,11 +43,17 @@ export default class TreeBasic extends LightningElement {
             label: 'Eastern Sales Director',
             name: '5',
             expanded: false,
+            endIcon: {
+                iconName: 'utility:hierarchy',
+            },
             items: [
                 {
                     label: 'Easter Sales Manager',
                     name: '6',
                     expanded: true,
+                    endIcon: {
+                        iconName: 'utility:case',
+                    },
                     items: [
                         {
                             label: 'NY Sales Rep',
@@ -58,11 +75,17 @@ export default class TreeBasic extends LightningElement {
             label: 'International Sales Director',
             name: '9',
             expanded: true,
+            endIcon: {
+                iconName: 'utility:world',
+            },
             items: [
                 {
                     label: 'Asia Sales Manager',
                     name: '10',
                     expanded: true,
+                    endIcon: {
+                        iconName: 'utility:case',
+                    },
                     items: [
                         {
                             label: 'Sales Rep1',
@@ -82,6 +105,9 @@ export default class TreeBasic extends LightningElement {
                     label: 'Europe Sales Manager',
                     name: '13',
                     expanded: false,
+                    endIcon: {
+                        iconName: 'utility:case',
+                    },
                     items: [
                         {
                             label: 'Sales Rep1',

package/src/lightning/tree/__examples__/deeplyNested/deeplyNested.html

@@ -1,8 +1,8 @@
 <template>
     <div class="slds-m-top_medium slds-m-bottom_x-large">
-        <h2 class="slds-text-heading_medium slds-m-bottom_medium">
+        <p class="slds-m-bottom_medium">
             Tree component with a many levels of depth. Click on the arrow icons to expand or collapse a branch.
-        </h2>
+        </p>
 
         <!-- Simple -->
         <div class="slds-p-around_medium lgc-bg">

package/src/lightning/tree/__examples__/deeplyNested/deeplyNested.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import { LightningElement } from 'lwc';
 
 export default class TreeDeeplyNested extends LightningElement {

package/src/lightning/tree/__examples__/links/links.html

@@ -1,8 +1,8 @@
 <template>
     <div class="slds-m-top_medium slds-m-bottom_x-large">
-        <h2 class="slds-text-heading_medium slds-m-bottom_medium">
+        <p class="slds-m-bottom_medium">
             Tree component with linked items. Click an item to navigate to its link.
-        </h2>
+        </p>
 
         <!-- Simple -->
         <div class="slds-p-around_medium lgc-bg">

package/src/lightning/tree/__examples__/links/links.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import { LightningElement } from 'lwc';
 
 export default class TreeLinks extends LightningElement {

package/src/lightning/tree/__examples__/metatext/metatext.html

@@ -1,8 +1,8 @@
 <template>
     <div class="slds-m-top_medium slds-m-bottom_x-large">
-        <h2 class="slds-text-heading_medium slds-m-bottom_medium">
+        <p class="slds-m-bottom_medium">
             Tree component with items that have metatext. Click on the arrow icons to expand or collapse a branch.
-        </h2>
+        </p>
 
         <!-- Simple -->
         <div class="slds-p-around_medium lgc-bg">

package/src/lightning/tree/__examples__/metatext/metatext.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import { LightningElement } from 'lwc';
 
 export default class TreeMetatext extends LightningElement {

package/src/lightning/tree/__examples__/onselect/onselect.html

@@ -1,8 +1,8 @@
 <template>
     <div class="slds-m-top_medium slds-m-bottom_x-large">
-        <h2 class="slds-text-heading_medium slds-m-bottom_medium">
+        <p class="slds-m-bottom_medium">
             Tree component with an <code>onselect</code> handler. Click an item in the tree to make a selection.
-        </h2>
+        </p>
 
         <!-- With onselect handler -->
         <div class="slds-p-around_medium lgc-bg">

package/src/lightning/tree/__examples__/onselect/onselect.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import { LightningElement } from 'lwc';
 
 export default class TreeOnselect extends LightningElement {

package/src/lightning/tree/tree.css

@@ -0,0 +1 @@
+@import './tree.lbc.native.css';