lightning-base-components 1.21.6-alpha → 1.21.8-alpha

package/src/lightning/datatable/utils.js

@@ -24,6 +24,7 @@ const CLASS_SET_PROTOTYPE = {
 
 const NON_NEGATIVE_INTEGER_REGEXP = /^\d+$/;
 const POSITIVE_INTEGER_REGEXP = /^[0-9]*[1-9][0-9]*$/;
+const RENDER_MODE_INLINE_REGEXP = /\binline\b/;
 const RENDER_MODE_ROLE_BASED_REGEXP = /\brole-based\b/;
 
 /**
@@ -87,6 +88,9 @@ export function getRowDataSelector(rowKeyValue) {
  * @returns {Node} The grid container element
  */
 export function getGridContainerFromScrollerY(scrollerY) {
+    if (!scrollerY) {
+        return null;
+    }
     const { firstElementChild: gridContainer } = scrollerY;
     return gridContainer;
 }
@@ -131,6 +135,16 @@ export function isNonNegativeInteger(value) {
     return NON_NEGATIVE_INTEGER_REGEXP.test(value);
 }
 
+/**
+ * Tests if render mode is inline.
+ *
+ * @param {String} renderMode The render mode to test
+ * @returns {Boolean} Whether the render mode is inline
+ */
+export function isRenderModeInline(renderMode) {
+    return RENDER_MODE_INLINE_REGEXP.test(renderMode);
+}
+
 /**
  * Tests if render mode is role-based.
  *
@@ -196,3 +210,28 @@ export function getScrollOffsetFromTableEnd(el) {
         el.scrollHeight - el.parentNode.scrollTop - el.parentNode.clientHeight
     );
 }
+
+/**
+ * Utility to check if new data just added
+ * extra rows to old data by comparing hashes
+ *
+ * @param {Array} prevData - previous datatable data
+ * @param {Array} newData - current datatable data
+ * @returns {Boolean} true if new data is extension of old data
+ */
+export function isLoadMore(prevData, newData) {
+    const prevLength = prevData.length;
+    const slicedNewData = newData.slice(0, prevLength);
+    return hashArray(prevData) === hashArray(slicedNewData);
+}
+
+function hashArray(value) {
+    const str = JSON.stringify(value);
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        const code = str.charCodeAt(i);
+        hash = (hash << 5) - hash + code;
+        hash = hash & hash; // Convert to 32bit integer
+    }
+    return hash;
+}

package/src/lightning/datatable/virtualization.js

@@ -1,12 +1,13 @@
-import { escapeDoubleQuotes } from './utils';
-
 /**
- * sets an initial table height in the datatable state
+ * increases table height to accommodate new data
+ * used with infinite loading
  *
- * @param {Object} state - datatable state
+ * @param {Array} prevData - previous datatable data
+ * @param {Array} newData - current datatable data
  */
-export function resetTableHeight(state) {
-    state.tableHeight = state.rowHeight * state.rows.length;
+export function addTableHeight(state, prevData, newData) {
+    const extraRowCount = newData.length - prevData.length;
+    state.tableHeight += extraRowCount * state.rowHeight;
 }
 
 /**
@@ -16,11 +17,27 @@ export function resetTableHeight(state) {
  * @param {Object} state - datatable state
  */
 export function resetRowHeights(state) {
+    const { firstVisibleIndex } = state;
+    const firstRenderedIndex = Math.max(
+        firstVisibleIndex - state.bufferSize,
+        0
+    );
+    const newOffsets = [0];
+    const firstRenderedOffset = state.offsets[firstRenderedIndex];
+    newOffsets[firstRenderedIndex] = firstRenderedOffset;
     state.heightCache = {};
-    state.offsets = [0];
-    state.offsetRanges = [];
+    state.offsets = newOffsets;
+    state.offsetRanges = [{ start: 0, end: 0 }];
+    if (firstRenderedIndex > 0) {
+        state.offsetRanges.push({
+            start: firstRenderedIndex,
+            end: firstRenderedIndex,
+        });
+    }
     if (state.virtualize && state.rows.length) {
-        resetTableHeight(state);
+        const remainingRows = state.rows.length - firstRenderedIndex;
+        const remainingRowsHeight = state.rowHeight * remainingRows;
+        state.tableHeight = firstRenderedOffset + remainingRowsHeight;
     }
 }
 
@@ -44,12 +61,13 @@ export function handleVariableRowHeights(template, state, renderedRows) {
         currentRange.start
     );
 
-    renderedRows.forEach((row) => {
-        if (!state.heightCache[row.key]) {
-            // need to get row actual element so we can find its height
-            const rowElement = template.querySelector(
-                `[data-row-key-value="${escapeDoubleQuotes(row.key)}"]`
-            );
+    const rowElements = template.querySelectorAll(
+        '[data-rowgroup-body] [role="row"]'
+    );
+    for (let i = 0; i < renderedRows.length; i++) {
+        const row = renderedRows[i];
+        if (!state.heightCache[row.key] && state.heightCache[row.key] !== 0) {
+            const rowElement = rowElements[i];
             if (rowElement) {
                 // first rendered row needs height increased by 1 to account for missing border
                 let height = rowElement.getBoundingClientRect().height;
@@ -66,7 +84,7 @@ export function handleVariableRowHeights(template, state, renderedRows) {
                 adjustFromIndex = row.rowIndex + 2;
             }
         }
-    });
+    }
     state.tableHeight += adjustmentValue;
     updateOffsetRanges(
         state,
@@ -86,7 +104,7 @@ export function handleVariableRowHeights(template, state, renderedRows) {
 export function findFirstVisibleIndex(state, scrollTop) {
     const { offsetRanges, offsets, rowHeight, fixedHeight, virtualize } = state;
     if (virtualize && fixedHeight) {
-        return scrollTop / rowHeight;
+        return Math.floor(scrollTop / rowHeight);
     }
     let start = 0;
     let end = offsetRanges.length - 1;
@@ -310,7 +328,14 @@ function updateVirtualizeStyles(template, state, renderedRows) {
         state.offsets[state.firstVisibleIndex] + state.firstRowOffset;
 
     // update top of rendered rows based on offsets
-    renderedRows.forEach((row) => {
-        row.style = `position:absolute;top:${state.offsets[row.rowIndex]}px;`;
+    // all but first rendered row will need to subtract
+    // 1 from offset to account for missing top border
+    // on first rendered row
+    renderedRows.forEach((row, index) => {
+        let top = state.offsets[row.rowIndex] - 1;
+        if (!index) {
+            top = top + 1; // reset first rendered row to offset in state
+        }
+        row.style = `position:absolute;top:${top}px;`;
     });
 }

package/src/lightning/datatable/wrapText.js

@@ -2,6 +2,7 @@ import labelClipText from '@salesforce/label/LightningDatatable.clipText';
 import labelWrapText from '@salesforce/label/LightningDatatable.wrapText';
 import { normalizeBoolean } from 'lightning/utilsPrivate';
 import { getStateColumnIndex } from './columns';
+import { updateCell } from './rows';
 import { normalizeNumberAttribute } from './utils';
 import { getDefaultState } from './state';
 
@@ -50,6 +51,7 @@ export function setWrapTextMaxLines(state, value) {
         'positive',
         undefined
     );
+    state.shouldResetHeights = true;
 }
 
 /**
@@ -60,15 +62,10 @@ export function setWrapTextMaxLines(state, value) {
  * @param {Number} colIndex The column index to update
  * @param {String} colKeyValue The column key value to look up wrap text configuration
  */
-function updateWrapTextAndMaxLinesValuesInCells(state, colIndex, colKeyValue) {
+function updateWrapTextAndMaxLinesValuesInCells(state, colIndex) {
     const { rows } = state;
-    for (let i = 0, { length } = rows; i < length; i += 1) {
-        const row = rows[i];
-        const cell = row.cells[colIndex];
-        cell.wrapText = state.wrapText[colKeyValue];
-        cell.wrapTextMaxLines = cell.wrapText
-            ? state.wrapTextMaxLines
-            : undefined;
+    for (let i = 0; i < rows.length; i += 1) {
+        updateCell(state, i, colIndex);
     }
 }
 
@@ -149,7 +146,7 @@ function updateSelectedOptionInHeaderActions(state, colKeyValue) {
     const col = columns[colIndex];
     const { internalActions } = col.actions;
 
-    for (let i = 0, { length } = internalActions; i < length; i += 1) {
+    for (let i = 0; i < internalActions.length; i += 1) {
         const action = internalActions[i];
         const { name } = action;
         if (name === 'wrapText') {
@@ -159,7 +156,7 @@ function updateSelectedOptionInHeaderActions(state, colKeyValue) {
         }
     }
 
-    updateWrapTextAndMaxLinesValuesInCells(state, colIndex, colKeyValue);
+    updateWrapTextAndMaxLinesValuesInCells(state, colIndex);
 
     // Force a refresh on this column, because the wrapText checked value changed.
     col.actions = Object.assign({}, col.actions);

package/src/lightning/datepicker/datepicker.html

@@ -17,9 +17,11 @@
             part="input"
                     name={name}
                     value={displayValue}
+                    accesskey={accessKey}
                     placeholder={placeholder}
                     aria-invalid={computedAriaInvalid}
                     aria-label={ariaLabel}
+                    aria-disabled={ariaDisabled}
                     required={required}
                     readonly={readOnly}
                     disabled={disabled}
@@ -57,7 +59,7 @@
     </div>
 
     <template if:true={errorMessage}>
-        <div id="error-message" data-error-message class={computedClass}>{errorMessage}</div>
+        <div id="error-message" data-error-message class={computedClass} aria-live="polite">{errorMessage}</div>
     </template>
 
 

package/src/lightning/datepicker/datepicker.js

@@ -55,7 +55,9 @@ const i18n = {
 };
 
 const ARIA_CONTROLS = 'aria-controls';
+const ARIA_DETAILS = 'aria-details';
 const ARIA_LABEL = 'aria-label';
+const ARIA_DISABLED = 'aria-disabled';
 const ARIA_LABELLEDBY = 'aria-labelledby';
 const ARIA_DESCRIBEDBY = 'aria-describedby';
 const ARIA_INVALID = 'aria-invalid';
@@ -75,6 +77,7 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
     @track _errorMessage = '';
     @track _fieldLevelHelp;
     @track _variant;
+    @api accessKey;
 
     _min;
     _max;
@@ -209,8 +212,19 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
         this.synchronizeA11y();
     }
 
+    @api
+    get ariaDisabled() {
+        return this._ariaDisabled;
+    }
+
+    set ariaDisabled(val) {
+        this._ariaDisabled = val;
+        this.synchronizeA11y();
+    }
+
     _ariaLabelledBy;
     _ariaControls;
+    _ariaDetails;
     _ariaDescribedBy = [];
 
     set ariaLabelledByElement(el) {
@@ -245,6 +259,22 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
         return this._ariaControls;
     }
 
+    set ariaDetailsElements(el) {
+        this._ariaDetails = el;
+        if (this.ariaObserver) {
+            this.ariaObserver.connect({
+                attribute: ARIA_DETAILS,
+                targetSelector: 'input',
+                relatedNodeIds: getRealDOMId(this.ariaDetailsElements),
+            });
+        }
+    }
+
+    @api
+    get ariaDetailsElements() {
+        return this._ariaDetails;
+    }
+
     set ariaDescribedByElements(el) {
         if (Array.isArray(el)) {
             this._ariaDescribedBy = el;
@@ -280,6 +310,7 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
 
         synchronizeAttrs(input, {
             [ARIA_LABEL]: this._ariaLabel,
+            [ARIA_DISABLED]: this._ariaDisabled,
             [ARIA_INVALID]: this.computedAriaInvalid,
         });
 
@@ -502,7 +533,6 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
 
     get computedAriaDescribedby() {
         const ariaValues = [];
-
         this._ariaDescribedBy.forEach((item) => {
             const id = getRealDOMId(item);
             if (id) {

package/src/lightning/datepicker/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/datepicker/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/datetimepicker/datetimepicker.html

@@ -14,6 +14,7 @@
                             data-aria-invalid={computedDateAriaInvalid}
                             class="slds-form-element"
                             autocomplete={autocomplete}
+                            accesskey={dateAccessKey}
                             min={dateMin}
                             max={dateMax}
                             label={i18n.date}
@@ -27,6 +28,8 @@
                             onblur={handleDatepickerBlur}
                             onchange={handleDateChange}
                             aria-error-message-element={errorMessageElement}
+                            aria-disabled={ariaDisabled}
+                            variant={childVariant}
                             root-aria-node={rootAriaNode}
                         >
                         </lightning-datepicker>
@@ -35,6 +38,7 @@
                             data-aria-invalid={computedTimeAriaInvalid}
                             class="slds-form-element"
                             autocomplete={autocomplete}
+                            accesskey={timeAccessKey}
                             label={i18n.time}
                             name={name}
                             time-style={timeStyle}
@@ -46,13 +50,15 @@
                             onblur={handleTimepickerBlur}
                             onchange={handleTimeChange}
                             aria-error-message-element={errorMessageElement}
+                            aria-disabled={ariaDisabled}
+                            variant={childVariant}
                             root-aria-node={rootAriaNode}
                         >
                         </lightning-timepicker>
                     </div>
                 </div>
             </div>
-            <div data-error-message id="errormessage" class={computedClass}>{customErrorMessage}</div>
+            <div data-error-message id="errormessage" class={computedClass} aria-live="polite">{customErrorMessage}</div>
 
         </fieldset>
     </div>

package/src/lightning/datetimepicker/datetimepicker.js

@@ -61,6 +61,8 @@ export default class LightningDateTimePicker extends LightningShadowBaseClass {
 
     @api timeAriaLabel;
 
+    @api ariaDisabled;
+
     @api rootAriaNode;
 
     /**
@@ -82,6 +84,17 @@ export default class LightningDateTimePicker extends LightningShadowBaseClass {
         return this._timeAriaControls;
     }
 
+    // getters and setters necessary to trigger sync
+    set timeAriaDetails(val) {
+        this._timeAriaDetails = val;
+        this.synchronizeA11y();
+    }
+
+    @api
+    get timeAriaDetails() {
+        return this._timeAriaDetails;
+    }
+
     set timeAriaLabelledBy(val) {
         this._timeAriaLabelledBy = val;
         this.synchronizeA11y();
@@ -103,9 +116,12 @@ export default class LightningDateTimePicker extends LightningShadowBaseClass {
     }
 
     @api dateAriaControls;
+    @api dateAriaDetails;
     @api dateAriaLabel;
     @api dateAriaLabelledBy;
     @api dateAriaDescribedBy;
+    @api dateAccessKey;
+    @api timeAccessKey;
 
     @api messageWhenValueMissing;
 
@@ -246,6 +262,16 @@ export default class LightningDateTimePicker extends LightningShadowBaseClass {
         reflectAttribute(this, 'variant', this._variant);
     }
 
+    /**
+     * The child date and time picker components should have the standard variant, unless variant is label-hidden
+     * See W-15101132
+     */
+    get childVariant() {
+        return this._variant === VARIANT.LABEL_HIDDEN
+            ? this._variant
+            : VARIANT.STANDARD;
+    }
+
     /**
      * Sets focus on the date input element.
      */
@@ -273,7 +299,7 @@ export default class LightningDateTimePicker extends LightningShadowBaseClass {
     }
 
     get hasBadDateInput() {
-        return this.getDatepicker().hasBadInput();
+        return this.getDatepicker()?.hasBadInput();
     }
 
     get hasMissingDateTimeInput() {
@@ -281,7 +307,7 @@ export default class LightningDateTimePicker extends LightningShadowBaseClass {
     }
 
     get hasBadTimeInput() {
-        const timeBadInput = this.getTimepicker().hasBadInput();
+        const timeBadInput = this.getTimepicker()?.hasBadInput();
         const timeMissing =
             this.required && this._dateValue && !this._timeValue;
         return timeMissing || timeBadInput;
@@ -406,6 +432,7 @@ export default class LightningDateTimePicker extends LightningShadowBaseClass {
                 ariaLabelledByElement: this.dateAriaLabelledBy,
                 ariaDescribedByElements: this.dateAriaDescribedBy,
                 ariaControlsElement: this.dateAriaControls,
+                ariaDetailsElements: this.dateAriaDetails,
                 'aria-label': this.dateAriaLabel,
             });
         }
@@ -415,6 +442,7 @@ export default class LightningDateTimePicker extends LightningShadowBaseClass {
                 ariaLabelledByElement: this.timeAriaLabelledBy,
                 ariaDescribedByElements: this.timeAriaDescribedBy,
                 ariaControlsElement: this.timeAriaControls,
+                ariaDetailsElements: this.timeAriaDetails,
                 'aria-label': this.timeAriaLabel,
             });
         }

package/src/lightning/datetimepicker/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/datetimepicker/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/dualListbox/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/focusTrap/focusTrap.css

@@ -0,0 +1,7 @@
+/* When inserted at the bottom of the page it will scroll the parent on focus */
+div[data-start],
+div[data-end] {
+    position: fixed;
+    top: 1rem;
+    left: 1rem;
+}

package/src/lightning/groupedCombobox/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/groupedCombobox/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