lightning-base-components 1.18.8-alpha → 1.19.1-alpha

package/src/lightning/pillContainer/pill.slds.css

@@ -1,15 +1,23 @@
 
 @supports (--styling-hooks: '') {
+    /* re-assign current slds hooks using deprecated naming conventions */
+    :host([data-render-mode="shadow"]) {
+      --slds-c-pill-spacing-block-end: var(--slds-c-pill-spacing-blockend);
+      --slds-c-pill-spacing-block-start: var(--slds-c-pill-spacing-blockstart);
+      --slds-c-pill-spacing-inline-end: var(--slds-c-pill-spacing-inlineend);
+      --slds-c-pill-spacing-inline-start: var(--slds-c-pill-spacing-inlinestart);
+    }
+
   :host([data-render-mode="shadow"]) .slds-pill {
     display: inline-flex;
     align-items: center;
     justify-content: space-between;
     line-height: var(--sds-g-font-lineheight-4, 1.5);
     max-width: 100%;
-    padding-block-start: var(--slds-c-pill-spacing-block-start, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-inline-end: var(--slds-c-pill-spacing-inline-end, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-block-end: var(--slds-c-pill-spacing-block-end, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-inline-start: var(--slds-c-pill-spacing-inline-start, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-block-start: var(--slds-c-pill-spacing-blockstart, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-inline-end: var(--slds-c-pill-spacing-inlineend, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-block-end: var(--slds-c-pill-spacing-blockend, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-inline-start: var(--slds-c-pill-spacing-inlinestart, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
     border-width: var(--slds-c-pill-sizing-border, var(--sds-g-sizing-border-1, 1px));
     border-style: solid;
     border-color: var(--slds-c-pill-color-border, var(--sds-g-color-neutral-base-90, #e5e5e5));
@@ -43,7 +51,7 @@
     text-decoration: none;
     color:var(--sds-g-color-brand-base-30, #014486);
   }
-  
+
   :host([data-render-mode="shadow"]) a:active{
     color:var(--sds-g-color-brand-base-30, #014486);
   }
@@ -133,10 +141,10 @@
   }
 
   :host([data-render-mode="shadow"]) .slds-pill__action {
-    padding-block-start: var(--slds-c-pill-spacing-block-start, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-inline-end: var(--slds-c-pill-spacing-inline-end, calc((var(--sds-g-spacing-2, 0.5rem) / 2) + 1rem));
-    padding-block-end: var(--slds-c-pill-spacing-block-end, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-inline-start: var(--slds-c-pill-spacing-inline-start, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-block-start: var(--slds-c-pill-spacing-blockstart, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-inline-end: var(--slds-c-pill-spacing-inlineend, calc((var(--sds-g-spacing-2, 0.5rem) / 2) + 1rem));
+    padding-block-end: var(--slds-c-pill-spacing-blockend, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    padding-inline-start: var(--slds-c-pill-spacing-inlinestart, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
     border-width: var(--slds-c-pill-sizing-border, 1px);
     border-style: solid;
     border-color: var(--slds-c-pill-color-border, var(--sds-g-color-neutral-base-90, #e5e5e5));

package/src/lightning/popup/popover.slds.css

@@ -10,7 +10,7 @@
           var(--slds-g-color-neutral-base-100,
               var(--sds-g-color-neutral-base-100, #ffffff)));
       display: inline-block;
-      box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16);
+      box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 16%);
       border: var(--sds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-base-1, var(--sds-g-color-border-base-1, #c9c9c9));
   }
 

package/src/lightning/primitiveBubble/tooltip.slds.css

@@ -61,19 +61,19 @@
     --sds-c-overlay-color-border: var(--slds-c-tooltip-color-border);
     --sds-c-overlay-shadow: var(--slds-c-tooltip-shadow, 0 2px 3px 0 rgb(0 0 0 / 16%));
     --sds-c-overlay-spacing-inline-start: var(
-      --slds-c-tooltip-spacing-inline-start,
+      --slds-c-tooltip-spacing-inlinestart,
       var(--sds-c-tooltip-spacing-inline, 0.75rem)
     );
     --sds-c-overlay-spacing-inline-end: var(
-      --slds-c-tooltip-spacing-inline-end,
+      --slds-c-tooltip-spacing-inlineend,
       var(--sds-c-tooltip-spacing-inline, 0.75rem)
     );
     --sds-c-overlay-spacing-block-start: var(
-      --slds-c-tooltip-spacing-block-start,
+      --slds-c-tooltip-spacing-blockstart,
       var(--sds-c-tooltip-spacing-block, 0.5rem)
     );
     --sds-c-overlay-spacing-block-end: var(
-      --slds-c-tooltip-spacing-block-end,
+      --slds-c-tooltip-spacing-blockend,
       var(--sds-c-tooltip-spacing-block, 0.5rem)
     );
 
@@ -102,7 +102,7 @@
   */
 
 :host([data-render-mode="shadow"]) [part~='overlay']::after {
-  box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.16);
+  box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 16%);
   z-index: -1;
 }
 
@@ -231,8 +231,7 @@
 }
 
 :host([data-render-mode="shadow"]) .slds-nubbin_bottom::after {
-  -webkit-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 16%);
   z-index: -1;
 }
 
@@ -264,8 +263,7 @@
 
 :host([data-render-mode="shadow"]) .slds-nubbin_bottom-left::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_bottom-left-corner::after {
-  -webkit-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 16%);
   z-index: -1;
 }
 
@@ -306,8 +304,7 @@
 
 :host([data-render-mode="shadow"]) .slds-nubbin_bottom-right::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_bottom-right-corner::after {
-  -webkit-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 16%);
   z-index: -1;
 }
 
@@ -347,8 +344,7 @@
 }
 
 :host([data-render-mode="shadow"]) .slds-nubbin_left::after {
-  -webkit-box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 16%);
   z-index: -1;
 }
 
@@ -380,8 +376,7 @@
 
 :host([data-render-mode="shadow"]) .slds-nubbin_left-top::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left-top-corner::after {
-  -webkit-box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 16%);
   z-index: -1;
 }
 
@@ -425,8 +420,7 @@
 
 :host([data-render-mode="shadow"]) .slds-nubbin_left-bottom::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_left-bottom-corner::after {
-  -webkit-box-shadow: -1px 2px 3px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: -1px 2px 3px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: -1px 2px 3px 0 rgba(0, 0, 0, 16%);
   z-index: -1;
 }
 
@@ -463,8 +457,7 @@
 }
 
 :host([data-render-mode="shadow"]) .slds-nubbin_right::after {
-  -webkit-box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 16%);
   z-index: -1;
 }
 
@@ -496,8 +489,7 @@
 
 :host([data-render-mode="shadow"]) .slds-nubbin_right-top::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right-top-corner::after {
-  -webkit-box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 16%);
   z-index: -1;
 }
 
@@ -541,8 +533,7 @@
 
 :host([data-render-mode="shadow"]) .slds-nubbin_right-bottom::after,:host([data-render-mode="shadow"]) 
 .slds-nubbin_right-bottom-corner::after {
-  -webkit-box-shadow: 2px -1px 3px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 2px -1px 3px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: 2px -1px 3px 0 rgba(0, 0, 0, 16%);
   z-index: -1;
 }
 

package/src/lightning/primitiveButton/primitiveButton.js

@@ -449,7 +449,6 @@ export default class LightningPrimitiveButton extends LightningElement {
     constructor() {
         super();
         this.ariaObserver = new AriaObserver(this);
-
         // Workaround for an IE11 bug where click handlers on button ancestors
         // receive the click event even if the button element has the `disabled`
         // attribute set.
@@ -461,6 +460,11 @@ export default class LightningPrimitiveButton extends LightningElement {
             });
         }
     }
+    connectedCallback() {
+        if (!this.ariaObserver) {
+            this.ariaObserver = new AriaObserver(this);
+        }
+    }
 
     renderedCallback() {
         if (this.isConnected) {

package/src/lightning/primitiveColorpickerButton/color-picker-button.slds.css

@@ -48,39 +48,39 @@
  */
 
 @supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"][size~='xxx-small']) {
+  :host([data-render-mode="shadow"][size='xxx-small']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-3, 0.5rem);
   }
 
-  :host([data-render-mode="shadow"][size~='xx-small']) {
+  :host([data-render-mode="shadow"][size='xx-small']) {
     --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
   }
 
-  :host([data-render-mode="shadow"][size~='x-small']) {
+  :host([data-render-mode="shadow"][size='x-small']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-5, 1rem);
   }
 
-  :host([data-render-mode="shadow"][size~='small']) {
+  :host([data-render-mode="shadow"][size='small']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-7, 1.5rem);
   }
 
-  :host([data-render-mode="shadow"][size~='large']) {
+  :host([data-render-mode="shadow"][size='large']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-10, 3rem);
   }
 
-  :host([data-render-mode="shadow"][variant~='warning']) {
+  :host([data-render-mode="shadow"][variant='warning']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-warning-base-70, #fe9339);
   }
 
-  :host([data-render-mode="shadow"][variant~='success']) {
+  :host([data-render-mode="shadow"][variant='success']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-success-base-50, #2e844a);
   }
 
-  :host([data-render-mode="shadow"][variant~='error']) {
+  :host([data-render-mode="shadow"][variant='error']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-error-base-50, #ea001e);
   }
 
-  :host([data-render-mode="shadow"][variant~='light']) {
+  :host([data-render-mode="shadow"][variant='light']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
   }
 
@@ -90,15 +90,15 @@
     --sds-c-icon-sizing-border: var(--slds-c-icon-sizing-border);
     --sds-c-icon-color-border: var(--slds-c-icon-color-border);
     --sds-c-icon-spacing-block-start: var(
-      --slds-c-icon-spacing-block-start,
+      --slds-c-icon-spacing-blockstart,
       var(--slds-c-icon-spacing-block)
     );
-    --sds-c-icon-spacing-block-end: var(--slds-c-icon-spacing-block-end, var(--slds-c-icon-spacing-block));
+    --sds-c-icon-spacing-block-end: var(--slds-c-icon-spacing-blockend, var(--slds-c-icon-spacing-block));
     --sds-c-icon-spacing-inline-start: var(
-      --slds-c-icon-spacing-inline-start,
+      --slds-c-icon-spacing-inlinestart,
       var(--slds-c-icon-spacing-inline)
     );
-    --sds-c-icon-spacing-inline-end: var(--slds-c-icon-spacing-inline-end, var(--slds-c-icon-spacing-inline));
+    --sds-c-icon-spacing-inline-end: var(--slds-c-icon-spacing-inlineend, var(--slds-c-icon-spacing-inline));
 
     /**
      * There's a divergence in LBC that we have to support here: LBC splits their
@@ -194,7 +194,7 @@
  */
 
 :host([data-render-mode="shadow"]) .slds-icon_disabled {
-  background-color: currentColor;
+  background-color: currentcolor;
 }
 
 :host([data-render-mode="shadow"]) .slds-input__icon {

package/src/lightning/primitiveIcon/icon.slds.css

@@ -48,39 +48,39 @@
  */
 
 @supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"][size~='xxx-small']) {
+  :host([data-render-mode="shadow"][size='xxx-small']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-3, 0.5rem);
   }
 
-  :host([data-render-mode="shadow"][size~='xx-small']) {
+  :host([data-render-mode="shadow"][size='xx-small']) {
     --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
   }
 
-  :host([data-render-mode="shadow"][size~='x-small']) {
+  :host([data-render-mode="shadow"][size='x-small']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-5, 1rem);
   }
 
-  :host([data-render-mode="shadow"][size~='small']) {
+  :host([data-render-mode="shadow"][size='small']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-7, 1.5rem);
   }
 
-  :host([data-render-mode="shadow"][size~='large']) {
+  :host([data-render-mode="shadow"][size='large']) {
     --slds-c-icon-sizing: var(--sds-g-sizing-10, 3rem);
   }
 
-  :host([data-render-mode="shadow"][variant~='warning']) {
+  :host([data-render-mode="shadow"][variant='warning']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-warning-base-70, #fe9339);
   }
 
-  :host([data-render-mode="shadow"][variant~='success']) {
+  :host([data-render-mode="shadow"][variant='success']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-success-base-50, #2e844a);
   }
 
-  :host([data-render-mode="shadow"][variant~='error']) {
+  :host([data-render-mode="shadow"][variant='error']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-error-base-50, #ea001e);
   }
 
-  :host([data-render-mode="shadow"][variant~='light']) {
+  :host([data-render-mode="shadow"][variant='light']) {
     --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
   }
 
@@ -90,15 +90,15 @@
     --sds-c-icon-sizing-border: var(--slds-c-icon-sizing-border);
     --sds-c-icon-color-border: var(--slds-c-icon-color-border);
     --sds-c-icon-spacing-block-start: var(
-      --slds-c-icon-spacing-block-start,
+      --slds-c-icon-spacing-blockstart,
       var(--slds-c-icon-spacing-block)
     );
-    --sds-c-icon-spacing-block-end: var(--slds-c-icon-spacing-block-end, var(--slds-c-icon-spacing-block));
+    --sds-c-icon-spacing-block-end: var(--slds-c-icon-spacing-blockend, var(--slds-c-icon-spacing-block));
     --sds-c-icon-spacing-inline-start: var(
-      --slds-c-icon-spacing-inline-start,
+      --slds-c-icon-spacing-inlinestart,
       var(--slds-c-icon-spacing-inline)
     );
-    --sds-c-icon-spacing-inline-end: var(--slds-c-icon-spacing-inline-end, var(--slds-c-icon-spacing-inline));
+    --sds-c-icon-spacing-inline-end: var(--slds-c-icon-spacing-inlineend, var(--slds-c-icon-spacing-inline));
 
     /**
      * There's a divergence in LBC that we have to support here: LBC splits their
@@ -194,7 +194,7 @@
  */
 
 :host([data-render-mode="shadow"]) .slds-icon_disabled {
-  background-color: currentColor;
+  background-color: currentcolor;
 }
 
 :host([data-render-mode="shadow"]) .slds-input__icon {

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

@@ -176,7 +176,7 @@
   :host([data-render-mode="shadow"]) [part='input-checkbox'] {
     /* Label */
     --sds-c-inputcheckbox-label-spacing-inline-start: var(
-      --slds-c-inputcheckbox-label-spacing-inline-start,
+      --slds-c-inputcheckbox-label-spacing-inlinestart,
       var(--sds-g-spacing-2, 0.5rem)
     );
 
@@ -330,8 +330,8 @@
      *
      * @TODO: Remove magic number for MQ
      */
-  @media (min-width: 48em) {
-    :host([data-render-mode="shadow"][variant~='label-inline']) [part='label-container'] {
+  @media (width >= 48em) {
+    :host([data-render-mode="shadow"][variant='label-inline']) [part='label-container'] {
       float: left;
 
       /* TODO: Get rid of these magic numbers */
@@ -340,19 +340,19 @@
       padding-inline-start: var(--sds-g-spacing-1, 0.25rem);
     }
 
-    :host([data-render-mode="shadow"][variant~='label-inline']) [part='input-checkbox'] {
+    :host([data-render-mode="shadow"][variant='label-inline']) [part='input-checkbox'] {
       display: block;
       margin-inline-start: 33%;
       padding-block: var(--sds-g-spacing-1, 0.25rem);
       margin-block-end: var(--sds-g-spacing-2, 0.5rem);
     }
 
-    :host([data-render-mode="shadow"][variant~='label-inline']) [part='inline-help'] {
+    :host([data-render-mode="shadow"][variant='label-inline']) [part='inline-help'] {
       float: left;
       padding-block-start: var(--sds-g-spacing-1, 0.25rem);
     }
 
-    :host([data-render-mode="shadow"][variant~='label-inline']) [part='indicator'] {
+    :host([data-render-mode="shadow"][variant='label-inline']) [part='indicator'] {
       /* @TODO: add change to SDS, removes line-height from display inline */
       display: block;
     }
@@ -363,7 +363,7 @@
      *
      * label-inline & label-stacked uses the "standalone" checkbox that lives outside the label
      */
-  :host([data-render-mode="shadow"][variant~='label-inline']) [part='checkbox'],:host([data-render-mode="shadow"][variant~='label-stacked']) [part='checkbox'] {
+  :host([data-render-mode="shadow"][variant='label-inline']) [part='checkbox'],:host([data-render-mode="shadow"][variant='label-stacked']) [part='checkbox'] {
     width: 1rem;
     height: 1rem;
     margin: 0;