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

package/README.md

@@ -1,5 +1,7 @@
 # lightning-base-components
 
+> ⚠️ Publishing of the package has been paused. Salesforce employees should use the internal package.
+
 Base Lightning web components are the building blocks of the modern user interfaces
 for Lightning Experience, the Salesforce app, and Lightning Communities. The components
 incorporate Lightning Design System markup and classes, providing improved performance

package/metadata/raptor.json

@@ -276,6 +276,9 @@
       {
         "name": "alternativeText"
       },
+      {
+        "name": "disableAlternativeTextTitle"
+      },
       {
         "name": "iconClass"
       },
@@ -291,6 +294,9 @@
       {
         "name": "tooltip"
       },
+      {
+        "name": "tooltipType"
+      },
       {
         "name": "type"
       },
@@ -567,6 +573,11 @@
       {
         "name": "showHelpMessageIfInvalid"
       }
+    ],
+    "staticProperties": [
+      {
+        "name": "validationOptOut"
+      }
     ]
   },
   "clickToDial": {
@@ -3290,7 +3301,7 @@
         "name": "autocomplete"
       },
       {
-        "name": "readonly"
+        "name": "readOnly"
       },
       {
         "name": "selectMode"
@@ -3662,7 +3673,7 @@
         "name": "name"
       },
       {
-        "name": "readonly"
+        "name": "readOnly"
       },
       {
         "name": "required"
@@ -3676,6 +3687,11 @@
       {
         "name": "value"
       }
+    ],
+    "methods": [
+      {
+        "name": "focus"
+      }
     ]
   },
   "primitiveLayout": {
@@ -4135,6 +4151,11 @@
       {
         "name": "variant"
       }
+    ],
+    "staticProperties": [
+      {
+        "name": "stylesheets"
+      }
     ]
   },
   "progressRing": {
@@ -4165,6 +4186,14 @@
       {
         "name": "value"
       }
+    ],
+    "staticProperties": [
+      {
+        "name": "stylesheets"
+      },
+      {
+        "name": "validationOptOut"
+      }
     ]
   },
   "prompt": {
@@ -4554,6 +4583,7 @@
   "salesEnablementMeasureApi": {},
   "salesEnablementProgramApi": {},
   "salesEngagementWorkspaceApi": {},
+  "salesEvfsdkApi": {},
   "salesPathAssistantApi": {},
   "salesPeopleApi": {},
   "salesUserWorkingHoursApi": {},
@@ -4983,6 +5013,11 @@
       {
         "name": "type"
       }
+    ],
+    "staticProperties": [
+      {
+        "name": "validationOptOut"
+      }
     ]
   },
   "toast": {
@@ -5134,6 +5169,7 @@
   },
   "uiGraphQLBatchApi": {},
   "uiLayoutApi": {},
+  "uiLayoutUserStateApi": {},
   "uiLearningContentPlatformApi": {},
   "uiListApi": {
     "minVersion": "45.0"

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.22.1-alpha",
+    "version": "1.22.3-alpha",
     "license": "MIT",
     "files": [
         "external",
@@ -1066,6 +1066,10 @@
                 "name": "@salesforce/label/LightningRecordPicker.emptyStateNoResultText",
                 "path": "scopedImports/@salesforce-label-LightningRecordPicker.emptyStateNoResultText.js"
             },
+            {
+                "name": "@salesforce/label/LightningRecordPicker.actionIconAlternativeText",
+                "path": "scopedImports/@salesforce-label-LightningRecordPicker.actionIconAlternativeText.js"
+            },
             {
                 "name": "@salesforce/label/LightningPicklist.available",
                 "path": "scopedImports/@salesforce-label-LightningPicklist.available.js"
@@ -1489,6 +1493,7 @@
             "lightning-button-stateful",
             "lightning-card",
             "lightning-calendar",
+            "lightning-checkbox-group",
             "lightning-color-picker-custom",
             "lightning-color-picker-panel",
             "lightning-combobox",
@@ -1544,6 +1549,7 @@
             "lightning-tab-bar",
             "lightning-tabset",
             "lightning-textarea",
+            "lightning-tile",
             "lightning-timepicker",
             "lightning-vertical-navigation",
             "lightning-vertical-navigation-item",
@@ -1570,6 +1576,8 @@
             "lightning-popup-source",
             "lightning-primitive-icon",
             "lightning-primitive-iframe",
+            "lightning-progress-indicator",
+            "lightning-progress-step",
             "lightning-static-map",
             "lightning-toast",
             "lightning-toast-container",
@@ -1660,7 +1668,9 @@
             "lightning-primitive-input-toggle",
             "lightning-prompt",
             "lightning-progress-bar",
+            "lightning-progress-indicator",
             "lightning-progress-ring",
+            "lightning-progress-step",
             "lightning-radio-group",
             "lightning-rich-text-toolbar-button",
             "lightning-rich-text-toolbar-button-group",
@@ -1672,6 +1682,7 @@
             "lightning-tabset",
             "lightning-toast",
             "lightning-toast-container",
+            "lightning-tile",
             "lightning-timepicker",
             "lightning-vertical-navigation",
             "lightning-vertical-navigation-item",

package/scopedImports/@salesforce-label-LightningRecordPicker.actionIconAlternativeText.js

@@ -0,0 +1 @@
+export default 'Action';

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/ariaObserver/ariaObserver.js

@@ -40,7 +40,7 @@ const SUPPORTED_ATTRIBUTES_ARRAY = [
     [
         'aria-details',
         {
-            ariaReflection: 'ariaControlsElements',
+            ariaReflection: 'ariaDetailsElements',
             polyfill: setAriaDetails,
         },
     ],

package/src/lightning/baseCombobox/baseCombobox.html

@@ -131,7 +131,7 @@
                                 <template if:true={item.label}>
                                     <li role="presentation" class="slds-listbox__item">
                                         <div class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="presentation">
-                                            <h3 role="presentation" title={item.label}>{item.label}</h3>
+                                            <h3 role="presentation" title={item.label} class="slds-listbox__option-header">{item.label}</h3>
                                         </div>
                                     </li>
                                 </template>

package/src/lightning/baseCombobox/baseCombobox.js

@@ -102,6 +102,7 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     _logoLoaded = false;
     _inputDescribedBy = [];
     _inputAriaControls;
+    _inputAriaDetails;
     _activeElementDomId;
     _autocomplete = 'off';
     _dropdownAlignment = 'left';

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/baseComboboxItem/card.lbc.native.css

@@ -1,2 +1,3 @@
 @import 'lightning/sldsCommon';
+@import 'lightning/sldsMediaObject';
 @import './listbox.slds.css';

package/src/lightning/baseComboboxItem/inline.lbc.native.css

@@ -1,2 +1,3 @@
 @import 'lightning/sldsCommon';
+@import 'lightning/sldsMediaObject';
 @import './listbox.slds.css';

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:

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:

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:

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/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 {