lightning-base-components 1.21.8-alpha → 1.21.9-alpha

package/metadata/raptor.json

@@ -1751,6 +1751,7 @@
   "industriesHealthcloudHpiApi": {},
   "industriesIdentityVerificationApi": {},
   "industriesInstantPricingApi": {},
+  "industriesIntegrationOrchestrationApi": {},
   "industriesInterestTaggingApi": {},
   "industriesLoyaltyEngineApi": {},
   "industriesManufacturingApi": {},

package/package.json

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

package/src/lightning/accordionSection/button.slds.css

@@ -424,8 +424,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * SLDS light DOM.
    *
    * E.g. --slds-c-button-color-background
-   */
-:host([data-render-mode="shadow"][variant='base']) [part~='button'] {
+*/
+/**
+  * text variant is for button-stateful
+*/
+:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button']{
   --sds-c-button-spacing-inline: 0;
   --slds-c-button-neutral-text-color: var(--slds-g-color-accent-2);
   --slds-c-button-neutral-color-border: transparent;
@@ -437,7 +440,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-color-background-focus: transparent;
   --slds-c-button-neutral-color-background-active: transparent;
 }
-:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled {
+:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='text']) [part~='button']:disabled {
   --sds-c-button-color-background: transparent;
   --sds-c-button-color-border: transparent;
 }

package/src/lightning/button/button.slds.css

@@ -424,8 +424,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * SLDS light DOM.
    *
    * E.g. --slds-c-button-color-background
-   */
-:host([data-render-mode="shadow"][variant='base']) [part~='button'] {
+*/
+/**
+  * text variant is for button-stateful
+*/
+:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button']{
   --sds-c-button-spacing-inline: 0;
   --slds-c-button-neutral-text-color: var(--slds-g-color-accent-2);
   --slds-c-button-neutral-color-border: transparent;
@@ -437,7 +440,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-color-background-focus: transparent;
   --slds-c-button-neutral-color-background-active: transparent;
 }
-:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled {
+:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='text']) [part~='button']:disabled {
   --sds-c-button-color-background: transparent;
   --sds-c-button-color-border: transparent;
 }

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

@@ -427,8 +427,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * SLDS light DOM.
    *
    * E.g. --slds-c-button-color-background
-   */
-:host([data-render-mode="shadow"][variant='base']) [part~='button'] {
+*/
+/**
+  * text variant is for button-stateful
+*/
+:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button']{
   --sds-c-button-spacing-inline: 0;
   --slds-c-button-neutral-text-color: var(--slds-g-color-accent-2);
   --slds-c-button-neutral-color-border: transparent;
@@ -440,7 +443,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-color-background-focus: transparent;
   --slds-c-button-neutral-color-background-active: transparent;
 }
-:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled {
+:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='text']) [part~='button']:disabled {
   --sds-c-button-color-background: transparent;
   --sds-c-button-color-border: transparent;
 }

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

@@ -427,8 +427,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * SLDS light DOM.
    *
    * E.g. --slds-c-button-color-background
-   */
-:host([data-render-mode="shadow"][variant='base']) [part~='button'] {
+*/
+/**
+  * text variant is for button-stateful
+*/
+:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button']{
   --sds-c-button-spacing-inline: 0;
   --slds-c-button-neutral-text-color: var(--slds-g-color-accent-2);
   --slds-c-button-neutral-color-border: transparent;
@@ -440,7 +443,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-color-background-focus: transparent;
   --slds-c-button-neutral-color-background-active: transparent;
 }
-:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled {
+:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='text']) [part~='button']:disabled {
   --sds-c-button-color-background: transparent;
   --sds-c-button-color-border: transparent;
 }

package/src/lightning/buttonIconStateful/button.slds.css

@@ -424,8 +424,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * SLDS light DOM.
    *
    * E.g. --slds-c-button-color-background
-   */
-:host([data-render-mode="shadow"][variant='base']) [part~='button'] {
+*/
+/**
+  * text variant is for button-stateful
+*/
+:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button']{
   --sds-c-button-spacing-inline: 0;
   --slds-c-button-neutral-text-color: var(--slds-g-color-accent-2);
   --slds-c-button-neutral-color-border: transparent;
@@ -437,7 +440,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-color-background-focus: transparent;
   --slds-c-button-neutral-color-background-active: transparent;
 }
-:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled {
+:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='text']) [part~='button']:disabled {
   --sds-c-button-color-background: transparent;
   --sds-c-button-color-border: transparent;
 }

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

@@ -427,8 +427,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * SLDS light DOM.
    *
    * E.g. --slds-c-button-color-background
-   */
-:host([data-render-mode="shadow"][variant='base']) [part~='button'] {
+*/
+/**
+  * text variant is for button-stateful
+*/
+:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button']{
   --sds-c-button-spacing-inline: 0;
   --slds-c-button-neutral-text-color: var(--slds-g-color-accent-2);
   --slds-c-button-neutral-color-border: transparent;
@@ -440,7 +443,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-color-background-focus: transparent;
   --slds-c-button-neutral-color-background-active: transparent;
 }
-:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled {
+:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='text']) [part~='button']:disabled {
   --sds-c-button-color-background: transparent;
   --sds-c-button-color-border: transparent;
 }

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

@@ -424,8 +424,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * SLDS light DOM.
    *
    * E.g. --slds-c-button-color-background
-   */
-:host([data-render-mode="shadow"][variant='base']) [part~='button'] {
+*/
+/**
+  * text variant is for button-stateful
+*/
+:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button']{
   --sds-c-button-spacing-inline: 0;
   --slds-c-button-neutral-text-color: var(--slds-g-color-accent-2);
   --slds-c-button-neutral-color-border: transparent;
@@ -437,7 +440,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-color-background-focus: transparent;
   --slds-c-button-neutral-color-background-active: transparent;
 }
-:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled {
+:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='text']) [part~='button']:disabled {
   --sds-c-button-color-background: transparent;
   --sds-c-button-color-border: transparent;
 }

package/src/lightning/buttonMenu/buttonMenu.js

@@ -571,13 +571,15 @@ export default class LightningButtonMenu extends LightningShadowBaseClass {
             this.toggleMenuVisibility();
             this.focusOnButton();
         }
-
         event.stopPropagation();
-        this.dispatchSelect(event);
+        const cancelled = !this.dispatchSelect(event);
+        if (cancelled) {
+            event.preventDefault();
+        }
     }
 
     dispatchSelect(event) {
-        this.dispatchEvent(
+        return this.dispatchEvent(
             new CustomEvent('select', {
                 cancelable: true,
                 detail: {

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

@@ -424,8 +424,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * SLDS light DOM.
    *
    * E.g. --slds-c-button-color-background
-   */
-:host([data-render-mode="shadow"][variant='base']) [part~='button'] {
+*/
+/**
+  * text variant is for button-stateful
+*/
+:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button']{
   --sds-c-button-spacing-inline: 0;
   --slds-c-button-neutral-text-color: var(--slds-g-color-accent-2);
   --slds-c-button-neutral-color-border: transparent;
@@ -437,7 +440,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-color-background-focus: transparent;
   --slds-c-button-neutral-color-background-active: transparent;
 }
-:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled {
+:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='text']) [part~='button']:disabled {
   --sds-c-button-color-background: transparent;
   --sds-c-button-color-border: transparent;
 }

package/src/lightning/datatable/datatable.js

@@ -297,20 +297,18 @@ export default class LightningDatatable extends LightningElement {
         }
 
         // do necessary updates since rows have changed
-        if (this.hasValidKeyField) {
-            if (this.isConnected) {
-                this.updateRows();
-            }
-            if (isInfiniteLoading) {
-                addTableHeight(state, previousData, data);
-            } else {
-                // if data is new, reset all virtualization data
-                state.heightCache = {};
-                state.offsets = [0];
-                state.offsetRanges = [{ start: 0, end: 0 }];
-                state.firstVisibleIndex = 0;
-                state.tableHeight = state.rowHeight * state.rows.length;
-            }
+        if (this.hasValidKeyField && this.isConnected) {
+            this.updateRows();
+        }
+        if (isInfiniteLoading) {
+            addTableHeight(state, previousData, data);
+        } else {
+            // if data is new, reset all virtualization data
+            state.heightCache = {};
+            state.offsets = [0];
+            state.offsetRanges = [{ start: 0, end: 0 }];
+            state.firstVisibleIndex = 0;
+            state.tableHeight = state.rowHeight * state.rows.length;
         }
         if (_customerSelectedRows) {
             this.setSelectedRows(_customerSelectedRows);
@@ -1216,6 +1214,10 @@ export default class LightningDatatable extends LightningElement {
                 ? divTemplate
                 : tableTemplate;
         if (templateToRender !== this._renderedTemplate) {
+            // if private types present, don't reset custom types since template
+            // change will trigger slotchange event without types actually changing
+            this._shouldResetCustomTypes =
+                !this._privateTypes.privateCustomTypes.size;
             const { _widthObserver } = this;
             if (_widthObserver) {
                 _widthObserver.disconnect();
@@ -1240,6 +1242,11 @@ export default class LightningDatatable extends LightningElement {
         if (!this._hasSetInitialCustomTypes) {
             this.setCustomTypes();
             this._hasSetInitialCustomTypes = true;
+            // Return here since a re-render will occur
+            // for column updates if custom types added
+            if (this._privateTypes.privateCustomTypes.size) {
+                return;
+            }
         }
 
         // This keeps underlying table element up to date if the aria-* properties on this element is dynamically changed.
@@ -1425,8 +1432,8 @@ export default class LightningDatatable extends LightningElement {
         if (this._shouldResetCustomTypes) {
             this.setCustomTypes();
         } else {
-            // On first call, custom types have already been set
-            // in renderedCallback. Subsequent calls
+            // Event was triggered by the initial render or template change
+            // after already setting custom types, so we ignore this call
             this._shouldResetCustomTypes = true;
         }
     }
@@ -2125,7 +2132,14 @@ export default class LightningDatatable extends LightningElement {
                         provider.getDataTypes()
                     );
                     this.updateColumns(this._rawColumns);
+                    this._columnWidthManager.handleColumnsChange(
+                        this.state.columns
+                    );
                 }
+            } else {
+                // If no assigned nodes, there will be no extra slotchange event
+                // We need to set this var so we don't ignore the call
+                this._shouldResetCustomTypes = true;
             }
         }
     }

package/src/lightning/datatable/templates/div/div.html

@@ -996,14 +996,14 @@
                                     </template>
                                 </div>
                             </template>
-                            <!-- Loading Indicator -->
-                            <template if:true={isLoading}>
-                                <div>
-                                    <div colspan={state.columns.length} class="slds-is-relative">
-                                        <lightning-primitive-datatable-loading-indicator></lightning-primitive-datatable-loading-indicator>
-                                    </div>
-                                </div>
-                            </template>
+                        </div>
+                    </template>
+                    <!-- Loading Indicator -->
+                    <template if:true={isLoading}>
+                        <div>
+                            <div colspan={state.columns.length} part="spinner" class="slds-is-relative">
+                                <lightning-primitive-datatable-loading-indicator></lightning-primitive-datatable-loading-indicator>
+                            </div>
                         </div>
                     </template>
                 </div>

package/src/lightning/datatable/templates/div/div.lbc.synthetic.css

@@ -104,3 +104,10 @@ div[role='grid'][data-render-mode-inline='true']
     direction: ltr;
     unicode-bidi: embed;
 }
+
+/* Spinner */
+
+[part="spinner"] {
+    padding: var(--slds-g-sizing-2, 0.25rem) var(--slds-g-sizing-3, 0.5rem);
+    border-top: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-1);
+}

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

@@ -427,8 +427,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * SLDS light DOM.
    *
    * E.g. --slds-c-button-color-background
-   */
-:host([data-render-mode="shadow"][variant='base']) [part~='button'] {
+*/
+/**
+  * text variant is for button-stateful
+*/
+:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button']{
   --sds-c-button-spacing-inline: 0;
   --slds-c-button-neutral-text-color: var(--slds-g-color-accent-2);
   --slds-c-button-neutral-color-border: transparent;
@@ -440,7 +443,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-color-background-focus: transparent;
   --slds-c-button-neutral-color-background-active: transparent;
 }
-:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled {
+:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='text']) [part~='button']:disabled {
   --sds-c-button-color-background: transparent;
   --sds-c-button-color-border: transparent;
 }

package/src/lightning/menuItem/menuItem.js

@@ -272,7 +272,14 @@ export default class LightningMenuItem extends LightningShadowBaseClass {
                 event.preventDefault();
             } else {
                 // do nothing and take default action of navigating to the specified
-                // href
+                // href, unless value exists and cancelled.
+                if (this.value) {
+                    // override href logic
+                    const cancelled = !this.dispatchSelect();
+                    if (cancelled) {
+                        event.preventDefault();
+                    }
+                }
             }
         } else {
             event.preventDefault();
@@ -294,7 +301,15 @@ export default class LightningMenuItem extends LightningShadowBaseClass {
             // follow HREF if a value was provided
             if (this.href) {
                 // trigger click behavior
-                this.template.querySelector('a').click();
+                if (this.value) {
+                    // override href logic
+                    const cancelled = !this.dispatchSelect();
+                    if (!cancelled) {
+                        this.template.querySelector('a').click();
+                    }
+                } else {
+                    this.template.querySelector('a').click();
+                }
             } else {
                 // if no HREF is provided follow usual select behavior
                 this.dispatchSelect();
@@ -312,7 +327,7 @@ export default class LightningMenuItem extends LightningShadowBaseClass {
      **/
     dispatchSelect() {
         if (!this.disabled) {
-            this.dispatchEvent(
+            return this.dispatchEvent(
                 new CustomEvent('privateselect', {
                     bubbles: true,
                     cancelable: true,
@@ -322,6 +337,7 @@ export default class LightningMenuItem extends LightningShadowBaseClass {
                 })
             );
         }
+        return true;
     }
 
     /**

package/src/lightning/pillContainer/button.slds.css

@@ -424,8 +424,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * SLDS light DOM.
    *
    * E.g. --slds-c-button-color-background
-   */
-:host([data-render-mode="shadow"][variant='base']) [part~='button'] {
+*/
+/**
+  * text variant is for button-stateful
+*/
+:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button']{
   --sds-c-button-spacing-inline: 0;
   --slds-c-button-neutral-text-color: var(--slds-g-color-accent-2);
   --slds-c-button-neutral-color-border: transparent;
@@ -437,7 +440,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-color-background-focus: transparent;
   --slds-c-button-neutral-color-background-active: transparent;
 }
-:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled {
+:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='text']) [part~='button']:disabled {
   --sds-c-button-color-background: transparent;
   --sds-c-button-color-border: transparent;
 }

package/src/lightning/primitiveDatatableTooltip/primitiveDatatableTooltip.js

@@ -1,21 +1,25 @@
 import { LightningElement, createElement, api, track } from 'lwc';
-import { raf, guid } from 'lightning/utilsPrivate';
+import { raf, guid, isCSR } from 'lightning/utilsPrivate';
 import LightningPrimitiveDatatableTooltipBubble from 'lightning/primitiveDatatableTooltipBubble';
 import { getNubbinShiftAmount, getBubbleAlignAndPosition } from './utils';
 import { classSet } from 'lightning/utils';
 
 const SLDS_ZINDEX = '--slds-c-popover-position-zindex';
 
-const CACHED_BUBBLE_ELEMENT = createElement(
+const CACHED_BUBBLE_ELEMENT = isCSR ? createElement(
     'lightning-primitive-datatable-tooltip-bubble',
     {
         is: LightningPrimitiveDatatableTooltipBubble,
     }
-);
-// Render above modal's 9000 z-index
-CACHED_BUBBLE_ELEMENT.style.setProperty(SLDS_ZINDEX, 9500);
-CACHED_BUBBLE_ELEMENT.style.position = 'absolute';
-CACHED_BUBBLE_ELEMENT.style.minWidth = '75px';
+) : null;
+
+if (isCSR) {
+    // Render above modal's 9000 z-index
+    CACHED_BUBBLE_ELEMENT.style.setProperty(SLDS_ZINDEX, 9500);
+    CACHED_BUBBLE_ELEMENT.style.position = 'absolute';
+    CACHED_BUBBLE_ELEMENT.style.minWidth = '75px';
+}
+
 const DEFAULT_ANCHORING = {
     trigger: {
         horizontal: 'left',

package/src/lightning/primitiveInputCheckbox/input-checkbox.slds.css

@@ -284,7 +284,7 @@
 /**
      * Focused
      */
-:host([data-render-mode="shadow"]:focus-within) [part='indicator'] {
+:host(:not([disabled])) input:focus-within + .slds-checkbox__label [part='indicator'] {
     --_slds-c-inputcheckbox-color-background: var(--_slds-c-inputcheckbox-color-background-focus);
     --_slds-c-inputcheckbox-color-border: var(
       --_slds-c-inputcheckbox-color-border-focus,

package/src/lightning/primitiveInputFile/button.slds.css

@@ -424,8 +424,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * SLDS light DOM.
    *
    * E.g. --slds-c-button-color-background
-   */
-:host([data-render-mode="shadow"][variant='base']) [part~='button'] {
+*/
+/**
+  * text variant is for button-stateful
+*/
+:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button']{
   --sds-c-button-spacing-inline: 0;
   --slds-c-button-neutral-text-color: var(--slds-g-color-accent-2);
   --slds-c-button-neutral-color-border: transparent;
@@ -437,7 +440,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-color-background-focus: transparent;
   --slds-c-button-neutral-color-background-active: transparent;
 }
-:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled {
+:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='text']) [part~='button']:disabled {
   --sds-c-button-color-background: transparent;
   --sds-c-button-color-border: transparent;
 }

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

@@ -427,8 +427,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * SLDS light DOM.
    *
    * E.g. --slds-c-button-color-background
-   */
-:host([data-render-mode="shadow"][variant='base']) [part~='button'] {
+*/
+/**
+  * text variant is for button-stateful
+*/
+:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button']{
   --sds-c-button-spacing-inline: 0;
   --slds-c-button-neutral-text-color: var(--slds-g-color-accent-2);
   --slds-c-button-neutral-color-border: transparent;
@@ -440,7 +443,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-color-background-focus: transparent;
   --slds-c-button-neutral-color-background-active: transparent;
 }
-:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled {
+:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='text']) [part~='button']:disabled {
   --sds-c-button-color-background: transparent;
   --sds-c-button-color-border: transparent;
 }

package/src/lightning/verticalNavigationOverflow/button.slds.css

@@ -424,8 +424,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * SLDS light DOM.
    *
    * E.g. --slds-c-button-color-background
-   */
-:host([data-render-mode="shadow"][variant='base']) [part~='button'] {
+*/
+/**
+  * text variant is for button-stateful
+*/
+:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button']{
   --sds-c-button-spacing-inline: 0;
   --slds-c-button-neutral-text-color: var(--slds-g-color-accent-2);
   --slds-c-button-neutral-color-border: transparent;
@@ -437,7 +440,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-color-background-focus: transparent;
   --slds-c-button-neutral-color-background-active: transparent;
 }
-:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled {
+:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='text']) [part~='button']:disabled {
   --sds-c-button-color-background: transparent;
   --sds-c-button-color-border: transparent;
 }