lightning-base-components 1.21.1-alpha → 1.21.3-alpha

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

@@ -15,104 +15,97 @@
   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;
-    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;
     transition-delay: 0s, 0.3s;
   }
 
-  /* brand */
+/* 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)
-    );
+: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'] {
-    --slds-c-spinner-color-background: var(
-      --slds-c-spinner-inverse-color-background,
-      var(--sds-g-color-neutral-base-100, #ffffff)
-    );
+: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;
@@ -120,7 +113,7 @@
     animation-name: dotsBounceAfter-small;
   }
 
-  @keyframes dotsBounceBefore-small {
+@keyframes dotsBounceBefore-small {
     0% {
       transform: translate3d(0, 0, 0);
     }
@@ -140,7 +133,7 @@
     }
   }
 
-  @keyframes dotsBounceAfter-small {
+@keyframes dotsBounceAfter-small {
     0% {
       transform: translate3d(0, 0, 0);
     }
@@ -160,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);
     }
@@ -205,7 +198,7 @@
     }
   }
 
-  @keyframes dotsBounceAfter-extraSmall {
+@keyframes dotsBounceAfter-extraSmall {
     0% {
       transform: translate3d(0, 0, 0);
     }
@@ -225,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);
     }
@@ -270,7 +263,7 @@
     }
   }
 
-  @keyframes dotsBounceAfter-extraExtraSmall {
+@keyframes dotsBounceAfter-extraExtraSmall {
     0% {
       transform: translate3d(0, 0, 0);
     }
@@ -290,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;
@@ -303,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;
@@ -319,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"]) 
@@ -328,46 +323,46 @@
   [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;
     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"]) 
@@ -377,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;
@@ -385,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;
@@ -393,7 +388,7 @@
     right: -0.25rem;
   }
 
-  @keyframes dotsBounceBefore-medium {
+@keyframes dotsBounceBefore-medium {
     0% {
       transform: translate3d(0, 0, 0);
     }
@@ -413,7 +408,7 @@
     }
   }
 
-  @keyframes dotsBounceAfter-medium {
+@keyframes dotsBounceAfter-medium {
     0% {
       transform: translate3d(0, 0, 0);
     }
@@ -432,4 +427,3 @@
       transform: translateX(0);
     }
   }
-}

package/src/lightning/staticMap/staticMap.html

@@ -1,15 +1,17 @@
 <template>
     <div class="slds-iframe-container">
-        <lightning-primitive-iframe
-                    src={staticMapSrc}
-                    domain={apiDomain}
-                    oniframeload={handleIframeLoad}
-                    width={width}
-                    height={height}
-                    title={mapTitle}
-                    frame-style={mapStyle}>
-        </lightning-primitive-iframe>
-        <div class="slds-iframe-cover"></div>
+        <template if:true={canRenderIframe}>
+            <lightning-primitive-iframe
+                src={staticMapSrc}
+                domain={apiDomain}
+                oniframeload={handleIframeLoad}
+                width={width}
+                height={height}
+                title={mapTitle}
+                frame-style={mapStyle}>
+            </lightning-primitive-iframe>
+            <div class="slds-iframe-cover"></div>
+        </template>
     </div>
 </template>
 

package/src/lightning/staticMap/staticMap.js

@@ -13,6 +13,7 @@ import {
 import { buildMapSourceUrl } from 'lightning/mapUtils';
 import { isEmptyString } from 'lightning/inputUtils';
 import { formatLabel } from 'lightning/utils';
+import { isCSR } from 'lightning/utilsPrivate';
 
 const EVENT_NAME = {
     LOADING_MAP: 'loadingMap',
@@ -43,12 +44,23 @@ export default class LightningStaticMap extends LightningElement {
 
     @track _mapLoaded = false;
 
+    canRenderIframe = false;
+
     connectedCallback() {
-        this._dispatchId = registerMessageHandler((event) => {
-            this.handleMessage(event);
-        });
+        if (isCSR) {
+            this._dispatchId = registerMessageHandler((event) => {
+                this.handleMessage(event);
+            });
+            this._scale = ratioToScale();
+        }
+        // If the server did not render content, the iframe can be rendered immediately
+        this.canRenderIframe =
+            isCSR && !this.template.querySelector('.slds-iframe-container');
+    }
 
-        this._scale = ratioToScale();
+    renderedCallback() {
+        // The iframe should be rendered after hydration in the CSR context
+        this.canRenderIframe = true;
     }
 
     disconnectedCallback() {

package/src/lightning/tab/tab.css

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

package/src/lightning/tab/tab.js

@@ -1,14 +1,16 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
 import { normalizeBoolean } from 'lightning/utilsPrivate';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 /**
  * 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) {
             this.dispatchEvent(

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

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

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

@@ -1,47 +1,54 @@
 
-@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(--sds-g-spacing-3, 0.75rem));
+    padding-block-start: var(--slds-c-tab-panel-spacing-blockstart, var(--slds-g-spacing-3));
     padding-inline-end: var(--slds-c-tab-panel-spacing-inlineend, 0);
-    padding-block-end: var(--slds-c-tab-panel-spacing-blockend, var(--sds-g-spacing-3, 0.75rem));
+    padding-block-end: var(--slds-c-tab-panel-spacing-blockend, var(--slds-g-spacing-3));
     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-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
-    border: var(--sds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-base-4, var(--sds-g-color-neutral-base-80, #c9c9c9));
+    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));
     border-block-start: 0;
     border-start-start-radius: 0;
     border-start-end-radius: 0;
-    border-end-end-radius: var(--sds-g-spacing-1, 0.25rem);
-    border-end-start-radius: var(--sds-g-spacing-1, 0.25rem);
-    padding: var(--sds-g-spacing-4, 1rem);
+    border-end-end-radius: var(--slds-g-spacing-1);
+    border-end-start-radius: var(--slds-g-spacing-1);
+    padding: var(--slds-g-spacing-4);
   }
 
+
   :host([data-render-mode="shadow"].slds-vertical-tabs__content) {
     flex: 1;
-    padding: var(--sds-g-spacing-4, 1rem);
-    background: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
+    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
   }
-
-}