lightning-base-components 1.21.6-alpha → 1.21.7-alpha

package/src/lightning/pillContainer/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/pillContainer/pillContainer.js

@@ -208,9 +208,10 @@ export default class LightningPillContainer extends LightningShadowBaseClass {
             : 'slds-listbox_selection-group';
     }
 
+    // W-14952967: Temporarily adding slds-truncate so pills truncate on small form factors.
     get computedListboxClass() {
         const singleLineClass = this.singleLine ? ' slds-listbox_inline' : '';
-        return `slds-listbox slds-is-relative slds-listbox_horizontal${singleLineClass}`;
+        return `slds-listbox slds-is-relative slds-listbox_horizontal slds-truncate${singleLineClass}`;
     }
 
     get focusedIndex() {

package/src/lightning/pillContainer/standardPillContainer.html

@@ -11,7 +11,10 @@
             part="listbox"
         >
             <template for:each={pillViewModels} for:item="pillViewModel" for:index="index">
-                <li key={pillViewModel.pill.item.label} class="slds-listbox-item">
+                <!--
+                W-14952967: Temporarily adding slds-truncate so pills truncate on small form factors.
+                -->
+                <li key={pillViewModel.pill.item.label} class="slds-listbox-item slds-truncate">
                     <lightning-pill label={pillViewModel.pill.item.label}
                                     onclick={handlePillClick}
                                     name={index}
@@ -19,7 +22,8 @@
                                     onremove={handleRemove}
                                     onblur={handlePillBlur}
                                     onfocus={handlePillFocus}
-                                    variant={pillViewModel.pill.variant}>
+                                    variant={pillViewModel.pill.variant}
+                                    class="slds-truncate">
                         <template if:true={pillViewModel.pill.isIcon}>
                             <lightning-icon
                                 class="slds-icon_container"

package/src/lightning/positionLibrary/direction.js

@@ -163,6 +163,9 @@ export function checkFlipPossibility(parent, element, target, leftAsBoundary) {
                 (leftAsBoundary ? referenceElemRect.left : 0);
     }
 
+    const spaceRemainingRight = viewPort.width - referenceElemRect.left;
+    const spaceRemainingLeft = referenceElemRect.right;
+
     if (!shouldAlignToLeft && !shouldAlignToRight && parent) {
         shouldAlignToRight =
             (referenceElemRect.right - viewPort.left >= width ||
@@ -176,6 +179,22 @@ export function checkFlipPossibility(parent, element, target, leftAsBoundary) {
             referenceElemRect.right - width <
                 (leftAsBoundary ? referenceElemRect.left : 0);
     }
+    // W-13716578 W-14991047
+    // Align to side with maximum available space only if:
+    //  - it cannot align to left based on previous checks
+    //  - it cannot align to right based on previous checks
+    //  - the available space on either side does not fully fit element width
+    // Check #3 is for when there is space on both sides, then both shouldAlignToLeft and shouldAlignToRight
+    // are false, but we want it to use the default alignment instead of max available space
+    else if (
+        !shouldAlignToLeft &&
+        !shouldAlignToRight &&
+        spaceRemainingRight < width &&
+        spaceRemainingLeft < width
+    ) {
+        shouldAlignToRight = spaceRemainingLeft > spaceRemainingRight;
+        shouldAlignToLeft = spaceRemainingLeft < spaceRemainingRight;
+    }
 
     // If there is no space above and below, recalculate space based on window
     // when there is still no space above and below based on window then select the maximum available space

package/src/lightning/primitiveBubble/primitiveBubble.js

@@ -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);
         }
     }
 

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`
@@ -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

@@ -245,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

@@ -245,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

@@ -245,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