lightning-base-components 1.21.5-alpha → 1.21.7-alpha

package/src/lightning/select/select.js

@@ -5,10 +5,10 @@ import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
     classListMutation,
-    getRealDOMId,
     normalizeBoolean,
-    synchronizeAttrs,
     reflectAttribute,
+    isNativeComponent,
+    isCSR,
 } from 'lightning/utilsPrivate';
 import {
     FieldConstraintApi,
@@ -18,6 +18,7 @@ import {
     normalizeVariant,
     VARIANT,
 } from 'lightning/inputUtils';
+import AriaObserver from 'lightning/ariaObserver';
 
 const i18n = {
     required: labelRequired,
@@ -71,9 +72,23 @@ export default class LightningSelect extends LightningShadowBaseClass {
     _multiple = false;
     _fieldLevelHelp;
     _size;
+    _ariaDescribedBy = '';
+    _ariaLabelledBy = '';
+    _helpMessageChanged = false;
+    ariaObserver = null;
+
+    constructor() {
+        super();
+        this.ariaObserver = new AriaObserver(this);
+        this._isNativeShadow = isNativeComponent(this);
+    }
 
     connectedCallback() {
         super.connectedCallback();
+        if (!this.ariaObserver) {
+            this.ariaObserver = new AriaObserver(this);
+        }
+        this._connected = true;
         this.classList.add('slds-form-element');
         this.updateClassList();
         this.interactingState = new InteractingState();
@@ -81,14 +96,30 @@ export default class LightningSelect extends LightningShadowBaseClass {
     }
 
     renderedCallback() {
+        if (this.isConnected) {
+            this.ariaObserver.sync(this._isNativeShadow);
+        }
+        if (!this._rendered) {
+            this.connectAriaDescribedBy();
+            this.connectAriaLabelledBy();
+            this._rendered = true;
+        }
         if (this.options && this._selectedValue !== undefined) {
             this.selectOptionsByValue(this._selectedValue);
         }
-        synchronizeAttrs(this.selectElement, {
-            'aria-describedby': getRealDOMId(
-                this.template.querySelector('[data-help-message]')
-            ),
-        });
+        // If the help message changed, the help message element needs to be (un)related
+        if (this._helpMessageChanged) {
+            this.connectAriaDescribedBy();
+            this._helpMessageChanged = false;
+        }
+    }
+
+    disconnectedCallback() {
+        this._connected = false;
+        if (this.ariaObserver && this.ariaObserver.disconnect) {
+            this.ariaObserver.disconnect();
+            this.ariaObserver = null;
+        }
     }
 
     get computedAriaInvalid() {
@@ -228,6 +259,32 @@ export default class LightningSelect extends LightningShadowBaseClass {
         }
     }
 
+    /**
+     * Aria Described by value on parent lighting-select
+     * @type {string}
+     */
+    @api
+    get ariaDescribedBy() {
+        return this._ariaDescribedBy;
+    }
+    set ariaDescribedBy(elements) {
+        this._ariaDescribedBy = elements;
+        this.connectAriaDescribedBy();
+    }
+    /**
+     * A space-separated list of element IDs that provide labels for the
+     * aria-labelled-by value on parent lighting-select.
+     * @type {string}
+     */
+    @api
+    get ariaLabelledBy() {
+        return this._ariaLabelledBy;
+    }
+    set ariaLabelledBy(references) {
+        this._ariaLabelledBy = references;
+        this.connectAriaLabelledBy();
+    }
+
     updateClassList() {
         classListMutation(this.classList, {
             'slds-form-element_stacked': this.variant === VARIANT.LABEL_STACKED,
@@ -294,6 +351,7 @@ export default class LightningSelect extends LightningShadowBaseClass {
     reportValidity() {
         return this._constraint.reportValidity((message) => {
             this._helpMessage = message;
+            this._helpMessageChanged = true;
         });
     }
 
@@ -314,6 +372,7 @@ export default class LightningSelect extends LightningShadowBaseClass {
                 valueMissing: this.messageWhenValueMissing,
                 customError: this.customErrorMessage,
             });
+            this._helpMessageChanged = true;
         }
     }
 
@@ -382,6 +441,29 @@ export default class LightningSelect extends LightningShadowBaseClass {
         this.dispatchEvent(new CustomEvent('blur'));
     }
 
+    connectAriaDescribedBy() {
+        if (isCSR) {
+            this.ariaObserver.connect({
+                targetSelector: 'select',
+                attribute: 'aria-describedby',
+                relatedNodeIds: this.ariaDescribedBy,
+                relatedNodes: this.template.querySelector(
+                    '[data-help-message]'
+                ),
+            });
+        }
+    }
+
+    connectAriaLabelledBy() {
+        if (isCSR) {
+            this.ariaObserver.connect({
+                targetSelector: 'select',
+                attribute: 'aria-labelledby',
+                relatedNodeIds: this.ariaLabelledBy,
+            });
+        }
+    }
+
     selectOptionsByValue(optionValue) {
         if (this.multiple) {
             if (Array.isArray(optionValue)) {

package/src/lightning/tabBar/tab-bar.slds.css

@@ -46,6 +46,10 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
   }
 
+  :host([data-render-mode="shadow"]) [part='tab-item'] .slds-tabs_default__link:hover {
+    color: currentcolor;
+  }
+
   :host([data-render-mode="shadow"][variant='standard']) [part='tab-bar'],:host([data-render-mode="shadow"][variant='scoped']) [part='tab-bar'] {
     display: flex;
     align-items: flex-start;
@@ -65,6 +69,10 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     color: currentcolor;
   }
 
+  :host([data-render-mode="shadow"]) [role='tab']:hover {
+    --_slds-g-font-decoration-hover: none;
+  }
+
   :host([data-render-mode="shadow"]) .slds-is-active [role='tab']:focus {
     text-decoration: underline;
   }
@@ -95,6 +103,9 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
     /* Spacing */
     --slds-c-buttonicon-spacing-block: 0;
+    --sds-c-button-spacing-inlinestart: var(--slds-g-spacing-4);
+    --sds-c-button-spacing-inlineend: var(--slds-g-spacing-4);
+    --sds-c-button-sizing-height: 100%;
 
     /* Border Color */
     --slds-c-buttonicon-color-border: transparent;

package/src/lightning/tabset/tabset.slds.css

@@ -9,5 +9,5 @@
     font-weight: var(--sds-g-font-weight-bold, bold);
   }
   :host([data-render-mode="shadow"]) .slds-tabs_default .slds-tabs_default__header:not(.slds-assistive-text) {
-    font-size: var(--sds-g-font-scale-neg-2, calc(var(--slds-g-font-scale-neg-1) / var(--slds-g-font-scale-ratio)));
+    font-size: var(--sds-g-font-scale-neg-2, 0.625rem);
   }

package/src/lightning/textarea/__examples__/various/various.html

@@ -3,7 +3,7 @@
         <h1 class="slds-text-heading_small">Various Textarea Examples</h1>
         <p class="slds-text-body_regular">The following examples show various ways to create a textarea component.</p>
     </div>
-    
+
     <div class="row">
         <h2 class="header">Basic Examples</h2>
         <lightning-textarea name="input1" label="Enter some text" ></lightning-textarea>
@@ -18,4 +18,21 @@
         <lightning-textarea name="input6" required value="initial value" label="Required textarea field with a maximum length of 60 characters" maxlength="60" ></lightning-textarea>
         <lightning-textarea name="input7" required value="" placeholder="compose your tweet" label="Required textarea field with a maximum length of 140 characters" maxlength="140" message-when-too-long="A maximum of 140 characters are allowed in a tweet." message-when-value-missing="An empty tweet cannot be posted." ></lightning-textarea>
     </div>
+
+    <div class="row">
+        <h2 class="header">Textarea with aria-describedby example</h2>
+        <div class="aria-describedby slds-box slds-m-around__large">
+            <h3>Example of textarea aria-describedby with multiple descriptions rendered before textarea in reverse order</h3>
+            <span class="desc-1" id="desc-1">Description One</span>
+            <span class="desc-2" id="desc-2">Description Two</span>
+            <lightning-textarea label="Enter some text" aria-describedby="desc-2 desc-1"></lightning-textarea>
+        </div>
+        <h2 class="header">Textarea with aria-labelledby example</h2>
+        <div class="aria-describedby-later slds-box slds-m-around__large">
+            <h3>Example of textarea aria-labelledby with multiple descriptions rendered after textarea in reverse order</h3>
+            <lightning-textarea label="Enter some text" aria-labelledby="desc-4 desc-3"></lightning-textarea>
+            <span class="desc-3" id="desc-3">Description Three</span>
+            <span class="desc-4" id="desc-4">Description Four</span>
+        </div>
+    </div>
 </template>

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

@@ -187,7 +187,10 @@
     }
 
 :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
-        border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 
@@ -242,6 +245,7 @@
 
 @media (width >= 48em) {
         :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
+          float: left;
           max-width: calc(33% - var(--slds-g-sizing-6)); /* Removing icon width for when the help-text icon is present */
           flex-basis: calc(33% - var(--slds-g-sizing-6)); /* Some form element controls are set to display:flex */
           flex-grow: 1; /* For IE and Safari which didn't auto expand to the available space */

package/src/lightning/textarea/textarea.html

@@ -4,6 +4,7 @@
             <abbr class="slds-required" title={i18n.required}>*</abbr>
         </template>
         {label}
+        <slot name="label-end"></slot>
     </label>
     <lightning-helptext
         if:true={fieldLevelHelp}

package/src/lightning/textarea/textarea.js

@@ -48,6 +48,7 @@ export default class LightningTextarea extends LightningShadowBaseClass {
     @track _helpMessage;
     @track _fieldLevelHelp;
     _ariaDescribedBy = '';
+    _ariaLabelledBy = '';
     _helpMessageChanged = false;
     ariaObserver = null;
 
@@ -127,6 +128,21 @@ export default class LightningTextarea extends LightningShadowBaseClass {
         this.connectAriaDescribedBy();
     }
 
+    /**
+     * A space-separated list of element IDs that provide labels for the
+     * aria-labelled-by value on parent lighting-textarea.
+     * @type {string}
+     */
+    @api
+    get ariaLabelledBy() {
+        return this._ariaLabelledBy;
+    }
+
+    set ariaLabelledBy(references) {
+        this._ariaLabelledBy = references;
+        this.connectAriaLabelledBy();
+    }
+
     /**
      * The maximum number of characters allowed in the textarea.
      * @type {number}
@@ -441,6 +457,7 @@ export default class LightningTextarea extends LightningShadowBaseClass {
         // instead of actually setting the value on the textarea element.
         if (!this._rendered) {
             this.connectAriaDescribedBy();
+            this.connectAriaLabelledBy();
             this._rendered = true;
             this._setInputValue(this._defaultValue);
 
@@ -526,6 +543,14 @@ export default class LightningTextarea extends LightningShadowBaseClass {
         });
     }
 
+    connectAriaLabelledBy() {
+        this.ariaObserver.connect({
+            targetSelector: 'textarea',
+            attribute: 'aria-labelledby',
+            relatedNodeIds: this.ariaLabelledBy,
+        });
+    }
+
     _setInputValue(value) {
         // The underlying input has been modified to dispatch an 'input' event when a direct value set
         // is used to allow for Dragon Natural Speaking (which sets the value directly on the inputs instead

package/src/lightning/textarea/textarea.slds.css

@@ -60,8 +60,8 @@
 
     :host([data-render-mode="shadow"]) .slds-textarea[disabled],:host([data-render-mode="shadow"]) 
     .slds-textarea.slds-is-disabled {
-        background-color: var(--slds-g-color-neutral-base-80, var(--slds-g-color-neutral-base-95));
-        border-color: var(--slds-g-color-border-base-1, var(--slds-g-color-neutral-base-80));
+        background-color: var(--slds-g-color-disabled-container-2);
+        border-color: var(--slds-g-color-border-disabled-2);
         color: inherit;
         cursor: not-allowed;
         user-select: none;

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

@@ -187,7 +187,10 @@
     }
 
 :host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control {
-        border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 
@@ -242,6 +245,7 @@
 
 @media (width >= 48em) {
         :host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element__label {
+          float: left;
           max-width: calc(33% - var(--slds-g-sizing-6)); /* Removing icon width for when the help-text icon is present */
           flex-basis: calc(33% - var(--slds-g-sizing-6)); /* Some form element controls are set to display:flex */
           flex-grow: 1; /* For IE and Safari which didn't auto expand to the available space */

package/src/lightning/timepicker/timepicker.html

@@ -11,8 +11,10 @@
     <div class="slds-form-element__control">
         <lightning-base-combobox
             part="input-container"
+            aria-disabled={ariaDisabled}
             onready={handleReady}
             autocomplete={autocomplete}
+            accesskey={accessKey}
             dropdown-height="small"
             name={name}
             variant="lookup"
@@ -25,6 +27,7 @@
             input-icon-name="utility:clock"
             input-label={comboboxLabel}
             input-controls-element={ariaControlsElement}
+            input-details-elements={ariaDetailsElements}
             input-labelled-by-element={ariaLabelledByElement}
             dropdown-alignment="auto"
             ontextchange={handleInputChange}
@@ -40,5 +43,5 @@
         >
         </lightning-base-combobox>
     </div>
-    <div id="error-message" data-error-message class={computedClass}>{_errorMessage}</div>
+    <div id="error-message" data-error-message class={computedClass} aria-live="polite">{_errorMessage}</div>
 </template>

package/src/lightning/timepicker/timepicker.js

@@ -72,10 +72,13 @@ export default class LightningTimePicker extends LightningShadowBaseClass {
 
     @api ariaLabelledByElement;
     @api ariaControlsElement;
+    @api ariaDetailsElements;
     @api ariaLabel;
+    @api ariaDisabled;
     @api label;
     @api name;
     @api placeholder = '';
+    @api accessKey;
 
     @api
     get comboboxComponent() {

package/src/lightning/toast/button-icon.slds.css

@@ -197,7 +197,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   );
   --sds-c-button-spacing-inline: var(
     --slds-c-button-neutral-spacing-inline,
-    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4))
+    var(--slds-s-button-spacing-inline, var(--slds-g-spacing-4));
   );
   --sds-c-button-spacing-block: var(--slds-c-button-neutral-spacing-block);
 
@@ -258,27 +258,27 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   );
   --sds-c-button-color-background-hover: var(
     --slds-c-button-neutral-color-background-hover,
-    var(--slds-g-color-surface-container-1)
+    var(--slds-g-color-surface-container-2)
   );
-  --sds-c-button-color-background-focus: var(--slds-c-button-neutral-color-background-focus, var(--slds-g-color-surface-container-1));
+  --sds-c-button-color-background-focus: var(--slds-c-button-neutral-color-background-focus, var(--slds-g-color-surface-container-2));
   --sds-c-button-color-background-active: var(
     --slds-c-button-neutral-color-background-active,
-    var(--slds-g-color-surface-container-1)
+    var(--slds-g-color-surface-container-2)
   );
 
   /* Border color */
-  --sds-c-button-color-border: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
+  --sds-c-button-color-border: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-2));
   --sds-c-button-color-border-hover: var(
     --slds-c-button-neutral-color-border-hover,
-    var(--slds-g-color-border-accent-1)
+    var(--slds-g-color-border-2)
   );
   --sds-c-button-color-border-focus: var(
     --slds-c-button-neutral-color-border-focus,
-    var(--slds-g-color-border-accent-1)
+    var(--slds-g-color-border-2)
   );
   --sds-c-button-color-border-active: var(
     --slds-c-button-neutral-color-border-active,
-    var(--slds-g-color-border-accent-1)
+    var(--slds-g-color-border-2)
   );
 
   /* Text color */
@@ -293,11 +293,12 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /* Shadow */
   --sds-c-button-shadow: var(--slds-c-button-neutral-shadow);
   --sds-c-button-shadow-focus: var(--slds-c-button-neutral-shadow-focus);
-
-  /* Disabled */
-  --sds-c-button-color-background-disabled: var(--slds-g-color-surface-container-1);
-  --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
-  --sds-c-button-text-color-disabled: var(--slds-g-color-disabled-1);
+}
+/* Overriding primitiveBaseButton */
+:host([data-render-mode="shadow"]) [part~='button']:disabled {
+   --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);
 }
 /**
   * A note about fallbacks on the default variant:
@@ -413,9 +414,9 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-color-border-active: var(--slds-c-button-neutral-color-border, var(--slds-g-color-border-1));
 }
 :host([data-render-mode="shadow"][variant='brand']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='success']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='destructive']) [part~='button']:disabled {
-  --sds-c-button-color-background: var(--slds-g-color-disabled-container-1);
+  --sds-c-button-color-background: var(--slds-g-color-disabled-container-2);
   --sds-c-button-color-border: var(--slds-g-color-border-disabled-1);
-  --sds-c-button-text-color: var(--slds-g-color-on-disabled-1);
+  --sds-c-button-text-color: var(--slds-g-color-on-disabled-2);
 }
 /**
    * 'base' variant is not the default in LBC. It is the default in the light
@@ -531,37 +532,42 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-color-background-active: transparent;
 
   /* Border */
-  --slds-c-button-neutral-color-border: var(--slds-g-color-border-1);
-  --slds-c-button-neutral-color-border-hover: var(--slds-g-color-border-1);
-  --slds-c-button-neutral-color-border-focus: var(--slds-g-color-border-1);
-  --slds-c-button-neutral-color-border-active: var(--slds-g-color-border-1);
+  --slds-c-button-neutral-color-border: var(--slds-g-color-border-2);
+  --slds-c-button-neutral-color-border-hover: var(--slds-g-color-border-2);
+  --slds-c-button-neutral-color-border-focus: var(--slds-g-color-border-2);
+  --slds-c-button-neutral-color-border-active: var(--slds-g-color-border-2);
 
   /* Disabled */
   --sds-c-button-color-background-disabled: var(--slds-g-color-surface-container-1);
   --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']:hover {
+:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):hover {
   --slds-c-icon-color-foreground: var(
     --slds-c-buttonicon-color-foreground-hover,
-    var(--slds-g-color-accent-4)
+    var(--slds-g-color-accent-3)
   );
 }
-:host([data-render-mode="shadow"]) [part~='button-icon']:focus {
+:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):focus {
   --slds-c-icon-color-foreground: var(
     --slds-c-buttonicon-color-foreground-focus,
-    var(--slds-g-color-accent-4)
+    var(--slds-g-color-accent-3)
   );
 }
-:host([data-render-mode="shadow"]) [part~='button-icon']:active {
+:host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):active {
   --slds-c-icon-color-foreground: var(
     --slds-c-buttonicon-color-foreground-active,
-    var(--slds-g-color-accent-4)
+    var(--slds-g-color-accent-3)
   );
+
+  /* Shadow
+  * Added to override active shadow * inherited from button */
+  --sds-c-button-shadow-active: none;
 }
 /* Create disabled state for the 1st time since icon doesn't have disabled state. */
 :host([data-render-mode="shadow"]) [part~='button-icon']:disabled {
   --slds-c-icon-color-foreground: var(--slds-g-color-disabled-1);
+  --sds-c-button-color-background-disabled: transparent;
 }
 /**
   * Variant - Bare
@@ -662,6 +668,12 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   */
 :host([data-render-mode="shadow"][variant='border-filled']) [part~='button-icon'] {
   --slds-c-button-neutral-color-background: var(--slds-g-color-surface-container-1);
+  --slds-c-button-neutral-color-background-hover: var(--slds-g-color-surface-container-1);
+  --slds-c-button-neutral-color-background-focus: var(--slds-g-color-surface-container-1);
+  --slds-c-button-neutral-color-background-active: var(--slds-g-color-surface-container-1);
+}
+:host([data-render-mode="shadow"][variant='border-filled']) [part~='button-icon']:disabled {
+  --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
 }
 /**
   * Sizes
@@ -697,6 +709,10 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-buttonicon-spacing-inline: 0;
   --slds-c-icon-sizing: var(--slds-g-sizing-4);
 }
+:host([data-render-mode="shadow"][size='large'][variant='bare']) [part~='button-icon'],:host([data-render-mode="shadow"][size='large'][variant='bare-inverse']) [part~='button-icon'] {
+  --sds-c-button-sizing-height: auto;
+  --sds-c-button-sizing-width: auto;
+}
 /**
   * End part
   */

package/src/lightning/tooltipLibrary/tooltipLibrary.js

@@ -228,11 +228,10 @@ export class Tooltip {
         const target = this._target();
 
         if (!this._initialized && target) {
-            ['touchstart', 'click'].forEach((eventName) =>
-                target.addEventListener(eventName, (event) =>
-                    this.toggleIfTouchOrClick(event)
-                )
-            );
+            target.addEventListener('touchstart', (e) => {
+                e.stopPropagation();
+                this.toggle();
+            });
 
             ['mouseenter', 'focus'].forEach((eventName) =>
                 target.addEventListener(eventName, (event) => this.show(event))
@@ -252,16 +251,6 @@ 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/verticalNavigationItem/vertical-navigation-item.slds.css

@@ -15,7 +15,7 @@
   border-radius: 0;
   box-shadow: inset 0 0 0 var(--slds-g-color-brand-base-60);
   cursor: pointer;
-  color: var(--slds-g-color-neutral-base-10);
+  color: var(--slds-g-color-neutral-base-40);
 }
 
 :host([data-render-mode="shadow"]) .slds-nav-vertical__action_overflow {

package/src/lightning/verticalNavigationItemBadge/badge.slds.css

@@ -12,7 +12,7 @@
     align-items: center;
     padding: var(--slds-g-spacing-1) var(--slds-g-spacing-2);
     color: var(--slds-c-badge-text-color, var(--slds-g-color-on-surface-3));
-    font-size: var(--slds-c-badge-font-size, var(--slds-g-font-scale-neg-2));
+    font-size: var(--slds-c-badge-font-size, var(--slds-g-font-scale-neg-1));
     font-weight: var(--slds-g-font-weight-7);
     /* stylelint-disable */
     line-height: var(--slds-c-badge-font-lineheight, initial);

package/src/lightning/verticalNavigationItemBadge/vertical-navigation-item.slds.css

@@ -15,7 +15,7 @@
   border-radius: 0;
   box-shadow: inset 0 0 0 var(--slds-g-color-brand-base-60);
   cursor: pointer;
-  color: var(--slds-g-color-neutral-base-10);
+  color: var(--slds-g-color-neutral-base-40);
 }
 
 :host([data-render-mode="shadow"]) .slds-nav-vertical__action_overflow {

package/src/lightning/verticalNavigationItemIcon/vertical-navigation-item.slds.css

@@ -15,7 +15,7 @@
   border-radius: 0;
   box-shadow: inset 0 0 0 var(--slds-g-color-brand-base-60);
   cursor: pointer;
-  color: var(--slds-g-color-neutral-base-10);
+  color: var(--slds-g-color-neutral-base-40);
 }
 
 :host([data-render-mode="shadow"]) .slds-nav-vertical__action_overflow {