lightning-base-components 1.21.5-alpha → 1.21.6-alpha

package/src/lightning/datatable/rows.js

@@ -9,7 +9,6 @@ import {
     getTypeAttributesValues,
     getSubTypeAttributesValues,
     getCellAttributesValues,
-    generateColKeyValue,
 } from './columns';
 import { getRowNumberError } from './rowNumber';
 
@@ -19,6 +18,16 @@ const IS_EDITED_CLASS = 'slds-is-edited';
 const ROLE_BASED_CELL_CLASS = 'cell';
 const TREE__ITEM_CLASS = 'slds-tree__item';
 
+function resolveAttributeValue(attrValue, rowData) {
+    if (isObjectLike(attrValue)) {
+        const { fieldName } = attrValue;
+        if (fieldName) {
+            return rowData[fieldName];
+        }
+    }
+    return attrValue;
+}
+
 export function setKeyField(state, value) {
     if (typeof value === 'string') {
         state.keyField = value;
@@ -32,8 +41,7 @@ export function setKeyField(state, value) {
 }
 
 /**
- * It compute the state.rows collection based on the current normalized (data, columns)
- * and generate cells indexes map(state.indexes)
+ * Compute state.rows and state.indexes based on the current normalized (data, columns).
  *
  * TODO: Reduce redundant calls to this function. This is indirectly called by the
  * setters of 'data' and 'columns'. Additionally, for the role-based table, if we are
@@ -43,18 +51,11 @@ export function setKeyField(state, value) {
  * @param {Object} state - The datatable state
  * @param {Object} types - The type handling factory
  */
-export function updateRowsAndCellIndexes(state, types) {
-    const {
-        columns,
-        data,
-        keyField,
-        maxRowSelection,
-        renderModeRoleBased,
-        virtualize,
-        rowHeight,
-    } = state;
+export function updateRowsAndCells(state, types) {
+    const { columns, data, keyField, maxRowSelection, virtualize, rowHeight } =
+        state;
+    const { privateCustomTypes } = types;
     const { length: rowCount } = data;
-    const { dirtyValues } = state.inlineEdit;
     const { length: colCount } = columns;
     const currentSelectionLength =
         maxRowSelection === 1 ? 1 : getCurrentSelectionLength(state);
@@ -76,7 +77,6 @@ export function updateRowsAndCellIndexes(state, types) {
     // initializing indexes
     state.indexes = {};
 
-    const { rows: errorsRows } = state.errors;
     const rows = Array(rowCount);
     // Tracked state changes.
     state.rows = rows;
@@ -87,37 +87,36 @@ export function updateRowsAndCellIndexes(state, types) {
         const rowKeyValue = rowDataKeyField
             ? `${rowDataKeyField}`
             : `row-${rowIndex}`;
-        const dirtyRowData = dirtyValues[rowKeyValue];
-        const rowErrors = errorsRows && errorsRows[rowKeyValue];
-        const cellErrors = rowErrors && rowErrors.cells;
-        const errorFieldNames = rowErrors && rowErrors.fieldNames;
 
         state.indexes[rowKeyValue] = { rowIndex };
 
         const isRowSelected = !!state.selectedRowsKeys[rowKeyValue];
         const rowNumber = rowIndex + 1;
+        const scopeColValue = scopeCol
+            ? rowData[scopeCol.fieldName]
+            : undefined;
         const cells = Array(colCount);
 
         const row = {
-            key: rowKeyValue,
-            cells,
-            rowIndex,
-            rowNumber, // for UTAM since methods are base-1
             ariaRowIndex: rowIndex + 2, // aria attrs are base-1 and also count header as a row
+            ariaSelected: isRowSelected ? 'true' : false,
+            cells,
+            classnames: `slds-hint-parent${
+                isRowSelected ? ' slds-is-selected' : ''
+            }`,
             inputType,
             isSelected: isRowSelected,
-            ariaSelected: isRowSelected ? 'true' : false,
             isDisabled:
                 !isRowSelected &&
                 maxRowSelection !== 1 &&
                 currentSelectionLength === maxRowSelection,
-            classnames: `slds-hint-parent${
-                isRowSelected ? ' slds-is-selected' : ''
-            }`,
-            tabIndex: -1,
+            key: rowKeyValue,
+            rowIndex,
+            rowNumber, // for UTAM since methods are base-1
             style: virtualize
                 ? `position:absolute;top:${rowIndex * rowHeight}px;`
                 : '',
+            tabIndex: -1,
             level: undefined,
             posInSet: undefined,
             setSize: undefined,
@@ -152,29 +151,27 @@ export function updateRowsAndCellIndexes(state, types) {
         for (let colIndex = 0; colIndex < colCount; colIndex += 1) {
             const col = columns[colIndex];
             const {
-                columnKey,
-                fieldName,
+                colKeyValue,
                 isScopeCol,
                 label: dataLabel,
                 type: columnType,
                 typeAttributes,
             } = col;
-            const colKeyValue = generateColKeyValue(col, colIndex);
             const columnSubType = typeAttributes
                 ? typeAttributes.subType
                 : undefined;
-            const dirtyValue = dirtyRowData && dirtyRowData[colKeyValue];
-            const hasError = columnKey
-                ? !!(cellErrors && cellErrors[columnKey])
-                : !!(errorFieldNames && errorFieldNames.includes(fieldName));
             const hasTreeData = columnType === 'tree';
-            // value based on the fieldName
-            const value =
-                dirtyValue === undefined ? rowData[fieldName] : dirtyValue;
+            const privateType =
+                privateCustomTypes && privateCustomTypes.get(columnType);
+            const standardCellLayout = privateType
+                ? privateType.standardCellLayout
+                : false;
             const displayReadOnlyIcon = !!col.displayReadOnlyIcon;
-            const editable = isCellEditable(rowData, col);
+            const editable = !!resolveAttributeValue(col.editable, rowData);
             const isValidType = types.isValidType(columnType);
             const isCheckbox = columnType === SELECTABLE_HEADER_TYPE;
+            const isCustom = privateType !== undefined;
+            const isCustomBareLayout = isCustom && !standardCellLayout;
             const isDataType = isValidType && !isScopeCol;
             const isDataTypeScope = isValidType && isScopeCol;
 
@@ -186,31 +183,23 @@ export function updateRowsAndCellIndexes(state, types) {
                 columnSubType,
                 columnType,
                 dataLabel,
-                describedBy: dirtyValue ? 'unsaved-cell-notification' : null,
                 displayReadOnlyIcon,
                 displayValue: rowData.displayValue || '',
                 editable,
-                hasError,
+                hasError: undefined,
                 isCheckbox,
+                isCustomBareLayout,
                 isDataType,
                 isDataTypeScope,
-                rowKeyValue: row.key, // unique row key value
-                style: computeCellStyles(types, col, renderModeRoleBased),
+                rowKeyValue, // unique row key value
+                scopeColValue,
+                style: '',
                 tabIndex: -1,
-                value,
-                wrapText: state.wrapText[colKeyValue], // wrapText state
-                wrapTextMaxLines: state.wrapText[colKeyValue]
-                    ? state.wrapTextMaxLines
-                    : undefined,
+                value: undefined,
+                wrapText: undefined, // wrapText state
+                wrapTextMaxLines: 0,
             };
 
-            cell.class = computeCellClassNames(
-                cell,
-                hasTreeData,
-                dirtyValue,
-                renderModeRoleBased
-            );
-
             if (!col.internal) {
                 // Assign cell type or cell subType attributes.
                 let attributeNames;
@@ -260,40 +249,79 @@ export function updateRowsAndCellIndexes(state, types) {
                     cell.typeAttribute22 = row.isExpanded === 'true';
                 }
             }
-            // Populate row number attributes.
-            else if (columnType === 'rowNumber') {
-                const scopeColValue = rowData[scopeCol.fieldName];
-                // computes and sets the resolved typeAttribute for the row
-                // number column error state
-                cell.typeAttribute0 = getRowNumberError(
-                    rowErrors,
-                    scopeColValue
-                );
-            }
 
             // adding cell indexes to state.indexes
             // Keeping the hash for backward compatibility, but we need to have 2 indexes, 1 for columns and one for rows,
             // because of memory usage and also at certain point we might have the data but not the columns
             state.indexes[row.key][colKeyValue] = [rowIndex, colIndex];
             cells[colIndex] = cell;
+
+            // Update cell properties including class, style, and value properties.
+            updateCell(state, rowIndex, colIndex);
         }
     }
 }
 
 /**
- * Returns true in the following three cases:
+ * Performs a smaller update on the cell at the given rowIndex and colIndex.
+ * Used by updateCells() and updateCellsByColIndex().
  *
- * (1) typeof column.editable !== 'object' && column.editable
- * (2) typeof column.editable === 'object' && !column.editable.fieldName
- * (3) typeof column.editable === 'object' && column.editable.fieldName && row[column.editable.fieldName]
- *
- * Returns false in all other cases.
- *
- * @param {object} rowData - a row data object stored in datatable state. Must be truthy.
- * @param {object} col - a column data object stored in datatable state. Must be truthy.
+ * @param {Object} state - The tracked datatable state
+ * @param {Object} rowIndex - The cell row index
+ * @param {Object} colIndex - The cell column index
+ * @param {Object} [_state = state] - The untracked datatable state
  */
-export function isCellEditable(rowData, col) {
-    return !!resolveAttributeValue(col.editable, rowData);
+export function updateCell(state, rowIndex, colIndex) {
+    const { renderModeRoleBased } = state;
+    const { rows: errorsRows } = state.errors;
+    const row = state.rows[rowIndex];
+    const rowData = state.data[rowIndex];
+    const { key: rowKeyValue } = row;
+    const dirtyRowData = state.inlineEdit.dirtyValues[rowKeyValue];
+    const rowErrors = errorsRows && errorsRows[rowKeyValue];
+    const cellErrors = rowErrors && rowErrors.cells;
+    const errorFieldNames = rowErrors && rowErrors.fieldNames;
+    const col = state.columns[colIndex];
+    const cell = row.cells[colIndex];
+    const { colKeyValue, columnKey, fieldName, type: columnType } = col;
+    const dirtyValue = dirtyRowData && dirtyRowData[colKeyValue];
+    const hasError = columnKey
+        ? !!(cellErrors && cellErrors[columnKey])
+        : !!(errorFieldNames && errorFieldNames.includes(fieldName));
+    const hasTreeData = columnType === 'tree';
+    // value based on the fieldName
+    const value = dirtyValue === undefined ? rowData[fieldName] : dirtyValue;
+    const wrapText = state.wrapText[colKeyValue];
+    const wrapTextMaxLines = wrapText ? state.wrapTextMaxLines : undefined;
+
+    cell.hasError = hasError;
+    cell.wrapText = wrapText;
+    cell.wrapTextMaxLines = wrapTextMaxLines;
+    cell.value = value;
+
+    if (col.internal && col.type === 'rowNumber') {
+        cell.typeAttribute0 = getRowNumberError(rowErrors, cell.scopeColValue);
+    }
+
+    let cellClass = '';
+    if (cell.displayReadOnlyIcon || cell.editable) {
+        cellClass += CELL_EDIT_CLASS;
+    }
+    if (hasTreeData) {
+        cellClass += (cellClass.length ? ' ' : '') + TREE__ITEM_CLASS;
+    }
+    if (hasError) {
+        cellClass += (cellClass.length ? ' ' : '') + HAS_ERROR_CLASS;
+    }
+    if (dirtyValue !== undefined) {
+        cellClass += (cellClass.length ? ' ' : '') + IS_EDITED_CLASS;
+    }
+    if (renderModeRoleBased) {
+        cellClass += (cellClass.length ? ' ' : '') + ROLE_BASED_CELL_CLASS;
+    }
+
+    cell.class = cellClass;
+    cell.style = computeCellStyles(cell, col, renderModeRoleBased);
 }
 
 /**
@@ -308,14 +336,9 @@ export function isCellEditable(rowData, col) {
  * @param {Boolean} renderModeRoleBased - render mode of datatable (div || table)
  * @returns {String} - styles to be set on the cell
  */
-function computeCellStyles(types, col, renderModeRoleBased) {
-    const columnType = col.type;
-
+function computeCellStyles(cell, col, renderModeRoleBased) {
     let cellStyle = '';
-    if (
-        types.isCustomType(columnType) &&
-        !types.isStandardCellLayoutForCustomType(columnType)
-    ) {
+    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;';
@@ -332,45 +355,6 @@ function computeCellStyles(types, col, renderModeRoleBased) {
     return cellStyle;
 }
 
-function computeCellClassNames(
-    cell,
-    hasTreeData,
-    dirtyValue,
-    renderModeRoleBased
-) {
-    // TODO: With the current SLDS design, the 'slds-cell-edit' class is required on a cell in cases
-    // where the read only icon is to be displayed. This is an issue with their design that will need to
-    // be addressed on their end, so once they do that we can modify this code accordingly.
-    let cellClass = '';
-    if (cell.displayReadOnlyIcon || cell.editable) {
-        cellClass += CELL_EDIT_CLASS;
-    }
-    if (hasTreeData) {
-        cellClass += (cellClass.length ? ' ' : '') + TREE__ITEM_CLASS;
-    }
-    if (cell.hasError) {
-        cellClass += (cellClass.length ? ' ' : '') + HAS_ERROR_CLASS;
-    }
-    if (dirtyValue !== undefined) {
-        cellClass += (cellClass.length ? ' ' : '') + IS_EDITED_CLASS;
-    }
-    if (renderModeRoleBased) {
-        cellClass += (cellClass.length ? ' ' : '') + ROLE_BASED_CELL_CLASS;
-    }
-    return cellClass;
-}
-
-function resolveAttributeValue(attrValue, rowData) {
-    if (isObjectLike(attrValue)) {
-        const { fieldName } = attrValue;
-        if (fieldName) {
-            return rowData[fieldName];
-        }
-    }
-
-    return attrValue;
-}
-
 /**
  * For the role-based table, we need to manage the width of each cell separately.
  * Re-compute the cell styles so that the width of the cell is set
@@ -378,27 +362,27 @@ function resolveAttributeValue(attrValue, rowData) {
  *
  * @param {Object} state - Datatable's state object
  */
-export function recomputeCellStyles(types, state) {
+export function recomputeCellStyles(state) {
     const { columns } = state;
     state.rows.forEach((row) => {
         row.cells.forEach((cell, colIndex) => {
             const colData = columns[colIndex];
-            cell.style = computeCellStyles(types, colData, true);
+            cell.style = computeCellStyles(cell, colData, true);
         });
     });
 }
 
 /**
- * The cells' classes are normally updated via `updateRowsAndCellIndexes()`. This ideally
- * happens after renderMode is set since `updateRowsAndCellIndexes` requires the final
+ * The cells' classes are normally updated via `updateRowsAndCells()`. This ideally
+ * happens after renderMode is set since `updateRowsAndCells` requires the final
  * renderMode value in order to set the 'cell' class on each cell.
  *
- * However, in some cases, it's possible that updateRowsAndCellIndexes is called
+ * However, in some cases, it's possible that updateRowsAndCells is called
  * before the renderMode is set (to 'role-based'). This will cause the 'cell' class to NOT be set
  * in the individual cells because state.renderModeRoleBased will be `false` at that point.
  * As a result, positioning of the cell content will be off.
  *
- * In such a case where the renderMode is 'role-based' and when the updateRowsAndCellIndexes
+ * In such a case where the renderMode is 'role-based' and when the updateRowsAndCells
  * has already been called (indicated by the presence of 'state.rows'), retroactively
  * add the 'cell' class to each cell.
  *

package/src/lightning/datatable/sort.js

@@ -1,5 +1,4 @@
 import { assert } from 'lightning/utilsPrivate';
-import { getColumnName } from './columns-shared';
 
 /**
  * Sets the default sort direction. When clicking on a header to sort,
@@ -28,20 +27,29 @@ export function setDefaultSortDirection(state, value) {
  * `sortedDirection` will be `undefined`
  *
  * @param {Object} state The datatable state
- * @param {String} value The value to update the sort direction to
+ * @param {String|String[]} value The value or values to update the sort direction to
  */
 export function setSortedDirection(state, value) {
-    if (value === 'asc' || value === 'desc') {
+    if (typeof value === 'string' && (value === 'asc' || value === 'desc')) {
         state.sortedDirection = value;
-        return;
+    } else if (Array.isArray(value)) {
+        // If value is an array, validate each item
+        value.forEach((item) => {
+            assert(
+                item === 'asc' || item === 'desc',
+                `The "sortedDirection" value passed into lightning:datatable
+                is incorrect. All values should be one of 'asc' or 'desc'.`
+            );
+        });
+        state.sortedDirection = value;
+    } else {
+        assert(
+            false,
+            `The "sortedDirection" value passed into lightning:datatable
+            is incorrect. It should be either a single value of 'asc' or 'desc'
+            or an array of such values.`
+        );
     }
-    assert(
-        false,
-        `The "sortedDirection" value passed into lightning:datatable
-        is incorrect, "sortedDirection" value should be one of
-        'asc' or 'desc'.`
-    );
-    state.sortedDirection = undefined;
 }
 
 /**
@@ -51,10 +59,10 @@ export function setSortedDirection(state, value) {
  * to `undefined`
  *
  * @param {Object} state The datatable state
- * @param {String} value The value to update the sort state to
+ * @param {String|String[]} value The value or values to update the sort state to
  */
 export function setSortedBy(state, value) {
-    if (typeof value === 'string') {
+    if (typeof value === 'string' || Array.isArray(value)) {
         state.sortedBy = value;
     } else {
         state.sortedBy = undefined;
@@ -68,13 +76,26 @@ export function setSortedBy(state, value) {
  */
 export function updateSorting(state) {
     const { columns, defaultSortDirection, sortedBy, sortedDirection } = state;
+
+    // Determine if sortedBy is an array
+    const isSortedByArray = Array.isArray(sortedBy);
+
     for (let i = 0, { length } = columns; i < length; i += 1) {
         const col = columns[i];
-        if (col.sortable && getColumnName(col) === sortedBy) {
+        if (
+            col.sortable &&
+            (isSortedByArray
+                ? sortedBy.includes(col.name)
+                : sortedBy === col.name)
+        ) {
             col.sorted = true;
             col.sortAriaLabel =
                 sortedDirection === 'desc' ? 'descending' : 'ascending';
             col.sortedDirection = sortedDirection;
+
+            // If sortedBy is an array, set col.sorted to the index in the array
+            // Otherwise, set it to true
+            col.sorted = isSortedByArray ? sortedBy.indexOf(col.name) : true;
         } else {
             col.sorted = false;
             col.sortAriaLabel = col.sortable ? 'other' : null;

package/src/lightning/datatable/state.js

@@ -10,7 +10,9 @@ export const getDefaultState = function () {
     return {
         // columns
         columns: [],
+        hadTreeDataTypePreviously: false,
         hideCheckboxColumn: false,
+        treeColumn: undefined,
 
         // rows
         data: [],
@@ -90,5 +92,8 @@ export const getDefaultState = function () {
             rows: {},
             table: {},
         },
+
+        // table rendered flag
+        hasRenderedFirstTime: false,
     };
 };

package/src/lightning/datatable/tree.js

@@ -1,36 +1,3 @@
-/**
- * Determines if any of the columns in the datatable are of a tree-type.
- *
- * @param {Object} state The datatable state
- * @returns {Boolean} Whether any of the columns are of a tree-type
- */
-export function hasTreeDataType(state) {
-    const { columns } = state;
-    for (let i = 0, { length } = columns; i < length; i += 1) {
-        if (columns[i].type === 'tree') {
-            return true;
-        }
-    }
-    return false;
-}
-
-/**
- * Retrieves the first tree-type column from the state.
- *
- * @param {Object} state The datatable state
- * @returns {Object} The first tree-type column, else `null`
- */
-export function getStateTreeColumn(state) {
-    const { columns } = state;
-    for (let i = 0, { length } = columns; i < length; i += 1) {
-        const col = columns[i];
-        if (col.type === 'tree') {
-            return col;
-        }
-    }
-    return null;
-}
-
 /**
  * Dispatches an event when a row is toggled to be expanded or collapsed.
  *

package/src/lightning/datatable/utils.js

@@ -24,6 +24,7 @@ const CLASS_SET_PROTOTYPE = {
 
 const NON_NEGATIVE_INTEGER_REGEXP = /^\d+$/;
 const POSITIVE_INTEGER_REGEXP = /^[0-9]*[1-9][0-9]*$/;
+const RENDER_MODE_ROLE_BASED_REGEXP = /\brole-based\b/;
 
 /**
  * Escapes double quotes. Later can be
@@ -130,6 +131,16 @@ export function isNonNegativeInteger(value) {
     return NON_NEGATIVE_INTEGER_REGEXP.test(value);
 }
 
+/**
+ * Tests if render mode is role-based.
+ *
+ * @param {String} renderMode The render mode to test
+ * @returns {Boolean} Whether the render mode is role-based
+ */
+export function isRenderModeRoleBased(renderMode) {
+    return RENDER_MODE_ROLE_BASED_REGEXP.test(renderMode);
+}
+
 /**
  * Accepts a value which may be an Integer or String and tests that value
  * with respect to the numberType:

package/src/lightning/datepicker/datepicker.js

@@ -681,9 +681,14 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
     hideCalendarAndFocusTrigger() {
         this.hideCalendar();
 
-        if (this.calendarTrigger) {
-            this.calendarTrigger.focus();
-        }
+        if (this.calendarTrigger)
+            if (this.calendarTrigger === this.calendarButtonElement) {
+                // Fix for W-14258862, focus is transferred to the input element
+                // instead of the button element when trigger is button
+                this.inputElement.focus();
+            } else {
+                this.calendarTrigger.focus();
+            }
     }
 
     focusCalendar() {
@@ -752,6 +757,10 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
         return this.template.querySelector('input');
     }
 
+    get calendarButtonElement() {
+        return this.template.querySelector('lightning-button-icon');
+    }
+
     dispatchChangeEvent() {
         this.dispatchEvent(
             new CustomEvent('change', {

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

@@ -187,7 +187,10 @@
     }
 
 :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
-        border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 

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

@@ -187,7 +187,10 @@
     }
 
 :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
-        border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 

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

@@ -187,7 +187,10 @@
     }
 
 :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
-        border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 

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

@@ -187,7 +187,10 @@
     }
 
 :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
-        border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 

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

@@ -187,7 +187,10 @@
     }
 
 :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
-        border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 

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

@@ -187,7 +187,10 @@
     }
 
 :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
-        border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }