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

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

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 export function fullHexValue(hex) {
     if (Array.isArray(hex) && hex.length > 0) {
         hex = hex[0];

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

@@ -246,7 +246,7 @@
         --sds-c-inputtext-text-color: var(--slds-c-inputtext-text-color);
         --sds-c-inputtext-font-size: var(
             --slds-c-inputtext-font-size,
-            var(--slds-g-font-scale-neg-2)
+            var(--slds-g-font-size-base)
         );
         --sds-c-inputtext-text-color-placeholder: var(
             --slds-c-inputtext-text-color-placeholder,
@@ -264,7 +264,7 @@
 
         display: flex;
         flex-wrap: wrap;
-        align-items: center;
+        flex-direction: column;
     }
 /**
    * Input Container
@@ -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
    *
@@ -371,6 +387,10 @@
         --sds-c-inputtext-color-border: var(--slds-g-color-border-disabled-1);
         --sds-c-inputtext-text-color: var(--slds-g-color-on-disabled-2);
     }
+:host([data-render-mode="shadow"][disabled]) [part='input-text'] {
+        --sds-c-inputtext-text-color-placeholder:
+            var(--slds-g-color-on-disabled-2);
+    }
 /**
    * Label
    *
@@ -384,10 +404,6 @@
             --slds-c-inputtext-label-color,
             var(--slds-g-color-on-surface-2)
         );
-        font-size: var(
-            --slds-c-inputtext-label-font-size,
-            var(--slds-g-font-scale-neg-3)
-        );
         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 */
@@ -446,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/colorPickerPanel/color-picker-panel.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;
@@ -15,32 +13,32 @@
   white-space: nowrap !important;
 }
 
-/* ToDo: swap out for Utility classes */
+  /* ToDo: swap out for Utility classes */
 
-:host([data-render-mode="shadow"]) .slds-m-left_x-small {
+  :host([data-render-mode="shadow"]) .slds-m-left_x-small {
     margin-inline-start: var(--slds-g-spacing-2);
   }
 
-:host([data-render-mode="shadow"]) .slds-color-picker__selector {
+  :host([data-render-mode="shadow"]) .slds-color-picker__selector {
     margin-block-start: var(--slds-g-spacing-2);
   }
 
-:host([data-render-mode="shadow"]) .slds-color-picker__selector.slds-popover {
+  :host([data-render-mode="shadow"]) .slds-color-picker__selector.slds-popover {
     width: 14rem;
   }
 
-:host([data-render-mode="shadow"]) .slds-color-picker__selector-footer {
+  :host([data-render-mode="shadow"]) .slds-color-picker__selector-footer {
     display: flex;
   }
 
-:host([data-render-mode="shadow"]) .slds-color-picker__selector-footer lightning-button {
+  :host([data-render-mode="shadow"]) .slds-color-picker__selector-footer lightning-button {
     width: 100%;
   }
 
-:host([data-render-mode="shadow"]) .slds-is-absolute {
+  :host([data-render-mode="shadow"]) .slds-is-absolute {
     position: absolute;
   }
 
-:host([data-render-mode="shadow"]) .slds-show {
+  :host([data-render-mode="shadow"]) .slds-show {
     display: block;
   }

package/src/lightning/colorPickerPanel/colorPickerPanel.html

@@ -3,11 +3,12 @@
         class="slds-popover slds-color-picker__selector slds-show slds-is-absolute"
         role="dialog"
         aria-label="Choose a color"
+        aria-modal="true"
         aria-describedby="dialog-body-id"
         onupdateselectedcolor={handleUpdateSelectedColor}
         onkeydown={handleKeydown}>
 
-        <div class="slds-popover__body" tabindex="0" id="dialog-body-id">
+        <div class="slds-popover__body" tabindex="0" id="dialog-body-id" role="application">
             <lightning-color-picker-custom current-color={currentColor}></lightning-color-picker-custom>
             <!-- [a11y] Remove until raptor tabset is supported. -->
             <!-- <div class="slds-tabs_default">
@@ -30,9 +31,23 @@
             </div> -->
         </div>
         <footer class="slds-popover__footer">
-            <div class="slds-color-picker__selector-footer fix-slds-color-picker__selector-footer">
-                <lightning-button label={i18n.cancelButton} name="cancel" stretch onclick={handleCancelClick}></lightning-button>
-                <lightning-button class="slds-m-left_x-small" variant="brand" label={i18n.doneButton} name="done" stretch onclick={handleDoneClick}></lightning-button>
+            <div
+                class="slds-color-picker__selector-footer fix-slds-color-picker__selector-footer"
+            >
+                <lightning-button
+                    label={i18n.cancelButton}
+                    name="cancel"
+                    stretch
+                    onclick={handleCancelClick}
+                ></lightning-button>
+                <lightning-button
+                    class="slds-m-left_x-small"
+                    variant="brand"
+                    label={i18n.doneButton}
+                    name="done"
+                    stretch
+                    onclick={handleDoneClick}
+                ></lightning-button>
             </div>
         </footer>
     </section>

package/src/lightning/colorPickerPanel/colorPickerPanel.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import labelCancelButton from '@salesforce/label/LightningColorPicker.cancelButton';
 import labelCustomTab from '@salesforce/label/LightningColorPickerPanel.customTab';
 import labelDefaultTab from '@salesforce/label/LightningColorPickerPanel.defaultTab';

package/src/lightning/colorPickerPanel/colorPickerPanel.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/colorPickerPanel/popover.slds.css

@@ -12,6 +12,17 @@
       border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
   }
 
+  :host([data-render-mode="shadow"]) .slds-popover_edit {
+    border-block-start: 0;
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_edit .slds-popover__body {
+    padding: var(--slds-g-spacing-1);
+    padding-inline-start: 0;
+  }
+
   :host([data-render-mode="shadow"]) .slds-popover__meta {
       margin-block-end: var(--slds-g-sizing-4);
   }
@@ -41,7 +52,7 @@
 
   :host([data-render-mode="shadow"]) .slds-popover__footer {
       border-block-start: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
-      background-color: var(--slds--g-color-surface-container-2);
+      background-color: var(--slds-g-color-surface-container-2);
       border-end-start-radius: inherit;
       border-end-end-radius: inherit;
       padding-block: var(--slds-g-spacing-2);

package/src/lightning/colorSwatch/colorSwatch.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 LightningColorSwatch extends LightningElement {

package/src/lightning/combobox/__docs__/combobox.md

@@ -107,7 +107,7 @@ instead of a single slash.
 
 `lightning-combobox` doesn't currently support autocomplete or typeahead. The `autocomplete` attribute is reserved for internal use.
 
-`lightning-combobox` appears above all modals and the Salesforce global header.
+In Lightning Experience, a `lightning-combobox` dropdown list that's opened overlays the record edit page or modal, the global header, and record form footer when scrolling.
 
 On mobile devices, `lightning-combobox` has the following limitations.
 
@@ -116,6 +116,7 @@ On mobile devices, `lightning-combobox` has the following limitations.
 
 We recommend using the HTML `<select>` element on mobile instead.
 
+
 #### Accessibility
 
 You must provide a text label for accessibility to make the information
@@ -125,6 +126,9 @@ available to assistive technology, use the `label-hidden` variant.
 
 This component uses `button` elements for select-only comboboxes to comply with the [Lightning Design System combobox blueprint](https://www.lightningdesignsystem.com/components/combobox/#%22Input%22-markup).
 
+When an option label is too long to fit in a single line, the label wraps and continues in a new line.
+If a long word in an option label isn't fully visible, scroll horizontally on the dropdown list to reveal the whole word.
+
 #### Custom Events
 
 **`change`**
@@ -156,3 +160,9 @@ The `open` event does not return any parameters.
 | bubbles    | false | This event does not bubble.                                                                                |
 | cancelable | false | This event has no default behavior that can be canceled. You cannot call `preventDefault()` on this event. |
 | composed   | false | This event does not propagate outside of the component in which it was dispatched.                         |
+
+#### Customize Component Styling
+
+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 [Combobox: Styling Hooks Overview](https://www.lightningdesignsystem.com/components/combobox/#Styling-Hooks-Overview) for documentation on component-specific hooks for this component. 
+
+For more information, see [Style Components Using Lightning Design System Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties) in the Lightning Web Components Developer Guide. 

package/src/lightning/combobox/__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 ComboboxBasic extends LightningElement {

package/src/lightning/combobox/__examples__/disabled/disabled.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 ComboboxDisabled extends LightningElement {

package/src/lightning/combobox/__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 ComboboxRequired extends LightningElement {

package/src/lightning/combobox/combobox.css

@@ -2,3 +2,7 @@
 @import './combobox.lbc.native.css';
 @import 'lightning/sldsGenAiUtils';
 
+
+:host(:not([invalid])) .slds-form-element__help {
+    margin-top: 0px !important;
+}

package/src/lightning/combobox/combobox.html

@@ -3,9 +3,10 @@
         <label
             class={computedLabelClass}
             onclick={handleLabelClicked}
+            part="label"
         >
             <template if:true={required}>
-                <abbr class="slds-required" title={i18n.required}>*</abbr>
+                <abbr class="slds-required" title={i18n.required} part="required">*</abbr>
             </template>
             {label}
         </label>
@@ -14,10 +15,11 @@
         <div class="slds-form-element__control">
             <lightning-base-combobox name={name}
                 autocomplete={autocomplete}
+                aria-invalid={computedAriaInvalid}
                 root-aria-node={templateRootNode}
                 required={required}
                 disabled={disabled}
-                exportparts="dropdown, option"
+                exportparts="dropdown, option, input, input-button, input-button-value"
                 placeholder={placeholder}
                 items={_items}
                 input-text={_selectedLabel}
@@ -27,14 +29,21 @@
                 show-dropdown-activity-indicator={spinnerActive}
                 dropdown-alignment={dropdownAlignment}
                 ondropdownopen={handleDropdownOpen}
+                readonly={readOnly}
                 onfocus={handleFocus}
+                help-text-element={helpTextElement}
                 onblur={handleBlur}
                 onready={handleComboboxReady}
                 onselect={handleSelect}
                 variant={variant}></lightning-base-combobox>
         </div>
-        <template if:true={_helpMessage}>
-            <div id="help-text" data-help-text class="slds-form-element__help" aria-live="polite">{_helpMessage}</div>
-        </template>
+        <div role="status">
+            <div id="help-text" data-help-text class="slds-form-element__help">
+                <template if:true={_helpMessage}>
+                    <span class="slds-assistive-text">{label}</span>
+                </template>
+                {_helpMessage}
+            </div>
+        </div>
     </div>
-</template>
+</template>

package/src/lightning/combobox/combobox.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import labelRequired from '@salesforce/label/LightningControl.required';
 import labelPlaceholder from '@salesforce/label/LightningCombobox.placeholder';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
@@ -10,6 +15,10 @@ import {
     normalizeBoolean,
     reflectAttribute,
     synchronizeAttrs,
+    privateContext,
+    isCSR,
+    isNativeComponent,
+    computeAriaInvalid,
 } from 'lightning/utilsPrivate';
 import {
     isEmptyString,
@@ -19,7 +28,7 @@ import {
     VARIANT,
 } from 'lightning/inputUtils';
 
-import { isCSR, isNativeComponent } from 'lightning/utilsPrivate';
+const { setContext, assertContext } = privateContext;
 
 const i18n = {
     required: labelRequired,
@@ -45,6 +54,7 @@ export default class LightningCombobox extends LightningShadowBaseClass {
     _variant;
     _helpMessage;
     _labelForId;
+    _ariaInvalid;
     @track _items = [];
 
     /**
@@ -53,6 +63,28 @@ export default class LightningCombobox extends LightningShadowBaseClass {
      */
     @api autocomplete;
 
+    /**
+     * A Boolean value for aria-invalid.
+     * @type {boolean}
+     */
+    @api
+    get ariaInvalid() {
+        return this._ariaInvalid;
+    }
+
+    set ariaInvalid(value) {
+        this._ariaInvalid =
+            typeof value == 'undefined' ? undefined : normalizeBoolean(value);
+    }
+
+    get computedAriaInvalid() {
+        return computeAriaInvalid(
+            this._helpMessage,
+            this.value,
+            this.ariaInvalid
+        );
+    }
+
     /**
      * Text label for the combobox.
      */
@@ -91,11 +123,17 @@ export default class LightningCombobox extends LightningShadowBaseClass {
      */
     @api name;
 
+    constructor() {
+        super();
+        setContext(this);
+    }
+
     renderedCallback() {
         this.synchronizeA11y();
     }
 
     connectedCallback() {
+        assertContext(this);
         super.connectedCallback();
         this._isNativeShadow = isNativeComponent(this);
         this.classList.add('slds-form-element');
@@ -142,6 +180,10 @@ export default class LightningCombobox extends LightningShadowBaseClass {
         this._ariaLabelledBy = labelledBy;
     }
 
+    get helpTextElement() {
+        return isCSR ? this.template.querySelector('[data-help-text]') : null;
+    }
+
     /**
      * Reserved for internal use. Use the standard aria-describedby instead. A space-separated list of element IDs that provide descriptive labels for the combobox.
      * @type {string}
@@ -389,7 +431,6 @@ export default class LightningCombobox extends LightningShadowBaseClass {
         );
         baseCombobox.inputLabelledByElement = this.ariaLabelledBy;
         baseCombobox.inputDescribedByElements = this.ariaDescribedBy;
-        baseCombobox.ariaErrorMessageElements = this.ariaErrorMessageElements;
     }
 
     get templateRootNode() {
@@ -410,12 +451,6 @@ export default class LightningCombobox extends LightningShadowBaseClass {
             .toString();
     }
 
-    get ariaErrorMessageElements() {
-        if (!this._helpMessage) return null;
-
-        return this.template.querySelector('[data-help-text]');
-    }
-
     handleSelect(event) {
         if (event.detail.value === this.selectedValue) {
             return;
@@ -451,11 +486,13 @@ export default class LightningCombobox extends LightningShadowBaseClass {
     }
 
     updateSelectedOptions() {
+        assertContext(this);
         this.updateSelectedLabelFromValue(this.selectedValue);
         this.markOptionSelectedFromValue(this.selectedValue);
     }
 
     markOptionSelectedFromValue(value) {
+        assertContext(this);
         if (this._items) {
             const selectedItem = this._items.find(
                 (item) => item.value === value

package/src/lightning/combobox/combobox.slds.css

@@ -1,12 +1,13 @@
 
-/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
-  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /**
    * Invalid State
    */
-
   :host([data-render-mode="shadow"][invalid]) [part='combobox'] {
     --slds-c-inputtext-color-border: var(--slds-g-color-error-base-50);
     --slds-c-inputtext-sizing-border: var(--slds-g-sizing-border-1);
   }
+  :host([data-render-mode="shadow"][variant='label-inline'].slds-form-element_horizontal) {
+    padding: 0;
+    margin-block-end: 0;
+  }