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

package/src/lightning/input/input.html

@@ -3,7 +3,6 @@
     <template if:true={isTypeSimple}>
         <lightning-primitive-input-simple
             accesskey={accesskey}
-            aria-errormessage="help-message"
             aria-haspopup={ariaHasPopup}
             aria-keyshortcuts={ariaKeyShortcuts}
             aria-disabled={ariaDisabled}
@@ -15,7 +14,7 @@
             autocomplete={autocomplete}
             computed-label-class={computedLabelClass}
             disabled={disabled}
-            exportparts="input-text, input-container, input"
+            exportparts="input-text, input-container, input, required"
             field-level-help={fieldLevelHelp}
             formatter={formatter}
             format-fraction-digits={formatFractionDigits}
@@ -85,7 +84,7 @@
             aria-invalid={computedAriaInvalid}
             checked={checked}
             disabled={disabled}
-            exportparts="indicator"
+            exportparts="required, indicator, label"
             field-level-help={fieldLevelHelp}
             help-message={_helpMessage}
             helptext-alternative-text={helptextAlternativeText}
@@ -221,7 +220,8 @@
             message-when-range-overflow={messageWhenRangeOverflow}
             message-when-range-underflow={messageWhenRangeUnderflow}
             disabled={disabled}
-            root-aria-node={templateRootNode}>
+            root-aria-node={templateRootNode}
+            exportparts="label: label-datepicker, button-icon: button-icon-datepicker">
         </lightning-datepicker>
     </template>
 
@@ -233,7 +233,6 @@
             name={name}
             accesskey={accesskey}
             aria-label={ariaLabel}
-            aria-details={ariaDetails}
             aria-disabled={ariaDisabled}
             variant={variant}
             time-style={timeStyle}
@@ -261,6 +260,7 @@
             date-aria-labelled-by={dateAriaLabelledBy}
             date-aria-described-by={dateAriaDescribedBy}
             date-aria-details={dateAriaDetails}
+            date-aria-error-message={dateAriaErrorMessage}
             aria-disabled={ariaDisabled}
             date-style={dateStyle}
             time-style={timeStyle}
@@ -271,6 +271,7 @@
             time-aria-labelled-by={timeAriaLabelledBy}
             time-aria-described-by={timeAriaDescribedBy}
             time-aria-details={timeAriaDetails}
+            time-aria-error-message={timeAriaErrorMessage}
             max={max}
             min={min}
             timezone={timezone}

package/src/lightning/input/input.js

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
 import labelA11yTriggerText from '@salesforce/label/LightningColorPicker.a11yTriggerText';
 import labelMessageToggleActive from '@salesforce/label/LightningControl.activeCapitalized';
 import labelMessageToggleInactive from '@salesforce/label/LightningControl.inactiveCapitalized';
@@ -13,6 +18,7 @@ import formFactor from '@salesforce/client/formFactor';
 
 import { api, track } from 'lwc';
 import { classSet, formatLabel } from 'lightning/utils';
+import { features } from 'lightning/features';
 import {
     assert,
     classListMutation,
@@ -28,6 +34,8 @@ import {
     computeAriaInvalid,
     isBubblingFocusEvent,
     isCSR,
+    valueSetter,
+    privateContext,
 } from 'lightning/utilsPrivate';
 import AriaObserver from 'lightning/ariaObserver';
 import {
@@ -66,6 +74,7 @@ const ARIA_DETAILS = 'aria-details';
 const ARIA_LABEL = 'aria-label';
 const ARIA_LABELLEDBY = 'aria-labelledby';
 const ARIA_DESCRIBEDBY = 'aria-describedby';
+const ARIA_ERRORMESSAGE = 'aria-errormessage';
 
 /*
  * This component supports the regular native input types, with the addition of toggle, checkbox-button and color.
@@ -118,6 +127,8 @@ const VALID_NUMBER_FORMATTERS = [
 ];
 const DEFAULT_FORMATTER = VALID_NUMBER_FORMATTERS[0];
 
+const { setContext, assertContext } = privateContext;
+
 /**
  * Represents interactive controls that accept user input depending on the type attribute.
  */
@@ -303,12 +314,14 @@ export default class LightningInput extends LightningShadowBaseClass {
 
     @track _timeAriaDescribedBy;
     @track _timeAriaLabelledBy;
+    @track _timeAriaErrorMessage;
     @track _timeAriaControls;
     @track _dateAriaControls;
     @track _timeAriaDetails;
     @track _dateAriaDetails;
     @track _dateAriaDescribedBy;
     @track _dateAriaLabelledBy;
+    @track _dateAriaErrorMessage;
     @track _value = '';
     @track _type = 'text';
     @track _pattern;
@@ -346,9 +359,12 @@ export default class LightningInput extends LightningShadowBaseClass {
         // Native Shadow Root will return [native code].
         // Our synthetic method will return the function source.
         this._isNativeShadow = isNativeComponent(this);
+        setContext(this);
     }
 
     connectedCallback() {
+        assertContext(this);
+        super.connectedCallback();
         if (!this.ariaObserver) {
             this.ariaObserver = new AriaObserver(this);
         }
@@ -385,11 +401,13 @@ export default class LightningInput extends LightningShadowBaseClass {
             // If the help message changed, the help message element needs to be (un)related
             if (this._helpMessageChanged) {
                 this.connectAriaDescribedBy();
+                this.connectAriaErrorMessage();
                 this._helpMessageChanged = false;
             }
 
             if (!this._rendered) {
                 this.connectAriaDescribedBy();
+                this.connectAriaErrorMessage();
                 this.connectAriaLabelledBy();
                 this.connectAriaControls();
                 this.connectAriaDetails();
@@ -452,6 +470,38 @@ export default class LightningInput extends LightningShadowBaseClass {
         });
     }
 
+    /**
+     * A space-separated list of element IDs that provide error messages for the date input when type='datetime'.
+     * @type {string}
+     */
+    @api
+    get dateAriaErrorMessage() {
+        return this._dateAriaErrorMessage;
+    }
+
+    set dateAriaErrorMessage(references) {
+        this._dateAriaErrorMessage = references;
+        this.ariaObserver.connectLiveIdRef(references, (reference) => {
+            this._dateAriaErrorMessage = reference;
+        });
+    }
+
+    /**
+     * A space-separated list of element IDs that provide error messages for the time input when type='datetime'.
+     * @type {string}
+     */
+    @api
+    get timeAriaErrorMessage() {
+        return this._timeAriaErrorMessage;
+    }
+
+    set timeAriaErrorMessage(references) {
+        this._timeAriaErrorMessage = references;
+        this.ariaObserver.connectLiveIdRef(references, (reference) => {
+            this._timeAriaErrorMessage = reference;
+        });
+    }
+
     /**
      * A space-separated list of element IDs that provide labels for the date input when type='datetime'.
      * On mobile devices, this is merged with aria-labelled-by and time-aria-labelled-by to describe
@@ -633,6 +683,24 @@ export default class LightningInput extends LightningShadowBaseClass {
         }
     }
 
+    /**
+     * A space-separated list of element IDs that provide descriptive error message for input.
+     * @returns {string}
+     */
+    @api
+    get ariaErrorMessage() {
+        return this._rendered && this.isNativeShadow
+            ? this._inputElement.getAttribute(ARIA_ERRORMESSAGE)
+            : this._ariaErrorMessage;
+    }
+
+    set ariaErrorMessage(references) {
+        this._ariaErrorMessage = references;
+        if (this._rendered) {
+            this.connectAriaErrorMessage();
+        }
+    }
+
     get isNativeShadow() {
         return this._primitiveComponent?.isNativeShadow || this._isNativeShadow;
     }
@@ -665,6 +733,20 @@ export default class LightningInput extends LightningShadowBaseClass {
         }
     }
 
+    /**
+     * Connect aria-errormessage to the ariaObserver
+     */
+    connectAriaErrorMessage() {
+        if (this._primitiveComponent) {
+            // user specified aria-errormessage
+            this.ariaObserver.connect({
+                attribute: ARIA_ERRORMESSAGE,
+                targetNode: this._inputElement,
+                relatedNodeIds: this._ariaErrorMessage,
+            });
+        }
+    }
+
     /**
      * Connect aria-controls to the ariaObserver.
      */
@@ -814,6 +896,7 @@ export default class LightningInput extends LightningShadowBaseClass {
             // Reconnect aria attributes as the parentSelector is based on the input type
             this.connectAriaLabelledBy();
             this.connectAriaDescribedBy();
+            this.connectAriaErrorMessage();
             this.connectAriaControls();
             this.connectAriaDetails();
         }
@@ -1042,22 +1125,28 @@ export default class LightningInput extends LightningShadowBaseClass {
         if (!this.isTypeFile) {
             this._value = normalizeInput(value);
 
-            if (this.isTypeSimple) {
-                const subcomponent = this._primitiveComponent;
-                if (subcomponent) {
-                    subcomponent.value = this._value;
+            // The template binding will update the primitive value on first paint
+            if (this._rendered) {
+                if (this.isTypeSimple) {
+                    const subcomponent = this._primitiveComponent;
+                    if (subcomponent) {
+                        // undefined here, this will always be a custom element
+                        valueSetter(
+                            subcomponent,
+                            undefined,
+                            this._value,
+                            features.ENABLE_REGEX_CUSTOM_ELEMENT_CHECK
+                        );
+                    }
                 }
-            }
 
-            if (
-                this._rendered &&
-                this._inputElement.value !== this._displayedValue
-            ) {
-                // Again, due to the interop layer we need to check whether the value being set
-                // is different, otherwise we're duplicating the sets on the input, which result
-                // in different bugs like Japanese IME duplication of characters in Safari (likely a browser bug) or
-                // character position re-set in IE11.
-                this._setInputValue(this._displayedValue);
+                if (this._inputElement.value !== this._displayedValue) {
+                    // Again, due to the interop layer we need to check whether the value being set
+                    // is different, otherwise we're duplicating the sets on the input, which result
+                    // in different bugs like Japanese IME duplication of characters in Safari (likely a browser bug) or
+                    // character position re-set in IE11.
+                    this._setInputValue(this._displayedValue);
+                }
             }
 
             this._updateProxyInputAttributes('value');
@@ -1282,6 +1371,7 @@ export default class LightningInput extends LightningShadowBaseClass {
      */
     @api
     setCustomValidity(message) {
+        this._customMessageSet = !!message;
         this._constraint.setCustomValidity(message);
     }
 
@@ -1302,6 +1392,18 @@ export default class LightningInput extends LightningShadowBaseClass {
             }
             if (this._rendered && !this.isNativeInput) {
                 this._inputElement.showHelpMessage(message);
+                if (this.isTypeDateTime && this._customMessageSet) {
+                    reflectAttribute(
+                        this._inputElement.getDatepicker(),
+                        'invalid',
+                        !this.checkValidity()
+                    );
+                    reflectAttribute(
+                        this._inputElement.getTimeCombobox(),
+                        'invalid',
+                        !this.checkValidity()
+                    );
+                }
                 return;
             }
             if (this._rendered && this.isTypePrimitiveInput) {
@@ -1312,6 +1414,16 @@ export default class LightningInput extends LightningShadowBaseClass {
         });
     }
 
+    resetDtInlineEditCustomValidation() {
+        // `lightning-input`s used in datatable's inline edit mode use a `name` attribute
+        // that starts with `dt-inline-edit`
+        const isDatatableInlineEdit = this.name?.startsWith('dt-inline-edit');
+        if (isDatatableInlineEdit) {
+            this.setCustomValidity('');
+            this.reportValidity();
+        }
+    }
+
     /**
      * Displays error messages on invalid fields.
      * An invalid field fails at least one constraint validation and returns false when checkValidity() is called.
@@ -1540,6 +1652,18 @@ export default class LightningInput extends LightningShadowBaseClass {
         return normalizeAriaAttribute(ariaValues);
     }
 
+    get computedColorAriaLabel() {
+        const ariaValues = [];
+        if (this.ariaLabel) {
+            ariaValues.push(this.ariaLabel);
+        }
+        if (!this.ariaLabel && this.type === 'color') {
+            ariaValues.push('Enter Hexadecimal value');
+        }
+
+        return normalizeAriaAttribute(ariaValues);
+    }
+
     get computedAriaInvalid() {
         // W-8796658: aria-invalid should always follow the visual indication of errors
         return computeAriaInvalid(
@@ -1582,10 +1706,12 @@ export default class LightningInput extends LightningShadowBaseClass {
     }
 
     get normalizedMax() {
+        assertContext(this);
         return this._normalizeDateTimeString(this.max);
     }
 
     get normalizedMin() {
+        assertContext(this);
         return this._normalizeDateTimeString(this.min);
     }
 
@@ -1690,17 +1816,20 @@ export default class LightningInput extends LightningShadowBaseClass {
                         return false;
                     }
 
+                    if (!this.isNativeInput) {
+                        return this._inputElement.hasBadInput();
+                    }
+
+                    return this._inputElement.validity.badInput;
+                },
+                badNumericInput: () => {
                     if (this.isTypeNumber) {
                         return !isValidNumber(
                             this._primitiveComponent?.getNumberRawValue()
                         );
                     }
 
-                    if (!this.isNativeInput) {
-                        return this._inputElement.hasBadInput();
-                    }
-
-                    return this._inputElement.validity.badInput;
+                    return false;
                 },
                 tooLong: () =>
                     // since type=number is type=text in the dom when not in focus
@@ -1720,17 +1849,18 @@ export default class LightningInput extends LightningShadowBaseClass {
                     this.isNativeInput &&
                     this._rendered &&
                     this._inputElement.validity.patternMismatch,
+                badEmailInput: () => {
+                    if (this.isTypeEmail) {
+                        if (this._multiple) {
+                            return !isValidMultipleEmails(this.value);
+                        }
+                        return !isValidEmail(this.value);
+                    }
+                    return false;
+                },
             };
             // International email support, note that the type="email" does not currently
             // support full unicode that 226+ now supports
-            if (this.isTypeEmail) {
-                overrides.typeMismatch = () => {
-                    if (this._multiple) {
-                        return !isValidMultipleEmails(this.value);
-                    }
-                    return !isValidEmail(this.value);
-                };
-            }
             // FF, IE and Safari don't support type datetime-local,
             // IE and Safari don't support type date or time
             // we need to defer to the base component to check rangeOverflow/rangeUnderflow.
@@ -1842,7 +1972,6 @@ export default class LightningInput extends LightningShadowBaseClass {
             event.stopPropagation();
             return;
         }
-
         this.interactingState.enter();
 
         if (this.isTypeColor) {
@@ -1889,6 +2018,7 @@ export default class LightningInput extends LightningShadowBaseClass {
 
     handleChange(event) {
         event.stopPropagation();
+        this.resetDtInlineEditCustomValidation();
         this._dispatchCommitEvent();
         this._dispatchChangeEvent();
     }
@@ -1919,6 +2049,7 @@ export default class LightningInput extends LightningShadowBaseClass {
 
     handlePrimitiveInputChange(event) {
         this.interactingState.enter();
+        this.resetDtInlineEditCustomValidation();
         this._updateValueAndValidityAttribute(event.detail.value);
     }
 
@@ -2004,7 +2135,12 @@ export default class LightningInput extends LightningShadowBaseClass {
             // dispatch any events.
             setDecoratedDragonInputValueWithoutEvent(this._inputElement, value);
         } else {
-            this._inputElement.value = value;
+            valueSetter(
+                this._inputElement,
+                [HTMLInputElement],
+                value,
+                features.ENABLE_REGEX_CUSTOM_ELEMENT_CHECK
+            );
         }
     }
 
@@ -2088,6 +2224,7 @@ export default class LightningInput extends LightningShadowBaseClass {
         synchronizeAttrs(elem, {
             ariaLabelledByElement: this._ariaLabelledBy,
             ariaDescribedByElements: this._ariaDescribedBy,
+            ariaErrorMessageElement: this._ariaErrorMessage,
             ariaControlsElement: this._ariaControls,
             ariaDetailsElements: this._ariaDetails,
             [ARIA_LABEL]: this.computedAriaLabel,
@@ -2102,15 +2239,21 @@ export default class LightningInput extends LightningShadowBaseClass {
             dateAriaControls: this.dateAriaControls,
             dateAriaLabel: this.dateAriaLabel,
             dateAriaDetails: this.dateAriaDetails,
+            dateAriaErrorMessage: this.dateAriaErrorMessage,
             // timepicker aria attributes
             timeAriaLabelledBy: this.timeAriaLabelledBy,
             timeAriaDescribedBy: this.timeAriaDescribedBy,
             timeAriaControls: this.timeAriaControls,
             timeAriaLabel: this.timeAriaLabel,
             timeAriaDetails: this.timeAriaDetails,
+            timeAriaErrorMessage: this.timeAriaErrorMessage,
+        });
+    }
+    _updateColorA11y(elem) {
+        synchronizeAttrs(elem, {
+            [ARIA_LABEL]: this.computedColorAriaLabel,
         });
     }
-
     _synchronizeA11y() {
         // each of these templates are mutually exclusive and are selected
         // depending on the [type] of input.
@@ -2119,6 +2262,9 @@ export default class LightningInput extends LightningShadowBaseClass {
         const datetimepicker = this.template.querySelector(
             'lightning-datetimepicker'
         );
+        const colorpicker = this.template.querySelector(
+            'lightning-primitive-input-color'
+        );
         // determine which template type is present,
         // and update a11y props accordingly
         if (datepicker) {
@@ -2127,6 +2273,8 @@ export default class LightningInput extends LightningShadowBaseClass {
             this._updateDateOrTimePickerA11y(timepicker);
         } else if (datetimepicker) {
             this._updateDateTimePickerA11y(datetimepicker);
+        } else if (colorpicker) {
+            this._updateColorA11y(colorpicker);
         }
     }
 }

package/src/lightning/inputAddress/__docs__/inputAddress.md

@@ -142,6 +142,68 @@ Alternatively, you can enable state and country picklists in your org, and
 access the values by using a wire adapter.
 See [Let Users Select State and Country from Picklists](https://help.salesforce.com/articleView?id=admin_state_country_picklists_overview.htm) in Salesforce Help and [getPicklistValues](https://developer.salesforce.com/docs/platform/lwc/guide/reference-wire-adapters-picklist-values) in the Lightning Web Components Developer Guide.
 
+#### Using the Locale Information
+
+In Lightning Experience, the `locale` value corresponds to the **Locale** field on the Language & Time Zone page in the user's settings. For example, if you select "French (France)" in the **Locale** field, `lightning-input-address` uses `fr-FR` as the locale.
+
+To override the locale on your user's settings, provide your own `locale` value.
+
+```html
+<template>
+    <div class="slds-var-m-around_medium">
+        <h2>User's locale: {userLocale}</h2>
+        <lightning-input-address
+            address-label="Address"
+            street-label="Street"
+            city-label="City"
+            country-label="Country"
+            province-label="Province"
+            postal-code-label="Postal Code"
+            locale="en-US"></lightning-input-address>     
+    </div>
+</template>
+```
+
+In this example, the `userLocale` property returns `fr-FR` and the `lightning-input-address` component uses the `en-US` locale.
+
+```javascript
+import { LightningElement } from 'lwc';
+import LOCALE from '@salesforce/i18n/locale';
+
+export default class LocaleExample extends LightningElement {
+
+    userLocale = LOCALE;
+}
+
+```
+
+If you pass in an invalid locale, the component uses `en-US`.
+
+For more information, see [Access Internationalization Properties](https://developer.salesforce.com/docs/platform/lwc/guide/create-i18n.html) in the Lightning Web Components Dev Guide.
+
+#### Hiding the Province Field
+
+The province field is used with countries that include a province in their addresses. This field can also be used as a field for state information, such as in United States addresses.
+
+To visually hide the province field from the component's fields layout for locales that don't require it, use the `hide-province` attribute. For example, you can use `hide-province` when the `locale` is `fr-FR` or `zh-CN`.
+
+```html
+<template>
+     <lightning-input-address
+        address-label="Address"
+        street-label="Street"
+        city-label="City"
+        country-label="Country"
+        province-label="Province"
+        postal-code-label="Postal Code"
+        locale="fr-FR"
+        hide-province
+    ></lightning-input-address>
+</template>
+``` 
+
+If you don't provide a value for `province-label`, the component renders with a province field without a label. Hide the field using `hide-province`.
+
 #### Using Lookup to Find and Autofill an Address
 
 To enable autocompletion of the address fields using an address lookup field, include the `show-address-lookup` attribute. The address lookup field is placed above the address fields you provide.
@@ -167,6 +229,12 @@ To enable autocompletion of the address fields using an address lookup field, in
 
 When you start typing an address in the lookup field, a dropdown menu displays matching addresses returned by the Google Maps Places API. Select an address from the dropdown to populate the address fields.
 
+To filter address results by country, pass in an array of ISO 3166-1 Alpha-2 country code strings to the `country-lookup-filter` attribute. Country codes are case-insensitive. You can specify up to a maximum of five country codes.
+
+For a list of valid country codes, see [Google for Developers: countries.csv](https://developers.google.com/public-data/docs/canonical/countries_csv).
+
+**Important:** Using an invalid two-letter country code in the array will prevent the Google Maps Places API from returning results and may trigger console errors. If the array contains a country code longer than two characters or exceeds the five-country filter limit, the component will default to no filter. Additionally, if a non-array value is passed to the attribute, the component will also default to no filter.
+
 Using `show-address-lookup` is not supported in Experience Builder sites, Lightning Out,
 Lightning Components for Visualforce, and standalone apps. While it may work, these targets are not optimized and not officially supported.
 
@@ -174,7 +242,7 @@ Lightning Components for Visualforce, and standalone apps. While it may work, th
 
 By default, the Street address field is a textarea field. Use compact address fields if you want to separate the Street address field into two input fields instead.
 
-To display compact address fields, include the `show-compact-address` attribute. Use `street-label` to provide a label for the first line of address, and use `subpremise-label` for the second line of address. You can add supplementary information on this field, such as a building number or unit name. 
+To display compact address fields, include the `show-compact-address` attribute. Use `street-label` to provide a label for the first line of address, and use `subpremise-label` for the second line of address. You can add supplementary information on this field, such as a building number or unit name.
 
 ```html
 <lightning-input-address
@@ -192,7 +260,25 @@ To display compact address fields, include the `show-compact-address` attribute.
 
 To enable compact address fields with address lookup, include the `show-address-lookup` and `show-compact-address` attributes. These attributes enable the first street address field as a lookup field.
 
-To provide a label on the second input field, use the `subpremise-label` attribute. You can provide a subpremise value using the `subpremise` attribute. The first input field continues to use `street-label`.
+```html
+<lightning-input-address
+    show-address-lookup
+    show-compact-address
+    address-label="Address"
+    street-label="Street Line 1"
+    city-label="City"
+    country-label="Country"
+    province-label="Province"
+    postal-code-label="Postal Code"></lightning-input-address>
+```
+
+When you start typing an address in the lookup field, a dropdown menu displays matching addresses returned by the Google Maps Places API. Select an address from the dropdown to populate the address fields.
+
+#### Using the Subpremise Field with Address Lookup
+
+Subpremise information includes apartment, unit, or floor number. To provide a label on the subpremise field, use the `subpremise-label` attribute. The second address field is used as the subpremise field.
+
+You can provide a subpremise value using the `subpremise` attribute. The first input field continues to use `street-label`. The `subpremise` field doesn't require a value for submission.
 
 ```html
 <lightning-input-address
@@ -207,9 +293,10 @@ To provide a label on the second input field, use the `subpremise-label` attribu
     postal-code-label="Postal Code"></lightning-input-address>
 ```
 
-When you start typing an address in the lookup field, a dropdown menu displays matching addresses returned by the Google Maps Places API. Select an address from the dropdown to populate the address fields.
+Google Maps API currently supports subpremises for Australia, New Zealand, and Canada only. The placement of subpremise information is different for each country. For example, Australian addresses include the subpremise information as a prefix to street number, such as `2/1 Tully Road` where `2` is the subpremise. When you enter this address and select it from the search results, the street field is populated with the subpremise and street information while the subpremise field remains empty.
+
+Populating the subpremise field using address lookup isn't currently supported. For example, US addresses include the subpremise after the street number, such as `123 Main St, Unit 10`. When you enter the address with a subpremise, the subpremise appears with the street address in the result list. However, selecting the address from the search result doesn't populate the subpremise field. The street field also doesn't preserve the subpremise, but you can enter it manually in the street or subpremise field.
 
-The `subpremise` field doesn't require a value for submission. You can add supplementary information on this field, such as a building number or unit name. 
 
 #### Validating Required Fields
 
@@ -305,18 +392,9 @@ This example adds padding on top of address fields using an SLDS class.
 </lightning-input-address>
 ```
 
-To apply custom styling, use the `:host` selector. Use SLDS styling hooks to customize the component's styles. The Street field renders a [textarea](https://www.lightningdesignsystem.com/components/textarea) and the other fields render [input](https://www.lightningdesignsystem.com/components/input/) fields.
-
-For example, change the minimum height of the textarea and change the background color of the input fields.
-
-```css
-:host {
-    --slds-c-textarea-sizing-min-height: 200px;
-    --slds-c-input-color-background: orange;
-}
-```
+The Street field renders a [textarea](https://www.lightningdesignsystem.com/components/textarea) and the other fields render [input](https://www.lightningdesignsystem.com/components/input/) fields.
 
-See [Input: Styling Hooks Overview](https://www.lightningdesignsystem.com/components/input/#Styling-Hooks-Overview) and [Textarea: Styling Hooks Overview](https://www.lightningdesignsystem.com/components/textarea/#CSS-Class-Overview) for a list of CSS custom properties.
+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 [Input: Styling Hooks Overview](https://www.lightningdesignsystem.com/components/input/#Styling-Hooks-Overview) and [Textarea: Styling Hooks Overview](https://www.lightningdesignsystem.com/components/textarea/#CSS-Class-Overview) for documentation on component-specific hooks for this component. 
 
 #### Usage Considerations
 

package/src/lightning/inputAddress/__examples__/base/base.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 InputAddressBase extends LightningElement {}

package/src/lightning/inputAddress/__examples__/customLocale/customLocale.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 InputAddressCustomLocale extends LightningElement {}

package/src/lightning/inputAddress/__examples__/stateAndCountryPicklists/stateAndCountryPicklists.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 InputAddressBase extends LightningElement {