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

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;
@@ -67,10 +70,11 @@ 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 */
+
   :host([data-render-mode="shadow"][variant='standard']) [role='tab'],:host([data-render-mode="shadow"][variant='scoped']) [role='tab'] {
     max-width: 100%;
     overflow: hidden;
@@ -106,29 +110,30 @@ 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(--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 {
@@ -142,15 +147,17 @@ 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 +180,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 +199,31 @@ 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 +234,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 +251,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 +266,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 +297,20 @@ 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 +320,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/__docs__/tabset.md

@@ -147,7 +147,7 @@ To understand how we implemented SLDS in `lightning-tabset`, see the **Source Co
 
 #### Usage Considerations
 
-When a tabset contains more tabs than could fit on the screen, the tabs that don't fit are moved into a dropdown menu (also known as an overflow) next to the last tab that fits. Note that the active tab always shows and is never moved into the overflow. Truncating the tab label is not supported. When the tab label has more characters than can fit the viewport, the extra characters are not truncated but are hidden from view.
+When a tabset contains more tabs than can fit in the viewport, the tabs that don't fit are moved into a dropdown menu (also known as an overflow) next to the last tab that fits. Note that the active tab always shows and is never moved into the overflow. Truncating the tab label is not supported. When the tab label has more characters than can fit the viewport, the extra characters are not truncated but are hidden from view.
 
 You can nest `lightning-tab` within other elements such as `<div>` or `<template>`, for example to render tabs conditionally using `if:true` and `if:false`. Otherwise, you must nest
 `lightning-tab` directly within `lightning-tabset` tags.
@@ -157,6 +157,29 @@ active tabs content is queryable. In the example, the text `Content of Tab Two`
 
 This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](https://developer.salesforce.com/docs/platform/lwc/guide/migrate-map-aura-lwc-components) in the Lightning Web Components Developer Guide.
 
+#### Accessibility
+
+Use the Tab or arrow keys to navigate to the More menu that’s created when the viewport is too narrow to show all the tabs.
+
+Several attributes enable accessibility features for a tabset heading.
+
+Use `heading-label` to specify custom assistive text for a tabset heading. The value of `heading-label` is rendered as the text content of a `div` element with `role="heading"` and `aria-level="2"`. If you don't specify `heading-label` the default assistive text is "Tabs" in a `div` element with `aria-level="2"`.
+
+Use `heading-level` to pass a value between 1 and 6 to the rendered `aria-level` attribute. The default value is 2. This attribute requires you to also specify `heading-label`.
+
+Specify `heading-visible` to display the assistive text above the tabset when you specify `heading-label`. By default, this attribute is not present so the assistive text is read by screen readers but isn't displayed. When `heading-visible` is present, the assistive text is read by screen readers and displayed.
+
+This example sets custom assistive text for a heading, specifies `heading-level` to change the rendered `aria-level`, and makes the heading visible.
+
+```html
+<template>
+  <lightning-tabset heading-label="Example tabset" heading-level="3" heading-visible>
+    <lightning-tab label="Item One"> One Content! </lightning-tab>
+    <lightning-tab label="Item Two"> Two Content! </lightning-tab>
+  </lightning-tabset>
+</template>
+```
+
 #### Source Code
 
 `lightning-tabset` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

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>