lightning-base-components 1.21.2-alpha → 1.21.3-alpha

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/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.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/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.