lightning-base-components 1.21.9-alpha → 1.22.1-alpha

package/src/lightning/combobox/combobox.js

@@ -388,7 +388,8 @@ export default class LightningCombobox extends LightningShadowBaseClass {
             'lightning-base-combobox'
         );
         baseCombobox.inputLabelledByElement = this.ariaLabelledBy;
-        baseCombobox.inputDescribedByElements = this.computedAriaDescribedBy;
+        baseCombobox.inputDescribedByElements = this.ariaDescribedBy;
+        baseCombobox.ariaErrorMessageElements = this.ariaErrorMessageElements;
     }
 
     get templateRootNode() {
@@ -409,19 +410,10 @@ export default class LightningCombobox extends LightningShadowBaseClass {
             .toString();
     }
 
-    get computedAriaDescribedBy() {
-        const describedByElements = [];
+    get ariaErrorMessageElements() {
+        if (!this._helpMessage) return null;
 
-        if (this._helpMessage) {
-            const helpText = this.template.querySelector('[data-help-text]');
-            describedByElements.push(helpText);
-        }
-
-        if (typeof this.ariaDescribedBy === 'string') {
-            describedByElements.push(this.ariaDescribedBy);
-        }
-
-        return describedByElements;
+        return this.template.querySelector('[data-help-text]');
     }
 
     handleSelect(event) {

package/src/lightning/datatable/__examples__/withVirtualization/withVirtualization.js

@@ -17,7 +17,6 @@ export default class DatatableWithVirtualization extends LightningElement {
     renderConfig = {
         virtualize: 'vertical',
         bufferSize: 10,
-        fixedHeight: true,
     };
 
     connectedCallback() {

package/src/lightning/datatable/datatable.js

@@ -131,7 +131,6 @@ import {
 } from './sort';
 import {
     getGridContainerFromScrollerY,
-    getRowDataSelector,
     getScrollerX,
     getScrollerY,
     isLoadMore,
@@ -607,7 +606,7 @@ export default class LightningDatatable extends LightningElement {
 
     /**
      * Enables and configures advanced rendering modes.
-     * It supports properties 'bufferSize', 'fixedHeight', and 'rowHeight'.
+     * It supports properties 'bufferSize' and 'rowHeight'.
      *
      * @type {RenderManagerConfig} value - config object for datatable rendering
      */
@@ -1242,9 +1241,12 @@ export default class LightningDatatable extends LightningElement {
         if (!this._hasSetInitialCustomTypes) {
             this.setCustomTypes();
             this._hasSetInitialCustomTypes = true;
-            // Return here since a re-render will occur
-            // for column updates if custom types added
-            if (this._privateTypes.privateCustomTypes.size) {
+            // Return here since a re-render will occur on auto width
+            // tables for column updates if custom types added
+            if (
+                this._privateTypes.privateCustomTypes.size &&
+                widthsData.columnWidthsMode === 'auto'
+            ) {
                 return;
             }
         }
@@ -2071,28 +2073,8 @@ export default class LightningDatatable extends LightningElement {
         if (this.state.shouldResetHeights) {
             resetRowHeights(state);
             this.state.shouldResetHeights = false;
-        } else if (virtualizedRows && !state.fixedHeight) {
-            // if row heights aren't fixed, we need to update items
-            // in state to know where rows should be positioned
+        } else if (virtualizedRows) {
             handleVariableRowHeights(this.template, state, this.renderedRows);
-        } else if (virtualizedRows && state.fixedHeight) {
-            // if heights are fixed, we only need to check height of first row
-            const rowElement = this.template.querySelector(
-                getRowDataSelector(this.renderedRows[0].key)
-            );
-            // increase height by 1 since first rendered row is missing an extra 1px border
-            if (rowElement) {
-                const height = rowElement.getBoundingClientRect().height + 1;
-                if (state.rowHeight !== height) {
-                    state.rowHeight = height;
-                    state.tableHeight = state.rowHeight * state.rows.length;
-                    state.rows.forEach((row) => {
-                        row.style = `position:absolute;top:${
-                            row.rowIndex * height
-                        }px;`;
-                    });
-                }
-            }
         }
     }
 

package/src/lightning/datatable/keyboard.js

@@ -920,7 +920,7 @@ export function handlePrimitiveDatatableCellFocus(event) {
             cellElement.parentElement.dataset.rowKeyValue,
             cellElement.dataset.colKeyValue
         );
-        if (cell.mode === KEYBOARD_ACTION_MODE) {
+        if (cell.keyboardMode === KEYBOARD_ACTION_MODE) {
             // Tracked state change.
             setFocusToActionableElement(
                 cell,
@@ -933,12 +933,13 @@ export function handlePrimitiveDatatableCellFocus(event) {
 
 export function handlePrimitiveDatatableCellKeydown(event) {
     const { state } = this;
-    // Don't continue if clicking on a "lightning" element
+    const { target } = event;
+    // Don't continue if clicking on a cell factory
     // Or the outer td/th element and div equivalent
     const cellElement =
         state.renderModeInline &&
-        !event.target.shadowRoot &&
-        !event.target.getAttribute('role')
+        target.tagName !== 'LIGHTNING-PRIMITIVE-CELL-FACTORY' &&
+        !target.getAttribute('role')
             ? getCellElementFromEventTarget(event.target)
             : undefined;
 
@@ -948,18 +949,18 @@ export function handlePrimitiveDatatableCellKeydown(event) {
 
     const cellElementChild = getCellElementChild(cellElement);
     const cell = getCellByKeys(
-        this.state,
+        state,
         cellElement.parentElement.dataset.rowKeyValue,
         cellElement.dataset.colKeyValue
     );
-    const { mode } = cell;
+    const { keyboardMode } = cell;
     const { keyCode, shiftKey } = event;
 
     // if it is in Action mode, then traverse to the next or previous
     // focusable element.
     // if there is no focusable element, or reach outside of the range, then move to
     // previous or next cell.
-    if (mode === KEYBOARD_ACTION_MODE) {
+    if (keyboardMode === KEYBOARD_ACTION_MODE) {
         let passThroughEvent = keyCode !== keyCodes.shift;
         if (keyCode === keyCodes.left) {
             if (canMoveLeft(cell)) {
@@ -1013,7 +1014,7 @@ export function handlePrimitiveDatatableCellKeydown(event) {
         if (passThroughEvent) {
             fireCellKeydown(cell, cellElementChild, event);
         }
-    } else if (mode === KEYBOARD_NAVIGATION_MODE) {
+    } else if (keyboardMode === KEYBOARD_NAVIGATION_MODE) {
         // click the header, press enter, it does not go to action mode without this code.
         if (
             keyCode === keyCodes.left ||
@@ -1090,7 +1091,7 @@ function resetCurrentInputIndex(
     // it moves focus out of table
     if (
         incomingMode === KEYBOARD_ACTION_MODE &&
-        cell.mode === KEYBOARD_ACTION_MODE
+        cell.keyboardMode === KEYBOARD_ACTION_MODE
     ) {
         // Tracked state change.
         setFocusToActionableElement(
@@ -1127,7 +1128,7 @@ function setFocusToActionableElement(cell, cellElementChild, activeInputIndex) {
 function setMode(cell, cellElementChild, keyboardMode, info) {
     const normalizedInfo = info || { action: 'none' };
     // Tracked state changes.
-    cell.mode = keyboardMode;
+    cell.keyboardMode = keyboardMode;
     if (keyboardMode === KEYBOARD_ACTION_MODE) {
         cell.internalTabIndex = 0;
         // focus without changing tabIndex doesn't work W-6185168

package/src/lightning/datatable/renderManager.js

@@ -79,7 +79,6 @@ export class RenderManager {
             'non-negative',
             DEFAULT_BUFFER_SIZE
         );
-        state.fixedHeight = normalizeBoolean(config.fixedHeight);
         if (typeof rowHeight === 'number') {
             state.rowHeight = rowHeight;
             this.threshold = ROW_THRESHOLD * rowHeight;
@@ -149,7 +148,6 @@ export class RenderManager {
             bufferSize,
             renderedRowCount,
             rows,
-            fixedHeight,
             rowHeight,
             heightCache,
         } = state;
@@ -161,7 +159,7 @@ export class RenderManager {
 
         // if using variable heights, see if we can get more
         // accurate estimate based on known row heights
-        if (!fixedHeight && heightCache[firstVisibleKey]) {
+        if (heightCache[firstVisibleKey]) {
             let i = firstVisibleIndex;
             let currentHeight = 0;
             let knownRowHeight = rows[i] && heightCache[rows[i].key];

package/src/lightning/datatable/rows.js

@@ -404,13 +404,13 @@ export function updateCell(state, rowIndex, colIndex) {
         cell.typeAttribute0 = getRowNumberError(rowErrors, cell.scopeColValue);
     }
 
-    let cellClass = cell.class;
+    let cellClass = cell.class || '';
+    if (cell.hasTreeData && !cellClass) {
+        cellClass += (cellClass.length ? ' ' : '') + TREE__ITEM_CLASS;
+    }
     if (cell.displayReadOnlyIcon || cell.editable) {
         cellClass += (cellClass.length ? ' ' : '') + CELL_EDIT_CLASS;
     }
-    if (cell.hasTreeData) {
-        cellClass += (cellClass.length ? ' ' : '') + TREE__ITEM_CLASS;
-    }
     if (hasError) {
         cellClass += (cellClass.length ? ' ' : '') + HAS_ERROR_CLASS;
     }
@@ -423,7 +423,7 @@ export function updateCell(state, rowIndex, colIndex) {
     }
 
     cell.class = cellClass;
-    cell.style = computeCellStyles(cell, col, renderModeRoleBased);
+    cell.style = computeCellStyles(cell, col, renderModeRoleBased, cell.style);
 
     if (cell.isInlined) {
         updateInlineCell(cell);
@@ -442,14 +442,19 @@ export function updateCell(state, rowIndex, colIndex) {
  * @param {Object} types - instance of DatatableTypes from `./types.js`
  * @param {Object} col - column definition
  * @param {Boolean} renderModeRoleBased - render mode of datatable (div || table)
+ * @param {String} initValue - default value for cell styles
  * @returns {String} - styles to be set on the cell
  */
-function computeCellStyles(cell, col, renderModeRoleBased) {
-    let cellStyle = '';
+function computeCellStyles(cell, col, renderModeRoleBased, initValue = '') {
+    let cellStyle = initValue;
+    if (cellStyle && !cellStyle.endsWith(';')) {
+        cellStyle += ';';
+    }
+
     if (cell.isCustomBareLayout) {
         // When a custom type is not using the standard layout,
         // remove the padding that comes with the standard layout
-        cellStyle = 'padding: 0;';
+        cellStyle += 'padding: 0;';
     }
 
     // Width needs to be managed when rendering as divs
@@ -475,7 +480,9 @@ export function recomputeCellStyles(state) {
     state.rows.forEach((row) => {
         row.cells.forEach((cell, colIndex) => {
             const colData = columns[colIndex];
-            cell.style = computeCellStyles(cell, colData, true);
+            const cellAttrs = getCellAttributesValues(colData);
+            const style = resolveAttributeValue(cellAttrs.style, row) || '';
+            cell.style = computeCellStyles(cell, colData, true, style);
         });
     });
 }

package/src/lightning/datatable/state.js

@@ -74,7 +74,6 @@ export function getDefaultState() {
         rowHeight: 30.5,
         renderedRowCount: 0,
         firstVisibleIndex: 0, // first row that should be visible in viewport
-        fixedHeight: false, // by default, assume that not all rows are same height
         heightCache: {}, // cache of row heights
         offsets: [0],
         offsetRanges: [],

package/src/lightning/datatable/virtualization.js

@@ -12,7 +12,7 @@ export function addTableHeight(state, prevData, newData) {
 
 /**
  * resets state properties relevant to virtualization
- * rowHeights when fixedHeight is false
+ * rowHeights
  *
  * @param {Object} state - datatable state
  */
@@ -43,7 +43,7 @@ export function resetRowHeights(state) {
 
 /**
  * updates state properties relevant to virtualization
- * rowHeights when fixedHeight is false
+ * rowHeights
  *
  * @param {Node} template - the custom element root `this.template` from datatable.js
  * @param {Object} state - datatable state
@@ -71,7 +71,7 @@ export function handleVariableRowHeights(template, state, renderedRows) {
             if (rowElement) {
                 // first rendered row needs height increased by 1 to account for missing border
                 let height = rowElement.getBoundingClientRect().height;
-                if (row.rowIndex === currentRange.start) {
+                if (row.rowIndex && row.rowIndex === currentRange.start) {
                     height++;
                 }
                 state.heightCache[row.key] = height;
@@ -102,10 +102,7 @@ export function handleVariableRowHeights(template, state, renderedRows) {
  * for a given scrollTop value
  */
 export function findFirstVisibleIndex(state, scrollTop) {
-    const { offsetRanges, offsets, rowHeight, fixedHeight, virtualize } = state;
-    if (virtualize && fixedHeight) {
-        return Math.floor(scrollTop / rowHeight);
-    }
+    const { offsetRanges, offsets, rowHeight } = state;
     let start = 0;
     let end = offsetRanges.length - 1;
 
@@ -133,7 +130,7 @@ export function findFirstVisibleIndex(state, scrollTop) {
             // use scrollTop and rowHeight to calculate firstVisibleIndex
             const diff = scrollTop - endOffset;
             const extraRows = Math.floor(diff / rowHeight);
-            state._firstRowOffset = diff % rowHeight;
+            state.firstRowOffset = diff % rowHeight;
             return prevRange.end + extraRows;
         }
         // update start or end for next round of binary search
@@ -319,7 +316,7 @@ function checkOverlap(range1, range2) {
 
 /**
  * updates scrollTop and top values for rows when
- * using virtualization with fixedHeight of false
+ * using virtualization
  */
 function updateVirtualizeStyles(template, state, renderedRows) {
     // update scrollTop so firstVisibleIndex is correctly placed in viewport
@@ -328,12 +325,12 @@ function updateVirtualizeStyles(template, state, renderedRows) {
         state.offsets[state.firstVisibleIndex] + state.firstRowOffset;
 
     // update top of rendered rows based on offsets
-    // all but first rendered row will need to subtract
-    // 1 from offset to account for missing top border
-    // on first rendered row
+    // if first rendered row isn't first row we need to
+    // add 1 to its offset to account for missing top border
+    const addOffset = !!renderedRows[0].rowIndex;
     renderedRows.forEach((row, index) => {
-        let top = state.offsets[row.rowIndex] - 1;
-        if (!index) {
+        let top = state.offsets[row.rowIndex];
+        if (addOffset && !index) {
             top = top + 1; // reset first rendered row to offset in state
         }
         row.style = `position:absolute;top:${top}px;`;

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/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,
@@ -318,36 +318,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 +399,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);

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/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/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
      */