lightning-base-components 1.21.5-alpha → 1.21.7-alpha

package/src/lightning/primitiveInputFile/button.slds.css

@@ -194,7 +194,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   );
   --sds-c-button-spacing-inline: var(
     --slds-c-button-neutral-spacing-inline,
-    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4))
+    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4));
   );
   --sds-c-button-spacing-block: var(--slds-c-button-neutral-spacing-block);
 
@@ -255,27 +255,27 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   );
   --sds-c-button-color-background-hover: var(
     --slds-c-button-neutral-color-background-hover,
-    var(--slds-g-color-surface-container-1)
+    var(--slds-g-color-surface-container-2)
   );
-  --sds-c-button-color-background-focus: var(--slds-c-button-neutral-color-background-focus, var(--slds-g-color-surface-container-1));
+  --sds-c-button-color-background-focus: var(--slds-c-button-neutral-color-background-focus, var(--slds-g-color-surface-container-2));
   --sds-c-button-color-background-active: var(
     --slds-c-button-neutral-color-background-active,
-    var(--slds-g-color-surface-container-1)
+    var(--slds-g-color-surface-container-2)
   );
 
   /* Border color */
-  --sds-c-button-color-border: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
+  --sds-c-button-color-border: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-2));
   --sds-c-button-color-border-hover: var(
     --slds-c-button-neutral-color-border-hover,
-    var(--slds-g-color-border-accent-1)
+    var(--slds-g-color-border-2)
   );
   --sds-c-button-color-border-focus: var(
     --slds-c-button-neutral-color-border-focus,
-    var(--slds-g-color-border-accent-1)
+    var(--slds-g-color-border-2)
   );
   --sds-c-button-color-border-active: var(
     --slds-c-button-neutral-color-border-active,
-    var(--slds-g-color-border-accent-1)
+    var(--slds-g-color-border-2)
   );
 
   /* Text color */
@@ -290,11 +290,12 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /* Shadow */
   --sds-c-button-shadow: var(--slds-c-button-neutral-shadow);
   --sds-c-button-shadow-focus: var(--slds-c-button-neutral-shadow-focus);
-
-  /* Disabled */
-  --sds-c-button-color-background-disabled: var(--slds-g-color-surface-container-1);
-  --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
-  --sds-c-button-text-color-disabled: var(--slds-g-color-disabled-1);
+}
+/* Overriding primitiveBaseButton */
+:host([data-render-mode="shadow"]) [part~='button']:disabled {
+   --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
+   --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
+   --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
 }
 /**
   * A note about fallbacks on the default variant:
@@ -410,9 +411,9 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-color-border-active: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
 }
 :host([data-render-mode="shadow"][variant='brand']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='success']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='destructive']) [part~='button']:disabled {
-  --sds-c-button-color-background: var(--slds-g-color-disabled-container-1);
+  --sds-c-button-color-background: var(--slds-g-color-disabled-container-2);
   --sds-c-button-color-border: var(--slds-g-color-border-disabled-1);
-  --sds-c-button-text-color: var(--slds-g-color-on-disabled-1);
+  --sds-c-button-text-color: var(--slds-g-color-on-disabled-2);
 }
 /**
    * 'base' variant is not the default in LBC. It is the default in the light

package/src/lightning/primitiveInputFile/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;
     }
 
@@ -242,6 +245,7 @@
 
 @media (width >= 48em) {
         :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
+          float: left;
           max-width: calc(33% - var(--slds-g-sizing-6)); /* Removing icon width for when the help-text icon is present */
           flex-basis: calc(33% - var(--slds-g-sizing-6)); /* Some form element controls are set to display:flex */
           flex-grow: 1; /* For IE and Safari which didn't auto expand to the available space */

package/src/lightning/primitiveInputFile/primitiveInputFile.html

@@ -44,6 +44,6 @@
         </div>
     </div>
     <template if:true={_helpMessage}>
-        <div id="help-message" class="slds-form-element__help" data-help-message part="help-text">{_helpMessage}</div>
+        <div id="help-message" class="slds-form-element__help" data-help-message part="help-text" role="status">{_helpMessage}</div>
     </template>
 </template>

package/src/lightning/primitiveInputRadio/primitiveInputRadio.html

@@ -22,6 +22,6 @@
         </span>
     </div>
     <template if:true={helpMessage}>
-        <div id="help-message" class="slds-form-element__help" data-help-message part="help-text">{helpMessage}</div>
+        <div id="help-message" class="slds-form-element__help" data-help-message part="help-text" role="status">{helpMessage}</div>
     </template>
 </template>

package/src/lightning/primitiveInputSimple/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;
     }
 
@@ -242,6 +245,7 @@
 
 @media (width >= 48em) {
         :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
+          float: left;
           max-width: calc(33% - var(--slds-g-sizing-6)); /* Removing icon width for when the help-text icon is present */
           flex-basis: calc(33% - var(--slds-g-sizing-6)); /* Some form element controls are set to display:flex */
           flex-grow: 1; /* For IE and Safari which didn't auto expand to the available space */

package/src/lightning/primitiveInputSimple/input-text.slds.css

@@ -254,7 +254,7 @@
         );
         --sds-c-inputtext-color-border: var(
             --slds-c-inputtext-color-border,
-            var(--slds-g-color-border-1)
+            var(--slds-g-color-border-2)
         );
         --sds-c-inputtext-sizing-border: var(--slds-c-inputtext-sizing-border);
         --sds-c-inputtext-radius-border: var(
@@ -330,7 +330,7 @@
     }
 :host([data-render-mode="shadow"][readonly]) [part="input-container"]:focus-within,:host([data-render-mode="shadow"][readonly]) [part="input-container"]:active {
        --sds-c-inputtext-color-border: var(--slds-g-color-disabled-container-2);
-       --sds-c-inputtext-shadow: 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-accent-1);
+       --sds-c-inputtext-shadow: 0 0 var(--slds-g-sizing-border-3) var(--slds-g-color-accent-2);
        --sds-c-inputtext-color-background: transparent;
 
        outline: 0;
@@ -367,9 +367,9 @@
    */
 :host([data-render-mode="shadow"][disabled]) [part='input-container'],:host([data-render-mode="shadow"][disabled]) [part='input'] {
         cursor: not-allowed;
-        --sds-c-inputtext-color-background: var(--slds-g-color-disabled-container-1);
-        --sds-c-inputtext-color-border: var(--slds-g-color-border-1);
-        --sds-c-inputtext-text-color: var(--slds-g-color-on-surface-1);
+        --sds-c-inputtext-color-background: var(--slds-s-input-color-background-disabled, var(--slds-g-color-disabled-container-1));
+        --sds-c-inputtext-color-border: var(--slds-g-color-border-disabled-1);
+        --sds-c-inputtext-text-color: var(--slds-g-color-on-disabled-2);
     }
 /**
    * Label

package/src/lightning/primitiveInputSimple/primitiveInputSimple.html

@@ -1,11 +1,12 @@
 <template>
-    <div part="input-text">
+    <div lwc:ref="container" part="input-text">
         <template if:false={hasExternalLabel}>
             <label class={computedLabelClass} for="input" part="label">
                 <template if:true={required}>
                     <abbr class="slds-required" title={i18n.required}>*</abbr>
                 </template>
                 {label}
+                <slot name="label-end"></slot>
             </label>
             <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
         </template>
@@ -66,6 +67,6 @@
         </div>
     </div>
     <template if:true={_helpMessage}>
-        <div id="help-message" class="slds-form-element__help" data-help-message part="help-text">{_helpMessage}</div>
+        <div id="help-message" class="slds-form-element__help" data-help-message part="help-text" role="status">{_helpMessage}</div>
     </template>
 </template>

package/src/lightning/primitiveInputSimple/primitiveInputSimple.js

@@ -22,6 +22,7 @@ import {
     toIsoDecimal,
 } from 'lightning/numberUtils';
 
+import { isEmptyString } from 'lightning/inputUtils';
 import {
     reflectAttribute,
     isSafari,
@@ -198,6 +199,12 @@ export default class LightningPrimitiveInputSimple extends LightningShadowBaseCl
                     this.updateNumberValue(value);
                 }
             }
+
+            // Note: The input element itself isn't actually updated during this setter. Instead, lightning-input
+            // silently updates the input element with the new value from outside this component. No input/change
+            // event is fired, so this is the only place we can update the flag and trust lightning-input to do the
+            // right thing.
+            this.reflectPopulatedState();
         }
     }
 
@@ -325,6 +332,7 @@ export default class LightningPrimitiveInputSimple extends LightningShadowBaseCl
         }
 
         this.dispatchChangeEvent();
+        this.reflectPopulatedState();
     }
 
     handleChange(event) {
@@ -610,6 +618,13 @@ export default class LightningPrimitiveInputSimple extends LightningShadowBaseCl
     setInputValue(value) {
         // set value without dispatching an 'input' event
         setDecoratedDragonInputValueWithoutEvent(this.inputElement, value);
+        this.reflectPopulatedState();
+    }
+
+    reflectPopulatedState() {
+        if (this.refs) {
+            reflectAttribute(this.refs.container, 'populated', !isEmptyString(this._value) || !isEmptyString(this._numberRawValue));
+        }
     }
 
     connectedCallback() {

package/src/lightning/primitiveInputToggle/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;
     }
 
@@ -242,6 +245,7 @@
 
 @media (width >= 48em) {
         :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
+          float: left;
           max-width: calc(33% - var(--slds-g-sizing-6)); /* Removing icon width for when the help-text icon is present */
           flex-basis: calc(33% - var(--slds-g-sizing-6)); /* Some form element controls are set to display:flex */
           flex-grow: 1; /* For IE and Safari which didn't auto expand to the available space */

package/src/lightning/primitiveInputToggle/input-toggle.slds.css

@@ -34,7 +34,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :host([data-render-mode="shadow"]) .slds-checkbox_faux_container {
         font-size: var(--slds-g-font-scale-neg-4);
-        color: var(--slds-g-color-on-surface-2);
+        color: var(--slds-g-color-on-surface-1);
     }
 
 
@@ -45,9 +45,9 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       height: var(--slds-g-sizing-7);
       border-width: var(--slds-g-sizing-border-1);
       border-style: solid;
-      border-color: var(--slds-c-checkbox-toggle-color-border, var(--slds-g-color-border-1));
+      border-color: var(--slds-c-checkbox-toggle-color-border, var(--slds-g-color-neutral-base-60));
       padding: var(--slds-g-sizing-1);
-      background-color: var(--slds-c-checkbox-toggle-color-background, var(--slds-g-color-surface-container-3));
+      background-color: var(--slds-c-checkbox-toggle-color-background, var(--slds-g-color-neutral-base-60));
       border-radius: var(--slds-c-checkbox-toggle-radius-border, 15rem);
       box-shadow: var(--slds-c-checkbox-toggle-shadow);
       transition: background-color 0.2s cubic-bezier(0.75, 0, 0.08, 1);
@@ -56,7 +56,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :host([data-render-mode="shadow"]) [part='indicator']:hover,:host([data-render-mode="shadow"]) 
     [part='indicator']:focus {
-      --slds-c-checkbox-toggle-color-background: var(--slds-c-checkbox-toggle-color-background-hover, var(--slds-g-color-accent-container-2));
+      --slds-c-checkbox-toggle-color-background: var(--slds-c-checkbox-toggle-color-background-hover, var(--slds-g-color-neutral-base-50));
       --slds-c-checkbox-toggle-color-border: var(--slds-c-checkbox-toggle-color-border-hover);
 
       cursor: pointer;
@@ -139,23 +139,29 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         width: 0.45rem;
         border-bottom-width: var(--slds-g-sizing-border-2);
         border-bottom-style: solid;
-        border-bottom-color: var(--slds-c-checkbox-toggle-mark-color-foreground, var(--slds-g-color-border-1));
+        border-bottom-color: var(--slds-c-checkbox-toggle-mark-color-foreground, var(--slds-g-color-neutral-base-100));
         border-right-width: var(--slds-g-sizing-border-2);
         border-right-style: solid;
-        border-right-color: var(--slds-c-checkbox-toggle-mark-color-foreground, var(--slds-g-color-border-1));
+        border-right-color: var(--slds-c-checkbox-toggle-mark-color-foreground, var(--slds-g-color-neutral-base-100));
         transform: rotate(45deg);
     }
 
 
 :host([data-render-mode="shadow"]) [part='checkbox'][disabled] + .slds-checkbox_faux_container > [part='indicator'] {
-        background-color: var(--slds-g-color-neutral-base-80, var(--slds-g-color-disabled-container-1));
-        border-color: var(--slds-g-color-neutral-base-80, var(--slds-g-color-border-disabled-2));
+        background-color: var(--slds-g-color-disabled-container-2, var(--slds-g-color-neutral-base-80));
+        border-color: var(--slds-g-color-border-disabled-1, var(--slds-g-color-neutral-base-80));
         pointer-events: none;
     }
 
 
+:host([data-render-mode="shadow"]) [part='checkbox'][disabled] + .slds-checkbox_faux_container > [part='indicator']::after,:host([data-render-mode="shadow"]) 
+    [part='checkbox'][disabled]:checked + .slds-checkbox_faux_container > [part='indicator']::before {
+        background-color: var(--slds-g-color-on-disabled-2, var(--slds-g-color-neutral-base-60));
+    }
+
+
 :host([data-render-mode="shadow"]) [part='checkbox'][disabled] + .slds-checkbox_faux_container > [part='indicator']::after {
-        background-color: var(--slds-g-color-neutral-base-80, var(--slds-g-color-disabled-1));
+      --slds-c-checkbox-toggle-mark-color-foreground: var(--slds-g-color-on-disabled-2);
     }
 
 
@@ -166,13 +172,9 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     }
 
 
-:host([data-render-mode="shadow"]) [part='checkbox'][disabled]:checked + .slds-checkbox_faux_container > [part='indicator']::before {
-        background-color: var(--slds-g-color-disabled-1);
-    }
-
-
 :host([data-render-mode="shadow"]) [part='checkbox'][disabled]:checked + .slds-checkbox_faux_container > [part='indicator']::after {
         background-color: transparent;
+        --slds-c-checkbox-toggle-mark-color-foreground: var(--slds-g-color-on-disabled-2);
     }
 
 

package/src/lightning/primitiveInputToggle/primitiveInputToggle.html

@@ -32,6 +32,6 @@
         </label>
     </div>
     <template if:true={_helpMessage}>
-        <div id="help-message" class="slds-form-element__help" data-help-message part="help-text">{_helpMessage}</div>
+        <div id="help-message" class="slds-form-element__help" data-help-message part="help-text" role="status">{_helpMessage}</div>
     </template>
 </template>

package/src/lightning/progressBar/progress-bar.slds.css

@@ -12,7 +12,7 @@
     display: block;
     width: 100%;
     height: var(--_slds-c-progressbar-height);
-    background: var(--slds-g-color-surface-container-1);
+    background: var(--slds-g-color-neutral-base-80);
     border: 0;
     position: relative;
 }

package/src/lightning/progressIndicator/path.html

@@ -2,18 +2,24 @@
     <div class="slds-path">
         <div class="slds-grid slds-path__track">
             <div class="slds-grid slds-path__scroller-container">
-                <div class="slds-path__scroller" role="application">
+                <div class="slds-path__scroller">
                     <div class="slds-path__scroller_inner">
                         <ul class="slds-path__nav"
                             role="listbox"
                             aria-orientation="horizontal"
                             onkeydown={handleStepKeyDown}
-                            onstepfocus={handleStepFocus}>
+                            onstepfocus={handleStepFocus}
+                            aria-labelledby="slds-path__stage-name">
                             <slot onslotchange={handleSlotChange}></slot>
                         </ul>
                     </div>
                 </div>
             </div>
+            <div class="slds-grid slds-path__action">
+                <span id="slds-path__stage-name" class="slds-path__stage-name" data-label={currentStepLabel}>
+                    {currentStepLabel}
+                </span>
+            </div>
         </div>
     </div>
 </template>

package/src/lightning/progressIndicator/progressIndicator.js

@@ -1,5 +1,6 @@
 import { LightningElement, api, track } from 'lwc';
-import { classSet } from 'lightning/utils';
+import { classSet, formatLabel } from 'lightning/utils';
+import pathCurrentStage from '@salesforce/label/LightningProgressIndicator.pathCurrentStage';
 import {
     getStepIndex,
     getCurrentStepIndex,
@@ -8,6 +9,10 @@ import {
 import base from './base.html';
 import path from './path.html';
 
+const i18n = {
+    currentStageLabel: pathCurrentStage,
+};
+
 const STATE_COMPLETED = 'completed';
 const STATE_CURRENT = 'current';
 const STATE_INCOMPLETE = 'incomplete';
@@ -57,6 +62,17 @@ export default class LightningProgressIndicator extends LightningElement {
         }
     }
 
+    /**
+     * getter for the i18 constant containing the localized strings
+     */
+    get i18n() {
+        return i18n;
+    }
+
+    get currentStepLabel() {
+        return formatLabel(this.i18n.currentStageLabel, this._currentStepLabel);
+    }
+
     /**
      * If present, the current step is in error state and an error icon is displayed on the step indicator.
      * Only the base type can display errors.
@@ -76,6 +92,7 @@ export default class LightningProgressIndicator extends LightningElement {
 
     privateRendered = false;
     privateCurrentStep;
+    _currentStepLabel = '';
 
     connectedCallback() {
         this.addEventListener(
@@ -86,7 +103,13 @@ export default class LightningProgressIndicator extends LightningElement {
 
     renderedCallback() {
         this.privateRendered = true;
-        this.updateSteps();
+        // Avoid a timing issue due to LWC v6's native custom element lifecycle:
+        // https://github.com/salesforce/lwc/releases/v6.0.0#new-timing
+        // updateSteps needs to occur after progressSteps's 'privateregisterstep' event is fired
+        // from its connectedCallback
+        Promise.resolve().then(() => {
+            this.updateSteps();
+        });
     }
 
     handleSlotChange() {
@@ -98,6 +121,7 @@ export default class LightningProgressIndicator extends LightningElement {
         const steps = this.getSteps();
         const { privateStepHandlers, type, hasError, currentStep } = this;
         const currentStepIndex = getCurrentStepIndex(steps, currentStep);
+        this._currentStepLabel = steps[currentStepIndex]?.label;
 
         let activeStepIndex = -1;
         // Set activeStepIndex to activeStep if provided.

package/src/lightning/progressRing/progress-ring.slds.css

@@ -80,7 +80,7 @@
         fill: var(--slds-g-color-on-success-1);
     }
     :host([data-render-mode="shadow"]) .slds-progress-ring_complete .slds-progress-ring__path {
-        fill: var(--slds-g-color-success-2);
+        fill: var(--slds-g-color-success-1);
     }
     :host([data-render-mode="shadow"]) .slds-progress-ring_complete .slds-progress-ring__content {
         background: var(--slds-g-color-success-container-2);

package/src/lightning/progressStep/progressStep.js

@@ -131,7 +131,8 @@ export default class LightningProgressStep extends LightningElement {
         if (this.hasIcon) {
             classes
                 .add('slds-progress__marker')
-                .add('slds-progress__marker_icon');
+                .add('slds-progress__marker_icon')
+                .add('slds-icon__container');
         }
         return classes.toString();
     }

package/src/lightning/prompt/prompt.js

@@ -15,33 +15,35 @@ export default class LightningPrompt extends LightningOverlay {
     static [parent] = LightningInteractiveDialogBase;
 
     /**
-     * value to use for header text in "header" variant
-     * or aria-label in "headerless" variant
+     * Value to use for header text in "header" variant
+     * or aria-label in "headerless" variant.
      * @type {string}
      * @default "Prompt" (translated accordingly)
      */
     @api label = labelDefault;
 
     /**
-     * text to display in modal
+     * Text to display in the prompt.
      */
     @api message = '';
 
     /**
-     * default value for input
+     * Default value for input.
      */
     @api defaultValue = '';
 
     /**
-     * variant to use for alert; may be
-     * set to "header" or "headerless"
+     * Variant to use for the prompt. Valid
+     * values are "header" and "headerless".
      */
     @api variant = 'header';
 
     /**
-     * theme to use when variant is "header"
-     * valid values are based on SLDS themes and are
-     * listed in "themeOptions" of interactiveDialogBase.js
+     * Theme to use when variant is "header".
+     * Valid values are "default", "shade",
+     * "inverse", "alt-inverse", "success",
+     * "success", "info", "warning", "error",
+     * and "offline".
      */
     @api theme = 'default';
 

package/src/lightning/radioGroup/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;
     }
 
@@ -242,6 +245,7 @@
 
 @media (width >= 48em) {
         :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
+          float: left;
           max-width: calc(33% - var(--slds-g-sizing-6)); /* Removing icon width for when the help-text icon is present */
           flex-basis: calc(33% - var(--slds-g-sizing-6)); /* Some form element controls are set to display:flex */
           flex-grow: 1; /* For IE and Safari which didn't auto expand to the available space */

package/src/lightning/radioGroup/input-radio-group.slds.css

@@ -95,16 +95,12 @@
   background: var(--slds-g-color-neutral-base-60);
 }
 
-:host([data-render-mode="shadow"]) .slds-has-error .slds-radio [type='radio'] + .slds-radio_faux,:host([data-render-mode="shadow"]) 
-.slds-has-error .slds-radio [type='radio'] ~ .slds-radio_faux,:host([data-render-mode="shadow"]) 
-.slds-has-error .slds-radio [type='radio'] + .slds-radio__label .slds-radio_faux {
+:host([data-render-mode="shadow"].slds-has-error) .slds-radio [type='radio'] + .slds-radio_faux,:host([data-render-mode="shadow"].slds-has-error) .slds-radio [type='radio'] ~ .slds-radio_faux,:host([data-render-mode="shadow"].slds-has-error) .slds-radio [type='radio'] + .slds-radio__label .slds-radio_faux {
   border-color: var(--slds-g-color-error-base-40);
-  border-width: var(--slds-g-sizing-2);
+  border-width: var(--slds-g-sizing-border-2);
 }
 
-:host([data-render-mode="shadow"]) .slds-has-error .slds-radio [type='radio']:checked + .slds-radio_faux,:host([data-render-mode="shadow"]) 
-.slds-has-error .slds-radio [type='radio']:checked ~ .slds-radio_faux,:host([data-render-mode="shadow"]) 
-.slds-has-error .slds-radio [type='radio']:checked + .slds-radio__label .slds-radio_faux {
+:host([data-render-mode="shadow"].slds-has-error) .slds-radio [type='radio']:checked + .slds-radio_faux,:host([data-render-mode="shadow"].slds-has-error) .slds-radio [type='radio']:checked ~ .slds-radio_faux,:host([data-render-mode="shadow"].slds-has-error) .slds-radio [type='radio']:checked + .slds-radio__label .slds-radio_faux {
   /* stylelint-disable */
   --slds-c-radio-color-background: var(
     --slds-c-radio-color-background-checked,
@@ -114,9 +110,7 @@
   background: none;
 }
 
-:host([data-render-mode="shadow"]) .slds-has-error .slds-radio [type='radio']:checked + .slds-radio_faux::after,:host([data-render-mode="shadow"]) 
-.slds-has-error .slds-radio [type='radio']:checked ~ .slds-radio_faux::after,:host([data-render-mode="shadow"]) 
-.slds-has-error .slds-radio [type='radio']:checked + .slds-radio__label .slds-radio_faux::after {
+:host([data-render-mode="shadow"].slds-has-error) .slds-radio [type='radio']:checked + .slds-radio_faux::after,:host([data-render-mode="shadow"].slds-has-error) .slds-radio [type='radio']:checked ~ .slds-radio_faux::after,:host([data-render-mode="shadow"].slds-has-error) .slds-radio [type='radio']:checked + .slds-radio__label .slds-radio_faux::after {
   background: var(--slds-g-color-error-base-40);
 }
 

package/src/lightning/select/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;
     }
 
@@ -242,6 +245,7 @@
 
 @media (width >= 48em) {
         :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
+          float: left;
           max-width: calc(33% - var(--slds-g-sizing-6)); /* Removing icon width for when the help-text icon is present */
           flex-basis: calc(33% - var(--slds-g-sizing-6)); /* Some form element controls are set to display:flex */
           flex-grow: 1; /* For IE and Safari which didn't auto expand to the available space */