lightning-base-components 1.21.1-alpha → 1.21.3-alpha

package/src/lightning/pillContainer/pill.slds.css

@@ -1,176 +1,155 @@
 
-@supports (--styling-hooks: '') {
     /* re-assign current slds hooks using deprecated naming conventions */
     :host([data-render-mode="shadow"]) {
-      --slds-c-pill-spacing-block-end: var(--slds-c-pill-spacing-blockend);
-      --slds-c-pill-spacing-block-start: var(--slds-c-pill-spacing-blockstart);
-      --slds-c-pill-spacing-inline-end: var(--slds-c-pill-spacing-inlineend);
-      --slds-c-pill-spacing-inline-start: var(--slds-c-pill-spacing-inlinestart);
+      /* stylelint-disable */
+      --slds-c-pill-spacing-blockend: var(--slds-c-pill-spacing-block-end);
+      --slds-c-pill-spacing-blockstart: var(--slds-c-pill-spacing-block-start);
+      --slds-c-pill-spacing-inlineend: var(--slds-c-pill-spacing-inline-end);
+      --slds-c-pill-spacing-inlinestart: var(--slds-c-pill-spacing-inline-start);
+      /* stylelint-enable */
     }
-
-  :host([data-render-mode="shadow"]) .slds-pill {
+    :host([data-render-mode="shadow"]) .slds-pill {
     display: inline-flex;
     align-items: center;
     justify-content: space-between;
-    line-height: var(--sds-g-font-lineheight-4, 1.5);
+    line-height: var(--slds-g-font-lineheight-4);
     max-width: 100%;
-    padding-block-start: var(--slds-c-pill-spacing-blockstart, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-inline-end: var(--slds-c-pill-spacing-inlineend, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-block-end: var(--slds-c-pill-spacing-blockend, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-inline-start: var(--slds-c-pill-spacing-inlinestart, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    border-width: var(--slds-c-pill-sizing-border, var(--sds-g-sizing-border-1, 1px));
+    padding-block-start: var(--slds-c-pill-spacing-blockstart, calc(var(--slds-g-spacing-1) / 2));
+    padding-inline-end: var(--slds-c-pill-spacing-inlineend, calc(var(--slds-g-spacing-1) / 2));
+    padding-block-end: var(--slds-c-pill-spacing-blockend, calc(var(--slds-g-spacing-1) / 2));
+    padding-inline-start: var(--slds-c-pill-spacing-inlinestart, calc(var(--slds-g-spacing-1) / 2));
+    border-width: var(--slds-c-pill-sizing-border, var(--slds-g-sizing-border-1));
     border-style: solid;
-    border-color: var(--slds-c-pill-color-border, var(--sds-g-color-neutral-base-90, #e5e5e5));
-    border-radius: var(--slds-c-pill-radius-border, var(--sds-g-spacing-1, 0.25rem));
-    background-color: var(--slds-c-pill-color-background, var(--sds-g-color-neutral-base-100, #ffffff));
+    border-color: var(--slds-c-pill-color-border, var(--slds-g-color-border-2));
+    border-radius: var(--slds-c-pill-radius-border, var(--slds-g-spacing-1));
+    background-color: var(--slds-c-pill-color-background, var(--slds-g-color-surface-container-1));
     box-shadow: var(--slds-c-pill-shadow);
     position: relative;
-    min-height: calc(var(--sds-g-sizing-7, 1.5rem) + var(--sds-g-sizing-1, 0.125rem));
+    min-height: calc(var(--slds-g-sizing-7) + var(--slds-g-sizing-1));
   }
-
-  :host([data-render-mode="shadow"]) .slds-pill + .slds-pill {
-    margin-inline-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    :host([data-render-mode="shadow"]) .slds-pill + .slds-pill {
+    margin-inline-start: calc(var(--slds-g-spacing-1) / 2);
   }
-
-  :host([data-render-mode="shadow"]) .slds-pill:hover {
-    --slds-c-pill-color-background: var(--sds-g-color-neutral-base-95, #f3f3f3);
+    :host([data-render-mode="shadow"]) .slds-pill:hover {
+    --slds-c-pill-color-background: var(--slds-g-color-surface-container-2);
   }
-
-  :host([data-render-mode="shadow"]) .slds-pill:focus {
+    :host([data-render-mode="shadow"]) .slds-pill:focus {
     outline: 0;
-    --slds-c-pill-color-border: var(--sds-g-color-brand-base-60, #1b96ff);
-    --slds-c-pill-shadow: 0 0 3px var(--sds-g-color-brand-base-50, #0176d3);
+    --slds-c-pill-color-border: var(--slds-g-color-border-accent-3);
+    --slds-c-pill-shadow: 0 0 3px var(--slds-g-color-border-accent-3);
   }
-
- :host([data-render-mode="shadow"]) a {
+    :host([data-render-mode="shadow"]) a {
     text-decoration: none;
-    color: var(--sds-g-color-brand-base-50, #0176d3);
+    color: var(--slds-g-color-accent-2);
   }
-
-  :host([data-render-mode="shadow"]) a:hover,:host([data-render-mode="shadow"])  a:focus{
+    :host([data-render-mode="shadow"]) a:hover,:host([data-render-mode="shadow"])  a:focus{
     text-decoration: none;
-    color:var(--sds-g-color-brand-base-30, #014486);
+    color:var(--slds-g-color-accent-4);
   }
-
-  :host([data-render-mode="shadow"]) a:active{
-    color:var(--sds-g-color-brand-base-30, #014486);
+    :host([data-render-mode="shadow"]) a:active{
+    color:var(--slds-g-color-accent-4);
   }
-
-  :host([data-render-mode="shadow"]) .slds-truncate {
+    :host([data-render-mode="shadow"]) .slds-truncate {
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-
-  :host([data-render-mode="shadow"]) .slds-pill_bare {
+    :host([data-render-mode="shadow"]) .slds-pill_bare {
     --slds-c-pill-color-background: transparent;
     --slds-c-pill-sizing-border: 0;
   }
-
-  :host([data-render-mode="shadow"]) .slds-pill_bare:hover {
+    :host([data-render-mode="shadow"]) .slds-pill_bare:hover {
     --slds-c-pill-color-background-: transparent;
   }
-
-  :host([data-render-mode="shadow"]) .slds-pill__label {
+    :host([data-render-mode="shadow"]) .slds-pill__label {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
-
-  :host([data-render-mode="shadow"]) .slds-pill__label:focus {
+    :host([data-render-mode="shadow"]) .slds-pill__label:focus {
     outline: 0;
-    border-radius: var(--sds-g-radius-border-2, 0.25rem);
-    box-shadow: var(--slds-c-pill-label-shadow-focus, 0 0 3px var(--sds-g-color-brand-base-50, #0176d3));
+    border-radius: var(--slds-g-radius-border-2);
+    box-shadow: var(--slds-c-pill-label-shadow-focus, 0 0 3px var(--slds-g-color-border-accent-3));
   }
-
-  :host([data-render-mode="shadow"]) .slds-pill__icon,:host([data-render-mode="shadow"]) 
+    :host([data-render-mode="shadow"]) .slds-pill__icon,:host([data-render-mode="shadow"]) 
   .slds-pill__icon_container {
-    width: var(--sds-g-sizing-6, 1.25rem);
-    height: var(--sds-g-sizing-6, 1.25rem);
-    margin-inline-end: var(--sds-g-spacing-1, 0.25rem);
+    width: var(--slds-g-sizing-6);
+    height: var(--slds-g-sizing-6);
+    margin-inline-end: var(--slds-g-spacing-1);
   }
+    :host([data-render-mode="shadow"]) .slds-pill ::slotted(*) {
+    --slds-c-avatar-sizing: var(--slds-g-sizing-6);
+    --slds-c-icon-sizing: calc(var(--slds-g-sizing-6) - var(--slds-g-sizing-border-2));
 
-  :host([data-render-mode="shadow"]) .slds-pill ::slotted(*) {
-    --slds-c-avatar-sizing: var(--sds-g-sizing-6, 1.25rem);
-    --slds-c-icon-sizing: calc(var(--sds-g-sizing-6, 1.25rem) - var(--sds-g-sizing-border-2, 2px));
-
-    color: var(--slds-c-pill-text-color, var(--sds-g-color-neutral-base-100, #ffffff));
+    color: var(--slds-c-pill-text-color, var(--slds-g-color-neutral-base-100));
     display: block;
-    font-size: var(--sds-g-font-scale-neg-4, 0.625rem);
+    font-size: var(--slds-g-font-scale-neg-4);
   }
-
-  :host([data-render-mode="shadow"]) .slds-pill__icon ~ .slds-pill__action,:host([data-render-mode="shadow"]) 
+    :host([data-render-mode="shadow"]) .slds-pill__icon ~ .slds-pill__action,:host([data-render-mode="shadow"]) 
   .slds-pill__icon_container ~ .slds-pill__action {
-    padding-inline-start: calc(var(--sds-g-spacing-5, 1.5rem) + 2px);
+    padding-inline-start: calc(var(--slds-g-spacing-5) + 2px);
   }
-
-  :host([data-render-mode="shadow"]) .slds-pill__remove {
-    width: var(--sds-g-sizing-5, 1rem);
-    height: var(--sds-g-sizing-5, 1rem);
+    :host([data-render-mode="shadow"]) .slds-pill__remove {
+    width: var(--slds-g-sizing-5);
+    height: var(--slds-g-sizing-5);
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    margin-inline-start: var(--sds-g-sizing-2, 0.25rem);
-    border-radius: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    margin-inline-start: var(--slds-g-sizing-2);
+    border-radius: calc(var(--slds-g-spacing-1) / 2);
   }
-
-  :host([data-render-mode="shadow"]) .slds-pill__remove svg {
-    width: calc(var(--sds-g-sizing-1, 0.125rem) * 3);
-    height: calc(var(--sds-g-sizing-1, 0.125rem) * 3);
+    :host([data-render-mode="shadow"]) .slds-pill__remove svg {
+    width: calc(var(--slds-g-sizing-1) * 3);
+    height: calc(var(--slds-g-sizing-1) * 3);
   }
-
-  :host([data-render-mode="shadow"]) .slds-pill_link {
+    :host([data-render-mode="shadow"]) .slds-pill_link {
     border: 0;
     padding: 0;
   }
-
-  :host([data-render-mode="shadow"]) .slds-pill_link .slds-pill__icon_container {
+    :host([data-render-mode="shadow"]) .slds-pill_link .slds-pill__icon_container {
     display: inline-block;
     position: absolute;
     top: 50%;
-    left: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    left: calc(var(--slds-g-spacing-1) / 2);
     transform: translateY(-50%);
   }
-
-  :host([data-render-mode="shadow"]) .slds-pill_link .slds-pill__remove {
+    :host([data-render-mode="shadow"]) .slds-pill_link .slds-pill__remove {
     position: absolute;
     top: 50%;
-    right: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    right: calc(var(--slds-g-spacing-1) / 2);
     transform: translateY(-50%);
   }
-
-  :host([data-render-mode="shadow"]) .slds-pill__action {
-    padding-block-start: var(--slds-c-pill-spacing-blockstart, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-inline-end: var(--slds-c-pill-spacing-inlineend, calc((var(--sds-g-spacing-2, 0.5rem) / 2) + 1rem));
-    padding-block-end: var(--slds-c-pill-spacing-blockend, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
-    padding-inline-start: var(--slds-c-pill-spacing-inlinestart, calc(var(--sds-g-spacing-1, 0.25rem) / 2));
+    :host([data-render-mode="shadow"]) .slds-pill__action {
+    padding-block-start: var(--slds-c-pill-spacing-blockstart, calc(var(--slds-g-spacing-1) / 2));
+    padding-inline-end: var(--slds-c-pill-spacing-inlineend, calc((var(--slds-g-spacing-2) / 2) + 1rem));
+    padding-block-end: var(--slds-c-pill-spacing-blockend, calc(var(--slds-g-spacing-1) / 2));
+    padding-inline-start: var(--slds-c-pill-spacing-inlinestart, calc(var(--slds-g-spacing-1) / 2));
     border-width: var(--slds-c-pill-sizing-border, 1px);
     border-style: solid;
-    border-color: var(--slds-c-pill-color-border, var(--sds-g-color-neutral-base-90, #e5e5e5));
-    border-radius: var(--slds-c-pill-radius-border, var(--sds-g-radius-border-2, 0.25rem));
+    border-color: var(--slds-c-pill-color-border, var(--slds-g-color-border-2));
+    border-radius: var(--slds-c-pill-radius-border, var(--slds-g-radius-border-2));
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     flex-grow: 1;
   }
-
-  :host([data-render-mode="shadow"]) .slds-pill__action:focus {
+    :host([data-render-mode="shadow"]) .slds-pill__action:focus {
     outline: 0;
-    border-color: var(--slds-c-pill-action-color-border, var(--sds-g-color-brand-base-60, #1b96ff));
-    box-shadow: var(--slds-c-pill-action-shadow, 0 0 3px var(--sds-g-color-brand-base-50, #0176d3));
+    border-color: var(--slds-c-pill-action-color-border, var(--slds-g-color-border-accent-3));
+    box-shadow: var(--slds-c-pill-action-shadow, 0 0 3px var(--slds-g-color-border-accent-2));
   }
-
-  :host([data-render-mode="shadow"]) .slds-has-error {
-    border-color: var(--slds-c-pill-error-color-border, var(--sds-g-color-error-base-50, #ea001e));
+    :host([data-render-mode="shadow"]) .slds-has-error {
+    border-color: var(--slds-c-pill-error-color-border, var(--slds-g-color-border-error-1));
   }
-
-  :host([data-render-mode="shadow"]) .slds-has-error:active {
-    border-color: var(--slds-c-pill-error-color-border-active, var(--sds-g-color-error-base-50, #ea001e));
+    :host([data-render-mode="shadow"]) .slds-has-error:active {
+    border-color: var(--slds-c-pill-error-color-border-active, var(--slds-g-color-border-error-1));
   }
-
-  :host([data-render-mode="shadow"]) .slds-has-error .slds-pill__label {
-    font-weight: var(--sds-g-font-weight-7, 700);
-    color: var(--sds-g-color-error-base-50, #ea001e);
+    :host([data-render-mode="shadow"]) .slds-has-error .slds-pill__label {
+    font-weight: var(--slds-g-font-weight-7);
+    color: var(--slds-g-color-error-1);
+  }
+    :host([data-render-mode="shadow"]) .slds-pill__action:hover {
+    text-decoration: underline;
+    color: var(--slds-g-color-accent-4);
   }
-}

package/src/lightning/pillContainer/pillContainer.js

@@ -1,6 +1,7 @@
 import labelContainerLabel from '@salesforce/label/LightningPillContainer.label';
 import pillContainerMoreLabel from '@salesforce/label/LightningPillContainer.more';
-import { LightningElement, api, track } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import LightningPillItem from './pillItem';
 import {
     keyCodes,
@@ -24,23 +25,24 @@ const i18n = {
 /**
  * A list of pills grouped in a container. This component requires API version 42.0 and later.
  */
-export default class LightningPillContainer extends LightningElement {
+export default class LightningPillContainer extends LightningShadowBaseClass {
     /**
      * Aria label for the pill container to describe the list of options.
      * @type {string}
      */
     @api label = i18n.containerLabel;
 
-    @track _variant;
-    @track _singleLine = false;
-    @track _isExpanded = false;
-    @track _isCollapsible = false;
-    @track _focusedIndex = 0;
-    @track _focusedTabIndex = 0;
-    @track _pillsNotFittingCount;
-    @track _pillContainerElementId;
+    _variant;
+    _singleLine = false;
+    _isExpanded = false;
+    _isCollapsible = false;
+    _focusedIndex = 0;
+    _focusedTabIndex = 0;
+    _pillsNotFittingCount;
+    _pillContainerElementId;
 
     connectedCallback() {
+        super.connectedCallback();
         this._connected = true;
     }
 
@@ -145,6 +147,7 @@ export default class LightningPillContainer extends LightningElement {
 
     set singleLine(value) {
         this._singleLine = normalizeBoolean(value);
+        reflectAttribute(this, 'single-line', this._singleLine);
     }
 
     /**
@@ -206,8 +209,8 @@ export default class LightningPillContainer extends LightningElement {
     }
 
     get computedListboxClass() {
-        const singleLineClass = this.singleLine ? 'slds-listbox_inline' : '';
-        return `slds-listbox slds-is-relative slds-listbox_horizontal ${singleLineClass}`;
+        const singleLineClass = this.singleLine ? ' slds-listbox_inline' : '';
+        return `slds-listbox slds-is-relative slds-listbox_horizontal${singleLineClass}`;
     }
 
     get focusedIndex() {

package/src/lightning/pillContainer/pillContainer.js-meta.xml

@@ -3,4 +3,7 @@
     <isExposed>true</isExposed>
     <minApiVersion>42.0</minApiVersion>
     <support>GA</support>
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
 </LightningComponentBundle>

package/src/lightning/pillContainer/standardPillContainer.css

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

package/src/lightning/pillContainer/standardPillContainer.html

@@ -1,7 +1,7 @@
 <template>
     <div class={computedWrapperClass} part="listbox pill-container">
         <template if:true={_showMore}>
-            <span class="slds-listbox-toggle" aria-hidden="true"><button class="slds-button" tabindex="-1" onclick={handleMoreClick}>{computedPillCountMoreLabel}</button></span>
+            <span class="slds-listbox-toggle" aria-hidden="true"><button part="button" class="slds-button" tabindex="-1" onclick={handleMoreClick}>{computedPillCountMoreLabel}</button></span>
         </template>
         <ul
             class={computedListboxClass}

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

@@ -1,30 +1,28 @@
 
-@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);
+      border-radius: var(--slds-g-radius-border-2);
+      width: var(--slds-g-sizing-15);
+      min-height: calc(var(--slds-g-sizing-5) * 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)));
+          var(--slds-g-color-surface-container-1));
       display: inline-block;
       box-shadow: 0 2px 3px 0 rgba(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));
+      border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
   }
 
   :host([data-render-mode="shadow"]) .slds-popover__meta {
-      margin-block-end: var(--sds-g-sizing-4, 0.75rem);
+      margin-block-end: var(--slds-g-sizing-4);
   }
 
   :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);
+      padding-block: var(--slds-g-spacing-2);
+      padding-inline: var(--slds-g-spacing-3);
   }
 
   :host([data-render-mode="shadow"]) .slds-popover__body .slds-popover__header {
-      padding-block: 0 var(--sds-g-sizing-3, 0.5rem);
+      padding-block: 0 var(--slds-g-sizing-3);
       padding-inline: 0;
   }
 
@@ -32,8 +30,8 @@
   .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);
+      padding-block: var(--slds-g-spacing-2);
+      padding-inline: var(--slds-g-spacing-3);
       word-wrap: break-word;
   }
 
@@ -42,38 +40,38 @@
   }
 
   :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-block-start: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
+      background-color: var(--slds--g-color-surface-container-2);
       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);
+      padding-block: var(--slds-g-spacing-2);
+      padding-inline: var(--slds-g-spacing-3);
   }
 
   :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);
+      background: var(--slds-g-color-surface-container-2);
+      border-radius: 0 0 var(--slds-g-radius-border-2) var(--slds-g-radius-border-2);
   }
 
   :host([data-render-mode="shadow"]) .slds-popover__body_small {
-      max-height: var(--sds-g-sizing-14, 15rem);
+      max-height: var(--slds-g-sizing-14);
       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);
+      margin-block: var(--slds-g-spacing-1);
+      margin-inline: var(--slds-g-spacing-1);
       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);
+      max-width: var(--slds-g-sizing-14);
   }
 
   :host([data-render-mode="shadow"]) .slds-popover_medium {
-      min-width: var(--sds-g-sizing-15, 20rem);
+      min-width: var(--slds-g-sizing-15);
   }
 
   :host([data-render-mode="shadow"]) .slds-popover_large {
@@ -98,24 +96,23 @@
   }
 
   :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));
+      background-color: var(--slds-g-color-accent-container-3);
+      color: var(--slds-g-color-on-accent-1);
   }
 
   :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));
+      background-color: var(--slds-g-color-surface-container-1);
   }
 
   :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));
+      color: var(--slds-g-color-on-accent-1);
   }
 
   :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));
+      fill: var(--slds-g-color-on-accent-1);
   }
 
   :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));
+      border-top-color: var(--slds-g-color-border-accent-2);
+      background-color: var(--slds-g-color-on-accent-2);
   }
-}

package/src/lightning/popup/popup.css

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

package/src/lightning/popup/popup.js

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

package/src/lightning/popup/popup.js-meta.xml

@@ -1,4 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
     <isExposed>true</isExposed>
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
 </LightningComponentBundle>

package/src/lightning/popup/popup.lbc.native.css

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

package/src/lightning/primitiveBubble/primitiveBubble.css

@@ -1,11 +1,2 @@
-/* @import 'lightning/sldsCommon';
-@import './tooltip.slds.css'; */
-
-/* Fix for tooltip alignment issue, for details see: W-11677142
- *
- * fix-tooltip_alignment - the custom class that edits min-width
- */
-
-.fix-popover_tooltip_alignment {
-    min-width: inherit;
-}
+@import './primitiveBubble.lbc.synthetic.css';
+@import './primitiveBubble.lbc.native.css';

package/src/lightning/primitiveBubble/primitiveBubble.js

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

package/src/lightning/primitiveBubble/primitiveBubble.js-meta.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
+</LightningComponentBundle>

package/src/lightning/primitiveBubble/primitiveBubble.lbc.native.css

@@ -0,0 +1,2 @@
+@import 'lightning/sldsCommon';
+@import './tooltip.slds.css';

package/src/lightning/primitiveBubble/primitiveBubble.lbc.synthetic.css

@@ -0,0 +1,8 @@
+/* Fix for tooltip alignment issue, for details see: W-11677142
+ *
+ * fix-tooltip_alignment - the custom class that edits min-width
+ */
+
+.fix-popover_tooltip_alignment {
+    min-width: inherit;
+}