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

package/metadata/raptor.json

@@ -276,6 +276,9 @@
       {
         "name": "alternativeText"
       },
+      {
+        "name": "disableAlternativeTextTitle"
+      },
       {
         "name": "iconClass"
       },
@@ -291,6 +294,9 @@
       {
         "name": "tooltip"
       },
+      {
+        "name": "tooltipType"
+      },
       {
         "name": "type"
       },
@@ -4554,6 +4560,7 @@
   "salesEnablementMeasureApi": {},
   "salesEnablementProgramApi": {},
   "salesEngagementWorkspaceApi": {},
+  "salesEvfsdkApi": {},
   "salesPathAssistantApi": {},
   "salesPeopleApi": {},
   "salesUserWorkingHoursApi": {},

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.22.1-alpha",
+    "version": "1.22.2-alpha",
     "license": "MIT",
     "files": [
         "external",

package/src/lightning/accordionSection/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/baseCombobox/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/baseCombobox/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/button/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/buttonIcon/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/buttonIcon/buttonIcon.js

@@ -1,6 +1,6 @@
 import { api } from 'lwc';
 import { classSet } from 'lightning/utils';
-import { normalizeString as normalize, isCSR } from 'lightning/utilsPrivate';
+import { normalizeString as normalize } from 'lightning/utilsPrivate';
 // remove-next-line-for-c-namespace
 import { Tooltip, TooltipType } from 'lightning/tooltipLibrary';
 import LightningPrimitiveButton from 'lightning/primitiveButton';
@@ -120,6 +120,24 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
      */
     @api alternativeText;
 
+    /**
+     * Reserved for internal use only.
+     * Specifies the type of tooltip to be used.
+     * Use info in cases where target already has click handlers.
+     * Use toggle in cases where target only shows a tooltip, such as helptext.
+     * @type {string}
+     * @default info
+     */
+    @api tooltipType = TooltipType.Info;
+
+    /**
+     * Reserved for internal use only.
+     * Disables the alternative text being used for the button title when the title has not been provided.
+     * @type {boolean}
+     * @default false
+     */
+    @api disableAlternativeTextTitle = false;
+
     // remove-next-line-for-c-namespace
     /**
      * Text to display when the user mouses over or focuses on the button.
@@ -145,9 +163,7 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
     // remove-next-line-for-c-namespace
     _tooltip = null;
     tooltipValue = null;
-    tooltipType = TooltipType.Info;
     rendered = false;
-    showTitle = true;
 
     /**
      * Generate a tooltip with the specified value and current tooltip type
@@ -169,10 +185,16 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
     }
 
     get computedTitle() {
-        // Assign after renderedCallback (this.rendered) to nullify hydration mismatch.
-        return this.rendered && this.showTitle
-            ? this.title || this.alternativeText || ''
-            : null;
+        // Assign after renderedCallback to avoid hydration mismatch.
+        if (this.rendered) {
+            if (this.title) {
+                return this.title;
+            }
+            if (!this.disableAlternativeTextTitle) {
+                return this.alternativeText;
+            }
+        }
+        return null;
     }
 
     normalizeVariant(variant) {
@@ -333,24 +355,6 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
     connectedCallback() {
         super.connectedCallback();
         this._connected = true;
-        if (isCSR) {
-            this.dispatchEvent(
-                new CustomEvent('privatebuttoniconregister', {
-                    cancelable: true,
-                    bubbles: true,
-                    detail: {
-                        // Tooltip type should be toggle for some consumers like helptext
-                        setTooltipType: (tooltipType) => {
-                            this.tooltipType = tooltipType;
-                        },
-                        // Title should not be set for some consumers like helptext (see W-12496300)
-                        showTitle: (showTitle) => {
-                            this.showTitle = showTitle;
-                        },
-                    },
-                })
-            );
-        }
     }
 
     renderedCallback() {
@@ -372,7 +376,6 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
         super.disconnectedCallback();
         this._connected = false;
         this.rendered = false;
-        this.showTitle = true;
         if (this._tooltip) {
             this._tooltip.disconnect();
         }

package/src/lightning/buttonIconStateful/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/buttonIconStateful/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/buttonMenu/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/buttonMenu/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/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.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/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/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 */