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

package/src/lightning/combobox/combobox.html

@@ -34,7 +34,7 @@
                 variant={variant}></lightning-base-combobox>
         </div>
         <template if:true={_helpMessage}>
-            <div id="help-text" data-help-text class="slds-form-element__help" aria-live="assertive">{_helpMessage}</div>
+            <div id="help-text" data-help-text class="slds-form-element__help" aria-live="polite">{_helpMessage}</div>
         </template>
     </div>
 </template>

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/combobox/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/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/autoWidthStrategy.js

@@ -19,27 +19,27 @@ function getTotalColumnWidth(columnWidths) {
 }
 
 /**
- * Determines whether or not a specified width can be removed from a column
+ * Determines the new width of a column of after removing a set amount
  *
  * @param {Number} currentWidth The current width of the column in pixels
  * @param {Number} widthToRemove The proposed amount of width to remove in pixels
  * @param {Number} minColumnWidth The minimum width the column can be in pixels
- * @returns {Boolean} Whether or not the specified width can be removed
+ * @returns {Number} The new width of the column in pixels
  */
-function canRemoveWidth(currentWidth, widthToRemove, minColumnWidth) {
-    return currentWidth - widthToRemove >= minColumnWidth;
+function getReducedWidth(currentWidth, widthToRemove, minColumnWidth) {
+    return Math.max(currentWidth - widthToRemove, minColumnWidth);
 }
 
 /**
- * Determines whether or not a specified width can be added to a column
+ * Determines the new width of a column of after adding a set amount
  *
  * @param {Number} currentWidth The current width of the column in pixels
- * @param {Number} widthToAdd The proposed amount of width to add in pixels
+ * @param {Number} widthToRemove The proposed amount of width to add in pixels
  * @param {Number} maxColumnWidth The maximum width the column can be in pixels
- * @returns {Boolean} Whether or not the specified width can be added
+ * @returns {Number} The new width of the column in pixels
  */
-function canAddWidth(currentWidth, widthToAdd, maxColumnWidth) {
-    return currentWidth + widthToAdd <= maxColumnWidth;
+function getEnlargedWidth(currentWidth, widthToAdd, maxColumnWidth) {
+    return Math.min(currentWidth + widthToAdd, maxColumnWidth);
 }
 
 /**
@@ -397,17 +397,13 @@ export class AutoWidthStrategy {
             for (let i = 0; i < colsWithMinWidthLength; i += 1) {
                 const colIndex = colsWithMinWidth[i];
                 const currentWidth = columnWidths[colIndex];
-                if (
-                    canAddWidth(
-                        currentWidth,
-                        extraWidthPerColumn,
-                        maxColumnWidth
-                    )
-                ) {
-                    const newWidth = currentWidth + extraWidthPerColumn;
-                    columnWidthsSum += extraWidthPerColumn;
-                    columnWidths[colIndex] = newWidth;
-                }
+                const newWidth = getEnlargedWidth(
+                    currentWidth,
+                    extraWidthPerColumn,
+                    maxColumnWidth
+                );
+                columnWidthsSum += newWidth - currentWidth;
+                columnWidths[colIndex] = newWidth;
             }
         }
 
@@ -428,16 +424,13 @@ export class AutoWidthStrategy {
             for (let colIndex = 0; colIndex < colCount; colIndex += 1) {
                 const col = columns[colIndex];
                 const currentWidth = columnWidths[colIndex];
-                if (
-                    !getColumnWidth(col) &&
-                    canAddWidth(
+                if (!getColumnWidth(col)) {
+                    const newWidth = getEnlargedWidth(
                         currentWidth,
                         extraWidthPerColumn,
                         maxColumnWidth
-                    )
-                ) {
-                    const newWidth = currentWidth + extraWidthPerColumn;
-                    columnWidthsSum += extraWidthPerColumn;
+                    );
+                    columnWidthsSum += newWidth - currentWidth;
                     columnWidths[colIndex] = newWidth;
                 }
             }
@@ -474,17 +467,13 @@ export class AutoWidthStrategy {
             for (let i = 0, { length } = colsWithMaxWidth; i < length; i += 1) {
                 const colIndex = colsWithMaxWidth[i];
                 const currentWidth = columnWidths[colIndex];
-                if (
-                    canRemoveWidth(
-                        currentWidth,
-                        extraWidthPerColumn,
-                        minColumnWidth
-                    )
-                ) {
-                    const newWidth = currentWidth - extraWidthPerColumn;
-                    columnWidthsSum -= extraWidthPerColumn;
-                    columnWidths[colIndex] = newWidth;
-                }
+                const newWidth = getReducedWidth(
+                    currentWidth,
+                    extraWidthPerColumn,
+                    minColumnWidth
+                );
+                columnWidthsSum -= currentWidth - newWidth;
+                columnWidths[colIndex] = newWidth;
             }
         }
 
@@ -508,15 +497,14 @@ export class AutoWidthStrategy {
                 const currentWidth = columnWidths[colIndex];
                 if (
                     !colsWithMinWidth.includes(colIndex) &&
-                    !getColumnWidth(col) &&
-                    canRemoveWidth(
+                    !getColumnWidth(col)
+                ) {
+                    const newWidth = getReducedWidth(
                         currentWidth,
                         extraWidthPerColumn,
                         minColumnWidth
-                    )
-                ) {
-                    const newWidth = currentWidth - extraWidthPerColumn;
-                    columnWidthsSum -= extraWidthPerColumn;
+                    );
+                    columnWidthsSum -= currentWidth - newWidth;
                     columnWidths[colIndex] = newWidth;
                 }
             }

package/src/lightning/datatable/columns.js

@@ -273,11 +273,14 @@ export function setColumns(state, rawColumns, types) {
         }
 
         // partially inline updateHeaderInternalActions from datatable/headerActions
+        // change alignment for last col and second-to-last col when last col is
+        // has a fixedWith under 100 (this includes action columns)
         const { actions } = normCol;
         normCol.actions = {
             menuAlignment:
                 normCol.isLastCol ||
-                normalizedColumns[colIndex + 1].type === 'action'
+                normalizedColumns[colIndex + 1].type === 'action' ||
+                normalizedColumns[colIndex + 1].fixedWidth < 100
                     ? 'auto-right'
                     : 'auto-left',
             customerActions: Array.isArray(actions) ? actions : [],

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
      */
@@ -623,14 +622,11 @@ export default class LightningDatatable extends LightningElement {
                 this.getWrapperHeight,
                 value
             );
-            // if renderConfig already exists, update rendering
-            if (this._renderConfig) {
-                this._renderManager.updateViewportRendering(
-                    this.state,
-                    this.gridContainer,
-                    true
-                );
-            }
+            this._renderManager.updateViewportRendering(
+                this.state,
+                this.gridContainer,
+                true
+            );
             this._renderConfig = value;
         }
     }
@@ -1102,6 +1098,8 @@ export default class LightningDatatable extends LightningElement {
 
         this._columnWidthManager = new ColumnWidthManager(this.widthsData);
         this._privateTypes = new DatatableTypes(this.constructor.customTypes);
+        this._hasSetInitialCustomTypes =
+            !!this._privateTypes.privateCustomTypes.size;
 
         this._renderManager = new RenderManager();
         this.getWrapperHeight = () => getScrollerX(this.template).offsetHeight;
@@ -1242,9 +1240,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 +2072,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

@@ -481,10 +481,10 @@ export function reactToKeyboardOnRow(dt, event) {
                 reactToArrowRightOnRow(dt, state, template, event);
                 break;
             case ARROW_UP:
-                reactToArrowUpOnRow(dt, state, template, event);
+                reactToArrowUpOnRow(state, template, event);
                 break;
             case ARROW_DOWN:
-                reactToArrowDownOnRow(dt, state, template, event);
+                reactToArrowDownOnRow(state, template, event);
                 break;
             default:
                 break;
@@ -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,14 @@ export function updateCell(state, rowIndex, colIndex) {
         cell.typeAttribute0 = getRowNumberError(rowErrors, cell.scopeColValue);
     }
 
-    let cellClass = cell.class;
+    const cellAttributes = getCellAttributesValues(col);
+    let cellClass = resolveAttributeValue(cellAttributes.class, rowData) || '';
+    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 +424,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 +443,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 +481,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/datepicker/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/datepicker/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/datetimepicker/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/datetimepicker/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 */