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

package/src/lightning/datetimepicker/input-text.slds.css

@@ -272,6 +272,8 @@
 :host([data-render-mode="shadow"]) [part='input-container'] {
         flex: 1 0 100%;
         align-items: stretch;
+        --sds-c-inputtext-spacing-inline: 0;
+        --sds-c-inputtext-spacing-block: 0;
     }
 :host([data-render-mode="shadow"]) [part='input-container'][type='range'] {
         border: none;
@@ -348,6 +350,20 @@
         --slds-c-inputtext-color-border: var(--slds-g-color-border-error-1);
         --slds-c-icon-color-foreground: var(--slds-g-color-error-1);
     }
+:host([data-render-mode="shadow"][invalid]) .slds-input-has-icon .slds-button_icon:hover {
+        --slds-c-icon-color-foreground: var(--slds-g-color-error-1);
+     }
+:host([data-render-mode="shadow"][invalid]) input[type="search"] {
+      --slds-c-input-color-background: var(--slds-s-input-color-background-invalid);
+      --slds-c-input-color-border: var(--slds-g-color-border-error-1);
+      --slds-c-input-text-color: var(--slds-s-input-color-invalid);
+
+      background-clip: padding-box;
+    }
+:host([data-render-mode="shadow"][invalid]) input[type="search"] + lightning-primitive-icon::part(icon) {
+      fill: var(--slds-g-color-error-1);
+      color: var(--slds-g-color-error-1);
+    }
 /**
    * Invalid State - Focus
    *
@@ -388,7 +404,6 @@
             --slds-c-inputtext-label-color,
             var(--slds-g-color-on-surface-2)
         );
-        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         margin-block-end: var(--slds-g-sizing-1);
 
         /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */
@@ -447,7 +462,7 @@
     }
 :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-button_icon:focus,:host([data-render-mode="shadow"]) 
     .slds-input-has-icon .slds-button_icon:hover {
-        --slds-c-icon-color-foreground: var(--slds-g-color-accent-4);
+        --slds-c-icon-color-foreground: var(--slds-g-color-accent-3);
     }
 :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-input__icon {
         width: 0.875rem;

package/src/lightning/dialog/__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, track } from 'lwc';
 
 export default class ModalDialogExample extends LightningElement {

package/src/lightning/dialog/dialog.css

@@ -0,0 +1,9 @@
+/* Workaround only for deprecated lightning-dialog */
+.fix-slds-modal__close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.4rem;
+    /* Kondo specific */
+    border: 0;
+}

package/src/lightning/dialog/dialog.html

@@ -7,8 +7,8 @@
                 <div class="slds-modal__container">
                     <header class={_headerCssClasses}>
                         <lightning-button-icon data-close-button size="large"
-                                            class="slds-modal__close"
-                                            variant="bare-inverse" icon-name="utility:close"
+                                            class="slds-modal__close fix-slds-modal__close"
+                                            variant="bare" icon-name="utility:close"
                                             onclick={_handleCloseClick}
                                             title={_labels.close}
                                             alternative-text={_labels.close}></lightning-button-icon>

package/src/lightning/dialog/dialog.js

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

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

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

package/src/lightning/dualListbox/__docs__/dualListbox.md

@@ -100,8 +100,7 @@ To programmatically display error messages on invalid fields, use the `reportVal
 
 #### Component Styling
 
-`lightning-dual-listbox` implements the [Dueling Picklist](https://www.lightningdesignsystem.com/components/dueling-picklist/) blueprint
-in the Salesforce Lightning Design System (SLDS).
+Component styling hooks use the `--slds-c-*` prefix and change styling for specific elements or properties of a component. Component-specific styling isn’t recommended, because it’s unsupported for SLDS 2, but existing customizations still work with the original SLDS. If you use component styling hooks, limit the components to SLDS themes until SLDS 2 and the Salesforce Cosmos theme become generally available. See [Dueling Picklist: Styling Hooks Overview](https://www.lightningdesignsystem.com/components/dueling-picklist/#CSS-Class-Overview) for documentation on component-specific hooks for this component.
 
 ##### Variants
 

package/src/lightning/dualListbox/__examples__/minmax/minmax.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 DualListboxMinMax extends LightningElement {

package/src/lightning/dualListbox/__examples__/required/required.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 DualListboxRequired extends LightningElement {

package/src/lightning/dualListbox/__examples__/selected/selected.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 DualListboxSelected extends LightningElement {

package/src/lightning/dualListbox/__examples__/simple/simple.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 DualListboxSimple extends LightningElement {

package/src/lightning/dualListbox/dual-listbox.slds.css

@@ -1,6 +1,4 @@
 
-/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
-  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   :host([data-render-mode="shadow"]) .slds-assistive-text {
     position: absolute !important;
@@ -29,6 +27,10 @@
     flex-direction: column;
   }
 
+  :host([data-render-mode="shadow"][data-render-mode="shadow"][variant='label-hidden']) .slds-dueling-list__column .slds-form-element__label {
+    display: initial;
+  }
+
   :host([data-render-mode="shadow"]) .slds-dueling-list__column > lightning-button-icon {
     margin-block: var(--slds-g-spacing-4);
     margin-inline: var(--slds-g-spacing-1);

package/src/lightning/dualListbox/dualListbox.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import labelComponentAssistiveText from '@salesforce/label/LightningDualListbox.componentAssistiveText';
 import labelDownButtonAssistiveText from '@salesforce/label/LightningDualListbox.downButtonAssistiveText';
 import labelMaxError from '@salesforce/label/LightningDualListbox.maxError';
@@ -22,6 +27,7 @@ import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helpt
 import { api, track } from 'lwc';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { handleKeyDownOnOption } from './keyboard';
+import { features } from 'lightning/features';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
     assert,
@@ -30,6 +36,7 @@ import {
     classListMutation,
     reflectAttribute,
     isCSR,
+    privateContext,
 } from 'lightning/utilsPrivate';
 import {
     InteractingState,
@@ -38,6 +45,8 @@ import {
     VARIANT,
 } from 'lightning/inputUtils';
 
+const { setContext, assertContext } = privateContext;
+
 const i18n = {
     componentAssistiveText: labelComponentAssistiveText,
     downButtonAssistiveText: labelDownButtonAssistiveText,
@@ -361,7 +370,13 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
         this.reportValidity();
     }
 
+    constructor() {
+        super();
+        setContext(this);
+    }
+
     connectedCallback() {
+        assertContext(this);
         super.connectedCallback();
         this.classList.add('slds-form-element');
         this.updateClassList();
@@ -784,6 +799,7 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
 
         this.movedOptions(addToSelect);
 
+        const listName = addToSelect ? this.selectedLabel : this.sourceLabel;
         const oldSelectedValues = this._selectedValues;
         this._selectedValues = newValues;
         const invalidMove =
@@ -798,6 +814,23 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
             this._selectedValues = oldSelectedValues;
             return;
         }
+        /*W-16561268
+     When a listbox requires at least one selected item on the right side, attempting to move an item might not produce any visible change.
+     However, the screen reader announces, "Item <name> moved to <left side list>." This occurs because the _messageToDisplay is calculated before verifying if the move is valid. To resolve this,
+     we should eliminate the _messageToDisplay computation from the movedOptions function and relocate this logic. */
+        if (this.highlightedOptions.length) {
+            const strToFormat =
+                this.highlightedOptions.length > 1
+                    ? i18n.movedOptionsPlural
+                    : i18n.movedOptionsSingular;
+            this._messageToDisplay = formatLabel(
+                strToFormat,
+                this.highlightedOptionsLabel.join(', '),
+                listName
+            );
+        } else {
+            this._messageToDisplay = '';
+        }
 
         if (retainFocus) {
             const listId = addToSelect
@@ -845,16 +878,26 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
             return;
         }
 
+        const indexSwap = (i, j, arr) => ([arr[i], arr[j]] = [arr[j], arr[i]]);
+
         if (moveUp) {
             while (start < toMove.length) {
                 index = values.indexOf(toMove[start]);
-                this.swapOptions(index, index - 1, values, elementList);
+                if (features.ENABLE_ASSERT_CONTEXT) {
+                    indexSwap(index, index - 1, values);
+                } else {
+                    this.swapOptions(index, index - 1, values, elementList);
+                }
                 start++;
             }
         } else {
             while (start > -1) {
                 index = values.indexOf(toMove[start]);
-                this.swapOptions(index, index + 1, values, elementList);
+                if (features.ENABLE_ASSERT_CONTEXT) {
+                    indexSwap(index, index + 1, values);
+                } else {
+                    this.swapOptions(index, index + 1, values, elementList);
+                }
                 start--;
             }
         }
@@ -893,6 +936,20 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
         const value = option.getAttribute('data-value');
         const listId = this.getListId(option);
         const optionIndex = this.getOptionIndex(option);
+
+        const errorMessageElement = this.template.querySelector(
+            '.slds-has-error.slds-form-element__help'
+        );
+        if (errorMessageElement) {
+            const liElement = option.closest('div');
+            if (liElement && !liElement.hasAttribute('aria-describedby')) {
+                liElement.setAttribute(
+                    'aria-describedby',
+                    errorMessageElement.id
+                );
+            }
+        }
+
         this.updateCurrentSelectedList(listId, isMultiple);
         if (select) {
             if (this.highlightedOptions.indexOf(value) === -1) {
@@ -1023,7 +1080,11 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
         );
     }
 
+    // eslint-disable-next-line consistent-return
     swapOptions(i, j, array) {
+        if (features.ENABLE_ASSERT_CONTEXT) {
+            return undefined;
+        }
         const temp = array[i];
         array[i] = array[j];
         array[j] = temp;
@@ -1116,8 +1177,6 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
     }
 
     movedOptions(addToSelect) {
-        const listName = addToSelect ? this.selectedLabel : this.sourceLabel;
-
         for (let i = 0; i < this.highlightedOptions.length; i++) {
             let selectedOption = addToSelect
                 ? this.computedSourceList.filter(
@@ -1128,20 +1187,6 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
                   );
             this.highlightedOptionsLabel.push(selectedOption[0].label);
         }
-
-        if (this.highlightedOptions.length) {
-            const strToFormat =
-                this.highlightedOptions.length > 1
-                    ? i18n.movedOptionsPlural
-                    : i18n.movedOptionsSingular;
-            this._messageToDisplay = formatLabel(
-                strToFormat,
-                this.highlightedOptionsLabel.join(', '),
-                listName
-            );
-        } else {
-            this._messageToDisplay = '';
-        }
     }
 
     get helptextAlternativeText() {