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

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

@@ -524,14 +524,20 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     justify-content: center;
   }
 
+  /**
+   * Represents inner spacing around icon for icon-position="left", when present
+   */
   :host([data-render-mode="shadow"]) [part~='start'] {
     display: inline-flex;
-    padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
+    padding-inline-end: 0;
   }
 
+  /**
+   * Represents inner spacing around icon for icon-position="right", when present
+   */
   :host([data-render-mode="shadow"]) [part~='end'] {
     display: inline-flex;
-    padding-inline-start: var(--sds-g-spacing-2, 0.5rem);
+    padding-inline-start: 0;
   }
 }
 
@@ -612,7 +618,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
   }
 
-  :host([data-render-mode="shadow"]) [part~='boundary'] {
+  :host([data-render-mode="shadow"]) [part='boundary'] {
     /* --sds-c-icon-color-background: var(--slds-c-icon-color-background); */
     --sds-c-icon-radius-border: var(--slds-c-icon-radius-border, var(--sds-g-radius-border-2, 0.25rem));
     --sds-c-icon-sizing-border: var(--slds-c-icon-sizing-border);
@@ -642,7 +648,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     display: inline-flex;
   }
 
-  :host([data-render-mode="shadow"]) [part~='icon'] {
+  :host([data-render-mode="shadow"]) [part='icon'] {
     --sds-c-icon-color-foreground: var(--slds-c-icon-color-foreground, var(--sds-g-color-neutral-base-100, #ffffff));
     --sds-c-icon-sizing-height: var(--slds-c-icon-sizing-height, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
     --sds-c-icon-sizing-width: var(--slds-c-icon-sizing-width, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
@@ -727,7 +733,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 :host([data-render-mode="shadow"]) .slds-input__icon {
   --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
-  
+
   position: absolute;
   top: 50%;
   margin-block-start: -0.4375rem;

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,4 +1,5 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import {
     normalizeBoolean,
@@ -11,7 +12,7 @@ const DEFAULT_VARIANT = 'neutral';
 /**
  * A button that toggles between states.
  */
-export default class LightningButtonStateful extends LightningElement {
+export default class LightningButtonStateful extends LightningShadowBaseClass {
     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,10 @@ 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 { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
+import { isCSR } from 'lightning/utilsPrivate';
 import { generateUniqueId } from 'lightning/inputUtils';
 import firstDayOfWeek from '@salesforce/i18n/firstDayOfWeek';
 import { handleKeyDownOnCalendar } from './keyboard';
@@ -45,7 +47,7 @@ const JAPANESE_CALENDAR_YEARS = [
     { key: 'M', year: 1868, label: '\u660e\u6cbb' }, // Meiji:   1/1/1868
 ];
 
-export default class LightningCalendar extends LightningElement {
+export default class LightningCalendar extends LightningShadowBaseClass {
     @track calendarYear = null;
     @track calendarMonth = null;
 
@@ -93,6 +95,7 @@ export default class LightningCalendar extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this._connected = true;
 
         this.todayDate = getCurrentDateString();
@@ -187,8 +190,11 @@ export default class LightningCalendar extends LightningElement {
     }
 
     get hostDirection() {
-        // eslint-disable-next-line lightning-global/check-return-value-for-nullable-call
-        const computedStyle = window.getComputedStyle(this.template.host);
+        let computedStyle;
+        if (isCSR) {
+            // eslint-disable-next-line lightning-global/check-return-value-for-nullable-call
+            computedStyle = window.getComputedStyle(this.template.host);
+        }
         return computedStyle ? computedStyle.direction.toLowerCase() : 'ltr';
     }
 
@@ -254,8 +260,6 @@ export default class LightningCalendar extends LightningElement {
             return [];
         }
 
-        this.removeCurrentlySelectedDateAttributes();
-
         const selectedDate = this.getSelectedDate();
         const renderDate = this.getCalendarDate();
 
@@ -313,13 +317,15 @@ export default class LightningCalendar extends LightningElement {
             ? '0'
             : false;
 
-        const className = classSet()
-            .add({
-                'slds-is-today': isToday,
-                'slds-is-selected': isSelected,
-                'slds-day_adjacent-month': isInAdjacentMonth,
-            })
-            .toString();
+        // setting className to undefined avoids hydration errors in SSR
+        const className =
+            classSet()
+                .add({
+                    'slds-is-today': isToday,
+                    'slds-is-selected': isSelected,
+                    'slds-day_adjacent-month': isInAdjacentMonth,
+                })
+                .toString() || undefined;
 
         return {
             dayInMonth: toLocalizedDigits(String(date.getDate())),
@@ -431,16 +437,6 @@ export default class LightningCalendar extends LightningElement {
         this.dispatchSelectEvent();
     }
 
-    // we should be able to control the select value with an attribute once we have a select component
-    selectYear(year) {
-        const optionElement = this.template.querySelector(
-            `option[value='${year}']`
-        );
-        if (optionElement) {
-            optionElement.selected = true;
-        }
-    }
-
     getElementByDate(dateString) {
         return this.template.querySelector(`td[data-value='${dateString}']`);
     }
@@ -476,8 +472,6 @@ export default class LightningCalendar extends LightningElement {
     renderCalendar(newDate) {
         this.calendarMonth = newDate.getMonth();
         this.calendarYear = newDate.getFullYear();
-
-        this.selectYear(newDate.getFullYear());
     }
 
     renderToday() {

package/src/lightning/calendar/calendar.slds.css

@@ -529,14 +529,20 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     justify-content: center;
   }
 
+  /**
+   * Represents inner spacing around icon for icon-position="left", when present
+   */
   :host([data-render-mode="shadow"]) [part~='start'] {
     display: inline-flex;
-    padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
+    padding-inline-end: 0;
   }
 
+  /**
+   * Represents inner spacing around icon for icon-position="right", when present
+   */
   :host([data-render-mode="shadow"]) [part~='end'] {
     display: inline-flex;
-    padding-inline-start: var(--sds-g-spacing-2, 0.5rem);
+    padding-inline-start: 0;
   }
 }
 
@@ -928,7 +934,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /**
       * End part
       */
-  :host([data-render-mode="shadow"]) [part~='end'] {
+  :host([data-render-mode="shadow"]) [part='end'] {
     padding-inline-start: var(--slds-c-buttonicon-end-spacing-inline-start, 0);
   }
 
@@ -1683,7 +1689,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 @supports (--styling-hooks: '') {
     /* SELECT */
-    :host([data-render-mode="shadow"]) [part~='select'] {
+    :host([data-render-mode="shadow"]) [part='select'] {
       height: calc(var(--slds-c-select-input-sizing-height, 1.875rem) + (var(--sds-g-sizing-border-1, 1px) * 2));
       width: 100%;
       border: var(--sds-g-sizing-border-1, 1px) solid var(--slds-c-select-color-border, var(--sds-g-color-neutral-base-80, #c9c9c9));
@@ -1695,12 +1701,12 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       transition: border 0.1s linear, background-color 0.1s linear;
     }
 
-    :host([data-render-mode="shadow"]) [part~='select'][required] {
+    :host([data-render-mode="shadow"]) [part='select'][required] {
       box-shadow: none; /* @legacy: This is ported over from SLDS but not clear why this design decision is made.  */
     }
 
-    :host([data-render-mode="shadow"]) [part~='select']:focus,:host([data-render-mode="shadow"]) 
-    [part~='select']:active {
+    :host([data-render-mode="shadow"]) [part='select']:focus,:host([data-render-mode="shadow"]) 
+    [part='select']:active {
       outline: 0;
       border-color: var(--slds-c-select-color-border-focus, var(--sds-g-color-brand-base-60, #1b96ff));
       background-color: var(--slds-c-select-color-background-focus, var(--sds-g-color-neutral-base-100, #ffffff));
@@ -1708,7 +1714,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       box-shadow: var(--slds-c-select-shadow-focus, 0 0 3px var(--sds-g-color-brand-base-50, #0176d3));
     }
 
-    :host([data-render-mode="shadow"]) [part~='select'][disabled] {
+    :host([data-render-mode="shadow"]) [part='select'][disabled] {
       background-color: var(--sds-g-color-neutral-base-95, #f3f3f3);
       border-color: var(--sds-g-color-neutral-base-80, #c9c9c9);
       color: var(--sds-g-color-neutral-base-50, #747474);
@@ -1717,19 +1723,19 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       opacity: 1;
     }
 
-    :host([data-render-mode="shadow"]) [part~='select'][disabled]:focus,:host([data-render-mode="shadow"])  
-    [part~='select'][disabled]:active {
+    :host([data-render-mode="shadow"]) [part='select'][disabled]:focus,:host([data-render-mode="shadow"]) 
+    [part='select'][disabled]:active {
       box-shadow: none;
     }
 
-    :host([data-render-mode="shadow"]) [part~='select'][size],:host([data-render-mode="shadow"])  
-    [part~='select'][multiple] {
+    :host([data-render-mode="shadow"]) [part='select'][size],:host([data-render-mode="shadow"]) 
+    [part='select'][multiple] {
       min-height: calc(var(--slds-c-select-input-sizing-height) + (var(--sds-g-sizing-border-1, 1px) * 2));
       height: inherit;
     }
 
-    :host([data-render-mode="shadow"]) [part~='select'][size] option,:host([data-render-mode="shadow"])  
-    [part~='select'][multiple] option {
+    :host([data-render-mode="shadow"]) [part='select'][size] option,:host([data-render-mode="shadow"]) 
+    [part='select'][multiple] option {
       padding: var(--sds-g-spacing-2, 0.5rem);
     }
 
@@ -1738,7 +1744,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       color: var(--slds-c-select-container-color);
     }
 
-    :host([data-render-mode="shadow"]) .slds-select_container [part~="select"] {
+    :host([data-render-mode="shadow"]) .slds-select_container [part="select"] {
       /* stylelint-disable property-no-vendor-prefix */
       -moz-appearance: none;
       -webkit-appearance: none;
@@ -1746,11 +1752,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       padding: 0 var(--sds-g-spacing-5, 1.5rem) 0 var(--sds-g-spacing-2, 0.5rem);
     }
 
-    :host([data-render-mode="shadow"]) .slds-select_container [part~="select"]::-ms-expand {
+    :host([data-render-mode="shadow"]) .slds-select_container [part="select"]::-ms-expand {
       display: none;
     }
 
-    :host([data-render-mode="shadow"]) .slds-select_container::before,:host([data-render-mode="shadow"])  
+    :host([data-render-mode="shadow"]) .slds-select_container::before,:host([data-render-mode="shadow"]) 
     .slds-select_container::after {
       position: absolute;
       content: '';
@@ -1767,7 +1773,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       border-bottom: 5px solid currentColor;
       top: calc((var(--sds-g-sizing-8, 1.75rem) / 2) - 6px);
     }
- 
+
     :host([data-render-mode="shadow"]) .slds-select_container::after {
       border-top: 5px solid currentColor;
       bottom: calc((var(--sds-g-sizing-8, 1.75rem) / 2) - 6px);
@@ -1777,27 +1783,27 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       display: none;
     }
 
-    :host([data-render-mode="shadow"][invalid]) [part~="select"] {
+    :host([data-render-mode="shadow"][invalid]) [part="select"] {
       border-color: var(--sds-g-color-error-base-50, #ea001e);
       box-shadow: var(--sds-g-color-error-base-50, #ea001e) 0 0 0 var(--sds-g-sizing-border-1, 1px) inset;
       background-clip: padding-box;
     }
 
-    :host([data-render-mode="shadow"][invalid]) [part~="select"]:focus,:host([data-render-mode="shadow"][invalid]) [part~="select"]:active {
+    :host([data-render-mode="shadow"][invalid]) [part="select"]:focus,:host([data-render-mode="shadow"][invalid]) [part="select"]:active {
       box-shadow: var(--sds-g-color-error-base-50, #ea001e) 0 0 0 var(--sds-g-sizing-border-1, 1px) inset, 0 0 3px var(--sds-g-color-brand-base-50, #0176d3);
     }
 
     /* LABEL */
 
     /* Styling Specifically for select label */
-    :host([data-render-mode="shadow"]) [part~="select-label"] {
+    :host([data-render-mode="shadow"]) [part="select-label"] {
       padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
       color: var(--slds-c-select-label-color, var(--sds-g-color-neutral-base-30, #444444));
       font-size: var(--slds-c-select-label-font-size, var(--sds-g-font-scale-neg-3, 0.75rem));
-  
+
       /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */
       display: inline-flex;
-  
+
       /* TODO: Add global hook once SLDS creates a new spacing hook that equals the value needed here */
       column-gap: 0.125rem;
     }

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,4 +1,5 @@
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import { isNarrow, isBase } from './utils';
 import { isHeadingLevelValid } from 'lightning/utilsPrivate';
@@ -14,7 +15,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 LightningElement {
+export default class LightningCard extends LightningShadowBaseClass {
     /**
      * 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/card/card.slds.css

@@ -51,77 +51,77 @@
 
 @supports (--styling-hooks: '') {
 
-	:host([data-render-mode="shadow"]) [part~="card"] {
+	:host([data-render-mode="shadow"]) [part="card"] {
 		position: relative;
-		--sds-c-card-spacing-block-start: 
-      var(--slds-c-card-spacing-block-start, 
+		--sds-c-card-spacing-block-start:
+      var(--slds-c-card-spacing-block-start,
         var(--slds-c-card-spacing-block, 0));
-		--sds-c-card-spacing-block-end: 
-      var(--slds-c-card-spacing-block-end, 
+		--sds-c-card-spacing-block-end:
+      var(--slds-c-card-spacing-block-end,
         var(--slds-c-card-spacing-block, 0));
-		--sds-c-card-spacing-inline-start: 
-      var(--slds-c-card-spacing-inline-start, 
+		--sds-c-card-spacing-inline-start:
+      var(--slds-c-card-spacing-inline-start,
         var(--slds-c-card-spacing-inline, 0));
-		--sds-c-card-spacing-inline-end: 
+		--sds-c-card-spacing-inline-end:
       var(--slds-c-card-spacing-inline-end,
         var(--slds-c-card-spacing-inline, 0));
-    --sds-c-card-color-background: 
-      var(--slds-c-card-color-background, 
+    --sds-c-card-color-background:
+      var(--slds-c-card-color-background,
         var(--slds-g-color-neutral-base-100));
-		--sds-c-card-sizing-border: 
-      var(--slds-c-card-sizing-border, 
+		--sds-c-card-sizing-border:
+      var(--slds-c-card-sizing-border,
         var(--sds-g-sizing-border-1, 1px));
-		--sds-c-card-color-border: 
-      var(--slds-c-card-color-border, 
-        var(--slds-g-color-border-base-1, 
+		--sds-c-card-color-border:
+      var(--slds-c-card-color-border,
+        var(--slds-g-color-border-base-1,
           var(--sds-g-color-neutral-base-80, #c9c9c9)));
-		--sds-c-card-radius-border: 
-      var(--slds-c-card-radius-border, 
+		--sds-c-card-radius-border:
+      var(--slds-c-card-radius-border,
         var(--sds-g-radius-border-2, 0.25rem));
-		--sds-c-card-shadow: 
-      var(--slds-c-card-shadow, 
+		--sds-c-card-shadow:
+      var(--slds-c-card-shadow,
         0 2px 2px 0 var(--sds-g-color-neutral-base-90, #e5e5e5)); /* Note: remove sds color when slds color is implemented to subsystem */
-    --sds-c-card-text-color: 
+    --sds-c-card-text-color:
       var(--slds-c-card-text-color);
 
     border-style: solid;
 		background-clip: padding-box;
 	}
 
-  :host([data-render-mode="shadow"]) [part~='header'] {
+  :host([data-render-mode="shadow"]) [part='header'] {
     display: grid;
     grid-template-columns: auto minmax(0, 1fr) auto;
     grid-template-areas: 'icon title actions';
     align-items: center;
 
     /* Padding */
-		--sds-c-card-header-spacing-block-start: 
+		--sds-c-card-header-spacing-block-start:
 			var(--slds-c-card-header-spacing-block-start,
-				var(--slds-c-card-header-spacing-block, 
+				var(--slds-c-card-header-spacing-block,
           var(--sds-g-spacing-3, 0.75rem)));
-		--sds-c-card-header-spacing-block-end: 
+		--sds-c-card-header-spacing-block-end:
 			var(--slds-c-card-header-spacing-block-end,
         var(--slds-c-card-header-spacing-block, 0));
-		--sds-c-card-header-spacing-inline-start: 
-			var(--slds-c-card-header-spacing-inline-start, 	
-				var(--slds-c-card-header-spacing-inline, 
+		--sds-c-card-header-spacing-inline-start:
+			var(--slds-c-card-header-spacing-inline-start,
+				var(--slds-c-card-header-spacing-inline,
           var(--sds-g-spacing-4, 1rem)));
-		--sds-c-card-header-spacing-inline-end: 
-			var(--slds-c-card-header-spacing-inline-end, 
-				var(--slds-c-card-header-spacing-inline, 
+		--sds-c-card-header-spacing-inline-end:
+			var(--slds-c-card-header-spacing-inline-end,
+				var(--slds-c-card-header-spacing-inline,
           var(--sds-g-spacing-4, 1rem)));
 
     /* Margin */
-    margin-block-end: var(--slds-c-card-header-spacing-block-end, 
+    margin-block-end: var(--slds-c-card-header-spacing-block-end,
         var(--sds-g-spacing-3, 0.75rem));
 
     /**
      * These become reassignments once base headings get hooks.
-     * See [part~='header'] h2 rule block for more info.
+     * See [part='header'] h2 rule block for more info.
      */
     color: var(--slds-c-card-header-text-color);
     font-size: var(--slds-c-card-heading-font-size);
-    font-weight: var(--slds-g-font-weight-bold, 
+    font-weight: var(--slds-g-font-weight-bold,
       var(--sds-g-font-weight-bold, bold));
     line-height: var(--sds-g-font-lineheight-2, 1.25);
 	}
@@ -132,16 +132,16 @@
    * The header sections utilize grid areas and 'part' apis to allow the header's
    * layout be modular (grid-area) and explicitly customized (part).
    */
-  :host([data-render-mode="shadow"]) [part~="icon"] {
+  :host([data-render-mode="shadow"]) [part="icon"] {
     grid-area: icon;
     line-height: 0;
   }
 
-	:host([data-render-mode="shadow"]) [part~="title"] {
+	:host([data-render-mode="shadow"]) [part="title"] {
 		grid-area: title;
 	}
 
-  :host([data-render-mode="shadow"]) [part~="actions"] {
+  :host([data-render-mode="shadow"]) [part="actions"] {
     grid-area: actions;
   }
 
@@ -153,68 +153,68 @@
    * :host { --sds-g-heading-font-size: var(--slds-c-card-heading-font-size); }
    */
 
-  :host([data-render-mode="shadow"]) [part~="title"] h2 {
+  :host([data-render-mode="shadow"]) [part="title"] h2 {
     font-weight: inherit;
     font-size: inherit;
   }
 
-  /** 
+  /**
    * Recreating truncation explicitly here so the behavior is consistent with
    * current SLDS.
    *
    * @TODO: Evaluate if this should be a utility or something similar.
    */
-  :host([data-render-mode="shadow"]) [part~="title"] span {
+  :host([data-render-mode="shadow"]) [part="title"] span {
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
-  :host([data-render-mode="shadow"]) [part~="body"] {
-    --sds-c-card-body-spacing-block-start: 
-      var(--slds-c-card-body-spacing-block-start, 
+  :host([data-render-mode="shadow"]) [part="body"] {
+    --sds-c-card-body-spacing-block-start:
+      var(--slds-c-card-body-spacing-block-start,
         var(--slds-c-card-body-spacing-block));
-    --sds-c-card-body-spacing-block-end: 
-      var(--slds-c-card-body-spacing-block-end, 
+    --sds-c-card-body-spacing-block-end:
+      var(--slds-c-card-body-spacing-block-end,
         var(--slds-c-card-body-spacing-block));
-    --sds-c-card-body-spacing-inline-start: 
-      var(--slds-c-card-body-spacing-inline-start, 
+    --sds-c-card-body-spacing-inline-start:
+      var(--slds-c-card-body-spacing-inline-start,
         var(--slds-c-card-body-spacing-inline));
-    --sds-c-card-body-spacing-inline-end: 
-      var(--slds-c-card-body-spacing-inline-end, 
+    --sds-c-card-body-spacing-inline-end:
+      var(--slds-c-card-body-spacing-inline-end,
         var(--slds-c-card-body-spacing-inline));
     --slds-c-card-color-border: transparent;
     --slds-c-card-shadow: none;
   }
 
-  :host([data-render-mode="shadow"]) [part~='footer'] {
-    --sds-c-card-footer-spacing-block-start: 
-      var(--slds-c-card-footer-spacing-block-start, 
-        var(--slds-c-card-footer-spacing-block, 
+  :host([data-render-mode="shadow"]) [part='footer'] {
+    --sds-c-card-footer-spacing-block-start:
+      var(--slds-c-card-footer-spacing-block-start,
+        var(--slds-c-card-footer-spacing-block,
           var(--sds-g-spacing-3, 0.75rem)));
-    --sds-c-card-footer-spacing-block-end: 
-      var(--slds-c-card-footer-spacing-block-end, 
-        var(--slds-c-card-footer-spacing-block, 
+    --sds-c-card-footer-spacing-block-end:
+      var(--slds-c-card-footer-spacing-block-end,
+        var(--slds-c-card-footer-spacing-block,
           var(--sds-g-spacing-3, 0.75rem)));
-    --sds-c-card-footer-spacing-inline-start: 
-      var(--slds-c-card-footer-spacing-inline-start, 
-        var(--slds-c-card-footer-spacing-inline, 
+    --sds-c-card-footer-spacing-inline-start:
+      var(--slds-c-card-footer-spacing-inline-start,
+        var(--slds-c-card-footer-spacing-inline,
           var(--sds-g-spacing-4, 1rem)));
-    --sds-c-card-footer-spacing-inline-end: 
-      var(--slds-c-card-footer-spacing-inline-end, 
-        var(--slds-c-card-footer-spacing-inline, 
+    --sds-c-card-footer-spacing-inline-end:
+      var(--slds-c-card-footer-spacing-inline-end,
+        var(--slds-c-card-footer-spacing-inline,
           var(--sds-g-spacing-4, 1rem)));
-    --sds-c-card-footer-sizing-border: 
-      var(--slds-c-card-footer-sizing-border, 
+    --sds-c-card-footer-sizing-border:
+      var(--slds-c-card-footer-sizing-border,
         var(--sds-g-sizing-border-1, 1px));
-    --sds-c-card-footer-color-border: 
-      var(--slds-c-card-footer-color-border, 
-        var(--slds-g-color-border-base-1, 
+    --sds-c-card-footer-color-border:
+      var(--slds-c-card-footer-color-border,
+        var(--slds-g-color-border-base-1,
           var(--sds-g-color-neutral-base-80, #c9c9c9)));
 
     border-top-style: solid;
     text-align: var(--slds-c-card-footer-font-align, center);
-    font-size: var(--slds-c-card-footer-font-size, 
+    font-size: var(--slds-c-card-footer-font-size,
       var(--sds-g-font-scale-neg-2, 0.8125rem));
   }
 
@@ -226,7 +226,7 @@
   /* Note: Refactor the below. Utility classes that should be removed once utility implementation is completed. */
   :host([data-render-mode="shadow"]) .slds-media__figure {
     flex-shrink: 0;
-    margin-inline-end: var(--slds-c-card-icon-spacing-inline-end, 
+    margin-inline-end: var(--slds-c-card-icon-spacing-inline-end,
       var(--sds-g-spacing-3, 0.75rem));
   }
 

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,7 +9,8 @@ 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 { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { keyCodes } from 'lightning/utilsPrivate';
 import { generateUniqueId, getErrorMessage } from 'lightning/inputUtils';
 import {
@@ -36,7 +37,7 @@ const i18n = {
 
 const CANVAS = { x: 198, y: 80 };
 
-export default class LightningColorPickerCustom extends LightningElement {
+export default class LightningColorPickerCustom extends LightningShadowBaseClass {
     @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,7 +2,8 @@ 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 { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import { keyCodes } from 'lightning/utilsPrivate';
 
@@ -14,13 +15,14 @@ const i18n = {
 };
 
 const DEFAULT_COLOR = '#000000';
-export default class LightningColorPickerPanel extends LightningElement {
+export default class LightningColorPickerPanel extends LightningShadowBaseClass {
     @api currentColor;
 
     @track _isCustomTabActive = false;
     @track _selectedColor = null;
 
     connectedCallback() {
+        super.connectedCallback();
         this._selectedColor = this.currentColor || DEFAULT_COLOR;
     }