lightning-base-components 1.22.1-alpha → 1.22.3-alpha

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

@@ -77,7 +77,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     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'] {
+  :host([data-render-mode="shadow"][variant='standard']) .slds-is-active [role='tab'],:host([data-render-mode="shadow"][variant='scoped']) .slds-is-active [role='tab'],:host([data-render-mode="shadow"][variant='vertical']) .slds-is-active [role='tab'] {
     font-weight: var(--slds-g-font-weight-7);
   }
 
@@ -335,7 +335,15 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     padding-inline-start: var(--slds-c-tabbar-vertical-spacing-inlinestart, var(--slds-c-tabbar-vertical-spacing-inline, var(--slds-g-spacing-3)));
     padding-inline-end: var(--slds-c-tabbar-vertical-spacing-inlineend, var(--slds-c-tabbar-vertical-spacing-inline, var(--slds-g-spacing-3)));
     padding-block-end: var(--slds-c-tabbar-vertical-spacing-blockend, var(--slds-c-tabbar-vertical-spacing-block, var(--slds-g-spacing-3)));
-    color: currentcolor;
+    
+    /* stylelint-disable-next-line sds-stylelint-plugin/styling-hooks-pattern */
+    color: var(--slds-s-navigation-color);
+  }
+
+  :host([data-render-mode="shadow"][variant='vertical']) .slds-is-active [role='tab'] {
+    
+    /* stylelint-disable-next-line sds-stylelint-plugin/styling-hooks-pattern */
+    color: var(--slds-s-navigation-color-active);
   }
 
   :host([data-render-mode="shadow"][variant='vertical']) [role='tab']:hover {
@@ -347,5 +355,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   :host([data-render-mode="shadow"][variant='vertical']) .slds-is-active [role='tab']:hover {
     background: var(--slds-c-tabbar-vertical-color-background-active, var(--slds-g-color-surface-container-1));
-    color: currentcolor;
+
+    /* stylelint-disable-next-line sds-stylelint-plugin/styling-hooks-pattern */
+    color: var(--slds-c-tabbar-vertical-text-color-hover, var(--slds-s-navigation-color-hover, var(--slds-g-color-neutral-base-20)));
   }
+
+  :host([data-render-mode="shadow"][variant='scoped']) .slds-is-active [role='tab']:focus,:host([data-render-mode="shadow"][variant='vertical']) .slds-is-active [role='tab']:focus {
+    box-shadow: var(--slds-g-shadow-6, 0 0 3px #0176d3);
+  }

package/src/lightning/tile/mediaTile.css

@@ -0,0 +1,2 @@
+@import './tile.lbc.synthetic.css';
+@import './tile.lbc.native.css';

package/src/lightning/tile/standardTile.css

@@ -1 +1,2 @@
-@import './standardTile.lbc.synthetic.css';
+@import './tile.lbc.synthetic.css';
+@import './tile.lbc.native.css';

package/src/lightning/tile/tile.js

@@ -4,7 +4,8 @@ import {
     classListMutation,
     normalizeString,
 } from 'lightning/utilsPrivate';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import mediaTile from './mediaTile.html';
 import standardTile from './standardTile.html';
 
@@ -18,7 +19,8 @@ const i18n = {
  * A grouping of related information associated with a record.
  * @slot default Placeholder for your content that appears below the heading.
  */
-export default class LightningTile extends LightningElement {
+export default class LightningTile extends LightningShadowBaseClass {
+    static validationOptOut = ['class'];
     /**
      * The text label that displays in the tile as the heading and hover text.
      * @type {string}
@@ -90,6 +92,7 @@ export default class LightningTile extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this._connected = true;
         this.classList.add('slds-tile');
         this.setClassesAndTemplate();

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

@@ -3,4 +3,7 @@
     <isExposed>true</isExposed>
     <minApiVersion>0.0</minApiVersion>
     <support>GA</support>
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
 </LightningComponentBundle>

package/src/lightning/tile/tile.lbc.native.css

@@ -0,0 +1,4 @@
+@import 'lightning/sldsCommon';
+@import 'lightning/sldsUtilsGrid';
+@import 'lightning/sldsMediaObject';
+@import './tile.slds.css';

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

@@ -299,6 +299,14 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
    --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
    --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
+
+   /** 
+    * Needed to override 
+    * `pointer-event: none` coming from sds
+    * that prevent tooltip from showing
+   */
+   pointer-events: auto;
+   cursor: default;
 }
 /**
   * A note about fallbacks on the default variant:

package/src/lightning/tooltipLibrary/tooltipLibrary.js

@@ -228,10 +228,11 @@ export class Tooltip {
         const target = this._target();
 
         if (!this._initialized && target) {
-            target.addEventListener('touchstart', (e) => {
-                e.stopPropagation();
-                this.toggle();
-            });
+            ['touchstart', 'click'].forEach((eventName) =>
+                target.addEventListener(eventName, (event) =>
+                    this.toggleIfTouchOrClick(event)
+                )
+            );
 
             ['mouseenter', 'focus'].forEach((eventName) =>
                 target.addEventListener(eventName, (event) => this.show(event))
@@ -251,6 +252,16 @@ export class Tooltip {
         }
     }
 
+    /* mobile listens for both 'click' and 'touchstart', but we only want to listen to
+       either 'touchstart' and not 'click', otherwise it will double toggle. Call preventDefault() to prevent the
+       'click' event from bubbling after a 'touchstart' is detected on mobile.
+    */
+    toggleIfTouchOrClick(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.toggle();
+    }
+
     handleEscape(e) {
         if (e.key === 'Escape' && this._isFocusEvent) {
             e.stopPropagation();

package/src/lightning/utilsPrivate/utilsPrivate.js

@@ -306,12 +306,12 @@ export function buttonGroupOrderClass(groupOrder) {
 }
 
 /**
- * Checks if the given component is native
- * @param {Object} cmp Component instance
- * @returns {Boolean} Whether the component is native
+ * Checks if the given lightning component is native
+ * @param {Object} cmp LightningElement instance
+ * @returns {Boolean} Whether the lightning component is native
  */
 export function isNativeComponent(cmp) {
-    return !cmp?.template?.synthetic;
+    return cmp?.template && !cmp.template.synthetic;
 }
 
 /**

package/src/lightning/verticalNavigationOverflow/button.slds.css

@@ -296,6 +296,14 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
    --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
    --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
+
+   /** 
+    * Needed to override 
+    * `pointer-event: none` coming from sds
+    * that prevent tooltip from showing
+   */
+   pointer-events: auto;
+   cursor: default;
 }
 /**
   * A note about fallbacks on the default variant:

package/src/lightning/primitiveIcon/primitiveIcon.lbc.synthetic.css

@@ -1,9 +0,0 @@
-/*
-"Temporary" fix for Edge SVG quirk. We can remove this when it is fixed either
-at the SLDS level or at the browser level.
- https://git.soma.salesforce.com/aura/lightning-global/issues/1349
- Also prevents IE11 from gacking during some interactions
-*/
-_:-ms-lang(x), svg {
-    pointer-events: none;
-}