lightning-base-components 1.22.1-alpha → 1.22.2-alpha

package/src/lightning/inputLocation/input-text.slds.css

@@ -246,7 +246,7 @@
         --sds-c-inputtext-text-color: var(--slds-c-inputtext-text-color);
         --sds-c-inputtext-font-size: var(
             --slds-c-inputtext-font-size,
-            var(--slds-g-font-scale-neg-2)
+            var(--slds-g-font-size-base)
         );
         --sds-c-inputtext-text-color-placeholder: var(
             --slds-c-inputtext-text-color-placeholder,
@@ -264,7 +264,7 @@
 
         display: flex;
         flex-wrap: wrap;
-        align-items: center;
+        flex-direction: column;
     }
 /**
    * Input Container
@@ -371,6 +371,10 @@
         --sds-c-inputtext-color-border: var(--slds-g-color-border-disabled-1);
         --sds-c-inputtext-text-color: var(--slds-g-color-on-disabled-2);
     }
+:host([data-render-mode="shadow"][disabled]) [part='input-text'] {
+        --sds-c-inputtext-text-color-placeholder:
+            var(--slds-g-color-on-disabled-2);
+    }
 /**
    * Label
    *
@@ -384,10 +388,7 @@
             --slds-c-inputtext-label-color,
             var(--slds-g-color-on-surface-2)
         );
-        font-size: var(
-            --slds-c-inputtext-label-font-size,
-            var(--slds-g-font-scale-neg-3)
-        );
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         margin-block-end: var(--slds-g-sizing-1);
 
         /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */

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

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-g-font-scale-neg-3);
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

package/src/lightning/inputName/input-text.slds.css

@@ -246,7 +246,7 @@
         --sds-c-inputtext-text-color: var(--slds-c-inputtext-text-color);
         --sds-c-inputtext-font-size: var(
             --slds-c-inputtext-font-size,
-            var(--slds-g-font-scale-neg-2)
+            var(--slds-g-font-size-base)
         );
         --sds-c-inputtext-text-color-placeholder: var(
             --slds-c-inputtext-text-color-placeholder,
@@ -264,7 +264,7 @@
 
         display: flex;
         flex-wrap: wrap;
-        align-items: center;
+        flex-direction: column;
     }
 /**
    * Input Container
@@ -371,6 +371,10 @@
         --sds-c-inputtext-color-border: var(--slds-g-color-border-disabled-1);
         --sds-c-inputtext-text-color: var(--slds-g-color-on-disabled-2);
     }
+:host([data-render-mode="shadow"][disabled]) [part='input-text'] {
+        --sds-c-inputtext-text-color-placeholder:
+            var(--slds-g-color-on-disabled-2);
+    }
 /**
    * Label
    *
@@ -384,10 +388,7 @@
             --slds-c-inputtext-label-color,
             var(--slds-g-color-on-surface-2)
         );
-        font-size: var(
-            --slds-c-inputtext-label-font-size,
-            var(--slds-g-font-scale-neg-3)
-        );
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         margin-block-end: var(--slds-g-sizing-1);
 
         /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */

package/src/lightning/interactiveDialogBase/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/lookupAddress/form-element.slds.css

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-g-font-scale-neg-3);
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

package/src/lightning/pillContainer/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/primitiveBubble/primitiveBubble.js

@@ -130,6 +130,9 @@ export default class LightningPrimitiveBubble extends LightningShadowBaseClass {
     // manually create <div>, add positional styling, and append as child to bubble
     createInvisibleDivManually() {
         if (this.state.visible) {
+            // for native shadow, we need to get styles from popover parent and append
+            // to popover body so that it is added/removed from DOM depending on tooltip visibility
+            const popoverParent = this.template.querySelector('.slds-popover');
             const popoverBody = this.template.querySelector(
                 '.slds-popover__body'
             );
@@ -137,8 +140,8 @@ export default class LightningPrimitiveBubble extends LightningShadowBaseClass {
             const { vertical } = this.align;
 
             let computedStyle = null;
-            if (window && popoverBody) {
-                computedStyle = window.getComputedStyle(popoverBody);
+            if (window && popoverParent && popoverBody) {
+                computedStyle = window.getComputedStyle(popoverParent);
                 invisibleDiv.style.width =
                     computedStyle.getPropertyValue('width');
 
@@ -151,8 +154,10 @@ export default class LightningPrimitiveBubble extends LightningShadowBaseClass {
                 */
                 if (vertical === 'bottom') {
                     invisibleDiv.style.top =
-                        Math.max(POPOVER_MIN_HEIGHT, popoverBody.offsetHeight) +
-                        'px';
+                        Math.max(
+                            POPOVER_MIN_HEIGHT,
+                            popoverParent.offsetHeight
+                        ) + 'px';
                     invisibleDiv.style.height =
                         DEFAULT_INVISIBLE_DIV_STYLES.height;
                 } else {

package/src/lightning/primitiveColorpickerButton/color-picker-button.slds.css

@@ -69,7 +69,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --slds-c-icon-color-foreground: var(--slds-g-color-disabled-1);
 
     pointer-events: none;
-    border-color: var(--slds-g-color-border-disabled-2);
+    border-color: transparent;
   }
 
   /* TO DO: .panel and .panel-open should be renamed

package/src/lightning/primitiveHeaderActions/primitiveHeaderActions.html

@@ -4,6 +4,7 @@
             id="primitive-header-action-button-menu-id"
             icon-size="x-small"
             menu-alignment={_actionMenuAlignment}
+            title={alternativeText}
             alternative-text={alternativeText}
             variant="bare"
             onopen={handleMenuOpen}

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

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-g-font-scale-neg-3);
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

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

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-g-font-scale-neg-3);
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

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

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-g-font-scale-neg-3);
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

package/src/lightning/primitiveInputColor/input-text.slds.css

@@ -246,7 +246,7 @@
         --sds-c-inputtext-text-color: var(--slds-c-inputtext-text-color);
         --sds-c-inputtext-font-size: var(
             --slds-c-inputtext-font-size,
-            var(--slds-g-font-scale-neg-2)
+            var(--slds-g-font-size-base)
         );
         --sds-c-inputtext-text-color-placeholder: var(
             --slds-c-inputtext-text-color-placeholder,
@@ -264,7 +264,7 @@
 
         display: flex;
         flex-wrap: wrap;
-        align-items: center;
+        flex-direction: column;
     }
 /**
    * Input Container
@@ -371,6 +371,10 @@
         --sds-c-inputtext-color-border: var(--slds-g-color-border-disabled-1);
         --sds-c-inputtext-text-color: var(--slds-g-color-on-disabled-2);
     }
+:host([data-render-mode="shadow"][disabled]) [part='input-text'] {
+        --sds-c-inputtext-text-color-placeholder:
+            var(--slds-g-color-on-disabled-2);
+    }
 /**
    * Label
    *
@@ -384,10 +388,7 @@
             --slds-c-inputtext-label-color,
             var(--slds-g-color-on-surface-2)
         );
-        font-size: var(
-            --slds-c-inputtext-label-font-size,
-            var(--slds-g-font-scale-neg-3)
-        );
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         margin-block-end: var(--slds-g-sizing-1);
 
         /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */

package/src/lightning/primitiveInputFile/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/primitiveInputFile/form-element.slds.css

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-g-font-scale-neg-3);
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

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

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-g-font-scale-neg-3);
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

package/src/lightning/primitiveInputSimple/input-text.slds.css

@@ -246,7 +246,7 @@
         --sds-c-inputtext-text-color: var(--slds-c-inputtext-text-color);
         --sds-c-inputtext-font-size: var(
             --slds-c-inputtext-font-size,
-            var(--slds-g-font-scale-neg-2)
+            var(--slds-g-font-size-base)
         );
         --sds-c-inputtext-text-color-placeholder: var(
             --slds-c-inputtext-text-color-placeholder,
@@ -264,7 +264,7 @@
 
         display: flex;
         flex-wrap: wrap;
-        align-items: center;
+        flex-direction: column;
     }
 /**
    * Input Container
@@ -371,6 +371,10 @@
         --sds-c-inputtext-color-border: var(--slds-g-color-border-disabled-1);
         --sds-c-inputtext-text-color: var(--slds-g-color-on-disabled-2);
     }
+:host([data-render-mode="shadow"][disabled]) [part='input-text'] {
+        --sds-c-inputtext-text-color-placeholder:
+            var(--slds-g-color-on-disabled-2);
+    }
 /**
    * Label
    *
@@ -384,10 +388,7 @@
             --slds-c-inputtext-label-color,
             var(--slds-g-color-on-surface-2)
         );
-        font-size: var(
-            --slds-c-inputtext-label-font-size,
-            var(--slds-g-font-scale-neg-3)
-        );
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         margin-block-end: var(--slds-g-sizing-1);
 
         /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */

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

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-g-font-scale-neg-3);
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

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

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-g-font-scale-neg-3);
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

package/src/lightning/prompt/input-text.slds.css

@@ -246,7 +246,7 @@
         --sds-c-inputtext-text-color: var(--slds-c-inputtext-text-color);
         --sds-c-inputtext-font-size: var(
             --slds-c-inputtext-font-size,
-            var(--slds-g-font-scale-neg-2)
+            var(--slds-g-font-size-base)
         );
         --sds-c-inputtext-text-color-placeholder: var(
             --slds-c-inputtext-text-color-placeholder,
@@ -264,7 +264,7 @@
 
         display: flex;
         flex-wrap: wrap;
-        align-items: center;
+        flex-direction: column;
     }
 /**
    * Input Container
@@ -371,6 +371,10 @@
         --sds-c-inputtext-color-border: var(--slds-g-color-border-disabled-1);
         --sds-c-inputtext-text-color: var(--slds-g-color-on-disabled-2);
     }
+:host([data-render-mode="shadow"][disabled]) [part='input-text'] {
+        --sds-c-inputtext-text-color-placeholder:
+            var(--slds-g-color-on-disabled-2);
+    }
 /**
    * Label
    *
@@ -384,10 +388,7 @@
             --slds-c-inputtext-label-color,
             var(--slds-g-color-on-surface-2)
         );
-        font-size: var(
-            --slds-c-inputtext-label-font-size,
-            var(--slds-g-font-scale-neg-3)
-        );
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         margin-block-end: var(--slds-g-sizing-1);
 
         /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */

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

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-g-font-scale-neg-3);
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

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

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-g-font-scale-neg-3);
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

package/src/lightning/select/select.slds.css

@@ -7,7 +7,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     :host([data-render-mode="shadow"]) [part='select'] {
       height: calc(var(--slds-c-select-input-sizing-height, 1.875rem) + (var(--slds-g-sizing-border-1) * 2));
       width: 100%;
-      border: var(--slds-g-sizing-border-1) solid var(--slds-c-select-color-border, var(--slds-g-color-border-1));
+      border: var(--slds-g-sizing-border-1) solid var(--slds-c-select-color-border, var(--slds-s-input-color-border, var(--slds-g-color-border-1)));
       border-radius: var(--slds-c-select-radius-border, var(--slds-g-radius-border-2));
       background-color: var(--slds-c-select-color-background,
       var(--slds-g-color-surface-container-1));

package/src/lightning/sldsUtilsThemes/sldsUtilsThemes.css

@@ -219,14 +219,16 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 */
 
 :host([data-render-mode="shadow"]) .slds-theme_warning ::part(button) {
-    color: var(--slds-g-color-neutral-base-30, #514f4d);
+    color: var(--slds-g-color-on-warning-1);
     text-decoration: underline;
 
-    --slds-c-icon-color-foreground: var(--slds-g-color-neutral-base-30, #514f4d);
+    --slds-c-icon-color-foreground: var(--slds-g-color-on-warning-1);
 }
 
-.slds-theme_warning ::part(button):hover {
-    color: var(--slds-g-color-neutral-base-50, #706e6b);
+:host([data-render-mode="shadow"]) .slds-theme_warning ::part(button):hover {
+    color: color-mix(in oklab, currentColor, transparent 25%);
+
+    --slds-c-icon-color-foreground: color-mix(in oklab, var(--slds-g-color-on-warning-1), transparent 25%);
 }
 
 :host([data-render-mode="shadow"])  .slds-theme_warning ::part(button):focus {

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/textarea/form-element.slds.css

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-g-font-scale-neg-3);
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

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

@@ -46,7 +46,7 @@
         hyphens: auto;
         display: inline-block;
         color: var(--slds-g-color-on-surface-2);
-        font-size: var(--slds-g-font-scale-neg-3);
+        font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
         padding-inline-end: var(--slds-g-spacing-2);
         padding-block-start: var(--slds-g-spacing-1);
         margin-block-end: calc(var(--slds-g-spacing-1) / 2);

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:
@@ -545,19 +553,19 @@ 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);
 }
 /* slds-icon interaction states */
-:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):hover {
+:host([data-render-mode="shadow"]) [part~='button-icon']:hover {
   --slds-c-icon-color-foreground: var(
-    --slds-c-buttonicon-color-foreground-hover,
+    --slds-c-buttonicon-color-foreground-hover, 
     var(--slds-g-color-accent-3)
   );
 }
-:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):focus {
+:host([data-render-mode="shadow"]) [part~='button-icon']:focus {
   --slds-c-icon-color-foreground: var(
     --slds-c-buttonicon-color-foreground-focus,
     var(--slds-g-color-accent-3)
   );
 }
-:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):active {
+:host([data-render-mode="shadow"]) [part~='button-icon']:active {
   --slds-c-icon-color-foreground: var(
     --slds-c-buttonicon-color-foreground-active,
     var(--slds-g-color-accent-3)
@@ -635,7 +643,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Icon */
   --slds-c-buttonicon-color-foreground: var(--slds-g-color-neutral-base-100);
-  --slds-c-buttonicon-color-foreground-hover: var(--slds-g-color-neutral-base-95);
+  --slds-c-buttonicon-color-foreground-hover: color-mix(in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 25%);
   --slds-c-buttonicon-color-foreground-focus: var(--slds-g-color-neutral-base-95);
   --slds-c-buttonicon-color-foreground-active: var(--slds-g-color-neutral-base-90);
 

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: