lightning-base-components 1.18.7-alpha → 1.18.8-alpha

package/src/lightning/spinner/spinner.slds.css

@@ -32,7 +32,7 @@
 
   /* 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-c-spinner-brand-color-background,
       var(--sds-g-color-brand-base-60, #1b96ff)
@@ -41,7 +41,7 @@
 
   /* 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-c-spinner-inverse-color-background,
       var(--sds-g-color-neutral-base-100, #ffffff)
@@ -295,7 +295,7 @@
 
   /* end size xx-small */
 
-  :host([data-render-mode="shadow"]) [part~='spinner'] {
+  :host([data-render-mode="shadow"]) [part='spinner'] {
     position: absolute;
     top: 50%;
     width: 2rem;
@@ -306,16 +306,16 @@
     transform: translate(-50%, -50%) rotate(90deg);
   }
 
-  :host([data-render-mode="shadow"]) [part~='spinner'],:host([data-render-mode="shadow"]) 
-  [part~='dot-a'],:host([data-render-mode="shadow"]) 
-  [part~='dot-b'] {
+  :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"]) 
-  [part~='dot-b'] {
+  :host([data-render-mode="shadow"]) [part='dot-a'],:host([data-render-mode="shadow"]) 
+  [part='dot-b'] {
     position: absolute;
     top: 0;
     left: 0;
@@ -323,12 +323,12 @@
   }
 
   /* 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"]) 
-  [part~='dot-a']::after,:host([data-render-mode="shadow"]) 
-  [part~='dot-b']::after {
+  :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"]) 
+  [part='dot-a']::after,:host([data-render-mode="shadow"]) 
+  [part='dot-b']::after {
     content: '';
     position: absolute;
     background-color: var(--slds-c-spinner-color-background, var(--sds-g-color-neutral-base-65, #a0a0a0));
@@ -338,59 +338,59 @@
     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.33333ms;
   }
 
-  :host([data-render-mode="shadow"]) [part~='dot-a']::before {
+  :host([data-render-mode="shadow"]) [part='dot-a']::before {
     animation-delay: 83.33333ms;
   }
 
-  :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.66667ms;
   }
 
-  :host([data-render-mode="shadow"]) [part~='dot-a']::after {
+  :host([data-render-mode="shadow"]) [part='dot-a']::after {
     animation-delay: 583.33333ms;
   }
 
-  :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"]) 
-  [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"]) 
-  [part~='dot-b']::after,:host([data-render-mode="shadow"]) 
-  [part~='dot-b']::before {
+  :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"]) 
+  [part='dot-b']::after,:host([data-render-mode="shadow"]) 
+  [part='dot-b']::before {
     width: 0.5rem;
     height: 0.5rem;
   }
 
-  :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 {
+  :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;
     top: -0.25rem;
     left: -0.25rem;
   }
 
-  :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 {
+  :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;
     top: -0.25rem;
     right: -0.25rem;

package/src/lightning/tab/tab.css

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

package/src/lightning/tab/tab.js

@@ -1,28 +1,51 @@
-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(
+                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;
+    renderedCallback() {
+        if (!this._registered && !this.template.synthetic) {
+            this._registered = true;
+            this.dispatchEvent(
+                new CustomEvent('privatetabregister', {
+                    cancelable: true,
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        setDeRegistrationCallback: (deRegistrationCallback) => {
+                            this._deRegistrationCallback =
+                                deRegistrationCallback;
+                        },
                     },
-                },
-            })
-        );
+                })
+            );
+        }
     }
 
     /**

package/src/lightning/tab/tab.slds.css

@@ -0,0 +1,47 @@
+
+@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-block-start);
+    --slds-c-tabs-panel-spacing-block-end: var(--slds-c-tab-panel-spacing-block-end);
+    --slds-c-tabs-panel-spacing-inline-end: var(--slds-c-tab-panel-spacing-inline-end);
+    --slds-c-tabs-panel-spacing-inline-start: var(--slds-c-tab-panel-spacing-inline-start);
+
+    position: relative;
+    padding-block-start: var(--slds-c-tab-panel-spacing-block-start, var(--sds-g-spacing-3, 0.75rem));
+    padding-inline-end: var(--slds-c-tab-panel-spacing-inline-end, 0);
+    padding-block-end: var(--slds-c-tab-panel-spacing-block-end, var(--sds-g-spacing-3, 0.75rem));
+    padding-inline-start: var(--slds-c-tab-panel-spacing-inline-start, 0);
+  }
+
+  :host([data-render-mode="shadow"].slds-tabs_scoped__content) {
+    background-color: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
+    border: var(--sds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-base-4, var(--sds-g-color-neutral-base-80, #c9c9c9));
+    border-block-start: 0;
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+    border-end-end-radius: var(--sds-g-spacing-1, 0.25rem);
+    border-end-start-radius: var(--sds-g-spacing-1, 0.25rem);
+    padding: var(--sds-g-spacing-4, 1rem);
+  }
+
+  :host([data-render-mode="shadow"].slds-vertical-tabs__content) {
+    flex: 1;
+    padding: var(--sds-g-spacing-4, 1rem);
+    background: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
+  }
+
+  /* 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

@@ -7,7 +7,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* 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'] {
+  :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;
@@ -41,7 +41,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* 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'] {
+  :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;
   }
@@ -107,7 +107,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'] {
+  :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)));
@@ -192,7 +192,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* SCOPED TAB BAR STYLING */
 
-  :host([data-render-mode="shadow"][variant='scoped']) [part~='tab-bar'] {
+  :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)));
@@ -276,7 +276,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* VERTICAL TAB BAR STYLING */
 
-  :host([data-render-mode="shadow"][variant='vertical']) [part~='tab-bar'] {
+  :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 */

package/src/lightning/tabset/tabset.css

@@ -0,0 +1,10 @@
+/* TODO W-12129682: styles are commented out for the future migration of `tabset`
+   to Native Shadow
+
+    :host([data-render-mode="shadow"]) .slds-vertical-tabs {
+        display: flex;
+        overflow: hidden;
+        border: 1px solid var(--slds-g-color-border-base-1, #e5e5e5);
+        border-radius: 0.25rem;]
+    }
+*/

package/src/lightning/tabset/tabset.js

@@ -23,6 +23,8 @@ export default class LightningTabset extends LightningElement {
 
     @track _tabHeaders = [];
 
+    _rerender = false;
+
     connectedCallback() {
         this._tabByValue = {};
         this._connected = true;
@@ -36,6 +38,21 @@ export default class LightningTabset extends LightningElement {
         );
     }
 
+    /**
+     * in native shadow, 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.template.synthetic) {
+            this._rerender = false;
+            this._updateTabBarHeaders(this._tabHeaders);
+            this._selectTab(this._activeTabValue);
+        }
+    }
+
     disconnectedCallback() {
         this._connected = false;
     }
@@ -84,7 +101,8 @@ 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';
@@ -149,6 +167,11 @@ 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;
@@ -158,7 +181,7 @@ export default class LightningTabset extends LightningElement {
             this._activeTabValue = tab.value;
         }
 
-        if (this._activeTabValue === tab.value) {
+        if (this._activeTabValue === tab.value && this.template.synthetic) {
             this._selectTab(tabValue);
         }
     }
@@ -242,16 +265,17 @@ export default class LightningTabset extends LightningElement {
      * @param {Array} headers
      */
     _updateTabBarHeaders(headers) {
-        this.template.querySelector('lightning-tab-bar').tabHeaders =
-            headers.slice();
+        if (this.template.querySelector('lightning-tab-bar')) {
+            this.template.querySelector('lightning-tab-bar').tabHeaders =
+                headers.slice();
+        }
     }
 
     _selectTabHeaderByTabValue(value) {
-        if (!this._connected) {
+        const tabBar = this.template.querySelector('lightning-tab-bar');
+        if (!this._connected || !tabBar) {
             return;
         }
-
-        const tabBar = this.template.querySelector('lightning-tab-bar');
         tabBar.selectTabByValue(value);
     }
 

package/src/lightning/timepicker/form-element.slds.css

@@ -278,4 +278,12 @@
     :host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
       align-items: flex-end;
     }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: HIDDEN */
+
+    :host([data-render-mode="shadow"][variant~='label-hidden']) .slds-form-element__label {
+      display: none
+  }
 }

package/src/lightning/toast/button-icon.slds.css

@@ -484,14 +484,20 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     justify-content: center;
   }
 
+  /**
+   * Represents inner spacing around icon for icon-position="left", when present
+   */
   :host([data-render-mode="shadow"]) [part~='start'] {
     display: inline-flex;
-    padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
+    padding-inline-end: 0;
   }
 
+  /**
+   * Represents inner spacing around icon for icon-position="right", when present
+   */
   :host([data-render-mode="shadow"]) [part~='end'] {
     display: inline-flex;
-    padding-inline-start: var(--sds-g-spacing-2, 0.5rem);
+    padding-inline-start: 0;
   }
 }
 
@@ -883,7 +889,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /**
       * End part
       */
-  :host([data-render-mode="shadow"]) [part~='end'] {
+  :host([data-render-mode="shadow"]) [part='end'] {
     padding-inline-start: var(--slds-c-buttonicon-end-spacing-inline-start, 0);
   }
 

package/src/lightning/toast/icon.slds.css

@@ -84,7 +84,7 @@
     --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
   }
 
-  :host([data-render-mode="shadow"]) [part~='boundary'] {
+  :host([data-render-mode="shadow"]) [part='boundary'] {
     /* --sds-c-icon-color-background: var(--slds-c-icon-color-background); */
     --sds-c-icon-radius-border: var(--slds-c-icon-radius-border, var(--sds-g-radius-border-2, 0.25rem));
     --sds-c-icon-sizing-border: var(--slds-c-icon-sizing-border);
@@ -114,7 +114,7 @@
     display: inline-flex;
   }
 
-  :host([data-render-mode="shadow"]) [part~='icon'] {
+  :host([data-render-mode="shadow"]) [part='icon'] {
     --sds-c-icon-color-foreground: var(--slds-c-icon-color-foreground, var(--sds-g-color-neutral-base-100, #ffffff));
     --sds-c-icon-sizing-height: var(--slds-c-icon-sizing-height, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
     --sds-c-icon-sizing-width: var(--slds-c-icon-sizing-width, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
@@ -199,7 +199,7 @@
 
 :host([data-render-mode="shadow"]) .slds-input__icon {
   --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
-  
+
   position: absolute;
   top: 50%;
   margin-block-start: -0.4375rem;

package/src/lightning/verticalNavigation/vertical-navigation.slds.css

@@ -1,4 +1,4 @@
 
-:host([data-render-mode="shadow"]) [part~='vertical-navigation'] {
+:host([data-render-mode="shadow"]) [part='vertical-navigation'] {
   position: relative;
 }