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

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.lbc.native.css

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

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

@@ -11,27 +11,27 @@
     --slds-c-tabs-panel-spacing-inline-start: var(--slds-c-tab-panel-spacing-inlinestart);
 
     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 */

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

@@ -67,7 +67,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   }
 
   :host([data-render-mode="shadow"][variant='standard']) .slds-is-active [role='tab'],:host([data-render-mode="shadow"][variant='scoped']) .slds-is-active [role='tab'] {
-    font-weight: var(--sds-g-font-weight-7, 700);
+    font-weight: var(--slds-g-font-weight-7);
   }
 
   /* Overflow styles for horizontal tab variants */
@@ -107,28 +107,28 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* 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(--sds-g-sizing-border-1, 1px));
+    border-block-end-width: var(--slds-c-tabbar-standard-sizing-border, var(--slds-g-sizing-border-1));
     border-block-end-style: solid;
-    border-block-end-color: var(--slds-c-tabbar-standard-color-border, var(--slds-g-color-border-base-4, var(--sds-g-color-neutral-base-90, #e5e5e5)));
+    border-block-end-color: var(--slds-c-tabbar-standard-color-border, var(--slds-g-color-border-base-4, var(--slds-g-color-border-1)));
   }
 
   /* STANDARD TAB HEADER STYLING */
 
   :host([data-render-mode="shadow"][variant='standard']) [part~='tab-item'] {
-    color: var(--slds-c-tabbar-standard-text-color, var(--slds-g-color-neutral-base-30, var(--sds-g-color-neutral-base-30, #444444)));
+    color: var(--slds-c-tabbar-standard-text-color, var(--slds-g-color-on-surface-2));
     padding-block-start: var(--slds-c-tabbar-standard-spacing-blockstart, var(--slds-c-tabbar-standard-spacing-block, 0));
-    padding-inline-start: var(--slds-c-tabbar-standard-spacing-inlinestart, var(--slds-c-tabbar-standard-spacing-inline, var(--sds-g-spacing-3, 0.75rem)));
-    padding-inline-end: var(--slds-c-tabbar-standard-spacing-inlineend, var(--slds-c-tabbar-standard-spacing-inline, var(--sds-g-spacing-3, 0.75rem)));
+    padding-inline-start: var(--slds-c-tabbar-standard-spacing-inlinestart, var(--slds-c-tabbar-standard-spacing-inline, var(--slds-g-spacing-3)));
+    padding-inline-end: var(--slds-c-tabbar-standard-spacing-inlineend, var(--slds-c-tabbar-standard-spacing-inline, var(--slds-g-spacing-3)));
     padding-block-end: var(--slds-c-tabbar-standard-spacing-blockend, var(--slds-c-tabbar-standard-spacing-block, 0));
-    margin-block-end: calc(var(--slds-c-tabbar-standard-sizing-border, var(--sds-g-sizing-border-1, 1px)) * -1);
+    margin-block-end: calc(var(--slds-c-tabbar-standard-sizing-border, var(--slds-g-sizing-border-1)) * -1);
   }
 
   :host([data-render-mode="shadow"][variant='standard']) [part~='tab-item'].slds-is-active,:host([data-render-mode="shadow"][variant='standard']) [part~='tab-item'].slds-is-active:hover {
-    --slds-c-tabbar-standard-text-color: var(--slds-c-tabbar-standard-text-color-active, var(--slds-g-color-neutral-base-10, var(--sds-g-color-neutral-base-10, #181818)));
+    --slds-c-tabbar-standard-text-color: var(--slds-c-tabbar-standard-text-color-active, var(--slds-g-color-on-surface-3));
   }
 
   :host([data-render-mode="shadow"][variant='standard']) [part~='tab-item']:hover {
-    color: var(--slds-c-tabbar-standard-text-color-hover, var(--slds-c-tabbar-standard-text-color, var(--slds-g-color-neutral-base-30, var(--sds-g-color-neutral-base-30, #444444))));
+    color: var(--slds-c-tabbar-standard-text-color-hover, var(--slds-c-tabbar-standard-text-color, var(--slds-g-color-on-surface-2)));
   }
 
   :host([data-render-mode="shadow"][variant='standard']) [part~='tab-item']::after {
@@ -143,14 +143,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(--sds-g-color-brand-base-60, #1b96ff));
-    height: calc(var(--slds-c-tabbar-standard-sizing-border, var(--sds-g-sizing-border-1, 1px)) + 2px);
+    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(--sds-g-sizing-border-1, 1px)) + 1px);
-    background-color: var(--slds-c-tabbar-standard-color-border-hover, var(--sds-g-color-brand-base-50, #0176d3));
+    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));
   }
 
   /* STANDARD TAB LINK STYLING */
@@ -173,16 +173,16 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --slds-c-buttonicon-spacing-inline: 0;
 
     /* Text Color */
-    --slds-c-button-neutral-text-color: var(--slds-c-tabbar-standard-text-color, var(--slds-g-color-neutral-base-30, var(--sds-g-color-neutral-base-30, #444444)));
-    --slds-c-button-neutral-text-color-hover: var(--slds-c-tabbar-standard-text-color-hover, var(--slds-g-color-neutral-base-30, var(--sds-g-color-neutral-base-30, #444444)));
-    --slds-c-button-neutral-text-color-focus: var(--slds-c-tabbar-standard-text-color-focus, var(--slds-g-color-neutral-base-30, var(--sds-g-color-neutral-base-30, #444444)));
-    --slds-c-button-neutral-text-color-active: var(--slds-c-tabbar-standard-text-color-active, var(--slds-g-color-neutral-base-30, var(--sds-g-color-neutral-base-30, #444444)));
+    --slds-c-button-neutral-text-color: var(--slds-c-tabbar-standard-text-color, var(--slds-g-color-on-surface-2));
+    --slds-c-button-neutral-text-color-hover: var(--slds-c-tabbar-standard-text-color-hover, var(--slds-g-color-on-surface-2));
+    --slds-c-button-neutral-text-color-focus: var(--slds-c-tabbar-standard-text-color-focus, var(--slds-g-color-on-surface-2));
+    --slds-c-button-neutral-text-color-active: var(--slds-c-tabbar-standard-text-color-active, var(--slds-g-color-on-surface-2));
 
     /* Icon Color */
-    --slds-c-buttonicon-color-foreground: var(--slds-c-tabbar-standard-text-color, var(--slds-g-color-neutral-base-30, var(--sds-g-color-neutral-base-30, #444444)));
-    --slds-c-buttonicon-color-foreground-hover: var(--slds-c-tabbar-standard-text-color-hover, var(--slds-g-color-neutral-base-30, var(--sds-g-color-neutral-base-30, #444444)));
-    --slds-c-buttonicon-color-foreground-focus: var(--slds-c-tabbar-standard-text-color-focus, var(--slds-g-color-neutral-base-30, var(--sds-g-color-neutral-base-30, #444444)));
-    --slds-c-buttonicon-color-foreground-active: var(--slds-c-tabbar-standard-text-color-active, var(--slds-g-color-neutral-base-30, var(--sds-g-color-neutral-base-30, #444444)));
+    --slds-c-buttonicon-color-foreground: var(--slds-c-tabbar-standard-text-color, var(--slds-g-color-on-surface-2));
+    --slds-c-buttonicon-color-foreground-hover: var(--slds-c-tabbar-standard-text-color-hover, var(--slds-g-color-on-surface-2));
+    --slds-c-buttonicon-color-foreground-focus: var(--slds-c-tabbar-standard-text-color-focus, var(--slds-g-color-on-surface-2));
+    --slds-c-buttonicon-color-foreground-active: var(--slds-c-tabbar-standard-text-color-active, var(--slds-g-color-on-surface-2));
   }
 
   :host([data-render-mode="shadow"][variant='standard']) [part~='tab-overflow'] lightning-button-menu:focus {
@@ -192,29 +192,29 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /* SCOPED TAB BAR STYLING */
 
   :host([data-render-mode="shadow"][variant='scoped']) [part='tab-bar'] {
-    background-color: var(--slds-c-tabbar-scoped-color-background, var(--slds-g-color-neutral-base-95, var(--sds-g-color-neutral-base-95, #f3f3f3)));
-    border: var(--sds-g-sizing-border-1, 1px) solid var(--slds-c-tabbar-scoped-color-border, var(--slds-g-color-border-base-4, var(--sds-g-color-neutral-base-80, #c9c9c9)));
+    background-color: var(--slds-c-tabbar-scoped-color-background, var(--slds-g-color-surface-container-2));
+    border: var(--slds-g-sizing-border-1) solid var(--slds-c-tabbar-scoped-color-border, var(--slds-g-color-border-base-4, var(--slds-g-color-border-1)));
     border-end-end-radius: 0;
     border-end-start-radius: 0;
-    border-start-end-radius: var(--slds-c-tabbar-scoped-radius-border, var(--sds-g-radius-border-2, 0.25rem));
-    border-start-start-radius: var(--slds-c-tabbar-scoped-radius-border, var(--sds-g-radius-border-2, 0.25rem));
+    border-start-end-radius: var(--slds-c-tabbar-scoped-radius-border, var(--slds-g-radius-border-2));
+    border-start-start-radius: var(--slds-c-tabbar-scoped-radius-border, var(--slds-g-radius-border-2));
   }
 
   /* 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(--sds-g-sizing-border-1, 1px) * -1);
-    color: var(--slds-c-tabbar-scoped-text-color, var(--slds-g-color-neutral-base-30, var(--sds-g-color-neutral-base-30, #444444)));
+    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));
   }
 
   :host([data-render-mode="shadow"][variant='scoped']) [part~='tab-item'].slds-is-active {
-    --slds-c-tabbar-scoped-text-color: var(--slds-c-tabbar-scoped-text-color-active, var(--slds-g-color-neutral-base-10, var(--sds-g-color-neutral-base-10, #181818)));
+    --slds-c-tabbar-scoped-text-color: var(--slds-c-tabbar-scoped-text-color-active, var(--slds-g-color-on-surface-3));
   }
 
   /* Ensures that borders for tabs overlap */
   :host([data-render-mode="shadow"][variant='scoped']) [part~='tab-item'] + [part~='tab-item'] {
-    margin-inline-start: calc(var(--sds-g-sizing-border-1, 1px) * -1);
+    margin-inline-start: calc(var(--slds-g-sizing-border-1) * -1);
   }
 
   /* SCOPED TAB LINK STYLING */
@@ -225,14 +225,14 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     line-height: var(--slds-c-tabbar-scoped-sizing-height, var(--_slds-c-tabbar-scoped-sizing-height));
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
     padding-block-start: var(--slds-c-tabbar-scoped-spacing-blockstart, var(--slds-c-tabbar-scoped-spacing-block, 0));
-    padding-inline-start: var(--slds-c-tabbar-scoped-spacing-inlinestart, var(--slds-c-tabbar-scoped-spacing-inline, var(--sds-g-spacing-4, 1rem)));
-    padding-inline-end: var(--slds-c-tabbar-scoped-spacing-inlineend, var(--slds-c-tabbar-scoped-spacing-inline, var(--sds-g-spacing-4, 1rem)));
+    padding-inline-start: var(--slds-c-tabbar-scoped-spacing-inlinestart, var(--slds-c-tabbar-scoped-spacing-inline, var(--slds-g-spacing-4)));
+    padding-inline-end: var(--slds-c-tabbar-scoped-spacing-inlineend, var(--slds-c-tabbar-scoped-spacing-inline, var(--slds-g-spacing-4)));
     padding-block-end: var(--slds-c-tabbar-scoped-spacing-blockend, var(--slds-c-tabbar-scoped-spacing-block, 0));
     color: currentcolor;
     background-clip: padding-box;
     border: 0;
-    border-inline-start: var(--sds-g-sizing-border-1, 1px) solid transparent;
-    border-inline-end: var(--sds-g-sizing-border-1, 1px) solid transparent;
+    border-inline-start: var(--slds-g-sizing-border-1) solid transparent;
+    border-inline-end: var(--slds-g-sizing-border-1) solid transparent;
     border-radius: 0;
     display: block;
   }
@@ -242,13 +242,13 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   }
 
   :host([data-render-mode="shadow"][variant='scoped']) [role='tab']:hover {
-    border-color: var(--slds-c-tabbar-scoped-color-border-hover, var(--slds-g-color-border-base-4, var(--sds-g-color-neutral-base-90, #e5e5e5)));
+    border-color: var(--slds-c-tabbar-scoped-color-border-hover, var(--slds-g-color-border-base-4, var(--slds-g-color-border-1)));
     background-color: var(--slds-c-tabbar-scoped-color-background-hover, transparent);
   }
 
   :host([data-render-mode="shadow"][variant='scoped']) .slds-is-active [role='tab'] {
-    background-color: var(--slds-c-tabbar-scoped-color-background-active, var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff)));
-    border-color: var(--slds-c-tabbar-scoped-color-border-active, var(--slds-g-color-border-base-4, var(--sds-g-color-neutral-base-90, #e5e5e5)));
+    background-color: var(--slds-c-tabbar-scoped-color-background-active, var(--slds-g-color-surface-container-1));
+    border-color: var(--slds-c-tabbar-scoped-color-border-active, var(--slds-g-color-border-base-4, var(--slds-g-color-border-1)));
   }
 
   /* SCOPED TAB OVERFLOW STYLING */
@@ -257,26 +257,26 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     line-height: var(--slds-c-tabbar-scoped-sizing-height, var(--_slds-c-tabbar-scoped-sizing-height));
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
-    --slds-c-buttonicon-spacing-inline: var(--sds-g-spacing-4, 1rem);
+    --slds-c-buttonicon-spacing-inline: var(--slds-g-spacing-4);
 
     /* Text Color */
-    --slds-c-button-neutral-text-color: var(--slds-c-tabbar-scoped-text-color, var(--slds-g-color-neutral-base-30, var(--sds-g-color-neutral-base-30, #444444)));
-    --slds-c-button-neutral-text-color-hover: var(--slds-c-tabbar-scoped-text-color, var(--slds-g-color-neutral-base-30, var(--sds-g-color-neutral-base-30, #444444)));
-    --slds-c-button-neutral-text-color-focus: var(--slds-c-tabbar-scoped-text-color, var(--slds-g-color-neutral-base-30, var(--sds-g-color-neutral-base-30, #444444)));
-    --slds-c-button-neutral-text-color-active: var(--slds-c-tabbar-scoped-text-color, var(--slds-g-color-neutral-base-30, var(--sds-g-color-neutral-base-30, #444444)));
+    --slds-c-button-neutral-text-color: var(--slds-c-tabbar-scoped-text-color, var(--slds-g-color-on-surface-2));
+    --slds-c-button-neutral-text-color-hover: var(--slds-c-tabbar-scoped-text-color, var(--slds-g-color-on-surface-2));
+    --slds-c-button-neutral-text-color-focus: var(--slds-c-tabbar-scoped-text-color, var(--slds-g-color-on-surface-2));
+    --slds-c-button-neutral-text-color-active: var(--slds-c-tabbar-scoped-text-color, var(--slds-g-color-on-surface-2));
 
     /* Icon Color */
-    --slds-c-buttonicon-color-foreground: var(--slds-c-tabbar-scoped-text-color, var(--slds-g-color-neutral-base-30, var(--sds-g-color-neutral-base-30, #444444)));
-    --slds-c-buttonicon-color-foreground-hover: var(--slds-c-tabbar-scoped-text-color, var(--slds-g-color-neutral-base-30, var(--sds-g-color-neutral-base-30, #444444)));
-    --slds-c-buttonicon-color-foreground-focus: var(--slds-c-tabbar-scoped-text-color, var(--slds-g-color-neutral-base-30, var(--sds-g-color-neutral-base-30, #444444)));
-    --slds-c-buttonicon-color-foreground-active: var(--slds-c-tabbar-scoped-text-color, var(--slds-g-color-neutral-base-30, var(--sds-g-color-neutral-base-30, #444444)));
+    --slds-c-buttonicon-color-foreground: var(--slds-c-tabbar-scoped-text-color, var(--slds-g-color-on-surface-2));
+    --slds-c-buttonicon-color-foreground-hover: var(--slds-c-tabbar-scoped-text-color, var(--slds-g-color-on-surface-2));
+    --slds-c-buttonicon-color-foreground-focus: var(--slds-c-tabbar-scoped-text-color, var(--slds-g-color-on-surface-2));
+    --slds-c-buttonicon-color-foreground-active: var(--slds-c-tabbar-scoped-text-color, var(--slds-g-color-on-surface-2));
   }
 
   /* VERTICAL TAB BAR STYLING */
 
   :host([data-render-mode="shadow"][variant='vertical']) [part='tab-bar'] {
-    background: var(--slds-c-tabbar-vertical-color-background, var(--slds-g-color-neutral-base-95, var(--sds-g-color-neutral-base-95, #f3f3f3)));
-    border-inline-end: var(--sds-g-sizing-border-1, 1px) solid var(--slds-c-tabbar-vertical-color-border, var(--slds-g-color-border-base-1, var(--sds-g-color-neutral-base-90, #e5e5e5)));
+    background: var(--slds-c-tabbar-vertical-color-background, var(--slds-g-color-surface-container-2));
+    border-inline-end: var(--slds-g-sizing-border-1) solid var(--slds-c-tabbar-vertical-color-border, var(--slds-g-color-border-base-1, var(--slds-g-color-border-1)));
     /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
     width: var(--slds-c-tabbar-vertical-sizing-width, var(--_slds-c-tabbar-vertical-sizing-width));
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
@@ -288,19 +288,19 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     display: flex;
     align-items: center;
     overflow: hidden;
-    border-block-end: var(--sds-g-sizing-border-1, 1px) solid var(--slds-c-tabbar-vertical-color-border, var(--slds-g-color-border-base-1, var(--sds-g-color-neutral-base-90, #e5e5e5)));
+    border-block-end: var(--slds-g-sizing-border-1) solid var(--slds-c-tabbar-vertical-color-border, var(--slds-g-color-border-base-1, var(--slds-g-color-border-1)));
     color: var(--slds-c-tabbar-vertical-text-color, currentcolor);
   }
 
   :host([data-render-mode="shadow"][variant='vertical']) [part='tab-item']:last-child {
-    margin-block-end: calc(var(--sds-g-sizing-border-1, 1px) * -1);
+    margin-block-end: calc(var(--slds-g-sizing-border-1) * -1);
   }
 
   /* 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(--sds-g-sizing-border-1, 1px) * -1);
-    background: var(--slds-c-tabbar-vertical-color-background-active, var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff)));
-    color: var(--slds-c-tabbar-vertical-text-color-active, var(--sds-g-color-brand-base-50, #0176d3));
+    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));
+    color: var(--slds-c-tabbar-vertical-text-color-active, var(--slds-g-color-accent-2));
   }
 
   /* VERTICAL TAB LINK STYLING */
@@ -310,21 +310,21 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     flex: 1 1 0%;
     align-items: center;
     min-width: 0;
-    padding-block-start: var(--slds-c-tabbar-vertical-spacing-blockstart, var(--slds-c-tabbar-vertical-spacing-block, var(--sds-g-spacing-3, 0.75rem)));
-    padding-inline-start: var(--slds-c-tabbar-vertical-spacing-inlinestart, var(--slds-c-tabbar-vertical-spacing-inline, var(--sds-g-spacing-3, 0.75rem)));
-    padding-inline-end: var(--slds-c-tabbar-vertical-spacing-inlineend, var(--slds-c-tabbar-vertical-spacing-inline, var(--sds-g-spacing-3, 0.75rem)));
-    padding-block-end: var(--slds-c-tabbar-vertical-spacing-blockend, var(--slds-c-tabbar-vertical-spacing-block, var(--sds-g-spacing-3, 0.75rem)));
+    padding-block-start: var(--slds-c-tabbar-vertical-spacing-blockstart, var(--slds-c-tabbar-vertical-spacing-block, var(--slds-g-spacing-3)));
+    padding-inline-start: var(--slds-c-tabbar-vertical-spacing-inlinestart, var(--slds-c-tabbar-vertical-spacing-inline, var(--slds-g-spacing-3)));
+    padding-inline-end: var(--slds-c-tabbar-vertical-spacing-inlineend, var(--slds-c-tabbar-vertical-spacing-inline, var(--slds-g-spacing-3)));
+    padding-block-end: var(--slds-c-tabbar-vertical-spacing-blockend, var(--slds-c-tabbar-vertical-spacing-block, var(--slds-g-spacing-3)));
     color: currentcolor;
   }
 
   :host([data-render-mode="shadow"][variant='vertical']) [role='tab']:hover {
-    background: var(--slds-c-tabbar-vertical-color-background-hover, var(--slds-g-color-neutral-base-80, var(--sds-g-color-neutral-base-80, #c9c9c9)));
-    color: var(--slds-c-tabbar-vertical-text-color-hover, var(--slds-g-color-neutral-base-10, var(--sds-g-color-neutral-base-10, #181818)));
+    background: var(--slds-c-tabbar-vertical-color-background-hover, var(--slds-g-color-surface-container-3));
+    color: var(--slds-c-tabbar-vertical-text-color-hover, var(--slds-g-color-on-surface-3));
   }
 
   /* 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-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff)));
+    background: var(--slds-c-tabbar-vertical-color-background-active, var(--slds-g-color-surface-container-1));
     color: currentcolor;
   }
 }

package/src/lightning/tabBar/tabBar.css

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

package/src/lightning/tabBar/tabBar.js

@@ -3,7 +3,8 @@ import labelOverflowMoreAlternativeText from '@salesforce/label/LightningTabs.ov
 import labelOverflowMoreTitle from '@salesforce/label/LightningTabs.overflowMoreTitle';
 import labelErrorStateAlternativeText from '@salesforce/label/LightningTabs.errorStateAlternativeText';
 
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import { reflectAttribute } from 'lightning/utilsPrivate';
 import { calculateOverflow } from 'lightning/overflowLibrary';
@@ -21,7 +22,7 @@ const i18n = {
 const RECOMPUTE_OVERFLOW_THRESHOLD_PX = 30;
 const TARGET_SELECTION_NAME_SUFFIX = 'Tab';
 
-export default class LightningTabBar extends LightningElement {
+export default class LightningTabBar extends LightningShadowBaseClass {
     @api disableOverflow = false;
 
     @api ariaLabel;
@@ -38,6 +39,7 @@ export default class LightningTabBar extends LightningElement {
     _selectedTab;
 
     connectedCallback() {
+        super.connectedCallback();
         this._connected = true;
         if (this.overflowSupported) {
             this._queueOverflow();
@@ -58,6 +60,21 @@ export default class LightningTabBar extends LightningElement {
         if (this.isConnected) {
             this.ariaObserver.sync();
         }
+
+        this.dispatchEvent(
+            new CustomEvent('privatetablinkregister', {
+                cancelable: true,
+                bubbles: true,
+                composed: true,
+                detail: {
+                    tabLinks: this.tabLinks,
+                },
+            })
+        );
+    }
+
+    get tabLinks() {
+        return this.template.querySelectorAll(`a[role="tab"]`);
     }
 
     disconnectedCallback() {

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

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

package/src/lightning/tabset/tabset.css

@@ -1,10 +1 @@
-/* TODO W-12129682: styles are commented out for the future migration of `tabset`
-   to Native Shadow
-
-    :host([data-render-mode="shadow"]) .slds-vertical-tabs {
-        display: flex;
-        overflow: hidden;
-        border: 1px solid var(--slds-g-color-border-base-1, #e5e5e5);
-        border-radius: 0.25rem;]
-    }
-*/
+@import './tabset.lbc.native.css';

package/src/lightning/tabset/tabset.html

@@ -1,15 +1,27 @@
 <template>
     <div class={computedClass} title={title}>
         <template lwc:if={headingLabel}>
-            <div role="heading" aria-level={headingLevel} class={computedHeadingClass} id="tabset-heading">
-                {headingLabel}
-            </div>
-            <lightning-tab-bar variant={variant} onselect={handleTabSelected} aria-labelledby="tabset-heading">
-            </lightning-tab-bar>
+            <div
+                role="heading"
+                aria-level={headingLevel}
+                class={computedHeadingClass}
+                id="tabset-heading"
+                onprivatetablinkregister={handleTabLinkRegister}
+            >{headingLabel}</div>
+            <lightning-tab-bar
+                variant={variant}
+                onselect={handleTabSelected}
+                aria-labelledby="tabset-heading"
+                onprivatetablinkregister={handleTabLinkRegister}
+            ></lightning-tab-bar>
         </template>
         <template lwc:else>
-            <lightning-tab-bar variant={variant} onselect={handleTabSelected} aria-label={defaultAriaLabel}>
-            </lightning-tab-bar>
+            <lightning-tab-bar
+                variant={variant}
+                onselect={handleTabSelected}
+                aria-label={defaultAriaLabel}
+                onprivatetablinkregister={handleTabLinkRegister}
+            ></lightning-tab-bar>
         </template>
         <slot></slot>
     </div>