lightning-base-components 1.18.5-alpha → 1.18.6-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.18.5-alpha",
+    "version": "1.18.6-alpha",
     "license": "MIT",
     "files": [
         "external",
@@ -1306,8 +1306,9 @@
             "lightning-radio-group",
             "lightning-select",
             "lightning-spinner",
-            "lightning-tab",
             "lightning-tab-bar",
+            "lightning-toast",
+            "lightning-toast-container",
             "lightning-timepicker",
             "lightning-vertical-navigation",
             "lightning-vertical-navigation-section"

package/src/lightning/button/button.js

@@ -4,6 +4,7 @@ import {
     normalizeString as normalize,
     normalizeBoolean,
     reflectAttribute,
+    isCSR,
 } from 'lightning/utilsPrivate';
 import LightningPrimitiveButton from 'lightning/primitiveButton';
 import template from './button.html';
@@ -230,7 +231,7 @@ export default class LightningButton extends LightningPrimitiveButton {
     }
 
     get button() {
-        return this.template.querySelector('button');
+        return isCSR ? this.template.querySelector('button') : null;
     }
 
     /**
@@ -240,7 +241,7 @@ export default class LightningButton extends LightningPrimitiveButton {
     connectedCallback() {
         // Set `data-render-mode` attribute in native shadow mode
         if (!this.template.synthetic) {
-            this.template.host.setAttribute('data-render-mode', 'shadow');
+            this.setAttribute('data-render-mode', 'shadow');
         }
         if (!this._connected) {
             reflectAttribute(this, 'variant', this._normalizedVariant);

package/src/lightning/f6Controller/f6Controller.js

@@ -5,6 +5,7 @@ const DEBOUNCE_KEY_DOWN = 300;
 export const DEFAULT_CONFIG = {
     navKey: 'F6',
     f6RegionAttribute: 'data-f6-region',
+    f6RegionHighlightClass: 'f6-highlight',
 };
 
 /**
@@ -33,7 +34,7 @@ export const getActiveElement = (element) => {
  * quickly move to designated regions in a page.
  * It handles logic for:
  * - Globally detecting F6 regions (i.e. registered components must have the data attribute stored in config - f6RegionAttribute
- *  in their tag, by default, 'data-f6-region')
+ *   in their tag, by default, 'data-f6-region')
  * - Handling F6 keypresses by focusing and highlighting F6 regions
  * Supported keyboard shortcuts:
  * - Ctrl/Cmd + F6 to move focus to the next available registered region.
@@ -71,10 +72,32 @@ export class F6Controller {
     appendStyleElement() {
         // all F6 regions must be position relative.
         this._styleElement = document.createElement('style');
-        this._styleElement.innerText = `[${this.config.f6RegionAttribute}]:focus-within { position: relative; outline: rgb(94, 158, 214) 3px solid; outline-offset: 3px; z-index: 9999;}`;
+        const selector = `[${this.config.f6RegionAttribute}].${this.config.f6RegionHighlightClass}`;
+        this._styleElement.innerText = `${selector} { position: relative; }  ${selector}::after { width: 100%; height: 100%; content: ''; outline: rgb(94, 158, 214) 3px solid; outline-offset: -3px; position: absolute; top: 0; left: 0; z-index: 9999; }`;
         this._styleElement.setAttribute('type', 'text/css');
         document.head.appendChild(this._styleElement);
     }
+
+    /**
+     * Clears all regions of outlines.
+     */
+    clearRegionHighlights() {
+        if (!this.regions || !this.regions.length) {
+            return;
+        }
+        this.regions.forEach((region) => {
+            region.classList.remove(this.config.f6RegionHighlightClass);
+        });
+    }
+
+    /**
+     * Outlines the given element with a dashed line.
+     * @param {Element} element, element to highlight
+     */
+    addRegionHighlight(element) {
+        element.classList.add(this.config.f6RegionHighlightClass);
+    }
+
     /**
      * Find the first focusable element inside of the input element.
      * If no focusable element, set the input element to be focusable.
@@ -130,7 +153,9 @@ export class F6Controller {
         if (adjacentRegionIndex === -1) {
             return;
         }
-        this.focusIn(this.regions[adjacentRegionIndex]);
+        const regionToFocus = this.regions[adjacentRegionIndex];
+        this.focusIn(regionToFocus);
+        this.addRegionHighlight(regionToFocus);
     }
 
     /**
@@ -320,6 +345,7 @@ export class F6Controller {
      */
     initialize(config = {}) {
         document.addEventListener('keydown', this._debounceKeyDownHandler);
+        document.addEventListener('click', this.handleClick);
         this.regions = [];
         this.config = {
             ...this.config,
@@ -331,6 +357,7 @@ export class F6Controller {
     /** Removes the event listeners bound in initialize(). */
     cleanUp() {
         document.removeEventListener('keydown', this._debounceKeyDownHandler);
+        document.removeEventListener('click', this.handleClick);
         this._regions = [];
         this._config = DEFAULT_CONFIG;
         this._debounceKeyDownHandler = null;
@@ -340,12 +367,17 @@ export class F6Controller {
         }
     }
 
+    handleClick = () => {
+        this.clearRegionHighlights();
+    };
+
     /**
      * handle document keydown event, move focus to the adjacent region if it detects CTRL/CMD + F6
      * @param {KeyDown} event
      */
 
     handleKeyDown = (event) => {
+        this.clearRegionHighlights();
         const { key, ctrlKey, metaKey } = event;
         if (key === this.config.navKey && (ctrlKey || metaKey)) {
             this.populateRegions();
@@ -371,6 +403,10 @@ export class F6Controller {
 
         return NodeFilter.FILTER_SKIP;
     };
+
+    getConfig() {
+        return Object.freeze(this.config);
+    }
 }
 
 let f6Controller;
@@ -380,3 +416,13 @@ export const createF6Controller = (config) => {
     }
     return f6Controller;
 };
+
+export const getCurrentRegionAttributeName = () => {
+    if (f6Controller) {
+        const config = f6Controller.getConfig();
+        if (config) {
+            return config.f6RegionAttribute;
+        }
+    }
+    return undefined;
+};

package/src/lightning/formattedRichText/formatted-rich-text.slds.css

@@ -1,6 +1,6 @@
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) {
-  line-height: var(--sds-g-line-height);
+  line-height: var(--sds-g-font-lineheight, 1.5);
   overflow-wrap: break-word;
   word-wrap: break-word;
   -webkit-hyphens: manual;

package/src/lightning/formattedRichText/formattedRichText.css

@@ -1,2 +1,3 @@
 @import 'lightning/sldsCommon';
 @import './formatted-rich-text.slds.css';
+@import 'lightning/sldsUtilsThemes';

package/src/lightning/formattedRichText/formattedRichText.html

@@ -1,4 +1,4 @@
 <template>
     <!-- Container for rich text -->
-    <span lwc:dom="manual"></span>
+    <span lwc:dom="manual" part="formatted-rich-text"></span>
 </template>

package/src/lightning/formattedRichText/formattedRichText.js

@@ -14,6 +14,7 @@ import {
  * Other tags and attributes are removed and only their text content is displayed.
  */
 export default class LightningFormattedRichText extends LightningShadowBaseClass {
+    static validationOptOut = ['class'];
     /**
      * If present, the component does not create links in the rich text.
      * @type {boolean}

package/src/lightning/layout/layout.js

@@ -13,6 +13,8 @@ import { normalizeBoolean } from 'lightning/utilsPrivate';
  * Represents a responsive grid system for arranging containers on a page.
  */
 export default class LightningLayout extends LightningShadowBaseClass {
+    static validationOptOut = ['class'];
+
     /**
      * Determines how to spread the layout items horizontally.
      * The alignment options are center, space, spread, and end.

package/src/lightning/layoutItem/layoutItem.js

@@ -15,6 +15,8 @@ import {
  * @slot default Placeholder for your content in lightning-layout-item.
  */
 export default class LightningLayoutItem extends LightningShadowBaseClass {
+    static validationOptOut = ['class'];
+
     /**
      * Make the item fluid so that it absorbs any extra space in its
      * container or shrinks when there is less space. Allowed values are:

package/src/lightning/primitiveButton/primitiveButton.js

@@ -2,6 +2,7 @@ import { api, track } from 'lwc';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import {
     isIE11,
+    isCSR,
     normalizeBoolean,
     normalizeString,
     buttonGroupOrderClass,
@@ -149,7 +150,7 @@ export default class LightningPrimitiveButton extends LightningShadowBaseClass {
     @api
     set ariaControls(value) {
         this.originalAriaControls = value;
-        this.template.host.setAttribute('aria-controls', value);
+        this.setAttribute('aria-controls', value);
         this.setHostRoleAttribute(BUTTON);
     }
 
@@ -165,7 +166,7 @@ export default class LightningPrimitiveButton extends LightningShadowBaseClass {
     @api
     set ariaOwns(value) {
         this.originalAriaOwns = value;
-        this.template.host.setAttribute('aria-owns', value);
+        this.setAttribute('aria-owns', value);
         this.setHostRoleAttribute(BUTTON);
     }
 
@@ -181,7 +182,7 @@ export default class LightningPrimitiveButton extends LightningShadowBaseClass {
     @api
     set ariaDetails(value) {
         this.originalAriaDetails = value;
-        this.template.host.setAttribute('aria-details', value);
+        this.setAttribute('aria-details', value);
         this.setHostRoleAttribute(BUTTON);
     }
 
@@ -197,7 +198,7 @@ export default class LightningPrimitiveButton extends LightningShadowBaseClass {
     @api
     set ariaFlowTo(value) {
         this.originalAriaFlowTo = value;
-        this.template.host.setAttribute('aria-flowto', value);
+        this.setAttribute('aria-flowto', value);
         this.setHostRoleAttribute(BUTTON);
     }
 
@@ -453,7 +454,7 @@ export default class LightningPrimitiveButton extends LightningShadowBaseClass {
         // Workaround for an IE11 bug where click handlers on button ancestors
         // receive the click event even if the button element has the `disabled`
         // attribute set.
-        if (isIE11) {
+        if (isIE11 && isCSR) {
             this.template.addEventListener('click', (event) => {
                 if (this.disabled) {
                     event.stopImmediatePropagation();
@@ -487,9 +488,8 @@ export default class LightningPrimitiveButton extends LightningShadowBaseClass {
      * @default undefined
      */
     setHostRoleAttribute(value) {
-        const hostElement = this.template.host;
-        let ariaRoleValue = hostElement.getAttribute(ROLE) || value;
+        let ariaRoleValue = this.getAttribute(ROLE) || value;
 
-        hostElement.setAttribute(ROLE, ariaRoleValue);
+        this.setAttribute(ROLE, ariaRoleValue);
     }
 }

package/src/lightning/sldsCommon/sldsCommon.css

@@ -24,8 +24,8 @@ h6 {
 }
 
 a {
-    color: var(--slds-g-color-brand-base-50, #0176d3);
-    text-decoration: none;
+    color: var(--slds-g-link-color, var(--slds-g-color-brand-base-50, #0176d3));
+    text-decoration: var(--_slds-g-font-decoration, none);
     transition: color 0.1s linear;
     background-color: transparent;
 }
@@ -37,16 +37,24 @@ a:hover {
 
 a:hover,
 a:focus {
-    text-decoration: underline;
-    color: var(--slds-g-color-brand-base-30, #014486);
+    text-decoration: var(--_slds-g-font-decoration-hover, underline);
+    color: var(--slds-g-link-color-hover, var(--slds-g-color-brand-base-30, #014486));
 }
 
 a:active {
-    color: var(--slds-g-color-brand-base-30, #014486);
+    color: var(--slds-g-link-color-active, var(--slds-g-color-brand-base-30, #014486));
 }
 
 a:focus-visible {
-    outline-color: var(--slds-g-color-brand-base-50, #0176d3);
+    outline-color: var(--_slds-g-color-outline, var(--slds-g-color-brand-base-50, #0176d3));
+}
+
+a:focus {
+    box-shadow: var(--_slds-g-shadow);
+    border-color: var(--_slds-g-color-border);
+    border-width: var(--_slds-g-sizing-border);
+    border-style: var(--_slds-g-style-border);
+    outline: var(--_slds-g-font-decoration-hover);
 }
 
 a,

package/src/lightning/sldsUtilsPosition/sldsUtilsPosition.css

@@ -1,18 +1,18 @@
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
-.slds-is-static {
+:host([data-render-mode="shadow"]) .slds-is-static {
     position: static;
 }
 
-.slds-is-relative {
+:host([data-render-mode="shadow"]) .slds-is-relative {
     position: relative;
 }
 
-.slds-is-fixed {
+:host([data-render-mode="shadow"]) .slds-is-fixed {
     position: fixed;
 }
 
-.slds-is-absolute {
+:host([data-render-mode="shadow"]) .slds-is-absolute {
     position: absolute;
 }

package/src/lightning/sldsUtilsThemes/sldsUtilsThemes.css

@@ -16,16 +16,16 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 /* .slds-theme {} */
 
-.slds-theme_default {
+:host([data-render-mode="shadow"]) .slds-theme_default {
     background-color: var(--slds-g-color-neutral-base-100, #fff);
     color: var(--slds-g-color-neutral-base-10, #181818);
 }
 
-.slds-theme_shade {
+:host([data-render-mode="shadow"]) .slds-theme_shade {
     background-color: var(--slds-g-color-neutral-base-95, #f3f3f3);
 }
 
-.slds-theme_inverse {
+:host([data-render-mode="shadow"]) .slds-theme_inverse {
     color: var(--slds-g-color-neutral-base-100, #fff);
     background-color: var(--slds-g-color-brand-base-10, #001639);
     border-color: var(--slds-g-color-brand-base-10, #001639);
@@ -54,7 +54,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     color: var(--slds-g-color-neutral-100-opacity-10, rgb(255 255 255 / 15%));
 } */
 
-.slds-theme_alt-inverse {
+:host([data-render-mode="shadow"]) .slds-theme_alt-inverse {
     color: var(--slds-g-color-neutral-base-100, #fff);
     background-color: var(--slds-g-color-brand-base-20, #032d60);
     border-color: var(--slds-g-color-brand-base-20, #032d60);
@@ -83,9 +83,15 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     color: var(--slds-g-color-neutral-100-opacity-10, rgb(255 255 255 / 15%));
 } */
 
-.slds-theme_success {
+:host([data-render-mode="shadow"]) .slds-theme_success {
     color: var(--slds-g-color-neutral-base-100, #fff);
     background-color: var(--slds-g-color-success-base-50, #2e844a);
+
+    --slds-g-link-color: var(--slds-g-color-neutral-base-100, #fff);
+    --slds-g-link-color-active: var(--slds-g-color-neutral-100-opacity-50, rgb(255 255 255 / 50%));
+    --slds-g-link-color-hover: var(--slds-g-color-neutral-base-100, #fff);
+    --_slds-g-font-decoration: underline;
+    --_slds-g-font-decoration-hover: none;
 }
 
 /* .slds-theme_success a:not(.slds-button--neutral) {
@@ -111,9 +117,15 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     color: var(--slds-g-color-neutral-100-opacity-10, rgb(255 255 255 / 15%));
 } */
 
-.slds-theme_info {
+:host([data-render-mode="shadow"]) .slds-theme_info {
     color: var(--slds-g-color-neutral-base-100, #fff);
     background-color: var(--slds-g-color-neutral-base-50, #747474);
+
+    --slds-g-link-color: var(--slds-g-color-neutral-base-100, #fff);
+    --slds-g-link-color-active: var(--slds-g-color-neutral-100-opacity-50, rgb(255 255 255 / 50%));
+    --slds-g-link-color-hover: var(--slds-g-color-neutral-base-100, #fff);
+    --_slds-g-font-decoration: underline;
+    --_slds-g-font-decoration-hover: none;
 }
 
 /* .slds-theme_info a:not(.slds-button--neutral) {
@@ -139,9 +151,20 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     color: var(--slds-g-color-neutral-100-opacity-10, rgb(255 255 255 / 15%));
 } */
 
-.slds-theme_warning {
+:host([data-render-mode="shadow"]) .slds-theme_warning {
     background-color: var(--slds-g-color-warning-base-60, #fe9339);
     color: var(--slds-g-color-neutral-base-10, #181818);
+
+    --slds-g-link-color: var(--slds-g-color-neutral-base-10, #181818);
+    --slds-g-link-color-active: var(--slds-g-color-neutral-base-30, #514f4d);
+    --slds-g-link-color-hover: var(--slds-g-color-neutral-base-10, #181818);
+    --_slds-g-font-decoration: underline;
+    --_slds-g-font-decoration-hover: none;
+    --_slds-g-shadow: 0 0 3px var(--slds--g-color-neutral-base-30, #514f4d);
+    --_slds-g-style-border: solid;
+    --_slds-g-sizing-border: var(--sds-g-sizing-border-1);
+    --_slds-g-color-border: var(--slds-g-color-neutral-base-30, #514f4d);
+    --_slds-g-color-outline: transparent;
 }
 
 /**
@@ -181,34 +204,42 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 .slds-theme_warning a[disabled] {
     color: var(--slds-g-color-neutral-base-30, #514f4d);
 }
+*/
 
-.slds-theme_warning button {
+:host([data-render-mode="shadow"]) .slds-theme_warning ::part(button) {
     color: var(--slds-g-color-neutral-base-30, #514f4d);
     text-decoration: underline;
+
+    --slds-c-icon-color-foreground: var(--slds-g-color-neutral-base-30, #514f4d);
 }
 
-.slds-theme_warning button:hover {
+.slds-theme_warning ::part(button):hover {
     color: var(--slds-g-color-neutral-base-50, #706e6b);
 }
 
-.slds-theme_warning button:focus {
+:host([data-render-mode="shadow"])  .slds-theme_warning ::part(button):focus {
     color: var(--slds-g-color-neutral-base-30, #514f4d);
     box-shadow: 0 0 3px var(--slds-g-color-neutral-base-30, #514f4d);
     border: 1px solid var(--slds-g-color-neutral-base-30, #514f4d);
 }
 
-.slds-theme_warning button:active {
+:host([data-render-mode="shadow"])  .slds-theme_warning ::part(button):active {
     color: var(--slds-g-color-neutral-base-50, #706e6b);
 }
 
-.slds-theme_warning .slds-icon,
-.slds-theme_warning .slds-button__icon {
-    fill: var(--slds-g-color-neutral-base-30, #514f4d);
-} */
+:host([data-render-mode="shadow"]) .slds-theme_warning ::part(boundary) {
+    --slds-c-icon-color-foreground: var(--slds-g-color-neutral-base-30, #514f4d);
+}
 
-.slds-theme_error {
+:host([data-render-mode="shadow"]) .slds-theme_error {
     color: var(--slds-g-color-neutral-base-100, #fff);
     background-color: var(--slds-g-color-error-base-40, #ea001e);
+
+    --slds-g-link-color: var(--slds-g-color-neutral-base-100, #fff);
+    --slds-g-link-color-active: var(--slds-g-color-neutral-100-opacity-50, rgb(255 255 255 / 50%));
+    --slds-g-link-color-hover: var(--slds-g-color-neutral-base-100, #fff);
+    --_slds-g-font-decoration: underline;
+    --_slds-g-font-decoration-hover: none;
 }
 
 /* .slds-theme_error a:not(.slds-button--neutral) {
@@ -234,7 +265,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     color: var(--slds-g-color-neutral-100-opacity-10, rgb(255 255 255 / 15%));
 } */
 
-.slds-theme_offline {
+:host([data-render-mode="shadow"]) .slds-theme_offline {
     color: var(--slds-g-color-neutral-base-100, #fff);
     background-color: var(--slds-g-color-neutral-base-30, #444);
 }
@@ -262,12 +293,12 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     color: var(--slds-g-color-neutral-100-opacity-10, rgb(255 255 255 / 15%));
 } */
 
-.slds-theme_alert-texture {
+:host([data-render-mode="shadow"]) .slds-theme_alert-texture {
     background-image: linear-gradient(45deg, rgb(0 0 0 / 2.5%) 25%, transparent 25%, transparent 50%, rgb(0 0 0 / 2.5%) 50%, rgb(0 0 0 / 2.5%) 75%, transparent 75%, transparent);
     background-size: 64px 64px;
 }
 
-.slds-theme_inverse-text {
+:host([data-render-mode="shadow"]) .slds-theme_inverse-text {
     color: var(--slds-g-color-neutral-base-100, #fff);
 }
 

package/src/lightning/spinner/spinner.js

@@ -1,7 +1,7 @@
 import { api } from 'lwc';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
-import { normalizeString as normalize } from 'lightning/utilsPrivate';
+import { normalizeString as normalize, isCSR } from 'lightning/utilsPrivate';
 
 const DEFAULT_SIZE = 'medium';
 const DEFAULT_VARIANT = 'base';
@@ -10,6 +10,8 @@ const DEFAULT_VARIANT = 'base';
  * Displays an animated spinner.
  */
 export default class LightningSpinner extends LightningShadowBaseClass {
+    static validationOptOut = ['class'];
+
     /**
      * The alternative text used to describe the reason for the wait and need for a spinner.
      * @type {string}
@@ -61,8 +63,10 @@ export default class LightningSpinner extends LightningShadowBaseClass {
     connectedCallback() {
         super.connectedCallback();
         this.classList.add('slds-spinner_container');
-        this.template.addEventListener('mousewheel', this.stopScrolling);
-        this.template.addEventListener('touchmove', this.stopScrolling);
+        if (isCSR) {
+            this.template.addEventListener('mousewheel', this.stopScrolling);
+            this.template.addEventListener('touchmove', this.stopScrolling);
+        }
     }
 
     renderedCallback() {

package/src/lightning/tab/tab.js

@@ -1,36 +1,28 @@
-import { api, track } from 'lwc';
+import { LightningElement, 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 LightningShadowBaseClass {
+export default class LightningTab extends LightningElement {
     @track _loadContent = false;
-    _registered = false;
 
     connectedCallback() {
-        super.connectedCallback();
         this._connected = true;
-    }
 
-    renderedCallback() {
-        if (!this._registered) {
-            this._registered = true;
-            this.dispatchEvent(
-                new CustomEvent('privatetabregister', {
-                    cancelable: true,
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        setDeRegistrationCallback: (deRegistrationCallback) => {
-                            this._deRegistrationCallback =
-                                deRegistrationCallback;
-                        },
+        this.dispatchEvent(
+            new CustomEvent('privatetabregister', {
+                cancelable: true,
+                bubbles: true,
+                composed: true,
+                detail: {
+                    setDeRegistrationCallback: (deRegistrationCallback) => {
+                        this._deRegistrationCallback = deRegistrationCallback;
                     },
-                })
-            );
-        }
+                },
+            })
+        );
     }
 
     /**

package/src/lightning/tabset/tabset.js

@@ -23,8 +23,6 @@ export default class LightningTabset extends LightningElement {
 
     @track _tabHeaders = [];
 
-    _rerender = false;
-
     connectedCallback() {
         this._tabByValue = {};
         this._connected = true;
@@ -38,19 +36,6 @@ export default class LightningTabset extends LightningElement {
         );
     }
 
-    // must wait for this entire `tab-set` component to be rendered in order to
-    // successfully querySelect `tab-bar` from it, in methods such as _updateTabBarHeaders
-    // or _selectTab.
-    // using _rerender to trigger renderedCallback and execute these methods in here
-    // instead of the handleTabRegister method, where `tab-bar` is not querySelectable.
-    renderedCallback() {
-        if (this._rerender) {
-            this._rerender = false;
-            this._updateTabBarHeaders(this._tabHeaders);
-            this._selectTab(this._activeTabValue);
-        }
-    }
-
     disconnectedCallback() {
         this._connected = false;
     }
@@ -99,8 +84,7 @@ export default class LightningTabset extends LightningElement {
 
     handleTabRegister(event) {
         event.stopPropagation();
-        // setting this to true, will trigger _updateTabBarHeaders and _selectTab in renderedCallback
-        this._rerender = true;
+
         const tab = event.target;
 
         tab.role = 'tabpanel';
@@ -165,11 +149,6 @@ export default class LightningTabset extends LightningElement {
             endIconAlternativeText: tab.endIconAlternativeText,
             showErrorIndicator: tab.showErrorIndicator,
         });
-
-        // need to leave this _updateTabBarHeaders here so that `tab-bar` can be updated
-        // in the case of a "conditional tab". the _updateTabBarHeaders in the renderedCallback
-        // has no knowledge of the new tab being added.
-        // this call works here in the "conditional tab" case, as `tab-set` is already rendered.
         this._updateTabBarHeaders(this._tabHeaders);
 
         this._tabByValue[tabValue] = tab;
@@ -178,6 +157,10 @@ export default class LightningTabset extends LightningElement {
         if (!this._activeTabValue) {
             this._activeTabValue = tab.value;
         }
+
+        if (this._activeTabValue === tab.value) {
+            this._selectTab(tabValue);
+        }
     }
 
     _selectTab(value) {
@@ -259,17 +242,16 @@ export default class LightningTabset extends LightningElement {
      * @param {Array} headers
      */
     _updateTabBarHeaders(headers) {
-        if (this.template.querySelector('lightning-tab-bar')) {
-            this.template.querySelector('lightning-tab-bar').tabHeaders =
-                headers.slice();
-        }
+        this.template.querySelector('lightning-tab-bar').tabHeaders =
+            headers.slice();
     }
 
     _selectTabHeaderByTabValue(value) {
-        const tabBar = this.template.querySelector('lightning-tab-bar');
-        if (!this._connected || !tabBar) {
+        if (!this._connected) {
             return;
         }
+
+        const tabBar = this.template.querySelector('lightning-tab-bar');
         tabBar.selectTabByValue(value);
     }