lightning-base-components 1.17.7-alpha → 1.18.2-alpha

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

@@ -49,76 +49,82 @@
   border-top-color: var(--sds-c-card-footer-color-border, transparent);
 }
 
-/**
- * @Note: Static fallbacks are in place until SLDS adopts SDS. Without static
- *        fallbacks, styles will regress due to invalid CSS variables from
- *        missing SLDS shared and globals—where applicable, sometimes we do
- *        want the initial value, e.g. inherit.
- */
-
 @supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"]) {
-    --sds-c-card-text-color: var(--slds-c-card-text-color);
-    --sds-c-card-color-background: var(--slds-c-card-color-background, var(--sds-g-color-neutral-base-1));
-    --sds-c-card-color-border: var(--slds-c-card-color-border, var(--sds-g-color-neutral-base-4));
-    --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, var(--sds-g-shadow-1, 0 0 2px 0 #18181814, 0 2px 4px 1px #18181828));
-    --sds-c-card-spacing-block: var(--slds-c-card-spacing-block);
-    --sds-c-card-spacing-block-start: var(--slds-c-card-spacing-block-start);
-    --sds-c-card-spacing-block-end: var(--slds-c-card-spacing-block-end);
-    --sds-c-card-spacing-inline: var(--slds-c-card-spacing-inline);
-    --sds-c-card-spacing-inline-start: var(--slds-c-card-spacing-inline-start);
-    --sds-c-card-spacing-inline-end: var(--slds-c-card-spacing-inline-end);
-  }
 
-  :host([data-render-mode="shadow"][variant~='borderless']) {
-    --slds-c-card-color-border: transparent;
-    --slds-c-card-shadow: none;
-    --slds-c-card-header-spacing-block-start: 0;
-    --slds-c-card-header-spacing-inline: 0;
-    --slds-c-card-body-spacing-inline: 0;
-    --slds-c-card-footer-spacing-block-end: 0;
-  }
+	:host([data-render-mode="shadow"]) [part~="card"] {
+		position: relative;
+		--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, 
+        var(--slds-c-card-spacing-block, 0));
+		--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: 
+      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, 
+        var(--slds-g-color-neutral-base-100));
+		--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, 
+          var(--sds-g-color-neutral-base-80, #c9c9c9)));
+		--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, 
+        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: 
+      var(--slds-c-card-text-color);
+
+    border-style: solid;
+		background-clip: padding-box;
+	}
 
   :host([data-render-mode="shadow"]) [part~='header'] {
-    /**
-     * Provide layout control through the part API. See icon, title, and actions
-     * parts below for more layout controls.
-     */
     display: grid;
     grid-template-columns: auto minmax(0, 1fr) auto;
     grid-template-areas: 'icon title actions';
     align-items: center;
-    --sds-c-card-header-spacing-block: var(--slds-c-card-header-spacing-block);
-    --sds-c-card-header-spacing-block-start: var(
-      --slds-c-card-header-spacing-block-start,
-      var(--sds-g-spacing-3, 0.75rem)
-    );
-    --sds-c-card-header-spacing-block-end: var(--slds-c-card-header-spacing-block-end);
-    --sds-c-card-header-spacing-inline: var(--slds-c-card-header-spacing-inline, var(--sds-g-spacing-3, 0.75rem));
-    --sds-c-card-header-spacing-inline-start: var(--slds-c-card-header-spacing-inline-start);
-    --sds-c-card-header-spacing-inline-end: var(--slds-c-card-header-spacing-inline-end);
+
+    /* Padding */
+		--sds-c-card-header-spacing-block-start: 
+			var(--slds-c-card-header-spacing-block-start,
+				var(--slds-c-card-header-spacing-block, 
+          var(--sds-g-spacing-3, 0.75rem)));
+		--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, 
+          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, 
+          var(--sds-g-spacing-4, 1rem)));
+
+    /* Margin */
+    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.
      */
     color: var(--slds-c-card-header-text-color);
-    font-weight: var(--slds-g-font-weight-bold, var(--sds-g-font-weight-bold, bold));
-    font-size: var(--slds-c-card-header-font-size);
-
-    /*
-     * Icon reassignments
-     *
-     * Scope the icon hook assignment to the 'header' part so icons passed
-     * into other slots don't inadvertently pick up on these values.
-     */
-    --sds-c-icon-sizing: 1.5rem; /* @JB: may not need this after slds-icon is done */
-    --sds-c-icon-spacing-inline-end: var(
-      --slds-c-card-header-icon-spacing-inline-end,
-      var(--sds-g-spacing-3, 0.75rem)
-    );
-  }
+    font-size: var(--slds-c-card-heading-font-size);
+    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);
+	}
 
   /*
    * Header's grid layout areas
@@ -126,66 +132,113 @@
    * 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'] {
-    grid-area: title;
-  }
-  :host([data-render-mode="shadow"]) [part~='actions'] {
+
+	:host([data-render-mode="shadow"]) [part~="title"] {
+		grid-area: title;
+	}
+
+  :host([data-render-mode="shadow"]) [part~="actions"] {
     grid-area: actions;
   }
 
-  /**
+	/**
    * This would be a reassignment in :host if styling hooks existed for headings.
    * Until that exists, we have to do a hard reset here. This can be removed once
    * headings get hooks.
    *
    * :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;
   }
 
-  /**
-   * The body's default padding is none. LBC uses utilities to add padding through the slot content.
-   */
-  :host([data-render-mode="shadow"]) [part~='body'] {
-    --sds-c-card-body-spacing-inline: var(--slds-c-card-body-spacing-inline);
-    --sds-c-card-body-spacing-inline-start: var(--slds-c-card-body-spacing-inline-start);
-    --sds-c-card-body-spacing-inline-end: var(--slds-c-card-body-spacing-inline-end);
-    --sds-c-card-body-spacing-block: var(--slds-c-card-body-spacing-block);
-    --sds-c-card-body-spacing-block-start: var(
-      --slds-c-card-body-spacing-block-start,
-      var(--sds-g-spacing-3, 0.75rem)
-    );
-    --sds-c-card-body-spacing-block-end: var(--slds-c-card-body-spacing-block-end, var(--sds-g-spacing-3, 0.75rem));
+  :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, 
+        var(--slds-c-card-body-spacing-block));
+    --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, 
+        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-inline: var(--slds-c-card-footer-spacing-inline, var(--sds-g-spacing-3, 0.75rem));
-    --sds-c-card-footer-spacing-inline-start: var(--slds-c-card-footer-spacing-inline-start);
-    --sds-c-card-footer-spacing-inline-end: var(--slds-c-card-footer-spacing-inline-end);
-    --sds-c-card-footer-spacing-block: var(--slds-c-card-footer-spacing-block, var(--sds-g-spacing-3, 0.75rem));
-    --sds-c-card-footer-spacing-block-start: var(--slds-c-card-footer-spacing-block-start);
-    --sds-c-card-footer-spacing-block-end: var(--slds-c-card-footer-spacing-block-end);
-    --sds-c-card-footer-color-border: var(
-      --slds-c-card-footer-color-border,
-      var(--sds-g-color-neutral-base-4)
-    );
+    --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, 
+          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, 
+          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, 
+          var(--sds-g-spacing-4, 1rem)));
+    --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, 
+          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, 
+      var(--sds-g-font-scale-neg-2, 0.8125rem));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-card__body:empty,:host([data-render-mode="shadow"]) 
+  .slds-card__footer:empty {
+    display: none;
+  }
+
+  /* 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, 
+      var(--sds-g-spacing-3, 0.75rem));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-text-heading_small {
+    font-size: var(--sds-g-font-size-base, 1rem);
+    line-height: var(--sds-g-font-lineheight-2, 1.25);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-truncate {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }

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/color-picker-panel.slds.css

@@ -787,52 +787,25 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 }
 
 @supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"]) .slds-popover {
-    position: relative;
-    border-radius: var(--sds-g-radius-border-2, 0.25rem);
-    width: 14rem;
-    min-height: 2rem;
-    z-index: 6000;
-    background-color: var(--sds-g-color-neutral-base-100, #ffffff);
-    display: inline-block;
-    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16);
-    border: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-90, #e5e5e5);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-popover *:last-child {
-    margin-bottom: 0;
+  /* ToDo: swap out for Utility classes */
+  :host([data-render-mode="shadow"]) .slds-m-left_x-small {
+    margin-inline-start: var(--sds-g-spacing-2, 0.5rem);
   }
 
-  :host([data-render-mode="shadow"]) .slds-popover__body {
-    padding-block-start: var(--sds-g-spacing-2, 0.5rem);
-    padding-block-end: var(--sds-g-spacing-2, 0.5rem);
-    padding-inline-start: var(--sds-g-spacing-3, 0.75rem);
-    padding-inline-end: var(--sds-g-spacing-3, 0.75rem);
+  :host([data-render-mode="shadow"]) .slds-color-picker__selector {
+    margin-block-start: var(--sds-g-spacing-2, 0.5rem);
   }
 
-  :host([data-render-mode="shadow"]) .slds-popover__body,:host([data-render-mode="shadow"]) 
-  .slds-popover__footer {
-    position: relative;
-    padding-block-start: var(--sds-g-spacing-2, 0.5rem);
-    padding-block-end: var(--sds-g-spacing-2, 0.5rem);
-    padding-inline-start: var(--sds-g-spacing-3, 0.75rem);
-    padding-inline-end: var(--sds-g-spacing-3, 0.75rem);
-    word-wrap: break-word;
+  :host([data-render-mode="shadow"]) .slds-color-picker__selector.slds-popover {
+    width: 14rem;
   }
 
-  :host([data-render-mode="shadow"]) .slds-popover__footer {
-    border-top: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-90, #e5e5e5);
-    background-color: var(--sds-g-color-neutral-base-95, #f3f3f3);
-    padding-block-start: var(--sds-g-spacing-2, 0.5rem);
-    padding-block-end: var(--sds-g-spacing-2, 0.5rem);
-    padding-inline-start: var(--sds-g-spacing-3, 0.75rem);
-    padding-inline-end: var(--sds-g-spacing-3, 0.75rem);
+  :host([data-render-mode="shadow"]) .slds-color-picker__selector-footer {
+    display: flex;
   }
 
-  :host([data-render-mode="shadow"]) .slds-color-picker__selector-footer {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: var(--sds-g-spacing-1, 0.25rem);
+  :host([data-render-mode="shadow"]) .slds-color-picker__selector-footer lightning-button {
+    width: 100%;
   }
 
   :host([data-render-mode="shadow"]) .slds-is-absolute {

package/src/lightning/colorPickerPanel/colorPickerPanel.css

@@ -1,5 +1,6 @@
-/* @import 'lightning/sldsCommon';
-@import './color-picker-panel.slds.css'; */
+@import 'lightning/sldsCommon';
+@import './color-picker-panel.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;
     }
 

package/src/lightning/colorPickerPanel/popover.slds.css

@@ -0,0 +1,121 @@
+
+@supports (--styling-hooks: '') {
+  :host([data-render-mode="shadow"]) .slds-popover {
+      position: relative;
+      border-radius: var(--sds-g-radius-border-2, 0.25rem);
+      width: var(--sds-g-sizing-15, 20rem);
+      min-height: calc(var(--sds-g-sizing-5, 1rem) * 2);
+      z-index: var(--slds-c-popover-position-zindex, 6000);
+      background-color: var(--slds-c-popover-color-background,
+          var(--slds-g-color-neutral-base-100,
+              var(--sds-g-color-neutral-base-100, #ffffff)));
+      display: inline-block;
+      box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16);
+      border: var(--sds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-base-1, var(--sds-g-color-border-base-1, #c9c9c9));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__meta {
+      margin-block-end: var(--sds-g-sizing-4, 0.75rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__body {
+      padding-block: var(--sds-g-spacing-2, 0.5rem);
+      padding-inline: var(--sds-g-spacing-3, 0.75rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__body .slds-popover__header {
+      padding-block: 0 var(--sds-g-sizing-3, 0.5rem);
+      padding-inline: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__body,:host([data-render-mode="shadow"]) 
+  .slds-popover__header,:host([data-render-mode="shadow"]) 
+  .slds-popover__footer {
+      position: relative;
+      padding-block: var(--sds-g-spacing-2, 0.5rem);
+      padding-inline: var(--sds-g-spacing-3, 0.75rem);
+      word-wrap: break-word;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__header {
+      border-bottom: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__footer {
+      border-block-start: var(--sds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-base-1, var(--sds-g-color-border-base-1, #c9c9c9));
+      background-color: var(--slds-g-color-neutral-base-95, var(--sds-g-color-neutral-base-95, #f3f3f3));
+      border-end-start-radius: inherit;
+      border-end-end-radius: inherit;
+      padding-block: var(--sds-g-spacing-2, 0.5rem);
+      padding-inline: var(--sds-g-spacing-3, 0.75rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__footer_form {
+      text-align: center;
+      background: var(--slds-g-color-neutral-base-95, var(--sds-g-color-neutral-base-95, #f3f3f3));
+      border-radius: 0 0 var(--sds-g-radius-border-2, 0.25rem) var(--sds-g-radius-border-2, 0.25rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__body_small {
+      max-height: var(--sds-g-sizing-14, 15rem);
+      overflow-y: auto;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover__close {
+      position: relative;
+      margin-block: var(--sds-g-spacing-1, 0.25rem);
+      margin-inline: var(--sds-g-spacing-1, 0.25rem);
+      z-index: calc(var(--slds-c-popover-position-zindex, 6000) + 1);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_small {
+      max-width: var(--sds-g-sizing-14, 15rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_medium {
+      min-width: var(--sds-g-sizing-15, 20rem);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_large {
+      min-width: 25rem;
+      max-width: 512px;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover[class*="theme_"] {
+      border: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover *:last-child {
+      margin-bottom: 0;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_full-width {
+      width: 100%;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_hide {
+      display: none;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_dark {
+      background-color: var(--slds-g-color-brand-base-30, var(--sds-g-color-brand-base-30, #014486));
+      color: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_dark .slds-badge {
+      background-color: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_dark .slds-popover__close {
+      color: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_dark .slds-icon-text-default {
+      fill: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
+  }
+
+  :host([data-render-mode="shadow"]) .slds-popover_dark .slds-popover__footer {
+      border-top-color: var(--slds-g-color-brand-base-10, var(--sds-g-color-brand-base-10, #001639));
+      background-color: var(--slds-g-color-brand-base-20, var(--sds-g-color-brand-base-20, #032d60));
+  }
+}

package/src/lightning/combobox/combobox.css

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

package/src/lightning/combobox/combobox.html

@@ -1,33 +1,35 @@
 <template>
-    <label class={computedLabelClass}>
-        <template if:true={required}>
-            <abbr class="slds-required" title={i18n.required}>*</abbr>
-        </template>
-        {label}
-    </label>
-    <lightning-helptext if:true={_fieldLevelHelp} content={_fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
+    <div part="combobox">
+        <label class={computedLabelClass}>
+            <template if:true={required}>
+                <abbr class="slds-required" title={i18n.required}>*</abbr>
+            </template>
+            {label}
+        </label>
+        <lightning-helptext if:true={_fieldLevelHelp} content={_fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
 
-    <div class="slds-form-element__control">
-        <lightning-base-combobox name={name}
-            autocomplete={autocomplete}
-            required={required}
-            disabled={disabled}
-            placeholder={placeholder}
-            items={_items}
-            input-text={_selectedLabel}
-            input-label={label}
-            input-icon-size="xx-small"
-            input-icon-name="utility:down"
-            show-dropdown-activity-indicator={spinnerActive}
-            dropdown-alignment={dropdownAlignment}
-            ondropdownopen={handleDropdownOpen}
-            onfocus={handleFocus}
-            onblur={handleBlur}
-            onready={handleComboboxReady}
-            onselect={handleSelect}></lightning-base-combobox>
+        <div class="slds-form-element__control">
+            <lightning-base-combobox name={name}
+                autocomplete={autocomplete}
+                root-aria-node={templateRootNode}
+                required={required}
+                disabled={disabled}
+                placeholder={placeholder}
+                items={_items}
+                input-text={_selectedLabel}
+                input-label={label}
+                input-icon-size="xx-small"
+                input-icon-name="utility:down"
+                show-dropdown-activity-indicator={spinnerActive}
+                dropdown-alignment={dropdownAlignment}
+                ondropdownopen={handleDropdownOpen}
+                onfocus={handleFocus}
+                onblur={handleBlur}
+                onready={handleComboboxReady}
+                onselect={handleSelect}></lightning-base-combobox>
+        </div>
+        <template if:true={_helpMessage}>
+            <div id="help-text" data-help-text class="slds-form-element__help" aria-live="assertive">{_helpMessage}</div>
+        </template>
     </div>
-    <template if:true={_helpMessage}>
-        <div id="help-text" data-help-text class="slds-form-element__help" aria-live="assertive">{_helpMessage}</div>
-    </template>
-
 </template>