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

package/src/lightning/primitiveBubble/primitiveBubble.js

@@ -9,14 +9,14 @@ const DEFAULT_ALIGN = {
     vertical: 'bottom',
 };
 
+// Set to px units for easier calculation
+const POPOVER_MIN_HEIGHT = 32;
+
 const DEFAULT_INVISIBLE_DIV_STYLES = {
-    height: '1.5rem',
+    height: '1rem',
     position: 'absolute',
     left: '0',
     marginLeft: '0',
-    // add a little bit of offset to move the <div> closer to the target, that way the mouse
-    // doesn't move into the small white space between the target and <div>, which would close the tooltip
-    top: '-1.1rem',
 };
 
 export default class LightningPrimitiveBubble extends LightningShadowBaseClass {
@@ -52,6 +52,7 @@ export default class LightningPrimitiveBubble extends LightningShadowBaseClass {
     connectedCallback() {
         super.connectedCallback();
         this.setAttribute('role', 'tooltip');
+        this.setAttribute('aria-hidden', true);
         this.state.inDOM = true;
     }
 
@@ -100,12 +101,18 @@ export default class LightningPrimitiveBubble extends LightningShadowBaseClass {
             // Show the tooltip before css animation
             this.state.hidden = false;
         }
+        if (this.state.hidden) {
+            this.setAttribute('aria-hidden', true);
+        } else {
+            this.removeAttribute('aria-hidden');
+        }
     }
 
     handleTransitionEnd() {
         // Hide the tooltip after css animation
         if (!this.state.visible) {
             this.state.hidden = true;
+            this.setAttribute('aria-hidden', true);
         }
     }
 
@@ -127,26 +134,41 @@ export default class LightningPrimitiveBubble extends LightningShadowBaseClass {
                 '.slds-popover__body'
             );
             const invisibleDiv = document.createElement('div');
+            const { vertical } = this.align;
 
             let computedStyle = null;
             if (window && popoverBody) {
                 computedStyle = window.getComputedStyle(popoverBody);
                 invisibleDiv.style.width =
                     computedStyle.getPropertyValue('width');
+
+                /*
+                    Position the <div> based on vertical alignment of tooltip.
+                    When vertically aligned to the bottom (nubbin below tooltip), position the <div> to
+                    the max of the popover min-height or the popover offset height. This is necessary so that
+                    it always positions right below the popover, so that changes to line-height or other
+                    distance related properties do not affect the positioning.
+                */
+                if (vertical === 'bottom') {
+                    invisibleDiv.style.top =
+                        Math.max(POPOVER_MIN_HEIGHT, popoverBody.offsetHeight) +
+                        'px';
+                    invisibleDiv.style.height =
+                        DEFAULT_INVISIBLE_DIV_STYLES.height;
+                } else {
+                    /* add a little bit of offset to move the <div> closer to the target, that way the mouse
+                     doesn't move into the small white space between the target and <div>, which would flicker the tooltip
+                    */
+                    invisibleDiv.style.top = '-1.1rem';
+                    invisibleDiv.style.height = '1.125rem';
+                }
             }
 
-            invisibleDiv.style.height = DEFAULT_INVISIBLE_DIV_STYLES.height;
             invisibleDiv.style.position = DEFAULT_INVISIBLE_DIV_STYLES.position;
             invisibleDiv.style.left = DEFAULT_INVISIBLE_DIV_STYLES.left;
             invisibleDiv.style.marginLeft =
                 DEFAULT_INVISIBLE_DIV_STYLES.marginLeft;
 
-            const { vertical } = this.align;
-
-            // position <div> based on vertical alignment
-            invisibleDiv.style.top =
-                vertical === 'top' ? DEFAULT_INVISIBLE_DIV_STYLES.top : '';
-
             popoverBody.appendChild(invisibleDiv);
         }
     }

package/src/lightning/primitiveColorpickerButton/primitiveColorpickerButton.html

@@ -1,11 +1,11 @@
 <template>
     <button type="button" part="color-picker-button" class="slds-button slds-color-picker__summary-button slds-button_icon slds-button_icon-more" onclick={handleColorPickerToggleClick}
-        disabled={disabled}>
+        disabled={disabled} aria-disabled={ariaDisabled}>
         <span class="slds-swatch" data-id="thumbnail" style={colorInputStyle}>
             <span class="slds-assistive-text">{i18n.a11yTriggerText}</span>
         </span>
         <lightning-primitive-icon icon-name="utility:down" svg-class="slds-button__icon slds-button__icon_small" variant="bare"></lightning-primitive-icon>
-        <span class="slds-assistive-text a11y-color-value">{value}</span>
+        <span class="slds-assistive-text a11y-color-value">{assistiveValue}</span>
     </button>
     <template if:true={_isColorPickerPanelOpen}>
         <lightning-color-picker-panel onupdatecolor={handleUpdateColorEvent} class="color-picker-panel" current-color={value}>

package/src/lightning/primitiveColorpickerButton/primitiveColorpickerButton.js

@@ -1,4 +1,5 @@
 import labelA11yTriggerText from '@salesforce/label/LightningColorPicker.a11yTriggerText';
+import labelA11yDefaultText from '@salesforce/label/LightningColorPicker.a11yDefaultText';
 import { api, track } from 'lwc';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { Direction, AutoPosition } from 'lightning/positionLibrary';
@@ -6,6 +7,7 @@ import { normalizeBoolean, reflectAttribute } from 'lightning/utilsPrivate';
 
 const i18n = {
     a11yTriggerText: labelA11yTriggerText,
+    a11yDefaultText: labelA11yDefaultText,
 };
 export default class PrimitiveColorpickerButton extends LightningShadowBaseClass {
     static delegatesFocus = true;
@@ -13,6 +15,7 @@ export default class PrimitiveColorpickerButton extends LightningShadowBaseClass
     @track _isColorPickerPanelOpen = false;
     @track _value = '';
     @track _disabled = false;
+    @api ariaDisabled;
 
     @api
     get value() {
@@ -23,6 +26,11 @@ export default class PrimitiveColorpickerButton extends LightningShadowBaseClass
         this._value = value;
     }
 
+    @api
+    get assistiveValue() {
+        return this.value ? this.value : this.i18n.a11yDefaultText;
+    }
+
     /**
      * If present, the input field is disabled and users cannot interact with it.
      * @type {boolean}

package/src/lightning/primitiveColumnSorter/primitiveColumnSorter.css

@@ -0,0 +1,34 @@
+@import 'lightning/sldsCommon';
+
+[part="header"] {
+    padding: var(--slds-g-sizing-3) var(--slds-g-sizing-3) var(--slds-g-sizing-3) 0;
+    font-weight: bold;
+}
+
+[part="sorting-config"] {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    gap: var(--slds-g-sizing-4);
+}
+
+.slds-box {
+    padding: var(--slds-g-sizing-4);
+    display: flex; align-items: center; justify-content: space-between;
+}
+
+lightning-combobox {
+    width: 40%;
+}
+
+.slds-has-error {
+    margin-top: 1.25rem;
+}
+
+[part="sorting-config"]:has(lightning-combobox[invalid]) {
+    margin-top: -1rem;
+}
+
+[part="sorting-config"]:has(lightning-combobox[invalid]) + lightning-button-icon {
+    margin-top: -1rem;
+}

package/src/lightning/primitiveColumnSorter/primitiveColumnSorter.html

@@ -0,0 +1,60 @@
+<template>
+    <div part="header">
+        <template if:true={rule.disabledTrash}>
+            <abbr class="slds-required">*</abbr>
+        </template>
+        {rule.heading}
+    </div>
+    <div class="slds-box">
+        <div part="sorting-config">
+            <lightning-button-group>
+                <lightning-button-icon tooltip={i18n.moveUpTooltip} icon-name="utility:arrowup" onclick={handleMoveUp} disabled={isUpDisabled} variant="border-filled" alternative-text="Arrow Up"></lightning-button-icon>
+                <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
+                name="column select"
+                disabled={rule.disableInputs}
+                placeholder={i18n.dropdownPlaceholder}
+                options={columns}
+                value={rule.selectedColumn}
+                onchange={handleColumnSelect}
+                variant="label-hidden"
+                label={i18n.dropdownPlaceholder}
+                required
+                message-when-value-missing={i18n.missingValueValidation}>
+            </lightning-combobox>
+            <fieldset role="radiogroup" part="input-radio-group">
+                <legend part="legend" class="slds-form-element__legend slds-form-element__label slds-assistive-text">
+                    Sorting Order
+                </legend>
+                <span class="slds-radio">
+                    <input type="radio"
+                    id="asc"
+                    disabled={rule.disableInputs}
+                    name={groupName}
+                    value="asc"
+                    checked={isAscendingChecked}
+                    onchange={handleOrderChange}/>
+                    <label class="slds-radio__label" for="asc">
+                        <span class="slds-radio_faux"></span>
+                        <span class="slds-form-element__label">{i18n.ascending}</span>
+                    </label>
+                </span>
+                <span class="slds-radio">
+                    <input type="radio"
+                    id="desc"
+                    disabled={rule.disableInputs}
+                    name={groupName}
+                    value="desc"
+                    checked={isDescendingChecked}
+                    onchange={handleOrderChange}/>
+                    <label class="slds-radio__label" for="desc">
+                        <span class="slds-radio_faux"></span>
+                        <span class="slds-form-element__label">{i18n.descending}</span>
+                    </label>
+                </span>
+            </fieldset>
+        </div>
+        <lightning-button-icon icon-name="utility:delete" variant="bare" disabled={rule.disabledTrash} onclick={handleDelete} alternative-text="Settings"></lightning-button-icon>
+    </div>
+</template>

package/src/lightning/primitiveColumnSorter/primitiveColumnSorter.js

@@ -0,0 +1,107 @@
+import { LightningElement, api } from 'lwc';
+import moveUpTooltip from '@salesforce/label/LightningPrimitiveColumnSorter.moveUpTooltip';
+import moveDownTooltip from '@salesforce/label/LightningPrimitiveColumnSorter.moveDownTooltip';
+import dropdownPlaceholder from '@salesforce/label/LightningPrimitiveColumnSorter.dropdownPlaceholder';
+import ascending from '@salesforce/label/LightningPrimitiveColumnSorter.ascending';
+import descending from '@salesforce/label/LightningPrimitiveColumnSorter.descending';
+import missingValueValidation from '@salesforce/label/LightningPrimitiveColumnSorter.missingValueValidation';
+
+const i18n = {
+    moveUpTooltip,
+    moveDownTooltip,
+    dropdownPlaceholder,
+    ascending,
+    descending,
+    missingValueValidation,
+};
+
+export default class PrimitiveColumnSorter extends LightningElement {
+    @api firstRule;
+    @api lastRule;
+    @api rule;
+    @api columns;
+    @api index;
+    _combobox;
+
+    @api
+    get combobox() {
+        if (!this._combobox) {
+            this._combobox = this.template.querySelector('lightning-combobox');
+        }
+        return this._combobox;
+    }
+
+    get i18n() {
+        return i18n;
+    }
+
+    // used to group radio buttons independent from each other
+    get groupName() {
+        return `radioGroup_${this.index}`;
+    }
+
+    /**
+     * Used to maintain radio group selection even when rules are moved up/down
+     */
+    get isAscendingChecked() {
+        return this.rule.sortOrder === 'asc';
+    }
+
+    /**
+     * Used to maintain radio group selection even when rules are moved up/down
+     */
+    get isDescendingChecked() {
+        return this.rule.sortOrder === 'desc';
+    }
+
+    get isUpDisabled() {
+        return this.rule.unselectedInitialRules || this.firstRule;
+    }
+    get isDownDisabled() {
+        return this.rule.unselectedInitialRules || this.lastRule;
+    }
+
+    /**
+     * dispatches a 'selection' event used to set the `selectedColumn` when the sorting column is selected
+     * in turn, keeps the `multi-column-sorting-modal`'s this.rules property up to date.
+     */
+    handleColumnSelect(event) {
+        this.dispatchEvent(
+            new CustomEvent('selection', {
+                detail: {
+                    index: this.index,
+                    selectedColumn: event.detail.value,
+                    sortOrder: this.rule.sortOrder,
+                },
+            })
+        );
+    }
+
+    /**
+     * dispatches a 'selection' event used to set the `sortOrder` when the sorting direction is selected
+     * in turn, keeps the `multi-column-sorting-modal`'s this.rules property up to date.
+     */
+    handleOrderChange(event) {
+        this.dispatchEvent(
+            new CustomEvent('selection', {
+                detail: {
+                    index: this.index,
+                    selectedColumn: this.rule.selectedColumn,
+                    sortOrder: event.target.value,
+                },
+            })
+        );
+    }
+
+    handleDelete() {
+        this.dispatchEvent(new CustomEvent('delete'));
+    }
+
+    handleMoveUp() {
+        this.dispatchEvent(new CustomEvent('moveup'));
+    }
+
+    handleMoveDown() {
+        this.dispatchEvent(new CustomEvent('movedown'));
+    }
+}

package/src/lightning/primitiveHeaderFactory/primitiveHeaderFactory.js

@@ -5,6 +5,10 @@ import labelSort from '@salesforce/label/LightningDatatable.sort';
 import labelSortAsc from '@salesforce/label/LightningDatatable.sortAsc';
 import labelSortDesc from '@salesforce/label/LightningDatatable.sortDesc';
 import labelSortNone from '@salesforce/label/LightningDatatable.sortNone';
+import sortingMenuMultiColumnSort from '@salesforce/label/LightningDatatable.sortingMenuMultiColumnSort';
+import sortingMenuRows from '@salesforce/label/LightningDatatable.sortingMenuRows';
+import sortingMenuColumns from '@salesforce/label/LightningDatatable.sortingMenuColumns';
+import sortingMenuTooltip from '@salesforce/label/LightningDatatable.sortingMenuTooltip';
 import PrimitiveDatatableCell from 'lightning/primitiveDatatableCell';
 import { api, track } from 'lwc';
 import {
@@ -16,8 +20,10 @@ import {
 import selectable from './selectableHeader.html';
 import sortable from './sortableHeader.html';
 import nonsortable from './nonsortableHeader.html';
+import sortingMenu from './sortingMenuHeader.html';
 
 const SELECTABLE_HEADER_TYPE = 'SELECTABLE_CHECKBOX';
+const SORTING_MENU_HEADER_TYPE = 'SELECTABLE_BUTTON_MENU';
 
 const i18n = {
     chooseARow: labelChooseARow,
@@ -27,6 +33,10 @@ const i18n = {
     sortAsc: labelSortAsc,
     sortDesc: labelSortDesc,
     sortNone: labelSortNone,
+    sortingMenuMultiColumnSort,
+    sortingMenuRows,
+    sortingMenuColumns,
+    sortingMenuTooltip,
 };
 
 /**
@@ -52,6 +62,7 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
     @api showCheckbox = false;
     @api sorted;
     @api sortedDirection;
+    @api showActionsMenu;
 
     /**
      * Retrieves the computed header DOM `id`
@@ -220,7 +231,7 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
             ? 'slds-line-clamp_small '
             : 'slds-truncate';
     }
-    
+
     /**
      * Get th Action styles (needed for wrapping headers)
      *
@@ -283,12 +294,15 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
     }
 
     /**
-     * Determines if the header is regular (unselectable)
+     * Determines if the header is regular (unselectable and not sorting menu)
      *
      * @return {boolean} Whether the header is regular
      */
     get isRegularHeader() {
-        return this._def.type !== SELECTABLE_HEADER_TYPE;
+        return (
+            this._def.type !== SELECTABLE_HEADER_TYPE &&
+            this._def.type !== SORTING_MENU_HEADER_TYPE
+        );
     }
 
     /**
@@ -340,8 +354,14 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
      * By default, nonsortableHeader.html is rendered
      */
     render() {
-        if (this._def.type === SELECTABLE_HEADER_TYPE) {
+        const { type } = this._def;
+        if (type === SELECTABLE_HEADER_TYPE) {
             return selectable;
+        } else if (
+            type === SORTING_MENU_HEADER_TYPE ||
+            (type === 'action' && this._def.isLastCol && this.showActionsMenu)
+        ) {
+            return sortingMenu;
         } else if (this._sortable) {
             return sortable;
         }
@@ -429,6 +449,19 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
         this.dispatchEvent(event);
     }
 
+    handleSortingMenuSelection(event) {
+        event.stopPropagation();
+        const selectedItemValue = event.detail.value;
+        if (selectedItemValue === 'MultiColumnSorting') {
+            // open modal
+            const e = new CustomEvent('privateopensortingmodal', {
+                bubbles: true,
+                composed: true,
+            });
+            this.dispatchEvent(e);
+        }
+    }
+
     /************************* HELPER FUNCTIONS **************************/
 
     /**

package/src/lightning/primitiveHeaderFactory/sortingMenuHeader.css

@@ -0,0 +1,5 @@
+@import 'lightning/sldsCommon';
+
+.slds-th__action {
+    justify-content: center;
+}

package/src/lightning/primitiveHeaderFactory/sortingMenuHeader.html

@@ -0,0 +1,9 @@
+<template>
+    <div 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>
+            <lightning-menu-item value="ReorderColumn" label={i18n.sortingMenuColumns}></lightning-menu-item>
+        </lightning-button-menu>
+    </div>
+</template>

package/src/lightning/primitiveInputCheckbox/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/primitiveInputCheckbox/input-checkbox.slds.css

@@ -273,12 +273,12 @@
 :host([data-render-mode="shadow"][disabled]) [part='indicator'] {
     --_slds-c-inputcheckbox-color-background: var(
       --_slds-c-inputcheckbox-color-background-disabled,
-      var(--slds-g-color-surface-container-2)
+      var(--slds-g-color-disabled-container-2)
     );
-    --_slds-c-inputcheckbox-color-border: var(--_slds-c-inputcheckbox-color-border-disabled);
+    --_slds-c-inputcheckbox-color-border: var(--_slds-c-inputcheckbox-color-border-disabled, var(--slds-g-color-border-disabled-1));
     --_slds-c-inputcheckbox-mark-color-foreground: var(
       --_slds-c-inputcheckbox-mark-color-foreground-disabled,
-      var(--slds-g-color-on-disabled-1)
+      var(--slds-g-color-on-disabled-2)
     );
   }
 /**

package/src/lightning/primitiveInputCheckbox/primitiveInputCheckbox.html

@@ -46,6 +46,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/primitiveInputCheckboxButton/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/primitiveInputCheckboxButton/input-checkbox-button.slds.css

@@ -46,12 +46,14 @@
 
   :host([data-render-mode="shadow"][disabled]) [part="faux-button"] {
     cursor: default;
-    --slds-c-inputcheckboxbutton-color-border: transparent;
+    --slds-c-inputcheckboxbutton-color-border: var(--slds-g-color-border-disabled-1);
     --slds-c-inputcheckboxbutton-color-background: var(--slds-g-color-disabled-container-1);
     --slds-c-inputcheckboxbutton-mark-color-foreground: var(--slds-g-color-on-disabled-1);
-    --slds-c-inputcheckboxbutton-color-border-checked: transparent;
-    --slds-c-inputcheckboxbutton-color-background-checked: var(--slds-g-color-disabled-container-1);
-    --slds-c-inputcheckboxbutton-mark-color-foreground-checked: var(--slds-g-color-on-disabled-1);
+
+    /* Disabled checked */
+    --slds-c-inputcheckboxbutton-color-border-checked: var(--slds-g-color-border-disabled-1);
+    --slds-c-inputcheckboxbutton-color-background-checked: var(--slds-g-color-disabled-container-2);
+    --slds-c-inputcheckboxbutton-mark-color-foreground-checked: var(--slds-g-color-on-disabled-2);
 
   }
 
@@ -61,7 +63,6 @@
     --slds-c-inputcheckboxbutton-color-border: var(--slds-c-inputcheckboxbutton-color-border-checked, transparent);
     --slds-c-inputcheckboxbutton-color-background: var(--slds-c-inputcheckboxbutton-color-background-checked, var(--slds-g-color-accent-container-2));
     --slds-c-inputcheckboxbutton-mark-color-foreground: var(--slds-c-inputcheckboxbutton-mark-color-foreground-checked, var(--slds-g-color-on-accent-1));
-
   }
 
   :host([data-render-mode="shadow"][checked]) [part="faux-button"]::before {

package/src/lightning/primitiveInputCheckboxButton/primitiveInputCheckboxButton.html

@@ -22,6 +22,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/primitiveInputColor/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/primitiveInputColor/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/primitiveInputColor/primitiveInputColor.html

@@ -16,7 +16,8 @@
                     disabled={disabled}
                     onblur={handleBlur}
                     onfocus={handleFocus}
-                    onchange={handleColorChange}>
+                    onchange={handleColorChange}
+                    aria-disabled={ariaDisabled}>
                 </lightning-primitive-colorpicker-button>
                 <!--
                     Using <lightning-input type="text"> here would duplicate the label
@@ -31,6 +32,8 @@
                         accesskey={accessKey}
                         aria-label={ariaLabel}
                         aria-invalid={ariaInvalid}
+                        aria-keyshortcuts={ariaKeyShortcuts}
+                        aria-disabled={ariaDisabled}
                         disabled={disabled}
                         minlength="4"
                         maxlength="7"
@@ -45,6 +48,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/primitiveInputColor/primitiveInputColor.js

@@ -17,6 +17,8 @@ export default class LightningPrimitiveInputColor extends LightningShadowBaseCla
     @api autocomplete;
     @api ariaLabel;
     @api ariaInvalid;
+    @api ariaDisabled;
+    @api ariaKeyShortcuts;
     @api placeholder;
     @api pattern;
     @api variant;