lightning-base-components 1.18.1-alpha → 1.18.2-alpha

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

@@ -0,0 +1,334 @@
+
+/* 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: '') {
+  /* 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;
+    --_slds-c-tabbar-standard-sizing-height: 2.5rem;
+    --_slds-c-tabbar-scoped-font-lineheight: 2.5rem;
+    --_slds-c-tabbar-scoped-sizing-height: 2.5rem;
+    --_slds-c-tabbar-vertical-sizing-width: 12rem;
+    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+
+    /* Color */
+    --slds-c-tabs-item-color-border-active: var(--slds-c-tabbar-standard-color-border-active);
+    --slds-c-tabs-item-color-border-hover: var(--slds-c-tabbar-standard-color-border-hover);
+    --slds-c-tabs-item-text-color: var(--slds-c-tabbar-standard-text-color);
+    --slds-c-tabs-item-text-color-active: var(--slds-c-tabbar-standard-text-color-active);
+    --slds-c-tabs-list-color-border: var(--slds-c-tabbar-standard-color-border);
+
+    /* Sizing */
+    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+    --slds-c-tabs-item-sizing-height: var(--slds-c-tabbar-standard-sizing-height, var(--_slds-c-tabbar-standard-sizing-height));
+    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+    --slds-c-tabs-list-sizing-border: var(--slds-c-tabbar-standard-sizing-border);
+
+    /* Spacing */
+    --slds-c-tabs-item-spacing-block-end: var(--slds-c-tabbar-standard-spacing-block-end);
+    --slds-c-tabs-item-spacing-block-start: var(--slds-c-tabbar-standard-spacing-block-start);
+    --slds-c-tabs-item-spacing-inline-end: var(--slds-c-tabbar-standard-spacing-inline-end);
+    --slds-c-tabs-item-spacing-inline-start: var(--slds-c-tabbar-standard-spacing-inline-start);
+
+    /* Text */
+    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+    --slds-c-tabs-item-line-height: var(--slds-c-tabbar-standard-font-lineheight, var(--_slds-c-tabbar-standard-font-lineheight));
+    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+  }
+
+  :host([data-render-mode="shadow"][variant='standard']) [part~='tab-bar'],:host([data-render-mode="shadow"][variant='scoped']) [part~='tab-bar'] {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  /* SHARED TAB HEADER STYLING */
+
+  :host([data-render-mode="shadow"][variant='standard']) [part~='tab-item'],:host([data-render-mode="shadow"][variant='scoped']) [part~='tab-item'] {
+    position: relative;
+  }
+
+  /* SHARED TAB STYLING */
+
+  :host([data-render-mode="shadow"]) [role='tab'] {
+    text-decoration: none;
+    cursor: pointer;
+    color: currentColor;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-is-active [role='tab']:focus {
+    text-decoration: underline;
+  }
+
+  :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);
+  }
+
+  /* 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;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* SHARED OVERFLOW BUTTON MENU */
+
+  :host([data-render-mode="shadow"]) [part~='tab-overflow'] {
+    display: inline-flex;
+
+    /* Background Color */
+    --slds-c-buttonicon-color-background: transparent;
+
+    /* Background Color */
+    --slds-c-buttonicon-color-background: transparent;
+    --slds-c-buttonicon-color-background-hover: transparent;
+    --slds-c-buttonicon-color-background-focus: transparent;
+    --slds-c-buttonicon-color-background-active: transparent;
+
+    /* Spacing */
+    --slds-c-buttonicon-spacing-block: 0;
+
+    /* Border Color */
+    --slds-c-buttonicon-color-border: transparent;
+    --slds-c-buttonicon-color-border-active: transparent;
+    --slds-c-buttonicon-color-border-hover: transparent;
+    --slds-c-buttonicon-color-border-focus: transparent;
+
+    /* Shadow */
+    --slds-c-buttonicon-shadow: none;
+    --slds-c-buttonicon-shadow-focus: none;
+  }
+
+  /* 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-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)));
+  }
+
+  /* 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)));
+    padding-block-start: var(--slds-c-tabbar-standard-spacing-block-start, var(--slds-c-tabbar-standard-spacing-block, 0));
+    padding-inline-start: var(--slds-c-tabbar-standard-spacing-inline-start, var(--slds-c-tabbar-standard-spacing-inline, var(--sds-g-spacing-3, 0.75rem)));
+    padding-inline-end: var(--slds-c-tabbar-standard-spacing-inline-end, var(--slds-c-tabbar-standard-spacing-inline, var(--sds-g-spacing-3, 0.75rem)));
+    padding-block-end: var(--slds-c-tabbar-standard-spacing-block-end, 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);
+  }
+
+  :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)));
+  }
+
+  :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))));
+  }
+
+  :host([data-render-mode="shadow"][variant='standard']) [part~='tab-item']::after {
+    display: block;
+    content: '';
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    height: 0;
+    position: absolute;
+  }
+
+  /* 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);
+  }
+
+  /* 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));
+  }
+
+  /* STANDARD TAB LINK STYLING */
+
+  :host([data-render-mode="shadow"][variant='standard']) [role='tab'] {
+    display: block;
+    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+    height: var(--slds-c-tabbar-standard-sizing-height, var(--_slds-c-tabbar-standard-sizing-height));
+    line-height: var(--slds-c-tabbar-standard-font-lineheight, var(--_slds-c-tabbar-standard-font-lineheight));
+    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+    border: 0;
+  }
+
+  /* STANDARD TAB OVERFLOW STYLING */
+
+  :host([data-render-mode="shadow"][variant='standard']) [part~='tab-overflow'] {
+    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+    line-height: var(--slds-c-standard-font-lineheight, var(--_slds-c-tabbar-standard-sizing-height));
+    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+    --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)));
+
+    /* 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)));
+  }
+
+  :host([data-render-mode="shadow"][variant='standard']) [part~='tab-overflow'] lightning-button-menu:focus {
+    --sds-c-button-font-decoration: underline;
+  }
+
+  /* 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)));
+    -webkit-box-align: start;
+    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)));
+    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));
+  }
+
+  /* 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)));
+  }
+
+  :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)));
+  }
+
+  /* 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);
+  }
+
+  /* SCOPED TAB LINK STYLING */
+
+  :host([data-render-mode="shadow"][variant='scoped']) [role='tab'] {
+    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+    height: var(--slds-c-tabbar-scoped-sizing-height, var(--_slds-c-tabbar-scoped-sizing-height));
+    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-block-start, var(--slds-c-tabbar-scoped-spacing-block, 0));
+    padding-inline-start: var(--slds-c-tabbar-scoped-spacing-inline-start, var(--slds-c-tabbar-scoped-spacing-inline, var(--sds-g-spacing-4, 1rem)));
+    padding-inline-end: var(--slds-c-tabbar-scoped-spacing-inline-end, var(--slds-c-tabbar-scoped-spacing-inline, var(--sds-g-spacing-4, 1rem)));
+    padding-block-end: var(--slds-c-tabbar-scoped-spacing-block-end, 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-radius: 0;
+    display: block;
+  }
+
+  :host([data-render-mode="shadow"][variant='scoped']) [part='tab-item']:first-child [role='tab'] {
+    border-left: 0;
+  }
+
+  :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)));
+    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)));
+  }
+
+  /* SCOPED TAB OVERFLOW STYLING */
+
+  :host([data-render-mode="shadow"][variant='scoped']) [part~='tab-overflow'] {
+    /* 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);
+
+    /* 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)));
+
+    /* 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)));
+  }
+
+  /* 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)));
+    /* 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 */
+  }
+
+  /* VERTICAL TAB HEADER STYLING */
+
+  :host([data-render-mode="shadow"][variant='vertical']) [part='tab-item'] {
+    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)));
+    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);
+  }
+
+  /* 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));
+  }
+
+  /* VERTICAL TAB LINK STYLING */
+
+  :host([data-render-mode="shadow"][variant='vertical']) [role='tab'] {
+    display: flex;
+    flex: 1 1 0%;
+    align-items: center;
+    min-width: 0;
+    padding-block-start: var(--slds-c-tabbar-vertical-spacing-block-start, var(--slds-c-tabbar-vertical-spacing-block, var(--sds-g-spacing-3, 0.75rem)));
+    padding-inline-start: var(--slds-c-tabbar-vertical-spacing-inline-start, var(--slds-c-tabbar-vertical-spacing-inline, var(--sds-g-spacing-3, 0.75rem)));
+    padding-inline-end: var(--slds-c-tabbar-vertical-spacing-inline-end, var(--slds-c-tabbar-vertical-spacing-inline, var(--sds-g-spacing-3, 0.75rem)));
+    padding-block-end: var(--slds-c-tabbar-vertical-spacing-block-end, var(--slds-c-tabbar-vertical-spacing-block, var(--sds-g-spacing-3, 0.75rem)));
+    color: currentColor;
+    -webkit-box-flex: 1;
+    -webkit-box-align: center;
+  }
+
+  :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)));
+  }
+
+  /* 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)));
+    color: currentColor;
+  }
+}

package/src/lightning/tabBar/tabBar.css

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

package/src/lightning/tabBar/tabBar.html

@@ -2,10 +2,11 @@
     <ul class={computedListClass}
         role="tablist"
         aria-orientation={computedAriaOrientation}
-        onkeydown={handleKeyDown}>
+        onkeydown={handleKeyDown}
+        part="tab-bar">
         <template for:each={_allTabs} for:item="tab">
             <template if:true={tab.visible}>
-                <li data-tab key={tab.value} class={tab.class} onclick={handleTabClick}
+                <li data-tab key={tab.value} class={tab.class} onclick={handleTabClick} part="tab-item"
                     title={tab.title} role="presentation" data-label={tab.label} data-tab-value={tab.value} data-target-selection-name={tab.targetSelectionName}>
                     <a class={tab.linkClass}
                         data-tab-value={tab.value}
@@ -40,7 +41,7 @@
             </template>
         </template>
         <template if:true={overflowSupported}>
-            <li data-overflow class={computedOverflowClass} style={computedOverflowVisibility}>
+            <li data-overflow class={computedOverflowClass} style={computedOverflowVisibility} part="tab-item tab-overflow">
                 <lightning-button-menu variant="bare"
                     alternative-text={i18n.moreAlternativeText}
                     data-target-reveals={targetReveals}

package/src/lightning/tabBar/tabBar.js

@@ -3,11 +3,14 @@ import labelOverflowMoreAlternativeText from '@salesforce/label/LightningTabs.ov
 import labelOverflowMoreTitle from '@salesforce/label/LightningTabs.overflowMoreTitle';
 import labelErrorStateAlternativeText from '@salesforce/label/LightningTabs.errorStateAlternativeText';
 
-import { api, LightningElement, 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';
 import { LightningResizeObserver } from 'lightning/resizeObserver';
 import { handleKeyDownOnTabList } from './keyboard';
+import AriaObserver from 'lightning/ariaObserver';
 
 const i18n = {
     more: labelOverflowMore,
@@ -19,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;
 
     @track _allTabs = [];
@@ -29,11 +32,17 @@ export default class LightningTabBar extends LightningElement {
 
     @track _queueSynchronizeA11 = false;
 
+    @track _tabHeaders = [];
+
+    _selectedTab;
+
     connectedCallback() {
+        super.connectedCallback();
         this._connected = true;
         if (this.overflowSupported) {
             this._queueOverflow();
         }
+        this.ariaObserver = new AriaObserver(this);
     }
 
     renderedCallback() {
@@ -45,6 +54,8 @@ export default class LightningTabBar extends LightningElement {
             this._synchronizeA11y();
             this._queueSynchronizeA11 = false;
         }
+
+        this.ariaObserver.sync();
     }
 
     disconnectedCallback() {
@@ -52,6 +63,11 @@ export default class LightningTabBar extends LightningElement {
         if (this._resizeObserver) {
             this._resizeObserver.disconnect();
         }
+
+        if (this.ariaObserver) {
+            this.ariaObserver.disconnect();
+            this.ariaObserver = undefined;
+        }
     }
 
     @api
@@ -71,6 +87,7 @@ export default class LightningTabBar extends LightningElement {
             }
         }
         this._variant = value;
+        reflectAttribute(this, 'variant', this._variant);
     }
 
     @api
@@ -87,6 +104,7 @@ export default class LightningTabBar extends LightningElement {
                 label: tab.label,
                 title: tab.title || tab.label,
                 linkId: tab.value + '__item',
+                node: tab.node,
                 domId: tab.domId,
                 value: String(tab.value),
                 class: classNames,
@@ -354,7 +372,16 @@ export default class LightningTabBar extends LightningElement {
             );
 
             tabLink.setAttribute('id', tabData.linkId);
-            tabLink.setAttribute('aria-controls', tabData.domId);
+            const ariaObserverConfig = {
+                targetNode: tabLink,
+                attribute: 'aria-controls',
+            };
+            if (tabData.node) {
+                ariaObserverConfig.relatedNodes = tabData.node;
+            } else {
+                ariaObserverConfig.relatedNodeIds = tabData.domId;
+            }
+            this.ariaObserver.connect(ariaObserverConfig);
         });
     }
 

package/src/lightning/tabset/tabset.html

@@ -1,8 +1,9 @@
 <template>
-    <div class={computedClass} title={title}
-        onprivatetabregister={handleTabRegister}
-        onprivatetabdatachange={handleTabDataChange}>
-        <lightning-tab-bar variant={variant} onselect={handleTabSelected}></lightning-tab-bar>
+    <div class={computedClass} title={title}>
+        <lightning-tab-bar
+            variant={variant}
+            onselect={handleTabSelected}>
+        </lightning-tab-bar>
         <slot></slot>
     </div>
 </template>

package/src/lightning/tabset/tabset.js

@@ -21,10 +21,19 @@ export default class LightningTabset extends LightningElement {
 
     @track _variant = 'standard';
 
+    @track _tabHeaders = [];
+
     connectedCallback() {
         this._tabByValue = {};
-        this._tabHeaders = [];
         this._connected = true;
+        this.addEventListener(
+            'privatetabregister',
+            this.handleTabRegister.bind(this)
+        );
+        this.addEventListener(
+            'privatetabdatachange',
+            this.handleTabDataChange.bind(this)
+        );
     }
 
     disconnectedCallback() {
@@ -115,7 +124,6 @@ export default class LightningTabset extends LightningElement {
             );
             if (index >= 0) {
                 this._tabHeaders.splice(index, 1);
-
                 this._updateTabBarHeaders(this._tabHeaders);
 
                 this._tabByValue[tabValue] = undefined;
@@ -131,6 +139,7 @@ export default class LightningTabset extends LightningElement {
         this._tabHeaders.splice(tabIndex, 0, {
             value: tabValue,
             label: tab.label,
+            node: tab,
             domId: tab.id,
             title: tab.title,
             iconName: tab.iconName,
@@ -178,15 +187,6 @@ export default class LightningTabset extends LightningElement {
         tab.loadContent();
     }
 
-    _selectTabHeaderByTabValue(value) {
-        if (!this._connected) {
-            return;
-        }
-
-        const tabBar = this.template.querySelector('lightning-tab-bar');
-        tabBar.selectTabByValue(value);
-    }
-
     handleTabSelected(event) {
         const selectedTabValue = event.detail.value;
         const tab = this._tabByValue[selectedTabValue];
@@ -232,11 +232,29 @@ export default class LightningTabset extends LightningElement {
         }
     }
 
+    /**
+     * Need to set tabHeaders programmatically this way. If done declaratively, LWC appears to batch
+     * the request to re-render the tab-bar until after all the tabs have been registered. If all tabs
+     * haven't been registered, it may not carry out future operations on the tab-bar accurately.
+     * Ex. it will not be able to find the selected default tab later during that tab's registration phase.
+     * This would cause the active default tab to not be selected.
+     *
+     * @param {Array} headers
+     */
     _updateTabBarHeaders(headers) {
         this.template.querySelector('lightning-tab-bar').tabHeaders =
             headers.slice();
     }
 
+    _selectTabHeaderByTabValue(value) {
+        if (!this._connected) {
+            return;
+        }
+
+        const tabBar = this.template.querySelector('lightning-tab-bar');
+        tabBar.selectTabByValue(value);
+    }
+
     get computedClass() {
         return tabClassPrefixByVariant[this.variant];
     }