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

package/src/lightning/{formattedRichText → formattedRichTextRenderer}/linkTextNodes.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import {
     urlRegexString,
     emailRegexString,
@@ -18,11 +23,13 @@ export function linkTextNodes(container) {
             continue;
         }
         // " = legacy supported edge case for docs
-        // ; = urls cannot have semicolons
+        // ; = URLs cannot have semicolons
         // ["'] = common to quote links in docs
+        // [.,!?]+(?=\s|$) = common punctuation that may appear at the end of URLs or emails
         const items = walker.currentNode.nodeValue.split(
-            /("|;|["']?\s+["']?|["'])/g
+            /("|;|["']?\s+["']?|["]|[.,!?]+(?=\s|$))/g
         );
+
         const fragment = document.createDocumentFragment();
         let hasLink = false;
         items.forEach((text, i) => {

package/src/lightning/formattedRichTextRenderer/linkTextNodesSSR.js

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import {
+    urlRegexString,
+    emailRegexString,
+    tagRegexString,
+    createHttpHref,
+    createEmailHref,
+} from 'lightning/utilsPrivate';
+
+const linkRegex = new RegExp(
+    `${tagRegexString}|${emailRegexString}|${urlRegexString}`,
+    'gi'
+);
+
+const createHttpLink = function (match) {
+    const href = createHttpHref(match);
+    return `<a href="${href}" target="_blank" rel="noopener">${match}</a>`;
+};
+
+const createEmailLink = function (match) {
+    const href = createEmailHref(match);
+    return `<a href="${href}">${match}</a>`;
+};
+
+// SSR is not impacted by security vunerabilities and cannot use the DOM (see W-14765820)
+export const linkTextNodesSSR = function (text) {
+    if (typeof text !== 'string') {
+        return '';
+    }
+
+    return text.replace(linkRegex, (match, tagMatch, emailMatch, hrefMatch) => {
+        if (tagMatch) {
+            return tagMatch;
+        } else if (hrefMatch) {
+            const endsWithQuote = hrefMatch.endsWith('&quot');
+            let href = hrefMatch;
+            if (endsWithQuote) {
+                href = hrefMatch.slice(0, hrefMatch.lastIndexOf('&quot'));
+            }
+            return createHttpLink(href) + (endsWithQuote ? '&quot' : '');
+        } else if (emailMatch) {
+            return createEmailLink(emailMatch);
+        }
+        return match;
+    });
+};

package/src/lightning/{formattedRichText → formattedRichTextRenderer}/richTextConfig.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 const tagsWhitelist = Object.freeze([
     'a',
     'abbr',

package/src/lightning/formattedText/__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 FormattedTextBasic extends LightningElement {}

package/src/lightning/formattedText/formattedText.js

@@ -1,3 +1,8 @@
+/*
+ * 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 {

package/src/lightning/formattedTime/__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 FormattedTimeBasic extends LightningElement {}

package/src/lightning/formattedTime/formattedTime.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import { track, api } from 'lwc';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { normalizeISOTime } from 'lightning/internationalizationLibrary';

package/src/lightning/formattedUrl/__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 FormattedUrlBasic extends LightningElement {}

package/src/lightning/formattedUrl/formattedUrl.css

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

package/src/lightning/formattedUrl/formattedUrl.js

@@ -1,6 +1,11 @@
+/*
+ * 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 } from 'lightning/utilsPrivate';
+import { formatUrl } from 'lightning/utilsPrivate';
 import { updateRawLinkInfo } from 'lightning/routingService';
 
 /**
@@ -64,6 +69,7 @@ export default class LightningFormattedUrl extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this._connected = true;
         this.updateLinkInfo(this.value);
     }
@@ -116,7 +122,7 @@ export default class LightningFormattedUrl extends LightningShadowBaseClass {
 
     updateLinkInfo(url) {
         updateRawLinkInfo(this, {
-            url: makeAbsoluteUrl(url),
+            url: formatUrl(url),
             target: this.target,
         }).then((linkInfo) => {
             this._url = linkInfo.url;
@@ -130,7 +136,7 @@ export default class LightningFormattedUrl extends LightningShadowBaseClass {
     }
 
     get computedUrl() {
-        return this._url || makeAbsoluteUrl(this.value);
+        return this._url || formatUrl(this.value);
     }
 
     get hasValue() {

package/src/lightning/formattedUrl/formattedUrl.lbc.native.css

@@ -0,0 +1 @@
+@import 'lightning/sldsCommon';

package/src/lightning/groupedCombobox/README.md

@@ -2,15 +2,15 @@
 
 > `lightning-grouped-combobox` is internal-only. It's not yet supported for use by customers on the Salesforce platform.
 
--   [Overview](#overview)
--   [Implementing Autocomplete Behavior](#implementing-autocomplete-behavior)
--   [Updating Dropdown Items](#updating-dropdown-items)
--   [Attributes](#attributes)
--   [Methods](#methods)
--   [Custom Events](#custom-events)
--   [Usage Considerations](#usage-considerations)
--   [Aura Examples](#aura-examples)
--   [LWC Examples](#lwc-examples)
+- [lightning-grouped-combobox](#lightning-grouped-combobox)
+  - [Overview](#overview)
+  - [Implementing Autocomplete Behavior](#implementing-autocomplete-behavior)
+  - [Updating Dropdown Items](#updating-dropdown-items)
+  - [Attributes](#attributes)
+  - [Methods](#methods)
+  - [Custom Events](#custom-events)
+  - [Usage Considerations](#usage-considerations)
+  - [Examples](#examples)
 
 ## Overview
 
@@ -174,42 +174,44 @@ To highlight part of the text or subtext in a dropdown item that matches user in
 
 Use the following attributes to customize `lightning-grouped-combobox`.
 
-| Attribute Name                   | Type                                                                                                                                                                                                                                           | Description                                                                                                                                                                                                                                      |
-| -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| label                            | string                                                                                                                                                                                                                                         | The text label for the combobox.                                                                                                                                                                                                                 |
-| placeholder                      | string                                                                                                                                                                                                                                         | The placeholder text on the input field. The default is 'Select an Item'.                                                                                                                                                                        |
-| input-text                       | string                                                                                                                                                                                                                                         | The default text or existing value in the input field.                                                                                                                                                                                           |
-| items                            | object                                                                                                                                                                                                                                         | The list of items that's displayed in the dropdown. This list can be updated to match user input. See the **Updating Dropdown Items** section.                                                                                                   |
-| variant                          | string                                                                                                                                                                                                                                         | Changes the appearance of the combobox. Supported variants include `label-hidden`, `label-stacked`, and `label-inline`. The default is `standard`.                                                                                               |
-| input-icon-name                  | string                                                                                                                                                                                                                                         | The icon that appears on the input field. The default is `utility:search`.                                                                                                                                                                       |
-| input-icon-size                  | string                                                                                                                                                                                                                                         | The size of the icon that appears on the input field. The default is `x-small`.                                                                                                                                                                  |
-| input-icon-alternative-text      | string                                                                                                                                                                                                                                         | The alternative text for the icon that's displayed on the input field.                                                                                                                                                                           |
-| input-maxlength                  | integer                                                                                                                                                                                                                                        | The maximum number of characters allowed for the input field.                                                                                                                                                                                    |
-| show-activity-indicator          | boolean                                                                                                                                                                                                                                        | Displays a spinner in the input field to indicate activity. The default is false.                                                                                                                                                                |
-| show-dropdown-activity-indicator | boolean                                                                                                                                                                                                                                        | Displays a spinner in the dropdown list to indicate activity. The default is false.                                                                                                                                                              |
-| value                            | string                                                                                                                                                                                                                                         | When not-empty flags to the component that a valid selection has been made, used only for constraint validation in conjunction with the `required` attribute. If empty, and `required` is set to true the component will be in an invalid state. |
-| required                         | boolean                                                                                                                                                                                                                                        | Specifies whether an input value is required. The default is false. When `true` must be used in conjunction with `value`.                                                                                                                        |
-| disabled                         | boolean                                                                                                                                                                                                                                        | Specifies whether the input field is disabled. Disabled fields are grayed out and users cannot interact with them. The default is false.                                                                                                         |
-| field-level-help                 | string                                                                                                                                                                                                                                         | Help text detailing the purpose and function of the combobox, displayed on hover.                                                                                                                                                                |
-| readonly                         | boolean                                                                                                                                                                                                                                        | Specifies whether the input field is read-only. The default is false.                                                                                                                                                                            |
-| validity                         | boolean                                                                                                                                                                                                                                        | Represents the validity states that an element is in, with respect to constraint validation.                                                                                                                                                     |
-| pills                            | object                                                                                                                                                                                                                                         | A list of pills that includes the `type`, `href`, `label`, `iconName`, and `alternativeText`. Pills are used for multi-selection and appear under the input.                                                                                     |
-| input-pill                       | The pill that appears in the input field, which is supported for single-selection. Displaying this pill prevents you from typing or selecting another option. An "x" button is present on the pill for the user to remove the selected option. |
+| Attribute Name                   | Type    | Description                                                                                                                                                                                                                                                                                                                                    |
+| -------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| label                            | string  | Required. The text label for the combobox.                                                                                                                                                                                                                                                                                                     |
+| items                            | object  | Required. The list of items that's displayed in the dropdown. This list can be updated to match user input. See the **Updating Dropdown Items** section.                                                                                                                                                                                       |
+| disabled                         | boolean | Specifies whether the input field is disabled. Disabled fields are grayed out and users cannot interact with them. The default is false.                                                                                                                                                                                                       |
+| field-level-help                 | string  | Help text detailing the purpose and function of the combobox, displayed on hover.                                                                                                                                                                                                                                                              |
+| input-icon-name                  | string  | The icon that appears on the input field. The default is `utility:search`.                                                                                                                                                                                                                                                                     |
+| input-icon-size                  | string  | The size of the icon that appears on the input field. The default is `x-small`.                                                                                                                                                                                                                                                                |
+| input-icon-alternative-text      | string  | The alternative text for the icon that's displayed on the input field.                                                                                                                                                                                                                                                                         |
+| input-maxlength                  | integer | The maximum number of characters allowed for the input field.                                                                                                                                                                                                                                                                                  |
+| input-pill                       | object  | The pill that appears in the input field, which is supported for single-selection. To create a pill, pass in an object that contains key-value pairs for `label` and `icon-name`. Displaying this pill prevents users from typing or selecting another option. An "x" button is present on the pill for the user to remove the selected option. |
+| input-text                       | string  | The default text or existing value in the input field.                                                                                                                                                                                                                                                                                         |
+| message-when-value-missing       | string  | Error message to be displayed when the value is missing and input is required. The default is "required".                                                                                                                                                                                                                                      |
+| pills                            | object  | A list of pills that includes the `type`, `href`, `label`, `iconName`, and `alternativeText`. Pills are used for multi-selection and appear under the input.                                                                                                                                                                                   |
+| placeholder                      | string  | The placeholder text on the input field. The default is 'Select an Item'.                                                                                                                                                                                                                                                                      |
+| readonly                         | boolean | Specifies whether the input field is read-only. The default is false.                                                                                                                                                                                                                                                                          |
+| required                         | boolean | Specifies whether an input value is required. The default is false. When required is `true`  you must also specify `value`.                                                                                                                                                                                                                      |
+| show-activity-indicator          | boolean | Displays a spinner in the input field to indicate activity. The default is false.                                                                                                                                                                                                                                                              |
+| show-dropdown-activity-indicator | boolean | Displays a spinner in the dropdown list to indicate activity. The default is false.                                                                                                                                                                                                                                                            |
+| validity                         | boolean | Represents the validity states that an element is in, with respect to constraint validation.                                                                                                                                                                                                                                                   |
+| value                            | string  | When `value` has a value, it flags to the component that a valid selection has been made, used only for constraint validation in conjunction with the `required` attribute. If `value` has no value, and `required` is set to true, the component is in an invalid state.                                                                                               |
+| variant                          | string  | Changes the appearance of the combobox. Supported variants include `label-hidden`, `label-stacked`, and `label-inline`. The default is `standard`.                                                                                                                                                                                             |
 
 Pass in the following key-value pairs to `items`.
 
 | Key Name                 | Type   | Description                                                                                        |
 | ------------------------ | ------ | -------------------------------------------------------------------------------------------------- |
-| type                     | string | Supported types include `option-inline` and `option-card`.                                         |
-| iconName                 | string | The icon that appears on the left of the option name.                                              |
+| text                     | string | Required. The text to display for the option.                                                      |
+| type                     | string | Required. Supported types include `option-inline` and `option-card`.                               |
+| value                    | string | Required. The value associated with the option.                                                    |
+| iconName                 | string | The icon that appears on the left of the option name.                                    |
 | iconSize                 | string | Supported by `option-card` only. The size of the icon that appears on the left of the option name. |
 | iconAlternativeText      | string | Assistive text for the icon that appears on the left of the option name                            |
+| rightIconAlternativeText | string | Assistive text for the icon that appears on the right of the option name.                          |
 | rightIconName            | string | The icon that appears on the right of the option name. Supported for the `option-card` type only.  |
 | rightIconSize            | string | The size of the icon that appears on the right of the option name. The default is `small`.         |
-| rightIconAlternativeText | string | Assistive text for the icon that appears on the right of the option name.                          |
-| text                     | string | The text to display for the option.                                                                |
 | subText                  | string | The subtitle to display below the text. Supported for `option-card` only.                          |
-| value                    | string | The value associated with the option.                                                              |
+
 
 ## Methods
 

package/src/lightning/groupedCombobox/__examples__/basic/basic.html

@@ -0,0 +1,36 @@
+<template>
+    <lightning-grouped-combobox
+        label="Standard GroupedCombobox"
+        items={items}
+        onselect={handleSelect}
+        placeholder="Standard"
+    >
+    </lightning-grouped-combobox>
+
+    <lightning-grouped-combobox
+        label="label-inline GroupedCombobox"
+        items={items}
+        onselect={handleSelect}
+        variant="label-inline"
+        placeholder="label-inline"
+    >
+    </lightning-grouped-combobox>
+
+    <lightning-grouped-combobox
+        label="label-stacked GroupedCombobox"
+        items={items}
+        onselect={handleSelect}
+        variant="label-stacked"
+        placeholder="label-stacked"
+    >
+    </lightning-grouped-combobox>
+
+    <lightning-grouped-combobox
+        label="label-hidden GroupedCombobox"
+        items={items}
+        onselect={handleSelect}
+        variant="label-hidden"
+        placeholder="label-hidden"
+    >
+    </lightning-grouped-combobox>
+</template>

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

@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { LightningElement } from 'lwc';
+
+export default class Basic extends LightningElement {
+    items = [
+        {
+            type: 'option-inline',
+            iconName: 'utility:search',
+            text: 'Advanced Search...',
+            value: 'actionSearchAdvanced',
+        },
+        {
+            label: 'Bookmarked Accounts',
+            items: [
+                {
+                    type: 'option-card',
+                    text: 'Global Media',
+                    iconName: 'standard:account',
+                    subText: '(905) 555-1212',
+                    value: 'accountGlobalMedia',
+                },
+            ],
+        },
+    ];
+
+    handleSelect(e) {
+        this.selectedOption = e.detail.value;
+    }
+}

package/src/lightning/groupedCombobox/__mockData__/exampleGroupedComboboxData.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 const exampleData = {};
 
 exampleData.exampleInlineOption = {