lightning-base-components 1.18.8-ssr → 1.19.2-alpha

package/src/lightning/combobox/combobox.html

@@ -26,7 +26,8 @@
                 onfocus={handleFocus}
                 onblur={handleBlur}
                 onready={handleComboboxReady}
-                onselect={handleSelect}></lightning-base-combobox>
+                onselect={handleSelect}
+                variant={variant}></lightning-base-combobox>
         </div>
         <template if:true={_helpMessage}>
             <div id="help-text" data-help-text class="slds-form-element__help" aria-live="assertive">{_helpMessage}</div>

package/src/lightning/combobox/combobox.js

@@ -1,8 +1,7 @@
 import labelRequired from '@salesforce/label/LightningControl.required';
 import labelPlaceholder from '@salesforce/label/LightningCombobox.placeholder';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
     classListMutation,
@@ -30,7 +29,7 @@ const i18n = {
  * A widget that provides an input field that is readonly,
  * accompanied by a dropdown list of selectable options.
  */
-export default class LightningCombobox extends LightningShadowBaseClass {
+export default class LightningCombobox extends LightningElement {
     static delegatesFocus = true;
     static validationOptOut = ['class'];
 
@@ -96,7 +95,6 @@ export default class LightningCombobox extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.classList.add('slds-form-element');
         this.updateClassList();
         this.interactingState = new InteractingState();

package/src/lightning/combobox/form-element.slds.css

@@ -133,42 +133,42 @@
 
     /* FORM ELEMENT: STACKED */
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) {
+    :host([data-render-mode="shadow"][variant='label-stacked']) {
         display: block;
     }
 
     /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
 
-    /* :host([variant~='label-stacked']):not(.slds-form-element_readonly) {
+    /* :host([variant='label-stacked']):not(.slds-form-element_readonly) {
         margin-block-end: var(--sds-g-spacing-2);
     }
 
-    :host([variant~='label-stacked']):not(.slds-is-editing) {
+    :host([variant='label-stacked']):not(.slds-is-editing) {
         padding: 0 var(--sds-g-spacing-1);
     } */
 
-    /* :host([variant~='label-stacked']):not([class*="slds-size"]) {
+    /* :host([variant='label-stacked']):not([class*="slds-size"]) {
           width: 100%;
           flex-basis: 100%;
     } */
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element {
         padding: 0;
         margin-block-end: 0;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
+    :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 */
         padding-inline-start: 0;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
         width: 100%;
         flex-basis: 100%;
         clear: left;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__icon {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__icon {
         float: none;
         padding-block-start: var(--sds-g-spacing-1, 0.25rem);
     }
@@ -177,7 +177,7 @@
 
     /* FORM ELEMENT: INLINE */
 
-    :host([data-render-mode="shadow"][variant~='label-inline']) {
+    :host([data-render-mode="shadow"][variant='label-inline']) {
         display: block;
     }
 
@@ -187,32 +187,32 @@
     in lighting-input this slds class is synonymous with the variant
     */
 
-    :host([data-render-mode="shadow"][variant~='label-inline'].slds-form-element_horizontal) {
+    :host([data-render-mode="shadow"][variant='label-inline'].slds-form-element_horizontal) {
         padding: var(--sds-g-spacing-1, 0.25rem);
         margin-block-end: var(--sds-g-spacing-2, 0.5rem);
     }
 
     /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
 
-    /* :host([variant~='label-inline']):not(.slds-form-element_readonly) {
+    /* :host([variant='label-inline']):not(.slds-form-element_readonly) {
         margin-block-end: var(--sds-g-spacing-2);
     }
 
-    :host([variant~='label-inline']):not([class*="slds-size"]) {
+    :host([variant='label-inline']):not([class*="slds-size"]) {
         width: 100%;
         flex-basis: 100%;
     }
 
-    :host([variant~='label-inline']:not(.slds-is-editing)) {
+    :host([variant='label-inline']:not(.slds-is-editing)) {
         padding: var(--sds-g-spacing-1);
     } */
 
-    :host([data-render-mode="shadow"][variant~='label-inline']).slds-is-edited {
+    :host([data-render-mode="shadow"][variant='label-inline']).slds-is-edited {
         padding-block-start: var(--sds-g-sizing-6, 1.25rem)
     }
 
-    @media (min-width: 48em) {
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__label {
+    @media (width >= 48em) {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
           float: left;
           max-width: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Removing icon width for when the help-text icon is present */
           flex-basis: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Some form element controls are set to display:flex */
@@ -222,23 +222,22 @@
           z-index: 1;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) lightning-helptext {
+        :host([data-render-mode="shadow"][variant='label-inline']) lightning-helptext {
           float: left;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__control {
           margin-inline-start: 33%;
           clear: none; /* Reset clear: left when switching to horizontal form layout */
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control .slds-form-element__control {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__control .slds-form-element__control {
           padding-inline-start: 0; /* Remove left padding on nested form controls, due to issues related to lightning-form components */
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list__column .slds-form-element__label {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-dueling-list__column .slds-form-element__label {
             width: auto;
             max-width: 100%;
-            -ms-flex-preferred-size: auto;
             flex-basis: auto;
             float: none;
             position: relative;
@@ -246,11 +245,11 @@
             margin-block-end: 0;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__help {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__help {
           margin-inline-start: 33%;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-dueling-list {
             clear: none;
         }
     }
@@ -283,7 +282,7 @@
 
     /* FORM ELEMENT: HIDDEN */
 
-    :host([data-render-mode="shadow"][variant~='label-hidden']) .slds-form-element__label {
+    :host([data-render-mode="shadow"][variant='label-hidden']) .slds-form-element__label {
       display: none
   }
 }

package/src/lightning/confirm/__docs__/confirm.md

@@ -53,7 +53,7 @@ This component uses the Salesforce Lightning Design System (SLDS) [`prompt` blue
     -   `error`: red
     -   `offline`: ​black​
 
-If an invalid value is provided, `LightningConfirm` uses the `default` theme.
+If an invalid value is provided, `LightningConfirm` uses the `default` theme. `LightningConfirm` ignores the `style` attribute.
 
 #### Testing Your Component's Confirm
 

package/src/lightning/datatable/__docs__/datatable.md

@@ -141,9 +141,63 @@ column. The first row shows columns with the following data: Cloudhub, 20%,
 $25,000.00, jrogers@cloudhub.com, and (235) 223-5235. The last two columns are
 displayed as hyperlinks to represent an email address and telephone number.
 
+#### Managing Selected Rows
+
+Selecting a row or all rows via the checkbox column emits the `onrowselection` event. The `event.detail.selectedRows` property contains a list of all selected rows after any checkbox toggle. Alternatively, the `event.detail.config.value` contains a single `id` value of the row that was toggled.
+
+This JavaScript function displays the email addresses of all rows as they're selected.
+
+```js
+getSelectedEmail(event) {
+    // Display the Contact of the selected rows
+    event.detail.selectedRows.forEach((selectedRow) => {
+        alert('Selected email addresses: ' + selectedRow.Contact);
+    });
+}
+```
+
+Use the `event.detail.config.action` property to keep a running list of rows that have been selected or deselected. `event.detail.config.action` has four possible values:
+
+- `selectAllRows`: all rows are selected via the checkbox in the column header
+- `deselectAllRows`: all rows are deselected via the checkbox in the column header
+- `rowSelect`: single row is selected via the row checkbox
+- `rowDeselect`: single row is deselected via the row checkbox
+
+This JavaScript example keeps two running lists of row objects: a list of rows that have ever been selected and a list of row objects that are currently selected.
+
+```js
+selectedData = [];
+currentlySelectedData = [];
+
+handleRowSelection(event) {
+    switch (event.detail.config.action) {
+        case 'selectAllRows':
+            for (let i = 0; i < event.detail.selectedRows.length; i++) {
+                selectedData.push(event.detail.selectedRows[i]);
+                currentlySelectedData.push(event.detail.selectedRows[i]);
+            }
+            break;
+        case 'deselectAllRows':
+            currentlySelectedData = [];
+            break;
+        case 'rowSelect':
+            selectedData.push(event.detail.config.value);
+            break;
+        case 'rowDeselect':
+            index = currentlySelectedData.indexOf(event.detail.config.value);
+            if (index !== -1) {
+                array.splice(index, 1);
+            }
+            break;
+        default:
+            break;
+    }
+}
+```
+
 #### Retrieving Data Using an Apex Controller
 
-To return a simple list of records, use the `getListUi` wire adapter. To select certain accounts using SOQL, use an Apex method. See [Call Apex Methods](docs/component-library/documentation/lwc/lwc.use_navigate#events_navigate__page_state).
+To return a simple list of records, use the `getListUi` wire adapter. To select certain accounts using SOQL, use an Apex method. See [Call Apex Methods](https://developer.salesforce.com/docs/platform/lwc/guide/apex).
 
 This example loads the first 10 contacts in the datatable using a SOQL query.
 
@@ -289,7 +343,7 @@ const columns = [
 For more information on attributes and their supported values, see the
 corresponding base component documentation.
 
-For more information on creating your own data types, see [Create a Custom Data Type](docs/component-library/documentation/lwc/lwc.data_table_custom_types).
+For more information on creating your own data types, see [Create a Custom Data Type](https://developer.salesforce.com/docs/platform/lwc/guide/data-table-custom-types).
 
 #### Displaying Currency and Percentages
 
@@ -434,7 +488,7 @@ By default, number types align to the right. Number types include the `currency`
 
 The `action` type aligns to the center and cannot be overridden by the `alignment` attribute. All other types align to the left.
 
-To override the alignment of the `action` type, consider using custom types and provide your own markup. See [Create a Custom Data Type](docs/component-library/documentation/lwc/lwc.data_table_custom_types).
+To override the alignment of the `action` type, consider using custom types and provide your own markup. See [Create a Custom Data Type](https://developer.salesforce.com/docs/platform/lwc/guide/data-table-custom-types).
 
 #### Displaying an Icon Instead of a Column Label
 
@@ -517,7 +571,7 @@ const columns = [
 ];
 ```
 
-Custom classes are currently not supported. To apply custom styling on your datatable cells, create a custom data type and then apply your custom CSS classes. See [Custom Data Type Layout and Styles](docs/component-library/documentation/lwc/lwc.data_table_custom_types_styling).
+Custom classes are currently not supported. To apply custom styling on your datatable cells, create a custom data type and then apply your custom CSS classes. See [Custom Data Type Layout and Styles](https://developer.salesforce.com/docs/platform/lwc/guide/data-table-custom-types-styling).
 
 #### Displaying Indicators for Read-Only Fields
 
@@ -1089,7 +1143,7 @@ export default class DatatableWithInlineEdit extends LightningElement {
 }
 ```
 
-For more information, see [Display Data in a Table with Inline Editing](docs/component-library/documentation/lwc/lwc.data_table_inline_edit).
+For more information, see [Display Data in a Table with Inline Editing](https://developer.salesforce.com/docs/platform/lwc/guide/data-table-inline-edit).
 
 #### Displaying Errors
 
@@ -1282,11 +1336,11 @@ contain data of type url, phone, and email.
 
 On custom data types, accessibility and keyboard navigation are currently not supported
 because they require DOM manipulation, which Lightning Locker prevents in custom components.
-For more information, see [Security with Lightning Locker](docs/component-library/documentation/en/lwc/lwc.security_locker_service).
+For more information, see [Security with Lightning Locker](https://developer.salesforce.com/docs/platform/lwc/guide/security-locker-service).
 
 #### Usage Considerations
 
-This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](docs/component-library/documentation/lwc/lwc.migrate_map_aura_lwc_components) in the Lightning Web Components Developer Guide.
+This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](https://developer.salesforce.com/docs/platform/lwc/guide/migrate-map-aura-lwc-components) in the Lightning Web Components Developer Guide.
 
 #### Custom Events
 
@@ -1384,6 +1438,7 @@ The `rowselection` event returns the following parameter.
 | Parameter    | Type   | Description                             |
 | ------------ | ------ | --------------------------------------- |
 | selectedRows | object | The data in the rows that are selected. |
+| config.action | string | The type of selection event. Valid options include 'selectAllRows', 'deselectAllRows', 'rowSelect', and 'rowDeselect'. |
 
 The event properties are as follows.
 
@@ -1415,7 +1470,7 @@ The event properties are as follows.
 
 The event fired when a column is sorted.
 
-The `sort` event returns the following parameter.
+The `sort` event returns the following parameters.
 
 | Parameter     | Type   | Description                                                    |
 | ------------- | ------ | -------------------------------------------------------------- |

package/src/lightning/datatable/datatable.js

@@ -1534,6 +1534,7 @@ export default class LightningDatatable extends LightningElement {
         if (!customerEvent.defaultPrevented) {
             cancelInlineEdit(this);
         }
+        updateActiveCellTabIndexAfterSync(this.state);
     }
 
     /**

package/src/lightning/datepicker/datepicker.css

@@ -1,3 +1,3 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './input-text.slds.css';
-@import './form-element.slds.css';
+@import './form-element.slds.css'; */

package/src/lightning/datepicker/datepicker.html

@@ -57,7 +57,7 @@
     </div>
 
     <template if:true={errorMessage}>
-        <div id="error-message" data-error-message class={computedClass} aria-live="assertive">{errorMessage}</div>
+        <div id="error-message" data-error-message class={computedClass}>{errorMessage}</div>
     </template>
 
 

package/src/lightning/datepicker/datepicker.js

@@ -7,8 +7,7 @@ import labelMinAndMaxRangeMessage from '@salesforce/label/LightningDateTimePicke
 import labelRequired from '@salesforce/label/LightningControl.required';
 import labelSelectDateFor from '@salesforce/label/LightningDateTimePicker.selectDateFor';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import {
     normalizeISODate,
     parseFormattedDate,
@@ -64,7 +63,7 @@ const DATE_STYLE = {
     LONG: 'long',
 };
 
-export default class LightningDatePicker extends LightningShadowBaseClass {
+export default class LightningDatePicker extends LightningElement {
     static delegatesFocus = true;
 
     @track _disabled = false;
@@ -99,11 +98,16 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
 
     @api
     get rootAriaNode() {
-        return this.ariaObserver.root;
+        if (this.ariaObserver) {
+            return this.ariaObserver.root;
+        }
+        return null;
     }
 
     set rootAriaNode(root) {
-        this.ariaObserver.root = root;
+        if (this.ariaObserver) {
+            this.ariaObserver.root = root;
+        }
     }
 
     @api
@@ -193,12 +197,13 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
 
     set ariaLabelledByElement(el) {
         this._ariaLabelledBy = el;
-
-        this.ariaObserver.connect({
-            attribute: ARIA_LABELLEDBY,
-            targetSelector: 'input',
-            relatedNodeIds: getRealDOMId(this._ariaLabelledBy),
-        });
+        if (this.ariaObserver) {
+            this.ariaObserver.connect({
+                attribute: ARIA_LABELLEDBY,
+                targetSelector: 'input',
+                relatedNodeIds: getRealDOMId(this._ariaLabelledBy),
+            });
+        }
     }
 
     @api
@@ -208,12 +213,13 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
 
     set ariaControlsElement(el) {
         this._ariaControls = el;
-
-        this.ariaObserver.connect({
-            attribute: ARIA_CONTROLS,
-            targetSelector: 'input',
-            relatedNodeIds: getRealDOMId(this.ariaControlsElement),
-        });
+        if (this.ariaObserver) {
+            this.ariaObserver.connect({
+                attribute: ARIA_CONTROLS,
+                targetSelector: 'input',
+                relatedNodeIds: getRealDOMId(this.ariaControlsElement),
+            });
+        }
     }
 
     @api
@@ -382,8 +388,10 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.connected = true;
+        if (!this.ariaObserver) {
+            this.ariaObserver = new AriaObserver(this);
+        }
 
         this.keyboardInterface = this.datepickerKeyboardInterface();
     }
@@ -477,12 +485,14 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
     }
 
     connectAriaDescribedBy() {
-        this.ariaObserver.connect({
-            attribute: ARIA_DESCRIBEDBY,
-            targetSelector: 'input',
-            relatedNodeIds: this.computedAriaDescribedby,
-            relatedNodes: this.ariaErrorMessageElements,
-        });
+        if (this.ariaObserver) {
+            this.ariaObserver.connect({
+                attribute: ARIA_DESCRIBEDBY,
+                targetSelector: 'input',
+                relatedNodeIds: this.computedAriaDescribedby,
+                relatedNodes: this.ariaErrorMessageElements,
+            });
+        }
     }
 
     get computedDatepickerButtonAriaDescribedby() {

package/src/lightning/datepicker/form-element.slds.css

@@ -133,42 +133,42 @@
 
     /* FORM ELEMENT: STACKED */
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) {
+    :host([data-render-mode="shadow"][variant='label-stacked']) {
         display: block;
     }
 
     /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
 
-    /* :host([variant~='label-stacked']):not(.slds-form-element_readonly) {
+    /* :host([variant='label-stacked']):not(.slds-form-element_readonly) {
         margin-block-end: var(--sds-g-spacing-2);
     }
 
-    :host([variant~='label-stacked']):not(.slds-is-editing) {
+    :host([variant='label-stacked']):not(.slds-is-editing) {
         padding: 0 var(--sds-g-spacing-1);
     } */
 
-    /* :host([variant~='label-stacked']):not([class*="slds-size"]) {
+    /* :host([variant='label-stacked']):not([class*="slds-size"]) {
           width: 100%;
           flex-basis: 100%;
     } */
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element {
         padding: 0;
         margin-block-end: 0;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
+    :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 */
         padding-inline-start: 0;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
         width: 100%;
         flex-basis: 100%;
         clear: left;
     }
 
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__icon {
+    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__icon {
         float: none;
         padding-block-start: var(--sds-g-spacing-1, 0.25rem);
     }
@@ -177,7 +177,7 @@
 
     /* FORM ELEMENT: INLINE */
 
-    :host([data-render-mode="shadow"][variant~='label-inline']) {
+    :host([data-render-mode="shadow"][variant='label-inline']) {
         display: block;
     }
 
@@ -187,32 +187,32 @@
     in lighting-input this slds class is synonymous with the variant
     */
 
-    :host([data-render-mode="shadow"][variant~='label-inline'].slds-form-element_horizontal) {
+    :host([data-render-mode="shadow"][variant='label-inline'].slds-form-element_horizontal) {
         padding: var(--sds-g-spacing-1, 0.25rem);
         margin-block-end: var(--sds-g-spacing-2, 0.5rem);
     }
 
     /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
 
-    /* :host([variant~='label-inline']):not(.slds-form-element_readonly) {
+    /* :host([variant='label-inline']):not(.slds-form-element_readonly) {
         margin-block-end: var(--sds-g-spacing-2);
     }
 
-    :host([variant~='label-inline']):not([class*="slds-size"]) {
+    :host([variant='label-inline']):not([class*="slds-size"]) {
         width: 100%;
         flex-basis: 100%;
     }
 
-    :host([variant~='label-inline']:not(.slds-is-editing)) {
+    :host([variant='label-inline']:not(.slds-is-editing)) {
         padding: var(--sds-g-spacing-1);
     } */
 
-    :host([data-render-mode="shadow"][variant~='label-inline']).slds-is-edited {
+    :host([data-render-mode="shadow"][variant='label-inline']).slds-is-edited {
         padding-block-start: var(--sds-g-sizing-6, 1.25rem)
     }
 
-    @media (min-width: 48em) {
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__label {
+    @media (width >= 48em) {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
           float: left;
           max-width: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Removing icon width for when the help-text icon is present */
           flex-basis: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Some form element controls are set to display:flex */
@@ -222,23 +222,22 @@
           z-index: 1;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) lightning-helptext {
+        :host([data-render-mode="shadow"][variant='label-inline']) lightning-helptext {
           float: left;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__control {
           margin-inline-start: 33%;
           clear: none; /* Reset clear: left when switching to horizontal form layout */
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control .slds-form-element__control {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__control .slds-form-element__control {
           padding-inline-start: 0; /* Remove left padding on nested form controls, due to issues related to lightning-form components */
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list__column .slds-form-element__label {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-dueling-list__column .slds-form-element__label {
             width: auto;
             max-width: 100%;
-            -ms-flex-preferred-size: auto;
             flex-basis: auto;
             float: none;
             position: relative;
@@ -246,11 +245,11 @@
             margin-block-end: 0;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__help {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__help {
           margin-inline-start: 33%;
         }
 
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list {
+        :host([data-render-mode="shadow"][variant='label-inline']) .slds-dueling-list {
             clear: none;
         }
     }
@@ -283,7 +282,7 @@
 
     /* FORM ELEMENT: HIDDEN */
 
-    :host([data-render-mode="shadow"][variant~='label-hidden']) .slds-form-element__label {
+    :host([data-render-mode="shadow"][variant='label-hidden']) .slds-form-element__label {
       display: none
   }
 }