lightning-base-components 1.18.7-alpha → 1.18.8-alpha

package/src/lightning/radioGroup/input-radio-group.slds.css

@@ -266,7 +266,7 @@
 
   /* Apply assistive text utility to input */
 
-  :host([data-render-mode="shadow"]) [part~='radio'] {
+  :host([data-render-mode="shadow"]) [part='radio'] {
     width: 1px;
     height: 1px;
     border: 0;
@@ -277,13 +277,13 @@
     position: absolute;
   }
 
-  :host([data-render-mode="shadow"]) [part~='required'] {
+  :host([data-render-mode="shadow"]) [part='required'] {
     border: 0;
     color: var(--sds-g-color-error-base-50, #ea001e);
     margin: 0 0.125rem;
   }
 
-  :host([data-render-mode="shadow"]) [part~='required'][title] {
+  :host([data-render-mode="shadow"]) [part='required'][title] {
     text-decoration: none;
   }
 
@@ -296,8 +296,8 @@
    *
    */
 
-  :host([data-render-mode="shadow"]) [part~='radio'][checked] ~ [part~='input-radio'],:host([data-render-mode="shadow"]) 
-  [part~='radio']:checked ~ [part~='input-radio'] {
+  :host([data-render-mode="shadow"]) [part='radio'][checked] ~ [part='input-radio'],:host([data-render-mode="shadow"]) 
+  [part='radio']:checked ~ [part='input-radio'] {
     --sds-c-inputradio-indicator-color-background: var(
       --slds-c-inputradiogroup-indicator-color-background-checked,
       var(--sds-g-color-neutral-base-100, #ffffff)
@@ -310,7 +310,7 @@
 
   /* Hover States */
 
-  :host([data-render-mode="shadow"]) [part~='radio'] ~ [part~='input-radio']:hover {
+  :host([data-render-mode="shadow"]) [part='radio'] ~ [part='input-radio']:hover {
     --sds-c-inputradio-indicator-color-background: var(
       --slds-c-inputradiogroup-indicator-color-background-hover,
       var(--sds-g-color-neutral-base-100, #ffffff)
@@ -321,8 +321,8 @@
     );
   }
 
-  :host([data-render-mode="shadow"]) [part~='radio'][checked] ~ [part~='input-radio']:hover,:host([data-render-mode="shadow"]) 
-  [part~='radio']:checked ~ [part~='input-radio']:hover {
+  :host([data-render-mode="shadow"]) [part='radio'][checked] ~ [part='input-radio']:hover,:host([data-render-mode="shadow"]) 
+  [part='radio']:checked ~ [part='input-radio']:hover {
     --sds-c-inputradio-indicator-color-background: var(
       --slds-c-inputradiogroup-indicator-color-background-checked-hover,
       var(--sds-g-color-neutral-base-100, #ffffff)
@@ -339,7 +339,7 @@
 
   /* Focus States */
 
-  :host([data-render-mode="shadow"]) [part~='radio']:focus ~ [part~='input-radio'] {
+  :host([data-render-mode="shadow"]) [part='radio']:focus ~ [part='input-radio'] {
     --sds-c-inputradio-indicator-shadow: var(
       --slds-c-inputradiogroup-indicator-shadow-focus,
       var(--sds-s-input-shadow-focus, 0 0 3px var(--sds-g-color-palette-blue-50, #0176d3))
@@ -354,8 +354,8 @@
     );
   }
 
-  :host([data-render-mode="shadow"]) [part~='radio'][checked]:focus ~ [part~='input-radio'],:host([data-render-mode="shadow"]) 
-  [part~='radio']:checked:focus ~ [part~='input-radio'] {
+  :host([data-render-mode="shadow"]) [part='radio'][checked]:focus ~ [part='input-radio'],:host([data-render-mode="shadow"]) 
+  [part='radio']:checked:focus ~ [part='input-radio'] {
     --sds-c-inputradio-indicator-color-background: var(
       --slds-c-inputradiogroup-indicator-color-background-checked-focus,
       var(--sds-g-color-neutral-base-100, #ffffff)
@@ -372,7 +372,7 @@
 
   /* Disabled State */
 
-  :host([data-render-mode="shadow"][disabled]) [part~='radio'] ~ [part~='input-radio'] {
+  :host([data-render-mode="shadow"][disabled]) [part='radio'] ~ [part='input-radio'] {
     --sds-c-inputradio-indicator-color-background: var(
       --slds-c-inputradiogroup-indicator-color-background-disabled,
       var(--sds-g-color-neutral-base-95, #f3f3f3)
@@ -396,7 +396,7 @@
    *
    */
 
-  :host([data-render-mode="shadow"][aria-invalid='true']) [part~='radio'] ~ [part~='input-radio'],:host([data-render-mode="shadow"][invalid]) [part~='radio'] ~ [part~='input-radio'] {
+  :host([data-render-mode="shadow"][aria-invalid='true']) [part='radio'] ~ [part='input-radio'],:host([data-render-mode="shadow"][invalid]) [part='radio'] ~ [part='input-radio'] {
     --sds-c-inputradio-indicator-color-background: var(
       --slds-c-inputradiogroup-indicator-color-background-invalid,
       var(--sds-g-color-neutral-base-100, #ffffff)
@@ -417,7 +417,7 @@
 
   /* Disabled & Invalid */
 
-  :host([data-render-mode="shadow"][disabled][aria-invalid='true']) [part~='radio'] ~ [part~='input-radio'],:host([data-render-mode="shadow"][disabled][invalid]) [part~='radio'] ~ [part~='input-radio'] {
+  :host([data-render-mode="shadow"][disabled][aria-invalid='true']) [part='radio'] ~ [part='input-radio'],:host([data-render-mode="shadow"][disabled][invalid]) [part='radio'] ~ [part='input-radio'] {
     --sds-c-inputradio-indicator-color-background: var(
       --slds-c-inputradiogroup-indicator-color-background-disabled,
       var(--sds-g-color-neutral-base-95, #f3f3f3)
@@ -426,8 +426,8 @@
 
   /* Mark Styling */
 
-  :host([data-render-mode="shadow"]) [part~='radio'][checked] ~ [part~='input-radio'] [part~='indicator']::after,:host([data-render-mode="shadow"]) 
-  [part~='radio']:checked ~ [part~='input-radio'] [part~='indicator']::after {
+  :host([data-render-mode="shadow"]) [part='radio'][checked] ~ [part='input-radio'] [part='indicator']::after,:host([data-render-mode="shadow"]) 
+  [part='radio']:checked ~ [part='input-radio'] [part='indicator']::after {
     width: var(--slds-c-inputradiogroup-mark-sizing, 8px);
     height: var(--slds-c-inputradiogroup-mark-sizing, 8px);
     border-radius: var(--sds-g-radius-border-circle, 100%);
@@ -453,7 +453,7 @@
   * (Synthetic shadow shows larger margin without this.)
   */
 
-:host([data-render-mode="shadow"]) [part~='input-radio-group'] [part~='indicator'] {
+:host([data-render-mode="shadow"]) [part='input-radio-group'] [part='indicator'] {
   margin-inline-end: 0;
 }
 
@@ -559,29 +559,29 @@
 
 /* Checked State with Interactions */
 
-:host([data-render-mode="shadow"]) .slds-radio_button [part~='radio']:checked + .slds-radio_faux,:host([data-render-mode="shadow"]) 
-.slds-radio_button [part~='radio']:checked ~ .slds-radio_faux,:host([data-render-mode="shadow"]) 
-.slds-radio_button [part~='radio']:checked + .slds-radio_button__label {
+:host([data-render-mode="shadow"]) .slds-radio_button [part='radio']:checked + .slds-radio_faux,:host([data-render-mode="shadow"]) 
+.slds-radio_button [part='radio']:checked ~ .slds-radio_faux,:host([data-render-mode="shadow"]) 
+.slds-radio_button [part='radio']:checked + .slds-radio_button__label {
   background-color: var(--sds-g-color-brand-base-50, #0176d3);
   color: var(--sds-g-color-brand-base-100, #ffffff);
 }
 
 /* Need something stronger when the input is checked */
 
-:host([data-render-mode="shadow"]) .slds-radio_button [part~='radio']:checked + .slds-radio_faux:hover,:host([data-render-mode="shadow"]) 
-.slds-radio_button [part~='radio']:checked + .slds-radio_faux:focus,:host([data-render-mode="shadow"]) 
-.slds-radio_button [part~='radio']:checked ~ .slds-radio_faux:hover,:host([data-render-mode="shadow"]) 
-.slds-radio_button [part~='radio']:checked ~ .slds-radio_faux:focus,:host([data-render-mode="shadow"]) 
-.slds-radio_button [part~='radio']:checked + .slds-radio_button__label:hover,:host([data-render-mode="shadow"]) 
-.slds-radio_button [part~='radio']:checked + .slds-radio_button__label:focus {
+:host([data-render-mode="shadow"]) .slds-radio_button [part='radio']:checked + .slds-radio_faux:hover,:host([data-render-mode="shadow"]) 
+.slds-radio_button [part='radio']:checked + .slds-radio_faux:focus,:host([data-render-mode="shadow"]) 
+.slds-radio_button [part='radio']:checked ~ .slds-radio_faux:hover,:host([data-render-mode="shadow"]) 
+.slds-radio_button [part='radio']:checked ~ .slds-radio_faux:focus,:host([data-render-mode="shadow"]) 
+.slds-radio_button [part='radio']:checked + .slds-radio_button__label:hover,:host([data-render-mode="shadow"]) 
+.slds-radio_button [part='radio']:checked + .slds-radio_button__label:focus {
   background-color: var(--sds-g-color-brand-base-30, #014486);
 }
 
 /* Focus State */
 
-:host([data-render-mode="shadow"]) .slds-radio_button [part~='radio']:focus + .slds-radio_faux,:host([data-render-mode="shadow"]) 
-.slds-radio_button [part~='radio']:focus ~ .slds-radio_faux,:host([data-render-mode="shadow"]) 
-.slds-radio_button [part~='radio']:focus + .slds-radio_button__label {
+:host([data-render-mode="shadow"]) .slds-radio_button [part='radio']:focus + .slds-radio_faux,:host([data-render-mode="shadow"]) 
+.slds-radio_button [part='radio']:focus ~ .slds-radio_faux,:host([data-render-mode="shadow"]) 
+.slds-radio_button [part='radio']:focus + .slds-radio_button__label {
   outline: 0;
   box-shadow: 0 0 3px var(--sds-g-color-brand-base-50, #0176d3);
   z-index: 1;
@@ -589,35 +589,35 @@
 
 /* Disabled State */
 
-:host([data-render-mode="shadow"]) .slds-radio_button [part~='radio'][disabled] + .slds-radio_faux,:host([data-render-mode="shadow"]) 
-.slds-radio_button [part~='radio'][disabled] ~ .slds-radio_faux,:host([data-render-mode="shadow"]) 
-.slds-radio_button [part~='radio'][disabled] + .slds-radio_button__label {
+:host([data-render-mode="shadow"]) .slds-radio_button [part='radio'][disabled] + .slds-radio_faux,:host([data-render-mode="shadow"]) 
+.slds-radio_button [part='radio'][disabled] ~ .slds-radio_faux,:host([data-render-mode="shadow"]) 
+.slds-radio_button [part='radio'][disabled] + .slds-radio_button__label {
   background-color: var(--sds-g-color-neutral-base-100, #ffffff);
   color: var(--sds-g-color-neutral-base-80, #c9c9c9);
 }
 
-:host([data-render-mode="shadow"]) .slds-radio_button [part~='radio'][disabled] + .slds-radio_faux:hover,:host([data-render-mode="shadow"]) 
-.slds-radio_button [part~='radio'][disabled] + .slds-radio_faux:focus,:host([data-render-mode="shadow"]) 
-.slds-radio_button [part~='radio'][disabled] ~ .slds-radio_faux:hover,:host([data-render-mode="shadow"]) 
-.slds-radio_button [part~='radio'][disabled] ~ .slds-radio_faux:focus,:host([data-render-mode="shadow"]) 
-.slds-radio_button [part~='radio'][disabled] + .slds-radio_button__label:hover,:host([data-render-mode="shadow"]) 
-.slds-radio_button [part~='radio'][disabled] + .slds-radio_button__label:focus {
+:host([data-render-mode="shadow"]) .slds-radio_button [part='radio'][disabled] + .slds-radio_faux:hover,:host([data-render-mode="shadow"]) 
+.slds-radio_button [part='radio'][disabled] + .slds-radio_faux:focus,:host([data-render-mode="shadow"]) 
+.slds-radio_button [part='radio'][disabled] ~ .slds-radio_faux:hover,:host([data-render-mode="shadow"]) 
+.slds-radio_button [part='radio'][disabled] ~ .slds-radio_faux:focus,:host([data-render-mode="shadow"]) 
+.slds-radio_button [part='radio'][disabled] + .slds-radio_button__label:hover,:host([data-render-mode="shadow"]) 
+.slds-radio_button [part='radio'][disabled] + .slds-radio_button__label:focus {
   cursor: default;
 }
 
-:host([data-render-mode="shadow"]) .slds-radio_button [part~='radio'][disabled][checked] + .slds-radio_faux,:host([data-render-mode="shadow"]) 
-.slds-radio_button [part~='radio'][disabled][checked] ~ .slds-radio_faux,:host([data-render-mode="shadow"]) 
-.slds-radio_button [part~='radio'][disabled][checked] + .slds-radio_button__label {
+:host([data-render-mode="shadow"]) .slds-radio_button [part='radio'][disabled][checked] + .slds-radio_faux,:host([data-render-mode="shadow"]) 
+.slds-radio_button [part='radio'][disabled][checked] ~ .slds-radio_faux,:host([data-render-mode="shadow"]) 
+.slds-radio_button [part='radio'][disabled][checked] + .slds-radio_button__label {
   background-color: #c9c7c5;
   color: var(--sds-g-color-neutral-base-100, #ffffff);
 }
 
-:host([data-render-mode="shadow"]) .slds-radio_button [part~='radio'][disabled][checked] + .slds-radio_faux:hover,:host([data-render-mode="shadow"]) 
-.slds-radio_button [part~='radio'][disabled][checked] + .slds-radio_faux:focus,:host([data-render-mode="shadow"]) 
-.slds-radio_button [part~='radio'][disabled][checked] ~ .slds-radio_faux:hover,:host([data-render-mode="shadow"]) 
-.slds-radio_button [part~='radio'][disabled][checked] ~ .slds-radio_faux:focus,:host([data-render-mode="shadow"]) 
-.slds-radio_button [part~='radio'][disabled][checked] + .slds-radio_button__label:hover,:host([data-render-mode="shadow"]) 
-.slds-radio_button [part~='radio'][disabled][checked] + .slds-radio_button__label:focus {
+:host([data-render-mode="shadow"]) .slds-radio_button [part='radio'][disabled][checked] + .slds-radio_faux:hover,:host([data-render-mode="shadow"]) 
+.slds-radio_button [part='radio'][disabled][checked] + .slds-radio_faux:focus,:host([data-render-mode="shadow"]) 
+.slds-radio_button [part='radio'][disabled][checked] ~ .slds-radio_faux:hover,:host([data-render-mode="shadow"]) 
+.slds-radio_button [part='radio'][disabled][checked] ~ .slds-radio_faux:focus,:host([data-render-mode="shadow"]) 
+.slds-radio_button [part='radio'][disabled][checked] + .slds-radio_button__label:hover,:host([data-render-mode="shadow"]) 
+.slds-radio_button [part='radio'][disabled][checked] + .slds-radio_button__label:focus {
   cursor: default;
 }
 
@@ -653,7 +653,7 @@
   * https://www.lightningdesignsystem.com/components/form-element/#Horizontal-Alignment
   */
 
-:host([data-render-mode="shadow"][variant~='label-inline']) [part~='input-radio-group'] {
+:host([data-render-mode="shadow"][variant~='label-inline']) [part='input-radio-group'] {
   display: block;
 }
 
@@ -661,7 +661,7 @@
   /**
     * Handle label - default behavior
     */
-  :host([data-render-mode="shadow"][variant~='label-inline']) [part~='legend'] {
+  :host([data-render-mode="shadow"][variant~='label-inline']) [part='legend'] {
     float: left;
     max-width: calc(33% - 1.25rem); /* Removing icon width for when the help-text icon is present */
     flex-basis: calc(33% - 1.25rem); /* Some form element controls are set to display:flex */
@@ -674,7 +674,7 @@
   /**
     * Handle control - default behavior
     */
-  :host([data-render-mode="shadow"][variant~='label-inline']) [part~='options'] {
+  :host([data-render-mode="shadow"][variant~='label-inline']) [part='options'] {
     padding-inline-start: 33%;
     clear: none; /* Reset clear: left when switching to horizontal form layout */
   }
@@ -682,7 +682,7 @@
   /**
     * Since the HTML differs for radio groups, adjust the display behavior
     */
-  :host([data-render-mode="shadow"][variant~='label-inline']) ~ [part~='input-radio'] [part~='indicator'] {
+  :host([data-render-mode="shadow"][variant~='label-inline']) ~ [part='input-radio'] [part='indicator'] {
     position: relative;
     float: none;
     max-width: 100%;
@@ -721,7 +721,7 @@
   * https://www.lightningdesignsystem.com/components/form-element/#Stacked-Alignment
   */
 
-:host([data-render-mode="shadow"][variant~='label-stacked']) [part~='input-radio-group'] {
+:host([data-render-mode="shadow"][variant~='label-stacked']) [part='input-radio-group'] {
   display: block;
 }
 
@@ -733,12 +733,12 @@
   display: block; /* Override display: inline-block found on checkbox/radio */
 }
 
-:host([data-render-mode="shadow"][variant~='label-stacked']) [part~='legend'],:host([data-render-mode="shadow"][variant~='label-stacked']) [part~='options'] {
+:host([data-render-mode="shadow"][variant~='label-stacked']) [part='legend'],:host([data-render-mode="shadow"][variant~='label-stacked']) [part='options'] {
   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']) [part~='options'] {
+:host([data-render-mode="shadow"][variant~='label-stacked']) [part='options'] {
   width: 100%;
   flex-basis: 100%;
   clear: left;
@@ -751,8 +751,8 @@
  * https://github.com/salesforce-ux/product-subsystem/issues/44#issuecomment-1139150562
  */
 
-:host([data-render-mode="shadow"]) [part~='input-radio-group'] *,:host([data-render-mode="shadow"]) 
-[part~='input-radio-group'] ::before,:host([data-render-mode="shadow"]) 
-[part~='input-radio-group'] ::after {
+:host([data-render-mode="shadow"]) [part='input-radio-group'] *,:host([data-render-mode="shadow"]) 
+[part='input-radio-group'] ::before,:host([data-render-mode="shadow"]) 
+[part='input-radio-group'] ::after {
   box-sizing: border-box;
 }

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

@@ -278,4 +278,12 @@
     :host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
       align-items: flex-end;
     }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: HIDDEN */
+
+    :host([data-render-mode="shadow"][variant~='label-hidden']) .slds-form-element__label {
+      display: none
+  }
 }

package/src/lightning/select/select.js

@@ -25,6 +25,7 @@ const i18n = {
 
 export default class LightningSelect extends LightningElement {
     static delegatesFocus = true;
+    static validationOptOut = ['class'];
 
     /**
      * The text label for the component.

package/src/lightning/select/select.slds.css

@@ -2,7 +2,7 @@
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 @supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"]) [part~='help-text'] {
+  :host([data-render-mode="shadow"]) [part='help-text'] {
     --slds-c-buttonicon-color-background: var(--slds-c-helptext-color-background);
     --slds-c-buttonicon-color-background-hover: var(--slds-c-helptext-color-background-hover);
     --slds-c-buttonicon-color-background-focus: var(--slds-c-helptext-color-background-focus);
@@ -308,6 +308,14 @@
     :host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
       align-items: flex-end;
     }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: HIDDEN */
+
+    :host([data-render-mode="shadow"][variant~='label-hidden']) .slds-form-element__label {
+      display: none
+  }
 }
 
 /* Copyright (c) 2015-present, Salesforce, Inc. All rights reserved
@@ -315,7 +323,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 @supports (--styling-hooks: '') {
     /* SELECT */
-    :host([data-render-mode="shadow"]) [part~='select'] {
+    :host([data-render-mode="shadow"]) [part='select'] {
       height: calc(var(--slds-c-select-input-sizing-height, 1.875rem) + (var(--sds-g-sizing-border-1, 1px) * 2));
       width: 100%;
       border: var(--sds-g-sizing-border-1, 1px) solid var(--slds-c-select-color-border, var(--sds-g-color-neutral-base-80, #c9c9c9));
@@ -327,12 +335,12 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       transition: border 0.1s linear, background-color 0.1s linear;
     }
 
-    :host([data-render-mode="shadow"]) [part~='select'][required] {
+    :host([data-render-mode="shadow"]) [part='select'][required] {
       box-shadow: none; /* @legacy: This is ported over from SLDS but not clear why this design decision is made.  */
     }
 
-    :host([data-render-mode="shadow"]) [part~='select']:focus,:host([data-render-mode="shadow"]) 
-    [part~='select']:active {
+    :host([data-render-mode="shadow"]) [part='select']:focus,:host([data-render-mode="shadow"]) 
+    [part='select']:active {
       outline: 0;
       border-color: var(--slds-c-select-color-border-focus, var(--sds-g-color-brand-base-60, #1b96ff));
       background-color: var(--slds-c-select-color-background-focus, var(--sds-g-color-neutral-base-100, #ffffff));
@@ -340,7 +348,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       box-shadow: var(--slds-c-select-shadow-focus, 0 0 3px var(--sds-g-color-brand-base-50, #0176d3));
     }
 
-    :host([data-render-mode="shadow"]) [part~='select'][disabled] {
+    :host([data-render-mode="shadow"]) [part='select'][disabled] {
       background-color: var(--sds-g-color-neutral-base-95, #f3f3f3);
       border-color: var(--sds-g-color-neutral-base-80, #c9c9c9);
       color: var(--sds-g-color-neutral-base-50, #747474);
@@ -349,19 +357,19 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       opacity: 1;
     }
 
-    :host([data-render-mode="shadow"]) [part~='select'][disabled]:focus,:host([data-render-mode="shadow"])  
-    [part~='select'][disabled]:active {
+    :host([data-render-mode="shadow"]) [part='select'][disabled]:focus,:host([data-render-mode="shadow"]) 
+    [part='select'][disabled]:active {
       box-shadow: none;
     }
 
-    :host([data-render-mode="shadow"]) [part~='select'][size],:host([data-render-mode="shadow"])  
-    [part~='select'][multiple] {
+    :host([data-render-mode="shadow"]) [part='select'][size],:host([data-render-mode="shadow"]) 
+    [part='select'][multiple] {
       min-height: calc(var(--slds-c-select-input-sizing-height) + (var(--sds-g-sizing-border-1, 1px) * 2));
       height: inherit;
     }
 
-    :host([data-render-mode="shadow"]) [part~='select'][size] option,:host([data-render-mode="shadow"])  
-    [part~='select'][multiple] option {
+    :host([data-render-mode="shadow"]) [part='select'][size] option,:host([data-render-mode="shadow"]) 
+    [part='select'][multiple] option {
       padding: var(--sds-g-spacing-2, 0.5rem);
     }
 
@@ -370,7 +378,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       color: var(--slds-c-select-container-color);
     }
 
-    :host([data-render-mode="shadow"]) .slds-select_container [part~="select"] {
+    :host([data-render-mode="shadow"]) .slds-select_container [part="select"] {
       /* stylelint-disable property-no-vendor-prefix */
       -moz-appearance: none;
       -webkit-appearance: none;
@@ -378,11 +386,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       padding: 0 var(--sds-g-spacing-5, 1.5rem) 0 var(--sds-g-spacing-2, 0.5rem);
     }
 
-    :host([data-render-mode="shadow"]) .slds-select_container [part~="select"]::-ms-expand {
+    :host([data-render-mode="shadow"]) .slds-select_container [part="select"]::-ms-expand {
       display: none;
     }
 
-    :host([data-render-mode="shadow"]) .slds-select_container::before,:host([data-render-mode="shadow"])  
+    :host([data-render-mode="shadow"]) .slds-select_container::before,:host([data-render-mode="shadow"]) 
     .slds-select_container::after {
       position: absolute;
       content: '';
@@ -399,7 +407,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       border-bottom: 5px solid currentColor;
       top: calc((var(--sds-g-sizing-8, 1.75rem) / 2) - 6px);
     }
- 
+
     :host([data-render-mode="shadow"]) .slds-select_container::after {
       border-top: 5px solid currentColor;
       bottom: calc((var(--sds-g-sizing-8, 1.75rem) / 2) - 6px);
@@ -409,27 +417,27 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       display: none;
     }
 
-    :host([data-render-mode="shadow"][invalid]) [part~="select"] {
+    :host([data-render-mode="shadow"][invalid]) [part="select"] {
       border-color: var(--sds-g-color-error-base-50, #ea001e);
       box-shadow: var(--sds-g-color-error-base-50, #ea001e) 0 0 0 var(--sds-g-sizing-border-1, 1px) inset;
       background-clip: padding-box;
     }
 
-    :host([data-render-mode="shadow"][invalid]) [part~="select"]:focus,:host([data-render-mode="shadow"][invalid]) [part~="select"]:active {
+    :host([data-render-mode="shadow"][invalid]) [part="select"]:focus,:host([data-render-mode="shadow"][invalid]) [part="select"]:active {
       box-shadow: var(--sds-g-color-error-base-50, #ea001e) 0 0 0 var(--sds-g-sizing-border-1, 1px) inset, 0 0 3px var(--sds-g-color-brand-base-50, #0176d3);
     }
 
     /* LABEL */
 
     /* Styling Specifically for select label */
-    :host([data-render-mode="shadow"]) [part~="select-label"] {
+    :host([data-render-mode="shadow"]) [part="select-label"] {
       padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
       color: var(--slds-c-select-label-color, var(--sds-g-color-neutral-base-30, #444444));
       font-size: var(--slds-c-select-label-font-size, var(--sds-g-font-scale-neg-3, 0.75rem));
-  
+
       /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */
       display: inline-flex;
-  
+
       /* TODO: Add global hook once SLDS creates a new spacing hook that equals the value needed here */
       column-gap: 0.125rem;
     }
@@ -447,4 +455,4 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       text-transform: none !important;
       white-space: nowrap !important;
     }
-}
+}

package/src/lightning/sldsCommon/sldsCommon.css

@@ -264,3 +264,24 @@ b,
 strong {
     font-weight: var(--sds-g-font-weight-bold, bold);
 }
+
+/**
+ * Ensure f6 regions for custom components
+ * have correct styling in native shadow
+ */
+
+ [data-f6-region].f6-highlight {
+    position: relative;
+}
+
+[data-f6-region].f6-highlight::after {
+    width: 100%;
+    height: 100%;
+    content: '';
+    outline: rgb(94, 158, 214) 3px solid;
+    outline-offset: -3px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+}

package/src/lightning/spinner/spinner.js

@@ -1,6 +1,6 @@
-import { LightningElement, api } from 'lwc';
+import { api, LightningElement } from 'lwc';
 import { classSet } from 'lightning/utils';
-import { normalizeString as normalize } from 'lightning/utilsPrivate';
+import { normalizeString as normalize, isCSR } from 'lightning/utilsPrivate';
 
 const DEFAULT_SIZE = 'medium';
 const DEFAULT_VARIANT = 'base';
@@ -9,6 +9,8 @@ const DEFAULT_VARIANT = 'base';
  * Displays an animated spinner.
  */
 export default class LightningSpinner extends LightningElement {
+    static validationOptOut = ['class'];
+
     /**
      * The alternative text used to describe the reason for the wait and need for a spinner.
      * @type {string}
@@ -59,8 +61,10 @@ export default class LightningSpinner extends LightningElement {
 
     connectedCallback() {
         this.classList.add('slds-spinner_container');
-        this.template.addEventListener('mousewheel', this.stopScrolling);
-        this.template.addEventListener('touchmove', this.stopScrolling);
+        if (isCSR) {
+            this.template.addEventListener('mousewheel', this.stopScrolling);
+            this.template.addEventListener('touchmove', this.stopScrolling);
+        }
     }
 
     renderedCallback() {