lightning-base-components 1.22.2-alpha → 1.22.3-alpha

package/src/lightning/primitiveCellCheckbox/primitiveCellCheckbox.js

@@ -26,7 +26,7 @@ export default class PrimitiveCellCheckbox extends PrimitiveDatatableCell {
         this._columnHeaderId = id || '';
         const labelId = this.computedLabelId;
         if (labelId) {
-            synchronizeAttrs(this.template.querySelector('input'), {
+            synchronizeAttrs(this.refs.input, {
                 'aria-labelledby': `${labelId} ${this._columnHeaderId}`,
             });
         }
@@ -41,13 +41,16 @@ export default class PrimitiveCellCheckbox extends PrimitiveDatatableCell {
 
     renderedCallback() {
         //give input the correct aria-labelledby value
-        synchronizeAttrs(this.template.querySelector('input'), {
+        synchronizeAttrs(this.refs.input, {
             'aria-labelledby': `${this.computedLabelId} ${this.columnHeaderId}`,
         });
     }
 
     get computedLabelId() {
-        return getRealDOMId(this.template.querySelector('label'));
+        if (this.isConnected && this.refs) {
+            return getRealDOMId(this.refs.label);
+        }
+        return null;
     }
 
     get selectItemAssistiveText() {

package/src/lightning/primitiveCellCheckbox/radio.html

@@ -1,6 +1,7 @@
 <template>
     <span class="slds-radio">
-        <input type="radio"
+        <input lwc:ref="input"
+               type="radio"
                name={computedOptionName}
                id="primitive-checkbox-radio-id"
                tabindex={internalTabIndex}
@@ -11,9 +12,9 @@
                disabled={isDisabled}
                onkeydown={handleRadioKeyDown}
                checked={isSelected}>
-        <label 
-            id={labelId} 
-            class="slds-radio__label" 
+        <label lwc:ref="label"
+            id={labelId}
+            class="slds-radio__label"
             for="primitive-checkbox-radio-id">
             <span class="slds-radio_faux"></span>
             <span class="slds-form-element__label slds-assistive-text">

package/src/lightning/primitiveCellEditableButton/primitiveCellEditableButton.html

@@ -1,5 +1,5 @@
 <template>
-    <button tabindex={tabIndex} class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small">
+    <button lwc:ref="button" tabindex={tabIndex} class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small">
         <lightning-primitive-icon
             icon-name="utility:edit"
             size="xx-small"

package/src/lightning/primitiveCellEditableButton/primitiveCellEditableButton.js

@@ -38,7 +38,7 @@ export default class PrivateCellEditableButton extends LightningElement {
 
     get htmlButton() {
         if (!this._htmlButton) {
-            this._htmlButton = this.template.querySelector('button');
+            this._htmlButton = this.refs.button;
         }
 
         return this._htmlButton;

package/src/lightning/primitiveCellFactory/bareCustomCell.html

@@ -1,6 +1,7 @@
 <template>
     <div class={computedCellDivClass} style={computedCssStyles}>
         <lightning-primitive-custom-cell
+            lwc:ref="customCell"
             types={types}
             keyboard-mode={keyboardMode}
             column-type={columnType}

package/src/lightning/primitiveCellFactory/cellWithStandardLayout.html

@@ -104,6 +104,7 @@
             <!-- custom type -->
             <template if:true={isCustomType}>
                 <lightning-primitive-custom-cell
+                      lwc:ref="customCell"
                       class={computedMarginClassWhenLeftIconExists}
                       types={types}
                       keyboard-mode={keyboardMode}

package/src/lightning/primitiveCellFactory/primitiveCellFactory.js

@@ -93,9 +93,7 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
             this.template.querySelectorAll('[data-navigation="enable"]')
         );
 
-        const customType = this.template.querySelector(
-            'lightning-primitive-custom-cell'
-        );
+        const customType = this.refs.customCell;
 
         if (customType) {
             const wrapperActionableElements =
@@ -283,7 +281,7 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
             'slds-truncate':
                 columnType !== 'button-icon' && !isActionType && !_wrapText,
             'slds-hyphenate': _wrapText,
-            'slds-line-clamp': _wrapText && this.wrapTextMaxLines,
+            'slds-line-clamp': _wrapText,
             'ltr-content-in-rtl': document.dir === 'rtl' && this.isLtrType(),
         });
     }
@@ -357,8 +355,8 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
     }
 
     get computedCssStyles() {
-        if (this._wrapText && this.wrapTextMaxLines) {
-            return `${'--lwc-lineClamp'}: ${this.wrapTextMaxLines}`;
+        if (this._wrapText) {
+            return `${'--lwc-lineClamp'}: ${this.wrapTextMaxLines || 'none'}`;
         }
         return null;
     }

package/src/lightning/primitiveColorpickerButton/color-picker-button.slds.css

@@ -69,7 +69,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --slds-c-icon-color-foreground: var(--slds-g-color-disabled-1);
 
     pointer-events: none;
-    border-color: transparent;
+    border-color: var(--slds-g-color-border-disabled-2);
   }
 
   /* TO DO: .panel and .panel-open should be renamed

package/src/lightning/primitiveColumnSorter/primitiveColumnSorter.html

@@ -12,6 +12,7 @@
                 <lightning-button-icon tooltip={i18n.moveDownTooltip} icon-name="utility:arrowdown" onclick={handleMoveDown} disabled={isDownDisabled} variant="border-filled" alternative-text="Arrow Down"></lightning-button-icon>
             </lightning-button-group>
             <lightning-combobox
+                lwc:ref="combobox"
                 name="column select"
                 disabled={rule.disableInputs}
                 placeholder={i18n.dropdownPlaceholder}

package/src/lightning/primitiveColumnSorter/primitiveColumnSorter.js

@@ -26,7 +26,7 @@ export default class PrimitiveColumnSorter extends LightningElement {
     @api
     get combobox() {
         if (!this._combobox) {
-            this._combobox = this.template.querySelector('lightning-combobox');
+            this._combobox = this.refs.combobox;
         }
         return this._combobox;
     }

package/src/lightning/primitiveDatatableIeditPanel/primitiveDatatableIeditPanel.html

@@ -1,6 +1,7 @@
 <template>
     <section
         if:true={visible}
+        lwc:ref="section"
         class="slds-popover slds-popover_edit"
         role="dialog"
         aria-label={dialogAriaLabel}
@@ -35,6 +36,7 @@
                 <template if:true={isMassEditEnabled}>
                     <!-- Checkbox to select in order to mass edit multiple rows -->
                     <lightning-input
+                        lwc:ref="massSelectCheckbox"
                         data-mass-selection="true"
                         type="checkbox"
                         name="dt-iedit-mass-edit"
@@ -60,12 +62,12 @@
                         onclick={cancelEditing}>
                     </lightning-button>
                     <lightning-button
+                        lwc:ref="formLastElement"
                         label={i18n.apply}
                         style="margin-left: .25rem"
                         variant="brand"
                         onblur={handleTypeElemBlur}
                         onfocus={handleTypeElemFocus}
-                        data-form-last-element="true"
                         onclick={processSubmission}>
                     </lightning-button>
                 </div>

package/src/lightning/primitiveDatatableIeditPanel/primitiveDatatableIeditPanel.js

@@ -53,7 +53,7 @@ export default class PrimitiveDatatableIeditPanel extends LightningElement {
     get isMassEditChecked() {
         return (
             this.isMassEditEnabled &&
-            this.template.querySelector('[data-mass-selection="true"]').checked
+            this.refs.massSelectCheckbox.checked
         );
     }
 
@@ -95,7 +95,7 @@ export default class PrimitiveDatatableIeditPanel extends LightningElement {
      */
     @api
     getPositionedElement() {
-        return this.template.querySelector('section');
+        return this.refs.section;
     }
 
     /************************* PRIVATE GETTERS *************************/
@@ -279,7 +279,7 @@ export default class PrimitiveDatatableIeditPanel extends LightningElement {
     /************************* HELPER FUNCTIONS *************************/
 
     focusLastElement() {
-        this.template.querySelector('[data-form-last-element="true"]').focus();
+        this.refs.formLastElement.focus();
     }
 
     processSubmission() {

package/src/lightning/primitiveDatatableStatusBar/primitiveDatatableStatusBar.html

@@ -4,6 +4,7 @@
             <template if:true={showError}>
                 <!-- Error Tooltip -->
                 <lightning-primitive-datatable-tooltip
+                    lwc:ref="tooltip"
                     class="slds-button"
                     size="small"
                     variant="error"

package/src/lightning/primitiveDatatableStatusBar/primitiveDatatableStatusBar.js

@@ -95,9 +95,7 @@ export default class LightningPrimitiveDatatableStatusBar extends LightningEleme
      */
     handleShowError() {
         Promise.resolve().then(() => {
-            const trigger = this.template.querySelector(
-                'lightning-primitive-datatable-tooltip'
-            );
+            const trigger = this.refs.tooltip;
 
             if (trigger) {
                 if (this.showErrorBubble) {

package/src/lightning/primitiveDatatableTooltip/primitiveDatatableTooltip.html

@@ -1,5 +1,6 @@
 <template>
     <button
+        lwc:ref="trigger"
         data-trigger="true"
         class={computedButtonClass}
         onmouseover={handleMouseOver}

package/src/lightning/primitiveDatatableTooltip/primitiveDatatableTooltip.js

@@ -104,7 +104,7 @@ export default class LightningPrimitiveDatatableTooltip extends LightningElement
     }
 
     get triggerElement() {
-        return this.template.querySelector('[data-trigger="true"]');
+        return this.refs.trigger;
     }
 
     handleMouseOver() {

package/src/lightning/primitiveDatatableTooltipBubble/primitiveDatatableTooltipBubble.html

@@ -16,7 +16,7 @@
                 alternative-text={i18n.closeButtonAssistiveText}
                 onclick={handleCloseButtonClick}
                 onkeydown={handleCloseButtonKey}
-                data-close="true"
+                lwc:ref="closeBtn"
             ></lightning-button-icon>
         </template>
 

package/src/lightning/primitiveDatatableTooltipBubble/primitiveDatatableTooltipBubble.js

@@ -82,7 +82,7 @@ export default class LightningPrimitiveDatatableTooltipBubble extends LightningE
     }
 
     get closeButton() {
-        return this.template.querySelector('[data-close="true"]');
+        return this.refs.closeBtn;
     }
 
     handleBlur = (evt) => {

package/src/lightning/primitiveHeaderActions/primitiveHeaderActions.html

@@ -1,6 +1,7 @@
 <template>
     <template if:true={hasActions}>
         <lightning-button-menu
+            lwc:ref="buttonMenu"
             id="primitive-header-action-button-menu-id"
             icon-size="x-small"
             menu-alignment={_actionMenuAlignment}

package/src/lightning/primitiveHeaderActions/primitiveHeaderActions.js

@@ -58,7 +58,7 @@ export default class PrimitiveHeaderActions extends LightningElement {
      */
     @api
     focus() {
-        const btnMenu = this.template.querySelector('lightning-button-menu');
+        const btnMenu = this.refs.buttonMenu;
 
         if (btnMenu) {
             btnMenu.focus();
@@ -109,9 +109,7 @@ export default class PrimitiveHeaderActions extends LightningElement {
         event.preventDefault();
         event.stopPropagation();
 
-        this.elementRect = this.template
-            .querySelector('lightning-button-menu')
-            .getBoundingClientRect();
+        this.elementRect = this.refs.buttonMenu.getBoundingClientRect();
 
         this.dispatchEvent(
             new CustomEvent('privatecellheaderactionmenuopening', {

package/src/lightning/primitiveHeaderFactory/nonsortableHeader.html

@@ -1,5 +1,5 @@
 <template>
-    <div class={computedClass} style={columnStyles}>
+    <div lwc:ref="child" class={computedClass} style={columnStyles}>
 
         <!-- Header Content -->
         <span class="slds-th__action" style={thActionStyles}>
@@ -7,12 +7,17 @@
                 <div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
                     <lightning-icon icon-name={def.iconName} size="x-small" class="slds-icon_container slds-m-right_xx-small" alternative-text={def.label} title={def.label}></lightning-icon>
                     <template if:false={def.hideLabel} class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
-                        <span class={getHeaderLabelStyle}>{def.label}</span>
+                        <span class={getHeaderLabelClass} style={getHeaderLabelStyle}>{def.label}</span>
                     </template>
                 </div>
             </template>
             <template if:false={def.iconName}>
-                <span class={getHeaderLabelStyle} if:true={def.label} title={def.label}>{def.label}</span>
+                <span if:true={def.label}
+                    class={getHeaderLabelClass}
+                    style={getHeaderLabelStyle}
+                    title={def.label}>
+                    {def.label}
+                </span>
                 <span class="slds-truncate" if:false={def.label} title={def.ariaLabel}></span>
             </template>
 

package/src/lightning/primitiveHeaderFactory/primitiveHeaderFactory.js

@@ -58,11 +58,13 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
     @api colIndex;
     @api columnWidth;
     @api dtContextId;
+    @api headerHeight;
     @api resizestep;
     @api showCheckbox = false;
     @api sorted;
     @api sortedDirection;
     @api showActionsMenu;
+    @api wrapTextMaxLines;
 
     /**
      * Retrieves the computed header DOM `id`
@@ -71,7 +73,7 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
      */
     @api
     get computedColumnHeaderId() {
-        const el = this.template.querySelector('[data-column-header]');
+        const el = this.refs.columnHeader;
         return getRealDOMId(el);
     }
 
@@ -152,6 +154,20 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
 
     /************************** PUBLIC METHODS ***************************/
 
+    /**
+     * Retrieves the header cell's height
+     *
+     * @return {string} The height of the cell
+     */
+    @api
+    getDomHeight() {
+        const child = this.template.querySelector('.slds-hyphenate');
+        if (child) {
+            return child.offsetHeight;
+        }
+        return '';
+    }
+
     /**
      * Retrieves the header cell's width
      *
@@ -159,7 +175,7 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
      */
     @api
     getDomWidth() {
-        const child = this.template.querySelector('.slds-cell-fixed');
+        const { child } = this.refs;
         if (child) {
             return child.offsetWidth;
         }
@@ -168,6 +184,14 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
 
     /************************** PRIVATE GETTERS **************************/
 
+    get shouldWrapText() {
+        const { _wrapTableHeader } = this;
+        return (
+            _wrapTableHeader === 'all' ||
+            (_wrapTableHeader === 'by-column' && this._def.wrapText)
+        );
+    }
+
     /**
      * Computes the styles for the column
      *
@@ -182,7 +206,9 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
         const offsetStyle =
             document.dir === 'rtl' ? `right: ${this._def.offset}px;` : '';
         const widthStyle = columnWidth ? `width: ${columnWidth}px;` : '';
-        const heightStyle = this._wrapTableHeader ? 'min-height: 3rem' : '';
+        const heightStyle = this.headerHeight
+            ? `height: ${this.headerHeight}`
+            : '';
 
         return `
             ${widthStyle}
@@ -226,22 +252,28 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
     /**
      * Computes styling for header label
      */
-    get getHeaderLabelStyle() {
-        return this._wrapTableHeader
-            ? 'slds-line-clamp_small '
+    get getHeaderLabelClass() {
+        return this.shouldWrapText
+            ? 'slds-line-clamp slds-hyphenate'
             : 'slds-truncate';
     }
 
+    /**
+     * Computes styling for header label
+     */
+    get getHeaderLabelStyle() {
+        return this.shouldWrapText
+            ? `--lwc-lineClamp: ${this.wrapTextMaxLines || 'none'}`
+            : '';
+    }
+
     /**
      * Get th Action styles (needed for wrapping headers)
      *
      * @return {string} The computed classes
      */
     get thActionStyles() {
-        const heightStyle = this._wrapTableHeader ? 'min-height: 3rem' : '';
-        return `
-            ${heightStyle}
-        `;
+        return this.headerHeight ? `height: ${this.headerHeight}` : '';
     }
 
     /**
@@ -494,9 +526,7 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
      */
     updateBulkSelectionCheckbox() {
         const { bulkSelection } = this._def;
-        const allCheckbox = this.template.querySelector(
-            '.datatable-select-all'
-        );
+        const allCheckbox = this.refs.selectAll;
         allCheckbox.indeterminate = bulkSelection === 'some';
 
         // Note: since we have to handle the indeterminate state,

package/src/lightning/primitiveHeaderFactory/selectableHeader.html

@@ -1,13 +1,14 @@
 <template>
-    <span id="column-group-header" class="slds-assistive-text" data-column-header>
+    <span lwc:ref="columnHeader" id="column-group-header" class="slds-assistive-text" data-column-header>
         {computedColumnHeaderLabel}
     </span>
     <!-- Header Content -->
-    <div class="slds-th__action slds-th__action_form slds-cell-fixed" style={columnStyles}>
+    <div lwc:ref="child" class="slds-th__action slds-th__action_form slds-cell-fixed" style={columnStyles}>
         <template if:true={showCheckbox}>
             <span class="slds-checkbox">
                 <!-- Selectable Checkbox -->
                 <input
+                    lwc:ref="selectAll"
                     type="checkbox"
                     class="datatable-select-all"
                     name={computedOptionName}

package/src/lightning/primitiveHeaderFactory/sortableHeader.html

@@ -1,6 +1,6 @@
 <template>
     <!-- Header Content -->
-    <span class={computedClass} tabindex={internalTabIndex} style={columnStyles}>
+    <span lwc:ref="child" class={computedClass} tabindex={internalTabIndex} style={columnStyles}>
 
         <a href="javascript:void(0);"
            class={computedSortClass}
@@ -18,7 +18,7 @@
                 <div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
                     <lightning-icon icon-name={def.iconName} size="x-small" class="slds-icon_container slds-m-right_xx-small" alternative-text={def.label} title={def.label}></lightning-icon>
                     <template if:false={def.hideLabel} class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
-                        <span class={getHeaderLabelStyle}>{def.label}</span>
+                        <span class={getHeaderLabelClass} style={getHeaderLabelStyle}>{def.label}</span>
                     </template>
 
                     <!-- Arrow Icon - Rotates based on sorting direction -->
@@ -31,7 +31,12 @@
                 </div>
             </template>
             <template if:false={def.iconName}>
-                <span class={getHeaderLabelStyle} title={def.label}>{def.label}</span>
+                <span
+                    class={getHeaderLabelClass}
+                    style={getHeaderLabelStyle}
+                    title={def.label}>
+                    {def.label}
+                </span>
                 <!-- Arrow Icon - Rotates based on sorting direction -->
                     <lightning-primitive-icon
                          class="slds-icon_container"

package/src/lightning/primitiveHeaderFactory/sortingMenuHeader.html

@@ -1,5 +1,5 @@
 <template>
-    <div class="slds-th__action slds-th__action_form slds-cell-fixed" style={columnStyles}>
+    <div lwc:ref="child" class="slds-th__action slds-th__action_form slds-cell-fixed" style={columnStyles}>
         <lightning-button-menu alternative-text="Show menu" internal-datatable-actions-menu icon-name="utility:threedots" variant="border-filled" menu-alignment="right" icon-size="x-small" tooltip={i18n.sortingMenuTooltip} onselect={handleSortingMenuSelection}>
             <lightning-menu-item value="MultiColumnSorting" label={i18n.sortingMenuMultiColumnSort}></lightning-menu-item>
             <lightning-menu-item value="ReorderRow" label={i18n.sortingMenuRows}></lightning-menu-item>

package/src/lightning/primitiveIcon/primitiveIcon.css

@@ -1,2 +1 @@
-@import './primitiveIcon.lbc.synthetic.css';
 @import './primitiveIcon.lbc.native.css';

package/src/lightning/primitiveInputCheckbox/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-s-label-font-size, var(--slds-g-font-scale-neg-2));
+        font-size: var(--slds-g-font-scale-neg-3);
         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/primitiveInputCheckboxButton/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-s-label-font-size, var(--slds-g-font-scale-neg-2));
+        font-size: var(--slds-g-font-scale-neg-3);
         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/primitiveInputColor/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-s-label-font-size, var(--slds-g-font-scale-neg-2));
+        font-size: var(--slds-g-font-scale-neg-3);
         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/primitiveInputColor/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-size-base)
+            var(--slds-g-font-scale-neg-2)
         );
         --sds-c-inputtext-text-color-placeholder: var(
             --slds-c-inputtext-text-color-placeholder,
@@ -264,7 +264,7 @@
 
         display: flex;
         flex-wrap: wrap;
-        flex-direction: column;
+        align-items: center;
     }
 /**
    * Input Container
@@ -371,10 +371,6 @@
         --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
    *
@@ -388,7 +384,10 @@
             --slds-c-inputtext-label-color,
             var(--slds-g-color-on-surface-2)
         );
-        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
+        font-size: var(
+            --slds-c-inputtext-label-font-size,
+            var(--slds-g-font-scale-neg-3)
+        );
         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/primitiveInputFile/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-s-label-font-size, var(--slds-g-font-scale-neg-2));
+        font-size: var(--slds-g-font-scale-neg-3);
         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/primitiveInputSimple/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-s-label-font-size, var(--slds-g-font-scale-neg-2));
+        font-size: var(--slds-g-font-scale-neg-3);
         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/primitiveInputSimple/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-size-base)
+            var(--slds-g-font-scale-neg-2)
         );
         --sds-c-inputtext-text-color-placeholder: var(
             --slds-c-inputtext-text-color-placeholder,
@@ -264,7 +264,7 @@
 
         display: flex;
         flex-wrap: wrap;
-        flex-direction: column;
+        align-items: center;
     }
 /**
    * Input Container
@@ -371,10 +371,6 @@
         --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
    *
@@ -388,7 +384,10 @@
             --slds-c-inputtext-label-color,
             var(--slds-g-color-on-surface-2)
         );
-        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
+        font-size: var(
+            --slds-c-inputtext-label-font-size,
+            var(--slds-g-font-scale-neg-3)
+        );
         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 */