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

package/src/lightning/dualListbox/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/dualListbox/listbox.slds.css

@@ -1,11 +1,5 @@
 
  @supports (--styling-hooks: '') {
-   :host([data-render-mode="shadow"]) [part~='listbox'] {
-     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-     --_listbox-spacing-xxx-small: 0.125rem;
-      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-   }
-
    /* Horizontal listbox - used for pill container */
    :host([data-render-mode="shadow"]) .slds-listbox_horizontal {
      display: inline-flex;
@@ -18,9 +12,7 @@
    }
 
    :host([data-render-mode="shadow"]) .slds-listbox_horizontal li+li {
-     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-     padding-inline-start: var(--_listbox-spacing-xxx-small);
-      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+     padding-inline-start: 0.125rem;
    }
 
    /* Vertical listbox */
@@ -101,7 +93,7 @@
    }
 
    :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-icon {
-     color: currentColor;
+     color: currentcolor;
    }
 
    /* The icon within a plain listbox that indicates if an option has been selected or not. */
@@ -126,9 +118,7 @@
      text-overflow: ellipsis;
      white-space: nowrap;
      display: block;
-      /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-     margin-block-end: var(--_listbox-spacing-xxx-small);
-      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+     margin-block-end: 0.125rem;
    }
 
    /* The metadata or secondary text of an entity listbox */
@@ -139,15 +129,15 @@
    }
 
    :host([data-render-mode="shadow"]) .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-meta {
-     color: currentColor;
+     color: currentcolor;
    }
-  
+
    /* -------------------- END LISTBOX OPTION CSS --------------------------------------------- */
 
    /* ---------------------PULL OUT FOR PILL CONTAINER ---------------------------------------- */
 
    /* The container of pill selections found inside of a combobox group */
-   
+
    /* .slds-listbox_selection-group items need to be moved out to pill/pill container */
    :host([data-render-mode="shadow"]) .slds-listbox_selection-group {
      position: relative;
@@ -165,18 +155,14 @@
 
    :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox {
      padding-block-start: 0;
-      /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-     padding-block-end: var(--_listbox-spacing-xxx-small);
-      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+     padding-block-end: 0.125rem;
      padding-inline: 0;
    }
 
    :host([data-render-mode="shadow"]) .slds-listbox_selection-group .slds-listbox-item {
-     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-     padding-block-start: var(--_listbox-spacing-xxx-small);
+     padding-block-start: 0.125rem;
      padding-block-end: 0;
-     padding-inline: var(--_listbox-spacing-xxx-small);
-      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+     padding-inline: 0.125rem;
    }
 
    /* Toggle button to show all of the pill selections */
@@ -251,7 +237,7 @@
      margin-inline-end: 0;
    }
 
-   @media (max-width: 48em) {
+   @media (width <= 48em) {
 
      :host([data-render-mode="shadow"]) .slds-media_responsive {
        display: block;
@@ -264,4 +250,3 @@
      }
    }
  }
- 

package/src/lightning/dynamicIcon/dynamic-icon-ellie.slds.css

@@ -44,8 +44,8 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 
 :host([data-render-mode="shadow"]) .slds-icon-ellie circle:nth-child(2n + 1) {
-  fill: currentColor;
-  stroke: currentColor;
+  fill: currentcolor;
+  stroke: currentcolor;
   stroke-width: 4px;
 }
 

package/src/lightning/dynamicIcon/dynamic-icon-eq.slds.css

@@ -58,6 +58,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 @keyframes slds-icon-eq {
   to {
-    transform: scaleY(4.6666666667);
+    transform: scaleY(4.6667);
   }
 }

package/src/lightning/dynamicIcon/dynamic-icon-trend.slds.css

@@ -77,7 +77,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   :host([data-render-mode="shadow"]) .slds-icon-trend__arrow,:host([data-render-mode="shadow"]) 
   .slds-icon-trend__circle {
-    stroke: currentColor;
+    stroke: currentcolor;
     fill: none;
     stroke-linecap: round;
     stroke-linejoin: round;

package/src/lightning/dynamicIcon/dynamicIcon.js

@@ -1,5 +1,4 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { normalizeString as normalize } from 'lightning/utilsPrivate';
 import eqHtml from './eq.html';
@@ -13,7 +12,7 @@ import defaultHtml from './default.html';
 /**
  * Represents various animated icons with different states.
  */
-export default class LightningDynamicIcon extends LightningShadowBaseClass {
+export default class LightningDynamicIcon extends LightningElement {
     /**
      * The alternative text used to describe the dynamic icon.
      * This text should describe what's happening.

package/src/lightning/dynamicIcon/ellie.css

@@ -1 +1 @@
-@import './dynamic-icon-ellie.slds.css';
+/* @import './dynamic-icon-ellie.slds.css'; */

package/src/lightning/dynamicIcon/eq.css

@@ -1 +1 @@
-@import './dynamic-icon-eq.slds.css';
+/* @import './dynamic-icon-eq.slds.css'; */

package/src/lightning/dynamicIcon/score.css

@@ -1 +1 @@
-@import './dynamic-icon-score.slds.css';
+/* @import './dynamic-icon-score.slds.css'; */

package/src/lightning/dynamicIcon/strength.css

@@ -1 +1 @@
-@import './dynamic-icon-strength.slds.css';
+/* @import './dynamic-icon-strength.slds.css'; */

package/src/lightning/dynamicIcon/trend.css

@@ -1 +1 @@
-@import './dynamic-icon-trend.slds.css';
+/* @import './dynamic-icon-trend.slds.css'; */

package/src/lightning/dynamicIcon/waffle.css

@@ -1 +1 @@
-@import './dynamic-icon-waffle.slds.css';
+/* @import './dynamic-icon-waffle.slds.css'; */

package/src/lightning/f6Controller/f6Controller.js

@@ -345,10 +345,10 @@ export class F6Controller {
         );
 
         while (treeWalker.nextNode()) {
-            if (treeWalker.currentNode.shadowRoot) {
-                this.shadowTreeWalker(treeWalker.currentNode.shadowRoot);
-            } else {
+            if (this.isF6Region(treeWalker.currentNode)) {
                 this.regions.push(treeWalker.currentNode);
+            } else if (treeWalker.currentNode.shadowRoot) {
+                this.shadowTreeWalker(treeWalker.currentNode.shadowRoot);
             }
         }
     }
@@ -393,6 +393,11 @@ export class F6Controller {
         }
     };
 
+    isF6Region = (element) =>
+        element.matches(`*[${this.config.f6RegionAttribute}]`) &&
+        this.isVisible(element) &&
+        !this.isEmpty(element);
+
     elementFilter = (element) => {
         if (
             element.parentElement &&
@@ -401,12 +406,7 @@ export class F6Controller {
             return NodeFilter.FILTER_REJECT;
         }
 
-        if (
-            (element.matches(`*[${this.config.f6RegionAttribute}]`) &&
-                this.isVisible(element) &&
-                !this.isEmpty(element)) ||
-            element.shadowRoot
-        ) {
+        if (this.isF6Region(element) || element.shadowRoot) {
             return NodeFilter.FILTER_ACCEPT;
         }
 

package/src/lightning/formattedAddress/formattedAddress.js

@@ -226,8 +226,4 @@ export default class LightningFormattedAddress extends LightningElement {
     get addressLink() {
         return this.template.querySelector('a');
     }
-
-    handleReady(event) {
-        this.href = (event.detail && event.detail.href) || this.mapUrl;
-    }
 }

package/src/lightning/formattedDateTime/__docs__/formattedDateTime.md

@@ -217,7 +217,7 @@ Displays: December 03, 2017, 12:00 PM
 
 #### 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.
 
 #### Source Code
 

package/src/lightning/formattedDateTime/formattedDateTime.js

@@ -36,7 +36,7 @@ export default class LightningFormattedDateTime extends LightningElement {
     @api year;
 
     /**
-     * Allowed values are 2-digit, narrow, short, or long.
+     * Allowed values are 2-digit, numeric, narrow, short, or long.
      * @type {string}
      *
      */

package/src/lightning/formattedNumber/__docs__/formattedNumber.md

@@ -164,7 +164,7 @@ In these cases the unformatted value is shown.
 The locale set in your Salesforce user preferences determines how numbers are formatted. Some locales such as the Arabic (Lebanon) and Bangla (Bangladesh) locales also specify a numeral system other than the Hindu-Arabic numerals 0-9. The org permission “Show Hindu-Arabic Numbers” is intended to override a locale's default numerals. However, `lightning-formatted-number` displays the locale's default numerals even when this permission is enabled in your org. See [Supported Number, Name, and Address Formats (ICU)](https://help.salesforce.com/articleView?id=admin_supported_locales.htm").
 
 The `format-style` attribute is called the `style` attribute in the Aura version of this component.
-See [Base Components: Aura Vs Lightning Web Components](docs/component-library/documentation/lwc/lwc.migrate_map_aura_lwc_components).
+See [Base Components: Aura Vs Lightning Web Components](https://developer.salesforce.com/docs/platform/lwc/guide/migrate-map-aura-lwc-components).
 
 #### Source Code
 

package/src/lightning/formattedRichText/formatted-rich-text.slds.css

@@ -3,8 +3,6 @@
   line-height: var(--sds-g-font-lineheight, 1.5);
   overflow-wrap: break-word;
   word-wrap: break-word;
-  -webkit-hyphens: manual;
-  -ms-hyphens: manual;
   hyphens: manual;
 }
 

package/src/lightning/formattedRichText/formattedRichText.css

@@ -1,3 +1,3 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './formatted-rich-text.slds.css';
-@import 'lightning/sldsUtilsThemes';
+@import 'lightning/sldsUtilsThemes'; */

package/src/lightning/formattedRichText/formattedRichText.js

@@ -1,5 +1,4 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api } from 'lwc';
 import sanitizeHTML from 'lightning/purifyLib';
 import { linkify } from './linkify';
 import { richTextConfig } from './richTextConfig';
@@ -13,7 +12,7 @@ import {
  * Displays rich text that's formatted with allowed tags and attributes.
  * Other tags and attributes are removed and only their text content is displayed.
  */
-export default class LightningFormattedRichText extends LightningShadowBaseClass {
+export default class LightningFormattedRichText extends LightningElement {
     static validationOptOut = ['class'];
     /**
      * If present, the component does not create links in the rich text.
@@ -59,7 +58,6 @@ export default class LightningFormattedRichText extends LightningShadowBaseClass
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.classList.add('slds-rich-text-editor__output');
         this.connected = true;
     }

package/src/lightning/formattedText/formattedText.css

@@ -1 +1 @@
-@import 'lightning/sldsCommon'
+/* @import 'lightning/sldsCommon' */

package/src/lightning/formattedText/formattedText.js

@@ -1,5 +1,4 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import {
     normalizeBoolean,
     parseToFormattedLinkifiedParts,
@@ -9,7 +8,7 @@ import {
 /**
  * Displays text, replaces newlines with line breaks, and linkifies if requested.
  */
-export default class FormattedText extends LightningShadowBaseClass {
+export default class FormattedText extends LightningElement {
     /**
      * Sets the text to display.
      * @type {string}

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