lightning-base-components 1.21.9-alpha → 1.22.2-alpha

package/src/lightning/dualListbox/form-element.slds.css

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-g-font-scale-neg-3);
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

package/src/lightning/formattedAddress/formattedAddress.js

@@ -1,5 +1,6 @@
 import locale from '@salesforce/i18n/locale';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { normalizeBoolean } from 'lightning/utilsPrivate';
 import { addressFormat } from 'lightning/internationalizationLibrary';
 
@@ -10,7 +11,7 @@ const MAP_HOST = 'https://www.google.com/maps?q=';
  * The link is opened in a new tab.
  * A static map can be displayed with the address for better context.
  */
-export default class LightningFormattedAddress extends LightningElement {
+export default class LightningFormattedAddress extends LightningShadowBaseClass {
     @track
     state = {
         street: '',

package/src/lightning/formattedDateTime/formattedDateTime.js

@@ -1,4 +1,5 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { dateTimeFormat } from 'lightning/internationalizationLibrary';
 import {
     normalizeBoolean,
@@ -9,7 +10,7 @@ import {
 /**
  * Displays formatted date and time.
  */
-export default class LightningFormattedDateTime extends LightningElement {
+export default class LightningFormattedDateTime extends LightningShadowBaseClass {
     /**
      * The value to be formatted, which can be a Date object, timestamp, or an ISO8601 formatted string.
      * @type {object}

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

@@ -4,6 +4,6 @@
     <minApiVersion>0.0</minApiVersion>
     <support>GA</support>
     <capabilities>
-        <capability>lightning__ServerRenderable</capability>
+        <capability>lightning__ServerRenderableWithHydration</capability>
     </capabilities>
 </LightningComponentBundle>

package/src/lightning/formattedLocation/formattedLocation.js

@@ -1,10 +1,11 @@
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { toFormattedLocation } from 'lightning/utilsPrivate';
 
 /**
  * Displays a geolocation in decimal degrees using the format [latitude, longitude].
  */
-export default class LightningFormattedLocation extends LightningElement {
+export default class LightningFormattedLocation extends LightningShadowBaseClass {
     /**
      * The latitude of the geolocation. Latitude values must be within -90 and 90.
      * @type {number}

package/src/lightning/formattedPhone/formattedPhone.js

@@ -1,10 +1,11 @@
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { toNorthAmericanPhoneNumber } from 'lightning/utilsPrivate';
 
 /**
  * Displays a phone number as a hyperlink with the tel: URL scheme.
  */
-export default class LightningFormattedPhone extends LightningElement {
+export default class LightningFormattedPhone extends LightningShadowBaseClass {
     /**
      * Sets the phone number to display.
      * @type {number}

package/src/lightning/formattedTime/formattedTime.js

@@ -1,10 +1,11 @@
-import { LightningElement, track, api } from 'lwc';
+import { track, api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { normalizeISOTime } from 'lightning/internationalizationLibrary';
 
 /**
  * Displays a formatted time in user's locale format.
  */
-export default class FormattedTime extends LightningElement {
+export default class FormattedTime extends LightningShadowBaseClass {
     @track _formattedTimeValue = null;
     _inputValue = null;
 

package/src/lightning/formattedUrl/formattedUrl.js

@@ -1,11 +1,12 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { makeAbsoluteUrl } from 'lightning/utilsPrivate';
 import { updateRawLinkInfo } from 'lightning/routingService';
 
 /**
  * Displays a URL as a hyperlink.
  */
-export default class LightningFormattedUrl extends LightningElement {
+export default class LightningFormattedUrl extends LightningShadowBaseClass {
     /**
      * Specifies where to open the link. Options include _blank, _parent, _self, and _top.
      * This value defaults to _self.

package/src/lightning/groupedCombobox/form-element.slds.css

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-g-font-scale-neg-3);
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

package/src/lightning/groupedCombobox/groupedCombobox.js

@@ -382,10 +382,7 @@ export default class LightningGroupedCombobox extends LightningShadowBaseClass {
         this.interactingState.enter();
         this._expandPillContainer = true;
 
-        if (!this._hasFocus) {
-            this._hasFocus = true;
-            this.dispatchEvent(new CustomEvent('focus'));
-        }
+        this.dispatchEvent(new CustomEvent('focus'));
     }
 
     handlePillsFocus() {
@@ -401,36 +398,32 @@ export default class LightningGroupedCombobox extends LightningShadowBaseClass {
     }
 
     handleBlur() {
-        this._hasFocus = false;
-
         // Once https://github.com/salesforce/lwc/issues/444 is fixed, consider switching to
         // `onfocusout` and `event.relatedTarget` to determine whether the focus stayed in the component,
         // this way the use of async blur can be avoided.
         // eslint-disable-next-line @lwc/lwc/no-async-operation
         requestAnimationFrame(() => {
-            if (!this._hasFocus) {
-                this.interactingState.leave();
-
-                this.dispatchEvent(new CustomEvent('blur'));
-                if (this.pills && this.pills.length > 0) {
-                    // Sometimes (involves focusing on lower pills) the pill container scrolls and the top
-                    // line with the "+ n more" button does not show so we have to manually scroll to the top.
-                    // We need to figure a better solution for this.
-                    // eslint-disable-next-line @lwc/lwc/no-async-operation
-                    requestAnimationFrame(() => {
-                        if (this._connected) {
-                            // If a new pill has been added but the markup-conditional hasn't had a chance to
-                            // initialize the pill container, and causes a null gack. Adding a quick safety
-                            // check here to avoid this case
-                            const pillContainer = this.template.querySelector(
-                                'lightning-pill-container'
-                            );
-                            if (pillContainer) {
-                                pillContainer.scrollTop = 0;
-                            }
+            this.interactingState.leave();
+
+            this.dispatchEvent(new CustomEvent('blur'));
+            if (this.pills && this.pills.length > 0) {
+                // Sometimes (involves focusing on lower pills) the pill container scrolls and the top
+                // line with the "+ n more" button does not show so we have to manually scroll to the top.
+                // We need to figure a better solution for this.
+                // eslint-disable-next-line @lwc/lwc/no-async-operation
+                requestAnimationFrame(() => {
+                    if (this._connected) {
+                        // If a new pill has been added but the markup-conditional hasn't had a chance to
+                        // initialize the pill container, and causes a null gack. Adding a quick safety
+                        // check here to avoid this case
+                        const pillContainer = this.template.querySelector(
+                            'lightning-pill-container'
+                        );
+                        if (pillContainer) {
+                            pillContainer.scrollTop = 0;
                         }
-                    });
-                }
+                    }
+                });
             }
         });
     }

package/src/lightning/groupedCombobox/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
@@ -371,6 +371,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 +388,7 @@
             --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)
-        );
+        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 */

package/src/lightning/helptext/button-icon.slds.css

@@ -283,7 +283,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Text color */
   --sds-c-button-text-color: var(--slds-c-button-neutral-text-color, var(--slds-g-color-accent-2));
-  --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-g-color-accent-3));
+  --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-s-button-color-hover, var(--slds-g-color-accent-3)));
   --sds-c-button-text-color-focus: var(--slds-c-button-neutral-text-color-focus, var(--slds-g-color-accent-3));
   --sds-c-button-text-color-active: var(
     --slds-c-button-neutral-text-color-active,
@@ -299,6 +299,14 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
    --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
    --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
+
+   /** 
+    * Needed to override 
+    * `pointer-event: none` coming from sds
+    * that prevent tooltip from showing
+   */
+   pointer-events: auto;
+   cursor: default;
 }
 /**
   * A note about fallbacks on the default variant:
@@ -318,36 +326,36 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 :host([data-render-mode="shadow"][variant='brand']) [part~='button'] {
   --slds-c-button-neutral-color-background: var(
     --slds-c-button-brand-color-background,
-    var(--slds-g-color-accent-container-2)
+    var(--slds-g-color-accent-container-1)
   );
   --slds-c-button-neutral-color-background-hover: var(
     --slds-c-button-brand-color-background-hover,
-    var(--slds-g-color-accent-container-3)
+    var(--slds-g-color-accent-container-2)
   );
   --slds-c-button-neutral-color-background-focus: var(
     --slds-c-button-brand-color-background-focus,
-    var(--slds-g-color-accent-container-3)
+    var(--slds-g-color-accent-container-2)
   );
   --slds-c-button-neutral-color-background-active: var(
     --slds-c-button-brand-color-background-active,
-    var(--slds-g-color-accent-container-3)
+    var(--slds-g-color-accent-container-2)
   );
 
   --slds-c-button-neutral-color-border: var(
     --slds-c-button-brand-color-border,
-    var(--slds-g-color-border-accent-2)
+    var(--slds-g-color-border-accent-1)
   );
   --slds-c-button-neutral-color-border-hover: var(
     --slds-c-button-brand-color-border-hover,
-    var(--slds-g-color-border-accent-3)
+    var(--slds-g-color-border-accent-2)
   );
   --slds-c-button-neutral-color-border-focus: var(
     --slds-c-button-brand-color-border-focus,
-    var(--slds-g-color-border-accent-3)
+    var(--slds-g-color-border-accent-2)
   );
   --slds-c-button-neutral-color-border-active: var(
     --slds-c-button-brand-color-border-active,
-    var(--slds-g-color-border-accent-3)
+    var(--slds-g-color-border-accent-2)
   );
 
   /* Since the text color is white for all states, bypassing inheritence and setting the color value from SDS */
@@ -399,7 +407,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-color-border-hover: var(--slds-g-color-border-success-2);
   --slds-c-button-neutral-color-border-focus: var(--slds-g-color-border-success-2);
   --slds-c-button-neutral-color-border-active: var(--slds-g-color-border-success-2);
-  --slds-c-button-neutral-text-color: var(--slds-g-color-on-success-2);
+  --slds-c-button-neutral-text-color: var(--slds-g-color-on-success-1);
   --slds-c-button-neutral-text-color-hover: var(--slds-g-color-on-success-1);
   --slds-c-button-neutral-text-color-focus: var(--slds-g-color-on-success-1);
   --slds-c-button-neutral-text-color-active: var(--slds-g-color-on-success-1);
@@ -545,19 +553,19 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
 }
 /* slds-icon interaction states */
-:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):hover {
+:host([data-render-mode="shadow"]) [part~='button-icon']:hover {
   --slds-c-icon-color-foreground: var(
-    --slds-c-buttonicon-color-foreground-hover,
+    --slds-c-buttonicon-color-foreground-hover, 
     var(--slds-g-color-accent-3)
   );
 }
-:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):focus {
+:host([data-render-mode="shadow"]) [part~='button-icon']:focus {
   --slds-c-icon-color-foreground: var(
     --slds-c-buttonicon-color-foreground-focus,
     var(--slds-g-color-accent-3)
   );
 }
-:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):active {
+:host([data-render-mode="shadow"]) [part~='button-icon']:active {
   --slds-c-icon-color-foreground: var(
     --slds-c-buttonicon-color-foreground-active,
     var(--slds-g-color-accent-3)
@@ -635,7 +643,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Icon */
   --slds-c-buttonicon-color-foreground: var(--slds-g-color-neutral-base-100);
-  --slds-c-buttonicon-color-foreground-hover: var(--slds-g-color-neutral-base-95);
+  --slds-c-buttonicon-color-foreground-hover: color-mix(in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 25%);
   --slds-c-buttonicon-color-foreground-focus: var(--slds-g-color-neutral-base-95);
   --slds-c-buttonicon-color-foreground-active: var(--slds-g-color-neutral-base-90);
 

package/src/lightning/helptext/form-element.slds.css

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-g-font-scale-neg-3);
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

package/src/lightning/helptext/helptext.html

@@ -5,9 +5,10 @@
             icon-class={computedIconClass}
             variant={computedButtonVariant}
             alternative-text={alternativeText}
+            disable-alternative-text-title
             tooltip={content}
-            onprivatebuttoniconregister={handleButtonIconRegister}
             tabindex={tabIndex}
+            tooltip-type="toggle"
         ></lightning-button-icon>
     </div>
 </template>

package/src/lightning/helptext/helptext.js

@@ -3,7 +3,6 @@ import { api, track } from 'lwc';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { isValidName } from 'lightning/iconUtils';
 import { normalizeString } from 'lightning/utilsPrivate';
-import { TooltipType } from 'lightning/tooltipLibrary';
 
 const DEFAULT_BUTTON_ALT_TEXT = labelButtonAlternativeText;
 const DEFAULT_ICON_NAME = 'utility:info';
@@ -145,15 +144,4 @@ export default class LightningHelptext extends LightningShadowBaseClass {
                 return '';
         }
     }
-
-    /**
-     * Set lightning-button-icon tooltips to be created with toggle events
-     * and without the title attribute computed from alternative text (see W-12496300)
-     * @param {*} event
-     */
-    handleButtonIconRegister(event) {
-        event.stopPropagation();
-        event.detail.setTooltipType(TooltipType.Toggle);
-        event.detail.showTitle(false);
-    }
 }

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

@@ -3,4 +3,7 @@
     <isExposed>true</isExposed>
     <minApiVersion>0.0</minApiVersion>
     <support>GA</support>
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
 </LightningComponentBundle>

package/src/lightning/input/form-element.slds.css

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-g-font-scale-neg-3);
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

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

@@ -149,6 +149,7 @@ To enable autocompletion of the address fields using an address lookup field, in
 ```html
 <template>
     <lightning-input-address
+        show-address-lookup
         address-label="Address"
         street-label="Street"
         city-label="City"
@@ -159,7 +160,6 @@ To enable autocompletion of the address fields using an address lookup field, in
         city="San Francisco"
         country="US"
         province="CA"
-        show-address-lookup
     >
     </lightning-input-address>
 </template>
@@ -167,9 +167,50 @@ 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.
 
-Using `show-address-lookup` is not supported in Playground, Experience Builder sites, Lightning Out,
+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.
 
+#### Using Compact Address Fields
+
+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. 
+
+```html
+<lightning-input-address
+    show-compact-address
+    address-label="Address"
+    street-label="Street Line 1"
+    subpremise-label="Street Line 2"
+    city-label="City"
+    country-label="Country"
+    province-label="Province"
+    postal-code-label="Postal Code"></lightning-input-address>
+```
+
+#### Using the Compact Address Fields with Address Lookup
+
+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"
+    subpremise-label="Street Line 2"
+    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.
+
+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
 
 When you set `required`, a red asterisk is displayed on every address
@@ -279,7 +320,7 @@ See [Input: Styling Hooks Overview](https://www.lightningdesignsystem.com/compon
 
 #### Usage Considerations
 
-Using `show-address-lookup` is not supported in Playground, Experience Builder sites, Lightning Out,
+Using `show-address-lookup` is not supported in Experience Builder sites, Lightning Out,
 Lightning Components for Visualforce, and standalone apps.
 
 When working with address fields such as with the `MailingAddress` field on Salesforce records, consider using the record form components. The `lightning-record-form`, `lightning-record-view-form`, and `lightning-record-edit-form` components provide a form-based UI that's metadata-driven. The components are automatically wired up to your record data, labels, and field-level help text. For more information, see [Work with Records Using Base Components](https://developer.salesforce.com/docs/platform/lwc/guide/data-get-user-input-intro).

package/src/lightning/inputAddress/form-element.slds.css

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-g-font-scale-neg-3);
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

package/src/lightning/inputAddress/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
@@ -371,6 +371,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 +388,7 @@
             --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)
-        );
+        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 */

package/src/lightning/inputAddress/inputAddress.js

@@ -60,7 +60,7 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
 
     /**
      * The label for the subpremise field.
-     * Visible only when using show-compact-address-lookup.
+     * Use this attribute with show-compact-address.
      * @type {string}
      */
     @api subpremiseLabel;
@@ -97,7 +97,7 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
 
     /**
      * The placeholder for the subpremise field.
-     * Visible only when using show-compact-address-lookup.
+     * Use this attribute with show-compact-address.
      * @type {string}
      */
     @api subpremisePlaceholder;
@@ -211,7 +211,7 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
     /**
      * The value for the street field.
      * Maximum length is 255 characters when rendered as a textarea.
-     * Maximum length is 80 characters when rendered as an input (when using show-compact-address-lookup).
+     * Maximum length is 80 characters when rendered as an input using show-compact-address.
      * @type {string}
      *
      */
@@ -226,6 +226,7 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
     /**
      * The value for the subpremise field.
      * Maximum length is 80 characters.
+     * Use this attribute with show-compact-address.
      * @type {string}
      */
     @api
@@ -306,7 +307,8 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
     }
 
     /**
-     * If present, address lookup using Google Maps is enabled.
+     * If present, an address lookup field using Google Maps is displayed.
+     * When used with show-compact-address, the first street field functions as the address lookup field.
      * @type {boolean}
      * @default false
      */
@@ -320,8 +322,8 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
 
     /**
      * If present, the street field is rendered as two separate inputs instead of a single textarea.
-     * In addition, the search field is no longer rendered as a separate input and its functionality
-     * is moved to the street field.
+     * To provide a label for the first street field, use street-label.
+     * To provide a label for the second street field, use subpremise-label.
      * @type {boolean}
      * @default false
      */

package/src/lightning/inputLocation/form-element.slds.css

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-g-font-scale-neg-3);
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

package/src/lightning/inputLocation/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
@@ -371,6 +371,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 +388,7 @@
             --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)
-        );
+        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 */