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

package/src/lightning/buttonIconStateful/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);

package/src/lightning/buttonMenu/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/buttonMenu/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);

package/src/lightning/buttonMenu/dropdown.slds.css

@@ -353,8 +353,8 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* stylelint-disable */
     max-width: var(--_dropdown-size-medium);
     /* stylelint-enable */
-    margin-block-start: calc(var(--slds-g-spacing-1)) / 2;
-    margin-block-end: calc(var(--slds-g-spacing-1)) / 2;
+    margin-block-start: calc(var(--slds-g-spacing-1) / 2);
+    margin-block-end: calc(var(--slds-g-spacing-1) / 2);
     font-size: var(--slds-g-font-scale-neg-1);
     border-style: solid;
     transform: translateX(-50%);
@@ -393,11 +393,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 /* Deal with positioning when target is just an icon */
 :host([data-render-mode="shadow"].slds-dropdown-trigger) > [class*='slds-button_icon'] ~ .slds-dropdown_left[class*='slds-nubbin'],:host([data-render-mode="shadow"]) 
   .slds-dropdown-trigger > [class*='slds-button_icon'] ~ .slds-dropdown_left[class*='slds-nubbin'] {
-    left: (var(--slds-g-spacing-2) * -1);
+    left: calc(var(--slds-g-spacing-2) * -1);
   }
 :host([data-render-mode="shadow"].slds-dropdown-trigger) > [class*='slds-button_icon'] ~ .slds-dropdown_right[class*='slds-nubbin'],:host([data-render-mode="shadow"]) 
   .slds-dropdown-trigger > [class*='slds-button_icon'] ~ .slds-dropdown_right[class*='slds-nubbin'] {
-    right: (var(--slds-g-spacing-2) * -1);
+    right: calc(var(--slds-g-spacing-2) * -1);
   }
 :host([data-render-mode="shadow"].slds-dropdown-trigger_hover) .slds-dropdown,:host([data-render-mode="shadow"]) 
   .slds-dropdown-trigger_hover .slds-dropdown {
@@ -489,15 +489,15 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     width: 100%;
   }
 :host([data-render-mode="shadow"]) .slds-dropdown_length-5 {
-    max-height: calc((var(--slds-g-font-scale-neg-3)) * var(--slds-g-font-lineheight)) + var(--slds-g-spacing-4) * 5;
+    max-height: calc(((var(--slds-g-font-scale-neg-3) * var(--slds-g-font-lineheight)) + var(--slds-g-spacing-4)) * 5);
     overflow-y: auto;
   }
 :host([data-render-mode="shadow"]) .slds-dropdown_length-7 {
-    max-height: calc((var(--slds-g-font-scale-neg-3)) * var(--slds-g-font-lineheight)) + var(--slds-g-spacing-4) * 7;
+    max-height: calc(((var(--slds-g-font-scale-neg-3) * var(--slds-g-font-lineheight)) + var(--slds-g-spacing-4)) * 7);
     overflow-y: auto;
   }
 :host([data-render-mode="shadow"]) .slds-dropdown_length-10 {
-    max-height: calc((var(--slds-g-font-scale-neg-3)) * var(--slds-g-font-lineheight)) + var(--slds-g-spacing-4) * 10;
+    max-height: calc(((var(--slds-g-font-scale-neg-3) * var(--slds-g-font-lineheight)) + var(--slds-g-spacing-4)) * 10);
     overflow-y: auto;
   }
 :host([data-render-mode="shadow"]) .slds-dropdown_length-with-icon-5 {

package/src/lightning/buttonStateful/button-stateful.slds.css

@@ -32,6 +32,29 @@
       --slds-c-buttonstateful-shadow-focus,
       var(--slds-g-color-accent-2) 0 0 3px
     );
+
+    /* Pressed/Selected State */
+    --sds-c-button-text-color-pressed: var(--slds-g-color-accent-2);
+    --sds-c-button-color-background-pressed: transparent;
+  }
+
+  /* Hover state when button is pressed/selected */
+
+  :host([data-render-mode="shadow"]) .slds-button_stateful:hover {
+    --sds-c-button-color-background-pressed: var(--slds-g-color-surface-container-2);
+    --sds-c-button-text-color-pressed: var(--slds-s-button-color-hover);
+    --sds-c-button-color-border-pressed: var(--slds-g-color-border-1);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-is-selected-clicked {
+    --sds-c-button-color-background-pressed: var(--slds-g-color-surface-container-1);
+    --sds-c-button-text-color-pressed: var(--slds-g-color-accent-2);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-is-selected-clicked:focus {
+    --sds-c-button-color-background-pressed: var(--slds-g-color-surface-container-2);
+    --sds-c-button-text-color-pressed: var(--slds-g-color-accent-3);
+    --sds-c-button-shadow-pressed: var(--slds-s-button-shadow-focus);
   }
 
   /* vertical alignment for icon and text */

package/src/lightning/buttonStateful/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);

package/src/lightning/buttonStateful/buttonStateful.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/calendar/calendar.lbc.native.css

@@ -1,3 +1,4 @@
+@import 'lightning/sldsCommon';
 @import './dropdown.slds.css';
 @import './calendar.slds.css';
 

package/src/lightning/calendar/calendar.slds.css

@@ -18,7 +18,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
         --slds-c-buttonicon-sizing: 0.875rem;
 
         padding: 0;
-        font-size: var(--slds-g-font-scale-neg-3);
+        font-size: var(--slds-g-font-scale-neg-1);
     }
 
     :host([data-render-mode="shadow"]) [part~="calendar"] thead > tr > th,:host([data-render-mode="shadow"]) 
@@ -34,7 +34,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
     :host([data-render-mode="shadow"]) [part~="calendar"] tbody > tr > td {
         padding: var(--slds-g-spacing-1);
-        font-size: var(--slds-g-font-scale-neg-3);
+        font-size: var(--slds-g-font-scale-neg-1);
     }
 
     :host([data-render-mode="shadow"]) [part~="calendar"] tbody > tr > td > .slds-day {
@@ -57,7 +57,8 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     }
 
     :host([data-render-mode="shadow"]) [part~="calendar"] tbody > tr > td.slds-is-today > .slds-day {
-        background-color: var(--slds-g-color-surface-container-2);
+        background-color: var(--slds-g-color-brand-base-90);
+        color: var(--slds-g-color-accent-2);
     }
 
     :host([data-render-mode="shadow"]) [part~="calendar"] tbody > tr > td:focus {
@@ -65,23 +66,25 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     }
 
     :host([data-render-mode="shadow"]) [part~="calendar"] tbody > tr > td:focus > .slds-day {
-        box-shadow: var(--slds-g-color-accent-2) 0 0 0 1px inset;
+        
+        /* stylelint-disable-next-line sds-stylelint-plugin/styling-hooks-pattern */
+        box-shadow: var(--slds-s-table-cell-shadow-selected);
     }
 
     :host([data-render-mode="shadow"]) [part~="calendar"] tbody > tr > td:hover > .slds-day {
-        background-color: var(--slds-g-color-surface-container-2);
+        background-color: var(--slds-g-color-brand-base-90);
     }
 
     /* Indicates selected days */
 
     :host([data-render-mode="shadow"]) [part~="calendar"] tbody > tr > td.slds-is-selected > .slds-day {
-        background: var(--slds-g-color-accent-container-2);
+        background: var(--slds-g-color-accent-container-1);
         color: var(--slds-g-color-on-accent-1);
     }
 
     :host([data-render-mode="shadow"]) [part~="calendar"] tbody > tr > td.slds-is-selected:focus > .slds-day {
         background: var(--slds-g-color-accent-container-2);
-        box-shadow: var(--slds-g-color-accent-4) 0 0 3px;
+        box-shadow: var(--slds-g-shadow-5, 0 0 3px #0176d3);
         color: var(--slds-g-color-on-accent-1);
     }
 
@@ -101,12 +104,12 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* Month Table */
 
     :host([data-render-mode="shadow"]) .slds-datepicker__month {
-        font-size: var(--slds-g-font-scale-neg-3);
+        font-size: var(--slds-g-font-scale-neg-1);
       }
 
     :host([data-render-mode="shadow"]) .slds-has-error .slds-datepicker__filter .slds-select {
-    border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-base-1);
-    box-shadow: none;
+        border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-base-1);
+        box-shadow: none;
     }
 
     /* Indicates days that are in previous/next months */

package/src/lightning/calendar/dropdown.slds.css

@@ -353,8 +353,8 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* stylelint-disable */
     max-width: var(--_dropdown-size-medium);
     /* stylelint-enable */
-    margin-block-start: calc(var(--slds-g-spacing-1)) / 2;
-    margin-block-end: calc(var(--slds-g-spacing-1)) / 2;
+    margin-block-start: calc(var(--slds-g-spacing-1) / 2);
+    margin-block-end: calc(var(--slds-g-spacing-1) / 2);
     font-size: var(--slds-g-font-scale-neg-1);
     border-style: solid;
     transform: translateX(-50%);
@@ -393,11 +393,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 /* Deal with positioning when target is just an icon */
 :host([data-render-mode="shadow"].slds-dropdown-trigger) > [class*='slds-button_icon'] ~ .slds-dropdown_left[class*='slds-nubbin'],:host([data-render-mode="shadow"]) 
   .slds-dropdown-trigger > [class*='slds-button_icon'] ~ .slds-dropdown_left[class*='slds-nubbin'] {
-    left: (var(--slds-g-spacing-2) * -1);
+    left: calc(var(--slds-g-spacing-2) * -1);
   }
 :host([data-render-mode="shadow"].slds-dropdown-trigger) > [class*='slds-button_icon'] ~ .slds-dropdown_right[class*='slds-nubbin'],:host([data-render-mode="shadow"]) 
   .slds-dropdown-trigger > [class*='slds-button_icon'] ~ .slds-dropdown_right[class*='slds-nubbin'] {
-    right: (var(--slds-g-spacing-2) * -1);
+    right: calc(var(--slds-g-spacing-2) * -1);
   }
 :host([data-render-mode="shadow"].slds-dropdown-trigger_hover) .slds-dropdown,:host([data-render-mode="shadow"]) 
   .slds-dropdown-trigger_hover .slds-dropdown {
@@ -489,15 +489,15 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     width: 100%;
   }
 :host([data-render-mode="shadow"]) .slds-dropdown_length-5 {
-    max-height: calc((var(--slds-g-font-scale-neg-3)) * var(--slds-g-font-lineheight)) + var(--slds-g-spacing-4) * 5;
+    max-height: calc(((var(--slds-g-font-scale-neg-3) * var(--slds-g-font-lineheight)) + var(--slds-g-spacing-4)) * 5);
     overflow-y: auto;
   }
 :host([data-render-mode="shadow"]) .slds-dropdown_length-7 {
-    max-height: calc((var(--slds-g-font-scale-neg-3)) * var(--slds-g-font-lineheight)) + var(--slds-g-spacing-4) * 7;
+    max-height: calc(((var(--slds-g-font-scale-neg-3) * var(--slds-g-font-lineheight)) + var(--slds-g-spacing-4)) * 7);
     overflow-y: auto;
   }
 :host([data-render-mode="shadow"]) .slds-dropdown_length-10 {
-    max-height: calc((var(--slds-g-font-scale-neg-3)) * var(--slds-g-font-lineheight)) + var(--slds-g-spacing-4) * 10;
+    max-height: calc(((var(--slds-g-font-scale-neg-3) * var(--slds-g-font-lineheight)) + var(--slds-g-spacing-4)) * 10);
     overflow-y: auto;
   }
 :host([data-render-mode="shadow"]) .slds-dropdown_length-with-icon-5 {

package/src/lightning/calendar/keyboard.js

@@ -1,4 +1,4 @@
-import { normalizeKeyValue } from 'lightning/utilsPrivate';
+import { normalizeKeyValue, isRTL } from 'lightning/utilsPrivate';
 
 export function handleKeyDownOnCalendar(event, date, calendarInterface) {
     const tdElement = event.target;
@@ -16,12 +16,20 @@ export function handleKeyDownOnCalendar(event, date, calendarInterface) {
             break;
         case 'ArrowRight':
             preventDefaultAndStopPropagation(event);
-            date.setDate(date.getDate() + 1);
+            if (isRTL()) {
+                date.setDate(date.getDate() - 1);
+            } else {
+                date.setDate(date.getDate() + 1);
+            }
             calendarInterface.focusDate(date);
             break;
         case 'ArrowLeft':
             preventDefaultAndStopPropagation(event);
-            date.setDate(date.getDate() - 1);
+            if (isRTL()) {
+                date.setDate(date.getDate() + 1);
+            } else {
+                date.setDate(date.getDate() - 1);
+            }
             calendarInterface.focusDate(date);
             break;
         case 'Enter':

package/src/lightning/colorPickerCustom/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/colorPickerPanel/colorPickerPanel.js

@@ -5,7 +5,7 @@ import labelDoneButton from '@salesforce/label/LightningColorPicker.doneButton';
 import { api, track } from 'lwc';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
-import { keyCodes, isCSR } from 'lightning/utilsPrivate';
+import { keyCodes } from 'lightning/utilsPrivate';
 
 const i18n = {
     cancelButton: labelCancelButton,
@@ -26,16 +26,6 @@ export default class LightningColorPickerPanel extends LightningShadowBaseClass
         this._selectedColor = this.currentColor || DEFAULT_COLOR;
     }
 
-    renderedCallback() {
-        // W-14600421 bug fix: prevent panel from falling outside user focus,
-        // like when viewports are too small
-        if (isCSR && typeof document.body.scrollIntoView === 'function') {
-            this.template
-                .querySelector('lightning-color-picker-custom')
-                .scrollIntoView();
-        }
-    }
-
     get i18n() {
         return i18n;
     }