lightning-base-components 1.21.2-alpha → 1.21.4-alpha

package/src/lightning/sldsUtilsVisibility/sldsUtilsVisibility.css

@@ -6,7 +6,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   Corresponding Work Item: W-14458332
 */
 
-.slds-assistive-text {
+:host([data-render-mode='shadow']) .slds-assistive-text {
     position: absolute !important;
     margin: -1px !important;
     border: 0 !important;
@@ -18,3 +18,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     text-transform: none !important;
     white-space: nowrap !important;
 }
+
+:host([data-render-mode='shadow']) .slds-hide {
+    display: none !important;
+}

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

@@ -15,8 +15,7 @@
   white-space: nowrap !important;
 }
 
-@supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"]) [part='backdrop'] {
+:host([data-render-mode="shadow"]) [part='backdrop'] {
     position: absolute;
     inset: 0;
     z-index: 9050;
@@ -27,86 +26,86 @@
     transition-delay: 0s, 0.3s;
   }
 
-  /* brand */
+/* brand */
 
-  :host([data-render-mode="shadow"][variant='brand']) [part='spinner'] {
+:host([data-render-mode="shadow"][variant='brand']) [part='spinner'] {
     --_slds-c-spinner-color-background: var(---slds-g-color-accent-1);
   }
 
-  /* inverse */
+/* inverse */
 
-  :host([data-render-mode="shadow"][variant='inverse']) [part='spinner'] {
+:host([data-render-mode="shadow"][variant='inverse']) [part='spinner'] {
     --_slds-c-spinner-color-background: var(--slds-g-color-neutral-base-100);
   }
 
-  /* large */
+/* large */
 
-  :host([data-render-mode="shadow"][size='large']) [part='spinner'] {
+:host([data-render-mode="shadow"][size='large']) [part='spinner'] {
     width: 2.75rem;
   }
 
-  :host([data-render-mode="shadow"][size='large']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='large']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='large']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='large']) [part='dot-b']::after,:host([data-render-mode="shadow"][size='large']) [part='spinner']::before,:host([data-render-mode="shadow"][size='large']) [part='spinner']::after {
+:host([data-render-mode="shadow"][size='large']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='large']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='large']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='large']) [part='dot-b']::after,:host([data-render-mode="shadow"][size='large']) [part='spinner']::before,:host([data-render-mode="shadow"][size='large']) [part='spinner']::after {
     width: 0.625rem;
     height: 0.625rem;
   }
 
-  :host([data-render-mode="shadow"][size='large']) [part='spinner']::before,:host([data-render-mode="shadow"][size='large']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='large']) [part='dot-b']::before {
+:host([data-render-mode="shadow"][size='large']) [part='spinner']::before,:host([data-render-mode="shadow"][size='large']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='large']) [part='dot-b']::before {
     top: -0.3125rem;
     left: -0.3125rem;
     animation-name: dotsBounceBefore-medium;
   }
 
-  :host([data-render-mode="shadow"][size='large']) [part='spinner']::after,:host([data-render-mode="shadow"][size='large']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='large']) [part='dot-b']::after {
+:host([data-render-mode="shadow"][size='large']) [part='spinner']::after,:host([data-render-mode="shadow"][size='large']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='large']) [part='dot-b']::after {
     top: -0.3125rem;
     right: -0.3125rem;
     animation-name: dotsBounceAfter-medium;
   }
 
-  /* end size large */
+/* end size large */
 
-  /* medium */
+/* medium */
 
-  :host([data-render-mode="shadow"][size='medium']) [part='spinner'] {
+:host([data-render-mode="shadow"][size='medium']) [part='spinner'] {
     width: 2rem;
   }
 
-  :host([data-render-mode="shadow"][size='medium']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='medium']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='medium']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='medium']) [part='dot-b']::after,:host([data-render-mode="shadow"][size='medium']) [part='spinner']::before,:host([data-render-mode="shadow"][size='medium']) [part='spinner']::after {
+:host([data-render-mode="shadow"][size='medium']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='medium']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='medium']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='medium']) [part='dot-b']::after,:host([data-render-mode="shadow"][size='medium']) [part='spinner']::before,:host([data-render-mode="shadow"][size='medium']) [part='spinner']::after {
     width: 0.5rem;
     height: 0.5rem;
   }
 
-  :host([data-render-mode="shadow"][size='medium']) [part='spinner']::before,:host([data-render-mode="shadow"][size='medium']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='medium']) [part='dot-b']::before {
+:host([data-render-mode="shadow"][size='medium']) [part='spinner']::before,:host([data-render-mode="shadow"][size='medium']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='medium']) [part='dot-b']::before {
     top: -0.25rem;
     left: -0.25rem;
     animation-name: dotsBounceBefore-medium;
   }
 
-  :host([data-render-mode="shadow"][size='medium']) [part='spinner']::after,:host([data-render-mode="shadow"][size='medium']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='medium']) [part='dot-b']::after {
+:host([data-render-mode="shadow"][size='medium']) [part='spinner']::after,:host([data-render-mode="shadow"][size='medium']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='medium']) [part='dot-b']::after {
     top: -0.25rem;
     right: -0.25rem;
     animation-name: dotsBounceAfter-medium;
   }
 
-  /* end size medium */
+/* end size medium */
 
-  /* small */
+/* small */
 
-  :host([data-render-mode="shadow"][size='small']) [part='spinner'] {
+:host([data-render-mode="shadow"][size='small']) [part='spinner'] {
     width: 1.25rem;
   }
 
-  :host([data-render-mode="shadow"][size='small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='small']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='small']) [part='dot-b']::after,:host([data-render-mode="shadow"][size='small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='small']) [part='spinner']::after {
+:host([data-render-mode="shadow"][size='small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='small']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='small']) [part='dot-b']::after,:host([data-render-mode="shadow"][size='small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='small']) [part='spinner']::after {
     width: 0.25rem;
     height: 0.25rem;
   }
 
-  :host([data-render-mode="shadow"][size='small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='small']) [part='dot-b']::before {
+:host([data-render-mode="shadow"][size='small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='small']) [part='dot-b']::before {
     top: -0.125rem;
     left: -0.125rem;
     animation-name: dotsBounceBefore-small;
   }
 
-  :host([data-render-mode="shadow"][size='small']) [part='spinner']::after,:host([data-render-mode="shadow"][size='small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='small']) [part='dot-b']::after {
+:host([data-render-mode="shadow"][size='small']) [part='spinner']::after,:host([data-render-mode="shadow"][size='small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='small']) [part='dot-b']::after {
     width: 0.25rem;
     height: 0.25rem;
     top: -0.125rem;
@@ -114,7 +113,7 @@
     animation-name: dotsBounceAfter-small;
   }
 
-  @keyframes dotsBounceBefore-small {
+@keyframes dotsBounceBefore-small {
     0% {
       transform: translate3d(0, 0, 0);
     }
@@ -134,7 +133,7 @@
     }
   }
 
-  @keyframes dotsBounceAfter-small {
+@keyframes dotsBounceAfter-small {
     0% {
       transform: translate3d(0, 0, 0);
     }
@@ -154,32 +153,32 @@
     }
   }
 
-  /* end size small */
+/* end size small */
 
-  /* x-small */
+/* x-small */
 
-  :host([data-render-mode="shadow"][size='x-small']) [part='spinner'] {
+:host([data-render-mode="shadow"][size='x-small']) [part='spinner'] {
     width: 1rem;
   }
 
-  :host([data-render-mode="shadow"][size='x-small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='x-small']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='x-small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='x-small']) [part='dot-b']::after,:host([data-render-mode="shadow"][size='x-small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='x-small']) [part='spinner']::after {
+:host([data-render-mode="shadow"][size='x-small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='x-small']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='x-small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='x-small']) [part='dot-b']::after,:host([data-render-mode="shadow"][size='x-small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='x-small']) [part='spinner']::after {
     width: 0.25rem;
     height: 0.25rem;
   }
 
-  :host([data-render-mode="shadow"][size='x-small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='x-small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='x-small']) [part='dot-b']::before {
+:host([data-render-mode="shadow"][size='x-small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='x-small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='x-small']) [part='dot-b']::before {
     top: -0.125rem;
     left: -0.125rem;
     animation-name: dotsBounceBefore-extraSmall;
   }
 
-  :host([data-render-mode="shadow"][size='x-small']) [part='spinner']::after,:host([data-render-mode="shadow"][size='x-small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='x-small']) [part='dot-b']::after {
+:host([data-render-mode="shadow"][size='x-small']) [part='spinner']::after,:host([data-render-mode="shadow"][size='x-small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='x-small']) [part='dot-b']::after {
     top: -0.125rem;
     right: -0.125rem;
     animation-name: dotsBounceAfter-extraSmall;
   }
 
-  @keyframes dotsBounceBefore-extraSmall {
+@keyframes dotsBounceBefore-extraSmall {
     0% {
       transform: translate3d(0, 0, 0);
     }
@@ -199,7 +198,7 @@
     }
   }
 
-  @keyframes dotsBounceAfter-extraSmall {
+@keyframes dotsBounceAfter-extraSmall {
     0% {
       transform: translate3d(0, 0, 0);
     }
@@ -219,32 +218,32 @@
     }
   }
 
-  /* end size x-small */
+/* end size x-small */
 
-  /* xx-small */
+/* xx-small */
 
-  :host([data-render-mode="shadow"][size='xx-small']) [part='spinner'] {
+:host([data-render-mode="shadow"][size='xx-small']) [part='spinner'] {
     width: 0.5rem;
   }
 
-  :host([data-render-mode="shadow"][size='xx-small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='spinner']::after,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-b']::after {
+:host([data-render-mode="shadow"][size='xx-small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='spinner']::after,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-b']::after {
     width: 0.125rem;
     height: 0.125rem;
   }
 
-  :host([data-render-mode="shadow"][size='xx-small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-b']::before {
+:host([data-render-mode="shadow"][size='xx-small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-b']::before {
     top: -0.0625rem;
     left: -0.0625rem;
     animation-name: dotsBounceBefore-extraExtraSmall;
   }
 
-  :host([data-render-mode="shadow"][size='xx-small']) [part='spinner']::after,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-b']::after {
+:host([data-render-mode="shadow"][size='xx-small']) [part='spinner']::after,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-b']::after {
     top: -0.0625rem;
     right: -0.0625rem;
     animation-name: dotsBounceAfter-extraExtraSmall;
   }
 
-  @keyframes dotsBounceBefore-extraExtraSmall {
+@keyframes dotsBounceBefore-extraExtraSmall {
     0% {
       transform: translate3d(0, 0, 0);
     }
@@ -264,7 +263,7 @@
     }
   }
 
-  @keyframes dotsBounceAfter-extraExtraSmall {
+@keyframes dotsBounceAfter-extraExtraSmall {
     0% {
       transform: translate3d(0, 0, 0);
     }
@@ -284,9 +283,9 @@
     }
   }
 
-  /* end size xx-small */
+/* end size xx-small */
 
-  :host([data-render-mode="shadow"]) [part='spinner'] {
+:host([data-render-mode="shadow"]) [part='spinner'] {
     position: absolute;
     top: 50%;
     width: 2rem;
@@ -297,15 +296,16 @@
     transform: translate(-50%, -50%) rotate(90deg);
   }
 
-  :host([data-render-mode="shadow"]) [part='spinner'],:host([data-render-mode="shadow"]) 
+:host([data-render-mode="shadow"]) [part='spinner'],:host([data-render-mode="shadow"]) 
   [part='dot-a'],:host([data-render-mode="shadow"]) 
   [part='dot-b'] {
     transform-origin: 50% 50%;
     will-change: transform;
   }
 
-  /* creates the circles */
-  :host([data-render-mode="shadow"]) [part='dot-a'],:host([data-render-mode="shadow"]) 
+/* creates the circles */
+
+:host([data-render-mode="shadow"]) [part='dot-a'],:host([data-render-mode="shadow"]) 
   [part='dot-b'] {
     position: absolute;
     top: 0;
@@ -313,8 +313,9 @@
     width: 100%;
   }
 
-  /* stylelint-disable no-duplicate-selectors */
-  :host([data-render-mode="shadow"]) [part='spinner']::before,:host([data-render-mode="shadow"]) 
+/* stylelint-disable no-duplicate-selectors */
+
+:host([data-render-mode="shadow"]) [part='spinner']::before,:host([data-render-mode="shadow"]) 
   [part='spinner']::after,:host([data-render-mode="shadow"]) 
   [part='dot-a']::before,:host([data-render-mode="shadow"]) 
   [part='dot-b']::before,:host([data-render-mode="shadow"]) 
@@ -329,39 +330,39 @@
     transform: translate3d(0, 0, 0);
   }
 
-  :host([data-render-mode="shadow"]) [part='dot-a'] {
+:host([data-render-mode="shadow"]) [part='dot-a'] {
     transform: rotate(60deg);
   }
 
-  :host([data-render-mode="shadow"]) [part='dot-b'] {
+:host([data-render-mode="shadow"]) [part='dot-b'] {
     transform: rotate(120deg);
   }
 
-  :host([data-render-mode="shadow"]) [part='spinner']::before {
+:host([data-render-mode="shadow"]) [part='spinner']::before {
     animation-delay: -83.3333ms;
   }
 
-  :host([data-render-mode="shadow"]) [part='dot-a']::before {
+:host([data-render-mode="shadow"]) [part='dot-a']::before {
     animation-delay: 83.3333ms;
   }
 
-  :host([data-render-mode="shadow"]) [part='dot-b']::before {
+:host([data-render-mode="shadow"]) [part='dot-b']::before {
     animation-delay: 250ms;
   }
 
-  :host([data-render-mode="shadow"]) [part='spinner']::after {
+:host([data-render-mode="shadow"]) [part='spinner']::after {
     animation-delay: 416.6667ms;
   }
 
-  :host([data-render-mode="shadow"]) [part='dot-a']::after {
+:host([data-render-mode="shadow"]) [part='dot-a']::after {
     animation-delay: 583.3333ms;
   }
 
-  :host([data-render-mode="shadow"]) [part='dot-b']::after {
+:host([data-render-mode="shadow"]) [part='dot-b']::after {
     animation-delay: 750ms;
   }
 
-  :host([data-render-mode="shadow"]) [part='spinner']::after,:host([data-render-mode="shadow"]) 
+:host([data-render-mode="shadow"]) [part='spinner']::after,:host([data-render-mode="shadow"]) 
   [part='spinner']::before,:host([data-render-mode="shadow"]) 
   [part='dot-a']::after,:host([data-render-mode="shadow"]) 
   [part='dot-a']::before,:host([data-render-mode="shadow"]) 
@@ -371,7 +372,7 @@
     height: 0.5rem;
   }
 
-  :host([data-render-mode="shadow"]) [part='spinner']::before,:host([data-render-mode="shadow"]) 
+:host([data-render-mode="shadow"]) [part='spinner']::before,:host([data-render-mode="shadow"]) 
   [part='dot-a']::before,:host([data-render-mode="shadow"]) 
   [part='dot-b']::before {
     animation-name: dotsBounceBefore-medium;
@@ -379,7 +380,7 @@
     left: -0.25rem;
   }
 
-  :host([data-render-mode="shadow"]) [part='spinner']::after,:host([data-render-mode="shadow"]) 
+:host([data-render-mode="shadow"]) [part='spinner']::after,:host([data-render-mode="shadow"]) 
   [part='dot-a']::after,:host([data-render-mode="shadow"]) 
   [part='dot-b']::after {
     animation-name: dotsBounceAfter-medium;
@@ -387,7 +388,7 @@
     right: -0.25rem;
   }
 
-  @keyframes dotsBounceBefore-medium {
+@keyframes dotsBounceBefore-medium {
     0% {
       transform: translate3d(0, 0, 0);
     }
@@ -407,7 +408,7 @@
     }
   }
 
-  @keyframes dotsBounceAfter-medium {
+@keyframes dotsBounceAfter-medium {
     0% {
       transform: translate3d(0, 0, 0);
     }
@@ -426,4 +427,3 @@
       transform: translateX(0);
     }
   }
-}

package/src/lightning/staticMap/staticMap.js

@@ -2,7 +2,7 @@ import lang from '@salesforce/i18n/lang';
 import formFactor from '@salesforce/client/formFactor';
 import labelTitleWithAddress from '@salesforce/label/LightningMap.titleWithAddress';
 import labelTitleWithoutAddress from '@salesforce/label/LightningMap.iframeTitle';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
 import { ratioToScale, calculateSize } from './util';
 import {
     registerMessageHandler,
@@ -14,6 +14,7 @@ import { buildMapSourceUrl } from 'lightning/mapUtils';
 import { isEmptyString } from 'lightning/inputUtils';
 import { formatLabel } from 'lightning/utils';
 import { isCSR } from 'lightning/utilsPrivate';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 
 const EVENT_NAME = {
     LOADING_MAP: 'loadingMap',
@@ -25,7 +26,7 @@ const i18n = {
     titleWithoutAddress: labelTitleWithoutAddress,
 };
 
-export default class LightningStaticMap extends LightningElement {
+export default class LightningStaticMap extends LightningShadowBaseClass {
     @api width;
     @api height;
     @api street;

package/src/lightning/tab/tab.js

@@ -1,16 +1,19 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
 import { normalizeBoolean } from 'lightning/utilsPrivate';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { isCSR } from 'lightning/utilsPrivate';
 /**
  * A single tab in a tabset component.
  * @slot default Placeholder for your content in lightning-tab.
  */
-export default class LightningTab extends LightningElement {
+export default class LightningTab extends LightningShadowBaseClass {
     @track _loadContent = false;
     _registered = false;
 
     connectedCallback() {
+        super.connectedCallback();
         this._connected = true;
-        if (this.template.synthetic) {
+        if (isCSR && this.template.synthetic) {
             this.dispatchEvent(
                 new CustomEvent('privatetabregister', {
                     cancelable: true,
@@ -53,7 +56,9 @@ export default class LightningTab extends LightningElement {
     loadContent() {
         this._loadContent = true;
 
-        this.dispatchEvent(new CustomEvent('active'));
+        if (isCSR) {
+            this.dispatchEvent(new CustomEvent('active'));
+        }
     }
 
     disconnectedCallback() {
@@ -183,7 +188,7 @@ export default class LightningTab extends LightningElement {
     }
 
     _dispatchDataChangeEventIfConnected() {
-        if (this._connected) {
+        if (isCSR && this._connected) {
             this.dispatchEvent(
                 new CustomEvent('privatetabdatachange', {
                     cancelable: true,

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

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

package/src/lightning/tab/tab.slds.css

@@ -1,14 +1,15 @@
 
-@supports (--styling-hooks: '') {
   /* Reassignments for parity with SLDS blueprint
     https://www.lightningdesignsystem.com/components/tabs/#Styling-Hooks-Overview */
 
 
   :host([data-render-mode="shadow"].slds-tabs_default__content) {
-    --slds-c-tabs-panel-spacing-block-start: var(--slds-c-tab-panel-spacing-blockstart);
-    --slds-c-tabs-panel-spacing-block-end: var(--slds-c-tab-panel-spacing-blockend);
-    --slds-c-tabs-panel-spacing-inline-end: var(--slds-c-tab-panel-spacing-inlineend);
-    --slds-c-tabs-panel-spacing-inline-start: var(--slds-c-tab-panel-spacing-inlinestart);
+    /* stylelint-disable */
+    --slds-c-tabs-panel-spacing-blockstart: var(--slds-c-tab-panel-spacing-block-start);
+    --slds-c-tabs-panel-spacing-blockend: var(--slds-c-tab-panel-spacing-block-end);
+    --slds-c-tabs-panel-spacing-inlineend: var(--slds-c-tab-panel-spacing-inline-end);
+    --slds-c-tabs-panel-spacing-inlinestart: var(--slds-c-tab-panel-spacing-inline-start);
+    /* stylelint-enable */
 
     position: relative;
     padding-block-start: var(--slds-c-tab-panel-spacing-blockstart, var(--slds-g-spacing-3));
@@ -17,6 +18,7 @@
     padding-inline-start: var(--slds-c-tab-panel-spacing-inlinestart, 0);
   }
 
+
   :host([data-render-mode="shadow"].slds-tabs_scoped__content) {
     background-color: var(--slds-g-color-surface-container-1);
     border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-base-4, var(--slds-g-color-border-1));
@@ -28,20 +30,25 @@
     padding: var(--slds-g-spacing-4);
   }
 
+
   :host([data-render-mode="shadow"].slds-vertical-tabs__content) {
     flex: 1;
     padding: var(--slds-g-spacing-4);
     background: var(--slds-g-color-neutral-base-100, var(--slds-g-color-surface-container-1));
   }
 
+
   /* TODO W-12674349: Replace with Visibility Utility Classes when available */
+
+
   :host([data-render-mode="shadow"].slds-show) {
     display: block;
   }
 
+
   /* TODO W-12674349: Replace with Visibility Utility Classes when available */
+
+
   :host([data-render-mode="shadow"].slds-hide) {
     display: none !important
   }
-
-}

package/src/lightning/tabBar/tab-bar.slds.css

@@ -2,19 +2,22 @@
 /* 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: '') {
   /* re-assign current slds hooks using deprecated naming conventions */
+
   :host([data-render-mode="shadow"]) {
-    --slds-c-tabs-item-spacing-block-end: var(--slds-c-tabbar-standard-spacing-blockend);
-    --slds-c-tabs-item-spacing-block-start: var(--slds-c-tabbar-standard-spacing-blockstart);
-    --slds-c-tabs-item-spacing-inline-end: var(--slds-c-tabbar-standard-spacing-inlineend);
-    --slds-c-tabs-item-spacing-inline-start: var(--slds-c-tabbar-standard-spacing-inlinestart);
+    /* stylelint-disable */
+    --slds-c-tabs-item-spacing-blockend: var(--slds-c-tabbar-standard-spacing-block-end);
+    --slds-c-tabs-item-spacing-blockstart: var(--slds-c-tabbar-standard-spacing-block-start);
+    --slds-c-tabs-item-spacing-inlineend: var(--slds-c-tabbar-standard-spacing-inline-end);
+    --slds-c-tabs-item-spacing-inlinestart: var(--slds-c-tabbar-standard-spacing-inline-start);
+    /* stylelint-enable */
   }
 
   /* SHARED TAB BAR STYLING */
 
   /* Host reassignments to composed tabs for parity with SLDS blueprint
     https://www.lightningdesignsystem.com/components/tabs/#Styling-Hooks-Overview */
+
   :host([data-render-mode="shadow"]) [part='tab-bar'] {
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     --_slds-c-tabbar-standard-font-lineheight: 2.5rem;
@@ -71,6 +74,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   }
 
   /* Overflow styles for horizontal tab variants */
+
   :host([data-render-mode="shadow"][variant='standard']) [role='tab'],:host([data-render-mode="shadow"][variant='scoped']) [role='tab'] {
     max-width: 100%;
     overflow: hidden;
@@ -106,6 +110,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /* STANDARD TAB BAR STYLING */
 
   /* Line under standard tabs */
+
   :host([data-render-mode="shadow"][variant='standard']) [part='tab-bar'] {
     border-block-end-width: var(--slds-c-tabbar-standard-sizing-border, var(--slds-g-sizing-border-1));
     border-block-end-style: solid;
@@ -142,12 +147,14 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   }
 
   /* Blue line under active tab */
+
   :host([data-render-mode="shadow"][variant='standard']) [part~='tab-item'].slds-is-active::after {
     background-color: var(--slds-c-tabbar-standard-color-border-active, var(--slds-g-color-accent-1));
     height: calc(var(--slds-c-tabbar-standard-sizing-border, var(--slds-g-sizing-border-1)) + 2px);
   }
 
   /* Blue line under tab when hovering */
+
   :host([data-render-mode="shadow"][variant='standard']) [part~='tab-item']:hover::after,:host([data-render-mode="shadow"][variant='standard']) [part~='tab-item'].slds-is-active:hover::after {
     height: calc(var(--slds-c-tabbar-standard-sizing-border, var(--slds-g-sizing-border-1)) + 1px);
     background-color: var(--slds-c-tabbar-standard-color-border-hover, var(--slds-g-color-accent-1));
@@ -203,6 +210,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /* SCOPED TAB HEADER STYLING */
 
   /* Covers border under active tab, since background is not transparent */
+
   :host([data-render-mode="shadow"][variant='scoped']) [part~='tab-item'] {
     margin-block-end: calc(var(--slds-g-sizing-border-1) * -1);
     color: var(--slds-c-tabbar-scoped-text-color, var(--slds-g-color-on-surface-2));
@@ -213,6 +221,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   }
 
   /* Ensures that borders for tabs overlap */
+
   :host([data-render-mode="shadow"][variant='scoped']) [part~='tab-item'] + [part~='tab-item'] {
     margin-inline-start: calc(var(--slds-g-sizing-border-1) * -1);
   }
@@ -297,6 +306,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   }
 
   /* Covers border next to active tab, since background is not transparent */
+
   :host([data-render-mode="shadow"][variant='vertical']) [part='tab-item'].slds-is-active {
     margin-inline-end: calc(var(--slds-g-sizing-border-1) * -1);
     background: var(--slds-c-tabbar-vertical-color-background-active, var(--slds-g-color-surface-container-1));
@@ -323,8 +333,8 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   }
 
   /* Active tab should still use active colors on hover */
+
   :host([data-render-mode="shadow"][variant='vertical']) .slds-is-active [role='tab']:hover {
     background: var(--slds-c-tabbar-vertical-color-background-active, var(--slds-g-color-surface-container-1));
     color: currentcolor;
   }
-}

package/src/lightning/tabBar/tabBar.js

@@ -11,6 +11,7 @@ import { calculateOverflow } from 'lightning/overflowLibrary';
 import { LightningResizeObserver } from 'lightning/resizeObserver';
 import { handleKeyDownOnTabList } from './keyboard';
 import AriaObserver from 'lightning/ariaObserver';
+import { isCSR } from 'lightning/utilsPrivate';
 
 const i18n = {
     more: labelOverflowMore,
@@ -44,7 +45,9 @@ export default class LightningTabBar extends LightningShadowBaseClass {
         if (this.overflowSupported) {
             this._queueOverflow();
         }
-        this.ariaObserver = new AriaObserver(this);
+        if (isCSR) {
+            this.ariaObserver = new AriaObserver(this);
+        }
     }
 
     renderedCallback() {
@@ -74,7 +77,7 @@ export default class LightningTabBar extends LightningShadowBaseClass {
     }
 
     get tabLinks() {
-        return this.template.querySelectorAll(`a[role="tab"]`);
+        return isCSR ? this.template.querySelectorAll(`a[role="tab"]`) : null;
     }
 
     disconnectedCallback() {
@@ -169,7 +172,7 @@ export default class LightningTabBar extends LightningShadowBaseClass {
 
         this._queueSynchronizeA11 = true;
 
-        if (this._connected && this.overflowSupported) {
+        if (isCSR && this._connected && this.overflowSupported) {
             // eslint-disable-next-line @lwc/lwc/no-async-operation
             requestAnimationFrame(this._queueOverflow.bind(this));
         }
@@ -473,8 +476,10 @@ export default class LightningTabBar extends LightningShadowBaseClass {
         this._allTabs.forEach((tab) => {
             tab.visible = true;
         });
-        // eslint-disable-next-line @lwc/lwc/no-async-operation
-        requestAnimationFrame(this._recomputeOverflow.bind(this));
+        if (isCSR) {
+            // eslint-disable-next-line @lwc/lwc/no-async-operation
+            requestAnimationFrame(this._recomputeOverflow.bind(this));
+        }
     }
 
     _recomputeOverflow() {