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

package/metadata/raptor.json

@@ -1583,8 +1583,10 @@
   "industriesHealthcloudApi": {},
   "industriesHealthcloudHpiApi": {},
   "industriesIdentityVerificationApi": {},
+  "industriesInstantPricingApi": {},
   "industriesInterestTaggingApi": {},
   "industriesLoyaltyEngineApi": {},
+  "industriesMaterialityAssessmentCalculateApi": {},
   "industriesPricingApi": {},
   "industriesPublicSectorApi": {},
   "industriesRcgTenantmanagementApi": {},

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.18.7-ssr",
+    "version": "1.18.8-alpha",
     "license": "MIT",
     "files": [
         "external",
@@ -1263,73 +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-modal",
-            "lightning-modalBase",
-            "lightning-modalBody",
-            "lightning-modalFooter",
-            "lightning-modalHeader",
-            "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-progress-bar",
-            "lightning-progress-ring",
-            "lightning-radio-group",
-            "lightning-select",
-            "lightning-spinner",
-            "lightning-tab-bar",
-            "lightning-tabset",
-            "lightning-toast",
-            "lightning-toast-container",
-            "lightning-timepicker",
-            "lightning-vertical-navigation",
-            "lightning-vertical-navigation-section",
-            "lightning-badge"
-        ],
+        "nativeShadowEnabledComponents": [],
         "expose": [
             "lightning/accordion",
             "lightning/accordionSection",

package/src/lightning/accordion/accordion.css

@@ -1,13 +1,13 @@
-@import 'lightning/sldsCommon';
-@import './accordion.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './accordion.slds.css'; */
 
 :host {
     display: block;
     list-style: none;
 }
 
-/* To Do:
-   Remove the code below as it is a duplicate once data-render-mode fix (W-12439890) for ::slotted is in.
+/* To Do: 
+   Remove the code below as it is a duplicate once data-render-mode fix (W-12439890) for ::slotted is in. 
 */
 /* Removes first child border top */
 ::slotted(lightning-accordion-section:first-child) {

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,14 +1,14 @@
-@import 'lightning/sldsCommon';
-@import './accordion-section.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './accordion-section.slds.css'; */
 
 :host {
     display: list-item;
 }
 
 /* Note:
-   - Prevents double border on mixed/shadow mode:
+   - Prevents double border on mixed/shadow mode: 
    This is added because we have 'slds-accordion__list-item' from the host and inside the component (within the shadow boundary). This will cause double border on mixed/shadow mode.
-   The code below will remove the border coming from the host and keep the border from shadow boundary.
+   The code below will remove the border coming from the host and keep the border from shadow boundary.  
    - Added '!important' as a last resort as user agent style sheet will always win over our own styles.
 */
 :host([data-render-mode="shadow"]) {

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/badge/__examples__/basic/basic.html

@@ -5,10 +5,8 @@
         </h2>
 
         <!-- Badge: basic -->
-        <lightning-badge label="Alpha"></lightning-badge>
+        <lightning-badge label="Alpha" class="slds-badge_inverse"></lightning-badge>
         <lightning-badge label="Beta"></lightning-badge>
         <lightning-badge label="Gamma"></lightning-badge>
-        <lightning-badge label="Inverse" class="slds-badge_inverse"></lightning-badge>
-        <lightning-badge label="Lightest" class="slds-badge_lightest"></lightning-badge>
     </div>
 </template>

package/src/lightning/badge/badge.html

@@ -1,19 +1,17 @@
 <template>
-    <span part="badge">
-        <template if:false={isIconBeforeLabel}>
-            {label}
-        </template>
-    
-        <template if:true={iconName}>
-            <span class={computedClass}>
-                <span class="slds-icon_container slds-current-color" title={iconAlternativeText}>
-                    <lightning-primitive-icon icon-name={iconName} size="xx-small"></lightning-primitive-icon>
-                </span>
+    <template if:false={isIconBeforeLabel}>
+        {label}
+    </template>
+
+    <template if:true={iconName}>
+        <span class={computedClass}>
+            <span class="slds-icon_container slds-current-color" title={iconAlternativeText}>
+                <lightning-primitive-icon icon-name={iconName} size="xx-small"></lightning-primitive-icon>
             </span>
-        </template>
-        
-        <template if:true={isIconBeforeLabel}>
-            {label}
-        </template>
-    </span>
+        </span>
+    </template>
+ 
+    <template if:true={isIconBeforeLabel}>
+        {label}
+    </template>
 </template>

package/src/lightning/badge/badge.js

@@ -1,7 +1,6 @@
-import { api } from 'lwc';
+import { LightningElement, api } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { normalizeString } from 'lightning/utilsPrivate';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 
 const DEFAULT_POSITION = 'start';
 
@@ -9,7 +8,7 @@ const DEFAULT_POSITION = 'start';
  * Represents a label which holds a small amount of information, such as the
  * number of unread notifications.
  */
-export default class LightningBadge extends LightningShadowBaseClass {
+export default class LightningBadge extends LightningElement {
     /**
      * Normalized icon position
      */
@@ -56,7 +55,6 @@ export default class LightningBadge extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.classList.add('slds-badge');
     }
 

package/src/lightning/baseCombobox/baseCombobox.css

@@ -1,6 +1,5 @@
-@import 'lightning/sldsCommon';
-@import './base-combobox.slds.css';
-@import './spinner.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './base-combobox.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 { api, track, LightningElement } from 'lwc';
 import { handleKeyDownOnInput } from './keyboard';
 import { BaseComboboxEvents } from './baseComboboxEvents';
 import { classSet } from 'lightning/utils';
@@ -49,7 +48,7 @@ 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'];
 
@@ -126,7 +125,6 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.setupAriaObserverIfAbsent();
         if (isCSR) {
             this.overrideDropdownAlignment();

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';
 import { isCSR } from 'lightning/utilsPrivate';
 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 {
     static validationOptOut = ['class'];
     /**
      * The URL of the page that the breadcrumb goes to.
@@ -82,7 +81,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/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();
 

package/src/lightning/buttonStateful/buttonStateful.css

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

package/src/lightning/buttonStateful/buttonStateful.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 {
     normalizeBoolean,
@@ -12,7 +11,7 @@ const DEFAULT_VARIANT = 'neutral';
 /**
  * A button that toggles between states.
  */
-export default class LightningButtonStateful extends LightningShadowBaseClass {
+export default class LightningButtonStateful extends LightningElement {
     static delegatesFocus = true;
 
     _originalVariant = DEFAULT_VARIANT;

package/src/lightning/calendar/calendar.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
-@import './calendar.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './calendar.slds.css'; */
 
 /**
  * For RTL languages, slds-dropdown_left will have left: 0 swapped with right: 0 which is why we

package/src/lightning/calendar/calendar.js

@@ -3,8 +3,7 @@ import labelNextMonth from '@salesforce/label/LightningDateTimePicker.nextMonth'
 import labelPreviousMonth from '@salesforce/label/LightningDateTimePicker.previousMonth';
 import labelToday from '@salesforce/label/LightningDateTimePicker.today';
 import labelYearSelector from '@salesforce/label/LightningDateTimePicker.yearSelector';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { isCSR } from 'lightning/utilsPrivate';
 import { generateUniqueId } from 'lightning/inputUtils';
@@ -47,7 +46,7 @@ const JAPANESE_CALENDAR_YEARS = [
     { key: 'M', year: 1868, label: '\u660e\u6cbb' }, // Meiji:   1/1/1868
 ];
 
-export default class LightningCalendar extends LightningShadowBaseClass {
+export default class LightningCalendar extends LightningElement {
     @track calendarYear = null;
     @track calendarMonth = null;
 
@@ -95,7 +94,6 @@ export default class LightningCalendar extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this._connected = true;
 
         this.todayDate = getCurrentDateString();

package/src/lightning/card/card.css

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

package/src/lightning/card/card.js

@@ -1,5 +1,4 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { isNarrow, isBase } from './utils';
 import { isHeadingLevelValid } from 'lightning/utilsPrivate';
@@ -15,7 +14,7 @@ import { isHeadingLevelValid } from 'lightning/utilsPrivate';
  * For example, the footer can display a "View All" link to navigate to a list view.
  * @slot default Placeholder for your content in the card body.
  */
-export default class LightningCard extends LightningShadowBaseClass {
+export default class LightningCard extends LightningElement {
     /**
      * The title can include text, and is displayed in the header.
      * To include additional markup or another component, use the title slot.

package/src/lightning/colorPickerCustom/colorPickerCustom.css

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

package/src/lightning/colorPickerCustom/colorPickerCustom.js

@@ -9,8 +9,7 @@ import labelHueInput from '@salesforce/label/LightningColorPicker.hueInput';
 import labelRInput from '@salesforce/label/LightningColorPicker.rInput';
 import labelRedAbbr from '@salesforce/label/LightningColorPicker.redAbbr';
 import formFactorPropertyName from '@salesforce/client/formFactor';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { keyCodes } from 'lightning/utilsPrivate';
 import { generateUniqueId, getErrorMessage } from 'lightning/inputUtils';
 import {
@@ -37,7 +36,7 @@ const i18n = {
 
 const CANVAS = { x: 198, y: 80 };
 
-export default class LightningColorPickerCustom extends LightningShadowBaseClass {
+export default class LightningColorPickerCustom extends LightningElement {
     @track _hueValue = null;
     @track
     _rgb = {

package/src/lightning/colorPickerPanel/colorPickerPanel.css

@@ -1,6 +1,6 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './color-picker-panel.slds.css';
-@import './popover.slds.css';
+@import './popover.slds.css'; */
 
 /* Fix for footer button centering issue, for details see: W-11543875
  *

package/src/lightning/colorPickerPanel/colorPickerPanel.js

@@ -2,8 +2,7 @@ import labelCancelButton from '@salesforce/label/LightningColorPicker.cancelButt
 import labelCustomTab from '@salesforce/label/LightningColorPickerPanel.customTab';
 import labelDefaultTab from '@salesforce/label/LightningColorPickerPanel.defaultTab';
 import labelDoneButton from '@salesforce/label/LightningColorPicker.doneButton';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { keyCodes } from 'lightning/utilsPrivate';
 
@@ -15,14 +14,13 @@ const i18n = {
 };
 
 const DEFAULT_COLOR = '#000000';
-export default class LightningColorPickerPanel extends LightningShadowBaseClass {
+export default class LightningColorPickerPanel extends LightningElement {
     @api currentColor;
 
     @track _isCustomTabActive = false;
     @track _selectedColor = null;
 
     connectedCallback() {
-        super.connectedCallback();
         this._selectedColor = this.currentColor || DEFAULT_COLOR;
     }
 

package/src/lightning/combobox/combobox.css

@@ -1,6 +1,6 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './form-element.slds.css';
-@import './combobox.slds.css';
+@import './combobox.slds.css'; */
 
 :host {
     display: block;