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

package/src/lightning/badge/__examples__/icon/icon.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">
             Badges with <code>icon</code>.
-        </h2>
+        </p>
 
         <!-- Badge: basic -->
         <lightning-badge label="Alpha" icon-name="standard:event"></lightning-badge>

package/src/lightning/badge/__examples__/icon/icon.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 BadgeWithIcon extends LightningElement {}

package/src/lightning/badge/badge.js

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

package/src/lightning/barcodeScanner/__docs__/barcodeScanner.md

@@ -1,4 +1,4 @@
-The `lightning-barcode-scanner` component embeds a barcode scanning function displayed as an icon, which launches the barcode scanner when the user clicks it. For more information on the the API this component uses, see [Use the BarcodeScanner API](https://developer.salesforce.com/docs/platform/lwc/guide/use-barcodescanner-in-a-lightning-component) in the Lightning Web Components Developer Guide.
+The `lightning-barcode-scanner` component embeds a barcode scanning function displayed as an icon, which launches the barcode scanner when the user clicks it. For more information on the API this component uses, see [Use the BarcodeScanner API](https://developer.salesforce.com/docs/platform/lwc/guide/reference-lightning-barcodescanner.html) in the Lightning Web Components Developer Guide.
 
 ```html
 <template>

package/src/lightning/barcodeScanner/barcodeScanner.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import { LightningElement, api } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { getBarcodeScanner } from 'lightning/mobileCapabilities';
@@ -7,6 +12,9 @@ const DEFAULT_SIZE = 'medium';
 const SCANNER_ENABLED = 'Scanner enabled';
 const SCANNER_DISABLED = 'Scanner disabled';
 
+/**
+ * Scans barcodes on a mobile device.
+ */
 export default class BarcodeScanner extends LightningElement {
     /**
      * An object representing configuration details for a barcode scanning session.

package/src/lightning/baseCombobox/__mockData__/exampleBaseComboboxData.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 = {

package/src/lightning/baseCombobox/base-combobox.slds.css

@@ -1,32 +1,25 @@
 
-/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
-  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /**
    * Combobox
    */
-
   :host([data-render-mode="shadow"]) .slds-combobox {
     position: static;
     display: flex;
     flex-direction: column;
     flex: 1 1 auto;
   }
-
   /**
    * Combobox Container
    */
-
   :host([data-render-mode="shadow"]) .slds-combobox_container {
     display: flex;
     flex-direction: column;
     position: relative;
   }
-
   /**
    * Faux Input
    */
-
   :host([data-render-mode="shadow"]) .slds-input_faux {
     padding-block-start: 0;
     padding-block-end: 0;
@@ -46,15 +39,12 @@
     flex: 1 1 auto;
     text-align: left;
   }
-
   :host([data-render-mode="shadow"][invalid]) .slds-input_faux {
     box-shadow: 0 0 0 1px inset var(--slds-g-color-error-1);
   }
-
   :host([data-render-mode="shadow"]) .slds-input_faux:not(.slds-combobox__input-value) {
     --slds-c-inputtext-text-color: var(--slds-g-color-on-surface-1);
   }
-
   :host([data-render-mode="shadow"]) .slds-input_faux.slds-is-disabled {
     background-color: var(--slds-g-color-disabled-container-1);
     border-color: var(--slds-g-color-border-1);
@@ -62,34 +52,27 @@
     cursor: not-allowed;
     user-select: none;
   }
-
   :host([data-render-mode="shadow"]) .slds-input_faux.slds-is-disabled:focus,:host([data-render-mode="shadow"]) 
   .slds-input_faux.slds-is-disabled:active {
     box-shadow: none;
   }
-
   :host([data-render-mode="shadow"]) .slds-input_faux > span::before {
     content: '';
     display: inline-block;
   }
-
   /**
    * Combobox Focus State: When rendering `button` instead of `input`
    */
-
   :host([data-render-mode="shadow"]) .slds-input_faux:focus-within {
     border-color: var(--slds-g-color-brand-base-60);
     box-shadow: 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-accent-1);
   }
-
   /**
    * Has Icon
    */
-
   :host([data-render-mode="shadow"]) .slds-input-has-icon {
     position: relative;
   }
-
   :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-input__icon {
     --slds-c-icon-sizing: 0.875rem;
     --slds-c-icon-color-foreground-default: var(--slds-g-color-on-surface-1);
@@ -101,83 +84,61 @@
     border: 0;
     z-index: 2;
   }
-
   :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-input__icon:not(button) {
     pointer-events: none;
   }
-
   /* Icon Left */
-
   :host([data-render-mode="shadow"]) .slds-input-has-icon_left .slds-input__icon {
     inset-inline-start: var(--slds-g-spacing-3);
   }
-
   :host([data-render-mode="shadow"]) .slds-input-has-icon_left .slds-input_faux {
     padding-inline-start: var(--slds-g-spacing-6);
   }
-
   /* Icon Right */
-
   :host([data-render-mode="shadow"]) .slds-input-has-icon_right .slds-input__icon {
     inset-inline-end: var(--slds-g-spacing-3);
   }
-
   :host([data-render-mode="shadow"]) .slds-input-has-icon_right .slds-input_faux {
     padding-inline-end: var(--slds-g-spacing-6);
   }
-
   /**
    * Has Icon Group
    */
-
   :host([data-render-mode="shadow"]) .slds-input__icon-group {
     position: absolute;
-    height: var(--slds-g-sizing-5);
-
-    /* Subtle difference in height between light/native, we adjust here */
-    margin-block-start: calc(var(--slds-g-spacing-2) * -1 - 1px);
+    margin-top: calc((var(--slds-g-spacing-4)* var(--slds-g-spacing-2))* -1);
   }
-
   :host([data-render-mode="shadow"]) .slds-input__icon-group_right {
     inset-inline-end: 0;
     inset-block-start: 50%;
   }
-
   :host([data-render-mode="shadow"]) .slds-input__icon-group_right .slds-input__icon_right {
     inset-inline-end: var(--slds-g-spacing-2);
   }
-
   :host([data-render-mode="shadow"]) .slds-input__icon-group_right .slds-input__spinner {
     inset-inline-end: var(--slds-g-spacing-5);
     inset-inline-start: auto;
   }
-
   :host([data-render-mode="shadow"]) .slds-p-top_medium {
     padding-top: var(--slds-g-spacing-4);
   }
-
   :host([data-render-mode="shadow"]) .slds-p-bottom_medium {
     padding-bottom: var(--slds-g-spacing-4);
   }
-
   :host([data-render-mode="shadow"]) .slds-spinner_inline {
     position: relative;
   }
-
   /*
     Grouped combobox data filter styles
   */
-
   :host([data-render-mode="shadow"][data-filter]) button.slds-combobox__input {
     width: 7.5rem;
     transition: width 80ms linear;
 
   }
-
   :host([data-render-mode="shadow"][data-filter]) button.slds-combobox__input:focus {
     width: 10rem;
   }
-
   :host([data-render-mode="shadow"][data-filter]) .slds-truncate {
     max-width: 100%;
     overflow: hidden;
@@ -186,31 +147,26 @@
     font-size: var(--slds-g-spacing-3);
     color: var(--slds-g-color-on-surface-1);
   }
-
   :host([data-render-mode="shadow"][data-filter-on]) [part="input-container"] {
     border-start-end-radius: var(--slds-g-sizing-border-4);
     border-end-end-radius: var(--slds-g-sizing-border-4);
     border-start-start-radius: 0;
     border-end-start-radius: 0;
   }
-
   :host([data-render-mode="shadow"][data-filter]) .slds-combobox__input {
     border-start-end-radius: 0;
     border-end-end-radius: 0;
     border-start-start-radius: var(--slds-g-sizing-border-4);
     border-end-start-radius: var(--slds-g-sizing-border-4);
   }
-
   /*
     combobox with input-pill styles
   */
-
   :host([data-render-mode="shadow"][data-input-pill]) [part="input"] {
     box-shadow: 0 0 0 var(--slds-g-sizing-border-2) var(--slds-g-color-surface-container-1) inset, 0 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-border-base-1, var(--slds-g-color-on-accent-1)) inset;
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     border-radius: var(--slds-c-inputtext-radius, var(--slds-g-radius-border-2));
   }
-
   :host([data-render-mode="shadow"][data-input-pill]) .slds-combobox__input-entity-icon {
     position: absolute;
     inset-block-start: 50%;
@@ -218,16 +174,13 @@
     z-index: 2;
     transform: translateY(-50%)
   }
-
   :host([data-render-mode="shadow"][data-input-pill]) .slds-input__icon-group_right {
     inset-inline-end: calc(var(--slds-g-spacing-1) + var(--slds-g-sizing-border-1));
 
   }
-
   :host([data-render-mode="shadow"][data-input-pill]) .slds-button_icon {
     color: var(--slds-g-color-neutral-base-50, var(--slds-g-color-on-surface-1));
   }
-
   :host([data-render-mode="shadow"][data-input-pill]) [part="input-container"]:focus-within {
     --sds-c-inputtext-color-border:
       var(--slds-g-color-brand-base-60);

package/src/lightning/baseCombobox/baseCombobox.html

@@ -4,7 +4,7 @@
             onclick={handleTriggerClick}>
             <div class={computedFormElementClass} role="none">
                 <template if:true={hasInputPill}>
-                    <lightning-icon data-input-pill-search-icon icon-name={inputPill.iconName} alternative-text={inputPill.iconAlternativeText} size="x-small" class="slds-icon_container slds-combobox__input-entity-icon"></lightning-icon>
+                    <lightning-icon id="input-pill-search-icon" data-input-pill-search-icon icon-name={inputPill.iconName} alternative-text={inputPill.iconAlternativeText} size="x-small" class="slds-icon_container slds-combobox__input-entity-icon"></lightning-icon>
                 </template>
                 <!--
                     'required' on the input may present hints from the browser when within a form that doesn't have novalidate set,
@@ -33,8 +33,8 @@
                                 aria-disabled={computedAriaDisabled}
                                 aria-readonly={_inputAriaReadOnly}
                                 aria-autocomplete={computedAriaAutocomplete}
-                                aria-owns="dropdown-element"
                                 aria-label={inputLabel}
+                                aria-invalid={computedAriaInvalid}
                                 onfocus={handleFocus}
                                 onselect={handleInputSelect}
                                 onchange={handleTextChange}
@@ -52,6 +52,7 @@
                         class={computedInputClass}
                         aria-expanded={computedAriaExpanded}
                         aria-haspopup={customAriaHasPopup}
+                        aria-invalid={ariaInvalid}
                         name={name}
                         role={customRole}
                         data-value={computedInputValue}
@@ -61,8 +62,9 @@
                         aria-required={required}
                         onfocus={handleFocus}
                         onkeydown={handleInputKeyDown}
-                        onblur={handleBlur}>
-                        <span class="slds-truncate">
+                        onblur={handleBlur}
+                        part="input-button">
+                        <span class="slds-truncate" part="input-button-value">
                             <template if:true={computedInputValue}>
                                 {computedInputValue}
                             </template>
@@ -85,10 +87,10 @@
                 <template if:false={hasInputPill}>
                     <div class="slds-input__icon-group slds-input__icon-group_right">
                         <template if:true={showInputActivityIndicator}>
-                            <div role="status" class="slds-spinner slds-spinner_brand slds-spinner_x-small slds-input__spinner">
+                            <div role="status" class="slds-spinner slds-spinner_brand slds-spinner_x-small slds-input__spinner" part="spinner">
                                 <span class="slds-assistive-text">{i18n.loadingText}</span>
-                                <div class="slds-spinner__dot-a"></div>
-                                <div class="slds-spinner__dot-b"></div>
+                                <div part="dot-a" class="slds-spinner__dot-a"></div>
+                                <div part="dot-b" class="slds-spinner__dot-b"></div>
                             </div>
                         </template>
                         <template if:true={inputIconName}>
@@ -168,5 +170,4 @@
             </div>
         </div>
     </div>
-
-</template>
+</template>

package/src/lightning/baseCombobox/baseCombobox.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import labelAriaSelectedOptions from '@salesforce/label/LightningCombobox.ariaSelectedOptions';
 import labelDeselectOptionKeyboard from '@salesforce/label/LightningCombobox.deselectOptionKeyboard';
 import labelLoadingText from '@salesforce/label/LightningCombobox.loadingText';
@@ -52,6 +57,7 @@ const ARIA_DESCRIBEDBY = 'aria-describedby';
 const ARIA_LABEL = 'aria-label';
 const ARIA_ACTIVEDESCENDANT = 'aria-activedescendant';
 const ARIA_INVALID = 'aria-invalid';
+const ARIA_ERRORMESSAGE = 'aria-errormessage';
 
 export default class LightningBaseCombobox extends LightningShadowBaseClass {
     static delegatesFocus = true;
@@ -84,11 +90,12 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     @api customRole = 'combobox';
     @api customAriaHasPopup = 'listbox';
     @api accessKey;
-
+    @api ariaInvalid;
     @api name;
     @api inputPill;
     @api attributionLogoUrl;
     @api attributionLogoAssistiveText;
+    @api helpTextElement;
 
     _showDropdownActivityIndicator = false;
     @track _items = [];
@@ -111,6 +118,7 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     _editingMode = false;
     _connected = false;
     ariaObserver = null;
+    _inputElement = null;
 
     constructor() {
         super();
@@ -119,6 +127,8 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     }
 
     renderedCallback() {
+        // invalidate cached inputElement. it might have changed
+        this.inputElement = null;
         this.dispatchEvent(
             new CustomEvent('ready', {
                 detail: {
@@ -227,7 +237,6 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
             const relatedNodeIds = Array.isArray(params.relatedNodeIds)
                 ? params.relatedNodeIds.map((el) => getRealDOMId(el)).join(' ')
                 : getRealDOMId(params.relatedNodeIds);
-
             this.ariaObserver.connect({
                 ...params,
                 targetSelector: INPUT_ELEMENT_SELECTOR,
@@ -237,13 +246,13 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     }
 
     @api
-    get ariaErrorMessageElements() {
-        return this._ariaErrorMessageElements;
+    get ariaErrorMessageElement() {
+        return this._ariaErrorMessageElement;
     }
 
-    set ariaErrorMessageElements(elements) {
-        this._ariaErrorMessageElements = elements;
-        this.connectAriaDescribedByElements();
+    set ariaErrorMessageElement(element) {
+        this._ariaErrorMessageElement = element;
+        this.connectAriaErrorMessageElement();
     }
 
     @api
@@ -260,7 +269,14 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
         this.connectAriaAttribute({
             attribute: ARIA_DESCRIBEDBY,
             relatedNodeIds: this._inputDescribedBy,
-            relatedNodes: this.ariaErrorMessageElements,
+            relatedNodes: this.helpTextElement,
+        });
+    }
+
+    connectAriaErrorMessageElement() {
+        this.connectAriaAttribute({
+            attribute: ARIA_ERRORMESSAGE,
+            relatedNodeIds: this._ariaErrorMessageElement,
         });
     }
 
@@ -770,7 +786,7 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
         if (this.dropdownDisabled) {
             return;
         }
-        // 'Del' is IE11 specific, remove once IE11 is no longer supported
+        // TODO [W-11587636]: Remove IE11 support. 'Del' is IE11 and Firefox 36 specific.
         if (
             event.key === 'Delete' ||
             event.key === 'Del' ||
@@ -842,6 +858,7 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     }
 
     handleInput(event) {
+        // TODO: [W-11587636]: Remove IE11 support.
         // Do not dispatch any events if the pill is showing, this is specifically an IE11 problem,
         // which fires an 'input' event when the placeholder on an input is changed (which is what happens when
         // the pill is shown). The check can be removed when IE11 is no longer supported.
@@ -958,6 +975,7 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
         this._events.dispatchDropdownOpen();
     }
 
+    @api
     closeDropdown() {
         if (!this._dropdownVisible) {
             // Already closed
@@ -994,9 +1012,18 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     }
 
     get inputElement() {
-        return isCSR
-            ? this.template.querySelector(INPUT_ELEMENT_SELECTOR)
-            : null;
+        if (isCSR) {
+            this._inputElement =
+                this._inputElement ||
+                this.template.querySelector(INPUT_ELEMENT_SELECTOR);
+            return this._inputElement;
+        }
+        return null;
+    }
+
+    // we use this to invalidate input cache on render, the element may have changed
+    set inputElement(val) {
+        this._inputElement = val;
     }
 
     // remove-next-line-for-c-namespace
@@ -1205,13 +1232,14 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
                 }
                 that.synchronizeA11y();
             },
+            getEditingMode() {
+                return that._editingMode;
+            },
         };
     }
 
     get computedAriaInvalid() {
-        const ariaInvalid =
-            this.template.host.getAttribute('data-aria-invalid');
-        return computeAriaInvalid(ariaInvalid, true);
+        return computeAriaInvalid(this.ariaInvalid, true);
     }
 
     isShadowRoot(node) {

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

@@ -1,5 +1,7 @@
 @import 'lightning/sldsCommon';
 @import 'lightning/sldsUtilsAlignment';
+@import 'lightning/sldsMediaObject';
+@import 'lightning/sldsUtilsTruncation';
 @import './base-combobox.slds.css';
 @import './spinner.slds.css';
 @import './listbox.slds.css';

package/src/lightning/baseCombobox/baseComboboxEvents.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 export class BaseComboboxEvents {
     constructor(baseCombobox) {
         this.dispatchEvent = baseCombobox.dispatchEvent.bind(baseCombobox);