lightning-base-components 1.18.5-alpha → 1.18.7-alpha

package/metadata/raptor.json

@@ -3174,6 +3174,9 @@
       {
         "name": "blur"
       },
+      {
+        "name": "checkValidity"
+      },
       {
         "name": "focus"
       }
@@ -3298,6 +3301,7 @@
   "salesPeopleApi": {},
   "salesUserWorkingHoursApi": {},
   "select": {
+    "minVersion": "59.0",
     "slotNames": [],
     "properties": [
       {
@@ -3362,6 +3366,7 @@
     ]
   },
   "serviceAutomationServiceCatalogApi": {},
+  "serviceCategoryNetworkApi": {},
   "serviceCloudVoiceToolkitApi": {
     "minVersion": "52.0",
     "slotNames": [],

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.18.5-alpha",
+    "version": "1.18.7-alpha",
     "license": "MIT",
     "files": [
         "external",
@@ -918,6 +918,14 @@
                 "name": "@salesforce/label/LightningLookup.noAccess",
                 "path": "scopedImports/@salesforce-label-LightningLookup.noAccess.js"
             },
+            {
+                "name": "@salesforce/label/LightningRecordPicker.invalidConfigurationErrorMessage",
+                "path": "scopedImports/@salesforce-label-LightningRecordPicker.invalidConfigurationErrorMessage.js"
+            },
+            {
+                "name": "@salesforce/label/LightningRecordPicker.dataSourceErrorMessage",
+                "path": "scopedImports/@salesforce-label-LightningRecordPicker.dataSourceErrorMessage.js"
+            },
             {
                 "name": "@salesforce/label/LightningPicklist.available",
                 "path": "scopedImports/@salesforce-label-LightningPicklist.available.js"
@@ -1255,63 +1263,7 @@
                 "path": "scopedImports/@salesforce-internal-core.untrustedContentDomain.js"
             }
         ],
-        "nativeShadowEnabledComponents": [
-            "lightning-accordion",
-            "lightning-accordion-section",
-            "lightning-avatar",
-            "lightning-base-combobox",
-            "lightning-base-combobox-item",
-            "lightning-breadcrumb",
-            "lightning-breadcrumbs",
-            "lightning-bubble",
-            "lightning-button",
-            "lightning-button-group",
-            "lightning-button-icon",
-            "lightning-button-icon-stateful",
-            "lightning-button-menu",
-            "lightning-button-stateful",
-            "lightning-card",
-            "lightning-calendar",
-            "lightning-color-picker-custom",
-            "lightning-color-picker-panel",
-            "lightning-combobox",
-            "lightning-datepicker",
-            "lightning-datetimepicker",
-            "lightning-dual-listbox",
-            "lightning-dynamic-icon",
-            "lightning-formatted-rich-text",
-            "lightning-formatted-text",
-            "lightning-helptext",
-            "lightning-icon",
-            "lightning-input",
-            "lightning-layout",
-            "lightning-layout-item",
-            "lightning-menu-divider",
-            "lightning-menu-item",
-            "lightning-menu-subheader",
-            "lightning-overlay-container",
-            "lightning-pill",
-            "lightning-pill-container",
-            "lightning-popup",
-            "lightning-popup-source",
-            "lightning-primitive-bubble",
-            "lightning-primitive-color-picker-button",
-            "lightning-primitive-icon",
-            "lightning-primitive-input-checkbox",
-            "lightning-primitive-input-checkbox-button",
-            "lightning-primitive-input-color",
-            "lightning-primitive-input-file",
-            "lightning-primitive-input-simple",
-            "lightning-primitive-input-toggle",
-            "lightning-radio-group",
-            "lightning-select",
-            "lightning-spinner",
-            "lightning-tab",
-            "lightning-tab-bar",
-            "lightning-timepicker",
-            "lightning-vertical-navigation",
-            "lightning-vertical-navigation-section"
-        ],
+        "nativeShadowEnabledComponents": [],
         "expose": [
             "lightning/accordion",
             "lightning/accordionSection",

package/scopedImports/@salesforce-label-LightningPill.delete.js

@@ -1 +1 @@
-export default 'Press delete or backspace to remove';
+export default 'Press delete or backspace to remove {0}';

package/scopedImports/@salesforce-label-LightningPill.deleteAndNavigate.js

@@ -1 +1 @@
-export default 'Press delete or backspace to remove, press enter to navigate';
+export default 'Press delete or backspace to remove {0}, press enter to navigate';

package/scopedImports/@salesforce-label-LightningPill.remove.js

@@ -1 +1 @@
-export default 'Remove';
+export default 'Remove {0}';

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

@@ -0,0 +1 @@
+export default 'Something went wrong. Try again.';

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

@@ -0,0 +1 @@
+export default 'Review the field\'s configuration. Ask your Salesforce admin for help.';

package/src/lightning/accordion/accordion.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
-@import './accordion.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './accordion.slds.css'; */
 
 :host {
     display: block;

package/src/lightning/accordion/accordion.js

@@ -1,12 +1,11 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api } from 'lwc';
 import { createAccordionManager } from 'lightning/accordionUtilsPrivate';
 
 /**
  * A collection of vertically stacked sections with multiple content areas.
  * @slot default Placeholder for accordion-section components.
  */
-export default class LightningAccordion extends LightningShadowBaseClass {
+export default class LightningAccordion extends LightningElement {
     privateIsSectionLessInLastRender = true;
     _allowMultipleSectionsOpen = false;
     connected = false;
@@ -31,7 +30,6 @@ export default class LightningAccordion extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.connected = true;
         this.setAttribute('role', 'list');
         this.classList.add('slds-accordion');

package/src/lightning/accordionSection/accordionSection.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
-@import './accordion-section.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './accordion-section.slds.css'; */
 
 :host {
     display: list-item;

package/src/lightning/accordionSection/accordionSection.js

@@ -1,5 +1,4 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { generateUniqueId } from 'lightning/inputUtils';
 import { keyCodes, isHeadingLevelValid } from 'lightning/utilsPrivate';
 import { classSet } from 'lightning/utils';
@@ -11,7 +10,7 @@ import DIR from '@salesforce/i18n/dir';
  * Actions are displayed at the top right corner of the accordion section.
  * @slot default Placeholder for your content in the accordion section.
  */
-export default class LightningAccordionSection extends LightningShadowBaseClass {
+export default class LightningAccordionSection extends LightningElement {
     /**
      * The unique section name to use with the active-section-name attribute in the accordion component.
      * @type {string}
@@ -59,7 +58,6 @@ export default class LightningAccordionSection extends LightningShadowBaseClass
     privateUniqueId = generateUniqueId('lgt-accordion-section');
 
     connectedCallback() {
-        super.connectedCallback();
         this.setAttribute('role', 'listitem');
         this.classList.add('slds-accordion__list-item');
         this.registerSectionWithParent();

package/src/lightning/avatar/avatar.css

@@ -1,2 +1,2 @@
-@import 'lightning/sldsCommon';
-@import './avatar.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './avatar.slds.css'; */

package/src/lightning/avatar/avatar.js

@@ -1,5 +1,4 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { normalizeString, reflectAttribute } from 'lightning/utilsPrivate';
 import { computeSldsClass } from 'lightning/iconUtils';
@@ -10,7 +9,7 @@ const DEFAULT_VARIANT = 'square';
 /**
  * A visual representation of an object.
  */
-export default class LightningAvatar extends LightningShadowBaseClass {
+export default class LightningAvatar extends LightningElement {
     /**
      * The alternative text used to describe the avatar, which is displayed as
      * hover text on the image.

package/src/lightning/baseCombobox/baseCombobox.css

@@ -1,6 +1,6 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './base-combobox.slds.css';
-@import './spinner.slds.css';
+@import './spinner.slds.css'; */
 
 .slds-inline-logo {
     height: 1rem;

package/src/lightning/baseCombobox/baseCombobox.js

@@ -3,8 +3,7 @@ import labelDeselectOptionKeyboard from '@salesforce/label/LightningCombobox.des
 import labelLoadingText from '@salesforce/label/LightningCombobox.loadingText';
 import labelPillCloseButtonAlternativeText from '@salesforce/label/LightningCombobox.pillCloseButtonAlternativeText';
 import labelPlaceholder from '@salesforce/label/LightningCombobox.placeholder';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { handleKeyDownOnInput } from './keyboard';
 import { BaseComboboxEvents } from './baseComboboxEvents';
 import { classSet } from 'lightning/utils';
@@ -21,7 +20,7 @@ import {
 import { AutoPosition, Direction } from 'lightning/positionLibrary';
 import { VARIANT } from 'lightning/inputUtils';
 import AriaObserver from 'lightning/ariaObserver';
-import { isCSR } from 'lightning/utilsPrivate';
+
 const i18n = {
     ariaSelectedOptions: labelAriaSelectedOptions,
     deselectOptionKeyboard: labelDeselectOptionKeyboard,
@@ -33,8 +32,6 @@ const i18n = {
 const SMALL_MIN_HEIGHT = '2.25rem';
 const MEDIUM_MIN_HEIGHT = '6.75rem';
 const INPUT_ELEMENT_SELECTOR = '.slds-combobox__input';
-const INPUT_PART_ELEMENT_SELECTOR = '[part~="input-text"]';
-const FAUX_INPUT_BUTTON_ELEMENT_SELECTOR = `${INPUT_ELEMENT_SELECTOR}.slds-input_faux`;
 
 /**
  * Breakpoint when viewport height doesn't fit 10 items in the dropdown
@@ -49,9 +46,8 @@ const ARIA_LABEL = 'aria-label';
 const ARIA_ACTIVEDESCENDANT = 'aria-activedescendant';
 const ARIA_INVALID = 'aria-invalid';
 
-export default class LightningBaseCombobox extends LightningShadowBaseClass {
+export default class LightningBaseCombobox extends LightningElement {
     static delegatesFocus = true;
-    static validationOptOut = ['class'];
 
     /**
      * Controls auto-filling of the input. Set the attribute to pass
@@ -83,16 +79,17 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     @api attributionLogoUrl;
     @api attributionLogoAssistiveText;
 
-    _showDropdownActivityIndicator = false;
+    @track _showDropdownActivityIndicator = false;
     @track _items = [];
-    _disabled = false;
-    _dropdownVisible = false;
-    _hasDropdownOpened = false;
-    _highlightedOptionElementId = null;
-    _variant;
-    _dropdownHeight = 'standard';
-    _readonly = false;
-    _logoLoaded = false;
+    @track _disabled = false;
+    @track _dropdownVisible = false;
+    @track _hasDropdownOpened = false;
+    @track _highlightedOptionElementId = null;
+    @track _variant;
+    @track _dropdownHeight = 'standard';
+    @track _readonly = false;
+    @track _logoLoaded = false;
+
     _inputDescribedBy = [];
     _inputAriaControls;
     _activeElementDomId;
@@ -101,13 +98,11 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     originDisableDefaultHighlight;
     privateDisableDefaultHighlight;
     _editingMode = false;
-    _connected = false;
-    ariaObserver = null;
 
     constructor() {
         super();
         this._events = new BaseComboboxEvents(this);
-        this.setupAriaObserverIfAbsent();
+        this.ariaObserver = new AriaObserver(this);
     }
 
     renderedCallback() {
@@ -119,16 +114,19 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
                 },
             })
         );
-        this.syncAriaObserver();
+
+        if (this.isConnected) {
+            this.ariaObserver.sync();
+        }
+
         this.synchronizeA11y();
     }
 
     connectedCallback() {
-        super.connectedCallback();
-        this.setupAriaObserverIfAbsent();
-        if (isCSR) {
-            this.overrideDropdownAlignment();
+        if (!this.ariaObserver) {
+            this.ariaObserver = new AriaObserver(this);
         }
+        this.overrideDropdownAlignment();
         this.classList.add('slds-combobox_container');
         this._connected = true;
         this._keyboardInterface = this.dropdownKeyboardInterface();
@@ -137,19 +135,9 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     disconnectedCallback() {
         this._connected = false;
         this._listBoxElementCache = undefined;
-        this.removeAriaObserver();
-    }
-
-    setupAriaObserverIfAbsent() {
-        if (!this.ariaObserver) {
-            this.ariaObserver = new AriaObserver(this);
-        }
-    }
-
-    removeAriaObserver() {
-        if (this.ariaObserver && this.ariaObserver.disconnect) {
+        if (this.ariaObserver) {
             this.ariaObserver.disconnect();
-            this.ariaObserver = null;
+            this.ariaObserver = undefined;
         }
     }
 
@@ -172,15 +160,6 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
         this.connectAriaControls();
     }
 
-    syncAriaObserver() {
-        this.setupAriaObserverIfAbsent();
-        const ariaObserverSyncExists =
-            this.ariaObserver && this.ariaObserver.sync;
-        if (this.isConnected && ariaObserverSyncExists) {
-            this.ariaObserver.sync();
-        }
-    }
-
     connectAriaControls() {
         this.connectAriaAttribute({
             attribute: ARIA_CONTROLS,
@@ -190,18 +169,15 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     }
 
     connectAriaAttribute(params) {
-        this.setupAriaObserverIfAbsent();
-        if (this.ariaObserver && this.ariaObserver.connect) {
-            const relatedNodeIds = Array.isArray(params.relatedNodeIds)
-                ? params.relatedNodeIds.map((el) => getRealDOMId(el)).join(' ')
-                : getRealDOMId(params.relatedNodeIds);
-
-            this.ariaObserver.connect({
-                ...params,
-                targetSelector: INPUT_ELEMENT_SELECTOR,
-                relatedNodeIds,
-            });
-        }
+        const relatedNodeIds = Array.isArray(params.relatedNodeIds)
+            ? params.relatedNodeIds.map((el) => getRealDOMId(el)).join(' ')
+            : getRealDOMId(params.relatedNodeIds);
+
+        this.ariaObserver.connect({
+            ...params,
+            targetSelector: INPUT_ELEMENT_SELECTOR,
+            relatedNodeIds,
+        });
     }
 
     @api
@@ -252,10 +228,7 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     }
 
     set rootAriaNode(root) {
-        this.setupAriaObserverIfAbsent();
-        if (this.ariaObserver) {
-            this.ariaObserver.root = root;
-        }
+        this.ariaObserver.root = root;
     }
 
     get inputId() {
@@ -599,9 +572,7 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     }
 
     get dropdownElement() {
-        return isCSR
-            ? this.template.querySelector('[data-dropdown-element]')
-            : null;
+        return this.template.querySelector('[data-dropdown-element]');
     }
 
     get i18n() {
@@ -946,9 +917,7 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     }
 
     get inputElement() {
-        return isCSR
-            ? this.template.querySelector(INPUT_ELEMENT_SELECTOR)
-            : null;
+        return this.template.querySelector(INPUT_ELEMENT_SELECTOR);
     }
 
     // remove-next-line-for-c-namespace
@@ -961,25 +930,8 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
             this._autoPosition = new AutoPosition(this);
         }
 
-        // when using dropdown-alignment='auto' positioning and standard variant lighting-combobox
-        // the selector for 'target' is determined by this.isUserInputDisabled
-        // when TRUE the target is a BUTTON element acting as a faux / fake INPUT element
-        // when FALSE the target is an INPUT element
-        // NOTE: isUserInputDisabled is NOT determined by combobox.disabled
-        // instead isUserInputDisabled is determined by
-        // this.isStandardVariant && !this.isAutocompleteEnabled (which is an internal variable)
-        // this means that the INPUT is often NOT present, and instead a BUTTON is
-        // this selector for .start({ target }) is used to
-        // position the element from so this.isUserInputDisabled
-        // must be taken into account so the proper selector can be used
-        // the 'element' below is always the same without IF/ELSE, so there
-        // is not a need to switch between selectors
-        const selectorToUse = this.isUserInputDisabled
-            ? FAUX_INPUT_BUTTON_ELEMENT_SELECTOR
-            : INPUT_PART_ELEMENT_SELECTOR;
-
         this._autoPosition.start({
-            target: () => this.template.querySelector(selectorToUse),
+            target: () => this.template.querySelector("[part~='input-text']"),
             element: () => this.template.querySelector('div.slds-dropdown'),
             align: {
                 horizontal: Direction.Left,

package/src/lightning/baseComboboxItem/baseComboboxItem.js

@@ -1,14 +1,12 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api } from 'lwc';
 
 import card from './card.html';
 import inline from './inline.html';
 
-export default class LightningBaseComboboxItem extends LightningShadowBaseClass {
+export default class LightningBaseComboboxItem extends LightningElement {
     @api item = {};
 
     connectedCallback() {
-        super.connectedCallback();
         // We want to make sure that the item has 'aria-selected' if it's selectable
         if (this.item.selectable) {
             this.setAttribute('aria-selected', 'false');

package/src/lightning/baseComboboxItem/inline.css

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

package/src/lightning/breadcrumb/breadcrumb.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
-@import './breadcrumb.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './breadcrumb.slds.css'; */
 
 :host {
     display: list-item;

package/src/lightning/breadcrumb/breadcrumb.js

@@ -1,12 +1,11 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api } from 'lwc';
 
 const DEFAULT_HREF = '#';
 
 /**
  * An item in the hierarchy path of the page the user is on.
  */
-export default class LightningBreadcrumb extends LightningShadowBaseClass {
+export default class LightningBreadcrumb extends LightningElement {
     /**
      * The URL of the page that the breadcrumb goes to.
      * @type {string}
@@ -81,7 +80,6 @@ export default class LightningBreadcrumb extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.connected = true;
         // add default CSS classes to custom element tag
         this.classList.add('slds-breadcrumb__item');

package/src/lightning/breadcrumbs/breadcrumbs.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
-@import './breadcrumbs.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './breadcrumbs.slds.css'; */
 
 :host {
     display: block;

package/src/lightning/breadcrumbs/breadcrumbs.js

@@ -1,12 +1,11 @@
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement } from 'lwc';
 
 /**
  * A hierarchy path of the page you're currently visiting within the website or app.
  * @slot default Placeholder for lightning-breadcrumb
  */
-export default class LightningBreadcrumbs extends LightningShadowBaseClass {
+export default class LightningBreadcrumbs extends LightningElement {
     connectedCallback() {
-        super.connectedCallback();
         this.setAttribute('aria-label', 'Breadcrumbs');
         this.setAttribute('role', 'navigation');
     }

package/src/lightning/button/button.css

@@ -1,2 +1,2 @@
-@import 'lightning/sldsCommon';
-@import './button.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './button.slds.css'; */

package/src/lightning/button/button.js

@@ -4,6 +4,7 @@ import {
     normalizeString as normalize,
     normalizeBoolean,
     reflectAttribute,
+    isCSR,
 } from 'lightning/utilsPrivate';
 import LightningPrimitiveButton from 'lightning/primitiveButton';
 import template from './button.html';
@@ -230,7 +231,7 @@ export default class LightningButton extends LightningPrimitiveButton {
     }
 
     get button() {
-        return this.template.querySelector('button');
+        return isCSR ? this.template.querySelector('button') : null;
     }
 
     /**
@@ -240,7 +241,7 @@ export default class LightningButton extends LightningPrimitiveButton {
     connectedCallback() {
         // Set `data-render-mode` attribute in native shadow mode
         if (!this.template.synthetic) {
-            this.template.host.setAttribute('data-render-mode', 'shadow');
+            this.setAttribute('data-render-mode', 'shadow');
         }
         if (!this._connected) {
             reflectAttribute(this, 'variant', this._normalizedVariant);

package/src/lightning/buttonGroup/buttonGroup.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
-@import './button-group.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './button-group.slds.css'; */
 
 /* Fix for lihgtning-button-icon not being flush with lightning-button, for details see: W-11658757
  *

package/src/lightning/buttonGroup/buttonGroup.js

@@ -1,9 +1,8 @@
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement } from 'lwc';
 import { BUTTON_GROUP_ORDER } from 'lightning/utilsPrivate';
 
-export default class LightningButtonGroup extends LightningShadowBaseClass {
+export default class LightningButtonGroup extends LightningElement {
     connectedCallback() {
-        super.connectedCallback();
         this.classList.add('slds-button-group');
         this.setAttribute('role', 'group');
     }

package/src/lightning/buttonIcon/buttonIcon.css

@@ -1,2 +1,2 @@
-@import 'lightning/sldsCommon';
-@import './button-icon.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './button-icon.slds.css'; */

package/src/lightning/buttonIcon/buttonIcon.js

@@ -318,7 +318,6 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
      * the buttons.
      */
     connectedCallback() {
-        super.connectedCallback();
         this._connected = true;
         if (isCSR) {
             this.dispatchEvent(

package/src/lightning/buttonIconStateful/buttonIconStateful.css

@@ -1,2 +1,2 @@
-@import 'lightning/sldsCommon';
-@import './button-icon-stateful.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './button-icon-stateful.slds.css'; */

package/src/lightning/buttonMenu/buttonMenu.css

@@ -1,2 +1,2 @@
-@import 'lightning/sldsCommon';
-@import './button-menu.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './button-menu.slds.css'; */

package/src/lightning/buttonMenu/buttonMenu.js

@@ -1,7 +1,6 @@
 import labelLoading from '@salesforce/label/LightningButtonMenu.loading';
 import labelShowMenu from '@salesforce/label/LightningButtonMenu.showMenu';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet } from 'lightning/utils';
 import {
     normalizeBoolean,
@@ -47,7 +46,7 @@ validMenuAlignments.push(...['auto', 'auto-right', 'auto-left']);
  * Represents a dropdown menu with a list of actions or functions.
  * @slot default Placeholder for menu-item
  */
-export default class LightningButtonMenu extends LightningShadowBaseClass {
+export default class LightningButtonMenu extends LightningElement {
     static delegatesFocus = true;
 
     /**
@@ -146,7 +145,6 @@ export default class LightningButtonMenu extends LightningShadowBaseClass {
     _needsFocusAfterRender = false;
 
     connectedCallback() {
-        super.connectedCallback();
         this._connected = true;
         this.keyboardInterface = this.menuKeyboardInterface();