lightning-base-components 1.21.9-alpha → 1.22.2-alpha

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/radioGroup/radioGroup.js-meta.xml

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

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/textarea/textarea.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/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

@@ -283,7 +283,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Text color */
   --sds-c-button-text-color: var(--slds-c-button-neutral-text-color, var(--slds-g-color-accent-2));
-  --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-g-color-accent-3));
+  --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-s-button-color-hover, var(--slds-g-color-accent-3)));
   --sds-c-button-text-color-focus: var(--slds-c-button-neutral-text-color-focus, var(--slds-g-color-accent-3));
   --sds-c-button-text-color-active: var(
     --slds-c-button-neutral-text-color-active,
@@ -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:
@@ -318,36 +326,36 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 :host([data-render-mode="shadow"][variant='brand']) [part~='button'] {
   --slds-c-button-neutral-color-background: var(
     --slds-c-button-brand-color-background,
-    var(--slds-g-color-accent-container-2)
+    var(--slds-g-color-accent-container-1)
   );
   --slds-c-button-neutral-color-background-hover: var(
     --slds-c-button-brand-color-background-hover,
-    var(--slds-g-color-accent-container-3)
+    var(--slds-g-color-accent-container-2)
   );
   --slds-c-button-neutral-color-background-focus: var(
     --slds-c-button-brand-color-background-focus,
-    var(--slds-g-color-accent-container-3)
+    var(--slds-g-color-accent-container-2)
   );
   --slds-c-button-neutral-color-background-active: var(
     --slds-c-button-brand-color-background-active,
-    var(--slds-g-color-accent-container-3)
+    var(--slds-g-color-accent-container-2)
   );
 
   --slds-c-button-neutral-color-border: var(
     --slds-c-button-brand-color-border,
-    var(--slds-g-color-border-accent-2)
+    var(--slds-g-color-border-accent-1)
   );
   --slds-c-button-neutral-color-border-hover: var(
     --slds-c-button-brand-color-border-hover,
-    var(--slds-g-color-border-accent-3)
+    var(--slds-g-color-border-accent-2)
   );
   --slds-c-button-neutral-color-border-focus: var(
     --slds-c-button-brand-color-border-focus,
-    var(--slds-g-color-border-accent-3)
+    var(--slds-g-color-border-accent-2)
   );
   --slds-c-button-neutral-color-border-active: var(
     --slds-c-button-brand-color-border-active,
-    var(--slds-g-color-border-accent-3)
+    var(--slds-g-color-border-accent-2)
   );
 
   /* Since the text color is white for all states, bypassing inheritence and setting the color value from SDS */
@@ -399,7 +407,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-color-border-hover: var(--slds-g-color-border-success-2);
   --slds-c-button-neutral-color-border-focus: var(--slds-g-color-border-success-2);
   --slds-c-button-neutral-color-border-active: var(--slds-g-color-border-success-2);
-  --slds-c-button-neutral-text-color: var(--slds-g-color-on-success-2);
+  --slds-c-button-neutral-text-color: var(--slds-g-color-on-success-1);
   --slds-c-button-neutral-text-color-hover: var(--slds-g-color-on-success-1);
   --slds-c-button-neutral-text-color-focus: var(--slds-g-color-on-success-1);
   --slds-c-button-neutral-text-color-active: var(--slds-g-color-on-success-1);
@@ -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/toast/toast.js-meta.xml

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

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

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

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

@@ -280,7 +280,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Text color */
   --sds-c-button-text-color: var(--slds-c-button-neutral-text-color, var(--slds-g-color-accent-2));
-  --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-g-color-accent-3));
+  --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-s-button-color-hover, var(--slds-g-color-accent-3)));
   --sds-c-button-text-color-focus: var(--slds-c-button-neutral-text-color-focus, var(--slds-g-color-accent-3));
   --sds-c-button-text-color-active: var(
     --slds-c-button-neutral-text-color-active,
@@ -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:
@@ -315,36 +323,36 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 :host([data-render-mode="shadow"][variant='brand']) [part~='button'] {
   --slds-c-button-neutral-color-background: var(
     --slds-c-button-brand-color-background,
-    var(--slds-g-color-accent-container-2)
+    var(--slds-g-color-accent-container-1)
   );
   --slds-c-button-neutral-color-background-hover: var(
     --slds-c-button-brand-color-background-hover,
-    var(--slds-g-color-accent-container-3)
+    var(--slds-g-color-accent-container-2)
   );
   --slds-c-button-neutral-color-background-focus: var(
     --slds-c-button-brand-color-background-focus,
-    var(--slds-g-color-accent-container-3)
+    var(--slds-g-color-accent-container-2)
   );
   --slds-c-button-neutral-color-background-active: var(
     --slds-c-button-brand-color-background-active,
-    var(--slds-g-color-accent-container-3)
+    var(--slds-g-color-accent-container-2)
   );
 
   --slds-c-button-neutral-color-border: var(
     --slds-c-button-brand-color-border,
-    var(--slds-g-color-border-accent-2)
+    var(--slds-g-color-border-accent-1)
   );
   --slds-c-button-neutral-color-border-hover: var(
     --slds-c-button-brand-color-border-hover,
-    var(--slds-g-color-border-accent-3)
+    var(--slds-g-color-border-accent-2)
   );
   --slds-c-button-neutral-color-border-focus: var(
     --slds-c-button-brand-color-border-focus,
-    var(--slds-g-color-border-accent-3)
+    var(--slds-g-color-border-accent-2)
   );
   --slds-c-button-neutral-color-border-active: var(
     --slds-c-button-brand-color-border-active,
-    var(--slds-g-color-border-accent-3)
+    var(--slds-g-color-border-accent-2)
   );
 
   /* Since the text color is white for all states, bypassing inheritence and setting the color value from SDS */
@@ -396,7 +404,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-color-border-hover: var(--slds-g-color-border-success-2);
   --slds-c-button-neutral-color-border-focus: var(--slds-g-color-border-success-2);
   --slds-c-button-neutral-color-border-active: var(--slds-g-color-border-success-2);
-  --slds-c-button-neutral-text-color: var(--slds-g-color-on-success-2);
+  --slds-c-button-neutral-text-color: var(--slds-g-color-on-success-1);
   --slds-c-button-neutral-text-color-hover: var(--slds-g-color-on-success-1);
   --slds-c-button-neutral-text-color-focus: var(--slds-g-color-on-success-1);
   --slds-c-button-neutral-text-color-active: var(--slds-g-color-on-success-1);