lightning-base-components 1.26.4-alpha → 1.27.2-alpha

package/src/lightning/carousel/button.slds.css

@@ -187,14 +187,13 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-icon-sizing: 0.875rem;
   --slds-c-icon-color-foreground: currentcolor;
 
-
   --sds-c-button-font-lineheight: var(
     --slds-c-button-neutral-font-lineheight,
     var(--slds-s-button-font-lineheight, 1.875rem)
   );
   --sds-c-button-spacing-inline: var(
     --slds-c-button-neutral-spacing-inline,
-    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4));
+    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4)) ;
   );
   --sds-c-button-spacing-block: var(--slds-c-button-neutral-spacing-block);
 
@@ -214,7 +213,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     * In all other variants, it is ok to use the previous state as a fallback value.
     */
 
-
   /* Border radius - shared */
   --sds-c-button-radius-border-startstart: var(
     --slds-c-button-radius-border-startstart,
@@ -257,7 +255,10 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --slds-c-button-neutral-color-background-hover,
     var(--slds-g-color-surface-container-2)
   );
-  --sds-c-button-color-background-focus: var(--slds-c-button-neutral-color-background-focus, var(--slds-g-color-surface-container-2));
+  --sds-c-button-color-background-focus: var(
+    --slds-c-button-neutral-color-background-focus,
+    var(--slds-g-color-surface-container-2)
+  );
   --sds-c-button-color-background-active: var(
     --slds-c-button-neutral-color-background-active,
     var(--slds-g-color-surface-container-2)
@@ -280,8 +281,14 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Text color */
   --sds-c-button-text-color: var(--slds-c-button-neutral-text-color, var(--slds-g-color-accent-2));
-  --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-s-button-color-hover, var(--slds-g-color-accent-3)));
-  --sds-c-button-text-color-focus: var(--slds-c-button-neutral-text-color-focus, var(--slds-g-color-accent-3));
+  --sds-c-button-text-color-hover: var(
+    --slds-c-button-neutral-text-color-hover,
+    var(--slds-s-button-color-hover, var(--slds-g-color-accent-3))
+  );
+  --sds-c-button-text-color-focus: var(
+    --slds-c-button-neutral-text-color-focus,
+    var(--slds-g-color-accent-3)
+  );
   --sds-c-button-text-color-active: var(
     --slds-c-button-neutral-text-color-active,
     var(--slds-g-color-accent-3)
@@ -293,17 +300,17 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 /* Overriding primitiveBaseButton */
 :host([data-render-mode="shadow"]) [part~='button']:disabled {
-   --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
-   --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
-   --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
+  --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
+  --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
+  --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
 
-   /** 
+  /** 
     * Needed to override 
     * `pointer-event: none` coming from sds
     * that prevent tooltip from showing
    */
-   pointer-events: auto;
-   cursor: default;
+  pointer-events: auto;
+  cursor: default;
 }
 /**
   * A note about fallbacks on the default variant:
@@ -414,9 +421,18 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-text-color-hover: var(--slds-g-color-error-1);
   --slds-c-button-neutral-text-color-focus: var(--slds-g-color-error-1);
   --slds-c-button-neutral-text-color-active: var(--slds-g-color-error-1);
-  --slds-c-button-neutral-color-border-hover: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
-  --slds-c-button-neutral-color-border-focus: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
-  --slds-c-button-neutral-color-border-active: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
+  --slds-c-button-neutral-color-border-hover: var(
+    --slds-c-button-neutral-color-border,
+    var(--slds-g-color-border-1)
+  );
+  --slds-c-button-neutral-color-border-focus: var(
+    --slds-c-button-neutral-color-border,
+    var(--slds-g-color-border-1)
+  );
+  --slds-c-button-neutral-color-border-active: var(
+    --slds-c-button-neutral-color-border,
+    var(--slds-g-color-border-1)
+  );
 }
 :host([data-render-mode="shadow"][variant='brand']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='success']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='destructive']) [part~='button']:disabled {
   --sds-c-button-color-background: var(--slds-g-color-disabled-container-2);
@@ -436,7 +452,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 /**
   * text variant is for button-stateful
 */
-:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button']{
+:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button'] {
   --sds-c-button-spacing-inline: 0;
   --slds-c-button-neutral-text-color: var(--slds-g-color-accent-2);
   --slds-c-button-neutral-color-border: transparent;
@@ -483,7 +499,6 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 :host([data-render-mode="shadow"]) [part~='end'] {
   display: inline-flex;
   padding-inline-start: 0;
-
 }
 /**
  * A temporarily baked-in utility class until SLDS gets a proper utility package.

package/src/lightning/carousel/carousel.js

@@ -241,30 +241,23 @@ export default class LightningCarousel extends LightningShadowBaseClass {
     }
 
     handleSlotChange() {
-        if (!features.enableReactiveCarousel) {
-            return;
+        if (features.enableReactiveCarousel) {
+            this.handleItemRemovals();
         }
+    }
 
+    /**
+     * This function reconciles the internal state with the DOM elements they
+     * represent, in order to handle DOM element removals.
+     */
+    handleItemRemovals() {
         const elementsInDOM = Array.from(
             this.querySelectorAll('lightning-carousel-image')
         );
 
-        if (
-            elementsInDOM.length < this.paginationItems.length ||
-            elementsInDOM.length < this.carouselItems.length
-        ) {
-            this.handleItemRemovals(elementsInDOM);
-        }
-    }
-
-    /**
-     * This function handles the removal of any carousel images.
-     */
-    handleItemRemovals(elementsInDOM) {
-        // Filter internal objects based on whether their corresponding elements are in the DOM
-        this.paginationItems = this.paginationItems.filter((item, index) => {
-            // paginationItems are wrapeped with a mutation observer proxy due to
-            // @track usages so we need to use carouselImage instead
+        this.paginationItems = this.paginationItems.filter((_item, index) => {
+            // paginationItems are wrapped with a mutation observer proxy due to usage
+            // of the @track decorator, so we index using carouselImage instead
             const element = objectToElementMap.get(this.carouselItems[index]);
             return elementsInDOM.includes(element);
         });

package/src/lightning/carousel/carousel.slds.css

@@ -162,14 +162,23 @@
   padding-block-end: var(--slds-c-button-spacing-blockend, var(--sds-c-button-spacing-blockend, 0));
   padding-inline-start: var(--slds-c-button-spacing-inlinestart, var(--sds-c-button-spacing-inlinestart, 0));
   background: none;
-  background-color:var(--slds-c-button-color-background, var(--sds-c-button-color-background, transparent));
+  background-color: var(--slds-c-button-color-background, var(--sds-c-button-color-background, transparent));
   background-clip: border-box;
-  border-color:var(--slds-c-button-color-border, var(--sds-c-button-color-border, var(--slds-g-color-border-base-4, transparent)));
+  border-color: var(
+    --slds-c-button-color-border,
+    var(--sds-c-button-color-border, var(--slds-g-color-border-base-4, transparent))
+  );
   border-style: solid;
-  border-width:var(--slds-c-button-sizing-border, var(--sds-c-button-sizing-border, var(--slds-g-sizing-border-1)));
-  border-radius:var(--slds-c-button-radius-border, var(--sds-c-button-radius-border, var(--slds-g-radius-border-2)));
+  border-width: var(
+    --slds-c-button-sizing-border,
+    var(--sds-c-button-sizing-border, var(--slds-g-sizing-border-1))
+  );
+  border-radius: var(
+    --slds-c-button-radius-border,
+    var(--sds-c-button-radius-border, var(--slds-g-radius-border-2))
+  );
   text-decoration: none;
-  color:var(--slds-c-button-text-color, var(--sds-c-button-text-color, var(--slds-g-color-on-surface-1)));
+  color: var(--slds-c-button-text-color, var(--sds-c-button-text-color, var(--slds-g-color-on-surface-1)));
   white-space: normal;
   user-select: none;
   /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
@@ -189,7 +198,7 @@
 
 :host([data-render-mode="shadow"]) .slds-button:focus {
   outline: 0;
-  box-shadow: 0 0 3px var(--slds-g-color-brand-base-50)
+  box-shadow: 0 0 3px var(--slds-g-color-brand-base-50);
 }
 
 :host([data-render-mode="shadow"]) .slds-button:active {

package/src/lightning/carouselImage/carouselImage.lbc.native.css

@@ -1,4 +1,3 @@
 @import 'lightning/sldsCommon';
 @import 'lightning/sldsUtilsInteractions';
 @import './carousel-image.slds.css';
-

package/src/lightning/checkboxGroup/__docs__/checkboxGroup.md

@@ -83,8 +83,8 @@ The validation occurs for the checkbox group, not for an individual checkbox. To
 
 The `validity` attribute returns the ValidityState object, with the following supported properties.
 
--   `valid`: Returns true if the checkbox group meets all its validation constraints.
--   `valueMissing`: Returns true if a selection in the checkbox group is required but no checkbox is selected.
+- `valid`: Returns true if the checkbox group meets all its validation constraints.
+- `valueMissing`: Returns true if a selection in the checkbox group is required but no checkbox is selected.
 
 Other properties such as `badInput` are not supported.
 
@@ -150,10 +150,10 @@ You can use a combination of the `variant` and `class` attributes to customize t
 
 Use the `variant` attribute with one of these values to apply different label positioning.
 
--   `label-hidden` hides the checkbox group label but make it available to assistive technology. This variant does not hide the option labels.
--   `label-inline` horizontally aligns the checkbox group label and options.
--   `label-stacked` places the checkbox group label above the options.
--   `standard` is the default value, which displays the checkbox group label above the options.
+- `label-hidden` hides the checkbox group label but make it available to assistive technology. This variant does not hide the option labels.
+- `label-inline` horizontally aligns the checkbox group label and options.
+- `label-stacked` places the checkbox group label above the options.
+- `standard` is the default value, which displays the checkbox group label above the options.
 
 ##### Customize Component Styling
 
@@ -171,7 +171,7 @@ This example adds a box theme around the checkbox group using an SLDS class.
 </lightning-checkbox-group>
 ```
 
-Component styling hooks use the `--slds-c-*` prefix and change styling for specific elements or properties of a component. Component-specific styling isn’t recommended, because it’s unsupported for SLDS 2, but existing customizations still work with the original SLDS. If you use component styling hooks, limit the components to SLDS themes until SLDS 2 and the Salesforce Cosmos theme become generally available. See [Checkbox: Styling Hooks Overview](https://www.lightningdesignsystem.com/components/checkbox/#Styling-Hooks-Overview) for documentation on component-specific hooks for this component. 
+Component styling hooks use the `--slds-c-*` prefix and change styling for specific elements or properties of a component. Component-specific styling isn’t recommended, because it’s unsupported for SLDS 2, but existing customizations still work with the original SLDS. If you use component styling hooks, limit the components to SLDS themes until SLDS 2 and the Salesforce Cosmos theme become generally available. See [Checkbox: Styling Hooks Overview](https://www.lightningdesignsystem.com/components/checkbox/#Styling-Hooks-Overview) for documentation on component-specific hooks for this component.
 
 #### Usage Considerations
 

package/src/lightning/checkboxGroup/checkbox-group.slds.css

@@ -1,6 +1,4 @@
 
-
-
 :host([data-render-mode="shadow"].slds-form-element) {
   pointer-events: none;
 }
@@ -47,12 +45,18 @@
   border-radius: var(--_slds-c-checkboxgroup-radius-border, var(--slds-g-radius-border-1));
   border-width: var(--slds-s-mark-sizing-border, var(--slds-g-sizing-border-1));
   border-style: solid;
-  border-color: var(--_slds-c-checkboxgroup-color-border,
-      var(--slds-s-mark-color-border, var(--slds-g-color-border-2)));
-  background-color: var(--_slds-c-checkboxgroup-color-background,
-      var(--slds-s-mark-color-background, var(--slds-g-color-surface-container-1)));
+  border-color: var(
+    --_slds-c-checkboxgroup-color-border,
+    var(--slds-s-mark-color-border, var(--slds-g-color-border-2))
+  );
+  background-color: var(
+    --_slds-c-checkboxgroup-color-background,
+    var(--slds-s-mark-color-background, var(--slds-g-color-surface-container-1))
+  );
   box-shadow: var(--_slds-c-checkboxgroup-shadow);
-  transition: border 0.1s linear, background-color 0.1s linear;
+  transition:
+    border 0.1s linear,
+    background-color 0.1s linear;
 }
 
 /**
@@ -84,20 +88,22 @@
   pointer-events: auto;
 }
 
-:host([data-render-mode="shadow"]) .slds-checkbox [type=checkbox]+.slds-checkbox__label .slds-checkbox_faux {
+:host([data-render-mode="shadow"]) .slds-checkbox [type='checkbox'] + .slds-checkbox__label .slds-checkbox_faux {
   margin-inline-end: var(--slds-g-spacing-2);
 }
 
-:host([data-render-mode="shadow"]) .slds-checkbox [type='checkbox']:checked+.slds-checkbox_faux,:host([data-render-mode="shadow"]) 
-.slds-checkbox [type='checkbox']:checked~.slds-checkbox_faux,:host([data-render-mode="shadow"]) 
-.slds-checkbox [type='checkbox']:checked+.slds-checkbox__label .slds-checkbox_faux {
-  --_slds-c-checkboxgroup-color-background: var(--_slds-c-checkboxgroup-color-background-checked,
-      var(--slds-s-mark-color-background-checked, var(--slds-g-color-surface-container-1)));
+:host([data-render-mode="shadow"]) .slds-checkbox [type='checkbox']:checked + .slds-checkbox_faux,:host([data-render-mode="shadow"]) 
+.slds-checkbox [type='checkbox']:checked ~ .slds-checkbox_faux,:host([data-render-mode="shadow"]) 
+.slds-checkbox [type='checkbox']:checked + .slds-checkbox__label .slds-checkbox_faux {
+  --_slds-c-checkboxgroup-color-background: var(
+    --_slds-c-checkboxgroup-color-background-checked,
+    var(--slds-s-mark-color-background-checked, var(--slds-g-color-surface-container-1))
+  );
 }
 
-:host([data-render-mode="shadow"]) .slds-checkbox [type='checkbox']:checked+.slds-checkbox_faux::after,:host([data-render-mode="shadow"]) 
-.slds-checkbox [type='checkbox']:checked~.slds-checkbox_faux::after,:host([data-render-mode="shadow"]) 
-.slds-checkbox [type='checkbox']:checked+.slds-checkbox__label .slds-checkbox_faux::after {
+:host([data-render-mode="shadow"]) .slds-checkbox [type='checkbox']:checked + .slds-checkbox_faux::after,:host([data-render-mode="shadow"]) 
+.slds-checkbox [type='checkbox']:checked ~ .slds-checkbox_faux::after,:host([data-render-mode="shadow"]) 
+.slds-checkbox [type='checkbox']:checked + .slds-checkbox__label .slds-checkbox_faux::after {
   display: block;
   content: '';
   height: var(--slds-g-sizing-2);
@@ -106,79 +112,107 @@
   inset-block-start: 50%;
   left: 50%;
   transform: translate3d(-50%, -50%, 0) rotate(-45deg);
-  border-block-end: var(--slds-g-sizing-border-2) solid var(--_slds-c-checkboxgroup-mark-color-foreground, var(--slds-s-mark-color-foreground-checked, var(--slds-g-color-border-accent-1)));
-  border-inline-start: var(--slds-g-sizing-border-2) solid var(--_slds-c-checkboxgroup-mark-color-foreground, var(--slds-s-mark-color-foreground-checked, var(--slds-g-color-border-accent-1)));
-}
-
-:host([data-render-mode="shadow"]) .slds-checkbox:dir(rtl) [type='checkbox']:checked+.slds-checkbox_faux::after,:host([data-render-mode="shadow"]) 
-.slds-checkbox:dir(rtl) [type='checkbox']:checked~.slds-checkbox_faux::after,:host([data-render-mode="shadow"]) 
-.slds-checkbox:dir(rtl) [type='checkbox']:checked+.slds-checkbox__label .slds-checkbox_faux::after {
+  border-block-end: var(--slds-g-sizing-border-2) solid
+    var(
+      --_slds-c-checkboxgroup-mark-color-foreground,
+      var(--slds-s-mark-color-foreground-checked, var(--slds-g-color-border-accent-1))
+    );
+  border-inline-start: var(--slds-g-sizing-border-2) solid
+    var(
+      --_slds-c-checkboxgroup-mark-color-foreground,
+      var(--slds-s-mark-color-foreground-checked, var(--slds-g-color-border-accent-1))
+    );
+}
+
+:host([data-render-mode="shadow"]) .slds-checkbox:dir(rtl) [type='checkbox']:checked + .slds-checkbox_faux::after,:host([data-render-mode="shadow"]) 
+.slds-checkbox:dir(rtl) [type='checkbox']:checked ~ .slds-checkbox_faux::after,:host([data-render-mode="shadow"]) 
+.slds-checkbox:dir(rtl) [type='checkbox']:checked + .slds-checkbox__label .slds-checkbox_faux::after {
   border-inline-start: 0;
-  border-inline-end: var(--slds-g-sizing-border-2) solid var(--_slds-c-checkboxgroup-mark-color-foreground, var(--slds-s-mark-color-foreground-checked, var(--slds-g-color-border-accent-1)));
-}
-
-:host([data-render-mode="shadow"]) .slds-checkbox [type='checkbox']:focus+.slds-checkbox_faux,:host([data-render-mode="shadow"]) 
-.slds-checkbox [type='checkbox']:focus~.slds-checkbox_faux,:host([data-render-mode="shadow"]) 
-.slds-checkbox [type='checkbox']:focus+.slds-checkbox__label .slds-checkbox_faux {
-  --_slds-c-checkboxgroup-color-border: var(--_slds-c-checkboxgroup-color-border-focus,
-      var(--slds-s-input-color-border-focus, var(--slds-g-color-border-accent-1)));
-  --_slds-c-checkboxgroup-shadow: var(--_slds-c-checkboxgroup-shadow-focus,
-      var(--slds-s-mark-shadow-focus, 0 0 3px var(--slds-g-color-accent-2)));
-}
-
-:host([data-render-mode="shadow"]) .slds-checkbox [type='checkbox']:checked>.slds-checkbox_faux,:host([data-render-mode="shadow"]) 
-.slds-checkbox [type='checkbox']:checked~.slds-checkbox_faux,:host([data-render-mode="shadow"]) 
-.slds-checkbox [type='checkbox']:checked+.slds-checkbox__label .slds-checkbox_faux {
-  --_slds-c-checkboxgroup-color-border: var(--_slds-c-checkboxgroup-color-border-checked,
-      var(--slds-s-input-color-border-checked));
-}
-
-:host([data-render-mode="shadow"]) .slds-checkbox [type='checkbox']:focus:checked>.slds-checkbox_faux,:host([data-render-mode="shadow"]) 
-.slds-checkbox [type='checkbox']:focus:checked~.slds-checkbox_faux,:host([data-render-mode="shadow"]) 
-.slds-checkbox [type='checkbox']:focus:checked+.slds-checkbox__label .slds-checkbox_faux {
-  --_slds-c-checkboxgroup-color-border: var(--_slds-c-checkboxgroup-color-border-focus,
-      var(--slds-s-input-color-border-focus, var(--slds-g-color-border-accent-1)));
+  border-inline-end: var(--slds-g-sizing-border-2) solid
+    var(
+      --_slds-c-checkboxgroup-mark-color-foreground,
+      var(--slds-s-mark-color-foreground-checked, var(--slds-g-color-border-accent-1))
+    );
+}
+
+:host([data-render-mode="shadow"]) .slds-checkbox [type='checkbox']:focus + .slds-checkbox_faux,:host([data-render-mode="shadow"]) 
+.slds-checkbox [type='checkbox']:focus ~ .slds-checkbox_faux,:host([data-render-mode="shadow"]) 
+.slds-checkbox [type='checkbox']:focus + .slds-checkbox__label .slds-checkbox_faux {
+  --_slds-c-checkboxgroup-color-border: var(
+    --_slds-c-checkboxgroup-color-border-focus,
+    var(--slds-s-input-color-border-focus, var(--slds-g-color-border-accent-1))
+  );
+  --_slds-c-checkboxgroup-shadow: var(
+    --_slds-c-checkboxgroup-shadow-focus,
+    var(--slds-s-mark-shadow-focus, 0 0 3px var(--slds-g-color-accent-2))
+  );
+}
+
+:host([data-render-mode="shadow"]) .slds-checkbox [type='checkbox']:checked > .slds-checkbox_faux,:host([data-render-mode="shadow"]) 
+.slds-checkbox [type='checkbox']:checked ~ .slds-checkbox_faux,:host([data-render-mode="shadow"]) 
+.slds-checkbox [type='checkbox']:checked + .slds-checkbox__label .slds-checkbox_faux {
+  --_slds-c-checkboxgroup-color-border: var(
+    --_slds-c-checkboxgroup-color-border-checked,
+    var(--slds-s-input-color-border-checked)
+  );
+}
+
+:host([data-render-mode="shadow"]) .slds-checkbox [type='checkbox']:focus:checked > .slds-checkbox_faux,:host([data-render-mode="shadow"]) 
+.slds-checkbox [type='checkbox']:focus:checked ~ .slds-checkbox_faux,:host([data-render-mode="shadow"]) 
+.slds-checkbox [type='checkbox']:focus:checked + .slds-checkbox__label .slds-checkbox_faux {
+  --_slds-c-checkboxgroup-color-border: var(
+    --_slds-c-checkboxgroup-color-border-focus,
+    var(--slds-s-input-color-border-focus, var(--slds-g-color-border-accent-1))
+  );
   --_slds-c-checkboxgroup-shadow: var(--_slds-c-checkboxgroup-shadow-focus, var(--slds-s-mark-shadow-focus));
 }
 
-:host([data-render-mode="shadow"]) .slds-checkbox [type='checkbox'][disabled]~.slds-checkbox_faux,:host([data-render-mode="shadow"]) 
-.slds-checkbox [type='checkbox'][disabled]+.slds-checkbox__label .slds-checkbox_faux,:host([data-render-mode="shadow"]) 
-.slds-checkbox [type='checkbox'][disabled]:checked~.slds-checkbox_faux,:host([data-render-mode="shadow"]) 
-.slds-checkbox [type='checkbox'][disabled]:checked+.slds-checkbox__label .slds-checkbox_faux {
+:host([data-render-mode="shadow"]) .slds-checkbox [type='checkbox'][disabled] ~ .slds-checkbox_faux,:host([data-render-mode="shadow"]) 
+.slds-checkbox [type='checkbox'][disabled] + .slds-checkbox__label .slds-checkbox_faux,:host([data-render-mode="shadow"]) 
+.slds-checkbox [type='checkbox'][disabled]:checked ~ .slds-checkbox_faux,:host([data-render-mode="shadow"]) 
+.slds-checkbox [type='checkbox'][disabled]:checked + .slds-checkbox__label .slds-checkbox_faux {
   border-color: var(--slds-g-color-border-disabled-1);
   background-color: var(--slds-s-mark-color-background, var(--slds-g-color-disabled-container-2));
 }
 
-:host([data-render-mode="shadow"]) .slds-checkbox [type='checkbox'][disabled]+.slds-checkbox_faux::after,:host([data-render-mode="shadow"]) 
-.slds-checkbox [type='checkbox'][disabled]~.slds-checkbox_faux::after,:host([data-render-mode="shadow"]) 
-.slds-checkbox [type='checkbox'][disabled]+.slds-checkbox__label .slds-checkbox_faux::after {
+:host([data-render-mode="shadow"]) .slds-checkbox [type='checkbox'][disabled] + .slds-checkbox_faux::after,:host([data-render-mode="shadow"]) 
+.slds-checkbox [type='checkbox'][disabled] ~ .slds-checkbox_faux::after,:host([data-render-mode="shadow"]) 
+.slds-checkbox [type='checkbox'][disabled] + .slds-checkbox__label .slds-checkbox_faux::after {
   border-color: var(--slds-g-color-on-disabled-2);
 }
 
-:host([data-render-mode="shadow"].slds-has-error) .slds-checkbox [type='checkbox']+.slds-checkbox_faux,:host([data-render-mode="shadow"].slds-has-error) .slds-checkbox [type='checkbox']~.slds-checkbox_faux,:host([data-render-mode="shadow"].slds-has-error) .slds-checkbox [type='checkbox']+.slds-checkbox__label .slds-checkbox_faux {
+:host([data-render-mode="shadow"].slds-has-error) .slds-checkbox [type='checkbox'] + .slds-checkbox_faux,:host([data-render-mode="shadow"].slds-has-error) .slds-checkbox [type='checkbox'] ~ .slds-checkbox_faux,:host([data-render-mode="shadow"].slds-has-error) .slds-checkbox [type='checkbox'] + .slds-checkbox__label .slds-checkbox_faux {
   border-color: var(--slds-g-color-border-error-1);
   border-width: var(--slds-g-sizing-border-2);
 }
 
-:host([data-render-mode="shadow"].slds-has-error) .slds-checkbox [type='checkbox']:checked+.slds-checkbox_faux,:host([data-render-mode="shadow"].slds-has-error) .slds-checkbox [type='checkbox']:checked~.slds-checkbox_faux,:host([data-render-mode="shadow"].slds-has-error) .slds-checkbox [type='checkbox']:checked+.slds-checkbox__label .slds-checkbox_faux {
+:host([data-render-mode="shadow"].slds-has-error) .slds-checkbox [type='checkbox']:checked + .slds-checkbox_faux,:host([data-render-mode="shadow"].slds-has-error) .slds-checkbox [type='checkbox']:checked ~ .slds-checkbox_faux,:host([data-render-mode="shadow"].slds-has-error) .slds-checkbox [type='checkbox']:checked + .slds-checkbox__label .slds-checkbox_faux {
   border-color: var(--slds-g-color-border-error-1);
   background-color: var(--slds-s-mark-color-background-invalid);
   --_slds-c-checkboxgroup-shadow: var(--_slds-c-checkboxgroup-shadow, var(--slds-s-mark-shadow-checked));
 }
 
-:host([data-render-mode="shadow"].slds-has-error) .slds-checkbox [type='checkbox']:focus+.slds-checkbox_faux,:host([data-render-mode="shadow"].slds-has-error) .slds-checkbox [type='checkbox']:focus~.slds-checkbox_faux,:host([data-render-mode="shadow"].slds-has-error) .slds-checkbox [type='checkbox']:focus+.slds-checkbox__label .slds-checkbox_faux {
+:host([data-render-mode="shadow"].slds-has-error) .slds-checkbox [type='checkbox']:focus + .slds-checkbox_faux,:host([data-render-mode="shadow"].slds-has-error) .slds-checkbox [type='checkbox']:focus ~ .slds-checkbox_faux,:host([data-render-mode="shadow"].slds-has-error) .slds-checkbox [type='checkbox']:focus + .slds-checkbox__label .slds-checkbox_faux {
   border-color: var(--slds-g-color-border-error-1);
   border-width: var(--slds-g-sizing-border-2);
   --_slds-c-checkboxgroup-shadow: var(--_slds-c-checkboxgroup-shadow-focus, var(--slds-s-mark-shadow-focus));
 }
 
-:host([data-render-mode="shadow"].slds-has-error) .slds-checkbox [type='checkbox']:focus:checked+.slds-checkbox_faux,:host([data-render-mode="shadow"].slds-has-error) .slds-checkbox [type='checkbox']:focus:checked~.slds-checkbox_faux,:host([data-render-mode="shadow"].slds-has-error) .slds-checkbox [type='checkbox']:focus:checked+.slds-checkbox__label .slds-checkbox_faux {
+:host([data-render-mode="shadow"].slds-has-error) .slds-checkbox [type='checkbox']:focus:checked + .slds-checkbox_faux,:host([data-render-mode="shadow"].slds-has-error) .slds-checkbox [type='checkbox']:focus:checked ~ .slds-checkbox_faux,:host([data-render-mode="shadow"].slds-has-error)
+  .slds-checkbox
+  [type='checkbox']:focus:checked
+  + .slds-checkbox__label
+  .slds-checkbox_faux {
   border-color: var(--slds-g-color-border-error-1);
   border-width: var(--slds-g-sizing-border-2);
   --_slds-c-checkboxgroup-shadow: var(--_slds-c-checkboxgroup-shadow-focus, var(--slds-s-mark-shadow-focus));
 }
 
-:host([data-render-mode="shadow"].slds-has-error) .slds-checkbox [type='checkbox']:checked+.slds-checkbox_faux::after,:host([data-render-mode="shadow"].slds-has-error) .slds-checkbox [type='checkbox']:checked~.slds-checkbox_faux::after,:host([data-render-mode="shadow"].slds-has-error) .slds-checkbox [type='checkbox']:checked+.slds-checkbox__label .slds-checkbox_faux::after {
+:host([data-render-mode="shadow"].slds-has-error) .slds-checkbox [type='checkbox']:checked + .slds-checkbox_faux::after,:host([data-render-mode="shadow"].slds-has-error) .slds-checkbox [type='checkbox']:checked ~ .slds-checkbox_faux::after,:host([data-render-mode="shadow"].slds-has-error)
+  .slds-checkbox
+  [type='checkbox']:checked
+  + .slds-checkbox__label
+  .slds-checkbox_faux::after {
   border-color: var(--slds-s-mark-color-foreground-invalid, var(--slds-g-color-border-error-1));
 }
 
@@ -194,5 +228,5 @@
 /* FORM ELEMENT: INLINE */
 
 :host([data-render-mode="shadow"][variant='label-inline']) .slds-checkbox:not(.slds-checkbox_stacked) .slds-form-element__label {
-  float: none
+  float: none;
 }

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

@@ -1,5 +1,4 @@
 
-
 /**
  * sldsFormElementUtils.css and form-element.css have many similarities
  * however, they are used for very different use cases, and this is why
@@ -255,7 +254,9 @@
   display: block;
 }
 
-:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-label),:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-editor-container) {/* for rich text via lightning-quill */
+:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-label),:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-editor-container) {
+  /* for rich text via lightning-quill */
+
   /* @W-14518344 The following line still exists in SLDS-internal
       but it was removed here because it was causing the input
       component to not display it's bottom border
@@ -294,8 +295,7 @@
 /* Force inner child input to not have padding and margin.
 The parent (ex. lightning-input-field) will provide it instead */
 
-:host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element,:host([data-render-mode="shadow"][variant='label-inline']) [variant='label-inline']
-{
+:host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element,:host([data-render-mode="shadow"][variant='label-inline']) [variant='label-inline'] {
   padding: 0;
   margin-block-end: 0;
 }