lightning-base-components 1.18.7-ssr → 1.18.8-alpha

package/src/lightning/modalBase/modalBase.js

@@ -1,5 +1,4 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { api, LightningElement } from 'lwc';
 import { classSet } from 'lightning/utils';
 import {
     makeEverythingExceptElementInert,
@@ -17,7 +16,6 @@ import {
 } from 'lightning/focusUtils';
 import closeButtonAltText from '@salesforce/label/LightningModalBase.cancelandclose';
 import disableCloseBtnMessage from '@salesforce/label/LightningModalBase.waitstate';
-import AriaObserver from 'lightning/ariaObserver';
 
 const DEBOUNCE_RESIZE = 300;
 const SMALL_SCREEN_SIZE = 767;
@@ -26,7 +24,7 @@ const SIZE_MEDIUM = 'medium';
 const SIZE_LARGE = 'large';
 const SIZE_FULL = 'full';
 
-export default class LightningModalBase extends LightningShadowBaseClass {
+export default class LightningModalBase extends LightningElement {
     // this is visible in DOM, changed from 'lightning-modal-base'
     static [instanceName] = 'lightning-modal-base';
 
@@ -53,7 +51,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     headerTitleRef = null;
     headerTabElemRef = null;
     headerHeightCheck = null;
-    updateHeaderCallback = null;
 
     // modalBody, child
     bodyRegistered = false;
@@ -76,7 +73,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     footerDefaultSlotIsPopulated = false;
     footerTabElemRef = null;
     footerHeightCheck = null;
-    updateFooterCallback = null;
 
     // aria attributes
     modalLabel = null;
@@ -94,14 +90,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     // before modal opened, element previously focused
     savedActiveElement;
 
-    // accessibility
-    ariaObserver = null;
-
-    constructor() {
-        super();
-        this.ariaObserver = new AriaObserver(this);
-    }
-
     /**
      * <lightning-modal> label value
      * Text to display as the heading at the top of the modal
@@ -453,10 +441,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     closeModal() {
         this.returnFocusToBackground();
         this.renderBackgroundActive(this.savedInertElements);
-        if (this.ariaObserver) {
-            this.ariaObserver.disconnect();
-            this.ariaObserver = undefined;
-        }
     }
 
     /**
@@ -473,9 +457,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         });
         // console.error when label empty
         this.errorLabelRequired();
-        if (this.ariaObserver) {
-            this.ariaObserver.disconnect();
-        }
     };
 
     get isDescriptionSet() {
@@ -540,12 +521,10 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         // headerLabelIsPopulated is equivalent labelIsEmpty, but from modalHeader level
         if (headerRegistered) {
             if (headerLabelId && headerLabelIsPopulated) {
-                this.ariaObserver.connect({
-                    targetNode: this.modalWrapper,
-                    attribute: 'aria-labelledby',
-                    relatedNodes: [this.headerTitleRef],
+                synchronizeAttrs(this.modalWrapper, {
+                    [ARIA.LABELLEDBY]: headerLabelId,
+                    [ARIA.LABEL]: null,
                 });
-                synchronizeAttrs(this.modalWrapper, { [ARIA.LABEL]: null });
                 // if labelId not set OR header label value not set,
                 // must console.error
             } else {
@@ -862,7 +841,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         defaultSlotWrapperId,
         defaultSlotHasRendered,
         checkHeaderHeightCallback,
-        updateHeaderCallback,
         unRegisterCallback,
         labelIsPopulated,
         headerHeight,
@@ -879,7 +857,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         this.headerTitleRef = headerRef;
         this.headerTabElemRef = firstTabbableElemRef;
         this.headerHeightCheck = checkHeaderHeightCallback;
-        this.updateHeaderCallback = updateHeaderCallback;
         unRegisterCallback(() => {
             this.unregisterHeader();
         });
@@ -918,7 +895,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         this.headerTitleRef = null;
         this.headerTabElemRef = null;
         this.headerHeightCheck = null;
-        this.updateHeaderCallback = null;
     }
 
     /**
@@ -951,7 +927,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         unRegisterCallback,
         firstTabbableElemRef,
         checkFooterHeightCallback,
-        updateFooterCallback,
     }) {
         this.footerRegistered = true;
         this.footerDefaultSlotIsPopulated = defaultSlotIsPopulated;
@@ -959,7 +934,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         this.updateFooterHeight(footerHeight);
         this.footerTabElemRef = firstTabbableElemRef || null;
         this.footerHeightCheck = checkFooterHeightCallback;
-        this.updateFooterCallback = updateFooterCallback;
         unRegisterCallback(() => {
             this.unregisterFooter();
         });
@@ -993,7 +967,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         this.footerDefaultSlotIsPopulated = false;
         this.footerTabElemRef = null;
         this.footerHeightCheck = null;
-        this.updateFooterCallback = null;
     }
 
     /**
@@ -1077,16 +1050,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
         clearTimeout(this.timeoutId);
         this.timeoutId = 0;
 
-        if (this.updateHeaderCallback) {
-            // Update the header size
-            this.updateHeaderCallback({ size: this.size });
-        }
-
-        if (this.updateFooterCallback) {
-            // Update the footer size
-            this.updateFooterCallback({ size: this.size });
-        }
-
         if (this.bodyRegistered && !this.bodyResizeScheduled) {
             // check, and update isSmallScreenSize before
             // callback to modalBody
@@ -1106,7 +1069,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
                         backdropWidth: this.backdropDimensions.width,
                         sizeSetFull: this.size === SIZE_FULL,
                         isSmallScreenSize: this.isSmallScreenSize,
-                        size: this.size,
                     };
                     this.baseUpdateBodyCallback(values);
                 }
@@ -1262,7 +1224,6 @@ export default class LightningModalBase extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.initModalState();
         // check for screen size right away
         // not adding event listeners here,

package/src/lightning/modalBody/modalBody.html

@@ -2,7 +2,6 @@
     <div
         id="modal-content"
         class={modalBodyCssClasses}
-        part="modal-body"
         data-content-container
         onprivatescrollablecontainer={handleScrollableContainerRepositionEvent}
     >

package/src/lightning/modalBody/modalBody.js

@@ -1,4 +1,4 @@
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { getRealDOMId } from 'lightning/utilsPrivate';
 import { findAllTabbableElements, filterTooltips } from 'lightning/focusUtils';
@@ -6,7 +6,7 @@ import { findAllTabbableElements, filterTooltips } from 'lightning/focusUtils';
 /**
  * The modal body component to display main content area in lightning modal.
  * */
-export default class LightningModalBody extends LightningShadowBaseClass {
+export default class LightningModalBody extends LightningElement {
     // private tracked state
     initialRender = true;
     initialSlotRender = true;
@@ -243,7 +243,6 @@ export default class LightningModalBody extends LightningShadowBaseClass {
             const {
                 sizeSetFull,
                 isSmallScreenSize,
-                size,
                 headerHeight,
                 footerHeight,
             } = values;
@@ -258,17 +257,6 @@ export default class LightningModalBody extends LightningShadowBaseClass {
             );
             // set updated values based on behavior
             this.setModalBodyHeight(updatedValues, shouldUseFullHeight);
-
-            // update host variant and size based on header and footer height
-            if (!this.headerPresent) {
-                this.setAttribute('data-variant-headless', '');
-            }
-            if (!this.footerPresent) {
-                this.setAttribute('data-variant-footless', '');
-            }
-
-            // set the host size based on the modal base size
-            this.setAttribute('data-size', size);
         }
     }
 
@@ -311,7 +299,6 @@ export default class LightningModalBody extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         // handle case where modalBody is added/removed/re-added to DOM
         this.initState();
     }

package/src/lightning/modalFooter/modalFooter.html

@@ -1,5 +1,5 @@
 <template>
-    <div class={footerCssClasses} part="modal-footer">
+    <div class={footerCssClasses}>
         <slot
             data-footer-slot
             onslotchange={handleDefaultSlotChange}

package/src/lightning/modalFooter/modalFooter.js

@@ -1,4 +1,4 @@
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { findAllTabbableElements, filterTooltips } from 'lightning/focusUtils';
 
@@ -19,7 +19,7 @@ const MAX_HEIGHT_CHECKS = 4;
 /**
  * The modal footer component to display footer content in lightning modal.
  * */
-export default class LightningModalFooter extends LightningShadowBaseClass {
+export default class LightningModalFooter extends LightningElement {
     // tracked private state
     initialRender = true;
     initialSlotRender = true;
@@ -127,18 +127,6 @@ export default class LightningModalFooter extends LightningShadowBaseClass {
             : { changed: false, value: null };
     }
 
-    /**
-     * if not the intial render, update state passed from modalBase
-     * @param {Object} values passed from modalBase to modalFooter
-     * @private
-     */
-    handleUpdateFooterCallback(values) {
-        if (!this.initialRender) {
-            const { size } = values;
-            this.setAttribute('data-size', size);
-        }
-    }
-
     /**
      * Register modalFooter with modal parent, including callbacks to
      * unregister the modal footer
@@ -157,8 +145,6 @@ export default class LightningModalFooter extends LightningShadowBaseClass {
                 firstTabbableElemRef: this.firstTabbableElement,
                 checkFooterHeightCallback:
                     this.handleModalFooterResizeCheck.bind(this),
-                updateFooterCallback:
-                    this.handleUpdateFooterCallback.bind(this),
                 unRegisterCallback: (unregisterCallback) => {
                     this.unregisterCallback = unregisterCallback;
                 },
@@ -225,7 +211,6 @@ export default class LightningModalFooter extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         // handle case where modalFooter is added/removed/added to DOM
         // so registerWithParent gets called
         this.initState();

package/src/lightning/modalHeader/modalHeader.html

@@ -1,5 +1,5 @@
  <template>
-    <div class="slds-modal__header" part="modal-header">
+    <div class="slds-modal__header">
         <template if:true={label}>
             <h1
                 id="modal-label"

package/src/lightning/modalHeader/modalHeader.js

@@ -1,5 +1,4 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { api, LightningElement } from 'lwc';
 import { getRealDOMId } from 'lightning/utilsPrivate';
 import { findAllTabbableElements, filterTooltips } from 'lightning/focusUtils';
 
@@ -18,7 +17,7 @@ const MAX_HEIGHT_CHECKS = 4;
 /**
  * Creates a header to display the heading and tagline at the top of a modal.
  * */
-export default class LightningModalHeader extends LightningShadowBaseClass {
+export default class LightningModalHeader extends LightningElement {
     // tracked private state
     initialRender = true;
     initialSlotRender = true;
@@ -168,18 +167,6 @@ export default class LightningModalHeader extends LightningShadowBaseClass {
             : { changed: false, value: null };
     }
 
-    /**
-     * if not the intial render, update state passed from modalBase
-     * @param {Object} values passed from modalBase to modalHeader
-     * @private
-     */
-    handleUpdateHeaderCallback(values) {
-        if (!this.initialRender) {
-            const { size } = values;
-            this.setAttribute('data-size', size);
-        }
-    }
-
     /**
      * Register modalHeader with modal parent, including callbacks to
      * unregister the modal header
@@ -200,8 +187,6 @@ export default class LightningModalHeader extends LightningShadowBaseClass {
                 defaultSlotHasRendered: !this.initialSlotRender,
                 checkHeaderHeightCallback:
                     this.handleModalHeaderResizeCheck.bind(this),
-                updateHeaderCallback:
-                    this.handleUpdateHeaderCallback.bind(this),
                 unRegisterCallback: (unregisterCallback) => {
                     this.unregisterCallback = unregisterCallback;
                 },
@@ -269,7 +254,6 @@ export default class LightningModalHeader extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.initState();
     }
 

package/src/lightning/overlay/overlay.js

@@ -1,5 +1,4 @@
-import { createElement, api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, createElement, api } from 'lwc';
 import { instanceName } from 'lightning/overlayUtils';
 import OverlayContainer from 'lightning/overlayContainer';
 
@@ -19,7 +18,7 @@ function container() {
 /**
  * Extend this component for open/close apis.
  */
-export default class LightningOverlay extends LightningShadowBaseClass {
+export default class LightningOverlay extends LightningElement {
     /**
      * Easier to debug when dynamically created.
      */

package/src/lightning/pill/link.css

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

package/src/lightning/pill/pill.js

@@ -4,8 +4,7 @@ import labelPillRemove from '@salesforce/label/LightningPill.remove';
 import labelPillWarning from '@salesforce/label/LightningPill.warning';
 import labelPillDeleteAndNavigate from '@salesforce/label/LightningPill.deleteAndNavigate';
 import formFactor from '@salesforce/client/formFactor';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import {
     keyCodes,
     classListMutation,
@@ -49,7 +48,7 @@ function modifyAttribute(el, name, value) {
  * A pill displays a label that can contain links and can be removed from view.
  * @slot default Placeholder for an image, such as an icon or avatar.
  */
-export default class LightningPill extends LightningShadowBaseClass {
+export default class LightningPill extends LightningElement {
     /**
      * The URL of the page that the link goes to.
      * @type {string}
@@ -274,7 +273,6 @@ export default class LightningPill extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this._connected = true;
         if (this.isPlainLink || this.isLink) {
             this.updateLinkInfo(this.href);

package/src/lightning/pill/plain.css

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

package/src/lightning/pill/plainLink.css

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

package/src/lightning/pillContainer/barePillContainer.css

@@ -1,3 +1,3 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './pill.slds.css';
-@import './pill-container.slds.css';
+@import './pill-container.slds.css'; */

package/src/lightning/pillContainer/pillContainer.js

@@ -1,7 +1,6 @@
 import labelContainerLabel from '@salesforce/label/LightningPillContainer.label';
 import pillContainerMoreLabel from '@salesforce/label/LightningPillContainer.more';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import LightningPillItem from './pillItem';
 import {
     keyCodes,
@@ -25,7 +24,7 @@ const i18n = {
 /**
  * A list of pills grouped in a container. This component requires API version 42.0 and later.
  */
-export default class LightningPillContainer extends LightningShadowBaseClass {
+export default class LightningPillContainer extends LightningElement {
     /**
      * Aria label for the pill container to describe the list of options.
      * @type {string}
@@ -42,7 +41,6 @@ export default class LightningPillContainer extends LightningShadowBaseClass {
     @track _pillContainerElementId;
 
     connectedCallback() {
-        super.connectedCallback();
         this._connected = true;
     }
 

package/src/lightning/pillContainer/standardPillContainer.css

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

package/src/lightning/popup/popup.css

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

package/src/lightning/popup/popup.js

@@ -1,5 +1,4 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { AutoPosition } from 'lightning/positionLibrary';
 import {
     createAlignmentConfiguration,
@@ -8,7 +7,7 @@ import {
 import { getElementWithFocus } from 'lightning/focusUtils';
 import { isUndefinedOrNull, normalizeBoolean } from 'lightning/utilsPrivate';
 
-export default class LightningPopup extends LightningShadowBaseClass {
+export default class LightningPopup extends LightningElement {
     @track _visible;
     @track _queueShow;
     @track _ariaLabelledBy;

package/src/lightning/primitiveBubble/primitiveBubble.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
-@import './tooltip.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './tooltip.slds.css'; */
 
 /* Fix for tooltip alignment issue, for details see: W-11677142
  *

package/src/lightning/primitiveBubble/primitiveBubble.js

@@ -1,7 +1,6 @@
 /* eslint-disable @lwc/lwc/no-api-reassignments */
 
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet } from 'lightning/utils';
 
 const DEFAULT_ALIGN = {
@@ -9,7 +8,7 @@ const DEFAULT_ALIGN = {
     vertical: 'bottom',
 };
 
-export default class LightningPrimitiveBubble extends LightningShadowBaseClass {
+export default class LightningPrimitiveBubble extends LightningElement {
     @track
     state = {
         // tracks the `visibility` of the tooltip
@@ -40,7 +39,6 @@ export default class LightningPrimitiveBubble extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.setAttribute('role', 'tooltip');
         this.state.inDOM = true;
     }

package/src/lightning/primitiveButton/primitiveButton.js

@@ -1,5 +1,4 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import {
     isIE11,
     isCSR,
@@ -27,7 +26,7 @@ const ROLE = 'role';
  *  - aria-labelledby: Role that depeneds on AriaObserver for native shadow.
  *  - aria-owns: Abstracts the logic of setting the id-reference on the host element.
  */
-export default class LightningPrimitiveButton extends LightningShadowBaseClass {
+export default class LightningPrimitiveButton extends LightningElement {
     /**** COMPONENT PRIVATE PROPERTIES ****/
     _initialized = false;
 

package/src/lightning/primitiveColorpickerButton/primitiveColorpickerButton.css

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

package/src/lightning/primitiveColorpickerButton/primitiveColorpickerButton.js

@@ -1,13 +1,12 @@
 import labelA11yTriggerText from '@salesforce/label/LightningColorPicker.a11yTriggerText';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { Direction, AutoPosition } from 'lightning/positionLibrary';
 import { normalizeBoolean, reflectAttribute } from 'lightning/utilsPrivate';
 
 const i18n = {
     a11yTriggerText: labelA11yTriggerText,
 };
-export default class PrimitiveColorpickerButton extends LightningShadowBaseClass {
+export default class PrimitiveColorpickerButton extends LightningElement {
     static delegatesFocus = true;
 
     @track _isColorPickerPanelOpen = false;

package/src/lightning/primitiveIcon/primitiveIcon.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
-@import './icon.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './icon.slds.css'; */
 /*
 "Temporary" fix for Edge SVG quirk. We can remove this when it is fixed either
 at the SLDS level or at the browser level.

package/src/lightning/primitiveInputCheckbox/primitiveInputCheckbox.css

@@ -1,3 +1,3 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './input-checkbox.slds.css';
-@import './form-element.slds.css';
+@import './form-element.slds.css'; */

package/src/lightning/primitiveInputCheckboxButton/primitiveInputCheckboxButton.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
-@import './input-checkbox-button.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './input-checkbox-button.slds.css'; */
 
 .slds-checkbox_add-button {
     display: flex;

package/src/lightning/primitiveInputColor/primitiveInputColor.css

@@ -1,4 +1,4 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './form-element.slds.css';
 @import './input-text.slds.css';
-@import './input-color.slds.css';
+@import './input-color.slds.css'; */

package/src/lightning/primitiveInputFile/primitiveInputFile.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './input-file.slds.css';
 @import './button.slds.css';
-@import './form-element.slds.css';
+@import './form-element.slds.css'; */
 

package/src/lightning/primitiveInputSimple/primitiveInputSimple.css

@@ -1,6 +1,6 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './input-text.slds.css';
-@import './form-element.slds.css';
+@import './form-element.slds.css'; */
 
 input[type="tel"]:dir(rtl) {
     direction: ltr;

package/src/lightning/primitiveInputToggle/primitiveInputToggle.css

@@ -1,3 +1,3 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './form-element.slds.css';
-@import './input-toggle.slds.css';
+@import './input-toggle.slds.css'; */

package/src/lightning/progressBar/progressBar.html

@@ -1,6 +1,5 @@
 <template>
     <div class={computedClass}
-         part="progress-bar"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow={percentValue}

package/src/lightning/progressBar/progressBar.js

@@ -1,8 +1,7 @@
 import labelProgress from '@salesforce/label/LightningProgressBar.progress';
 import labelProgressBar from '@salesforce/label/LightningProgressBar.progressBar';
 
-import { track, api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, track, api } from 'lwc';
 import { classSet } from 'lightning/utils';
 import {
     normalizeString as normalize,
@@ -24,7 +23,7 @@ const DEFAULT_VARIANT = 'base';
 /**
  * Displays a horizontal progress bar from left to right to indicate the progress of an operation.
  */
-export default class LightningProgressBar extends LightningShadowBaseClass {
+export default class LightningProgressBar extends LightningElement {
     @track privateVariant = DEFAULT_VARIANT;
     @track privateSize = DEFAULT_SIZE;