lightning-base-components 1.21.1-alpha → 1.21.2-alpha

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

@@ -1,335 +1,16 @@
-/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
-  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
-
-@supports (--styling-hooks: '') {
-  :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);
-    --slds-c-buttonicon-color-background-active: var(--slds-c-helptext-color-background-active);
-    --slds-c-buttonicon-color-foreground: var(--slds-c-helptext-color-foreground);
-    --slds-c-buttonicon-color-foreground-hover: var(--slds-c-helptext-color-foreground-hover);
-    --slds-c-buttonicon-color-foreground-focus: var(--slds-c-helptext-color-foreground-focus);
-    --slds-c-buttonicon-color-foreground-active: var(--slds-c-helptext-color-foreground-active);
-    --slds-c-buttonicon-color-border: var(--slds-c-helptext-color-border, transparent);
-    --slds-c-buttonicon-color-border-hover: var(--slds-c-helptext-color-border-hover, transparent);
-    --slds-c-buttonicon-color-border-focus: var(--slds-c-helptext-color-border-focus, transparent);
-    --slds-c-buttonicon-color-border-active: var(--slds-c-helptext-color-border-active, transparent);
-    --slds-c-buttonicon-spacing-block: var(--slds-c-helptext-spacing-block, 0);
-    --slds-c-buttonicon-spacing-inline: var(--slds-c-helptext-spacing-inline, 0);
-
-    /**
-     * The extra wrapper div creates a new formatting context which messes up
-     * our consistent height and vertical alignment. We don't want this element
-     * to inherit any styling so we pass through to the contents. This element
-     * is for setting Styling Hooks only.
-     */
-    display: contents;
-  }
-}
-
-/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
-  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
-
-@supports (--styling-hooks: '') {
-    /* TODO: Swap with utility classes */
-    :host([data-render-mode="shadow"]) fieldset {
-      border: 0;
-      margin: 0;
-      padding: 0;
-    }
-
-    /* FORM ELEMENT: BASE */
-    :host([data-render-mode="shadow"]) .slds-form-element {
-        position: relative;
-        min-width: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__label {
-        overflow-wrap: break-word;
-        word-wrap: break-word;
-        hyphens: auto;
-        display: inline-block;
-        color: var(--sds-g-color-neutral-base-30, #444444);
-        font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
-        padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
-        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
-        margin-block-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__label:empty {
-        margin: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__control {
-        clear: left; /* NOTE: Ideally we want left to be inline-start but browser support is not ready for that value. We need to figure out better RTL support */
-        position: relative;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__icon {
-        display: inline-block;
-        position: relative;
-        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
-        vertical-align: top;
-        line-height: var(--sds-g-font-lineheight-1, 1);
-        z-index: 1;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__icon .slds-button_icon {
-        position: relative;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__help,:host([data-render-mode="shadow"]) 
-    .slds-form-element__helper {
-        font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
-        margin-block-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
-        display: block;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element_edit .slds-form-element__static {
-        width: calc(100% - var(--sds-g-sizing-7, 1.5rem));
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element_readonly {
-        flex-basis: 0%;
-        border-bottom: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-90, #e5e5e5);
-        margin-block-end: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__control {
-        padding-block-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
-        padding-block-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__label {
-        margin-block-end: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__legend {
-        font-weight: var(--sds-g-font-weight-7, 700);
-        float: left;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__addon {
-        display: inline-block;
-        margin-block-start: 0;
-        margin-block-end: 0;
-        margin-inline-start: var(--sds-g-spacing-2, 0.5rem);
-        margin-inline-end: var(--sds-g-spacing-2, 0.5rem);
-        align-self: center;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__static {
-        overflow-wrap: break-word;
-        word-wrap: break-word;
-        word-break: break-word;
-        display: inline-block;
-        font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
-        font-weight: var(--sds-g-font-weight-4, 400);
-        color: var(--sds-g-color-neutral-base-10, #181818);
-        width: 100%;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__static.slds-text-longform *:last-child {
-        margin-block-end: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__static:empty {
-        min-height: calc(var(--sds-g-sizing-6, 1.25rem) + 1px);
-        vertical-align: bottom;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__static--edit {
-        width: calc(100% - var(--sds-g-sizing-7, 1.5rem));
-    }
-
-    :host([data-render-mode="shadow"]) .slds-required {
-        color: var(--sds-g-color-error-base-50, #ea001e);
-        margin-block-start: 0;
-        margin-block-end: 0;
-        margin-inline-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
-        margin-inline-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-has-error .slds-form-element__help {
-        color: var(--sds-g-color-error-base-50, #ea001e);
-    }
-
-    :host([data-render-mode="shadow"][invalid]) .slds-form-element__help {
-        color: var(--sds-g-color-error-base-50, #ea001e);
-    }
-
-    /* --------------------------------------- */
-
-    /* FORM ELEMENT: 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) {
-        margin-block-end: var(--sds-g-spacing-2);
-    }
-
-    :host([variant='label-stacked']):not(.slds-is-editing) {
-        padding: 0 var(--sds-g-spacing-1);
-    } */
-
-    /* :host([variant='label-stacked']):not([class*="slds-size"]) {
-          width: 100%;
-          flex-basis: 100%;
-    } */
-
-    :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 {
-        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 {
-        width: 100%;
-        flex-basis: 100%;
-        clear: left;
-    }
-
-    :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__icon {
-        float: none;
-        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
-    }
-
-    /* --------------------------------------- */
-
-    /* FORM ELEMENT: INLINE */
-
-    :host([data-render-mode="shadow"][variant='label-inline']) {
-        display: block;
-    }
-
-    /*
-    we have to combine with slds class here to avoid duplication
-    of this rule in child elements who import this stylesheet
-    in lighting-input this slds class is synonymous with the variant
-    */
-
-    :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) {
-        margin-block-end: var(--sds-g-spacing-2);
-    }
-
-    :host([variant='label-inline']):not([class*="slds-size"]) {
-        width: 100%;
-        flex-basis: 100%;
-    }
-
-    :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 {
-        padding-block-start: var(--sds-g-sizing-6, 1.25rem)
-    }
-
-    @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 */
-          flex-grow: 1; /* For IE and Safari which didn't auto expand to the available space */
-          margin-block-end: 0;
-          position: relative;
-          z-index: 1;
-        }
-
-        :host([data-render-mode="shadow"][variant='label-inline']) lightning-helptext {
-          float: left;
-        }
-
-        :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 {
-          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 {
-            width: auto;
-            max-width: 100%;
-            flex-basis: auto;
-            float: none;
-            position: relative;
-            padding-inline-start: 0;
-            margin-block-end: 0;
-        }
-
-        :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 {
-            clear: none;
-        }
-    }
-
-    /* --------------------------------------- */
-
-    /* FORM ELEMENT: COMPOUND */
-
-    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row {
-      display: flex;
-      margin-bottom: var(--sds-g-spacing-1, 0.25rem);
-      margin-left: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
-      margin-right: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row .slds-form-element__label {
-      padding-top: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element {
-      padding-left: var(--sds-g-spacing-1, 0.25rem);
-      padding-right: var(--sds-g-spacing-1, 0.25rem);
-    }
-
-    :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
 Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
-
 @supports (--styling-hooks: '') {
     /* 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));
+      height: calc(var(--slds-c-select-input-sizing-height, 1.875rem) + (var(--slds-g-sizing-border-1) * 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));
-      border-radius: var(--slds-c-select-radius-border, var(--sds-g-radius-border-2, 0.25rem));
+      border: var(--slds-g-sizing-border-1) solid var(--slds-c-select-color-border, var(--slds-g-color-border-1));
+      border-radius: var(--slds-c-select-radius-border, var(--slds-g-radius-border-2));
       background-color: var(--slds-c-select-color-background,
-      var(--sds-g-color-neutral-base-100, #ffffff));
-      color: var(--slds-c-select-text-color, currentcolor, var(--sds-g-color-neutral-base-10, #181818));
+      var(--slds-g-color-surface-container-1));
+      color: var(--slds-c-select-text-color, currentcolor, var(--slds-g-color-on-surface-1));
       box-shadow: var(--slds-c-select-shadow);
       transition: border 0.1s linear, background-color 0.1s linear;
     }
@@ -341,16 +22,16 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     :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));
+      border-color: var(--slds-c-select-color-border-focus, var(--slds-g-color-border-2));
+      background-color: var(--slds-c-select-color-background-focus, var(--slds-g-color-surface-container-1));
       color: var(--slds-c-select-text-color-focus);
-      box-shadow: var(--slds-c-select-shadow-focus, 0 0 3px var(--sds-g-color-brand-base-50, #0176d3));
+      box-shadow: var(--slds-c-select-shadow-focus, 0 0 3px var(--slds-g-color-accent-2));
     }
 
     :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);
+      background-color: var(--slds-g-color-disabled-container-1);
+      border-color: var(--slds-g-color-border-disabled-1);
+      color: var(--slds-g-color-on-disabled-1);
       cursor: not-allowed;
       user-select: none;
       opacity: 1;
@@ -363,13 +44,13 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
     :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));
+      min-height: calc(var(--slds-c-select-input-sizing-height) + (var(--slds-g-sizing-border-1) * 2));
       height: inherit;
     }
 
     :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);
+      padding: var(--slds-g-spacing-2);
     }
 
     :host([data-render-mode="shadow"]) .slds-select_container {
@@ -382,7 +63,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       -moz-appearance: none;
       -webkit-appearance: none;
       /* stylelint-enable property-no-vendor-prefix */
-      padding: 0 var(--sds-g-spacing-5, 1.5rem) 0 var(--sds-g-spacing-2, 0.5rem);
+      padding: 0 var(--slds-g-spacing-5) 0 var(--slds-g-spacing-2);
     }
 
     :host([data-render-mode="shadow"]) .slds-select_container [part="select"]::-ms-expand {
@@ -394,7 +75,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       position: absolute;
       content: '';
       display: block;
-      right: var(--sds-g-spacing-2, 0.5rem);
+      right: var(--slds-g-spacing-2);
       width: 0;
       height: 0;
       border-left: 3px solid transparent;
@@ -404,12 +85,12 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
     :host([data-render-mode="shadow"]) .slds-select_container::before {
       border-bottom: 5px solid currentcolor;
-      top: calc((var(--sds-g-sizing-8, 1.75rem) / 2) - 6px);
+      top: calc((var(--slds-g-sizing-8) / 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);
+      bottom: calc((var(--slds-g-sizing-8) / 2) - 6px);
     }
 
     :host([data-render-mode="shadow"][multiple]) .slds-select_container::before,:host([data-render-mode="shadow"][multiple]) .slds-select_container::after {
@@ -417,22 +98,22 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     }
 
     :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;
+      border-color: var(--slds-g-color-error-base-50);
+      box-shadow: var(--slds-g-color-error-base-50) 0 0 0 var(--slds-g-sizing-border-1) inset;
       background-clip: padding-box;
     }
 
     :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);
+      box-shadow: var(--slds-g-color-error-1) 0 0 0 var(--slds-g-sizing-border-1) inset, 0 0 3px var(--slds-g-color-border-error-1);
     }
 
     /* LABEL */
 
     /* Styling Specifically for 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));
+      padding-inline-end: var(--slds-g-spacing-2);
+      color: var(--slds-c-select-label-color, var(--slds-g-color-on-surface-2));
+      font-size: var(--slds-c-select-label-font-size, var(--slds-g-font-scale-neg-3));
 
       /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */
       display: inline-flex;

package/src/lightning/sldsUtilsThemes/sldsUtilsThemes.css

@@ -16,16 +16,24 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 /* .slds-theme {} */
 
-:host([data-render-mode="shadow"]) .slds-theme_default {
+/**
+ * The interactive-dialog-base components should be styled in both synthetic and
+ * native shadow, so we include an additional selector specific to these components
+ */
+
+:host([data-render-mode="shadow"]) .slds-theme_default,
+:host([data-interactive-dialog]) .slds-theme_default {
     background-color: var(--slds-g-color-neutral-base-100, #fff);
     color: var(--slds-g-color-neutral-base-10, #181818);
 }
 
-:host([data-render-mode="shadow"]) .slds-theme_shade {
+:host([data-render-mode="shadow"]) .slds-theme_shade,
+:host([data-interactive-dialog]) .slds-theme_shade {
     background-color: var(--slds-g-color-neutral-base-95, #f3f3f3);
 }
 
-:host([data-render-mode="shadow"]) .slds-theme_inverse {
+:host([data-render-mode="shadow"]) .slds-theme_inverse,
+:host([data-interactive-dialog]) .slds-theme_inverse {
     color: var(--slds-g-color-neutral-base-100, #fff);
     background-color: var(--slds-g-color-brand-base-10, #001639);
     border-color: var(--slds-g-color-brand-base-10, #001639);
@@ -54,7 +62,8 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     color: var(--slds-g-color-neutral-100-opacity-10, rgb(255 255 255 / 15%));
 } */
 
-:host([data-render-mode="shadow"]) .slds-theme_alt-inverse {
+:host([data-render-mode="shadow"]) .slds-theme_alt-inverse,
+:host([data-interactive-dialog]) .slds-theme_alt-inverse {
     color: var(--slds-g-color-neutral-base-100, #fff);
     background-color: var(--slds-g-color-brand-base-20, #032d60);
     border-color: var(--slds-g-color-brand-base-20, #032d60);
@@ -83,7 +92,8 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     color: var(--slds-g-color-neutral-100-opacity-10, rgb(255 255 255 / 15%));
 } */
 
-:host([data-render-mode="shadow"]) .slds-theme_success {
+:host([data-render-mode="shadow"]) .slds-theme_success,
+:host([data-interactive-dialog]) .slds-theme_success {
     color: var(--slds-g-color-neutral-base-100, #fff);
     background-color: var(--slds-g-color-success-base-50, #2e844a);
 
@@ -117,7 +127,8 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     color: var(--slds-g-color-neutral-100-opacity-10, rgb(255 255 255 / 15%));
 } */
 
-:host([data-render-mode="shadow"]) .slds-theme_info {
+:host([data-render-mode="shadow"]) .slds-theme_info,
+:host([data-interactive-dialog]) .slds-theme_info {
     color: var(--slds-g-color-neutral-base-100, #fff);
     background-color: var(--slds-g-color-neutral-base-50, #747474);
 
@@ -151,7 +162,8 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     color: var(--slds-g-color-neutral-100-opacity-10, rgb(255 255 255 / 15%));
 } */
 
-:host([data-render-mode="shadow"]) .slds-theme_warning {
+:host([data-render-mode="shadow"]) .slds-theme_warning,
+:host([data-interactive-dialog]) .slds-theme_warning {
     background-color: var(--slds-g-color-warning-base-60, #fe9339);
     color: var(--slds-g-color-neutral-base-10, #181818);
 
@@ -231,7 +243,8 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --slds-c-icon-color-foreground: var(--slds-g-color-neutral-base-30, #514f4d);
 }
 
-:host([data-render-mode="shadow"]) .slds-theme_error {
+:host([data-render-mode="shadow"]) .slds-theme_error,
+:host([data-interactive-dialog]) .slds-theme_error {
     color: var(--slds-g-color-neutral-base-100, #fff);
     background-color: var(--slds-g-color-error-base-40, #ea001e);
 
@@ -265,7 +278,8 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     color: var(--slds-g-color-neutral-100-opacity-10, rgb(255 255 255 / 15%));
 } */
 
-:host([data-render-mode="shadow"]) .slds-theme_offline {
+:host([data-render-mode="shadow"]) .slds-theme_offline,
+:host([data-interactive-dialog]) .slds-theme_offline {
     color: var(--slds-g-color-neutral-base-100, #fff);
     background-color: var(--slds-g-color-neutral-base-30, #444);
 }
@@ -293,12 +307,14 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     color: var(--slds-g-color-neutral-100-opacity-10, rgb(255 255 255 / 15%));
 } */
 
-:host([data-render-mode="shadow"]) .slds-theme_alert-texture {
+:host([data-render-mode="shadow"]) .slds-theme_alert-texture,
+:host([data-interactive-dialog]) .slds-theme_alert-texture {
     background-image: linear-gradient(45deg, rgb(0 0 0 / 2.5%) 25%, transparent 25%, transparent 50%, rgb(0 0 0 / 2.5%) 50%, rgb(0 0 0 / 2.5%) 75%, transparent 75%, transparent);
     background-size: 64px 64px;
 }
 
-:host([data-render-mode="shadow"]) .slds-theme_inverse-text {
+:host([data-render-mode="shadow"]) .slds-theme_inverse-text,
+:host([data-interactive-dialog]) .slds-theme_inverse-text {
     color: var(--slds-g-color-neutral-base-100, #fff);
 }
 

package/src/lightning/sldsUtilsVisibility/sldsUtilsVisibility.css

@@ -0,0 +1,20 @@
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+/*
+  TODO: Add all common utils described here: https://www.lightningdesignsystem.com/utilities/visibility/
+  Corresponding Work Item: W-14458332
+*/
+
+.slds-assistive-text {
+    position: absolute !important;
+    margin: -1px !important;
+    border: 0 !important;
+    padding: 0 !important;
+    width: 1px !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    clip: rect(0 0 0 0) !important;
+    text-transform: none !important;
+    white-space: nowrap !important;
+}

package/src/lightning/sldsUtilsVisibility/sldsUtilsVisibility.js-meta.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
+    <isExposed>true</isExposed>
+</LightningComponentBundle>

package/src/lightning/spinner/spinner.css

@@ -1,2 +1 @@
-/* @import 'lightning/sldsCommon';
-@import './spinner.slds.css'; */
+@import './spinner.lbc.native.css';

package/src/lightning/spinner/spinner.js

@@ -1,4 +1,5 @@
-import { api, LightningElement } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import { normalizeString as normalize, isCSR } from 'lightning/utilsPrivate';
 
@@ -8,7 +9,7 @@ const DEFAULT_VARIANT = 'base';
 /**
  * Displays an animated spinner.
  */
-export default class LightningSpinner extends LightningElement {
+export default class LightningSpinner extends LightningShadowBaseClass {
     static validationOptOut = ['class'];
 
     /**
@@ -57,9 +58,10 @@ export default class LightningSpinner extends LightningElement {
         }
     }
 
-    _altText = '';
+    _altText = null;
 
     connectedCallback() {
+        super.connectedCallback();
         this.classList.add('slds-spinner_container');
         if (isCSR) {
             this.template.addEventListener('mousewheel', this.stopScrolling);
@@ -106,7 +108,7 @@ export default class LightningSpinner extends LightningElement {
 
     // alternativeText validation
     get validAlternativeText() {
-        const hasAlternativeText = !!this.alternativeText;
+        const hasAlternativeText = isCSR && !!this.alternativeText;
 
         // if we have an empty value output a console warning
         if (!hasAlternativeText) {

package/src/lightning/spinner/spinner.js-meta.xml

@@ -3,4 +3,7 @@
     <isExposed>true</isExposed>
     <minApiVersion>0.0</minApiVersion>
     <support>GA</support>
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
 </LightningComponentBundle>

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

@@ -0,0 +1,2 @@
+@import 'lightning/sldsCommon';
+@import './spinner.slds.css';

package/src/lightning/spinner/spinner.slds.css

@@ -20,7 +20,7 @@
     position: absolute;
     inset: 0;
     z-index: 9050;
-    background-color: var(--slds-c-spinner-backdrop-color-background, var(--sds-g-color-neutral-base-100, #ffffff));
+    background-color: var(--_slds-c-spinner-backdrop-color-background, var(--slds-g-color-neutral-base-100));
     visibility: visible;
     opacity: 0.75;
     transition: opacity 0.2s ease, visibility 0s;
@@ -30,19 +30,13 @@
   /* brand */
 
   :host([data-render-mode="shadow"][variant='brand']) [part='spinner'] {
-    --slds-c-spinner-color-background: var(
-      --slds-c-spinner-brand-color-background,
-      var(--sds-g-color-brand-base-60, #1b96ff)
-    );
+    --_slds-c-spinner-color-background: var(---slds-g-color-accent-1);
   }
 
   /* inverse */
 
   :host([data-render-mode="shadow"][variant='inverse']) [part='spinner'] {
-    --slds-c-spinner-color-background: var(
-      --slds-c-spinner-inverse-color-background,
-      var(--sds-g-color-neutral-base-100, #ffffff)
-    );
+    --_slds-c-spinner-color-background: var(--slds-g-color-neutral-base-100);
   }
 
   /* large */
@@ -328,7 +322,7 @@
   [part='dot-b']::after {
     content: '';
     position: absolute;
-    background-color: var(--slds-c-spinner-color-background, var(--sds-g-color-neutral-base-65, #a0a0a0));
+    background-color: var(--_slds-c-spinner-color-background, var(--slds-g-color-neutral-base-65));
     border-radius: 50%;
     animation-duration: 1000ms;
     animation-iteration-count: infinite;