lightning-base-components 1.18.5-alpha → 1.18.7-alpha

package/src/lightning/select/select.js

@@ -1,7 +1,6 @@
 import labelRequired from '@salesforce/label/LightningControl.required';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
     classListMutation,
@@ -24,7 +23,7 @@ const i18n = {
     helpTextAlternativeText: labelHelpTextAlternativeText,
 };
 
-export default class LightningSelect extends LightningShadowBaseClass {
+export default class LightningSelect extends LightningElement {
     static delegatesFocus = true;
 
     /**
@@ -72,7 +71,6 @@ export default class LightningSelect extends LightningShadowBaseClass {
     _size;
 
     connectedCallback() {
-        super.connectedCallback();
         this.classList.add('slds-form-element');
         this.updateClassList();
         this.interactingState = new InteractingState();

package/src/lightning/select/select.js-meta.xml

@@ -1,4 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
     <isExposed>true</isExposed>
+    <minApiVersion>59.0</minApiVersion>
+    <support>GA</support>
 </LightningComponentBundle>

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

@@ -1,2 +1,2 @@
-@import 'lightning/sldsCommon';
-@import './spinner.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './spinner.slds.css'; */

package/src/lightning/spinner/spinner.js

@@ -1,5 +1,4 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { normalizeString as normalize } from 'lightning/utilsPrivate';
 
@@ -9,7 +8,7 @@ const DEFAULT_VARIANT = 'base';
 /**
  * Displays an animated spinner.
  */
-export default class LightningSpinner extends LightningShadowBaseClass {
+export default class LightningSpinner extends LightningElement {
     /**
      * The alternative text used to describe the reason for the wait and need for a spinner.
      * @type {string}
@@ -59,7 +58,6 @@ export default class LightningSpinner extends LightningShadowBaseClass {
     _altText = '';
 
     connectedCallback() {
-        super.connectedCallback();
         this.classList.add('slds-spinner_container');
         this.template.addEventListener('mousewheel', this.stopScrolling);
         this.template.addEventListener('touchmove', this.stopScrolling);

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

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

package/src/lightning/tabBar/tabBar.js

@@ -3,8 +3,7 @@ import labelOverflowMoreAlternativeText from '@salesforce/label/LightningTabs.ov
 import labelOverflowMoreTitle from '@salesforce/label/LightningTabs.overflowMoreTitle';
 import labelErrorStateAlternativeText from '@salesforce/label/LightningTabs.errorStateAlternativeText';
 
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { reflectAttribute } from 'lightning/utilsPrivate';
 import { calculateOverflow } from 'lightning/overflowLibrary';
@@ -22,7 +21,7 @@ const i18n = {
 const RECOMPUTE_OVERFLOW_THRESHOLD_PX = 30;
 const TARGET_SELECTION_NAME_SUFFIX = 'Tab';
 
-export default class LightningTabBar extends LightningShadowBaseClass {
+export default class LightningTabBar extends LightningElement {
     @api disableOverflow = false;
 
     @track _allTabs = [];
@@ -37,7 +36,6 @@ export default class LightningTabBar extends LightningShadowBaseClass {
     _selectedTab;
 
     connectedCallback() {
-        super.connectedCallback();
         this._connected = true;
         if (this.overflowSupported) {
             this._queueOverflow();

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);
     }
 

package/src/lightning/timepicker/timepicker.css

@@ -1,3 +1,3 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './timepicker.slds.css';
-@import './form-element.slds.css';
+@import './form-element.slds.css'; */

package/src/lightning/timepicker/timepicker.js

@@ -4,8 +4,7 @@ import labelRangeOverflow from '@salesforce/label/LightningDateTimePicker.rangeO
 import labelRangeUnderflow from '@salesforce/label/LightningDateTimePicker.rangeUnderflow';
 import labelRequired from '@salesforce/label/LightningControl.required';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
-import { track, api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { getTimeToHighlight } from './utils';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
@@ -41,7 +40,7 @@ const TIME_STYLE = {
     LONG: 'long',
 };
 
-export default class LightningTimePicker extends LightningShadowBaseClass {
+export default class LightningTimePicker extends LightningElement {
     static delegatesFocus = true;
 
     @track _disabled = false;
@@ -277,7 +276,6 @@ export default class LightningTimePicker extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.connected = true;
     }
 

package/src/lightning/toast/__docs__/toast.md

@@ -10,7 +10,7 @@ The function also creates a single page-level toast container if one does not ex
 ```javascript
 // c/myComponent.js
 import { LightningElement } from 'lwc';
-import { Toast } from 'lightning/toast';
+import  Toast from 'lightning/toast';
 
 export default class MyComponent extends LightningElement {
     ...
@@ -100,4 +100,4 @@ If no `mode` is provided, the default `mode` will be determined by the value of
 
 `LightningToast` is implemented to be responsive according to the screen resolution. For smaller screen or mobile environments, the toast's **icon** and **description** (i.e. text stored in `message`, and `messageLinks`) will **not be shown** due to the screen's width limitation (see [Toast blueprint screen variants](https://www.lightningdesignsystem.com/guidelines/messaging/components/toasts/#flavor-variants-screen).
 
-The best practice where small screen and mobile environments are the primary use case is to only provide links in the toast's title (ie `label` and `labelLinks`) in order to have links visible and interactive.
+The best practice where small screen and mobile environments are the primary use case is to only provide links in the toast's title (ie `label` and `labelLinks`) in order to have links visible and interactive.